/* A cor da gravidade declarada como COR, e nao como texto qualquer.
   Sem este registro o navegador trata --g como uma string e a troca e um corte
   seco: cinza num quadro, vermelho no seguinte. Registrada, ela atravessa — e e
   essa travessia que faz o fundo inteiro puxar o olho de volta para o cartao no
   instante em que a resposta chega. Onde @property nao existe, a troca
   simplesmente acontece de uma vez: ninguem fica sem a informacao. */
@property --g{ syntax:'<color>'; inherits:true; initial-value:#6b7b8c; }
:root{ transition:--g .6s ease; }

/* ===========================================================================
   ESCONDER É ESCONDER
   ---------------------------------------------------------------------------
   O atributo `hidden` do HTML vale display:none pela folha do navegador — a de
   menor prioridade que existe. QUALQUER regra nossa com `display` vence ele.
   Foi assim que a faixa "Instale na tela de início" continuou aparecendo depois
   de instalada e depois de dispensada no ×: o hidden estava lá, e o
   `display:grid` da própria faixa passava por cima.

   Esta regra fecha a porta para os dois aplicativos de uma vez. Sem ela, todo
   componente novo que tiver display próprio traz o mesmo defeito de volta — e
   ele é silencioso: o JavaScript funciona, só a tela não obedece.
   =========================================================================== */
[hidden]{ display:none !important; }

/* ===========================================================================
   SIGE-DC · Sistema visual "vidro sobre a cidade"
   Folha única de tokens e primitivas, usada pelo app do cidadão E pelo sistema
   interno. Se uma cor precisa mudar, muda aqui e muda nos dois.

   A ideia, em uma frase: o fundo é o mapa de Valentim Gentil, os painéis são
   vidro escuro flutuando sobre ele, e a luz que atravessa o vidro é a
   gravidade do dia.

   TRÊS REGRAS QUE NÃO SE NEGOCIAM:

   1. Cor é informação, nunca enfeite. Cor forte só aparece para dizer
      gravidade, no vocabulário do INMET. O laranja da marca é só ação e aba
      ativa. O vermelho do SOS é reservado e não se usa em mais nada.
   2. Cor nunca é a única pista. Todo estado carrega também palavra escrita,
      número e altura de barra — para quem não distingue amarelo de laranja e
      para quem está olhando a tela no sol.
   3. Na hora do alerta, legibilidade ganha do efeito. Se o desfoque, a aurora
      ou a animação atrapalharem a leitura do aviso vermelho às três da manhã,
      quem sai é o efeito.

   TEMA E ACESSIBILIDADE SÃO CHAVES SEPARADAS. `data-tema` escolhe noite ou
   dia; `data-facil` desliga desfoque, mapa e enfeites, sobe o contraste e
   aumenta a letra. Juntar as duas obrigaria quem quer tela clara a abrir mão
   do efeito — erro já cometido e corrigido.
   ========================================================================= */

:root{
  /* ---- A noite e o vidro ---- */
  --noite:#080d13;
  --vidro-cor:17,25,34;
  --vidro-op:.52;
  --vidro:rgba(var(--vidro-cor),var(--vidro-op));
  --vidro-borda:rgba(233,241,248,.10);
  --vidro-brilho:rgba(255,255,255,.14);   /* fio de luz no topo do painel */
  --luz:#eaf1f8;
  --luz-2:#a9b9c9;
  --luz-3:#71829a;

  /* ---- Laranja SIGE-DC — SÓ ação e aba ativa ---- */
  --acao-a:#f07a2a;
  --acao-b:#c14e04;
  --acao:linear-gradient(180deg,var(--acao-a),var(--acao-b));

  /* ---- Vermelho do SOS — reservado, fora da escala de gravidade ---- */
  --sos-a:#e8483a;
  --sos-b:#b0241b;

  /* ---- Gravidade: a escala do INMET, e nada além dela ---- */
  --g-sem:#2fa46a;        /* sem alerta      · dia normal        */
  --g-amarelo:#f0c419;    /* aviso amarelo   · perigo potencial  */
  --g-laranja:#e2711d;    /* aviso laranja   · perigo            */
  --g-vermelho:#d8382c;   /* aviso vermelho  · grande perigo     */
  --g-apurando:#6b7b8c;   /* ainda não se sabe · cinza, nunca verde         */
  /* A tela NASCE em "apurando", e nao em verde.
     Verde e uma afirmacao: "nao ha alerta para a cidade". Ate a resposta do
     servidor chegar, essa afirmacao nao pode ser feita — e quem abre o app,
     olha o verde e fecha antes de a resposta chegar sai acreditando numa coisa
     que ninguem verificou. Num dia de alerta vermelho, isso e o pior erro que
     este aplicativo pode cometer. Cinza nao acalma nem assusta: diz que ainda
     nao se sabe, que e a verdade naquele instante. */
  --g:var(--g-apurando);  /* trocado no <html> pelo nível do dia, quando ele chegar */

  /* A MESMA cor, em duas versões: uma para PINTAR, outra para ESCREVER.
     Amarelo #f0c419 é excelente como barra acesa e ilegível como letra sobre
     branco — media 1,15:1 no rótulo "Aviso amarelo · Perigo potencial". No
     escuro as duas versões são a mesma coisa; no claro a de escrever é a cor
     escurecida, calculada a partir da própria cor, para que a régua continue
     valendo para os quatro níveis sem ninguém ter de escolher tom a tom. */
  --acao-txt:var(--acao-a);
  --sos-txt:var(--sos-a);
  --g-txt:var(--g);
  /* Cor de ESCREVER na gravidade, sobre painel escuro tingido com a propria
     cor. --g-txt e a cor de pintar: no vermelho ela da 3,7:1 sobre o painel,
     abaixo do minimo. Clareada a 72% chega a 5,5:1 no pior nivel. */
  --g-txt-forte:color-mix(in srgb, var(--g) 72%, #fff);
  --g-sem-txt:var(--g-sem);
  --g-amarelo-txt:var(--g-amarelo);
  --g-laranja-txt:var(--g-laranja);
  --g-vermelho-txt:var(--g-vermelho);

  /* ---- Medidas ---- */
  --desfoque:20px;
  --saturacao:1.25;
  --raio:16px;
  --raio-p:11px;
  --chanfro:46px;         /* bandeirola do canto: geometria de placa de rodovia */
  /* Folga embaixo da rolagem. Tem que ser MAIOR que o SOS inteiro (ele começa
     a 102px do fim e tem ~51px de altura), senão o último item da tela fica
     escondido debaixo do botão — que foi o que aconteceu na 4.1.0. */
  --folga-flutuante:174px;

  /* ---- Tipografia ----
     Chivo: grotesco de sinalização, peso de sobra para título de alerta.
     Public Sans: feita para formulário público e tela ruim.
     IBM Plex Mono: protocolo e hora — número que se dita ao telefone precisa
     de dígito do mesmo tamanho. */
  --f-titulo:'Chivo','Archivo','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-texto:'Public Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --f-mono:'IBM Plex Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;

  color-scheme:dark;
}

/* ---- Tema claro: a mesma cidade, de dia. Não abre mão do vidro. ---- */
/* No claro, o vidro cobra mais caro do que no escuro.
   Texto branco sobre fundo escuro aguenta o vazamento da cidade por tras; texto
   escuro sobre branco a 60% nao aguenta — o fundo sobe, o branco vira cinza e o
   rotulo do campo desaparece. Medido: o --luz-3 antigo (#6d7f95) dava 3,45:1
   sobre o fundo claro, abaixo do minimo de 4,5:1 que texto pequeno exige. Era
   por isso que o formulario parecia apagado no celular no modo claro. */
:root[data-tema="claro"]{
  --noite:#e6ecf3;
  --vidro-cor:255,255,255;
  --vidro-op:.88;          /* era .60 */
  --vidro-borda:rgba(14,23,35,.14);
  --vidro-brilho:rgba(255,255,255,.75);
  --luz:#0e1723;
  --luz-2:#3d4f65;         /* 7,6:1 sobre branco */
  --luz-3:#4e6076;         /* 6,4:1 sobre branco · era 4,1:1 */
  /* 48% da cor sobre preto: passa em AA nos quatro níveis, tanto na pílula
     tingida quanto sobre branco. Uma fórmula só, e ela acompanha sozinha
     qualquer cor que --g venha a ter. */
  --acao-txt:color-mix(in srgb, var(--acao-a) 48%, #000);
  /* O 193 escrito tem de ser lido antes de tudo; o botao continua no
     vermelho vivo, que e o que puxa o olho. Cor de ler e cor de ver nao
     precisam ser a mesma. */
  --sos-txt:color-mix(in srgb, var(--sos-a) 48%, #000);
  --g-txt:color-mix(in srgb, var(--g) 48%, #000);
  /* No tema claro o painel tingido e claro, entao escurecer e o certo: a mesma
     cor de texto ja usada no resto da tela serve. */
  --g-txt-forte:var(--g-txt);
  --g-sem-txt:color-mix(in srgb, var(--g-sem) 48%, #000);
  --g-amarelo-txt:color-mix(in srgb, var(--g-amarelo) 48%, #000);
  --g-laranja-txt:color-mix(in srgb, var(--g-laranja) 48%, #000);
  --g-vermelho-txt:color-mix(in srgb, var(--g-vermelho) 48%, #000);
  color-scheme:light;
}

/* ---- Modo fácil: a conta do vidro, paga ----
   Desliga desfoque, mapa e enfeites; vidro sólido; contraste alto; letra
   maior. Força o tema claro, porque letra grande em tela escura no sol não
   resolve nada. É acessibilidade E modo econômico, na mesma chave. */
:root[data-facil="1"]{
  --noite:#eef2f7;
  --vidro-cor:255,255,255;
  --vidro-op:1;
  --vidro-borda:#c3cedb;
  --vidro-brilho:transparent;
  --luz:#0a1119;
  --luz-2:#31414f;
  --luz-3:#4b5c6c;
  --desfoque:0px;
  --raio:12px;
  --chanfro:0px;
  color-scheme:light;
}
/* Letra maior de verdade: a folha de layout de cada aplicativo define o corpo
   em px, e só uma regra mais específica que `body` vence isso. */
:root[data-facil="1"] body{ font-size:18.5px; }
:root[data-facil="1"] h1{ font-size:28px; }
:root[data-facil="1"] .dim, :root[data-facil="1"] .c-sub{ font-size:15px; }
:root[data-facil="1"] .cidade,
:root[data-facil="1"] .aurora,
:root[data-facil="1"] .enfeites{ display:none !important; }
:root[data-facil="1"] .veu{ background:var(--noite) !important; }
:root[data-facil="1"] .vidro{ box-shadow:none; border-width:1.5px; }

/* ===========================================================================
   As camadas, de trás para a frente:
   cidade → aurora → enfeites → véu → conteúdo → peças flutuantes
   ========================================================================= */
.camadas{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.cidade{ position:absolute; inset:-4%; opacity:.72; }
:root[data-tema="claro"] .cidade{ opacity:.85; }
.cidade svg{ width:100%; height:100%; display:block; }

/* A aurora é o que o vidro borra. Sem ela, o desfoque não tem o que pegar e o
   efeito vira enfeite. É ela que carrega a cor da gravidade. */
.aurora{ position:absolute; inset:0; }
.aurora i{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--g) 0%, transparent 68%);
  filter:blur(22px); opacity:.42;
  animation:respira 14s ease-in-out infinite;
}
.aurora i:nth-child(1){ width:78vw; height:78vw; left:-22vw; top:-16vh; }
.aurora i:nth-child(2){ width:64vw; height:64vw; right:-18vw; top:26vh; animation-delay:-7s; opacity:.3; }
@keyframes respira{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.13); } }

/* Vocabulário da Defesa Civil espalhado a 8%: textura para o desfoque pegar. */
.enfeites{ position:absolute; inset:0; }
.enfeites svg{ position:absolute; color:var(--g); opacity:.08; animation:flutua 26s ease-in-out infinite; }
@keyframes flutua{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-16px) rotate(4deg); } }

/* O fundo para de respirar enquanto o dedo rola.
   A aurora sao dois circulos de 78vw com blur(22px) animando sem parar, e os
   enfeites sao dez icones flutuando. Parado na tela isso custa pouco; durante
   uma rolagem por impulso, obriga o celular a recompor a tela inteira a cada
   quadro, e quem paga o atraso e a barra de baixo, que fica para tras e parece
   rolar junto com o conteudo. Ninguem repara no fundo respirando enquanto le
   rolando; todo mundo repara na barra escorregando. Volta sozinho ao parar. */
:root[data-rolando] .aurora i,
:root[data-rolando] .enfeites svg{ animation-play-state:paused; }

/* Quem pediu menos movimento ao sistema nunca ve nada disso animar. */
@media (prefers-reduced-motion: reduce){
  .aurora i, .enfeites svg{ animation:none; }
}

/* Deixa a cidade aparecer em cima e mantém a área de leitura calma embaixo. */
.veu{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(8,13,19,.10) 0%, rgba(8,13,19,.55) 34%, rgba(8,13,19,.86) 72%, var(--noite) 100%);
}
:root[data-tema="claro"] .veu{
  background:linear-gradient(180deg,
    rgba(230,236,243,.10) 0%, rgba(230,236,243,.55) 34%, rgba(230,236,243,.88) 72%, var(--noite) 100%);
}

@media (prefers-reduced-motion: reduce){
  .aurora i, .enfeites svg{ animation:none; }
}

/* ===========================================================================
   Vidro
   ========================================================================= */
.vidro{
  background:var(--vidro);
  border:1px solid var(--vidro-borda);
  border-radius:var(--raio);
  backdrop-filter:blur(var(--desfoque)) saturate(var(--saturacao));
  -webkit-backdrop-filter:blur(var(--desfoque)) saturate(var(--saturacao));
  box-shadow:0 18px 40px rgba(0,0,0,.34), inset 0 1px 0 var(--vidro-brilho);
  position:relative;
}
/* Onde o navegador não suporta o efeito, o painel vira SÓLIDO — nunca um
   retângulo transparente ilegível. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .vidro{ background:rgba(var(--vidro-cor),.96); }
}

/* A bandeirola do canto: um triângulo cheio, na cor da gravidade, no alto à
   direita do painel de alerta. É geometria de placa de sinalização de rodovia,
   não de cartão de aplicativo — e é o que mais afasta esta tela de qualquer app
   genérico. Some no modo fácil, junto com o resto do efeito. */
.chanfro::after{
  content:''; position:absolute; top:0; right:0; pointer-events:none;
  width:var(--chanfro); height:var(--chanfro);
  background:linear-gradient(225deg, var(--g) 0 50%, transparent 50%);
  border-top-right-radius:var(--raio);
}
:root[data-facil="1"] .chanfro::after{ width:34px; height:34px; }

/* ===========================================================================
   Medidor de gravidade — quatro barras de altura crescente
   Cor sozinha diz QUE tem alguma coisa; não diz QUÃO PERTO DO PIOR se está.
   Barras venceram arco e anel por um motivo prático: é a forma que melhor
   sobrevive em tamanho pequeno, e este mesmo desenho vira o ícone da
   notificação, onde aparece com 24 px de lado.
   O medidor é peça isolada: trocar a forma não mexe em mais nada.
   ========================================================================= */
.medidor{ display:flex; align-items:flex-end; gap:6px; height:56px; flex:0 0 auto; }
.medidor b{
  display:block; width:13px; border-radius:4px;
  background:var(--luz-3); opacity:.3; transition:all .35s ease;
}
.medidor b:nth-child(1){ height:38%; }
.medidor b:nth-child(2){ height:58%; }
.medidor b:nth-child(3){ height:79%; }
.medidor b:nth-child(4){ height:100%; }
.medidor b.on{ background:var(--g); opacity:1; box-shadow:0 0 14px color-mix(in srgb, var(--g) 60%, transparent); }
:root[data-facil="1"] .medidor b.on{ box-shadow:none; }

/* Escada do INMET: os quatro degraus em pé, de baixo para cima, com a casa de
   hoje marcada. Vertical de propósito — a escala é uma ESCADA, e ler de baixo
   para cima é o que faz "ainda há dois degraus acima" aparecer sozinho. É a
   segunda pista, escrita, do mesmo dado que o medidor mostra em altura de barra. */
.escada{ display:flex; flex-direction:column; gap:5px; flex:0 0 auto; }
.escada span{
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  font:600 11px/1.2 var(--f-texto); letter-spacing:.02em; color:var(--luz-3);
}
.escada span::before{
  content:''; width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:currentColor; opacity:.4;
}
.escada span.aqui{ color:var(--luz); font-weight:800; }
.escada span.aqui::before{
  background:var(--g); opacity:1; box-shadow:0 0 9px color-mix(in srgb, var(--g) 70%, transparent);
}

/* ===========================================================================
   Ação, SOS e formulário
   ========================================================================= */
.acao{
  background:var(--acao); color:#fff; border:none;
  font:700 15px/1 var(--f-texto); letter-spacing:.01em;
  padding:15px 18px; border-radius:var(--raio-p); cursor:pointer;
  box-shadow:0 8px 22px rgba(193,78,4,.34);
}
.acao:active{ transform:translateY(1px); }
.acao-2{
  background:rgba(var(--vidro-cor),.5); color:var(--luz);
  border:1px solid var(--vidro-borda);
  font:600 14px/1 var(--f-texto); padding:13px 16px;
  border-radius:var(--raio-p); cursor:pointer;
}
.sos{
  background:linear-gradient(180deg,var(--sos-a),var(--sos-b)); color:#fff;
  border:none; cursor:pointer;
  box-shadow:0 12px 30px rgba(176,36,27,.5), 0 0 0 6px rgba(232,72,58,.14);
}

.campo{ display:block; margin:14px 0; }
.campo > span{
  display:block; font:700 11px/1.3 var(--f-texto); letter-spacing:.06em;
  text-transform:uppercase; color:var(--luz-3); margin-bottom:7px;
}
.campo input, .campo select, .campo textarea{
  width:100%; padding:13px 14px; border-radius:var(--raio-p);
  border:1px solid var(--vidro-borda); background:rgba(var(--vidro-cor),.55);
  color:var(--luz); font:400 15px/1.45 var(--f-texto);
}
.campo textarea{ resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:2px solid var(--acao-a); outline-offset:1px; border-color:transparent;
}

/* ---------------------------------------------------------------------------
   TEMA CLARO: o que FLUTUA POR CIMA do conteudo fica solido.
   Mesma licao que a lista de autocompletar (4.5.1) e a barra de baixo (4.6.3)
   ja tinham ensinado, e que faltava aplicar aqui: painel parado no meio da tela
   pode ser translucido; painel com conteudo correndo atras, nao. A folha do
   formulario e o caso extremo — ela cobre a tela inteira e e onde a pessoa
   DIGITA, com a cidade, o mapa e o aviso vazando por baixo de cada campo.
   --------------------------------------------------------------------------- */
:root[data-tema="claro"] .folha{ background:#fff; }
:root[data-tema="claro"] .folha-topo{ border-bottom-color:rgba(14,23,35,.13); }
:root[data-tema="claro"] .campo input,
:root[data-tema="claro"] .campo select,
:root[data-tema="claro"] .campo textarea{
  background:#fff; border-color:#b9c5d3;
}
/* Campo vazio com borda fraca sobre branco fica invisivel: a pessoa nao ve onde
   escrever. A borda mais firme e o que desenha o campo. */
:root[data-tema="claro"] .campo input::placeholder,
:root[data-tema="claro"] .campo textarea::placeholder{ color:#62738b; }
/* Botao secundario a 50% de branco sobre branco parecia desligado. */
:root[data-tema="claro"] .acao-2{ background:#eef2f7; border-color:#c2cddb; }
:root[data-tema="claro"] .acao-2:active{ background:#e2e9f1; }
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }