/* SIGE-DC · App do cidadão — layout
   Os tokens, o vidro, o chanfro e o medidor moram em tema.css. Aqui fica só o
   arranjo da tela do munícipe, seguindo o protótipo navegável fechado em
   setembro de 2026. Escrita para o pior caso de uso do sistema: celular fraco,
   uma barra de sinal, chuva, e alguém com pressa. */

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  background:var(--noite); color:var(--luz);
  font:400 16px/1.5 var(--f-texto);
  -webkit-text-size-adjust:100%; min-height:100dvh;
}
p{ margin:0 0 10px; }
.dim{ color:var(--luz-2); font-size:14px; }
.largo{ width:100%; display:block; margin-top:12px; }
.maiusc{ text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.pequeno{ padding:9px 13px; font-size:13px; }

/* Rótulo de seção: triângulo laranja + caixa alta espaçada. É o que dá ritmo à
   rolagem sem gastar um painel de vidro para cada assunto. */
.secao{
  display:flex; align-items:center; gap:8px; margin:22px 2px 10px;
  font:700 11.5px/1 var(--f-texto); text-transform:uppercase; letter-spacing:.13em;
  color:var(--luz-3);
}
.secao::before{
  content:''; width:0; height:0; flex:0 0 auto;
  border:5px solid transparent; border-left-color:var(--acao-a); border-right:0;
}

/* ---------- topo ---------- */
.topo{
  position:relative; z-index:2; display:flex; align-items:center; gap:13px;
  padding:calc(16px + env(safe-area-inset-top)) 18px 10px;
  max-width:620px; margin:0 auto;
}
/* O brasão já é um selo redondo com anel próprio: moldura de vidro por cima
   dele vira anel duplo, e o fundo escuro apaga o azul. Fica sobre um disco
   claro, que é como ele aparece impresso. */
.brasao{
  width:56px; height:56px; border-radius:50%; flex:0 0 auto;
  background:#fff; object-fit:contain; border:0; padding:0;
  box-shadow:0 3px 12px rgba(0,0,0,.4);
}
/* Só quando a imagem falta e o desenho entra no lugar dela. */
.brasao-desenho{
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--vidro-cor),.55); border:1.5px solid var(--vidro-borda);
  color:var(--acao-txt); box-shadow:none;
}

/* Passo a passo de instalação: numerado, com espaço para o dedo acompanhar. */
.folha-sub{
  font:800 12px/1 var(--f-texto); letter-spacing:.08em; text-transform:uppercase;
  color:var(--luz-3); margin:22px 0 10px;
}
.folha-sub:first-child{ margin-top:4px; }
.passos{ margin:0; padding-left:22px; display:grid; gap:9px; }
.passos li{ font:400 15px/1.55 var(--f-texto); color:var(--luz-2); }
.passos li b{ font-weight:700; color:var(--luz-1); }
.topo-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.topo-txt b{ font:700 17px/1 var(--f-titulo); letter-spacing:.05em; }
.topo-txt span{ font:700 12px/1 var(--f-texto); letter-spacing:.09em; color:var(--luz-3); }
.sino{
  margin-left:auto; width:52px; height:52px; border-radius:50%; flex:0 0 auto; position:relative;
  border:1px solid var(--vidro-borda); background:rgba(var(--vidro-cor),.55);
  color:var(--luz); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.sino-n{
  position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; border-radius:12px;
  background:var(--acao-a); color:#fff; font:700 11px/20px var(--f-texto); text-align:center;
  font-style:normal; padding:0 5px; border:2px solid var(--noite);
}
.faixa-rede{
  position:relative; z-index:2; max-width:620px; margin:6px auto 0; padding:10px 16px;
  border-radius:10px; font-size:13.5px;
  background:rgba(240,196,25,.14); border:1px solid rgba(240,196,25,.4); color:var(--luz);
}

/* ---------- rolagem: folga embaixo suficiente para o último item subir acima
     do SOS e da barra de abas, no iPhone com barra de gestos inclusive ------ */
.rolagem{
  position:relative; z-index:2; max-width:620px; margin:0 auto;
  padding:6px 18px calc(var(--folga-flutuante) + env(safe-area-inset-bottom));
}
/* .aba[hidden] agora é coberto pela regra global de tema.css. */
.painel{ padding:17px 18px; }

/* ---------- painel de alerta ---------- */
.painel-alerta{ padding:18px 19px 16px; }
.pa-topo{ display:flex; align-items:center; gap:14px; margin-bottom:10px; padding-right:26px; }
.pa-grau{ flex:1; min-width:0; }
.pa-rotulo{
  display:block; font:900 19px/1.08 var(--f-titulo); letter-spacing:-.01em;
  text-transform:uppercase; color:var(--g-txt);
}
/* Linha de procedência, em mono: fonte, código IBGE do município e o degrau.
   É o que separa "aviso do INMET para Valentim Gentil" de "achismo de app". */
/* Procedência do aviso: quem está falando com a pessoa. Selo curto para bater
   o olho, frase por extenso para quem lê. */
.pa-meta{ display:grid; gap:6px; justify-items:start; margin:2px 0 14px; }
.selo-origem{
  font:800 10px/1 var(--f-texto); letter-spacing:.09em; text-transform:uppercase;
  padding:6px 10px; border-radius:7px; white-space:nowrap;
}
.selo-origem.coord{ background:color-mix(in srgb, var(--acao-a) 18%, transparent); color:var(--acao-txt);
  border:1px solid color-mix(in srgb, var(--acao-a) 42%, transparent); }
.selo-origem.inmet{ background:rgba(var(--vidro-cor),.7); color:var(--luz-3);
  border:1px solid var(--vidro-borda); }
.origem-txt{ font:400 12.5px/1.5 var(--f-texto); color:var(--luz-3); }
.origem-txt b{ color:var(--luz-2); font-weight:700; }
.a-origem{ display:grid; gap:6px; justify-items:start; margin:12px 0 2px; }
.pa-corpo h3{ font:900 27px/1.14 var(--f-titulo); letter-spacing:-.02em; margin:0 0 10px; }
.pa-corpo p{ font-size:16px; color:var(--luz-2); line-height:1.5; }
/* A linha dos outros avisos em vigor. Fica ANTES da validade e depois do
   texto: e a ultima coisa lida antes de a pessoa decidir que ja viu tudo.
   Herda a cor de gravidade da tela (--g-txt), entao num dia vermelho ela e
   vermelha, e nao um azul generico que se confunde com link do sistema. */
.pa-outros{
  display:block; width:100%; text-align:left; margin-top:14px;
  font:600 13.5px/1.35 var(--f-texto); color:var(--g-txt-forte);
  background:color-mix(in srgb, var(--g) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--g) 34%, transparent);
  border-radius:12px; padding:10px 12px; cursor:pointer;
}
.pa-outros b{ font-weight:900; }

.pa-validade{ font:500 12.5px/1.4 var(--f-mono); color:var(--luz-3); margin-top:12px; }
.pa-acoes{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
/* O botão principal é da COR DA GRAVIDADE, não do laranja da marca: numa tela
   de alerta, a ação urgente e o grau do dia são a mesma informação. */
.acao-grau{
  background:var(--g); color:#0a1119; border:none; cursor:pointer;
  font:700 15px/1 var(--f-texto); padding:15px 20px; border-radius:var(--raio-p);
  box-shadow:0 6px 22px color-mix(in srgb, var(--g) 45%, transparent);
}
:root[data-facil="1"] .acao-grau{ box-shadow:none; }

/* ---------- tempo agora ---------- */
.tempo-topo{ display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.tempo-topo .t-temp{ font:900 46px/1 var(--f-titulo); letter-spacing:-.03em; }
.tempo-topo .t-cond{ font:700 18px/1.2 var(--f-titulo); }
.tempo-topo .t-max{ display:block; font:400 14px/1.3 var(--f-texto); color:var(--luz-3); margin-top:3px; }
.tempo-caixas{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.caixa{
  border:1px solid var(--vidro-borda); border-radius:12px; padding:10px 4px; text-align:center;
  background:rgba(var(--vidro-cor),.4);
}
.caixa .c-rot{ font:500 10.5px/1 var(--f-mono); letter-spacing:.06em; color:var(--luz-3); }
.caixa .c-val{ font:600 17px/1 var(--f-mono); margin-top:7px; }
.tempo-fonte{
  margin-top:14px; padding-top:13px; border-top:1px solid var(--vidro-borda);
  font-size:13px; color:var(--luz-3); line-height:1.45;
}
/* Leitura velha avisa que e velha, no mesmo lugar em que o numero aparece.
   Numero de emergencia desatualizado servido como se fosse de agora e pior do
   que numero nenhum — e a pagina de transparencia nao serve para isso, porque
   quem esta com agua na porta nao vai abrir a pagina de transparencia. */
.tempo-fonte .t-velho{ display:block; margin-top:5px; color:var(--g-amarelo-txt); font-weight:700; }
.tempo-risco{ display:flex; align-items:center; gap:9px; font-size:14px; margin-top:12px; }
.tempo-risco i{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; }

/* ---------- os dois caminhos ---------- */
.caminhos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.caminho{
  padding:15px 15px 16px; text-align:left; cursor:pointer; color:var(--luz);
  display:flex; flex-direction:column; gap:5px; font-family:inherit;
}
.caminho b{ font:700 16px/1.2 var(--f-titulo); margin-top:7px; }
.c-sub{ font-size:12.5px; color:var(--luz-3); line-height:1.35; }
@media (max-width:340px){ .caminhos{ grid-template-columns:1fr; } }

/* Ícone dentro de um quadrado arredondado — o mesmo recipiente em toda a
   interface; o que muda é a cor. */
.ico-quadro{
  width:44px; height:44px; border-radius:12px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:1px solid currentColor; background:color-mix(in srgb, currentColor 12%, transparent);
}
.cor-acao{ color:var(--acao-txt); } .cor-info{ color:#4d8fe0; }
.cor-ok{ color:var(--g-sem-txt); }    .cor-aviso{ color:var(--g-amarelo-txt); }
.cor-neutra{ color:var(--luz-3); }

/* ---------- listas em painel de vidro ---------- */
.lista{ overflow:hidden; }
.lista > *{ border-bottom:1px solid var(--vidro-borda); }
.lista > *:last-child{ border-bottom:none; }
.linha{
  display:flex; align-items:center; gap:14px; width:100%; padding:15px 17px;
  background:none; border:0; color:var(--luz); font-family:inherit; text-align:left;
  cursor:pointer; text-decoration:none;
}
.linha.estatica{ cursor:default; }
.l-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.l-txt b{ font:700 16px/1.25 var(--f-titulo); }
.l-txt small{ font-size:13px; color:var(--luz-3); line-height:1.35; }
.l-val{ font:700 15px/1 var(--f-texto); color:var(--acao-txt); white-space:nowrap; }
.l-seta{ color:var(--luz-3); font-size:22px; line-height:1; }
.l-num{ font:600 17px/1 var(--f-mono); white-space:nowrap; }
/* Era .sos e pegava o estilo do BOTÃO de emergência: o número virava um pill
   vermelho e sumia dentro dele. É só a cor que muda aqui. */
.l-num.emergencia{ color:var(--sos-txt); }
.selo{
  font:700 10.5px/1 var(--f-texto); letter-spacing:.08em; text-transform:uppercase;
  padding:7px 11px; border-radius:8px; white-space:nowrap;
  background:rgba(var(--vidro-cor),.75); color:var(--luz-3); border:1px solid var(--vidro-borda);
}
.selo.ok{ background:rgba(47,164,106,.16); color:#7fe0a8; border-color:rgba(47,164,106,.4); }
.selo.andamento{ background:rgba(240,196,25,.16); color:#ffdc84; border-color:rgba(240,196,25,.4); }
.selo.recusado{ background:rgba(216,56,44,.14); color:#ffa79f; border-color:rgba(216,56,44,.35); }

/* ---------- alertas ---------- */
.aviso{ padding:17px 18px; margin-bottom:12px; }
.pill{
  display:inline-block; font:700 11.5px/1 var(--f-texto); letter-spacing:.06em;
  text-transform:uppercase; padding:9px 13px; border-radius:9px; margin-bottom:12px;
  color:var(--g-txt); background:color-mix(in srgb, var(--g) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--g) 45%, transparent);
}
.aviso h3{ font:700 20px/1.25 var(--f-titulo); margin:0 0 8px; }
.aviso p{ font-size:15px; color:var(--luz-2); }
.aviso .a-meta{ font:500 12px/1.55 var(--f-mono); color:var(--luz-3); margin-top:10px; }
.a-orient{
  background:rgba(var(--vidro-cor),.55); border:1px solid var(--vidro-borda);
  border-radius:10px; padding:12px 13px; font-size:14px; margin-top:12px;
}
/* O que o instituto lista como consequência esperada. Fica na cor do grau do
   aviso — é a informação que faz a pessoa decidir se tira o carro da rua. */
.a-riscos{
  border-left:3px solid var(--g); border-radius:0 10px 10px 0;
  background:rgba(var(--vidro-cor),.45); padding:11px 13px;
  font-size:14px; line-height:1.55; margin-top:12px;
}
.a-riscos b, .a-orient b{ color:var(--luz); }
.a-recolhido{ opacity:.45; }
.p-titulo{ font:700 18px/1.25 var(--f-titulo); margin:0 0 7px; }

/* ---------- pedidos ---------- */
.aviso-193{ text-align:center; margin-top:12px; font-size:13.5px; }
.tel193{ color:var(--sos-txt); font-family:var(--f-mono); }
.p-sub{ font:500 13px/1.4 var(--f-mono); color:var(--luz-3); }

/* Linha do tempo do protocolo — só o que o cidadão pode ver. */
.linha-tempo{ margin:6px 0 4px; padding-left:4px; }
.lt-passo{ display:flex; gap:15px; padding-bottom:20px; position:relative; }
.lt-passo:not(:last-child)::before{
  content:''; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--vidro-borda);
}
.lt-bola{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto;
  border:2px solid var(--vidro-borda); background:rgba(var(--vidro-cor),.6);
  display:flex; align-items:center; justify-content:center; color:#0a1119; font-size:15px;
}
.lt-passo.feito .lt-bola{ background:var(--g-sem); border-color:var(--g-sem); }
.lt-passo.atual .lt-bola{ background:var(--acao-a); border-color:var(--acao-a); }
.lt-rot{ font:600 16px/1.25 var(--f-mono); color:var(--luz-3); }
.lt-passo.feito .lt-rot,.lt-passo.atual .lt-rot{ color:var(--luz); }
.lt-quando{ display:block; font:500 13px/1.4 var(--f-mono); color:var(--luz-3); margin-top:4px; }
.nota-info{
  background:rgba(240,196,25,.12); border:1px solid rgba(240,196,25,.35);
  border-radius:12px; padding:14px 15px; font-size:14px; color:#ffdc84;
  display:flex; gap:11px; align-items:flex-start; margin-top:6px;
}

/* Recusa: mesma família da nota, em cinza-vermelho. Não é um erro do aplicativo
   nem um alerta de perigo — é uma decisão da Coordenadoria, e tem que ficar
   legível o bastante para a pessoa saber que não adianta esperar viatura. */
.nota-recusa{
  background:rgba(216,56,44,.10); border:1px solid rgba(216,56,44,.32);
  border-radius:12px; padding:14px 15px; font-size:14px; line-height:1.55;
  color:var(--luz-2); display:flex; gap:11px; align-items:flex-start; margin-top:6px;
}
.nota-recusa b{ color:#ffa79f; }
.nota-recusa small{ display:block; margin-top:8px; color:var(--luz-3); font-size:12.5px; line-height:1.5; }
.p-recusa{ display:block; color:#ffa79f; font-size:12.5px; line-height:1.45; margin-top:3px; }

/* "Quem chamar", no fim de cada guia: o caso em cima, o número embaixo.
   Lado a lado, um destino longo ("Neoenergia Elektro 0800 701 0102") esmaga o
   caso numa coluna de duas palavras por linha. */
.chamar{
  display:grid; gap:5px; padding:14px 16px; text-decoration:none;
  border-bottom:1px solid var(--vidro-borda); color:inherit;
}
.chamar:last-child{ border-bottom:0; }
.ch-caso{ font:600 14.5px/1.45 var(--f-texto); color:var(--luz); }
.ch-dest{ font:600 15px/1.3 var(--f-mono); color:var(--acao-txt); }
.ch-dest.urgente{ color:var(--sos-txt); font-size:19px; font-weight:700; }
a.chamar:active{ background:rgba(var(--vidro-cor),.7); }

/* Faixa de instalação no Início. Discreta: é um convite, não um alerta — e num
   aplicativo de emergência nada compete com o painel de alerta acima dela. */
.faixa-instalar{
  display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px;
  align-items:start; padding:14px 14px 13px; margin-bottom:18px;
}
.fi-ico{ grid-area:1 / 1; color:var(--acao-txt); display:flex; padding-top:1px; }
.fi-txt{ grid-area:1 / 2; min-width:0; display:grid; gap:3px; }
.fi-txt b{ font:700 15px/1.3 var(--f-texto); }
.fi-txt small{ font:400 12.5px/1.5 var(--f-texto); color:var(--luz-3); }
/* Posição explícita: o botão Instalar ocupa a linha 2, e sem isto o × era
   empurrado para uma terceira linha, sozinho no canto de baixo. */
.fi-x{
  grid-area:1 / 3; background:none; border:0; color:var(--luz-3); cursor:pointer;
  font:400 22px/1 var(--f-texto); padding:0 2px; margin:-2px -2px 0 0;
}
/* O botão ocupa a largura da coluna de texto, embaixo dela: ao lado, ele
   espremia o título em duas linhas num celular estreito. */
.faixa-instalar .acao.pequeno{
  grid-area:2 / 2 / 3 / -1; justify-self:start; margin-top:9px;
  padding:10px 18px; font-size:13.5px;
}

/* ---------- guias ---------- */
.grade-guias{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.guia{
  padding:15px 15px 17px; cursor:pointer; text-align:left; color:var(--luz);
  font-family:inherit; display:flex; flex-direction:column; gap:14px;
}
.guia b{ font:700 16px/1.2 var(--f-titulo); }
.nota-offline{
  display:flex; gap:12px; align-items:flex-start; margin-top:14px; padding:15px 16px;
  border-radius:14px; font-size:14px; line-height:1.45; color:#7fe0a8;
  background:rgba(47,164,106,.10); border:1px solid rgba(47,164,106,.32);
}
.item-guia{ display:flex; gap:13px; padding:14px 16px; align-items:flex-start; font-size:15px; line-height:1.45; }
.item-guia i{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; margin-top:8px; }
.i-antes i{ background:var(--g-sem); } .i-durante i{ background:#ff8f85; } .i-depois i{ background:var(--luz-3); }
.secao.s-antes{ color:var(--g-sem-txt); }
.secao.s-antes::before{ border-left-color:var(--g-sem); }
.secao.s-durante{ color:#ff8f85; }
.secao.s-durante::before{ border-left-color:#ff8f85; }

/* ---------- perfil ---------- */
.identidade{ display:flex; align-items:center; gap:15px; }
.identidade > div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.identidade b{ font:700 19px/1.2 var(--f-titulo); }
.avatar{
  width:58px; height:58px; border-radius:14px; flex:0 0 auto; background:var(--acao);
  color:#fff; font:900 20px/58px var(--f-titulo); text-align:center; letter-spacing:.02em;
}
.rodape-nota{ font-size:12.5px; margin:9px 2px 0; }
.transp b{ display:block; font:700 15px/1.25 var(--f-titulo); }
.transp small{ display:block; font-size:13px; color:var(--luz-2); margin-top:3px; }
.transp .quando{ font:500 12px/1.4 var(--f-mono); color:var(--luz-3); margin-top:4px; }
.rodape{ text-align:center; font-size:12px; color:var(--luz-3); margin-top:24px; line-height:1.7; }

/* ---------- peças flutuantes ---------- */
/* ---------- barra de baixo: 193 + abas, um bloco só ---------- */
.barra-baixo{
  /* Centralizada por margem, NAO por translateX(-50%).
     Duas razoes, as duas ja custaram caro aqui:
     1. elemento transformado vira bloco de contencao de quem for 'fixed'
        dentro dele — foi o que fez o veu nascer do tamanho da barra;
     2. no Android, camada fixa COM transform e repintada por um caminho
        diferente, e durante a rolagem por impulso ela perde quadros e parece
        andar junto com o conteudo. */
  position:fixed; z-index:6; left:0; right:0; margin-inline:auto;
  bottom:calc(14px + env(safe-area-inset-bottom));
  width:min(560px, calc(100vw - 28px));
  /* Sem fresta entre o 193 e as abas: qualquer vão vira uma janela por onde
     passa meia frase do conteúdo rolando atrás. É um bloco contínuo. */
  display:grid; gap:0; border-radius:24px; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
/* O conteúdo rola POR TRÁS desta barra. Nas frestas — os 10px entre o 193 e as
   abas, e a margem debaixo delas — apareciam pedaços de frase cortada. Este véu
   dissolve o conteúdo antes que ele chegue na barra, em vez de exibi-lo picado. */
/* Fica no body, não em .barra-baixo: a barra é centralizada com translateX, e
   'fixed' dentro de um elemento transformado se ancora NO ELEMENTO, não na
   tela — o véu nascia do tamanho da barra e desaparecia atrás dela. */
body::after{
  content:''; position:fixed; left:0; right:0; bottom:0; z-index:5;
  height:calc(var(--folga-flutuante) + 18px); pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--noite) 62%, transparent) 40%,
    var(--noite) 72%);
}
/* Painel parado no meio da tela pode ser translúcido; barra com texto correndo
   atrás, não — vira texto sobre texto. */
.barra-baixo .abas{
  /* Fundo OPACO, sem backdrop-filter.
     Este fundo ja era 96% opaco: o desfoque atras dele nao aparecia para
     ninguem. O que ele fazia era obrigar o navegador a refazer o borrao a cada
     quadro, porque o fundo da tela (a aurora) esta sempre animando — e uma
     camada fixa cara e uma camada fixa que atrasa. Os 4% que sobravam nao
     valiam a barra escorregando durante a rolagem. */
  background:rgb(var(--vidro-cor));
  /* 'none' explicito: .abas tambem carrega a classe .vidro, e e de la que vem
     o blur(var(--desfoque)). Tirar a declaracao daqui nao bastava — a de la
     continuava valendo. */
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:0; border-radius:0; box-shadow:none;
}
.sos{
  display:flex; align-items:center; justify-content:center; gap:11px;
  padding:15px 22px; border-radius:0; text-decoration:none; color:#fff;
  box-shadow:none;
}
.sos b{ font:900 19px/1 var(--f-titulo); letter-spacing:.02em; }

.abas{
  display:grid; grid-template-columns:repeat(5,1fr); padding:8px 8px 9px; border-radius:24px;
}
.abas button{
  background:none; border:none; cursor:pointer; color:var(--luz-3);
  font:700 10.5px/1 var(--f-texto); letter-spacing:.07em; text-transform:uppercase;
  padding:10px 2px 9px; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.abas button[aria-current="true"]{
  background:color-mix(in srgb, var(--acao-a) 20%, transparent); color:var(--acao-txt);
}

/* ---------- folha que sobe ---------- */
.folha-fundo{
  position:fixed; inset:0; z-index:10; background:rgba(4,7,11,.62);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:none; align-items:flex-end; justify-content:center;
}
.folha-fundo.abre{ display:flex; }
.folha{
  width:min(620px,100%); max-height:94dvh; display:flex; flex-direction:column;
  border-radius:22px 22px 0 0; animation:sobe .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes sobe{ from{ transform:translateY(26px); opacity:0; } to{ transform:none; opacity:1; } }
.folha-topo{
  display:flex; align-items:center; gap:10px; padding:16px 18px 13px;
  border-bottom:1px solid var(--vidro-borda); flex:0 0 auto;
}
.folha-topo h2{ margin:0; font:700 20px/1.2 var(--f-titulo); }
.voltar{
  background:none; border:none; color:var(--luz); cursor:pointer;
  font-size:32px; line-height:1; padding:0 6px 6px 0; font-family:var(--f-titulo);
}
.folha-corpo{ overflow-y:auto; padding:16px 18px calc(28px + env(safe-area-inset-bottom)); }

/* Aviso vermelho do topo do formulário: formulário não é canal de emergência,
   e o aplicativo tem que dizer isso ANTES de a pessoa começar a digitar. */
.risco-vida{
  display:flex; align-items:flex-start; gap:12px; margin-bottom:18px;
  background:rgba(216,56,44,.13); border:1px solid rgba(216,56,44,.42);
  border-radius:14px; padding:15px 16px; font-size:14.5px; line-height:1.45;
  color:#ffb0a8; text-decoration:none;
}
.risco-vida b{ color:#ff8d82; }
.dica-campo{ font-size:13px; color:var(--luz-3); margin:-6px 0 16px; line-height:1.4; }
/* LGPD no lugar onde a pessoa decide, não escondida num termo que ninguém lê. */
.lgpd{ font-size:12.5px; color:var(--luz-3); margin-top:13px; line-height:1.55; }

.zona-foto{
  border:1.5px dashed var(--vidro-borda); border-radius:14px; padding:22px 14px;
  text-align:center; color:var(--luz-3); cursor:pointer; background:none;
  width:100%; font-family:inherit; font-size:14.5px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.miniaturas{ display:flex; gap:9px; flex-wrap:wrap; margin-top:11px; }
.miniaturas figure{ position:relative; margin:0; }
.miniaturas img{ width:80px; height:80px; object-fit:cover; border-radius:11px; display:block; }
.miniaturas button{
  position:absolute; top:-6px; right:-6px; width:25px; height:25px; border-radius:50%;
  border:none; background:var(--sos-b); color:#fff; font-size:14px; line-height:1; cursor:pointer;
}
.mapa{
  height:200px; border-radius:14px; margin-top:11px; position:relative; z-index:0;
  border:1px solid var(--vidro-borda); overflow:hidden;
}
.pin-centro{
  position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-24px 0 0 -11px;
  background:var(--sos-a); border:3px solid #fff; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); box-shadow:0 2px 6px rgba(0,0,0,.5);
  z-index:500; pointer-events:none;
}
.erro{
  background:rgba(216,56,44,.16); border:1px solid rgba(216,56,44,.5);
  color:var(--luz); padding:12px 14px; border-radius:12px; margin-bottom:13px; font-size:14px;
}
.ok-grande{ text-align:center; padding:8px 0 4px; }
.ok-grande .ok-bola{
  width:66px; height:66px; border-radius:50%; background:var(--g-sem); color:#fff;
  font-size:32px; line-height:66px; margin:0 auto 14px;
}
.codigo{
  font:600 28px/1 var(--f-mono); letter-spacing:.08em; color:var(--luz);
  border:2px dashed var(--g-sem); border-radius:13px; padding:17px; margin:15px 0; text-align:center;
}
.escolha{ display:flex; flex-direction:column; gap:11px; }
.escolha button{
  display:flex; align-items:center; gap:14px; padding:16px; border-radius:15px;
  background:rgba(var(--vidro-cor),.5); border:1px solid var(--vidro-borda);
  color:var(--luz); font-family:inherit; text-align:left; cursor:pointer;
}
.escolha b{ font:700 17px/1.2 var(--f-titulo); display:block; }
.escolha small{ font-size:13px; color:var(--luz-3); }

.aviso-toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(20px);
  bottom:calc(104px + env(safe-area-inset-bottom)); z-index:20;
  background:rgba(8,13,19,.95); color:#eaf1f8; border:1px solid rgba(233,241,248,.18);
  padding:13px 19px; border-radius:13px; font-size:14px; max-width:88vw;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.aviso-toast.mostra{ opacity:1; transform:translateX(-50%) translateY(0); }
.cor-perigo{ color:#ff8f85; }

/* ===========================================================================
   APURANDO — o estado em que o aplicativo nasce
   ---------------------------------------------------------------------------
   Nada aqui e enfeite de carregamento. O ponto e nao deixar a tela dizer
   "esta tudo bem" antes de alguem ter verificado. As quatro casas do medidor
   piscam juntas, em cinza: e a forma de dizer "ainda nao sei", sem parecer nem
   calmaria nem alarme.
   ========================================================================= */
.painel-alerta.apurando .pa-rotulo{ color:var(--luz-2); }

/* São as MESMAS quatro casas do medidor, do começo ao fim — não um indicador de
   carregamento que some para outra coisa nascer no lugar. Enquanto se apura elas
   estão cinzas e respiram juntas; quando a resposta chega, elas acendem nos seus
   níveis. A peça não é trocada: ela muda de estado. É isso que faz a virada ser
   lida como "o medidor descobriu onde parar", e não como uma tela substituindo
   outra. */
.medidor.apurando b{
  background:var(--g-apurando) !important;
  box-shadow:none !important;
  animation:apurando 1.15s ease-in-out infinite;
}
.medidor.apurando b:nth-child(2){ animation-delay:.13s; }
.medidor.apurando b:nth-child(3){ animation-delay:.26s; }
.medidor.apurando b:nth-child(4){ animation-delay:.39s; }
@keyframes apurando{ 0%,100%{ opacity:.20; } 50%{ opacity:.78; } }

/* O 193 aparece em destaque JUSTAMENTE enquanto nao se sabe: e a unica coisa
   que funciona sem depender de o servidor responder. */
.pa-193{ margin-top:10px; color:var(--g-vermelho-txt); }

@media (prefers-reduced-motion: reduce){
  .medidor.apurando b{ animation:none; opacity:.42; }
}

/* ===========================================================================
   A VIRADA — de "apurando" para a situação real
   ---------------------------------------------------------------------------
   A animação não é enfeite: ela é o que faz a pessoa OLHAR de novo para o
   cartão. Quem abriu o app viu cinza, desviou o olho por um segundo e voltou:
   se a tela tivesse trocado em silêncio, um vermelho poderia passar como se
   sempre tivesse estado ali. O movimento chama o olho de volta no instante
   exato em que a resposta chega.
   Só toca UMA vez, na primeira resposta. Redesenho por atualização em segundo
   plano não anima — cartão que pisca a cada 30s vira ruído e a pessoa aprende
   a ignorar, que é o oposto do que se quer.
   ========================================================================= */
.painel-alerta.revelando{ animation:cartao-vira .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes cartao-vira{
  0%  { transform:scale(.985); }
  55% { transform:scale(1.012); }
  100%{ transform:scale(1); }
}
/* A virada de cada casa: ela sai encolhida, cinza e apagada — que é exatamente
   como estava um instante antes — e assenta na própria altura e na própria cor.
   O quadro final do gesto é o estado real do elemento, por isso o @keyframes tem
   só o 'from': o 'to' é o que a casa já é. Uma depois da outra, de baixo para
   cima: a leitura é "subiu até aqui", e não um acender de luz. */
.painel-alerta.revelando .medidor b{
  animation:casa-assenta .46s cubic-bezier(.2,.8,.25,1) both;
  transform-origin:bottom;
}
.painel-alerta.revelando .medidor b:nth-child(1){ animation-delay:.02s; }
.painel-alerta.revelando .medidor b:nth-child(2){ animation-delay:.10s; }
.painel-alerta.revelando .medidor b:nth-child(3){ animation-delay:.18s; }
.painel-alerta.revelando .medidor b:nth-child(4){ animation-delay:.26s; }
@keyframes casa-assenta{
  from{ transform:scaleY(.42); opacity:.20; background:var(--g-apurando); box-shadow:none; }
}

.painel-alerta.revelando .pa-grau,
.painel-alerta.revelando .pa-meta,
.painel-alerta.revelando .pa-corpo,
.painel-alerta.revelando .pa-acoes{ animation:sobe-suave .42s ease both; }
.painel-alerta.revelando .pa-meta { animation-delay:.06s; }
.painel-alerta.revelando .pa-corpo{ animation-delay:.12s; }
.painel-alerta.revelando .pa-acoes{ animation-delay:.18s; }
@keyframes sobe-suave{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }

/* Quem pediu menos movimento ao sistema recebe a troca sem animação nenhuma —
   a informação é a mesma, e é ela que importa. */
@media (prefers-reduced-motion: reduce){
  .painel-alerta.revelando,
  .painel-alerta.revelando .medidor b,
  .painel-alerta.revelando .pa-grau,
  .painel-alerta.revelando .pa-meta,
  .painel-alerta.revelando .pa-corpo,
  .painel-alerta.revelando .pa-acoes{ animation:none; }
}

/* ===========================================================================
   TEMA CLARO — as cores que só existiam para fundo escuro
   ---------------------------------------------------------------------------
   Uma família inteira de tons pálidos (#7fe0a8, #ffdc84, #ffa79f, #ff8f85) foi
   escolhida quando o aplicativo só tinha tela escura: sobre o escuro elas são
   claras e legíveis. Sobre o claro viram quase nada — o aviso "Risco de vida
   agora? Ligue 193" media 1,45:1 de contraste no tema claro, quando o mínimo
   para texto pequeno é 4,5:1. Era o pior texto do aplicativo e era justamente o
   que abre o formulário de emergência.
   Aqui cada uma ganha o par escuro do mesmo tom, medido sobre o próprio fundo
   tingido em que ela aparece. Os números em comentário são a razão de contraste.
   ========================================================================= */
:root[data-tema="claro"] .selo.ok{ color:#0f4f2f; }            /* 8,1:1 */
:root[data-tema="claro"] .selo.andamento{ color:#6b4c00; }     /* 7,3:1 */
:root[data-tema="claro"] .selo.recusado{ color:#8f2318; }      /* 7,1:1 */
:root[data-tema="claro"] .nota-info{ color:#6b4c00; }           /* 7,3:1 */
:root[data-tema="claro"] .nota-offline{ color:#15633b; }       /* 6,4:1 */
:root[data-tema="claro"] .nota-recusa b,
:root[data-tema="claro"] .p-recusa{ color:#8f2318; }           /* 7,1:1 */
:root[data-tema="claro"] .secao.s-durante,
:root[data-tema="claro"] .cor-perigo{ color:#9a2418; }         /* 8,0:1 */
:root[data-tema="claro"] .secao.s-durante::before{ border-left-color:#9a2418; }
:root[data-tema="claro"] .risco-vida{ color:#8f2318; }         /* 7,2:1 */
:root[data-tema="claro"] .risco-vida b{ color:#7a1d14; }       /* 8,6:1 */