/* Painel lateral (sidebar) */
#sidebar-results {
    position: fixed;
    /* Abaixo do cabeçalho fixo (mapa-shell.css): em top: 0 o X ficaria
       escondido sob ele. */
    top: var(--mh-h);
    right: -380px;
    /* Começa escondido fora da tela */
    width: 350px;
    height: calc(100% - var(--mh-h));
    background-color: white;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    /* Garante que fique sobre o mapa */
    transition: right 0.4s ease-in-out;
    /* Animação de deslize */
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#sidebar-results.active {
    right: 0;
}

.close-sidebar-btn {
    position: absolute;
    top: 10px;
    left: 10px;
}

/* Classe para mostrar o painel */
#sidebar-results.open {
    right: 0;
    /* Desliza para a posição visível */
}

/* Botão para fechar o painel: alvo de 44px no canto, livre do título
   (.painel-cab reserva 48px à direita). */
#sidebar-results-close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: var(--toque);
    height: var(--toque);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

#sidebar-results-close-btn:hover {
    background: var(--surface-2);
    color: var(--fg);
}

#sidebar-results-close-btn:focus-visible {
    outline: 2px solid var(--brand-2);
    outline-offset: -2px;
}

/* ==========================================================================
   PADRÕES COMUNS A TODAS AS SEÇÕES DO PAINEL
   Cabeçalho (.painel-cab): título h2 18/600, subtítulo opcional em
   --muted, linha de base e o mesmo respiro em toda seção. Uma cor de ação
   principal (.painel-acao, --brand); a secundária é contorno
   (.painel-acao-sec) ou texto (.painel-limpar). Listas de resultado
   (.resultado-lista) crescem com o conteúdo: quem rola é o painel.
   ========================================================================== */
.painel-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0 0 12px;
    /* Livre do X do painel (44px no canto). */
    padding-right: 48px;
    border-bottom: 1px solid var(--border);
    font-family: var(--app-font);
}

.painel-cab__texto {
    flex: 1 1 auto;
    min-width: 0;
}

.painel-cab__titulo {
    margin: 0;
    font-family: var(--app-font);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--fg);
    text-wrap: balance;
}

.painel-cab__sub {
    margin: 2px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--muted);
}

.painel-cab__contagem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    margin-left: 4px;
    padding: 0 7px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
    vertical-align: 3px;
}

/* Botão só de ícone (Voltar): 44px, sem moldura até o hover. */
.painel-icone {
    flex: 0 0 auto;
    width: var(--toque);
    height: var(--toque);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--brand-2);
    cursor: pointer;
}

.painel-icone:hover { background: var(--surface-2); }
.painel-icone:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; }
#sidebar-results .painel-icone i { margin: 0; }
.painel-cab__voltar { margin-left: -6px; }

.painel-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.licencas .form-label,
.painel-form .form-label,
.modal-mapa .form-label {
    margin-bottom: 4px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--fg);
}

.painel-opcional {
    font-weight: 400;
    color: var(--muted);
}

.painel-ajuda {
    margin: 6px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--muted);
}

.painel-ajuda[hidden] { display: none; }

.painel-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

/* Ação principal: uma só cor no painel inteiro. */
#sidebar-results .painel-acao,
.modal-mapa .painel-acao {
    min-height: 40px;
    border: 1px solid var(--brand);
    border-radius: var(--r-sm);
    background: var(--brand);
    color: #fff;
    font-weight: 600;
}

.painel-acoes > .painel-acao { flex: 1 1 auto; }

#sidebar-results .painel-acao:hover:not(:disabled),
#sidebar-results .painel-acao:focus-visible,
.modal-mapa .painel-acao:hover:not(:disabled),
.modal-mapa .painel-acao:focus-visible {
    border-color: var(--brand-2);
    background: var(--brand-2);
    color: #fff;
}

#sidebar-results .painel-acao:focus-visible,
.modal-mapa .painel-acao:focus-visible {
    outline: 2px solid var(--brand-2);
    outline-offset: 2px;
}

#sidebar-results .painel-acao:disabled { opacity: .45; }

#sidebar-results .painel-acao--icone {
    min-width: var(--toque);
    padding: 0 12px;
}

#sidebar-results .painel-acao--icone i { margin: 0; }

/* Ação secundária com moldura. */
#sidebar-results .painel-acao-sec {
    background: var(--surface);
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--fg);
    font-size: var(--fs-sm);
    font-weight: 500;
}

#sidebar-results .painel-acao-sec:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: #c5ccd3;
}

#sidebar-results .painel-acao-sec:focus-visible {
    outline: 2px solid var(--brand-2);
    outline-offset: 2px;
}

/* Ação secundária só de texto (Limpar). */
#sidebar-results .painel-limpar {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 12px;
    color: var(--brand-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
}

#sidebar-results .painel-limpar:hover { text-decoration: underline; }

.painel-atalho {
    font-weight: 400;
    color: var(--muted);
}

/* Contadores e avisos de situação (role=status). */
.painel-contagem {
    margin: 16px 0 8px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--fg);
}

.painel-contagem:empty { display: none; }

.painel-resultados-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 16px 0 8px;
}

.painel-resultados-cab .painel-contagem { margin: 0; }

.painel-estado {
    margin: 12px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--muted);
}

.painel-estado[hidden] { display: none; }

.painel-estado--erro { color: #b02a37; }
.painel-estado--aviso { color: #8a5a00; }

/* Itens de resultado: cartão quieto (borda --border, raio --r-md), a área
   principal é um <button> (mostra no mapa) e as ações ficam ao lado. */
.resultado-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.resultado-lista:empty { display: none; }

.resultado-item {
    display: flex;
    align-items: stretch;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    font-family: var(--app-font);
}

.resultado-item:hover { border-color: #c5ccd3; }

.resultado-item--coluna { flex-direction: column; }

.resultado-item__principal {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

div.resultado-item__principal { cursor: default; }

button.resultado-item__principal:hover { background: var(--surface-2); }

.resultado-item__principal:focus-visible {
    outline: 2px solid var(--brand-2);
    outline-offset: -2px;
}

.resultado-item__titulo {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--brand);
    overflow-wrap: anywhere;
}

.resultado-item__linha {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.resultado-item__linha--sem-local { font-style: italic; }

.resultado-item__acoes {
    display: flex;
    align-items: center;
    padding-right: 2px;
}

.resultado-item__botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 12px 12px;
}

.resultado-item__botoes > .btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

#sidebar-results .resultado-item__botoes > .btn i { margin: 0; }

/* Buscas recentes: um botão por busca; a lista cresce com o painel. */
.historico-lista { margin: 8px 0 4px; }
.historico-item { padding: 8px 12px; }
.historico-item__rotulo {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--fg);
    overflow-wrap: anywhere;
}

/* Ficha da licença (detalhe) */
.licenca-ficha__situacao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.licenca-ficha__situacao::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.licenca-ficha__situacao--vigente { color: #1e6b33; }
.licenca-ficha__situacao--vencida { color: #b02a37; }

.licenca-ficha__nota {
    margin: 0 0 12px;
    font-size: var(--fs-xs);
    color: var(--muted);
}

.licenca-ficha__dados {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.licenca-ficha__dados dt {
    font-weight: 500;
    color: var(--muted);
}

.licenca-ficha__dados dd {
    margin: 0;
    color: var(--fg);
    overflow-wrap: anywhere;
}

.licenca-ficha__coord {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

@media (max-width: 767.98px) {
    /* Na folha o X mora na faixa da alça, acima do cabeçalho: o título usa
       a largura toda. */
    .painel-cab { padding-right: 0; }

    #sidebar-results .painel-form input.form-control,
    #sidebar-results .painel-form select.form-select {
        min-height: var(--toque);
        font-size: 16px;
    }

    #sidebar-results .painel-acao,
    #sidebar-results .painel-acao-sec,
    #sidebar-results .painel-limpar {
        min-height: var(--toque);
    }
}

/* Estilos para o conteúdo do painel */
#sidebar-results-content h3 {
    margin-top: 20px;
    color: #333;
}

#sidebar-results-content p {
    color: #666;
    line-height: 1.6;
}

/* Indicador de carregamento inicial */
#loading-indicator {
    display: none;
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: #888;
}

#sidebar-results input,
#sidebar-results select {
    font-size: 0.9rem;
}

#sidebar-results .btn i {
    margin-right: 4px;
}


/****** DIV PESQUISA DE LICENÇAS *****/


/* ==========================================================================
   CONSULTA DE LICENÇAS (data-section="licencas")
   Identificação e Filtros com rótulo visível; "Outras formas de buscar"
   recolhido; barra de ações presa à base da seção (no computador quem rola
   é #sidebar-results, no celular é a própria seção: o sticky vale nos
   dois); contador só no cabeçalho dos resultados. Escala de 4px.
   ========================================================================== */
.licencas-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 12px;
}

.licencas-grupo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.licencas-grupo__titulo {
    float: none;
    width: 100%;
    margin: 0 0 4px;
    padding: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    border-bottom: 1px solid var(--border);
}

.licencas-campo {
    min-width: 0;
}


/* Duas colunas no painel do computador: Município | Ano na mesma linha;
   Atividade e Tipo de licença têm opções longas e ocupam a largura toda. */
@media (min-width: 768px) {
    .licencas-grupo--filtros {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 7.5rem;
        gap: 12px;
    }

    .licencas-grupo--filtros > .licencas-grupo__titulo,
    .licencas-campo--largo {
        grid-column: 1 / -1;
    }
}

.licencas .form-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--toque);
    margin: 0;
    padding-left: 0;
}

.licencas .form-switch .form-check-input {
    float: none;
    margin: 0;
}

.licencas .form-switch .form-check-label {
    font-size: var(--fs-sm);
    color: var(--fg);
}

/* Outras formas de buscar: recolhido por padrão. */
.licencas-outras {
    margin-top: 20px;
    border-top: 1px solid var(--border);
}

.licencas-outras > summary {
    display: flex;
    align-items: center;
    min-height: var(--toque);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand-2);
    cursor: pointer;
    list-style: none;
}

.licencas-outras > summary::-webkit-details-marker {
    display: none;
}

.licencas-outras > summary::before {
    content: "";
    width: 7px;
    height: 7px;
    margin: 0 10px 0 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}

.licencas-outras[open] > summary::before {
    transform: rotate(45deg);
}

.licencas-outras > summary:focus-visible {
    outline: 2px solid var(--brand-2);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.licencas-outras__corpo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0 12px;
}

.licencas-outras__titulo {
    margin: 0 0 8px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--fg);
}

.licencas-coord {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
}

.licencas-coord__ir {
    min-width: var(--toque);
    height: calc(1.5em + .75rem + 2px);
}

.licencas-aviso,
.licencas-ajuda {
    margin: 8px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.licencas-aviso { color: #b02a37; }
.licencas-ajuda { color: var(--muted); }

/* Barra de ações presa à base: Buscar ocupa a largura, Limpar ao lado. */
.licencas-acoes {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -4px;
    padding: 12px 4px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.licencas-acoes__dica {
    margin: 0 0 8px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.licencas-acoes__dica[hidden] {
    display: none;
}

.licencas-acoes__botoes {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Cores e estados: .painel-acao. */
#sidebar-results .licencas-buscar {
    flex: 1 1 auto;
    min-height: var(--toque);
}

#sidebar-results .licencas-limpar {
    flex: 0 0 auto;
    min-height: var(--toque);
    padding: 0 12px;
    color: var(--brand-2);
    font-weight: 500;
    text-decoration: none;
}

#sidebar-results .licencas-limpar:hover {
    text-decoration: underline;
}

.licencas-historico-limpar {
    width: 100%;
    font-size: var(--fs-sm);
    color: #b02a37;
}

/* Cabeçalho dos resultados: total e exportação na mesma linha. */
.licencas-resultados-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 16px 0 8px;
}

.licencas-resultados-cab[hidden] {
    display: none;
}

.licencas-total {
    margin: 0;
    font-size: 14px;
    color: var(--fg);
}

/* Cresce com o conteúdo; quem rola é o painel (sem rolagem aninhada). */
#licenca-results {
    margin: 8px 0 0;
    padding: 0;
}

#licenca-results:empty {
    display: none;
}

/* Carregando, vazio, sem filtro e erro: texto que diz o que houve e o que
   fazer, sem cara de item clicável. */
#licenca-results .licencas-estado {
    margin: 0;
    padding: 4px 0;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--fg);
}

#licenca-results .licencas-estado--erro { color: #b02a37; }
#licenca-results .licencas-estado--aviso { color: #8a5a00; }

@media (max-width: 767.98px) {
    /* 16px: abaixo disso o iOS dá zoom ao focar o campo. */
    #sidebar-results .licencas input.form-control,
    #sidebar-results .licencas select.form-select {
        font-size: 16px;
    }

    .licencas .form-control,
    .licencas .form-select {
        min-height: var(--toque);
    }

    .licencas-coord__ir {
        height: var(--toque);
    }
}


/* export dropdown item hover */
.export-item:hover {
    background: #f0f0f0;
}


/* Container dos grupos */

#layerGroupsContainer {
    margin-top: 0;
}


#layerGroupsContainer .accordion-item {
    border: none;
    background: transparent;
    margin-bottom: 20px;
    /* Espaçamento entre grupos */
}

/* Botão do Accordion (Título do Grupo) */
#layerGroupsContainer .accordion-button {
    padding: 8px 5px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #e9ecef;
    /* Linha discreta */
    border-radius: 0;
    color: #333;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: none !important;
    /* Remove glow do Bootstrap */
}

/* Estado Hover do Botão */
#layerGroupsContainer .accordion-button:hover {
    background-color: #f8f9fa;
}

/* Estado Ativo (Aberto) */
#layerGroupsContainer .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: #000;
    border-bottom: 1px solid #dee2e6;
    /* Linha um pouco mais escura */
}

/* Remove a seta padrão do Bootstrap */
#layerGroupsContainer .accordion-button::after {
    display: none !important;
}

/* Corpo do Accordion (Lista de camadas) */
#layerGroupsContainer .accordion-body {
    padding: 10px 5px;
}

/* --- Ícone Personalizado (Seta) --- */
.custom-accordion-icon {
    font-size: 14px;
    /* Tamanho da fonte para FontAwesome */
    transition: transform 0.3s ease;
    margin-left: auto;
    color: #6c757d;
    /* Cor cinza */
}

/* Rotação do ícone quando aberto */
.accordion-button:not(.collapsed) .custom-accordion-icon {
    transform: rotate(180deg);
    color: #333;
    /* Fica mais escuro quando aberto */
}

/* Remove a seta padrão do Bootstrap (Reforço) */
.accordion-button::after {
    background-image: none !important;
    display: none !important;
}

/* --- Itens da Lista de Camadas --- */
.layer-row {
    margin-bottom: 0.5rem;
}

.layer-label {
    cursor: pointer;
    margin-left: 8px;
    font-size: 0.9rem;
}

.layer-input {
    cursor: pointer;
}



/* Controles extras (Opacidade/Legenda) */
.layer-controls {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    border-left: 1px solid #dee2e6;
    padding-left: 1rem;
    display: none;
    /* Oculto por padrão */
}

.layer-controls.active {
    display: block;
}



/* Slider de Opacidade */
.opacity-control {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.opacity-label {
    font-size: 11px;
    min-width: 55px;
    margin-bottom: 0;
    margin-right: 0.5rem;
    color: #6c757d;
}

.opacity-range {
    height: 4px;
}

/* Imagem da Legenda */
.legend-image {
    max-width: 100%;
    margin-top: 5px;
    border: 1px solid #dee2e6;
    padding: 2px;
    border-radius: 4px;
}


/* --- Texto da legenda das licenças (licencas-legenda.js) --- */
.legend-text-small {
    font-size: 0.85rem;
    /* Texto um pouco menor */
    font-weight: 500;
    color: #333;
    line-height: 1.2;
}


/* ==========================================================================
   ESTILOS DE IMPRESSÃO (NATIVO)
   ========================================================================== */
@media print {

    /* 1. Configuração da Página PDF */
    @page {
        size: A4 landscape;
        /* Força orientação paisagem */
        margin: 0;
        /* Remove margens do navegador */
    }

    /* 2. Esconder TUDO que não seja o layout de impressão */
    body * {
        visibility: hidden;
    }

    /* 3. Mostrar e Posicionar o Container de Impressão */
    #print-layout-container,
    #print-layout-container * {
        visibility: visible;
    }

    #print-layout-container {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 999999 !important;
        background: white !important;
        display: flex !important;
        /* Garante que o flexbox funcione */
    }

    /* 4. Ajustes Específicos para o Mapa dentro da Impressão */
    /* Aqui está o segredo: movemos o mapa REAL para dentro do layout na hora da impressão */
    #map-for-print {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        visibility: visible !important;
    }

    #map-for-print .leaflet-control-container {
        display: none !important;
        /* Esconde botões de zoom na impressão */
    }

    #map-for-print .leaflet-pane,
    #map-for-print .leaflet-tile,
    #map-for-print .leaflet-marker-icon,
    #map-for-print .leaflet-popup-content-wrapper,
    #map-for-print .leaflet-overlay-pane svg {
        visibility: visible !important;
        /* Garante que os tiles e vetores apareçam */
    }
}

/* ==========================================================================
   LAYOUT DE IMPRESSÃO (PRINT LAYOUT)
   ========================================================================== */

/* Container Principal (Folha A4) */
#print-layout-container {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 297mm;
    height: 210mm;
    background: white;
    z-index: -1;
    padding: 10mm;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

/* Área do Mapa */
#print-map-image {
    flex: 1;
    border: 1px solid #000;
    border-bottom: none;
    /* Remove borda inferior para colar no rodapé */
    background-color: #f8f9fa;
    background-size: cover;
    background-position: center;
    margin-bottom: 0;
}

/* Rodapé Geral */
.print-footer {
    height: 60mm;
    display: flex;
    flex-direction: column;
    border: 1px solid #000;
}

/* Linha do Título (Topo do Rodapé) */
.print-header-row {
    height: 10mm;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #000;
}

#print-map-title {
    margin: 0;
    font-size: 15px;
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
}

/* Container das 4 Colunas */
.print-columns-container {
    flex: 1;
    display: flex;
    height: 50mm;
    /* Garante altura fixa para o conteúdo */
    overflow: hidden;
}

/* Estilos Comuns das Colunas */
.print-col {
    padding: 5px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid transparent;
    /* Mantém alinhamento */
}

/* Títulos das Seções (Legenda, Info Técnica) */
.print-section-title {
    margin: 0 0 5px 0;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

/* --- COLUNA 1: LEGENDA --- */
.print-col-legend {
    flex: 2;
}

#print-legend-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-content: flex-start;
    overflow: hidden;
}

/* --- COLUNA 2: NORTE E ESCALAS --- */
.print-col-scale {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#print-north {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.print-north-arrow {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.print-info-divider {
    width: 80%;
    margin: 0;
    border-top: 1px solid #ccc;
}

.print-scale-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
}

#print-scale-value {
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 2px;
}

/* Escala Gráfica Customizada */
.print-scale-graphic-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#print-scale-bar-container {
    width: 100px;
    /* Será sobrescrito pelo JS */
    position: relative;
    height: 15px;
}

.print-scale-bar {
    display: flex;
    height: 6px;
    border: 1px solid black;
    width: 100%;
}

.scale-segment-black {
    flex: 1;
    background: black;
}

.scale-segment-white {
    flex: 1;
    background: white;
}

.print-scale-label {
    position: absolute;
    top: 8px;
    font-size: 8px;
    font-weight: bold;
}

.label-start {
    left: 0;
    transform: translateX(-50%);
}

.label-mid {
    left: 50%;
    transform: translateX(-50%);
}

.label-end {
    right: 0;
    transform: translateX(50%);
}


/* --- COLUNA 3: INFO TÉCNICA --- */
.print-col-info {
    flex: 1;
    font-size: 8px;
    line-height: 1.4;
}

.print-info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centraliza verticalmente */
    align-items: center;
    /* Centraliza horizontalmente */
    text-align: center;
}

.print-info-divider {
    width: 80%;
    margin: 8px 0;
    border-top: 1px solid #ccc;
}

/* --- COLUNA 4: LOGO E AVISO --- */
.print-col-logo {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.print-logo-wrapper {
    flex: 1;
    /* Ocupa todo o espaço disponível acima do texto */
    display: flex;
    align-items: center;
    /* Centraliza verticalmente */
    justify-content: center;
    /* Centraliza horizontalmente */
}

.print-logo-img {
    height: 50px;
    /* Tamanho do logo */
    object-fit: contain;
}

.print-legal-text {
    font-size: 7px;
    text-align: justify;
    line-height: 1.2;
    color: #333;
    margin-bottom: 10px;
    /* Descola da borda inferior */
    padding: 0 5px;
}


/* Estilo do menu de exportação */
.export-menu {
    border: 1px solid #ddd;
}

.export-item {
    transition: background-color 0.2s;
}

.export-item:hover {
    background-color: #f8f9fa !important;
    color: #007bff !important;
}

.export-item:first-child {
    border-radius: 6px 6px 0 0;
}

.export-item:last-child {
    border-radius: 0 0 6px 6px;
}

#export-toggle {
    position: relative;
}

#export-dropdown {
    position: relative;
}

/* ==========================================================================
   FOLHA DE BAIXO (celular, < 768px) — libs/webgis/folha.js
   O mesmo #sidebar-results, com a mesma classe `active` que o abre hoje:
   só o posicionamento muda. Abre a 50% da altura; .folha-expandida leva a
   "90%", limitado ao que sobra entre o cabeçalho (--mh-h) e a toolbar
   presa à base (--toolbar-celular-h), acima da qual a folha fica — para
   Camadas e Legenda continuarem alcançáveis com ela aberta.
   ========================================================================== */
.folha-alca { display: none; }

@media (max-width: 767.98px) {
    #sidebar-results {
        top: auto;
        left: 0;
        right: 0;
        bottom: var(--toolbar-celular-h);
        width: 100%;
        height: 50vh;
        height: 50dvh;
        padding: 0 16px 16px;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
        overflow: hidden;
        /* Fechada: desce a própria altura MAIS a faixa da toolbar (está
           ancorada acima dela) e a sombra — só 110% deixava a alça e o X
           espiando sobre a toolbar. visibility tira a folha fechada do
           Tab e do leitor de tela; sai depois do deslize (delay). */
        transform: translateY(calc(100% + var(--toolbar-celular-h) + 24px));
        visibility: hidden;
        transition: transform .28s cubic-bezier(.16, 1, .3, 1),
                    height .28s cubic-bezier(.16, 1, .3, 1),
                    visibility 0s linear .28s;
    }

    #sidebar-results.active {
        transform: none;
        visibility: visible;
        transition-delay: 0s;
    }

    #sidebar-results.folha-expandida {
        height: min(90vh, calc(100vh - var(--mh-h) - var(--toolbar-celular-h)));
        height: min(90dvh, calc(100dvh - var(--mh-h) - var(--toolbar-celular-h)));
    }

    /* Uma seção por vez está visível (toggleSidebarSection); é ela que rola. */
    #sidebar-results .sidebar-section {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .folha-alca {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        /* Alvo de toque mínimo (tokens.css): o traço visível é de 4px,
           a área que pega o dedo tem 44px de altura. A largura deixa uma
           faixa de 44px livre em cada lado, onde fica o X: os dois alvos
           não se sobrepõem. */
        width: calc(100% - 2 * var(--toque));
        min-height: var(--toque);
        margin: 0 auto;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: grab;
        touch-action: none;   /* o gesto é da alça, não da rolagem */
    }

    .folha-alca__traco {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
    }

    body.folha-arrastando { user-select: none; }

    /* X na mesma faixa de 44px da alça, no canto direito, fora da área
       dela; também com alvo de 44px. */
    #sidebar-results-close-btn {
        top: 0;
        right: 0;
        width: var(--toque);
        height: var(--toque);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
}

/* ===== Painel da área visível (data-section="dashboard") =====
   Paleta (validada com o validador do skill dataviz contra #fff: banda de
   luminosidade, croma, separação para daltonismo e contraste ≥ 3:1):
   vigentes = --brand-2; vencidas = vermelho de situação. Texto de situação
   em tons escuros legíveis; a cor nunca vem sem rótulo. */
.dash {
    --dash-vigentes: var(--brand-2);
    --dash-vencidas: #c8323f;
    --dash-vencidas-texto: #b02a37;
    --dash-alerta: #c98500;
    --dash-alerta-texto: #8a5a00;
    --dash-alerta-fundo: #fff7e6;
    --dash-alerta-borda: #f0d28a;
    font-family: var(--app-font);
    color: var(--fg);
}

/* Cabeçalho: .painel-cab (padrão comum); aqui só o botão Atualizar. */
.dash-atualizar {
    flex: 0 0 auto;
    width: var(--toque);
    height: var(--toque);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--brand-2);
    cursor: pointer;
}

.dash-atualizar:hover { background: var(--surface-2); }
.dash-atualizar:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.dash-atualizar.girando i { animation: dash-girar 0.9s linear infinite; }

@keyframes dash-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .dash-atualizar.girando i { animation: none; }
}

.dash-status-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 8px 0 16px;
    min-height: 20px;
}

.dash-status {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--muted);
}

.dash-status[data-estado="erro"] { color: var(--dash-vencidas-texto); }
.dash-status[data-estado="aviso"] { color: var(--dash-alerta-texto); }

.dash-retry {
    padding: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--brand-2);
}

.dash-corpo[aria-busy="true"] .dash-kpi__numero,
.dash-corpo[aria-busy="true"] .dash-ranking,
.dash-corpo[data-estado="erro"] .dash-kpi__numero,
.dash-corpo[data-estado="erro"] .dash-ranking { opacity: 0.45; }
.dash-corpo .dash-kpi__numero,
.dash-corpo .dash-ranking { transition: opacity 0.2s ease-out; }

/* Grade 2×2: número (24/600) + rótulo (xs, muted). Sem borda lateral nem
   ícone; a prioridade (vencem em 30 dias) ganha fundo âmbar claro. */
.dash-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dash-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}

.dash-kpi__numero {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}

.dash-kpi__rotulo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: 1.3;
}

.dash-ponto {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dash-kpi--vencidas .dash-ponto { background: var(--dash-vencidas); }
.dash-kpi--vencidas .dash-kpi__rotulo { color: var(--dash-vencidas-texto); font-weight: 500; }

.dash-kpi--prioridade {
    background: var(--dash-alerta-fundo);
    border-color: var(--dash-alerta-borda);
}
.dash-kpi--prioridade .dash-ponto { background: var(--dash-alerta); }
.dash-kpi--prioridade .dash-kpi__rotulo { color: var(--dash-alerta-texto); font-weight: 600; }

.dash-apoio {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.dash-apoio strong { color: var(--fg); font-weight: 600; }

.dash-legenda {
    display: flex;
    gap: 14px;
    margin: 20px 0 4px;
    font-size: var(--fs-xs);
    color: var(--muted);
}

.dash-legenda > span { display: inline-flex; align-items: center; gap: 6px; }

.dash-amostra {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.dash-amostra--vigentes { background: var(--dash-vigentes); }
.dash-amostra--vencidas { background: var(--dash-vencidas); }

.dash-lista-titulo {
    margin: 16px 0 8px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--fg);
}

.dash-lista-nota {
    font-weight: 400;
    color: var(--muted);
}

.dash-ranking {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-ranking__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--fs-sm);
}

.dash-ranking__nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg);
}

.dash-ranking__valor {
    flex: 0 0 auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}

.dash-ranking__vencidas {
    font-weight: 500;
    color: var(--dash-vencidas-texto);
}

/* Barra fina: trilho neutro, segmentos com 2px de vão e ponta arredondada. */
.dash-barra {
    display: flex;
    gap: 2px;
    height: 6px;
    margin-top: 4px;
    border-radius: 3px;
    background: var(--surface-2);
}

.dash-barra__seg { height: 100%; border-radius: 3px; }
.dash-barra__seg--vigentes { background: var(--dash-vigentes); }
.dash-barra__seg--vencidas { background: var(--dash-vencidas); }

.dash-vazio {
    margin: 20px 0 0;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.dash-vazio[hidden], .dash-distribuicao[hidden] { display: none; }

/* Celular: o X mora na faixa da alça (ver .painel-cab); Atualizar encosta
   na borda direita. */
@media (max-width: 767.98px) {
    .dash-atualizar { margin-right: -8px; }
}