/* ============================================================
 * relatorios.css — Relatórios (CAPES Global · teste)
 *
 * Módulo novo, então tem folha própria: os outros reaproveitam
 * /assets/css/<modulo>.css do sistema original, e este não tem original.
 * As variáveis são as mesmas de capes-global.css, para não destoar.
 *
 * A segunda metade do arquivo é o @media print — é o que transforma a peça
 * em PDF sem nenhuma biblioteca.
 * ============================================================ */

.rl-main {
    padding: 24px 28px 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ---------- Cabeçalho ---------- */
.rl-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.rl-header .subt {
    margin: 0;
    color: var(--color-text-mid, #555);
    font-size: 13.5px;
    max-width: 62ch;
    line-height: 1.55;
}
.rl-gerais {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- KPIs ---------- */
.rl-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.rl-kpi {
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 10px;
    padding: 14px 16px;
}
.rl-kpi .label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-mid, #666);
    font-weight: 600;
}
.rl-kpi .val {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--uc-primary, #2E7D32);
}
.rl-kpi .sub { font-size: 11.5px; color: var(--color-text-mid, #777); }
.rl-kpi .val.rl-danger { color: var(--color-negative, #c0392b); }
.rl-kpi .val.rl-alerta { color: var(--color-warning, #d97706); }

/* ---------- Filtros ---------- */
.rl-filtros-row { margin-bottom: 12px; }
.rl-filtros { display: flex; gap: 10px; flex-wrap: wrap; }
.rl-filtros select {
    padding: 7px 10px;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 8px;
    background: var(--color-bg-card, #fff);
    color: inherit;
    font-size: 13px;
}

/* ---------- Tabela ---------- */
.rl-tabela-wrap {
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 10px;
    overflow-x: auto;
}
.rl-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rl-tabela thead th {
    text-align: left;
    padding: 11px 14px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-mid, #666);
    border-bottom: 1px solid var(--color-border, #e6e6e6);
    background: var(--color-bg-alt, #fafafa);
    position: sticky;
    top: 0;
    z-index: 1;
}
.rl-tabela td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--color-border, #f0f0f0);
    vertical-align: middle;
}
.rl-linha:hover { background: var(--color-bg-alt, #fafafa); }
/* A linha aberta tinha o mesmo fundo do hover: passado o mouse, nao dava para
   dizer qual das duas estava expandida. Tinta da cor primaria, que e' o que o
   portal ja' usa para "selecionado", e ela e o detalhe abaixo viram um bloco. */
.rl-linha.rl-aberta { background: var(--color-primary-light, #2E7D3212); }
.rl-linha.rl-aberta > td { border-bottom-color: transparent; }
.rl-linha.rl-aberta > td:first-child { box-shadow: inset 3px 0 0 var(--uc-primary, #2E7D32); }

.rl-td-peca { display: flex; align-items: center; gap: 8px; }
.rl-td-peca strong { display: block; font-weight: 600; }
.rl-periodo { font-size: 12px; color: var(--color-text-mid, #777); }

.rl-expandir {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-mid, #777);
    /* Alvo de 28px em vez dos 19px de antes (padding 2px + glifo de 15px):
       era pequeno demais para acertar com o dedo, e o unico jeito de abrir
       o detalhe do relatorio. */
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm, 4px);
    line-height: 1;
    font-size: 15px;
}
.rl-expandir:hover {
    color: var(--uc-primary, #2E7D32);
    background: var(--color-primary-light, #2E7D3212);
}

.rl-sem-prazo { color: var(--color-text-mid, #999); cursor: help; border-bottom: 1px dotted currentColor; }

.rl-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.rl-badge.rl-ok      { background: var(--cgt-ok-bg, #E8F5E9);     color: var(--cgt-ok-fg, #2E7D32); }
.rl-badge.rl-alerta  { background: var(--cgt-alerta-bg, #FFF4E5); color: var(--cgt-alerta-fg, #B26A00); }
.rl-badge.rl-danger  { background: var(--cgt-erro-bg, #FDECEA);   color: var(--cgt-erro-fg, #C62828); }
.rl-badge.rl-neutro  { background: var(--cgt-neutro-bg, #EEF1F4); color: var(--cgt-neutro-fg, #555); }

.rl-td-barra { min-width: 150px; white-space: nowrap; }
.rl-barra {
    display: inline-block;
    width: 84px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-border, #eaeaea);
    overflow: hidden;
    vertical-align: middle;
}
.rl-barra-fill { display: block; height: 100%; border-radius: 999px; }
.rl-barra-fill.rl-ok     { background: var(--color-positive, #2E7D32); }
.rl-barra-fill.rl-alerta { background: var(--color-warning, #d97706); }
.rl-barra-fill.rl-danger { background: var(--color-negative, #c0392b); }
.rl-pct  { font-size: 12.5px; font-weight: 600; margin-left: 7px; }
.rl-frac { font-size: 11.5px; color: var(--color-text-mid, #888); margin-left: 6px; }

.rl-td-acoes { white-space: nowrap; }
.rl-btn {
    border: 1px solid var(--color-border, #ddd);
    background: var(--color-bg-card, #fff);
    color: inherit;
    border-radius: 7px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 4px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 30px; white-space: nowrap;
    transition: border-color .12s, color .12s, background .12s;
}
.rl-btn:hover {
    border-color: var(--uc-primary, #2E7D32); color: var(--uc-primary, #2E7D32);
    background: var(--color-primary-light, #2E7D3212);
}
.rl-btn-geral { padding: 0 13px; height: 34px; font-size: 12.5px; }

.rl-vazio, .rl-rodape {
    padding: 26px 14px;
    text-align: center;
    color: var(--color-text-mid, #777);
    font-size: 13px;
}
.rl-rodape { text-align: right; padding: 10px 2px 0; font-size: 12px; }
.rl-rodape code { font-size: 11.5px; }

/* ---------- Detalhe expandido ---------- */
.rl-detalhe > td { background: var(--color-bg-alt, #fbfbfb); padding: 16px 18px 20px; }
.rl-det-cab {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--color-text-mid, #555);
    margin-bottom: 8px;
}
.rl-det-quando { color: var(--color-text-mid, #777); }
.rl-nota {
    margin: 4px 0 10px;
    font-size: 12.5px;
    color: var(--color-text-mid, #666);
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.rl-det-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rl-det-tabela th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-mid, #888);
    padding: 6px 10px;
    border-bottom: 1px solid var(--color-border, #e6e6e6);
}
.rl-det-tabela td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border, #f0f0f0);
    vertical-align: top;
}
.rl-det-num { font-weight: 600; white-space: nowrap; }
.rl-docs { font-size: 11px; color: var(--color-text-mid, #888); margin-left: 8px; }
.rl-faltando code {
    display: inline-block;
    background: var(--cgt-erro-bg, #FDECEA);
    color: var(--cgt-erro-fg, #C62828);
    border-radius: 5px;
    padding: 1px 6px;
    margin: 2px 3px 2px 0;
    font-size: 11.5px;
}
.rl-completo { color: var(--cgt-ok-fg, #2E7D32); font-size: 12px; }
.rl-det-onde { white-space: nowrap; }
.rl-link { color: var(--cgt-link, #1565C0); text-decoration: none; font-weight: 600; }
.rl-link:hover { text-decoration: underline; }
.rl-sem-tela { color: var(--color-text-mid, #999); font-size: 11.5px; }

/* ---------- Meus pedidos ---------- */
/* A segunda metade da tela. Reusa `.rl-kpi`, `.rl-tabela` e `.rl-btn` — é a
   mesma tela, não um módulo novo pregado ao lado; só o que é próprio dela
   ganha regra aqui. */

/* A régua só existe quando as DUAS metades estão na tela, e quem vê as duas é
   o Comitê Gestor. Para quem vê uma só, uma linha no topo separaria a seção
   de nada. */
#rl-pecas:not([hidden]) ~ .rp-secao {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--color-border, #e6e6e6);
}
.rp-titulo {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
}
.rp-ordem { color: var(--color-text-mid, #999); font-size: 12px; width: 34px; }
.rp-valor { font-weight: 600; white-space: nowrap; }
/* O período são duas datas, e 26px estoura a caixa do KPI em telefone. */
.rp-kpi-periodo { font-size: 15px !important; line-height: 1.5; }

.rl-btn[disabled] {
    opacity: .45;
    cursor: default;
}
.rl-btn[disabled]:hover {
    border-color: var(--color-border, #ddd);
    color: inherit;
    background: var(--color-bg-card, #fff);
}

/* ---------- Peça para impressão ---------- */
/* Fora da impressão o container não existe visualmente. Ele fica no DOM para
   que o navegador imprima sem abrir janela nova (popup costuma ser bloqueado). */
#rl-impressao { display: none; }

@media print {
    /* Só a peça vai para o papel. topbar, sidebar, filtros e botões somem. */
    body.rl-imprimindo > *:not(#rl-impressao) { display: none !important; }
    body.rl-imprimindo #rl-impressao {
        display: block;
        color: #000;
        background: #fff;
        font-size: 10.5pt;
    }

    @page { size: A4 portrait; margin: 16mm 14mm; }

    .rl-imp-cab { border-bottom: 2px solid #2E7D32; padding-bottom: 8px; margin-bottom: 16px; }
    .rl-imp-cab h1 { font-size: 16pt; margin: 0 0 4px; color: #2E7D32; }
    .rl-imp-sub { font-size: 11pt; margin: 0 0 3px; font-weight: 600; }
    .rl-imp-meta { font-size: 8.5pt; color: #555; margin: 0; }

    .rl-imp-secao { margin-bottom: 18px; break-inside: auto; }
    .rl-imp-secao h2 {
        font-size: 12pt;
        margin: 14px 0 8px;
        padding-bottom: 3px;
        border-bottom: 1px solid #ccc;
        break-after: avoid;
    }
    .rl-imp-bloco { margin-bottom: 12px; break-inside: avoid; }
    .rl-imp-bloco h3 { font-size: 10pt; margin: 0 0 2px; font-family: Consolas, monospace; }
    .rl-imp-porque, .rl-imp-vazio { font-size: 8.5pt; color: #666; margin: 0 0 5px; }
    .rl-imp-vazio { font-style: italic; }

    .rl-imp-tabela { width: 100%; border-collapse: collapse; font-size: 8pt; }
    .rl-imp-tabela th, .rl-imp-tabela td {
        border: 1px solid #ccc;
        padding: 3px 5px;
        text-align: left;
        vertical-align: top;
        word-break: break-word;
    }
    .rl-imp-tabela th { background: #f0f0f0; font-weight: 600; }
    .rl-imp-tabela tr { break-inside: avoid; }

    .rl-imp-rodape {
        margin-top: 20px;
        padding-top: 6px;
        border-top: 1px solid #ccc;
        font-size: 8pt;
        color: #666;
    }

    /* ---------- Dossiê do pedido ----------
       Um pedido por página. O lote não é texto corrido: é um documento por
       pedido, e quem arquiva separa, quem anexa a um processo manda uma parte.
       Emendar dois pedidos na mesma folha inutilizaria as duas coisas. */
    #rl-impressao .pd-doc + .pd-doc { break-before: page; }

    .pd-cab { border-bottom: 2px solid #2E7D32; padding-bottom: 8px; margin-bottom: 14px; }
    .pd-cab-linha {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        font-size: 9pt;
    }
    .pd-codigo { font-family: Consolas, monospace; font-weight: 700; letter-spacing: .04em; }
    .pd-situacao { text-transform: uppercase; letter-spacing: .05em; color: #555; }
    .pd-cab h1 { font-size: 15pt; margin: 6px 0 4px; color: #2E7D32; }
    .pd-cab-sub { font-size: 10.5pt; margin: 0 0 3px; font-weight: 600; }
    .pd-cab-meta { font-size: 8.5pt; color: #555; margin: 0; }
    .pd-capa .pd-cab h1 { font-size: 18pt; }

    .pd-secao { margin-bottom: 12px; }
    .pd-secao h2 {
        font-size: 11pt;
        margin: 12px 0 6px;
        padding-bottom: 3px;
        border-bottom: 1px solid #ccc;
        break-after: avoid;
    }

    .pd-prosa { margin: 0 0 6px; break-inside: avoid; }
    .pd-prosa h3, .pd-h3 { font-size: 9pt; margin: 0 0 1px; color: #444; }
    .pd-prosa p { margin: 0; font-size: 9pt; white-space: pre-wrap; }

    /* Rótulo à esquerda, valor à direita: é a forma de uma ficha, e o que a
       conferência percorre é a coluna dos rótulos. */
    .pd-pares { width: 100%; border-collapse: collapse; font-size: 9pt; }
    .pd-pares th {
        text-align: left;
        width: 34%;
        font-weight: 600;
        color: #444;
        padding: 2px 8px 2px 0;
        vertical-align: top;
    }
    .pd-pares td { padding: 2px 0; vertical-align: top; overflow-wrap: anywhere; }
    .pd-pares tr { break-inside: avoid; }

    .pd-tabela { width: 100%; border-collapse: collapse; font-size: 8pt; }
    .pd-tabela th, .pd-tabela td {
        border: 1px solid #ccc;
        padding: 3px 5px;
        text-align: left;
        vertical-align: top;
        overflow-wrap: anywhere;
    }
    .pd-tabela th { background: #f0f0f0; font-weight: 600; }
    .pd-tabela tr { break-inside: avoid; }
    /* Link preto e sublinhado: no papel a cor não se lê, e no PDF o sublinhado
       é o que diz que ali há um clique. */
    .pd-tabela a { color: #000; text-decoration: underline; }
    .pd-tabela-campos th:first-child, .pd-tabela-campos td:first-child { width: 40%; }
    .pd-tabela-num th:last-child, .pd-tabela-num td:last-child {
        text-align: right;
        white-space: nowrap;
    }

    .pd-lista { margin: 2px 0 6px; padding-left: 16px; font-size: 9pt; }
    .pd-lista li { margin-bottom: 2px; break-inside: avoid; }
    .pd-nota { font-size: 8pt; color: #666; margin: 4px 0 0; }
    .pd-rodape {
        margin-top: 14px;
        padding-top: 5px;
        border-top: 1px solid #ccc;
        font-size: 7.5pt;
        color: #666;
    }
}

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
    .rl-main { padding: 16px 14px 30px; }
    .rl-tabela { font-size: 12.5px; }
    .rl-td-barra { min-width: 110px; }
    .rl-gerais { width: 100%; }
}

/* ---------- Entregas à CAPES: a razão ----------
   Eram cinco cartões do mesmo tamanho e mesma fonte. Três não diziam nada que
   a tela já não dissesse — "Peças previstas" é a contagem do rodapé, e
   "Completude" com "Campos faltando" são duas vistas do mesmo número. Os dois
   que tinham assunto ficavam afogados no meio deles.

   Três linhas, e a do meio carrega o qualificador: "2 vencidas, a mais antiga
   há 12 dias" é outra coisa que "2". Mesma gramática da razão do Orçamento. */
.rl-razao {
    margin: 0 0 18px; padding: 12px 16px 8px;
    border: 1px solid var(--color-border, #e3e3e3);
    border-radius: 9px;
    background: var(--color-bg-card, #fff);
}
.rl-razao[hidden] { display: none; }
.rl-razao-tit {
    margin: 0 0 4px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-mid, #6b6b6b);
}

/* A coluna do valor é a que faz o trabalho: alinhada à direita e com algarismo
   de largura fixa, ela põe "2" e "87%" na mesma régua de leitura. */
.rl-rz-linha {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) 5.5em;
    align-items: baseline; gap: 6px 16px;
    padding: 8px 0; font-size: 13.5px;
    color: var(--color-text-mid, #6b6b6b);
}
.rl-rz-linha + .rl-rz-linha { border-top: 1px solid var(--color-border-light, #f0f0f0); }
.rl-rz-rot {
    font-weight: 600; color: var(--color-text, #1a1a1a); white-space: nowrap;
}
.rl-rz-qual { font-size: 12.5px; min-width: 0; }
.rl-rz-val {
    text-align: right; font-weight: 600; font-size: 15px;
    color: var(--color-text, #1a1a1a);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* A única cor, e só na linha que pede alguém. O texto fica em tinta normal —
   o vermelho vai no ícone, que é objeto gráfico, e a palavra "vencida" carrega
   o sentido sem depender dele. */
.rl-rz-alerta .rl-rz-val { color: var(--color-danger, #C62828); }
.rl-rz-ic {
    font-size: 11px; margin-right: 6px;
    color: var(--color-danger, #C62828);
}

@media (max-width: 640px) {
    .rl-rz-linha { grid-template-columns: minmax(0, 1fr) 5.5em; }
    .rl-rz-qual  { grid-column: 1; grid-row: 2; }
    .rl-rz-val   { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}