/* ============================================================================
   identidade_atlas.css, a pele ATLAS RODOVIAS sobre o painel Rota 2 de Julho.
   Linha Cancela (v6). Carregada DEPOIS de style.css, do <style> da pagina e de
   responsivo.css, para ser a ultima palavra sobre cor e tipografia.

   REGRA DESTA FOLHA: so estetica. Nada aqui muda display, position, grid,
   flex, largura, altura, padding, margin, ordem ou visibilidade. Se uma regra
   precisar mexer em geometria, ela nao entra.

   Fonte: ~/Documents/Projetos/atlas-identidade/v6-cancela-rodovias/
   ========================================================================= */

:root {
    /* paleta da marca (identidade/cores.md), com a RAMPA NEUTRA FRIA.
       Desvio deliberado, pedido em 2026-09-05: o creme da marca dava leitura de
       impresso ("parece jornal, nao painel"). Trocar so o fundo nao bastava, a
       pedra bege le como sujeira sobre branco, entao borda, zebra, hover e as
       rampas foram junto. Midnight, grafite, cobre e os acentos ficam: e neles
       que a marca vive. Os valores da marca seguem anotados ao lado, para
       voltar atras trocando seis linhas. */
    --atlas-midnight: var(--k-0f1e2c);
    --atlas-grafite: var(--k-3e4c5e);
    --atlas-grafite-claro: var(--k-6e7a88);
    --atlas-fundo: var(--k-ffffff);
    /* a PAGINA e branca (pedido do usuario, 05/09). Fundo e cartao ficam ambos
       em branco, entao a hierarquia deixa de vir do tom e passa a vir so da
       estrutura: hairline em volta do cartao. E como o sistema Atlas separa as
       coisas de qualquer forma, por linha e nao por elevacao. */
    --atlas-creme: var(--k-f4f6f8);
    /* superficie SUTIL: cabecalho de tabela, filtros, hover. Nao e o fundo da
       pagina; e o que precisa se destacar levemente do branco. (marca: var(--k-f3eee4)) */
    --atlas-creme-alto: var(--k-ffffff);
    /* cartao (marca: var(--k-fbf8f1)) */
    --atlas-pedra: var(--k-dce2e9);
    /* borda. Um passo mais definida que antes, porque com fundo e cartao
       ambos brancos e ela que separa as superficies. (marca: var(--k-d9d3c6)) */
    --atlas-pedra-clara: var(--k-e9edf1);
    /* marca: var(--k-e7e1d5) */
    --atlas-cobre: var(--k-a9713f);
    --atlas-positivo: var(--k-3e6b4f);
    --atlas-negativo: var(--k-9b4a38);
    --atlas-alerta: var(--k-b08a3e);

    --fonte-sans: 'Avenir Next', Avenir, 'Helvetica Neue', Inter, Arial, sans-serif;
    --fonte-serif: Baskerville, 'Libre Baskerville', Georgia, 'Times New Roman', serif;

    /* a regua unica da v6: a cancela tem UMA espessura */
    --cancela-esp: 3px;

    /* os nomes que o painel ja usava passam a apontar para a paleta Atlas */
    --primary-color: var(--atlas-midnight);
    --accent-color: var(--atlas-cobre);
    --bg-light: var(--atlas-creme);
    --card-bg: var(--atlas-creme-alto);
    --bg-card: var(--atlas-creme-alto);
    --text-primary: var(--atlas-midnight);
    --text-secondary: var(--atlas-grafite);
    --border-color: var(--atlas-pedra);
    --shadow-sm: 0 1px 2px 0 color-mix(in srgb, var(--k-0f1e2c) 5%, transparent);
    --neutral-bar: var(--atlas-midnight);
    --reference-color: var(--atlas-cobre);
    --benchmark-line: var(--atlas-grafite-claro);
}

/* ── 1. base ─────────────────────────────────────────────────────────────── */
html,
body {
    background-color: var(--atlas-fundo);
    color: var(--atlas-midnight);
    font-family: var(--fonte-sans);

    /* COMPENSACAO OPTICA DA TROCA DE TIPOGRAFIA.
       font-size e o tamanho do CORPO, nao da letra: cada fonte usa uma fracao
       diferente do em para a caixa alta. Medido aqui com canvas TextMetrics:

         Inter (a do painel original)  cap-height / em = 0,7275
         Avenir Next                                     0,7080   -2,7%
         Baskerville                                     0,6621   -9,0%

       Ou seja, trocar a familia mantendo o font-size ENCOLHE o texto, e os
       titulos em serifa encolhem 9%. Em vez de corrigir elemento por elemento,
       font-size-adjust trava a caixa alta na razao da Inter e a correcao vale
       para o painel inteiro, inclusive o que for acrescentado depois.
       Onde a propriedade nao for suportada ela e ignorada e o texto volta ao
       tamanho de antes: degrada sem quebrar. */
    font-size-adjust: cap-height 0.7275;
}

/* Baskerville fala, Avenir mede: titulos em serifa, numero e tabela em sans */
h1,
h2,
h3,
h4,
.panel-header h3,
.chart-title-group h3 {
    font-family: var(--fonte-serif);
    font-weight: 700;
    color: var(--atlas-midnight);
}

/* TITULO DE BLOCO QUE NAO E' <h3>.
   A regra acima mira TAGS, e a pluviometria escreve os titulos dos seus blocos
   como <span> e <div>. Resultado: enquanto "Investimentos de Capital (CAPEX)" e
   "Custo OPEX por Ano" saem em Baskerville, "Chuva diaria, ano" e "Regime
   mensal, Regiao" sairam em Avenir Next. Mesma hierarquia, duas tipografias,
   e o olho pega isso na hora, mesmo sem saber nomear.

   Nao da' para consertar pela tag, entao vai pelo papel: estes tres elementos
   SAO titulo de bloco, e passam a ser tratados como tal.

   Ao criar bloco novo, prefira <h3>: a identidade o alcanca sozinha. */
#escopo,
#calTit,
#legTit,
#titmapa h3 {
    font-family: var(--fonte-serif);
}

/* E DEVOLVE a cor ao contexto onde a superficie ja declarou a sua.
   Regra que casa com o elemento vence HERANCA sempre, por menor que seja a
   especificidade: nao e' questao de peso, e' questao de que herdar so acontece
   quando nenhuma regra casa. Entao o `color: var(--atlas-midnight)` acima
   sequestrava o titulo de toda superficie escura, que contava com a heranca.

   Medido: o .summary-card de obras tem fundo linear-gradient midnight e declara
   color: var(--k-ffffff) para os filhos. O h4 ficou midnight sobre midnight, contraste
   1,19:1, ilegivel nas tres larguras. Nenhuma auditoria de PALETA acusaria: as
   duas cores sao legitimas; so uma auditoria de CONTRASTE pega, e so depois que
   ela aprendeu a ler as paradas de um gradiente.

   Ao pintar texto por seletor de elemento, sempre pergunte: existe alguma
   superficie neste sistema em que essa cor nao serve? Se existe, a excecao vem
   junto com a regra, nao depois do defeito. */
.summary-card :is(h1, h2, h3, h4, h5, h6),
[class*="-card"][style*="gradient"] :is(h1, h2, h3, h4, h5, h6),
.superficie-escura :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

/* todo numero em algarismo tabular, o painel inteiro alinha na virgula */
table,
td,
th,
input[type="number"],
.total-value,
.numero,
[class*="value"],
[class*="total"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ── 2. cabecalho e a assinatura ─────────────────────────────────────────── */
.main-header {
    background-color: var(--atlas-creme-alto);
    border-bottom: 1px solid var(--atlas-pedra);
    box-shadow: none;
}

/* ── A REGUA DA MARCA NO PAINEL ────────────────────────────────────────────
   Cada peca tem uma fracao diferente de desenho dentro da caixa: as oficiais
   (51, 52) tem 66,9% e as geradas (v1..v8) tem 84,2%. Por isso "logo a 72 px"
   entregava marcas de tamanhos diferentes conforme a versao, e cada troca de
   peca exigia recalcular a mao.

   Agora o painel declara UMA medida, a altura do A, e deriva o resto das
   metricas que o gerador publica em identidade/marca-metricas.css. Trocar de
   peca deixa de mexer em tamanho: as tres versoes (51 isolada, V7 e 52 oficial)
   entregam o A no mesmo tamanho, na mesma posicao, com o titulo no mesmo x.

     --altura-do-A     a marca. E a unica coisa que se ajusta aqui.
     --h-logo          derivada: altura da caixa da peca
     --largura-marca   a calha reservada, para o titulo nao dancar entre pecas
     --respiro-marca   M/4, a area de respiro da regua da marca
*/
:root {
    --altura-do-A: 48px;
    --h-logo: calc(var(--altura-do-A) / var(--marca-fracao-a));
    --respiro-marca: calc(var(--altura-do-A) / 4);
    /* calha fixa: a peca mais larga a 48 px de A mede 162 px; 200 px dao folga
       para qualquer das versoes e afastam o titulo do bloco da marca */
    --largura-marca: 200px;
    /* altura FIXA do cabecalho, a mesma do painel original. Derivar a altura da
       caixa da peca faria o cabecalho variar de 72 a 96 px conforme a versao,
       porque cada peca carrega uma quantidade diferente de respiro interno. Com
       a altura fixa, trocar de peca nao mexe em nada fora da marca. A folga
       (80 - h-logo) e sempre maior que o respiro que falta a peca. */
    --h-header-top: 80px;
}

.header-top {
    height: var(--h-header-top);
}

.logo-container img.logo {
    height: var(--h-logo);
    width: auto;
    object-fit: contain;
    /* centra a TINTA, nao a caixa: as pecas oficiais sao assimetricas (28
       unidades de respiro acima do A e 14 abaixo) e as geradas nao. O fator vem
       do arquivo de metricas, entao vale para qualquer peca sem ajuste a mao. */
    transform: translateY(calc(-1 * var(--marca-desvio) * var(--h-logo)));
}

/* No login a marca CHEGA SOZINHA: mesma regua, A maior. */
.login-logo {
    height: calc(72px / var(--marca-fracao-a));
    width: auto;
    object-fit: contain;
}

/* center, nao stretch: com stretch a imagem para de centralizar verticalmente e
   a marca sobe ~3,5 px no cabecalho. O respiro do rotulo tipografico do wordmark
   e problema do proprio rotulo (align-self), nao do container. */
.logo-container {
    display: flex;
    align-items: center;
    gap: 20px;
    /* calha de largura fixa: sem isto o titulo do painel muda de posicao a cada
       troca de peca, porque as versoes tem larguras diferentes */
    min-width: var(--largura-marca);
}

/* O DESCRITOR COMO TIPOGRAFIA (regra do wordmark, V8).
   Quando a peca ativa e o wordmark, "Rodovias" vem ao lado como rotulo do
   sistema, atras de uma hairline. Com a assinatura completa (V7, a atual) o
   descritor ja esta dentro do arquivo e o script nem escreve o <span>, entao
   estas regras ficam inertes. */
.descritor-sistema {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding-left: 20px;
    border-left: 1px solid var(--atlas-pedra);
    font-family: var(--fonte-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--atlas-grafite);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .descritor-sistema {
        font-size: 11px;
        padding-left: 12px;
    }

    .logo-container {
        gap: 12px;
    }
}

/* No login a marca CHEGA SOZINHA e nao ha original com que parear: fica maior. */
.login-logo {
    height: 96px;
    width: auto;
    object-fit: contain;
}

.title-container h1 {
    font-family: var(--fonte-serif);
    font-weight: 700;
    color: var(--atlas-midnight);
}

/* ── 3. a cancela: uma por peca, aqui e a aba ativa ──────────────────────── */
.nav-btn {
    color: var(--atlas-grafite);
    font-family: var(--fonte-sans);
}

.nav-btn:hover {
    color: var(--atlas-midnight);
}

.nav-btn.active {
    color: var(--atlas-midnight);
    border-bottom: var(--cancela-esp) solid var(--atlas-cobre);
}

/* ── 4. superficies: cartao e creme alto sobre creme, separado por hairline ─ */
#content-area,
main {
    background-color: var(--atlas-fundo);
}

/* a faixa de filtros continua um degrau abaixo do branco, senao ela e o cartao
   viram a mesma superficie e o painel perde a leitura de "controle x conteudo" */
.filter-section {
    background-color: var(--atlas-creme);
}

.capex-panel,
.chart-container,
.table-wrapper,
.card,
.panel,
.kpi-card,
.chart-card,
.multi-select-dropdown,
.tooltip-box {
    background-color: var(--atlas-creme-alto);
    border-color: var(--atlas-pedra);
}

.panel-header {
    border-color: var(--atlas-pedra);
}

/* hairline em vez de sombra: o sistema separa por linha, nao por elevacao */
.capex-panel,
.chart-container,
.table-wrapper,
.card,
.panel,
.kpi-card,
.chart-card {
    box-shadow: none;
}

/* o menu suspenso continua precisando se destacar do fundo: sombra midnight */
.multi-select-dropdown {
    box-shadow: 0 6px 20px color-mix(in srgb, var(--k-0f1e2c) 14%, transparent);
}

/* ── 5. tabelas: cabecalho em rotulo, zebra em pedra, hairline ───────────── */
thead th {
    color: var(--atlas-grafite);
    background-color: var(--atlas-creme);
    border-color: var(--atlas-pedra);
    font-family: var(--fonte-sans);
}

tbody td {
    border-color: var(--atlas-pedra);
    color: var(--atlas-midnight);
}

tbody tr:nth-child(even) td {
    background-color: color-mix(in srgb, var(--k-dfe4ea) 45%, transparent);
}

tr:hover td {
    background-color: var(--atlas-pedra-clara);
}

/* ── 6. controles ───────────────────────────────────────────────────────── */
/* Controles de formulario nao herdam fonte do <body> (o navegador da a deles),
   entao a compensacao optica precisa ser repetida aqui, senao botao, campo e
   select ficam com o texto ~4% menor que o resto do painel. */
button,
.btn,
.nav-btn,
input,
select,
textarea {
    font-family: var(--fonte-sans);
    font-size-adjust: cap-height 0.7275;
}

/* CTA primario: bloco midnight, texto creme. Nao existe botao em cobre:
   cobre e linha, nunca area. */
.vpl-toggle-btn.active,
.btn-referencia.active,
.btn-todos-ativos:hover {
    background-color: var(--atlas-midnight);
    border-color: var(--atlas-midnight);
    color: var(--atlas-creme-alto);
}

/* CTA secundario: contorno pedra, texto midnight */
.vpl-toggle-btn,
.btn-clear-filters,
.btn-add-more,
.btn-todos-ativos,
.btn-referencia {
    background-color: var(--atlas-creme-alto);
    border-color: var(--atlas-pedra);
    color: var(--atlas-midnight);
}

.vpl-toggle-btn:hover,
.btn-clear-filters:hover,
.btn-add-more:hover,
.btn-referencia:hover {
    background-color: var(--atlas-creme);
    border-color: var(--atlas-grafite);
    color: var(--atlas-midnight);
}

/* foco: contorno midnight de 2 px, sem deslocar nada (outline nao ocupa caixa) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--atlas-midnight);
    outline-offset: 2px;
}

/* etiquetas e marcadores selecionados */
.tag,
.internal-tag,
.selected-tags-container .tag {
    background-color: var(--atlas-pedra-clara);
    border-color: var(--atlas-pedra);
    color: var(--atlas-midnight);
}

.option-item.selected {
    background-color: var(--atlas-pedra-clara);
    color: var(--atlas-midnight);
}

/* ── 7. estados: texto ou glifo, nunca fundo de bloco ────────────────────── */
.positivo,
.pos,
.up,
.variacao-positiva {
    color: var(--atlas-positivo);
}

.negativo,
.neg,
.down,
.variacao-negativa {
    color: var(--atlas-negativo);
}

.alerta,
.warning {
    color: var(--atlas-alerta);
}

/* ── 8. mapas: a base fica calada para a rodovia falar ───────────────────── */
.leaflet-container {
    background: var(--atlas-creme);
    font-family: var(--fonte-sans);
}

.leaflet-popup-content-wrapper,
.leaflet-tooltip {
    background: var(--atlas-creme-alto);
    color: var(--atlas-midnight);
    border: 1px solid var(--atlas-pedra);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--k-0f1e2c) 12%, transparent);
}

.leaflet-popup-tip {
    background: var(--atlas-creme-alto);
}

.leaflet-bar a,
.leaflet-control-zoom a {
    background: var(--atlas-creme-alto);
    color: var(--atlas-midnight);
    border-color: var(--atlas-pedra);
}

/* a base de tiles esfria menos e aquece um pouco, para conversar com o creme;
   o Positron ja e um basemap neutro, entao o ajuste e minimo de proposito. */
.leaflet-tile-pane {
    filter: saturate(.55) sepia(.10) contrast(1.02);
}

/* ── 9. rolagem discreta, na cor da estrutura ───────────────────────────── */
::-webkit-scrollbar-thumb {
    background-color: var(--atlas-pedra);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--atlas-grafite-claro);
}

::-webkit-scrollbar-track {
    background-color: var(--atlas-creme);
}

/* celular: o responsivo.css baixa --h-logo para 40 px, onde a assinatura oficial
   seria ilegivel. Com a V1, 52 px de imagem ja entregam A = 43,8 px e descritor
   a 8,8 px, que le. Respiro M/4 = 11 px. */
@media (max-width: 768px) {
    :root {
        --h-logo: 52px;
        --respiro-marca: 11px;
    }

    /* E DEVOLVE a altura do cabecalho ao responsivo.css.
       A altura travada em 80 px existe por um motivo bom: sem ela, trocar a peca
       da marca mexeria no cabecalho inteiro, porque cada arquivo carrega um
       respiro interno diferente. Esse motivo so vale onde a marca divide a linha
       com o titulo, ou seja, na tela larga.

       No celular a linha nao existe: o responsivo.css ja empilha tudo com
       height: auto e flex-wrap: wrap. Como esta folha carrega DEPOIS dele para
       ser a ultima palavra em estetica, o height fixo estava vencendo aquele
       auto e prendendo em 80 px um cabecalho que precisa de mais. O titulo e o
       subtitulo entao transbordavam POR CIMA da barra de abas, em todas as sete
       abas, e a barra saia cortada pela direita.

       Uma folha de marca nao deve decidir a altura de um cabecalho que ela nao
       ocupa mais. Aqui ela devolve a decisao a camada responsiva. */
    .header-top {
        height: auto;
    }
}

/* ── 10. o raster de precipitacao ────────────────────────────────────────────
   Os 28 PNG de chuva (rasters/) sao pre-coloridos na YlGnBu e so mudariam
   regerando o pipeline CHIRPS, que vive em outro projeto. Como a YlGnBu e
   monotona em luminosidade, um grayscale preserva a ordem do dado; o sepia
   mais o giro de matiz recolorem a rampa inteira para a familia creme ->
   azul-aco -> midnight, a mesma da legenda. */
.leaflet-image-layer {
    /* A ORDEM IMPORTA, e a ordem antiga apagava dado.
       Antes: grayscale > sepia > hue-rotate > saturate > contrast(1.15) > brightness.
       O sepia CLAREIA, e o contrast(1.15) vinha depois: os tons claros estouravam
       em 255 e grudavam. Medido sobre as 9 paradas da YlGnBu dos rasters, as tres
       primeiras viravam a MESMA cor (L=0,930 / 0,930 / 0,925) e a quarta subia de
       0,518 para 0,819. Como a chuva da regiao e' baixa (539 a 1598 mm/ano numa
       escala que vai a 3350), quase todo o dado cai justo nessas paradas: o mapa
       ficava "tudo muito claro", sem distinguir chuva nenhuma.

       Agora o brightness vem ANTES do sepia, abrindo espaco no topo para ele
       clarear sem estourar. Medido na mesma rampa:

                              menor passo entre paradas vizinhas    amplitude
           ordem antiga                   0,0000  (paradas fundidas)    0,923
           esta ordem                     0,0266                        0,962

       Melhor nos DOIS criterios. E o que importa num mapa sequencial e' o menor
       passo, nao a amplitude: amplitude grande com paradas fundidas no meio
       esconde exatamente a faixa onde o dado esta. */
    filter: grayscale(1) brightness(.86) sepia(1) hue-rotate(165deg) saturate(1.05) contrast(1.05);
}