/*
 * Início: globo de pedidos como ENTRADA da plataforma (22/10/2026). Somente apresentação.
 * Mesmo prefixo, mesmas variáveis --v2i-* e o mesmo verde-escuro do cartão "Deixe sua conta pronta".
 */
html body.rottads-interface #inicioV2 .v2i-mapa {
  position: relative; overflow: hidden; border-radius: 22px; color: #fff; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch;
  background: radial-gradient(70% 90% at 75% 50%, #024a45 0%, rgba(2, 74, 69, 0) 70%), linear-gradient(135deg, var(--v2i-teal) 0%, #014a44 100%);
  box-shadow: 0 30px 50px -36px rgba(1, 55, 53, .75);
}
html body.rottads-interface #inicioV2 .v2i-mapa::before {
  content: ''; position: absolute; left: -160px; top: -200px; width: 460px; height: 460px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(2, 248, 167, .10), transparent 66%);
}
html body.rottads-interface #inicioV2 .v2i-mapa > * { position: relative; z-index: 1; min-width: 0; }
html body.rottads-interface #inicioV2 .v2i-mapa button:focus-visible { outline: 2px solid #02f8a7; outline-offset: 2px; }

/* ------------------------------------------------------------ texto */
html body.rottads-interface #inicioV2 .v2i-mapa-texto { padding: 34px 10px 30px 38px; display: flex; flex-direction: column; gap: 14px; }
html body.rottads-interface #inicioV2 .v2i-mapa-titulo {
  font-family: 'Outfit', 'Nunito Sans', sans-serif; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.6px; color: #fff;
}
html body.rottads-interface #inicioV2 .v2i-mapa-titulo b { font-size: 44px; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; margin-right: 2px; }
html body.rottads-interface #inicioV2 .v2i-mapa-sub { font-size: 14px; color: rgba(255,255,255,.7); margin-top: -6px; }
html body.rottads-interface #inicioV2 .v2i-mapa-esq { height: 14px; border-radius: 7px; background: rgba(255,255,255,.1); margin: 9px 0; }
html body.rottads-interface #inicioV2 .v2i-mapa-acoes { margin-top: auto; padding-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; }

html body.rottads-interface #inicioV2 .v2i-mapa-top { display: grid; gap: 2px; }
html body.rottads-interface #inicioV2 .v2i-mapa-top button {
  width: 100%; display: grid; grid-template-columns: 18px minmax(0, 9.5em) minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: #fff; transition: background .15s ease;
}
html body.rottads-interface #inicioV2 .v2i-mapa-top button:hover { background: rgba(255,255,255,.07); }
html body.rottads-interface #inicioV2 .v2i-mapa-top .pos { font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.55); text-align: center; }
html body.rottads-interface #inicioV2 .v2i-mapa-top .nome { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.rottads-interface #inicioV2 .v2i-mapa-top .barra { height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
html body.rottads-interface #inicioV2 .v2i-mapa-top .barra em { display: block; height: 100%; border-radius: 4px; }
html body.rottads-interface #inicioV2 .v2i-mapa-top b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
html body.rottads-interface #inicioV2 .v2i-mapa-nota { font-size: 13px; color: rgba(255,255,255,.62); line-height: 1.5; }
/* Resultado do período e aviso do webhook (22/10/2026) */
html body.rottads-interface #inicioV2 .v2i-mapa-resultado { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
html body.rottads-interface #inicioV2 .v2i-mapa-resultado li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 8px 10px; font-size: 13px; color: rgba(255,255,255,.75); }
html body.rottads-interface #inicioV2 .v2i-mapa-resultado b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
html body.rottads-interface #inicioV2 .v2i-mapa-resultado small { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.6); }
html body.rottads-interface #inicioV2 .v2i-mapa-aviso { margin-top: 10px; display: grid; gap: 8px; justify-items: start; border: 1px solid rgba(255,209,102,.35); background: rgba(255,209,102,.08); border-radius: 12px; padding: 10px 12px; }
html body.rottads-interface #inicioV2 .v2i-mapa-aviso p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.82); }
@media (max-width: 520px) { html body.rottads-interface #inicioV2 .v2i-mapa-resultado { grid-template-columns: 1fr; } }

html body.rottads-interface #inicioV2 .v2i-mapa-estado h3 { display: flex; align-items: center; gap: 10px; font: 800 22px/1.2 'Outfit', 'Nunito Sans', sans-serif; margin: 0 0 12px; color: #fff; }
html body.rottads-interface #inicioV2 .v2i-mapa-estado h3 i { width: 14px; height: 14px; border-radius: 4px; }
html body.rottads-interface #inicioV2 .v2i-mapa-estado dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
html body.rottads-interface #inicioV2 .v2i-mapa-estado dl div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 10px 12px; }
html body.rottads-interface #inicioV2 .v2i-mapa-estado dt { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.65); }
html body.rottads-interface #inicioV2 .v2i-mapa-estado dd { margin: 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
html body.rottads-interface #inicioV2 .v2i-mapa-voltar { border: 0; background: none; padding: 4px 0; color: #02f8a7; font-weight: 800; font-size: 14px; }

html body.rottads-interface #inicioV2 .v2i-mapa-vazio { display: grid; gap: 14px; justify-items: start; }
html body.rottads-interface #inicioV2 .v2i-mapa-vazio p { color: rgba(255,255,255,.75); font-size: 15px; line-height: 1.5; max-width: 360px; }

/* ------------------------------------------------------------ globo */
html body.rottads-interface #inicioV2 .v2i-mapa-palco { position: relative; min-height: 470px; }
html body.rottads-interface #inicioV2 .v2i-mapa-palco canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y;
  /* o brilho do globo some aos poucos na emenda com o texto (sem linha reta quando aproxima) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70px); mask-image: linear-gradient(90deg, transparent 0, #000 70px);
}
html body.rottads-interface #inicioV2 .v2i-mapa-palco canvas.arrastando { cursor: grabbing; }
html body.rottads-interface #inicioV2 .v2i-mapa-palco canvas.sobre { cursor: pointer; }
html body.rottads-interface #inicioV2 .v2i-mapa-palco canvas:focus-visible { outline: 2px solid #8ff0c6; outline-offset: -4px; }
html body.rottads-interface #inicioV2 .v2i-mapa-palco.sem-globo::after {
  content: "O globo não carregou. Os números ao lado continuam certos."; position: absolute; inset: auto 16px 50% 16px; text-align: center; font-size: 13px; color: rgba(255,255,255,.75);
}

html body.rottads-interface #inicioV2 .v2i-mapa-zoom { position: absolute; top: 18px; right: 18px; display: grid; gap: 6px; z-index: 2; }
html body.rottads-interface #inicioV2 .v2i-mapa-zoom button {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff;
  font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
html body.rottads-interface #inicioV2 .v2i-mapa-zoom button:hover { background: rgba(255,255,255,.16); }
html body.rottads-interface #inicioV2 .v2i-mapa-zoom button:disabled { opacity: .4; cursor: default; }

html body.rottads-interface #inicioV2 .v2i-mapa-legenda {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; width: min(440px, calc(100% - 32px)); z-index: 2;
  display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.82); pointer-events: none;
}
html body.rottads-interface #inicioV2 .v2i-mapa-legenda ol { display: flex; gap: 3px; flex: 1 1 auto; }
html body.rottads-interface #inicioV2 .v2i-mapa-legenda li { flex: 1 1 0; display: grid; gap: 3px; min-width: 0; }
html body.rottads-interface #inicioV2 .v2i-mapa-legenda i { display: block; height: 10px; border-radius: 3px; }
html body.rottads-interface #inicioV2 .v2i-mapa-legenda b { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.75); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body.rottads-interface #inicioV2 .v2i-mapa-legenda span { white-space: nowrap; }

html body.rottads-interface #inicioV2 .v2i-mapa-dica {
  position: absolute; z-index: 3; pointer-events: none; background: #fff; color: var(--v2i-ink); font-size: 13px; padding: 8px 11px; border-radius: 10px;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,.5); opacity: 0; transition: opacity .15s ease; white-space: nowrap; font-variant-numeric: tabular-nums;
}
html body.rottads-interface #inicioV2 .v2i-mapa-dica.ver { opacity: 1; }
html body.rottads-interface #inicioV2 .v2i-mapa-dica b { display: block; font-family: 'Outfit', 'Nunito Sans', sans-serif; font-size: 14.5px; }

/* ------------------------------------------------------------ telas estreitas: globo em cima, texto embaixo */
@container v2ihost (max-width: 820px) {
  html body.rottads-interface #inicioV2 .v2i-mapa { grid-template-columns: 1fr; }
  html body.rottads-interface #inicioV2 .v2i-mapa-palco { order: -1; min-height: 360px; }
  html body.rottads-interface #inicioV2 .v2i-mapa-palco canvas {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 60px), transparent);
  }
  html body.rottads-interface #inicioV2 .v2i-mapa-texto { padding: 6px 20px 24px; }
  html body.rottads-interface #inicioV2 .v2i-mapa-titulo { font-size: 24px; }
  html body.rottads-interface #inicioV2 .v2i-mapa-titulo b { font-size: 36px; }
  html body.rottads-interface #inicioV2 .v2i-mapa-acoes .v2i-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html body.rottads-interface #inicioV2 .v2i-mapa-dica, html body.rottads-interface #inicioV2 .v2i-mapa-top button,
  html body.rottads-interface #inicioV2 .v2i-mapa-zoom button { transition: none; }
}