/* ==========================================================================
   Relatórios imprimíveis (gt-rel)
   --------------------------------------------------------------------------
   Documento em "folha" branca sobre o plano da página, pensado para tela e
   impressão (A4). Usa os tokens de page-header.css (--gt-*).

   Estrutura:
     .gt-rel                       folha do relatório
       .gt-rel__barra              barra de ações (só na tela)
       .gt-rel__cabecalho          logos, título, subtítulo e .gt-rel__meta
       .gt-rel__secao              seção com .gt-rel__secao-titulo
         .gt-rel__kpis             números de destaque
         .gt-rel__quadros          grade de tabelas pequenas
         .gt-rel__tabela           tabela limpa (números à direita)
         .gt-rel__item             bloco repetido (ex.: uma viagem)
   ========================================================================== */

body:has(.gt-rel) {
    background: var(--gt-plane);
}

.gt-rel {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 16px auto 40px;
    padding: 28px 32px 36px;
    background: var(--gt-surface);
    border: 1px solid var(--gt-border);
    border-radius: var(--gt-radius);
    font-family: var(--gt-fonte);
    font-size: 13px;
    color: var(--gt-ink);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.gt-rel *,
.gt-rel *::before,
.gt-rel *::after {
    box-sizing: border-box;
}

/* --- barra de ações (tela) ------------------------------------------------ */

.gt-rel__barra {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    max-width: 1200px;
    margin: 16px auto -4px;
}

/* --- cabeçalho ------------------------------------------------------------ */

.gt-rel__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--gt-border);
}

.gt-rel__logos img {
    height: 34px;
    width: auto;
}

.gt-rel__titulo {
    margin: 20px 0 2px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--gt-ink);
}

.gt-rel__subtitulo {
    margin: 0;
    font-size: 14px;
    color: var(--gt-ink-2);
}

.gt-rel__meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px 20px;
    margin: 18px 0 0;
    padding: 14px 16px;
    background: var(--gt-plane);
    border-radius: 8px;
}

.gt-rel__meta div {
    min-width: 0;
}

.gt-rel__meta dt,
.gt-rel__dados dt {
    margin-bottom: 2px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--gt-ink-muted);
}

.gt-rel__meta dd,
.gt-rel__dados dd {
    margin: 0;
    font-size: 13.5px;
    color: var(--gt-ink);
    overflow-wrap: anywhere;
}

/* --- seções --------------------------------------------------------------- */

.gt-rel__secao {
    margin-top: 40px;
}

.gt-rel__secao-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 9px 14px;
    background: #e7ecef;
    border-left: 4px solid var(--gt-brand);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gt-brand-dark);
}

.gt-rel__secao-titulo small {
    font-size: 12px;
    color: var(--gt-ink-2);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.gt-rel__subtitulo-secao {
    margin: 18px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gt-ink);
}

/* --- números de destaque -------------------------------------------------- */

.gt-rel__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.gt-rel__kpi {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--gt-border);
    border-radius: 8px;
}

.gt-rel__kpi-rotulo {
    display: block;
    font-size: 12px;
    color: var(--gt-ink-2);
}

.gt-rel__kpi-valor {
    display: block;
    margin-top: 4px;
    font-size: 19px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gt-rel__kpi-unidade {
    font-size: 12px;
    font-weight: 400;
    color: var(--gt-ink-muted);
}

/* --- grade de quadros ----------------------------------------------------- */

.gt-rel__quadros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 14px 18px;
    align-items: start;
}

.gt-rel__quadros--largo {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
}

/* --- tabela --------------------------------------------------------------- */

.gt-rel__tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.gt-rel__tabela caption {
    caption-side: top;
    margin-bottom: 6px;
    padding: 0 0 0 8px;
    border-left: 3px solid var(--gt-track);
    font-size: 13px;
    font-weight: 600;
    color: var(--gt-ink);
    text-align: left;
}

.gt-rel__tabela th,
.gt-rel__tabela td {
    padding: 5px 8px;
    border-bottom: 1px solid #eef0f2;
    text-align: left;
    vertical-align: middle;
}

.gt-rel__tabela thead th {
    background: #eef1f3;
    border-bottom: 1px solid #dde2e6;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gt-ink-2);
}

.gt-rel__tabela thead tr + tr th {
    border-top: 1px solid #dde2e6;
}

.gt-rel__tabela tbody th {
    font-weight: 500;
    color: var(--gt-ink-2);
}

.gt-rel__tabela .num {
    text-align: right;
    white-space: nowrap;
}

.gt-rel__tabela .grupo {
    text-align: center;
}

/* Separador vertical entre grupos de colunas (Municipal | Estadual | Total). */
.gt-rel__tabela .inicio-grupo {
    border-left: 1px solid #dde2e6;
}

.gt-rel__tabela tr.total th,
.gt-rel__tabela tr.total td {
    border-top: 1px solid #dde2e6;
    border-bottom: 0;
    font-weight: 600;
    color: var(--gt-ink);
}

/* Coluna "Total" levemente destacada. */
.gt-rel__tabela .destaque {
    background: #f6f8f9;
}

.gt-rel__tabela .vazio {
    color: var(--gt-ink-muted);
}

/* --- bloco repetido (uma viagem, uma escola...) --------------------------- */

.gt-rel__item {
    margin-top: 16px;
    padding: 0 16px 16px;
    border: 1px solid rgba(11, 11, 11, .18);
    border-radius: 8px;
    overflow: hidden;
    break-inside: avoid;
    page-break-inside: avoid;
}

.gt-rel__item-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 -16px 14px;
    padding: 10px 16px;
    background: var(--gt-plane);
    border-bottom: 1px solid rgba(11, 11, 11, .12);
}

.gt-rel__item-titulo {
    margin: 0 4px 0 0;
    font-size: 15px;
    font-weight: 600;
}

.gt-rel__selo {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--gt-plane);
    border: 1px solid var(--gt-border);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--gt-ink-2);
    white-space: nowrap;
}

.gt-rel__selo--placa {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .04em;
    color: var(--gt-ink);
}

.gt-rel__dados {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px 16px;
    margin: 0;
}

.gt-rel__dados div {
    min-width: 0;
}

.gt-rel__dados .num {
    font-variant-numeric: tabular-nums;
}

/* Faixa de indicadores unitários dentro de um item. */
.gt-rel__faixa {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px 16px;
    margin: 14px 0 0;
    padding: 10px 12px;
    background: var(--gt-plane);
    border-radius: 6px;
}

.gt-rel__item .gt-rel__tabela {
    margin-top: 14px;
}

.gt-rel__texto {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--gt-ink-2);
}

.gt-rel__texto strong {
    display: block;
    margin-bottom: 2px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--gt-ink-muted);
}

/* --- impressão ------------------------------------------------------------ */

@media print {
    @page {
        size: A4 landscape;
        margin: 12mm;
    }

    body:has(.gt-rel) {
        background: #fff;
    }

    .gt-rel__barra {
        display: none !important;
    }

    .gt-rel {
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        font-size: 11.5px;
    }

    .gt-rel__secao {
        break-inside: auto;
    }

    .gt-rel__secao-titulo,
    .gt-rel__subtitulo-secao {
        break-after: avoid;
        page-break-after: avoid;
    }

    .gt-rel__quadros > *,
    .gt-rel__kpis,
    .gt-rel__tabela {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

@media (max-width: 640px) {
    .gt-rel {
        margin: 8px;
        padding: 18px 16px 24px;
    }

    .gt-rel__barra {
        margin: 8px 8px 0;
    }
}

/* --- peças complementares ------------------------------------------------- */

/* Folha mais larga, para relatórios com tabelas de muitas colunas. */
.gt-rel--largo {
    max-width: 1500px;
}

.gt-rel--largo + .gt-rel__barra,
.gt-rel__barra:has(+ .gt-rel--largo) {
    max-width: 1500px;
}

/* Tabela larga: rola na horizontal na tela, sem estourar a folha. */
.gt-rel__rolagem {
    overflow-x: auto;
}

.gt-rel__rolagem > .gt-rel__tabela {
    min-width: 100%;
}

/* Mensagem de lista vazia. */
.gt-rel__vazio {
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--gt-border);
    border-radius: 8px;
    color: var(--gt-ink-muted);
    text-align: center;
}

/* Lista simples de nomes (escolas atendidas, alunos...). */
.gt-rel__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
}

.gt-rel__lista li {
    padding: 3px 0;
    border-bottom: 1px solid #eef0f2;
}

.gt-rel__lista li:last-child {
    border-bottom: 0;
}

/* Colunas lado a lado dentro de um item ou seção. */
.gt-rel__colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 14px 24px;
    margin-top: 14px;
}

.gt-rel__colunas-titulo {
    margin: 0 0 6px;
    padding-left: 8px;
    border-left: 3px solid var(--gt-track);
    font-size: 13px;
    font-weight: 600;
}

/* Mapa ou imagem dentro do relatório. */
.gt-rel__mapa {
    width: 100%;
    border: 1px solid var(--gt-border);
    border-radius: 8px;
    overflow: hidden;
}

/* Rodapé: ano base e apoio. */
.gt-rel__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 36px;
    padding-top: 14px;
    border-top: 1px solid var(--gt-border);
    font-size: 12px;
    color: var(--gt-ink-2);
}

.gt-rel__rodape img {
    height: 44px;
    width: auto;
}

.gt-rel__rodape-apoio {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Quebra de página forçada na impressão (ex.: um município por página). */
.gt-rel__quebra {
    break-after: page;
    page-break-after: always;
}

/* Filtros de tela dentro do relatório (somem na impressão). */
.gt-rel__filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin-top: 18px;
}

.gt-rel__filtros .gt-field {
    min-width: 180px;
}

/* Tabulator dentro da folha: sem moldura dupla. */
.gt-rel .tabulator {
    border-radius: 8px;
}

@media print {
    .gt-rel__rolagem {
        overflow: visible;
    }

    .gt-rel--largo {
        max-width: none;
    }

    .gt-rel__filtros,
    .gt-rel__so-tela {
        display: none !important;
    }
}

/* Linha de detalhe sob uma linha da tabela (ex.: escolas da viagem). */
.gt-rel__tabela tr.com-detalhe th,
.gt-rel__tabela tr.com-detalhe td {
    border-bottom: 0;
}

.gt-rel__tabela tr.detalhe td {
    padding-top: 0;
    font-size: 11.5px;
    color: var(--gt-ink-muted);
    white-space: normal;
}

.gt-rel__tabela tr.detalhe td b {
    font-weight: 500;
    color: var(--gt-ink-2);
}

/* Item com tabela longa: pode quebrar entre páginas. */
.gt-rel__item--longo {
    break-inside: auto;
    page-break-inside: auto;
}

.gt-rel__item--longo .gt-rel__tabela thead {
    display: table-header-group;
}

.gt-rel__item--longo .gt-rel__tabela tr {
    break-inside: avoid;
}

@media print {
    .gt-rel__item--longo .gt-rel__tabela {
        break-inside: auto;
        page-break-inside: auto;
    }
}

/* --- composição de custos (componente com parâmetros e total) ------------- */

.gt-rel__composicao {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    margin-top: 14px;
    align-items: start;
}

.gt-rel__composicao-coluna {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.gt-rel__composicao-titulo {
    margin: 0;
    padding-left: 8px;
    border-left: 3px solid var(--gt-brand);
    font-size: 13px;
    font-weight: 600;
}

.gt-rel__comp {
    padding: 10px 12px;
    border: 1px solid var(--gt-border);
    border-radius: 6px;
    break-inside: avoid;
    page-break-inside: avoid;
}

.gt-rel__comp-titulo {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gt-ink);
}

.gt-rel__comp .gt-rel__dados {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px 12px;
}

.gt-rel__comp .gt-rel__dados dd {
    font-size: 12.5px;
}

.gt-rel__comp-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #eef0f2;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.gt-rel__comp-total span:first-child {
    font-weight: 500;
    color: var(--gt-ink-2);
}

@media (max-width: 760px) {
    .gt-rel__composicao {
        grid-template-columns: 1fr;
    }
}

.gt-rel__tabela .centro {
    text-align: center;
}

/* Marcas de sim/não (✓/✕) em células. */
.gt-rel__tabela td.ok {
    color: #2e8b3e;
}

.gt-rel__tabela td.falta {
    color: var(--gt-danger);
}

/* ==========================================================================
   Painel com mapa coroplético (Relatório do gestor)
   ========================================================================== */

/* Seletor de métrica em pílulas. */
.gt-metricas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.gt-metricas__opcao {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--gt-border);
    border-radius: 999px;
    background: var(--gt-surface);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--gt-ink-2);
    cursor: pointer;
}

.gt-metricas__opcao:hover {
    background: var(--gt-plane);
    color: var(--gt-ink);
}

.gt-metricas__opcao[aria-pressed="true"] {
    border-color: var(--gt-brand);
    background: var(--gt-brand);
    color: #fff;
}

.gt-metricas__opcao:focus-visible {
    outline: 3px solid rgba(42, 120, 214, .4);
    outline-offset: 2px;
}

.gt-mapa-painel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 14px;
    align-items: start;
}

.gt-mapa-painel__mapa {
    height: 520px;
    border: 1px solid var(--gt-border);
    border-radius: 8px;
    overflow: hidden;
    background: #f4f6f8;
    z-index: 0;
}

.gt-mapa-painel__lado h3 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
}

.gt-mapa-painel__lado p {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--gt-ink-muted);
}

/* Legenda do coroplético. */
.gt-coro-legenda {
    display: grid;
    gap: 6px;
}

.gt-coro-legenda__item {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--gt-ink);
}

.gt-coro-legenda__cor {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .12);
}

.gt-coro-legenda__contagem {
    font-variant-numeric: tabular-nums;
    color: var(--gt-ink-muted);
}

.gt-coro-tooltip {
    font-family: var(--gt-fonte);
    font-size: 12px;
}

/* Card largo: municípios por faixa de georreferenciamento. */
.gt-faixas {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--gt-border);
    border-radius: var(--gt-radius);
    background: var(--gt-surface);
}

.gt-faixas__titulo {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gt-ink-2);
}

.gt-faixas__barra {
    display: flex;
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--gt-track);
}

.gt-faixas__seg {
    height: 100%;
    border-right: 2px solid var(--gt-surface);
}

.gt-faixas__seg:last-child {
    border-right: 0;
}

.gt-faixas__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
}

.gt-faixas__legenda .gt-coro-legenda__item {
    display: inline-grid;
}

/* Tabela só para impressão (o Tabulator é virtual e não imprime inteiro). */
.gt-rel__so-impressao {
    display: none;
}

.gt-rel__tabela--compacta {
    font-size: 9px;
}

.gt-rel__tabela--compacta th,
.gt-rel__tabela--compacta td {
    padding: 2px 4px;
}

.gt-rel__filtros-ativos {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--gt-ink-2);
}

@media (max-width: 900px) {
    .gt-mapa-painel {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media print {
    .gt-metricas,
    .gt-rel__so-tela,
    .gt-filter,
    .leaflet-control-zoom {
        display: none !important;
    }

    .gt-rel__so-impressao {
        display: block;
    }

    .gt-mapa-painel {
        grid-template-columns: 820px minmax(0, 1fr);
        break-inside: avoid;
    }

    .gt-mapa-painel__mapa {
        width: 820px;
        height: 470px;
    }

    .gt-mapa-painel__lado {
        max-width: 260px;
    }

    .gt-rel__quebra-antes {
        break-before: page;
        page-break-before: always;
    }

    .gt-rel .gt-cards {
        break-inside: avoid;
    }
}