/* Argos Família. Tema escuro neutro, cor só nos três botões de crise e nos estados.
   Referências: tela de viagem do Uber, rastreio de pedido do iFood, localização ao vivo do WhatsApp. */
:root {
  --fundo: #0e0e10;
  --painel: #17171a;
  --painel-2: #202024;
  --painel-3: #2a2a2f;
  --borda: #26262b;
  --borda-forte: #38383e;
  --texto: #ffffff;
  --texto-2: #b4b4b8;
  --texto-3: #8e8e93;
  --vermelho: #e3262a;
  --vermelho-escuro: #9f1418;
  --azul: #2f6fd6;
  --azul-escuro: #1b4c9c;
  --dourado: #c9a24a;
  --dourado-escuro: #8a6c27;
  --verde: #30a46c;
  --ambar: #e0a020;
  --eu: #2f7cf6;
  --raio: 16px;
  --raio-p: 12px;
  --safe-topo: env(safe-area-inset-top, 0px);
  --safe-base: env(safe-area-inset-bottom, 0px);
  --abas: 58px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { color-scheme: dark; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.4;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button, a, select, input { touch-action: manipulation; }
input, select { font: inherit; -webkit-user-select: text; user-select: text; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ic { display: block; flex: none; }
.sub { color: var(--texto-2); font-size: 14px; line-height: 20px; }
.meta { color: var(--texto-3); font-size: 13px; line-height: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: hover) { button:hover, a:hover { filter: brightness(1.1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

#tela { flex: 1; min-height: 0; padding: calc(10px + var(--safe-topo)) 16px 16px; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; }
#tela.cheia { padding: 0; overflow: hidden; }
#tela > * { flex-shrink: 0; }

/* barra de abas */
#abas { display: flex; background: #121214; border-top: 1px solid var(--borda); padding: 0 6px var(--safe-base); height: calc(var(--abas) + var(--safe-base)); flex: none; }
body.sem-abas #abas { display: none; }
#abas button { flex: 1; color: var(--texto-3); font-size: 11px; font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; }
#abas button.ativa { color: var(--texto); }
#abas i { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 17px; height: 17px; border-radius: 9px; background: var(--vermelho); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
#abas i[hidden] { display: none; }

/* avatar */
.av { --t: 40px; --h: #555; width: var(--t); height: var(--t); border-radius: 50%; background: var(--h); color: #fff; font-weight: 700; font-size: calc(var(--t) * 0.4); display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative; }
.av.anel { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 4px var(--anel, var(--borda-forte)); }
.av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 32%; display: block; }
.av.ok { --anel: var(--verde); }
.av.atencao { --anel: var(--ambar); }
.av.emergencia { --anel: var(--vermelho); animation: pulso-anel 1.4s ease-in-out infinite; }
.av.desatualizado, .av.sem { --anel: var(--borda-forte); }
.av.sem { opacity: 0.6; }
@keyframes pulso-anel { 50% { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 6px var(--vermelho); } }

/* ---------- início ---------- */
.inicio { flex: 1; display: flex; flex-direction: column; min-height: 100%; }
.topo { display: flex; justify-content: space-between; align-items: center; height: 40px; }
.logo { font-size: 14px; font-weight: 800; letter-spacing: 0.22em; color: var(--dourado); }
.titulo-grande { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; margin-top: 10px; }
.resumo { margin-top: 2px; }
.banner { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: var(--raio-p); background: var(--painel); text-align: left; }
.banner.perigo { background: #2a1214; }
.banner.medica { background: #121c2c; }
.banner.central { background: #241e10; }
.banner.offline { background: #2a2210; align-items: flex-start; }
.banner.offline .ic { color: var(--ambar); margin-left: 0; margin-top: 2px; }
.banner b { display: block; font-size: 15px; }
.banner .ic { color: var(--texto-3); margin-left: auto; }
.historias { display: flex; gap: 16px; overflow-x: auto; margin: 18px -16px 0; padding: 4px 16px 2px; scrollbar-width: none; }
.historias::-webkit-scrollbar { display: none; }
.historia { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 60px; flex: none; }
.historia .nome { font-size: 12px; color: var(--texto-2); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crise-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 18px 0 14px; min-height: 360px; }
.crise {
  --cor: var(--vermelho); --cor-escura: var(--vermelho-escuro); --ink: #fff;
  position: relative; overflow: hidden; width: 220px; height: 220px; border-radius: 50%; background: var(--cor); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  touch-action: none; -webkit-user-select: none; user-select: none; isolation: isolate;
}
.crise .enche { position: absolute; inset: 0; border-radius: 50%; background: var(--cor-escura); transform: scale(0); z-index: -1; will-change: transform; }
.crise .t { font-size: 20px; font-weight: 800; letter-spacing: 0.08em; line-height: 1; }
.crise .s { font-size: 12px; line-height: 16px; font-weight: 500; opacity: 0.85; text-align: center; }
.crise.perigo .t { font-size: 42px; }
.crise.medico, .crise.central { width: 128px; height: 128px; gap: 4px; }
.crise.medico .s, .crise.central .s { font-size: 11px; line-height: 14px; }
.crise.medico { --cor: var(--azul); --cor-escura: var(--azul-escuro); }
.crise.central { --cor: var(--dourado); --cor-escura: var(--dourado-escuro); --ink: #141414; }
.dupla-crise { display: flex; gap: 24px; }
.dica { font-size: 13px; color: var(--texto-3); text-align: center; }

.atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: auto; padding-top: 10px; }
.atalho { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.atalho-ic { width: 100%; max-width: 72px; height: 50px; border-radius: 14px; background: var(--painel-2); display: flex; align-items: center; justify-content: center; color: var(--texto); position: relative; }
.atalho-txt { font-size: 12px; color: var(--texto-2); line-height: 14px; text-align: center; }
.atalho-ic.logo-uber { background: #000; }
.atalho-ic.logo-uber img { width: 46px; height: auto; filter: invert(1); }
.atalho-ic.logo-99 { background: #ffdd00; overflow: hidden; }
.atalho-ic.logo-99 img { width: 50px; height: 50px; }
.logo-app { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.logo-app.logo-uber { background: #000; border: 1px solid var(--borda-forte); }
.logo-app.logo-uber img { filter: invert(1); width: 34px; height: auto; }
.logo-app.logo-99 { background: #ffdd00; }
.atalho.ativo .atalho-ic { background: var(--painel-3); }
.atalho.ativo .atalho-txt { color: var(--texto); }
.badge-ponto { position: absolute; top: 7px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }

/* ---------- botões ---------- */
.btn { height: 52px; border-radius: 999px; font-size: 16px; font-weight: 600; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; padding: 0 20px; position: relative; overflow: hidden; }
.btn-primario { background: #fff; color: #0e0e10; }
.btn-secundario { background: var(--painel-2); color: var(--texto); }
.btn-perigo { background: var(--vermelho); color: #fff; }
.btn-azul { background: var(--azul); color: #fff; }
.btn-verde { background: var(--verde); color: #fff; }
.btn-texto { background: none; color: var(--texto-2); height: 44px; }
.btn.peq { height: 38px; width: auto; padding: 0 16px; font-size: 14px; }
.btn .barra { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.2); transform: scaleX(0); transform-origin: left; }
.btn > span:not(.barra) { position: relative; }
.pilha { display: flex; flex-direction: column; gap: 10px; }
.linha-btn { display: flex; gap: 10px; }
.linha-btn .btn { flex: 1; }

/* ---------- cartões, listas agrupadas ---------- */
.cartao { background: var(--painel); border-radius: var(--raio); padding: 16px; }
.secao-titulo { font-size: 13px; color: var(--texto-3); padding: 0 16px 6px; margin-top: 24px; }
.grupo { background: var(--painel); border-radius: 14px; overflow: hidden; }
.linha { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border-bottom: 1px solid var(--borda); text-align: left; width: 100%; }
.linha:last-child { border-bottom: 0; }
a.linha { text-decoration: none; color: inherit; }
.linha .rotulo { flex: 1; min-width: 0; }
.linha .rotulo small { display: block; color: var(--texto-3); font-size: 13px; line-height: 18px; margin-top: 2px; }
.linha .valor { color: var(--texto-3); font-size: 15px; }
.linha .ic.chev { color: var(--texto-3); }
.linha input { background: transparent; border: 0; color: var(--texto); text-align: right; font-size: 16px; width: 55%; padding: 0; outline: none; }
.linha input::placeholder { color: var(--texto-3); }
.linha input:focus-visible { outline: none; }
.linha.radio .check { color: var(--texto); visibility: hidden; }
.linha.radio[aria-checked="true"] .check { visibility: visible; }
.nota { color: var(--texto-3); font-size: 13px; line-height: 18px; padding: 8px 16px 0; }
.switch { width: 51px; height: 31px; border-radius: 999px; background: #39393d; position: relative; flex: none; transition: background-color 0.2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.switch[aria-checked="true"] { background: var(--verde); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* ---------- emergência ativa ---------- */
.alarme { display: flex; flex-direction: column; gap: 14px; }
.alarme-topo { --cor: var(--vermelho); --ink: #fff; background: var(--cor); color: var(--ink); border-radius: 22px; padding: 18px 18px 20px; }
.alarme-topo.medica { --cor: var(--azul); }
.alarme-topo.central { --cor: var(--dourado); --ink: #141414; }
.alarme-tipo { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; opacity: 0.85; }
.alarme-tempo { font-size: 46px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px; }
.alarme-status { font-size: 17px; font-weight: 600; margin-top: 4px; }
.etapas { list-style: none; margin: 0; padding: 4px 4px 0; }
.etapa { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; position: relative; padding-bottom: 18px; }
.etapa:last-child { padding-bottom: 0; }
.etapa::before { content: ""; position: absolute; left: 10px; top: 16px; bottom: -2px; width: 2px; background: var(--borda-forte); }
.etapa:last-child::before { display: none; }
.etapa .marca { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--borda-forte); background: var(--fundo); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; color: #fff; }
.etapa.feita .marca { background: var(--cor-etapa, var(--verde)); border-color: var(--cor-etapa, var(--verde)); }
.etapa.feita::before { background: var(--cor-etapa, var(--verde)); }
.etapa.atual .marca { border-color: var(--texto); }
.etapa .txt { font-size: 15px; line-height: 22px; color: var(--texto-3); }
.etapa.feita .txt, .etapa.atual .txt { color: var(--texto); }
.etapa .txt small { display: block; font-size: 13px; color: var(--texto-3); }
.etapa time { font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums; line-height: 22px; }
.controles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.controle { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-2); text-align: center; line-height: 15px; }
.controle .ci { width: 62px; height: 62px; border-radius: 50%; background: var(--painel-2); display: flex; align-items: center; justify-content: center; color: var(--texto); }
.controle[aria-pressed="true"] .ci { background: #fff; color: #0e0e10; }
.controle[aria-pressed="true"] { color: var(--texto); }
.estado-mini { display: flex; flex-direction: column; }
.estado-mini .linha { min-height: 44px; padding: 10px 14px; font-size: 14px; }
.ok-txt { color: var(--verde); }
.ruim-txt { color: var(--ambar); }
.previa { width: 100%; border-radius: var(--raio-p); background: #000; max-height: 180px; object-fit: cover; }
.previa[hidden] { display: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 36px; padding: 0 14px; border-radius: 999px; background: var(--painel-2); font-size: 14px; font-weight: 500; }
.chip.sel { background: #fff; color: #0e0e10; }

/* contagem, envio, encerrado */
.centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
.contagem-num { width: 200px; height: 200px; border-radius: 50%; background: var(--cor, var(--vermelho)); color: var(--ink, #fff); font-size: 96px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.pulso { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--vermelho); animation: pisca 1.2s infinite; }
@keyframes pisca { 50% { opacity: 0.3; } }

/* teclado de PIN, estilo iOS */
.teclado { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 24px; justify-content: center; }
.teclado button { width: 76px; height: 76px; border-radius: 50%; background: var(--painel-2); font-size: 30px; font-weight: 400; display: flex; align-items: center; justify-content: center; }
.teclado button.vazio { background: none; font-size: 15px; color: var(--texto-2); }
.pin-pontos { display: flex; gap: 18px; justify-content: center; margin: 18px 0 26px; }
.pin-pontos span { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--texto); }
.pin-pontos span.cheio { background: var(--texto); }
.pin-titulo { font-size: 20px; font-weight: 600; text-align: center; }
.pin-sub { text-align: center; margin-top: 6px; }

/* ---------- mapa ---------- */
.mapa-tela { position: absolute; inset: 0; }
#mapa, #mapa-corrida { position: absolute; inset: 0; background: #1a1a1d; }
.mapa-topo { position: absolute; top: calc(12px + var(--safe-topo)); left: 12px; right: 12px; z-index: 500; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.camadas { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(23, 23, 26, 0.94); border: 1px solid var(--borda); pointer-events: auto; }
.camadas button { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.camadas button.sel { background: #fff; color: #0e0e10; }
.mapa-lado { display: flex; gap: 8px; pointer-events: auto; }
.redondo { width: 42px; height: 42px; border-radius: 50%; background: rgba(23, 23, 26, 0.94); border: 1px solid var(--borda); display: flex; align-items: center; justify-content: center; color: var(--texto); }
.folha-mapa { position: absolute; left: 0; right: 0; bottom: 0; z-index: 600; background: #141416; border-radius: 22px 22px 0 0; border-top: 1px solid var(--borda); max-height: 48%; display: flex; flex-direction: column; transition: transform 0.25s ease-out; }
.folha-mapa.recolhida { transform: translateY(calc(100% - 70px)); }
.pega { display: block; width: 100%; height: 22px; position: relative; flex: none; }
.pega::after { content: ""; position: absolute; left: 50%; top: 8px; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: #4a4a50; }
.folha-cab { display: flex; justify-content: space-between; align-items: baseline; padding: 0 18px 8px; flex: none; }
.folha-cab h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.lista-pessoas { list-style: none; margin: 0; padding: 0 8px 10px; overflow-y: auto; }
.pessoa { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 10px; border-radius: 14px; text-align: left; }
.pessoa.sel { background: var(--painel-2); }
.pessoa-txt { min-width: 0; }
.pessoa-txt b { display: block; font-size: 16px; font-weight: 600; }
.pessoa-txt .meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa-dir { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pessoa-dir .dist { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vivo-txt { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--texto-3); }
.vivo-txt i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); animation: pisca 1.6s infinite; }
.pessoa-acoes { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 10px 12px 66px; }
.pessoa-acoes a, .pessoa-acoes button { height: 34px; padding: 0 14px; border-radius: 999px; background: var(--painel-3); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; text-decoration: none; }
.pessoa-acoes a.rota { background: #fff; color: #1f1f1f; gap: 6px; }
.pessoa-acoes a.rota img { display: block; height: 17px; width: auto; }

/* marcadores */
.pin-wrap { background: none !important; border: 0 !important; }
.pin { position: relative; width: 46px; height: 56px; }
.pin-av { position: absolute; top: 0; left: 3px; width: 40px; height: 40px; border-radius: 50%; background: var(--h); border: 3px solid #fff; color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); z-index: 1; }
.pin-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 32%; display: block; }
.pin::after { content: ""; position: absolute; left: 50%; top: 35px; width: 10px; height: 10px; margin-left: -5px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.pin.emergencia .pin-av { border-color: var(--vermelho); }
.pin.emergencia::after { background: var(--vermelho); }
.pin.atencao .pin-av { border-color: var(--ambar); }
.pin.atencao::after { background: var(--ambar); }
.pin.desatualizado .pin-av, .pin.sem .pin-av { filter: grayscale(0.7); opacity: 0.8; }
.pin-halo { position: absolute; top: -6px; left: -3px; width: 52px; height: 52px; border-radius: 50%; background: var(--halo, rgba(48, 164, 108, 0.5)); opacity: 0; }
.pin.vivo .pin-halo { animation: halo 2.2s ease-out infinite; }
.pin.emergencia .pin-halo { --halo: rgba(227, 38, 42, 0.6); animation: halo 1.2s ease-out infinite; }
@keyframes halo { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } }
.eu { position: relative; width: 22px; height: 22px; }
.eu-ponto { position: absolute; inset: 2px; border-radius: 50%; background: var(--eu); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); z-index: 1; }
.eu-cone { position: absolute; left: -24px; top: -24px; width: 70px; height: 70px; border-radius: 50%; background: conic-gradient(from -28deg, rgba(47, 124, 246, 0.4) 0deg 56deg, transparent 56deg); transform: rotate(var(--rumo, 0deg)); display: none; }
.eu.com-rumo .eu-cone { display: block; }
.marcador-lugar { width: 26px !important; height: 26px !important; margin-left: -13px !important; margin-top: -13px !important; border-radius: 8px; background: #fff; color: #0e0e10; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.rotulo-mapa { background: rgba(14, 14, 16, 0.88); color: #fff; border: 0; border-radius: 6px; padding: 3px 7px; font-size: 12px; font-weight: 600; box-shadow: none; }
.rotulo-mapa::before { display: none; }
.leaflet-container { font: inherit; background: #1a1a1d; }
.tiles-escuros { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9) saturate(0.6); }
.leaflet-control-attribution { background: rgba(14, 14, 16, 0.6) !important; color: var(--texto-3) !important; font-size: 9px; }
.leaflet-control-attribution a { color: var(--texto-3) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #202024; color: var(--texto); }
.leaflet-popup-content a { color: var(--texto); }

/* ---------- corrida ---------- */
.corrida { position: absolute; inset: 0; }
.corrida #mapa-corrida { bottom: auto; height: 50%; }
.voltar-flutuante { position: absolute; top: calc(12px + var(--safe-topo)); left: 12px; z-index: 500; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #0e0e10; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.folha-fixa { position: absolute; left: 0; right: 0; bottom: 0; top: 46%; z-index: 600; background: #141416; border-radius: 22px 22px 0 0; padding: 0 18px calc(18px + var(--safe-base)); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.folha-fixa h2 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; }
.passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: passo; }
.passos li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 15px; line-height: 21px; counter-increment: passo; }
.passos li::before { content: counter(passo); width: 28px; height: 28px; border-radius: 50%; background: var(--painel-2); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.passos li small { display: block; color: var(--texto-3); font-size: 13px; line-height: 18px; margin-top: 2px; }
details.config { background: var(--painel); border-radius: 14px; }
details.config summary { list-style: none; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; cursor: pointer; }
details.config summary::-webkit-details-marker { display: none; }
details.config[open] summary .ic { transform: rotate(90deg); }
details.config .corpo { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.aguardando { display: flex; align-items: center; gap: 12px; }
.carregando { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--borda-forte); border-top-color: #fff; animation: gira 0.9s linear infinite; flex: none; }
@keyframes gira { to { transform: rotate(360deg); } }
.link-demo { font-size: 13px; color: var(--texto-3); text-decoration: underline; text-underline-offset: 3px; align-self: center; padding: 6px; }

/* ---------- avisos ---------- */
.titulo-tela { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 14px; }
.avisos { list-style: none; margin: 0; padding: 0; }
.aviso-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); align-items: start; }
.aviso-item .txt { font-size: 15px; line-height: 21px; }
.aviso-item time { font-size: 13px; color: var(--texto-3); white-space: nowrap; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-right: 6px; }
.tag.risco { background: #3a1315; color: #ff8a8d; }
.tag.atencao { background: #33270e; color: #f4c35c; }
.tag.info { background: #13233d; color: #8db6f5; }
.pergunta-cartao { background: var(--painel); border-radius: var(--raio); padding: 18px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.pergunta-cartao h2 { font-size: 20px; }
.vazio { text-align: center; padding: 48px 20px; color: var(--texto-3); display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ---------- ajustes ---------- */
.perfil { display: flex; align-items: center; gap: 14px; padding: 6px 0 4px; }
.perfil b { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; display: block; }
.codigo { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--texto-2); word-break: break-all; -webkit-user-select: all; user-select: all; }
.select-linha { background: transparent; color: var(--texto-3); border: 0; font-size: 15px; text-align: right; }

/* ---------- sobreposições ---------- */
#pergunta, #acompanhar { position: fixed; inset: 0; z-index: 60; background: var(--fundo); display: flex; flex-direction: column; padding: calc(16px + var(--safe-topo)) 18px calc(18px + var(--safe-base)); overflow-y: auto; overscroll-behavior: contain; }
#pergunta[hidden], #acompanhar[hidden], #folha-modal[hidden], #ligacao[hidden], #discreto[hidden] { display: none; }
.sobre { flex: 1; display: flex; flex-direction: column; gap: 16px; max-width: 440px; width: 100%; margin: 0 auto; }
.sobre.centro-v { justify-content: center; text-align: center; }
.sobre h2 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; }
.icone-grande { width: 64px; height: 64px; border-radius: 50%; background: #33270e; color: var(--ambar); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.fechar-topo { align-self: flex-start; width: 40px; height: 40px; border-radius: 50%; background: var(--painel-2); display: flex; align-items: center; justify-content: center; }
#folha-modal { position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-end; }
.folha-conteudo { width: 100%; background: #17171a; border-radius: 22px 22px 0 0; padding: 0 18px calc(18px + var(--safe-base)); max-height: 88%; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; }
.folha-conteudo h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.campo-num { display: flex; align-items: center; justify-content: center; gap: 18px; }
.campo-num button { width: 48px; height: 48px; border-radius: 50%; background: var(--painel-2); font-size: 24px; }
.campo-num output { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 120px; text-align: center; }
#toast { position: fixed; left: 50%; bottom: calc(var(--abas) + var(--safe-base) + 14px); transform: translateX(-50%); z-index: 80; background: #fff; color: #0e0e10; border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s; white-space: nowrap; }
#toast.vis { opacity: 1; }
#discreto { position: fixed; inset: 0; background: #000; z-index: 50; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 40px; }
#discreto p { color: #2a2a2a; font-size: 13px; }

/* ---------- ligação falsa, no formato do iPhone ---------- */
#ligacao { position: fixed; inset: 0; z-index: 70; background: #000; }
.chamada-ios { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(64px + var(--safe-topo)) 28px calc(44px + var(--safe-base)); background: radial-gradient(ellipse at 50% 15%, #3a3f4b, #0a0a0c 65%); color: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; }
.chamada-ios .topo-ch { text-align: center; }
.chamada-ios .nome { font-size: 38px; font-weight: 400; letter-spacing: -0.01em; }
.chamada-ios .sub-ch { font-size: 18px; color: #c7c7cc; margin-top: 4px; font-variant-numeric: tabular-nums; }
.chamada-ios .base { width: 100%; max-width: 330px; }
.chamada-ios .opcoes { display: flex; justify-content: space-between; color: #fff; font-size: 12px; margin-bottom: 34px; padding: 0 10px; }
.chamada-ios .opcoes div { text-align: center; }
.chamada-ios .opcoes .ic-ch { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; }
.chamada-ios .botoes { display: flex; justify-content: space-between; width: 100%; }
.chamada-ios .botoes div { text-align: center; font-size: 13px; color: #fff; }
.chamada-ios .botoes button { width: 78px; height: 78px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
.chamada-ios .recusar { background: #ff3b30; }
.chamada-ios .recusar svg { transform: rotate(135deg); }
.chamada-ios .aceitar { background: #34c759; }
.chamada-ios .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px; }
.chamada-ios .grade div { text-align: center; font-size: 12px; color: #e5e5ea; }
.chamada-ios .grade .ic-ch { width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }

/* entrada, conta e primeiro acesso (0.6) */
.entrada, .onb { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 460px; margin: 0 auto; flex: 1; padding-bottom: 20px; }
.entrada-meio { margin-top: 10vh; display: flex; flex-direction: column; gap: 10px; }
.entrada > .pilha, .onb > .pilha { margin-top: auto; padding-top: 12px; }
.voltar-topo { display: inline-flex; align-items: center; gap: 2px; color: var(--texto-2); font-size: 16px; align-self: flex-start; margin-left: -8px; min-height: 40px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--texto-2); min-width: 0; }
.campo input, .campo select { background: var(--painel); border: 1px solid var(--borda-forte); border-radius: var(--raio-p); color: var(--texto); font-size: 17px; padding: 13px 14px; outline: none; width: 100%; min-width: 0; -webkit-appearance: none; appearance: none; }
.campo input:focus, .campo select:focus { border-color: #fff; }
.campo small { color: var(--texto-3); font-size: 12px; line-height: 16px; }
.campo-duplo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.erro-form { color: var(--ambar); font-size: 14px; line-height: 20px; }
.erro-form:empty { display: none; }
.dobra { color: var(--texto-2); font-size: 14px; }
.dobra summary { cursor: pointer; padding: 6px 0; color: var(--texto-2); }
.dobra[open] summary { margin-bottom: 10px; }
.cartao.instalar { display: flex; flex-direction: column; gap: 12px; }
.onb-topo { display: flex; justify-content: space-between; align-items: center; }
.onb-barra { height: 3px; background: var(--painel-2); border-radius: 2px; overflow: hidden; margin-top: -6px; }
.onb-barra i { display: block; height: 100%; background: #fff; border-radius: 2px; transition: width .3s ease; }
.onb .titulo-grande { margin-top: 4px; }
.foto-grande { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--texto-2); font-size: 15px; margin-top: 8px; }
.foto-grande > span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.foto-grande.enviando { opacity: .5; pointer-events: none; }
.passos .btn.peq { margin-top: 10px; display: inline-flex; }
.at-resultado { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--texto-2); }
.at-resultado:empty { display: none; }
.campo-copia { margin-top: 8px; width: 100%; background: var(--painel-2); border: 1px solid var(--borda-forte); border-radius: 8px; color: var(--texto); font-size: 13px; padding: 8px; }
.atalho-tut { display: flex; flex-direction: column; gap: 14px; }
.cartao.convite { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.codigo-grande { font-size: 28px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.convite-ajustes:not(:empty) { margin-top: 10px; }
.btn-mini { font-size: 14px; color: var(--texto-2); padding: 7px 12px; border-radius: 999px; background: var(--painel-2); flex: none; }
.form-contato { margin-top: 12px; }
.perfil-foto { position: relative; flex: none; }
.perfil-cam { position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%; background: var(--painel-3); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid var(--fundo); }
.estado-mini .linha .rotulo { flex: none; }
.estado-mini .linha > span:last-child { flex: 1; min-width: 0; text-align: right; }
.at-resultado.ok-txt { color: var(--verde); }
.at-resultado.ruim-txt { color: var(--ambar); }

/* 0.7: selo de pronto, botão discreto, posição velha, linhas de estado */
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; padding: 6px 12px; border-radius: 999px; align-self: flex-start; margin-top: 8px; }
.selo.ok { color: var(--verde); background: rgba(48, 164, 108, 0.12); }
.selo.falta { color: var(--ambar); background: rgba(224, 160, 32, 0.12); }
.btn-contorno { background: transparent; color: var(--texto-2); border: 1px solid var(--borda-forte); height: 46px; font-size: 15px; }
.pin.desatualizado .pin-av, .pin.sem .pin-av, .pin.velho .pin-av { filter: grayscale(1); opacity: 0.7; }
.pin.velho::after { background: #8e8e93; }
.pin-idade { position: absolute; top: 47px; left: 50%; transform: translateX(-50%); background: rgba(14, 14, 16, 0.88); color: #d0d0d4; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; white-space: nowrap; z-index: 2; }
.estado-mini button.linha:disabled { cursor: default; opacity: 1; }
.estado-mini button.linha:not(:disabled) .ruim-txt { text-decoration: underline; text-underline-offset: 3px; }

/* 0.8: fase de teste sem central, relato */
.banner.teste { background: #241d10; }
.banner.teste .ic { color: var(--ambar); }
.link-relato { display: block; margin-top: 6px; color: var(--texto); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.cartao.aviso-teste { background: #241d10; border: 1px solid rgba(224, 160, 32, 0.35); }
textarea.relato { width: 100%; background: var(--painel-2); border: 1px solid var(--borda-forte); border-radius: var(--raio-p); color: var(--texto); font: inherit; font-size: 16px; padding: 12px; resize: vertical; -webkit-user-select: text; user-select: text; margin: 12px 0 4px; }
.etapa.falhou .marca { background: var(--ambar); border-color: var(--ambar); color: #141414; font-weight: 800; font-size: 13px; }
.etapa.falhou .txt { color: var(--ambar); }
.inicio > * { flex-shrink: 0; }
.banner.teste { margin-top: 10px; padding: 10px 12px; }
.crise-area { flex: 1 0 auto; }
.crise-area > * { flex-shrink: 0; }
.selo.ok { cursor: pointer; }
.btn.peq.btn-texto { height: 36px; padding: 0 8px; margin-top: 6px; }
[hidden] { display: none !important; }