/* ==========================================================================
   CAMADA RESPONSIVA, Painel Rota 2 de Julho
   --------------------------------------------------------------------------
   Carregada DEPOIS do <style> inline de cada página (é o último <link> do
   <head>), então vence os empates de especificidade sem precisar de !important.

   O painel nasceu como "app de tela cheia": html/body com overflow hidden e o
   miolo em height: calc(100vh - 117px). Esta camada parametriza esses dois
   números e adapta o layout à matriz de telas alvo:

   MONITORES (7 mais comuns)          NOTEBOOKS (3 mais comuns)
     1920x1080  Full HD                 1366x768   15,6" HD
     1536x864   Full HD a 125%          1920x1080  15,6" Full HD
     1366x768   HD                      1512x982   MacBook 13-14" escalado
     1440x900
     1600x900
     2560x1440  QHD
     3840x2160  4K UHD
   + celular (360-430 px) e tablet, já que o link é público.

   Duas dimensões importam:
   LARGURA decide o arranjo (empilhar, comprimir, esticar) e ALTURA decide o
   cabeçalho e a altura dos gráficos (1366x768 e 1440x900 sofrem na vertical,
   não na horizontal).
   ========================================================================== */

:root {
    --h-cabecalho: 126px;   /* medido: header-top 80 + nav 46 (era 117, errava por 9) */
    --largura-max: 1620px;
    --pad-lateral: 40px;
    --h-logo: 77.5px;
}

/* SHELL FLEX, elimina o número mágico "117px".
   Todas as páginas são <body> = <header.main-header> + <main#content-area>. Com o
   body em coluna flex e o miolo em flex:1, a altura do cabeçalho deixa de ser
   chutada: qualquer variação (logo menor, abas em 2 linhas, botões que quebram)
   é absorvida automaticamente. Antes, o calc(100vh - 117px) errava por 7 a 11 px
   em TODA tela, e o overflow:hidden escondia o rodapé do gráfico. */
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
}

.main-header {
    flex: 0 0 auto;
}

#content-area,
main#content-area {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* os miolos passam a preencher o espaço restante, em vez de calcular 100vh */
.capex-layout,
.opex-layout,
.trafego-layout,
#sim-panel {
    height: 100%;
}

/* a variável segue existindo para quem precisa de min-height em tablet/celular */

.main-header {
    padding: 0 var(--pad-lateral);
}

.header-top {
    height: calc(var(--h-logo) + 2.5px);
}

.logo-container img.logo {
    height: var(--h-logo);
}



/* ==========================================================================
   1) TELAS BAIXAS, o que limita 1366x768, 1440x900 e 1600x900
   O cabeçalho come 117 px de 768; comprimindo-o, o miolo ganha ~30 px e os
   gráficos deixam de ser cortados pelo overflow: hidden.
   ========================================================================== */
@media (max-height: 940px) {
    /* O CABEÇALHO NÃO ENCOLHE MAIS. Ele é a identidade visual da família de
       painéis e precisa ser idêntico ao dos outros três (CN3 Agro Central, Rota
       Portuária do Sul e Via Brasil), que usam só o style.css: header 126 px,
       header-top 80, logo 77,5, h1 19 px, nav gap 32 px, nav-btn 10 px e
       padding lateral 40 px, em QUALQUER tela. Antes, abaixo de 940 px de
       altura este painel caía para 103 px (logo 58) e abaixo de 800 px para
       95 px (logo 50, h1 17), o que o deixava visivelmente menor que os
       irmãos na mesma tela. O espaço vertical que a compressão buscava
       continua sendo obtido, mas onde é barato: na altura dos gráficos, logo
       abaixo. */
    

    
}

@media (max-height: 800px) {
    /* idem: cabeçalho intocado, compressão só nos gráficos */
    

    
}

/* ==========================================================================
   2) NOTEBOOKS E MONITORES ESTREITOS (1280 a 1535)
   Cobre 1366x768 (o notebook mais comum), 1280x800 e 1440x900. O arranjo
   continua lado a lado, só que com folgas menores e tabelas roláveis.
   ========================================================================== */
@media (max-width: 1535px) {
    :root {
        --largura-max: 100%;
    }

    /* cabeçalho no padrão da família: sem reduzir padding, gap das abas ou
       gap dos botões (ver nota do bloco de altura acima) */

    /* tabelas largas (30 colunas de ano) passam a rolar dentro do painel,
       em vez de serem cortadas pelo overflow: hidden do contêiner */
    #hdm-table-container,
#melhorias-table-container,
.table-scroll  {
        overflow-x: auto;
    }
}

@media (max-width: 1365px) {
    /* cabeçalho no padrão da família também aqui; se em alguma largura desta
       faixa as abas mais os botões não couberem, a correção é no conteúdo do
       cabeçalho, não no seu tamanho (validado pelo testes/validar_responsivo.mjs) */
    :root {
        --pad-lateral: 40px;
    }
}

/* ==========================================================================
   3) MONITORES GRANDES: 1920x1080, 2560x1440 e 3840x2160
   Sem isto o conteúdo fica preso em 1620 px no meio de telas de 2560/3840,
   com tipografia minúscula em relação à tela.
   ========================================================================== */
@media (min-width: 1920px) {
    :root {
        --largura-max: 1800px;
    }
    /* só o CORPO ganha largura; o cabeçalho fica no padrão da família */
}

@media (min-width: 2560px) {
    :root {
        --largura-max: 2200px;
    }
    /* cabeçalho idêntico ao dos outros painéis também em QHD */

    body {
        font-size: 17px;
    }

    .nav-btn {
        font-size: 14px;
    }

    /* os componentes têm tamanho fixo em px e não herdam do body: sem estes
       ajustes a tipografia fica minúscula em relação à tela */
    .drilldown-table {
        font-size: 15px;
    }

    .drilldown-table tbody td {
        padding: 9px 15px;
    }

    .title-container h1 {
        font-size: 26px;
    }

    .total-value {
        font-size: 22px;
    }

    #chart-title  {
        font-size: 19px;
    }

    .vpl-toggle-btn,
    .btn-clear-filters {
        font-size: 13px;
        padding: 10px 16px;
    }

    

    
}

@media (min-width: 3840px) {
    :root {
        --largura-max: 3000px;
    }
    /* cabeçalho idêntico ao dos outros painéis também em 4K */

    body {
        font-size: 20px;
    }

    .nav-btn {
        font-size: 17px;
    }

    .drilldown-table {
        font-size: 19px;
    }

    .drilldown-table tbody td {
        padding: 12px 20px;
    }

    .title-container h1 {
        font-size: 34px;
    }

    .total-value {
        font-size: 28px;
    }

    #chart-title  {
        font-size: 24px;
    }

    .vpl-toggle-btn,
    .btn-clear-filters {
        font-size: 16px;
        padding: 13px 20px;
    }

    

    
}

/* ==========================================================================
   4) TABLET (769 a 1024): ainda lado a lado no cabeçalho, miolo empilhado
   ========================================================================== */
@media (max-width: 1024px) {
    html,
    body {
        overflow: auto;
        height: auto;
    }

    :root {
        --pad-lateral: 16px;
    }

    .capex-layout,
    .opex-layout,
    .trafego-layout,
    #sim-panel,
    #content-area {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - var(--h-cabecalho));
        overflow: visible;
    }

    .capex-panel,
    .opex-panel,
    #main-view-panel > *,
    .chart-container {
        min-height: 62vh;
    }

    .main-nav {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    
}

/* ==========================================================================
   5) CELULAR (até 768): o painel vira documento rolável
   O corte antigo era irrecuperável porque html/body tinham overflow: hidden;
   aqui tudo volta ao fluxo normal, empilhado, com as tabelas rolando na
   horizontal dentro do próprio painel.
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --h-cabecalho: 0px;
        --pad-lateral: 12px;
        --h-logo: 40px;
    }

    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
    }

    /* cabeçalho deixa de ser barra fixa de altura travada */
    .header-top {
        height: auto;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 0 4px;
    }

    .title-container h1 {
        font-size: 15px;
        line-height: 1.25;
    }

    .title-container p {
        font-size: 8.5px;
    }

    .header-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-bottom: 8px;
    }

    /* abas viram uma faixa rolável por toque */
    .main-nav {
        gap: 16px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    

    .nav-btn {
        font-size: 12px;
        flex: 0 0 auto;
        padding-bottom: 8px;
    }

    /* botões de ação (REIDI, VPL, Excel, Limpar) numa linha própria */
    .header-actions {
        margin-left: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .vpl-toggle-btn,
    .btn-clear-filters {
        font-size: 11px;
        padding: 8px 10px;
        min-height: 38px;
    }

    /* miolo: empilhado e sem altura travada */
    .capex-layout,
    .opex-layout,
    .trafego-layout,
    #sim-panel,
    #content-area {
        flex-direction: column;
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: 8px;
        gap: 10px;
    }

    .capex-panel,
    .opex-panel,
    .chart-container {
        min-height: 58vh;
        overflow: visible;
    }

    /* filtros de 2 colunas passam a 1 */
    

    /* qualquer tabela larga rola na horizontal dentro do seu painel */
    #hdm-table-container,
#melhorias-table-container,
.table-scroll,
.extras-table-container  {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* mapas Leaflet com altura utilizável no celular */
    #map,
.leaflet-container  {
        min-height: 52vh;
    }

    /* alvos de toque: nada abaixo de ~11 px de fonte na tabela */
    .hdm-data-table td,
.hdm-data-table th  {
        font-size: 11px;
    }
}

/* Celulares estreitos (360 px e menores) */
@media (max-width: 400px) {
    .title-container h1 {
        font-size: 13.5px;
    }

    .nav-btn {
        font-size: 11px;
    }
}

/* ==========================================================================
   6) ABA PLUVIOMETRIA (HTML gerado pelo projeto mapa-chirps-precipitacao)
   Layout próprio: #corpo com mapa + coluna de gráficos, e a barra de tempo
   com os blocos de mês. No celular vira coluna única.
   ========================================================================== */
@media (max-width: 1024px) {
    

    

    
}

@media (max-width: 768px) {
    

    

    

    

    
}

/* --------------------------------------------------------------------------
   Ajustes finais por página no celular (achados na varredura de 390 e 360 px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Obras de Melhoria: a barra de resumo é posicionada em absoluto com
       largura FIXA de 576 px (vazava 186 px numa tela de 390). No celular ela
       volta ao fluxo, ocupando a largura disponível. */
    .sidebar-extras {
        position: static;
        width: 100%;
        top: auto;
        border-right: none;
    }

    /* a tabela de extras rola na horizontal em vez de empurrar a página */
    .extras-table-container {
        overflow-x: auto;
    }

    .extras-table {
        min-width: 520px;
    }

    /* Pluviometria: a barra de tempo (blocos de mês + filtro de anos + Excel)
       é uma linha única sem quebra; no celular passa a quebrar em linhas. */
    

    

    

    
}

/* --------------------------------------------------------------------------
   Tabela de árvore (CAPEX e OPEX) no celular
   Com table-layout automático o rótulo longo empurra a coluna de valores para
   fora do painel, que tem overflow-x: hidden, e o R$ ficava cortado. Layout
   fixo garante a coluna do valor sempre visível.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .drilldown-table {
        table-layout: fixed;
        width: 100%;
    }

    .drilldown-table tbody td:first-child  {
        width: 54%;
        /* o nowrap é HERDADO da tabela: sem isto o rótulo longo
           ("Obras de Ampliação de Capacidade e outras melhorias") passa por cima
           da coluna de valores em vez de quebrar em duas linhas */
        white-space: normal;
    }

    .drilldown-table tbody td:last-child  {
        width: 46%;
        font-size: 11px;
    }

    .drilldown-table-wrap {
        overflow-x: hidden;
    }

    /* cabeçalho do painel: título e "valor total" em duas linhas */
    .panel-header  {
        flex-wrap: wrap;
        gap: 4px;
    }
}