/* ==========================================================================
   RELATÓRIO EM DESTAQUE — PÁGINA PORTAL DE TRANSPARÊNCIA (Plano 57.1)
   `templates/portal/_transparencia_destaque.html`, incluído em
   `templates/portal/transparencia.html` logo depois do cartão-título.
   ==========================================================================

   Desenho: variação B do protótipo 57.0 (escolhida pela Gestão de Mídias em
   2026-09-24) — um cartão escuro com o mesmo degradê do cartão-título e dos
   `doc-card` da página (`--iac-primary` → `--iac-secondary`), miniatura à
   esquerda e texto à direita; uma coluna só a partir de 820 px.

   Uma diferença deliberada em relação ao protótipo: o botão "Ver relatório
   ampliado" era branco sobre `#10b981` chapado, 2,5:1 — reprova no WCAG AA.
   Aqui ele usa o verde do padrão escuro do Painel (`#047857 → #065f46` com
   borda `#10b981`, o mesmo de `projeto-form.css`), que dá 5,48:1.

   Tudo sob `.relatorio-destaque` e `.relatorio-ampliado`: nenhuma regra
   solta, nenhum `!important`. O `h1..h6 { color: var(--iac-primary) }` do
   `<style>` da página perde para `.relatorio-destaque__titulo` pela
   especificidade (0,1,0 contra 0,0,1), sem depender de ordem.

   Contraste (WCAG 2.1 AA, >= 4,5:1), medido contra a ponta **clara** do
   degradê, `#0D3272`:
   - `#ffffff` (título) ......................................... 12,24:1
   - `#cfe0ff` (rótulo "Relatório em destaque") ................... 9,18:1
   - branco a 88% (resumo) ........................................ 9,78:1
   - branco a 78% (dica "Toque na imagem…") ....................... 8,04:1
   - `#eafff5` sobre o selo do período (branco 16% → `#345389`) ... 7,33:1
   - `#ffffff` sobre `#047857`/`#065f46` (Ver ampliado) ... 5,48:1 / 7,68:1
   - `#071D41` sobre o botão "Baixar PDF" (branco 92%) ........... 14,45:1
   Na ampliação (fundo `rgba(7,29,65,.96)`, ~`#112649`): branco 15,03:1,
   dica a 80% 10,96:1, controles translúcidos 12,50:1.

   Regras de tela pequena só dentro dos `@media` do fim (lição da PR 53.1).
   Prova: `portal/tests/test_relatorio_destaque.py`.
   ========================================================================== */

/* ───────────────────────── 1. O cartão ─────────────────────────────────── */
.relatorio-destaque {
    margin-bottom: 2.5rem;
    padding: 2rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--iac-primary) 0%, var(--iac-secondary) 100%);
    box-shadow: 0 14px 34px rgba(7, 29, 65, 0.16);
    color: #ffffff;
}

.relatorio-destaque__rotulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #cfe0ff;
}

.relatorio-destaque__rotulo .bi {
    font-size: 1rem;
    color: #6ee7b7;
}

.relatorio-destaque__corpo {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}

/* ───────────────────────── 2. Miniatura ────────────────────────────────
   A moldura branca é o próprio link (é ela que recebe o foco). A imagem fica
   numa caixa com a proporção de uma A4 deitada e `object-fit: contain`:
   qualquer relatório cabe inteiro, sem corte e sem deformar, e a caixa não
   pula de altura enquanto a imagem carrega. */
.relatorio-destaque__miniatura-coluna {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.relatorio-destaque__miniatura {
    position: relative;
    display: block;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.relatorio-destaque__miniatura img {
    display: block;
    width: 100%;
    aspect-ratio: 297 / 210;
    object-fit: contain;
    border-radius: 8px;
    background: #ffffff;
}

.relatorio-destaque__miniatura:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.relatorio-destaque__miniatura:focus-visible {
    outline: 3px solid #6ee7b7;
    outline-offset: 3px;
}

.relatorio-destaque__lupa {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(7, 29, 65, 0.86);
    color: #ffffff;
    font-size: 1rem;
    pointer-events: none;
}

.relatorio-destaque__dica {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
}

.relatorio-destaque__dica .bi {
    color: #8be8c9;
}

/* ───────────────────────── 3. Texto ────────────────────────────────────── */
.relatorio-destaque__texto {
    min-width: 0;
}

.relatorio-destaque__titulo {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.relatorio-destaque__periodo {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #eafff5;
}

.relatorio-destaque__resumo {
    margin: 0.75rem 0 1.1rem;
    font-size: 0.96rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    overflow-wrap: anywhere;
}

/* ───────────────────────── 4. Botões ───────────────────────────────────── */
.relatorio-destaque__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.relatorio-destaque__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.relatorio-destaque__botao:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.relatorio-destaque__botao--ampliar {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    border-color: #10b981;
    color: #ffffff;
}

.relatorio-destaque__botao--ampliar:hover,
.relatorio-destaque__botao--ampliar:focus-visible {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

.relatorio-destaque__botao--pdf {
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--iac-primary);
}

.relatorio-destaque__botao--pdf:hover,
.relatorio-destaque__botao--pdf:focus-visible {
    background-color: #ffffff;
    color: var(--iac-primary);
    transform: translateY(-1px);
}

/* ───────────────────────── 5. A ampliação (<dialog>) ───────────────────
   O `<dialog>` ocupa a tela inteira: barra com título e controles em cima,
   a imagem no meio. `display: flex` só com `[open]` — sem isso a regra
   venceria o `display: none` do navegador para o diálogo fechado.

   Ajustado à tela (padrão): a imagem cabe inteira (`max-width`/`max-height`
   100% da área). Aproximado (`.is-aproximado`, botão "Aproximar"): tamanho
   real, e a área rola nos dois eixos — é assim que se lê o relatório no
   celular. A área deixa de ser `flex` nesse modo porque um item centralizado
   maior que o contêiner fica com a parte de cima/esquerda fora do alcance da
   rolagem. */
.relatorio-ampliado {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(7, 29, 65, 0.96);
    color: #ffffff;
}

.relatorio-ampliado[open] {
    display: flex;
    flex-direction: column;
}

.relatorio-ampliado::backdrop {
    background: rgba(2, 8, 23, 0.6);
}

.relatorio-ampliado__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.relatorio-ampliado__titulo {
    flex: 1 1 240px;
    min-width: 0;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
}

.relatorio-ampliado__controles {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.relatorio-ampliado__controle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.relatorio-ampliado__controle:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.relatorio-ampliado__controle--pdf {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    border-color: #10b981;
}

.relatorio-ampliado__fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.1rem;
    color: #ffffff;
    cursor: pointer;
}

.relatorio-ampliado__fechar:hover {
    background: rgba(255, 255, 255, 0.26);
}

.relatorio-ampliado__controle:focus-visible,
.relatorio-ampliado__fechar:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.relatorio-ampliado__area {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0.5rem 1rem 0.75rem;
    overflow: auto;
    overscroll-behavior: contain;
}

.relatorio-ampliado__imagem {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    cursor: zoom-in;
}

.relatorio-ampliado.is-aproximado .relatorio-ampliado__area {
    display: block;
}

.relatorio-ampliado.is-aproximado .relatorio-ampliado__imagem {
    max-width: none;
    max-height: none;
    margin: 0 auto;
    cursor: auto;
}

.relatorio-ampliado__dica {
    margin: 0;
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}

/* A página por trás não rola enquanto a ampliação está aberta. */
body.relatorio-ampliado-aberto {
    overflow: hidden;
}

/* ───────────────────────── 6. Pontos de corte ──────────────────────────── */
/* Uma coluna a partir de 820 px, como no protótipo. No tablet a miniatura
   de largura cheia passaria de 600 px e empurraria o título para a segunda
   dobra; o teto de 520 px a mantém como indício visual (a leitura é na
   ampliação). No celular (< 520 px de coluna) o teto não chega a valer. */
@media (max-width: 820px) {
    .relatorio-destaque__corpo {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .relatorio-destaque__miniatura-coluna {
        max-width: 520px;
    }
}

@media (max-width: 576px) {
    .relatorio-destaque {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .relatorio-destaque__titulo {
        font-size: 1.2rem;
    }

    /* Alvo de toque de 44 px (WCAG 2.5.5) e largura cheia quando quebram. */
    .relatorio-destaque__botao {
        flex: 1 1 auto;
        min-height: 44px;
    }

    .relatorio-ampliado__barra {
        padding: 0.6rem 0.75rem;
    }

    .relatorio-ampliado__area {
        padding: 0.25rem 0.5rem 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .relatorio-destaque__miniatura,
    .relatorio-destaque__botao {
        transition: none;
    }

    .relatorio-destaque__miniatura:hover,
    .relatorio-destaque__botao--ampliar:hover,
    .relatorio-destaque__botao--ampliar:focus-visible,
    .relatorio-destaque__botao--pdf:hover,
    .relatorio-destaque__botao--pdf:focus-visible {
        transform: none;
    }
}