/* Sentinela · tema (etapa 0 do redesenho).

   Carregado por último. Define a paleta e a tipografia e as conecta às variáveis
   que as folhas antigas já usam (--fundo, --texto, --destaque…), sem reescrever
   componentes. Para reverter, basta remover o <link> deste arquivo.

   Modo escuro: padrão em qualquer aparelho (out/2026). assets/js/tema.js põe
   data-tema="escuro" no <html>; ?tema=claro e ?tema=escuro servem de prévia.
   Sem JavaScript, a regra @media (prefers-color-scheme:dark) mais abaixo
   aplica as mesmas cores quando o sistema está escuro.
   As folhas antigas (base.css) usam só estes tokens, salvo cores de propósito
   fixas: céu do topo, escalas do satélite, raios e contornos sobre a imagem. */

:root{
  color-scheme:light;

  /* Paleta · claro */
  --t-fundo:#E9EEF0;
  --t-superficie:#F6F8F9;
  --t-texto:#1C2B2E;
  --t-suave:#4F6166;
  --t-linha:#C9D3D6;
  --t-agua:#3C6E8F;
  --t-agua-clara:#9DBBCB;
  --t-sol:#D9A23A;          /* reservado ao card de sistemas em aproximação */
  --t-mata:#2F5948;
  /* Derivadas (misturas calculadas da própria paleta) */
  --t-agua-escura:#305872;  /* água 80% + preto */
  --t-agua-tinta:#D7E3E9;   /* água clara 35% + superfície */
  --t-linha-forte:#95A1A4;  /* linha 70% + texto */
  /* Estados: verde de "em operação" e vermelho de falha (nunca a cor sol). */
  --t-mata-tinta:#DCE8E1;
  --t-erro:#A3432F;
  --t-erro-tinta:#F4E1DC;

  /* Cor fixa de cada estação, usada em gráficos, mapa e legendas.
     01 e 02 são as estações atuais; as seguintes ficam reservadas. */
  --estacao-01:var(--t-agua);
  --estacao-02:var(--t-mata);
  --estacao-03:#7A5C8F;
  --estacao-04:#8F5A3C;
  --estacao-05:#4E7D78;
  --estacao-06:#5E6B8F;

  /* Tipografia */
  --fonte:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fonte-numeros:"Barlow Semi Condensed","Atkinson Hyperlegible",system-ui,sans-serif;
  --fonte-voz:var(--fonte-numeros);   /* a Literata saiu; números grandes usam a Barlow */

  /* Ligação com as variáveis das folhas antigas */
  --fundo:var(--t-fundo);
  --fundo-claro:var(--t-superficie);
  --branco:var(--t-superficie);
  --texto:var(--t-texto);
  --suave:var(--t-suave);
  --linha:var(--t-linha);
  --linha-forte:var(--t-linha-forte);
  --destaque:var(--t-agua);
  --destaque-escuro:var(--t-agua-escura);
  --destaque-claro:var(--t-agua-tinta);
  --azul:var(--t-agua);
  --painel:var(--t-mata);
  /* "Âmbar" marcava fonte externa e avisos comuns. A cor sol é só do card de
     aproximação, então aqui vira o tom suave. */
  --ambar:var(--t-suave);
  --ambar-claro:var(--t-superficie);
  --sombra:none;
}

/* Modo escuro: data-tema="escuro" (tema.js, que segue o sistema). */
:root[data-tema="escuro"]{
  color-scheme:dark;
  --t-fundo:#121A1C;
  --t-superficie:#1A2427;
  --t-texto:#E3EBED;
  --t-suave:#9DB0B5;
  --t-linha:#2E3D41;
  --t-agua:#6FA3C4;
  --t-agua-clara:#2F4F62;
  --t-sol:#E6B655;
  --t-mata:#7FB49C;
  --t-agua-escura:#8DB7D1;  /* no escuro, o "escuro" do destaque é o tom mais claro */
  --t-agua-tinta:#22343D;
  --t-linha-forte:#4F6266;
  --t-mata-tinta:#1E3128;
  --t-erro:#E8907E;
  --t-erro-tinta:#3A2522;
  --estacao-03:#A98BBE;
  --estacao-04:#C48A6A;
  --estacao-05:#7FB0AA;
  --estacao-06:#93A0C4;
  /* Cores por variável (base.css), mais claras para contrastar no fundo escuro. */
  --cor-temperatura:#E08A66;
  --cor-pressao:#A99BE0;
  --cor-umidade:#6BC1C8;
  --cor-uv:#C9A25A;
  --cor-chuva:#7FA9E3;
  --cor-raio:#E5826C;
}

/* Sem JavaScript (tema.js não roda): segue o sistema com as mesmas cores. */
@media (prefers-color-scheme:dark){:root:not([data-tema]){
  color-scheme:dark;
  --t-fundo:#121A1C;
  --t-superficie:#1A2427;
  --t-texto:#E3EBED;
  --t-suave:#9DB0B5;
  --t-linha:#2E3D41;
  --t-agua:#6FA3C4;
  --t-agua-clara:#2F4F62;
  --t-sol:#E6B655;
  --t-mata:#7FB49C;
  --t-agua-escura:#8DB7D1;  /* no escuro, o "escuro" do destaque é o tom mais claro */
  --t-agua-tinta:#22343D;
  --t-linha-forte:#4F6266;
  --t-mata-tinta:#1E3128;
  --t-erro:#E8907E;
  --t-erro-tinta:#3A2522;
  --estacao-03:#A98BBE;
  --estacao-04:#C48A6A;
  --estacao-05:#7FB0AA;
  --estacao-06:#93A0C4;
  /* Cores por variável (base.css), mais claras para contrastar no fundo escuro. */
  --cor-temperatura:#E08A66;
  --cor-pressao:#A99BE0;
  --cor-umidade:#6BC1C8;
  --cor-uv:#C9A25A;
  --cor-chuva:#7FA9E3;
  --cor-raio:#E5826C;
}}

/* Base */
html,body{background:var(--fundo);color:var(--texto)}
body{font-family:var(--fonte);background-image:none}
/* Todo valor medido com algarismos de largura fixa: números não "pulam". */
body{font-variant-numeric:tabular-nums}

/* Títulos e números: Barlow Semi Condensed. Texto corrido continua em Atkinson. */
h1,h2,h3,h4,
.temperatura,.valor-mapa,.leituras-resumo strong,.metadado strong,.barometro-leitura,
.chuva-total strong,.extremo strong,.metricas-comparacao strong,.referencia-valor,
.mar-principal strong,#raios-total,.seta-rotulo,.gradiente-valor{
  font-family:var(--fonte-numeros);
}
h1,h2,h3,h4{font-weight:600;letter-spacing:0}

/* A frase do céu é texto, não número: Atkinson, sem itálico. */
.ceu-frase{font-family:var(--fonte);font-style:normal}

/* Menos sombras e menos caixa alta: hierarquia por tamanho, peso e espaço. */
body *{box-shadow:none!important;text-transform:none!important}

/* Foco do teclado visível nas duas paletas (usa outline, não sombra). */
:focus-visible{outline:2px solid var(--t-agua);outline-offset:2px}

/* ---------- Etapa 1: navegação, esqueletos e dado ausente ---------- */

/* Leitor de tela lê; a tela não mostra. */
.visualmente-oculto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Esqueletos estáticos com o formato do conteúdo. Sem brilho animado: o único
   movimento contínuo do site é o número deslizando. */
.esqueleto{display:inline-block;vertical-align:middle;background:var(--t-linha);opacity:.55;border-radius:6px}
.esqueleto-pilula{width:120px;height:36px;border-radius:999px;margin:0 8px 8px 0}
.esqueleto-texto{width:9em;height:1em}
.esqueleto-curto{width:5em;height:.9em}
.esqueleto-numero{width:2.2em;height:.8em;border-radius:10px}
.esqueleto-linha{display:block;width:min(28em,90%);height:.9em;margin:.35em 0}
.esqueleto-cartao{display:block;height:150px;border-radius:14px}

/* Dado ausente: frase com estação e horário, em tamanho de texto, nunca "—". */
.temperatura.sem-dado{font-family:var(--fonte)!important;font-size:clamp(18px,4vw,22px)!important;font-weight:700!important;letter-spacing:0!important;line-height:1.3!important}
.temperatura.sem-dado sup{display:none}
.sem-dado{font-family:var(--fonte);font-size:15px;font-weight:700;letter-spacing:0}
.valor-mapa.sem-dado{font-size:18px;line-height:1.3}

/* Transição curta entre seções (View Transitions); nada ao rolar a página. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html{scroll-behavior:auto}
}

/* Barra de navegação fixa embaixo, só em telas estreitas. */
.barra-inferior{display:none}
@media (max-width:760px){
  /* Margem lateral de 16 px e nada de rolagem horizontal. */
  .cabecalho-interno,.secao,.rodape-interno{width:calc(100% - 32px)!important;max-width:var(--largura)}
  html,body{overflow-x:clip}
  img,svg,canvas,video,table{max-width:100%}

  /* No celular, as seções ficam na barra de baixo: some o menu do topo. */
  .navegacao,.botao-menu,.menu-recolhido{display:none!important}
  .barra-inferior{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:1200;
    padding:4px 8px calc(4px + env(safe-area-inset-bottom));
    background:var(--t-superficie);border-top:1px solid var(--t-linha);
  }
  .barra-inferior button{
    min-height:52px;padding:6px 2px;border:0;border-radius:12px;background:none;
    font:inherit;font-size:14px;font-weight:700;color:var(--t-suave);cursor:pointer;
  }
  .barra-inferior button.ativo{color:var(--t-agua);background:var(--t-agua-tinta)}
  /* Espaço para a barra não cobrir o fim da página. */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* ---------- Etapa 2: o número desliza para o novo valor ----------
   Único movimento contínuo do site (movimento.js). Velho e novo ocupam a mesma
   célula; o velho sai e o novo entra, para cima se subiu e para baixo se caiu. */
.desliza{display:inline-grid;overflow:hidden;vertical-align:bottom}
.desliza>span{grid-area:1/1}
.desliza.sobe .desliza-velho{animation:desliza-sai-cima .32s ease-in forwards}
.desliza.sobe .desliza-novo{animation:desliza-entra-baixo .32s ease-out}
.desliza.desce .desliza-velho{animation:desliza-sai-baixo .32s ease-in forwards}
.desliza.desce .desliza-novo{animation:desliza-entra-cima .32s ease-out}
@keyframes desliza-sai-cima{to{transform:translateY(-100%);opacity:0}}
@keyframes desliza-sai-baixo{to{transform:translateY(100%);opacity:0}}
@keyframes desliza-entra-baixo{from{transform:translateY(100%);opacity:0}}
@keyframes desliza-entra-cima{from{transform:translateY(-100%);opacity:0}}
@media (prefers-reduced-motion:reduce){.desliza>span{animation:none!important}}
/* O realce piscante e o pulso do rodapé saíram: um movimento só. */
.valor-novo,.ponto-status.pulso{animation:none!important}

/* ---------- Etapa 3: Tempo agora ---------- */

/* Céu: as cores mudam suavemente quando o estado do sol (ou a chuva) muda. */
@property --ceu-topo{syntax:'<color>';inherits:true;initial-value:#3f8fcf}
@property --ceu-meio{syntax:'<color>';inherits:true;initial-value:#7ab8e2}
@property --ceu-horizonte{syntax:'<color>';inherits:true;initial-value:#c5e2ef}
@property --ceu-texto{syntax:'<color>';inherits:true;initial-value:#0f2638}
#ceu-visao{transition:--ceu-topo 1.6s ease,--ceu-meio 1.6s ease,--ceu-horizonte 1.6s ease,--ceu-texto 1.6s ease}
@media (prefers-reduced-motion:reduce){#ceu-visao{transition:none}}

/* Seta de tendência e minigráfico de 6 h. */
.tendencia-linha{display:flex;align-items:center;gap:10px;margin:6px 0 2px;min-height:28px}
.tendencia{font-family:var(--fonte-numeros);font-size:22px;font-weight:600;line-height:1}
.tendencia[hidden],.mini[hidden]{display:none}
.mini{width:96px;height:28px;flex:none;opacity:.85;overflow:visible}

/* Faixa secundária: discreta, sem caixas; hierarquia por tamanho e espaço. */
#visao .faixa-agora{display:flex;flex-wrap:wrap;gap:12px 36px;margin:18px 0 6px;padding:14px 0 0;border-top:1px solid var(--t-linha)}
#visao .faixa-agora article{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:10px;row-gap:2px;padding:0;background:none;border:0}
#visao .faixa-agora article>span::before{display:none}
#visao .faixa-agora .faixa-rotulo{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--t-suave)}
#visao .faixa-agora strong{font-size:clamp(22px,5vw,28px);font-weight:600;white-space:nowrap}
#visao .faixa-agora strong.sem-dado{font-size:15px;white-space:normal}
#visao .faixa-agora .tendencia{font-size:18px}
#visao .faixa-agora .mini{grid-column:1/-1;width:120px;color:var(--t-agua)}
#visao .faixa-agora small{grid-column:1/-1;font-size:13px;color:var(--t-suave)}
#visao .faixa-agora small:empty{display:none}

/* "i" da pressão: abre uma explicação curta, sem JavaScript. */
.info-pressao{position:relative;display:inline-block}
.info-pressao summary{list-style:none;display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid currentColor;border-radius:50%;
  font-family:var(--fonte);font-size:12px;font-weight:700;line-height:1;cursor:pointer}
.info-pressao summary::-webkit-details-marker{display:none}
.info-pressao[open] summary{background:var(--t-agua);border-color:var(--t-agua);color:var(--t-superficie)}
.info-pressao p{position:absolute;z-index:30;top:calc(100% + 8px);left:-8px;width:min(300px,calc(100vw - 48px));margin:0;padding:12px 14px;
  background:var(--t-superficie);border:1px solid var(--t-linha);border-radius:12px;color:var(--t-texto);font-size:14px;font-weight:400;line-height:1.45}

/* ---------- Etapa 4: um gráfico grande por vez ---------- */
/* A grade antiga (um cartão por variável) fica oculta: o gráfico principal mostra
   uma variável por vez com todas as estações. O HTML antigo permanece porque
   app.js e os ativadores dependem dele. */
#graficos .grade-graficos,#graficos #nota-grafico{display:none}
.grafico-principal{margin:8px 0 28px}

/* Umidade do ar (umidade-grafico.js): quarto cartão da grade da Visão, com as cores dos tokens do site. */
.umid{--umid-molhado:var(--cor-umidade);
  --umid-neblina:color-mix(in srgb,var(--cor-umidade) 55%,var(--t-suave));
  --umid-seco:var(--t-suave);
  --umid-palido:var(--t-linha);
  --umid-texto2:var(--t-suave);
  --umid-grade:color-mix(in srgb,var(--t-texto) 13%,transparent);
  --umid-borda:color-mix(in srgb,var(--t-texto) 38%,transparent);
  --umid-brilho:rgba(255,255,255,.8)}
.umid-estado{margin:14px 0 4px;color:var(--t-suave);font-size:14px}
.umid-estado:empty{display:none}
.umid-tentar{min-height:36px;padding:6px 14px;border:1px solid var(--t-linha-forte);border-radius:999px;background:var(--t-superficie);color:var(--t-texto);font:inherit;font-weight:700;cursor:pointer}
.umid-corpo{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.umid-corpo[hidden]{display:none}
.umid-leitura{margin:10px 0 6px}
.umid-frase{margin:0;font-size:clamp(16px,1.5vw,19px);font-weight:700;line-height:1.25;text-wrap:balance}
.umid-nums{display:flex;flex-wrap:wrap;gap:6px 24px;margin:8px 0 0}
.umid-nums div{min-width:0}
.umid-nums dt{font-size:12px;color:var(--t-suave)}
.umid-nums dd{margin:0;font-family:var(--fonte-numeros);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.umid-nums dd small{margin-left:2px;font-size:12px;font-weight:400;color:var(--t-suave)}
.umid-grafico{position:relative;width:100%;margin-top:4px}
.umid-grafico canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#umid-sobre{touch-action:pan-y;cursor:crosshair}
#umid-sobre:focus-visible{outline:2px solid var(--cor-umidade);outline-offset:4px;border-radius:4px}
.umid-legenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:10px 0 0;color:var(--t-suave);font-size:12px;line-height:1.4}
.umid-escala{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.umid-grad{display:inline-block;width:90px;height:10px;border-radius:2px;background:linear-gradient(90deg,var(--t-linha),var(--cor-umidade))}
.umid-resumo{margin:10px 0 0;font-size:13px;line-height:1.45}
.grafico-principal-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.grafico-principal-topo h3{margin:0;font-size:22px}
#variaveis-grafico{display:flex;flex-wrap:wrap;gap:6px}
#variaveis-grafico [hidden]{display:none}
#variaveis-grafico .controle[aria-pressed="true"]{background:var(--t-agua);border-color:var(--t-agua);color:var(--t-superficie)}
.grafico-principal-legenda{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 6px;font-size:14px;color:var(--t-suave)}
.grafico-principal-legenda span{display:inline-flex;align-items:center;gap:6px}
.grafico-principal-legenda i{display:inline-block;width:18px;height:4px;border-radius:2px}
.grafico-principal-legenda i.faixa-noite{height:12px;background:var(--t-agua-tinta);border:1px solid var(--t-linha)}
.grafico-principal-legenda .faltando{font-weight:700;color:var(--t-texto)}
.grafico-principal-area{position:relative;height:clamp(280px,52vh,460px)}
.grafico-principal-area canvas[hidden]{display:none}
.grafico-principal-area .sem-dados{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-weight:700;color:var(--t-suave);text-align:center}
.grafico-principal-area .sem-dados[hidden]{display:none}
@media (max-width:760px){.grafico-principal-area{height:300px}}

/* ---------- Etapa 5: Rede e mapa ---------- */
/* Mapa base claro e dessaturado; na prévia escura, invertido por filtro. */
#mapa{background:var(--t-fundo)}
#mapa .leaflet-tile{filter:none}
#mapa .leaflet-tile-pane{filter:saturate(.3) brightness(1.05) contrast(.9);transition:filter .6s ease}
:root[data-tema="escuro"] #mapa .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) saturate(.3) brightness(.9) contrast(.85)}
/* Modo chuva (app.js): só o mapa-base fica azul-acinzentado; ruas e bairros continuam legíveis. */
#mapa.modo-chuva .leaflet-tile-pane{filter:saturate(.2) brightness(.95) contrast(.92) sepia(.28) hue-rotate(168deg)}
:root[data-tema="escuro"] #mapa.modo-chuva .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) saturate(.3) brightness(.82) contrast(.85) sepia(.22) hue-rotate(168deg)}

/* Cores do mapa da rede: marcador das estações, destaque da selecionada e setas do gradiente. */
:root{--cor-marcador:#1F4E79;--cor-halo:#1FB6D9;--cor-seta-gradiente:#0A8AA6}
:root[data-tema="escuro"]{--cor-marcador:#2A64A0;--cor-halo:#4FD0EC;--cor-seta-gradiente:#3FC2DC}

/* Estação: marcador de estação meteorológica (mastro com anemômetro, branco sobre azul),
   ponto na cor da estação e valor em rótulo pequeno. */
.marcador-estacao{background:none;border:0}
.ponto-estacao{position:absolute;left:38px;top:0;width:28px;height:28px;box-sizing:border-box;border-radius:50%;
  display:grid;place-items:center;background:var(--cor-marcador);border:2px solid #fff;
  filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--t-texto) 40%,transparent));transition:outline-color .2s ease,transform .2s ease;outline:0 solid transparent;outline-offset:2px}
.ponto-estacao svg{width:18px;height:18px;overflow:visible}
.ponto-estacao > svg path{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ponto-estacao > svg circle,.ponto-estacao > svg rect{fill:#fff}
.ponto-estacao .marco-cor{position:absolute;left:-4px;bottom:-4px;width:11px;height:11px;box-sizing:border-box;border-radius:50%;
  background:var(--cor-estacao);border:2px solid #fff}
.ponto-estacao.externo,.ponto-estacao.indisponivel{background:#fff;border-color:var(--cor-marcador)}
.ponto-estacao.externo > svg path,.ponto-estacao.indisponivel > svg path{stroke:var(--cor-marcador)}
.ponto-estacao.externo > svg circle,.ponto-estacao.externo > svg rect,
.ponto-estacao.indisponivel > svg circle,.ponto-estacao.indisponivel > svg rect{fill:var(--cor-marcador)}
.ponto-estacao.offline{opacity:.45;filter:grayscale(1) drop-shadow(0 1px 2px color-mix(in srgb,var(--t-texto) 40%,transparent))}
/* Estação escolhida: halo ciano discreto (o tema não usa sombras: anel com outline). */
.ponto-estacao.selecionada{transform:scale(1.1);outline:3px solid color-mix(in srgb,var(--cor-halo) 70%,transparent)}
/* Selo do pluviômetro: nuvem azul com gotas (chove), nuvem clara (não chove), cinza riscada (sem leitura). */
.marco-chuva{position:absolute;right:-9px;top:-8px;width:18px;height:18px;box-sizing:border-box;border-radius:50%;
  display:grid;place-items:center;background:#fff;filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--t-texto) 40%,transparent))}
.marco-chuva svg{width:14px;height:14px}
.marco-chuva .nuvem{fill:#2f80ed;stroke:#2f80ed;stroke-width:.8;stroke-linejoin:round}
.marco-chuva .gota{fill:none;stroke:#1a4f9c;stroke-width:1.5;stroke-linecap:round}
.marco-chuva .risco{display:none}
.marco-chuva.seca .nuvem{fill:#fff;stroke:#5b7d96;stroke-width:1.1}
.marco-chuva.seca .gota{display:none}
.marco-chuva.indisponivel .nuvem{fill:#e3e7e9;stroke:#8a979b;stroke-width:1}
.marco-chuva.indisponivel .gota{display:none}
.marco-chuva.indisponivel .risco{display:block;stroke:#5f6b6e;stroke-width:1.4;stroke-linecap:round}
.rotulo-estacao{position:absolute;left:0;right:0;top:31px;text-align:center;white-space:nowrap;
  font-family:var(--fonte-numeros);font-size:13px;font-weight:600;line-height:1.2;color:var(--t-texto);
  text-shadow:0 0 3px var(--t-superficie),0 0 3px var(--t-superficie),0 0 2px var(--t-superficie)}
.rotulo-estacao.offline{font-family:var(--fonte);font-weight:400;color:var(--t-suave)}
/* Leitura nova: um pulso só, sem repetir. */
.ponto-estacao.pulsa::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--cor-estacao);
  animation:pulso-estacao 1.2s ease-out 1 forwards}
@keyframes pulso-estacao{from{transform:scale(1);opacity:.8}to{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.ponto-estacao.pulsa::after{display:none}}
.legenda .legenda-marca{width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:2px solid var(--t-superficie);
  outline:1.5px solid var(--t-agua);background:var(--t-agua)}
.legenda .legenda-marca.estimada{border-radius:3px;border:1.5px dashed var(--t-agua);outline:0;background:transparent}
.legenda .legenda-marca.externa{background:var(--t-superficie)}
.legenda .legenda-marca.offline{opacity:.35;filter:grayscale(1);border-style:solid}

/* Gradiente: frase curta à vista, detalhes técnicos recolhidos. */
.gradiente-tecnico{flex:1 1 100%}
.gradiente-tecnico summary{width:max-content;cursor:pointer;font-weight:700;color:var(--t-suave)}
.gradiente-tecnico p{margin:8px 0;font-size:14px;color:var(--t-suave)}
.mapa-detalhes-fechar{display:none}
.mapa-extras[hidden]{display:none}

/* Celular: os detalhes sobem de baixo, acima da barra inferior. */
@media (max-width:760px){
  #rede .mapa-detalhes{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:1150;
    max-height:70vh;min-height:0;margin:0;padding:12px 16px 20px;overflow-y:auto;overscroll-behavior:contain;
    border:1px solid var(--t-linha);border-bottom:0;border-radius:16px 16px 0 0;background:var(--t-superficie);
    transform:translateY(calc(100% + 80px));visibility:hidden;transition:transform .25s ease-out,visibility 0s linear .25s}
  #rede .mapa-detalhes[data-aberto="true"]{transform:none;visibility:visible;transition:transform .25s ease-out}
  .mapa-detalhes-fechar{display:block;min-height:40px;margin:0 0 4px auto;padding:6px 16px;border:1px solid var(--t-linha);
    border-radius:999px;background:none;font:inherit;font-weight:700;color:var(--t-texto);cursor:pointer}
  .mapa-extras{display:grid;gap:18px;margin-top:16px}
}
@media (prefers-reduced-motion:reduce){#rede .mapa-detalhes{transition:none!important}}

/* ---------- Etapa 6: Satélite ---------- */
/* Linha do tempo: uma marca por imagem real, na posição do seu horário; trecho
   vazio onde faltou imagem. O controle deslizante antigo fica oculto. */
.satelite-filtros label[hidden]{display:none}
.satelite-linha{margin:12px 0 4px;padding:0 22px}
.satelite-linha[hidden]{display:none}
.satelite-linha-trilho{position:relative;height:50px;cursor:pointer;touch-action:none;border-radius:8px}
.satelite-linha-trilho:focus-visible{outline:2px solid var(--t-agua);outline-offset:4px}
.satelite-linha-trilho::before{content:"";position:absolute;left:0;right:0;top:30px;height:4px;border-radius:2px;background:var(--t-linha)}
.satelite-linha-marcas{position:absolute;inset:0}
.satelite-linha-marcas .marca{position:absolute;top:26px;width:2px;height:12px;margin-left:-1px;border-radius:1px;background:var(--t-agua)}
.satelite-linha-marcas .lacuna{position:absolute;top:29px;height:6px;background:var(--t-fundo);
  border-top:1px dashed var(--t-linha-forte);border-bottom:1px dashed var(--t-linha-forte)}
.satelite-linha-cursor{position:absolute;top:20px;width:16px;height:24px;margin-left:-8px;box-sizing:border-box;
  border-radius:8px;background:var(--t-agua-escura);border:2px solid var(--t-superficie);pointer-events:none}
.satelite-linha-cursor::after{content:attr(data-hora);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:2px;font-family:var(--fonte-numeros);font-size:14px;font-weight:600;color:var(--t-texto);white-space:nowrap}
.satelite-linha-horas{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--t-suave)}
.satelite-linha-horas [id]{font-family:var(--fonte-numeros);font-weight:600}
@media (max-width:600px){.satelite-linha-dica{display:none}}
/* Contorno de Joinville: halo escuro e linha clara. Cores fixas de propósito:
   ficam sobre a imagem do satélite, que não muda com o tema. */
.contorno-joinville-halo{stroke:#0B1416;stroke-opacity:.55;stroke-width:4px}
.contorno-joinville{stroke:#FFFFFF;stroke-opacity:.95;stroke-width:1.6px}
.marca-limite-joinville{display:inline-block;width:18px;height:4px;vertical-align:middle;background:#FFFFFF;border:1px solid #0B1416;border-radius:2px}

/* ---------- Etapa 8: folhas antigas juntas em base.css ---------- */
/* O login nunca carregou sentinela.css: a altura mínima do main de lá não vale para ele. */
.pagina-login main{min-height:0}

/* ---------- Etapa 8: cores dos SVGs desenhados por script ----------
   Termômetros, barômetro e relógio de raios escrevem cores fixas nos atributos
   (app.js, graficos-extra.js). Uma regra de CSS vale mais que o atributo de
   apresentação do SVG, então cada cor fixa é trocada pelo token aqui, sem mexer
   no desenho. Cores de dado (mercúrio, barras de raio) continuam as do script. */
svg [fill="#667a7b"],svg [fill="#6b7088"]{fill:var(--t-suave)}
svg [fill="#1b1f3b"]{fill:var(--t-texto)}
svg [stroke="#1b1f3b"]{stroke:var(--t-texto)}
svg [stroke="#e4ecec"],svg [stroke="#e7e9f3"],svg [stroke="#e7eeee"],svg [stroke="#d8e5e5"],svg [stroke="#cfdcdb"]{stroke:var(--t-linha)}
svg [fill="#f3f7f6"],svg [fill="#f7faf9"]{fill:var(--t-fundo)}
svg [stroke="#4b5bc0"]{stroke:var(--cor-pressao)}
svg [fill="#4b5bc0"]{fill:var(--t-agua)}
svg [fill="#b87400"]{fill:var(--t-agua-escura)}
svg [stroke="#e39a00"]{stroke:var(--t-linha-forte)}
/* Mapa base do satélite também escuro no tema escuro. A imagem do satélite fica
   em outro painel (satelite-filtros) e não passa pelo filtro. */
:root[data-tema="escuro"] #mapa-raios .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) saturate(.3) brightness(.9) contrast(.85)}

/* ---------- Chuva nos postos do CEMADEN (aba Rede e mapa) ---------- */
/* Grade da Visão: [temperatura umidade / raios pressão]. Se algum cartão sumir (estação sem o
   sensor), estacoes-publico.js marca o último visível com .cartao-largo quando sobra um sozinho na linha. */
#visao #visuais-dia > .cartao-largo{grid-column:1 / -1}
.postos-cemaden{margin:28px 0}
.postos-cemaden-topo h3{margin:0 0 4px;font-size:22px}
.postos-cemaden[hidden],.postos-cemaden-corpo[hidden]{display:none}
.postos-cemaden-topo h2{margin:0 0 4px}
.postos-cemaden-topo p{margin:0 0 14px;color:var(--t-suave);max-width:62ch}
/* Os postos estão no mapa único da aba (#mapa); aqui ficam a escala e os cards. */
.postos-cemaden-corpo{display:grid;gap:12px}
.postos-cemaden-escala{max-width:520px}
/* Escala fixa da chuva em 24 h: azul → anil (50 mm) → roxo (acima de 100 mm). Cores de dado,
   iguais nos dois temas (como as escalas do satélite). */
.postos-cemaden-escala{display:grid;gap:3px;font-size:12px;color:var(--t-suave)}
.postos-cemaden-escala-barra{height:10px;border-radius:5px;background:linear-gradient(90deg,#2f80ed 0%,#5b4fd9 50%,#9b27b0 100%)}
.postos-cemaden-escala-rotulos{display:flex;justify-content:space-between;font-family:var(--fonte-numeros)}
.leaflet-interactive.posto-calor,.posto-calor{pointer-events:none}
.posto-chuva-icone{background:none;border:0}
/* Posto do CEMADEN: funil de pluviômetro branco sobre a cor da chuva em 24 h. */
.posto-cemaden-marcador{background:none;border:0}
.posto-cemaden-ponto{display:grid;place-items:center;width:24px;height:24px;box-sizing:border-box;border-radius:7px;
  border:2px solid #fff;filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--t-texto) 40%,transparent))}
.posto-cemaden-ponto svg{width:14px;height:14px}
.posto-cemaden-ponto path{fill:#fff}
/* Selo da condição de chuva no canto do mapa e linha de texto embaixo dele. */
/* Resumo das setas do GFS (faixa de valores e validade), canto inferior esquerdo do mapa. */
.mapa-resumo-gfs{position:absolute;left:10px;bottom:10px;z-index:800;pointer-events:none;max-width:calc(100% - 120px);
  padding:3px 9px;border-radius:999px;border:1px solid var(--t-linha);background:var(--t-superficie);
  color:var(--t-agua-escura);font-size:12px;font-weight:700;line-height:1.35}
/* Seta do GFS igual à do gradiente observado entre estações: cheia, contorno na cor do fundo e a
   mesma sombra (antes era vazada e tracejada). Só a cor muda, para a legenda separar as duas. */
:root{--cor-seta-gfs:#5E708C}
:root[data-tema="escuro"]{--cor-seta-gfs:#A3B2CC}
.seta-gradiente.modelo svg path{fill:var(--cor-seta-gfs);stroke:var(--t-superficie);stroke-width:2.5;stroke-dasharray:none;stroke-linejoin:round}
/* Setas do GFS com metade do tamanho da seta das estações (são muitas): 32 px no centro do
   ícone de 64 px, contorno um pouco mais grosso para continuar visível. */
.seta-gradiente.modelo svg{width:32px;height:32px;margin:16px}
.seta-gradiente.modelo svg path{stroke-width:4}
.legenda-seta.modelo{background:var(--cor-seta-gfs);opacity:1}
/* Setas de pressão (fluxo-pressao.js): canvas, sem CSS de animação. O resumo no canto do
   mapa é um botão que abre o painel do campo. */
.mapa-resumo-gfs{pointer-events:auto;cursor:pointer;font:inherit;font-size:12px;font-weight:700;text-align:left}
.legenda-linha-gradiente{display:inline-block;width:24px;height:0;border-top:2px dashed var(--cor-seta-gradiente);vertical-align:middle}
/* "Só GFS" × "GFS + estações", ao lado dos filtros do mapa. */
.gfs-modo{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;padding:3px;border:1px solid var(--t-linha);border-radius:999px;background:var(--t-superficie)}
.gfs-modo[hidden]{display:none}
.gfs-modo span{padding:0 6px 0 8px;font-size:12px;font-weight:700;color:var(--t-suave)}
.gfs-modo button{min-height:32px;padding:4px 12px;border:0;border-radius:999px;background:transparent;color:var(--t-texto);font:inherit;font-size:13px;cursor:pointer}
.gfs-modo button[aria-pressed="true"]{background:var(--t-agua-escura);color:var(--t-superficie);font-weight:700}
.mapa-condicao{position:absolute;top:10px;right:10px;z-index:800;pointer-events:none;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:700;background:var(--t-superficie);color:var(--t-texto);border:1px solid var(--t-linha)}
.mapa-condicao[data-modo="chuva"]{background:#1F4E79;color:#fff}
.mapa-condicao[data-modo="indisponivel"]{color:var(--t-suave)}
.mapa-chuva-estado{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--t-suave)}
.mapa-chuva-estado[data-modo="chuva"]{color:var(--t-texto)}
/* Legenda: miniaturas iguais aos símbolos do mapa. */
.legenda-estacao{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:20px;height:20px;box-sizing:border-box;border-radius:50%;
  background:var(--cor-marcador);border:1.5px solid #fff;outline:1px solid var(--t-linha)}
.legenda-estacao svg{width:13px;height:13px}
.legenda-estacao path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.legenda-estacao circle,.legenda-estacao rect{fill:#fff}
.legenda-estacao.externo{background:#fff;border-color:var(--cor-marcador)}
.legenda-estacao.externo path{stroke:var(--cor-marcador)}
.legenda-estacao.externo circle,.legenda-estacao.externo rect{fill:var(--cor-marcador)}
.legenda-estacao.offline{opacity:.45;filter:grayscale(1)}
.legenda-chuva{display:inline-flex;gap:2px;flex:0 0 auto}
.legenda-chuva .marco-chuva{position:static}
.legenda .legenda-posto-cemaden{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;
  background:linear-gradient(135deg,#2f80ed,#9b27b0);border:1.5px solid #fff;outline:1px solid var(--t-linha)}
.legenda .legenda-posto-cemaden svg{width:11px;height:11px}
.legenda .legenda-posto-cemaden path{fill:#fff}
.legenda-modo-chuva{display:inline-block;width:18px;height:14px;border-radius:3px;background:#9fb3c2;outline:1px solid var(--t-linha)}
.legenda [data-legenda][hidden]{display:none}
/* Ícone de chuva: nuvem estilizada e três gotas caindo em loop, defasadas. */
.posto-chuva-icone svg{width:32px;height:32px;display:block;overflow:visible}
.posto-chuva-icone .nuvem{fill:var(--t-superficie);stroke:var(--t-agua-escura);stroke-width:1.3;stroke-linejoin:round}
.posto-chuva-icone .gotas{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff)}
.posto-chuva-icone .gota{fill:none;stroke:#1a4f9c;stroke-width:2.2;stroke-linecap:round;opacity:0;animation:posto-gota 1.2s ease-in infinite}
.posto-chuva-icone .gota-2{animation-delay:.4s}
.posto-chuva-icone .gota-3{animation-delay:.8s}
@keyframes posto-gota{0%{transform:translateY(-3px);opacity:0}25%{opacity:1}100%{transform:translateY(6px);opacity:0}}
@media (prefers-reduced-motion:reduce){.posto-chuva-icone .gota{animation:none;opacity:1}}
.posto-24h .posto-cor{display:inline-block;width:12px;height:12px;margin-right:8px;border-radius:50%;vertical-align:middle}
.postos-cemaden-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.legenda-posto-cemaden{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#2f80ed 0 35%,rgba(91,79,217,.45) 36% 70%,rgba(155,39,176,.25) 71%)}
.posto-cemaden{padding:12px 14px;border:1px solid var(--t-linha);border-radius:10px;background:var(--t-superficie)}
.posto-cemaden p{margin:0}
.posto-nome{font-weight:700}
.posto-24h{margin-top:4px!important}
.posto-24h strong{font-family:var(--fonte-numeros);font-size:28px;font-weight:600}
.posto-24h span{color:var(--t-suave);font-size:14px}
.posto-leitura{font-size:14px;color:var(--t-suave)}
.postos-cemaden-nota{margin-top:10px;font-size:13px;color:var(--t-suave)}
.grafico-pluviometros{display:flex;flex-wrap:wrap;gap:4px 18px}
.grafico-pluviometros[hidden]{display:none}

/* Aviso de manutenção da estação selecionada (registrado na Área restrita). */
.aviso-manutencao{margin:0 0 12px;padding:10px 14px;background:var(--fundo-claro);border:1px solid var(--linha-forte);border-left:4px solid var(--t-agua);border-radius:6px;color:var(--texto);font-size:.95rem;line-height:1.4}
.aviso-manutencao[hidden]{display:none}