/* CSS Document */
body { background-color: #f8f9fa; }
.sidebar { min-height: 100vh; background: #fff; border-right: 1px solid #dee2e6; padding: 20px; }
.nav-link { cursor: pointer; color: #333; }
.nav-link.active { font-weight: bold; color: #0d6efd; background: #e9ecef; }

/* Estilo da Tela de Boas-vindas */
#welcome-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), 
                /*url('https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?auto=format&fit=crop&q=80&w=1500');  Exemplo de imagem de céu/caatinga */
                url('./imagens/itans_1.jpg'); /* Exemplo de imagem de céu/caatinga */
    background-size: cover;
    background-position: center;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.8s ease-in-out, opacity 0.5s ease;
}

#welcome-content {
    max-width: 800px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    margin-bottom: 20px;
}

/* Esconde o painel principal inicialmente para evitar o "flicker" */
#main-container {
    opacity: 0;
    transition: opacity 1s ease-in;
}

/* Ajuste para o mapa não sumir e os controles ficarem no lugar */
#mapaClima { 
    height: 600px; 
    width: 100%; 
    border-radius: 12px; 
    z-index: 1; /* Garante que não fique em cima de menus */
}

/* Legendas e Cards do Mapa */
.legend, .info-card {
    line-height: 20px;
    color: #333;
    background: white !important;
    padding: 12px;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 12px;
    border: 1px solid #dee2e6;
    pointer-events: auto !important;
}

.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 10px;
    opacity: 0.85;
    border: 1px solid rgba(0,0,0,0.1);
}

/* --- ESTILO ACADÊMICO PARA A TABELA --- */
#resultadoConsulta table {
    font-size: 0.85rem; /* Fonte menor para caber mais dados */
    color: #212529;
}

#resultadoConsulta table thead th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #0d6efd; /* Linha de destaque azul */
    vertical-align: middle;
}

#resultadoConsulta table tbody tr:hover {
    background-color: #f1f4f9 !important; /* Destaque suave ao passar o mouse */
}

/* Estilo para as células de milímetros */
.col-chuva {
    font-family: 'Courier New', Courier, monospace; /* Estilo de dado bruto */
    font-weight: bold;
    color: #084594;
}

/* --- CABEÇALHO ACADÊMICO COM MAIS PESO --- */
#resultadoConsulta .bootstrap-table .fixed-table-container thead th {
    background-color: #f2f4f7 !important; /* Cinza um pouco mais perceptível */
    color: #212529 !important; /* Texto quase preto para contraste */
    font-weight: 800 !important; /* Extra negrito */
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 1.2px;
    padding: 14px 5px !important;
    border-right: 1px solid #dee2e6 !important; /* Divisória sutil entre meses */
    border-bottom: 3px solid #0d6efd !important; 
    text-align: center;
}

/* Garante que o texto dentro do header fique bem centralizado */
#resultadoConsulta .bootstrap-table .fixed-table-container thead th .th-inner {
    padding: 0 !important;
}

/* Animação de entrada suave para os conteúdos carregados via AJAX */
.animacao-suave {
    animation: fadeInSuave 0.6s ease-out forwards;
}

@keyframes fadeInSuave {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Garante que o conteúdo do footer siga o alinhamento definido */
.bootstrap-table .fixed-table-footer table {
    width: 100%;
}

.bootstrap-table .fixed-table-footer td {
    text-align: right !important; /* Força o alinhamento à direita no rodapé */
}

/* Exceto a primeira célula (onde está escrito "Média da Seleção") */
.bootstrap-table .fixed-table-footer td:first-child {
    text-align: left !important;
}

/* Estilo para os nomes dos grupos no Select2 */
.select2-results__group {
    font-weight: bold !important;
    color: #0d6efd !important; /* Azul Bootstrap (ou use a cor do seu tema) */
    background-color: #f8f9fa !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid #dee2e6;
    border-top: 1px solid #dee2e6;
    margin-top: 5px;
}

/* Ajuste para o item selecionado não "sumir" no scroll */
.select2-results__option {
    padding-left: 20px !important; /* Indenta os itens dentro do grupo */
}
/* Limita a altura da caixa de seleção e adiciona scroll */
.select2-selection--multiple {
    max-height: 120px !important; /* Ajuste conforme preferir */
    overflow-y: auto !important;
    border: 1px solid #ced4da !important;
}

/* Deixa as "tags" (pills) mais compactas */
.select2-selection__choice {
    font-size: 0.75rem !important;
    padding: 1px 5px !important;
    margin-top: 4px !important;
}

#coluna-glossario {
    position: relative;
    min-height: 100%; /* Garante que o box possa descer até o fim */
}

#box-glossario {
    position: absolute; /* O segredo para mover via JS */
    transition: top 0.4s ease-in-out; /* Deslize suave */
    width: 100%;
    z-index: 10;
}
/* O container que recebe o conteúdo via AJAX */
#conteudo-glossario {
    max-height: 300px;       /* Altura máxima de 300px */
    overflow-y: auto;        /* Ativa a rolagem vertical apenas se necessário */
    padding-right: 10px;     /* Espaço para a barra de rolagem não cobrir o texto */
    font-size: 0.9rem;       /* Opcional: texto levemente menor para caber mais info */
    line-height: 1.4;
}

/* Estilização opcional da barra de rolagem para ficar mais elegante (Webkit) */
#conteudo-glossario::-webkit-scrollbar {
    width: 6px;
}
#conteudo-glossario::-webkit-scrollbar-thumb {
    background-color: #17a2b8; /* Cor info para combinar com seu spinner */
    border-radius: 10px;
}
#conteudo-glossario::-webkit-scrollbar-track {
    background: #f1f1f1;
}
/* --- ESTILOS DO MANUAL (FAQ E DESTAQUES) --- */

/* Classe para as Perguntas */
.question {
    font-weight: 700;
    color: #2c3e50; /* Um azul marinho profundo, bem legível */
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 1.05rem;
}

.question::before {
    content: "●"; /* Um marcador discreto antes da pergunta */
    color: #17a2b8; /* O azul 'info' que estamos usando no sistema */
    margin-right: 8px;
}

/* Classe para as Respostas */
.answer {
    display: block;
    margin-bottom: 1.2rem;
    padding-left: 1.5rem; /* Recuo para mostrar que pertence à pergunta acima */
    color: #4a4a4a;
    line-height: 1.6;
    border-left: 2px solid #e9ecef; /* Linha sutil lateral para guiar o olhar */
}

/* Bloco de Texto em Destaque (Dicas ou Avisos importantes) */
.det_destaque {
    background-color: #f8f9fa; /* Fundo cinza clarinho para separar do texto comum */
    border-left: 4px solid #17a2b8; /* Barra lateral com a cor principal do projeto */
    padding: 12px 20px;
    margin: 20px 0;
    border-radius: 0 4px 4px 0;
    font-style: italic;
    color: #333;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.03); /* Sombra quase imperceptível para dar profundidade */
}

/* Ajuste opcional para ícones dentro do destaque, caso use */
.det_destaque i {
    margin-right: 10px;
    color: #17a2b8;
}
.leaflet-popup-content h6 {
    //white-space: nowrap; /* Mantém em uma linha */
    overflow: auto;    
    text-overflow: ellipsis; /* Se for muito grande (ex: municípios com nomes compostos), ele põe "..." */
    max-width: 350px;    /* Limita ao tamanho do container que definimos */
}

.btn-localizar:hover {
    background-color: rgba(13, 110, 253, 0.1); /* Um azul bem clarinho no fundo ao passar o mouse */
    transform: scale(1.1); /* Dá um leve "pulo" ao passar o mouse */
}

@media print {
    body {
        background-color: white !important;
    }

    main {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* 4. Garante que a tabela use 100% do papel e as fontes não fiquem gigantes */
    #resultadoConsulta table {
        width: 100% !important;
        font-size: 9pt !important; /* Tamanho fixo para papel */
        border-collapse: collapse !important;
    }

    /* 5. Mantém o título acadêmico que criamos no topo */
    #resultadoConsulta .p-4.bg-white {
        border: 1px solid #dee2e6 !important;
        border-left: 5px solid #0d6efd !important;
        margin-bottom: 20px !important;
        padding: 15px !important;
    }
}
@media print {
    /* 1. Configurações da Página (Papel) */
    @page {
        size: A4 landscape;
        margin: 0.8cm;
    }

    /* 2. Esconde elementos de interface e navegação */
    #container-titulo-tela, 
    .sidebar, 
    .btn, 
    #painelSelecaoMapa, 
    #welcome-screen, 
    .leaflet-control-zoom, 
    .leaflet-control-fullscreen,
    .d-print-none,
    #btnConsultar,
    .utility-buttons {
        display: none !important;
    }

    /* 3. Ajuste do Container Principal para ocupar a folha toda */
    main, .container-fluid, #main-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        float: none !important;
        background: white !important;
    }

    /* 4. Forçar cores de fundo (Essencial para Heatmaps e Cores de Chuva) */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* 5. Cabeçalho Técnico de Impressão */
    .d-print-block {
        display: block !important;
        margin-bottom: 15px !important;
        border-bottom: 2px solid #eee;
    }

    /* 6. Ajuste do MAPA */
    #mapaClima {
        height: 14cm !important; /* Ajustado para dar espaço ao cabeçalho */
        width: 100% !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
        page-break-after: always; /* O mapa geralmente encerra a primeira folha */
    }

    /* 7. Ajuste de Gráficos e Cards (Anomalias e ENSO) */
    #containerAnomalias, #containerScatter, .card {
        page-break-inside: avoid !important; /* Impede que o gráfico seja cortado */
        margin-top: 20px !important;
        border: 1px solid #eee !important;
        box-shadow: none !important;
    }

    /* 8. Ajuste das Tabelas e Heatmaps */
    .table-responsive {
        overflow: visible !important; /* Evita que tabelas longas sumam */
    }

    table {
        page-break-inside: auto;
        width: 100% !important;
        font-size: 8pt !important; /* Diminui a fonte para caber mais dados */
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    /* 9. Legendas Leaflet */
    .legend, .info-card {
        background: white !important;
        border: 1px solid #999 !important;
        box-shadow: none !important;
    }
    /* Esconde a paginação, a barra de busca e os botões da barra de ferramentas da tabela */
    .fixed-table-pagination, 
    .fixed-table-toolbar, 
    .bootstrap-table .search,
    .bootstrap-table .columns-dropup {
        display: none !important;
    }

    /* Ajusta a margem inferior da tabela para não ficar um buraco onde estava a paginação */
    .bootstrap-table .fixed-table-container {
        border-bottom: 1px solid #dee2e6 !important;
        margin-bottom: 20px !important;
    }
}

@media print {
    canvas {
        display: block !important;
        visibility: visible !important;
        max-width: 100% !important;
        height: auto !important;
    }
    .leaflet-container canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    .leaflet-tile-container img {
        width: 256px !important;
        height: 256px !important;
        display: block !important;
        /* Força a renderização de cores e imagens de fundo */
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    path.leaflet-interactive {
        stroke-miterlimit: 1; /* Suaviza as quinas dos polígonos */
        stroke-linejoin: round; /* Arredonda levemente os encontros das divisas */
        shape-rendering: geometricPrecision; /* Força o navegador a priorizar precisão sobre velocidade */
    }
}

@media print {
  .quebrar {
    break-before: page;
  };
  .nao-quebrar {
    break-inside: avoid;
  }
}
.municipio-vetor {
    vector-effect: non-scaling-stroke !important;
}

/* Compactar a tabela para caber em telas menores */
#tabelaClima {
    font-size: 0.9rem !important; /* Diminui um pouco a letra */
    max-width: 100% !important;
}