/* Sentinela · camada editorial (redesenho de nov/2026).

   Observatório meteorológico editorial: papel claro, verde-petróleo, azul
   atmosférico, sálvia e terracota; títulos em Playfair Display, texto em
   DM Sans e metadados técnicos em Atkinson Hyperlegible.

   É só apresentação. Carregada depois do tema.css: troca valores dos tokens
   --t-* (claro) e refina componentes, sem mexer em dados, ids ou scripts.
   Para reverter, basta remover o <link> deste arquivo (e voltar o padrão do
   tema.js para "escuro").
   O modo escuro (?tema=escuro) continua existindo, com as fontes novas. */

/* ---------- Paleta clara (padrão) ---------- */
:root{
  --t-fundo:#F0EEE6;          /* papel */
  --t-superficie:#F7F5EE;     /* papel mais claro */
  --t-texto:#182A2B;          /* verde-petróleo */
  --t-suave:#5B6963;          /* cinza esverdeado (AA sobre o papel) */
  --t-linha:#D5D6CB;
  --t-agua:#3F6F74;           /* azul atmosférico, legível como texto */
  --t-agua-clara:#8CAEB0;
  --t-sol:#B9623B;            /* card de sistemas em aproximação */
  --t-terracota:#B9623B;     /* alertas e destaques pontuais da camada editorial */
  --t-mata:#5C7A62;           /* sálvia */
  --t-agua-escura:#2F5559;
  --t-agua-tinta:#DDE5DF;
  --t-linha-forte:#A5AC9F;
  --t-mata-tinta:#E2E8DC;
  --t-erro:#A3432F;
  --t-erro-tinta:#F2E0D6;

  --fonte:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fonte-numeros:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;   /* letras pequenas: fonte feita para leitura */
  --fonte-serifa:"Playfair Display",Georgia,"Times New Roman",serif;
  --fonte-voz:var(--fonte-serifa);
  --raio-cartao:3px;
  --raio-controle:3px;
}

/* Papel com um grão quase imperceptível, só decorativo. */
body{background-color:var(--t-fundo)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E")}
:root[data-tema="escuro"] body::before{opacity:.04}
@media print{body::before{display:none}}

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{font-family:var(--fonte-serifa);font-weight:500;letter-spacing:-.015em}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.08}
h3{font-size:clamp(19px,2vw,24px)}
/* Metadados e rótulos técnicos: Atkinson Hyperlegible, 13 px, sem caixa alta. */
body .sobretitulo,body .metadado span,body .faixa-rotulo,body .rodape-titulo,body .grupo-controle>label,
body .extremo span,body .legenda-item,body .nota-grafico,body .origem{
  font-family:var(--fonte-numeros);font-size:13px;font-weight:500;letter-spacing:.02em;}
/* Números de leitura em destaque: serifa com algarismos alinhados. */
.leituras-resumo strong,.metadado strong,.barometro-leitura,.chuva-total strong,.extremo strong,
.mar-principal strong,#raios-total,.valor-mapa,.metricas-comparacao strong,.referencia-valor{
  font-family:var(--fonte-serifa);font-weight:500;font-variant-numeric:lining-nums tabular-nums}
.metadado strong{font-family:var(--fonte-numeros);font-size:13px;letter-spacing:.02em}
#visao .faixa-agora strong{font-weight:500}

/* ---------- Cabeçalho ---------- */
body .cabecalho{background:color-mix(in srgb,var(--t-fundo) 88%,transparent);border-bottom:1px solid var(--t-linha)}
body .cabecalho-interno{min-height:78px}
body .marca{display:inline-flex;align-items:center;gap:12px;text-align:left;letter-spacing:0;font-weight:400}
.marca-simbolo{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--t-texto);border-radius:50%;
  font-family:var(--fonte-serifa);font-style:italic;font-size:19px;line-height:1;padding-bottom:2px}
.marca-texto{display:grid;gap:3px;line-height:1}
.marca-texto b{font-family:var(--fonte);font-size:13px;font-weight:700;letter-spacing:.16em}
.marca-texto small{font-family:var(--fonte-numeros);font-size:12px;letter-spacing:.02em;color:var(--t-suave)}
body .navegacao{gap:30px}
body .navegacao button{font-family:var(--fonte);font-size:13px;font-weight:500;letter-spacing:.02em;}
body .navegacao button::after{height:1px;background:var(--t-terracota)}
body .link-acesso{font-family:var(--fonte-numeros);font-size:13px;letter-spacing:.02em;}
body .botao-menu{font-size:13px;letter-spacing:.02em;border-radius:var(--raio-controle)}

/* ---------- Entrada do observatório ---------- */
:root{--disco:min(44vw,500px)}
body .ceu-visao{
  border-radius:0;margin:0 0 clamp(28px,4vw,52px);color:var(--t-texto);background:transparent;
  padding:clamp(40px,6vw,84px) 0 clamp(48px,7vw,92px);border-bottom:1px solid var(--t-linha);transition:none}
/* O disco usa as cores do céu reais (--ceu-*, pela hora e pelo sol); é decoração. */
body .ceu-visao::before{content:"";position:absolute;z-index:0;right:clamp(0px,2vw,24px);top:50%;transform:translateY(-50%);
  width:var(--disco);height:var(--disco);border-radius:50%;
  background:radial-gradient(circle at 40% 32%,var(--ceu-horizonte,#d7d6bd) 0%,var(--ceu-meio,#a8c0b7) 42%,var(--ceu-topo,#5b7b7a) 100%);
  filter:saturate(.72)}
body .ceu-visao::after{content:"";position:absolute;z-index:0;right:calc(clamp(0px,2vw,24px) - 14px);top:50%;transform:translateY(-50%);
  width:calc(var(--disco) + 28px);height:calc(var(--disco) + 28px);border-radius:50%;border:1px solid color-mix(in srgb,var(--t-texto) 22%,transparent)}
body .ceu-canvas{inset:auto;right:clamp(0px,2vw,24px);top:50%;transform:translateY(-50%);
  width:var(--disco);height:var(--disco);border-radius:50%}
body .ceu-serra{display:none}
body .ceu-conteudo{max-width:min(620px,100%)}
body .ceu-topo{display:grid;gap:14px;justify-items:start}
.ceu-kicker{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 6px;font-family:var(--fonte-numeros);font-size:13px;letter-spacing:.02em;color:var(--t-suave)}
.ceu-kicker span:first-child::before{content:"";display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px}
body #visao .ceu-visao h1{font-family:var(--fonte-serifa);font-weight:500;font-size:clamp(46px,7.4vw,104px);line-height:.92;letter-spacing:-.05em;margin:6px 0 4px;max-width:9em;text-wrap:balance}
.ceu-subtitulo{margin:0;max-width:40ch;font-size:clamp(14px,1.4vw,16px);line-height:1.75;color:var(--t-suave)}
body #visao .ceu-visao .seletor-estacao{background:transparent;border:1px solid var(--t-linha-forte);border-radius:999px;margin-top:6px}
body #visao .ceu-visao .seletor-estacao button{font-size:12px;letter-spacing:.02em}
body #visao #ceu-visao .painel-temperatura .temperatura{font-family:var(--fonte-serifa);font-weight:400;letter-spacing:-.07em;
  font-size:clamp(80px,13vw,150px);line-height:.86;font-variant-numeric:lining-nums tabular-nums}
body #visao #ceu-visao .painel-temperatura .temperatura sup{font-family:var(--fonte);letter-spacing:0;font-size:.2em}
body #visao #ceu-visao .painel-temperatura .local-linha{font-family:var(--fonte-numeros);font-size:13px;font-weight:500;letter-spacing:.02em;}
body #visao #ceu-visao .painel-temperatura .selo{border-radius:999px;letter-spacing:.02em}
body .ceu-frase{font-family:var(--fonte-serifa);font-style:italic;font-weight:400;font-size:clamp(20px,2.4vw,28px);line-height:1.3;max-width:26ch}
body .ceu-frase2{color:var(--t-suave)}
body .ceu-aviso{background:var(--t-agua-tinta);color:var(--t-texto);border-left:2px solid var(--t-terracota);border-radius:0}
body .aviso-manutencao{border-radius:0;border-left:2px solid var(--t-terracota)}

@media (max-width:760px){
  :root{--disco:min(86vw,420px)}
  body .ceu-visao{padding-bottom:calc(var(--disco) * .62)}
  body .ceu-visao::before,body .ceu-canvas{top:auto;bottom:calc(var(--disco) * -.34);right:-14vw;transform:none}
  body .ceu-visao::after{top:auto;bottom:calc(var(--disco) * -.34 - 14px);right:calc(-14vw - 14px);transform:none}
}

/* ---------- Superfícies: linhas finas em vez de caixas ---------- */
body .visual-card,body .dicas-dia,body .detalhes-tecnicos,body .grafico-area{border-color:var(--t-linha);border-radius:var(--raio-cartao)}
body .visual-card{background:var(--t-superficie)}
body .visual-card-cabecalho h3,body .grafico-cabecalho h3,body .chuva-cabecalho h2{font-family:var(--fonte-serifa);font-weight:500}
body .secao>.topo-secao h2{font-size:clamp(32px,4.4vw,56px);letter-spacing:-.04em;line-height:1}
body .sobretitulo{color:var(--t-agua)}
body .controle,body .botao-principal{background:var(--t-texto);color:var(--t-fundo)}
body .controle,body .botao-principal,body .visual-card,body a,body button{transition:background-color .2s ease,color .2s ease,border-color .2s ease}

/* ---------- Legibilidade: sem letra clara sobre fundo médio ----------
   Estados ativos e botões usam texto escuro (verde-petróleo) sobre tinta clara,
   com borda fina e peso maior. Contraste acima de 9:1 nas duas paletas. */
body .seletor-estacao button.ativo,body .rede-abas button.ativo,body .controle.ativo,
body #variaveis-grafico .controle[aria-pressed="true"],body .gfs-modo button[aria-pressed="true"],
body .info-pressao[open] summary,body .satelite-filtros button.ativo,body .controle[aria-pressed="true"]{
  background:var(--t-agua-tinta);color:var(--t-texto);border:1px solid var(--t-agua);font-weight:700;opacity:1}
body .fallback-fluxo>div.ativo{background:var(--t-agua-tinta);color:var(--t-texto);border:1px solid var(--t-agua)}
body .botao-principal,body .pagina-contato .botao-principal{background:var(--t-agua-tinta);color:var(--t-texto);border:1px solid var(--t-agua);font-weight:700}
body .botao-principal:hover{background:var(--t-mata-tinta)}
body .mapa-condicao[data-modo="chuva"]{background:var(--t-agua-tinta);color:var(--t-texto);border:1px solid var(--t-agua)}
/* Rótulos que herdavam branco/claro do céu ou de cartões escuros. */
body .ceu-visao,body .ceu-visao *{text-shadow:none}
body .ceu-visao .seletor-estacao button{color:var(--t-texto)}
body .ceu-visao .selo{color:var(--t-texto)}

/* ---------- Etapa 3: mapa, gráficos, gradiente, satélite ---------- */
/* Mapa da rede: base mais calma no claro (os marcadores e as setas ficam intactos). */
:root:not([data-tema="escuro"]) #mapa:not(.modo-chuva) .leaflet-tile-pane{filter:saturate(.55) contrast(.96) sepia(.1)}
body #mapa,body #mapa-raios,body .mapa-layout .leaflet-container{border-radius:var(--raio-cartao);border:1px solid var(--t-linha)}
body .leaflet-container{font-family:var(--fonte)}
body .leaflet-bar,body .leaflet-bar a{border-radius:var(--raio-cartao)}
body .leaflet-bar a{background:var(--t-superficie);color:var(--t-texto);border-color:var(--t-linha)}
body .leaflet-bar a:hover{background:var(--t-agua-tinta)}
body .leaflet-popup-content-wrapper,body .leaflet-popup-tip{background:var(--t-superficie);color:var(--t-texto)}
body .leaflet-popup-content-wrapper{border-radius:var(--raio-cartao);border:1px solid var(--t-linha)}
body .leaflet-control-attribution{font-family:var(--fonte-numeros);font-size:13px;background:color-mix(in srgb,var(--t-fundo) 85%,transparent);color:var(--t-suave)}
body .mapa-detalhes{border-radius:var(--raio-cartao);background:var(--t-superficie);border:1px solid var(--t-linha)}
body .legenda{font-family:var(--fonte-numeros);font-size:13px;letter-spacing:.02em;color:var(--t-suave)}

/* Rede e mapa / satélite: abas sublinhadas em vez de pílulas. */
body .rede-abas{background:transparent;border:0;border-bottom:1px solid var(--t-linha);border-radius:0;gap:24px;padding:0}
body .rede-abas button{border:0;border-radius:0;background:transparent;font-size:13px;letter-spacing:.02em;border-bottom:1px solid transparent}
body .rede-abas button.ativo{background:transparent;color:var(--t-texto);border:0;border-bottom:1px solid var(--t-terracota)}
body .satelite-filtros{border-radius:var(--raio-cartao);border:1px solid var(--t-linha);background:var(--t-superficie)}
body #satelite-hora,body .satelite-carimbo,body #satelite-legenda,body #satelite-contexto,body #ir-estado{font-family:var(--fonte-numeros);letter-spacing:.02em}
body #satelite-play{border-radius:var(--raio-controle)}

/* Gráficos: cartões de papel, títulos em serifa, grade e eixos discretos (cores vêm dos tokens). */
body .grafico-area,body .grafico{border-radius:var(--raio-cartao)}
body .grafico-cabecalho h3,body .grafico-subtitulo{font-family:var(--fonte-serifa)}
body .extremo strong{font-weight:500}
body .legenda-item::before{border-radius:0}

/* Gradiente de pressão: mesma linguagem editorial, com os avisos de confiança intactos. */
body .gradiente-hero,body .gradiente-estacao,body .gradiente-confianca,body .campo-gradiente,body .gradiente-aviso{border-radius:var(--raio-cartao);border-color:var(--t-linha)}
body .gradiente-metricas article{border-color:var(--t-linha)}
body .gradiente-valor,body .campo-gradiente-topo strong,body .gradiente-confianca-topo strong{font-family:var(--fonte-serifa);font-weight:500}
body .campo-gradiente-topo span,body .gradiente-confianca-topo span,body .gradiente-valor small,body .gradiente-valor span{font-family:var(--fonte-numeros);font-size:13px;letter-spacing:.02em;}
body .gradiente-aviso{border-left:2px solid var(--t-terracota)}

/* Pluviômetro: título em serifa e total acumulado em destaque, sem mudar a leitura. */
body .pluviometro-sentinela{border-radius:var(--raio-cartao);border-color:var(--t-linha)}
body .pluviometro-sentinela h2,body .pluviometro-sentinela h3{font-family:var(--fonte-serifa);font-weight:500}
body .chuva-total strong{font-size:clamp(34px,5vw,56px);font-weight:400}

/* ---------- Letras sempre pretas (pedido de 28/10/2026) ----------
   Nenhum texto claro sobre fundo médio ou escuro: onde havia letra branca, a
   letra vira preta e o fundo vira uma tinta clara da paleta. Vale para o tema
   claro (padrão); o escuro opcional (?tema=escuro) mantém letra clara no fundo escuro. */
:root{--t-preto:#000000}
:root:not([data-tema="escuro"]) .mapa-marcador,
:root:not([data-tema="escuro"]) .gradiente-aviso,
:root:not([data-tema="escuro"]) .campo-gradiente-topo strong,
:root:not([data-tema="escuro"]) .satelite-carimbo,
:root:not([data-tema="escuro"]) .mapa-aviso-gesto,
:root:not([data-tema="escuro"]) .mapa-condicao[data-modo="chuva"],
:root:not([data-tema="escuro"]) .seletor-estacao button.ativo,
:root:not([data-tema="escuro"]) .rede-abas button.ativo,
:root:not([data-tema="escuro"]) .botao-principal,
:root:not([data-tema="escuro"]) .pagina-contato .botao-principal,
:root:not([data-tema="escuro"]) .fallback-fluxo>div.ativo,
:root:not([data-tema="escuro"]) .info-pressao[open] summary,
:root:not([data-tema="escuro"]) #variaveis-grafico .controle[aria-pressed="true"],
:root:not([data-tema="escuro"]) .gfs-modo button[aria-pressed="true"],
:root:not([data-tema="escuro"]) .gradiente-hero,
:root:not([data-tema="escuro"]) #visao .painel-temperatura{background:var(--t-agua-tinta)!important;color:var(--t-preto)!important;border-color:var(--t-agua)!important}
:root:not([data-tema="escuro"]) .gradiente-resumo-rotulo,
:root:not([data-tema="escuro"]) .gradiente-valor small,
:root:not([data-tema="escuro"]) .gradiente-confianca-topo span,
:root:not([data-tema="escuro"]) .gradiente-confianca-topo strong,
:root:not([data-tema="escuro"]) .gradiente-confianca p,
:root:not([data-tema="escuro"]) .gradiente-aviso svg,
:root:not([data-tema="escuro"]) .fallback-fluxo>div.ativo span,
:root:not([data-tema="escuro"]) .fallback-fluxo>div.ativo small,
:root:not([data-tema="escuro"]) #visao .painel-temperatura .local-linha,
:root:not([data-tema="escuro"]) #visao .painel-temperatura .selo,
:root:not([data-tema="escuro"]) #visao .painel-temperatura .origem{color:var(--t-preto)!important;background:transparent}
:root:not([data-tema="escuro"]) .gradiente-hero *,
:root:not([data-tema="escuro"]) #visao .painel-temperatura *,
:root:not([data-tema="escuro"]) .gradiente-hero p,
:root:not([data-tema="escuro"]) .gradiente-hero span,
:root:not([data-tema="escuro"]) .gradiente-hero small,
:root:not([data-tema="escuro"]) .gradiente-hero strong,
:root:not([data-tema="escuro"]) .gradiente-hero h2,
:root:not([data-tema="escuro"]) .gradiente-hero h3{color:var(--t-preto)!important}
:root:not([data-tema="escuro"]) .gradiente-hero{background:var(--t-superficie)!important;border-color:var(--t-linha)!important}
:root:not([data-tema="escuro"]) .gradiente-aviso{background:var(--t-agua-tinta)!important;border-left:2px solid var(--t-terracota)!important}
:root:not([data-tema="escuro"]) .satelite-carimbo,:root:not([data-tema="escuro"]) .mapa-aviso-gesto{background:color-mix(in srgb,var(--t-fundo) 90%,transparent)!important}

/* ---------- Menos texto na aba Rede e mapa ---------- */
.texto-resumido{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;max-width:none}
.texto-resumido.aberto{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.texto-resumido[hidden]+.texto-mais{display:none}
.texto-mais{display:inline-block;min-height:0;margin:2px 0 6px;padding:0;border:0;background:none;color:var(--t-agua);font:inherit;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.texto-mais[hidden]{display:none}
body #rede .legenda-item{font-size:13px;line-height:1.35}
body #rede .nota-rede{font-size:13px}

.legenda-mais{display:inline}
.legenda-mais summary{display:inline;color:var(--t-agua);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.legenda-mais[open] summary{display:block;margin-bottom:4px}

/* ---------- Rodapé ---------- */
body .rodape-interno{border-top:1px solid var(--t-linha)}
body .rodape-nota{font-family:var(--fonte-numeros);font-size:13px;letter-spacing:.02em}

/* Foco visível (teclado) em verde-petróleo/terracota. */
:focus-visible{outline:2px solid var(--t-terracota);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  body .controle,body .botao-principal,body .visual-card,body a,body button{transition:none}
}