/*=====================================================
  RELATÓRIO COMERCIAL MENSAL (Fase beta, 2026-09-07)

  Modal aberto a partir do botão "Relatório Mensal" no Dashboard (ver
  .dashboard-relatorio-barra em css/dashboard.css). Reaproveita
  .modal/.modal-overlay/.btn-primary/.btn-secondary (comissoes.css) e
  .card-chip/.comparativo-* (dashboard.css) — este arquivo só
  acrescenta o que é específico do relatório: o modal largo, a grade
  de indicadores, o destaque de "maior venda", o mix por modalidade,
  o bloco do Funil (situação atual, não histórico do mês) e a folha
  de impressão (window.print(), sem biblioteca nova — ver js/relatorio.js).

  Validado antes num protótipo isolado (relatorio-preview/, fora do
  projeto), com dados fictícios, aprovado pelo usuário — mesmo
  processo já usado em login-preview/agenda-preview/etc.
=====================================================*/

/* Modal largo (900px do .modal padrão é apertado pra uma grade de 5
   indicadores lado a lado) */
.modal-relatorio{
    width:1040px;
}

/* =====================================================
   CABEÇALHO DO MODAL (redesenho 2026-09-19 — validado antes num
   protótipo isolado, relatorio-preview/, fora do projeto, com dados
   fictícios, aprovado pelo usuário). Continua sendo .modal-header por
   baixo (views/dashboard.html) — só a pele visual muda aqui, pra não
   mexer no mecanismo já testado de "cabeçalho/rodapé fixos, corpo rola"
   do .modal (css/comissoes.css).
===================================================== */

.relatorio-cabecalho{
    background:linear-gradient(115deg, #1c2028 0%, #1c2028 45%, #3a1418 78%, #5a1018 100%);
    padding:14px 28px;
    border-bottom:none;
}

.relatorio-cabecalho-conteudo{
    display:flex;
    align-items:center;
    gap:22px;
    flex:1;
    min-width:0;
}

.relatorio-cabecalho-logo{
    height:64px;
    flex-shrink:0;
}

.relatorio-cabecalho-divisor{
    width:1px;
    align-self:stretch;
    background:rgba(255,255,255,.15);
    flex-shrink:0;
}

.relatorio-cabecalho-titulo{
    flex-shrink:0;
}

.relatorio-cabecalho-titulo .rotulo{
    display:block;
    font-size:10px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#d8a8ac;
    margin-bottom:2px;
}

.relatorio-cabecalho-titulo h2{
    margin:0 0 2px;
    font-size:19px;
    font-weight:700;
    color:#fff;
    white-space:nowrap;
}

.relatorio-cabecalho-titulo p{
    margin:0;
    font-size:11.5px;
    color:#b8bec8;
    white-space:nowrap;
}

.relatorio-cabecalho-info{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.relatorio-cabecalho-info-icone{
    width:32px;
    height:32px;
    border-radius:9px;
    background:rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.relatorio-cabecalho-info-icone i{
    width:16px;
    height:16px;
    color:#fff;
}

.relatorio-cabecalho-info .rotulo{
    display:block;
    font-size:10px;
    color:#b8bec8;
    margin-bottom:1px;
}

.relatorio-cabecalho-info strong{
    display:block;
    font-size:13px;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
}

.relatorio-cabecalho-info small{
    display:block;
    font-size:11px;
    color:#b8bec8;
    margin-top:1px;
    white-space:nowrap;
}

/* Botão de fechar em cima do degradê — o cinza claro padrão
   (.modal-close, css/comissoes.css) ficava deslocado ali; só troca a
   cor, o tamanho/formato continuam os mesmos de qualquer outro modal. */
.modal-relatorio .modal-close{
    background:rgba(255,255,255,.1);
    color:#fff;
    flex-shrink:0;
}

.modal-relatorio .modal-close:hover{
    background:rgba(255,255,255,.18);
}

/* Nunca aparece na tela — existe só como fonte de texto pronta
   ("— Setembro/2026") pra relatorioMontarAreaImpressao()
   (js/relatorio.js) montar o cabeçalho da folha impressa, sem
   duplicar a formatação de mês/ano. */
.relatorio-periodo-texto-impressao{
    display:none;
}

/* ---- Seletor de mês/ano (linha discreta, logo abaixo do cabeçalho) ---- */
.relatorio-seletor-periodo{
    margin-bottom:20px;
}

.relatorio-periodo-seletor{
    display:flex;
    align-items:center;
    gap:8px;
}

/* =====================================================
   CABEÇALHO/RODAPÉ/MARCA-D'ÁGUA INSTITUCIONAIS DA FOLHA IMPRESSA
   (2026-09-07, pedido do usuário: o PDF deve parecer um documento
   oficial do GCA, não uma impressão de tela) — só existem dentro de
   #areaImpressaoRelatorio (montados por relatorioMontarAreaImpressao(),
   js/relatorio.js), nunca aparecem na versão em tela do modal. Regras
   base aqui fora do @media print só porque display:none precisa valer
   também fora da impressão (o container inteiro já é display:none por
   padrão, mas isso garante que nada "vaza" se algum dia for inspecionado
   fora do fluxo de impressão).
===================================================== */

/* Faixa escura com a logo — fundo pensado especificamente pra isso:
   os dois arquivos de logo existentes (gca-logo.webp) têm a linha
   "GESTÃO DE CARTEIRA" num cinza muito claro, ilegível em fundo
   branco de papel — foram desenhados pra fundo escuro (uso original:
   sidebar/login). Uma faixa escura no cabeçalho resolve a
   legibilidade E entrega "preto/cinza + bordô" pedido, sem precisar
   de nenhuma logo nova (reaproveita o arquivo exatamente como é). */
.relatorio-impressao-cabecalho{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:#1a1a2e;
    border-bottom:4px solid #8B1E3F;
    border-radius:6px;
    padding:16px 22px;
    margin-bottom:26px;
}

.relatorio-impressao-logo{
    height:42px;
    width:auto;
    flex:0 0 auto;
}

.relatorio-impressao-titulo-bloco{
    flex:1;
    min-width:0;
}

.relatorio-impressao-titulo-bloco h2{
    margin:0;
    font-size:19px;
    color:#fff;
    letter-spacing:.01em;
}

.relatorio-impressao-titulo-bloco p{
    margin:3px 0 0;
    font-size:12px;
    color:#c9c9d6;
}

.relatorio-impressao-gerado-em{
    font-size:10.5px;
    color:#9c9ca8;
    white-space:nowrap;
    flex:0 0 auto;
}

/* Marca-d'água — mesma logo (nenhum arquivo novo), extremamente
   discreta (opacidade quase nula) e girada, atrás do conteúdo
   (z-index negativo). position:fixed pra repetir em toda página
   impressa, não só na primeira (mesma técnica do rodapé abaixo —
   testado em Chrome, elemento fixed é redesenhado por página). */
.relatorio-impressao-marca-dagua{
    display:none;
}

/* Rodapé institucional, sem número de página — decisão tomada com o
   usuário (2026-09-07): Chrome não implementa contador de página
   (counter(page)) em @page no motor de impressão, só bibliotecas de
   PDF dedicadas têm isso, e ficou fora do escopo. position:fixed
   repete em toda página, com marca + data de geração. */
.relatorio-impressao-rodape{
    display:none;
}

/* ---- Seções ---- */
.relatorio-secao{
    margin-bottom:28px;
}

.relatorio-secao:last-child{
    margin-bottom:0;
}

.relatorio-secao-titulo{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:700;
    color:var(--gca-texto-principal);
    margin-bottom:12px;
}

.relatorio-secao-titulo i{
    width:16px;
    height:16px;
    color:#8B1E3F;
}

[data-theme="dark-premium"] .relatorio-secao-titulo i{
    color:#F2495C;
}

.relatorio-secao-selo{
    font-size:11.5px;
    font-weight:500;
    text-transform:none;
    letter-spacing:normal;
    color:var(--gca-texto-terciario);
    margin-left:auto;
}

/* ---- Resumo do mês (indicadores) ---- */
.relatorio-indicadores-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.relatorio-indicadores-grid--2{
    grid-template-columns:repeat(2,1fr);
}

/* "screen and" (achado na auditoria, 2026-09-19) — sem isso, esta
   media query também disparava na IMPRESSÃO (uma folha A4 tem menos de
   900px de largura em CSS px), colapsando os cards pra 1 coluna
   larga em vez das 2/3 lado a lado — nunca foi essa a intenção, é só
   responsivo pra celular. Mesmo cuidado nas outras duas ocorrências
   deste arquivo (linha-dupla/funil-grid, mais abaixo). */
@media screen and (max-width:900px){
    .relatorio-indicadores-grid{ grid-template-columns:repeat(2,1fr); }
    .relatorio-indicadores-grid--2{ grid-template-columns:1fr; }
}

.relatorio-indicador{
    background:var(--gca-fundo-card-solido);
    border:1px solid var(--gca-borda);
    border-radius:12px;
    padding:14px 16px;
}

.relatorio-indicador span{
    font-size:11px;
    color:var(--gca-texto-terciario);
    display:block;
    margin-bottom:6px;
}

.relatorio-indicador h3{
    margin:0 0 6px;
    font-size:19px;
    color:var(--gca-texto-principal);
}

/* ---- Meta do mês (2026-09-19 — ganhou seção própria, é a métrica
   mais "emocional" do relatório, merece mais presença que um card
   igual aos outros) ---- */
.relatorio-meta-card{
    background:linear-gradient(90deg, rgba(139,0,0,.07), var(--gca-fundo-card-solido) 60%);
    border:1px solid rgba(139,0,0,.2);
    border-radius:12px;
    padding:16px 18px;
}

[data-theme="dark-premium"] .relatorio-meta-card{
    background:linear-gradient(90deg, rgba(230,57,80,.12), var(--gca-fundo-card-solido) 60%);
    border-color:rgba(230,57,80,.3);
}

.relatorio-meta-topo{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:10px;
}

.relatorio-meta-topo strong{
    font-size:13.5px;
    color:var(--gca-texto-principal);
}

.relatorio-meta-topo span{
    font-size:20px;
    font-weight:700;
    color:#8B0000;
}

[data-theme="dark-premium"] .relatorio-meta-topo span{
    color:#F2495C;
}

.relatorio-meta-barra-fundo{
    height:10px;
    border-radius:6px;
    background:var(--gca-fundo-elevado);
    overflow:hidden;
}

.relatorio-meta-barra-fundo > div{
    height:100%;
    border-radius:6px;
    background:#8B0000;
    transition:width .3s ease;
}

[data-theme="dark-premium"] .relatorio-meta-barra-fundo > div{
    background:#E63950;
}

.relatorio-meta-legenda{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-size:12px;
    color:var(--gca-texto-terciario);
}

/* ---- Evolução mensal (gráfico) ---- */
.relatorio-grafico-wrap{
    position:relative;
    height:220px;
}

/* ---- Maior venda + Mix por modalidade, lado a lado ---- */
.relatorio-linha-dupla{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

@media screen and (max-width:900px){
    .relatorio-linha-dupla{ grid-template-columns:1fr; }
}

.relatorio-destaque-venda{
    background:var(--gca-fundo-card-solido);
    border:1px solid var(--gca-borda);
    border-radius:12px;
    padding:16px 18px;
    display:flex;
    align-items:center;
    gap:14px;
}

.relatorio-destaque-venda .card-icon{
    width:46px;
    height:46px;
    border-radius:12px;
    background:#eab308;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}

.relatorio-destaque-venda .card-icon i{
    color:#fff;
    width:22px;
    height:22px;
}

.relatorio-destaque-venda-texto span{
    font-size:12px;
    color:var(--gca-texto-terciario);
    display:block;
}

.relatorio-destaque-venda-texto h3{
    margin:2px 0 4px;
    font-size:18px;
    color:var(--gca-texto-principal);
}

.relatorio-destaque-venda-texto small{
    font-size:12.5px;
    color:var(--gca-texto-secundario);
}

.relatorio-mix{
    background:var(--gca-fundo-card-solido);
    border:1px solid var(--gca-borda);
    border-radius:12px;
    padding:16px 18px;
}

.relatorio-mix-linha{
    margin-bottom:10px;
}

.relatorio-mix-linha:last-child{
    margin-bottom:0;
}

.relatorio-mix-linha-topo{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    margin-bottom:5px;
}

.relatorio-mix-linha-topo strong{
    color:var(--gca-texto-principal);
}

.relatorio-mix-linha-topo span{
    color:var(--gca-texto-terciario);
}

.relatorio-mix-barra-fundo{
    background:var(--gca-fundo-elevado);
    border-radius:6px;
    height:8px;
    overflow:hidden;
}

.relatorio-mix-barra-fundo div{
    height:100%;
    border-radius:6px;
}

.relatorio-mix-imoveis div{ background:#2563eb; }
.relatorio-mix-veiculos div{ background:#ea580c; }

/* ---- Comparativo com o mês anterior (tabela) ---- */
.relatorio-tabela-comparativo{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.relatorio-tabela-comparativo th,
.relatorio-tabela-comparativo td{
    padding:10px 12px;
    text-align:left;
    border-bottom:1px solid var(--gca-borda);
}

.relatorio-tabela-comparativo th{
    color:var(--gca-texto-terciario);
    font-weight:600;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.02em;
}

.relatorio-tabela-comparativo td{
    color:var(--gca-texto-principal);
}

.relatorio-tabela-comparativo tr:last-child td{
    border-bottom:none;
}

/* Linha de total — só existe na tabela de Detalhamento das vendas
   (relatorioMontarTabelaVendas, js/relatorio.js); a de Comparativo não
   tem essa linha, então esta regra nunca afeta ela. */
.relatorio-tabela-total td{
    border-top:2px solid var(--gca-texto-principal);
    font-weight:700;
    color:var(--gca-texto-principal);
    padding-top:12px;
}

/* ---- Funil — situação atual (visualmente separado do resto, que é
   fechamento do mês selecionado; isto é sempre "agora", ver decisão
   registrada no changelog: conversão/oportunidades abertas nunca
   representam o histórico do mês escolhido). ---- */
.relatorio-funil-atual{
    background:rgba(124,58,237,.06);
    border:1px dashed rgba(124,58,237,.4);
    border-radius:12px;
    padding:16px 18px;
}

[data-theme="dark-premium"] .relatorio-funil-atual{
    background:rgba(124,58,237,.1);
}

.relatorio-funil-atual-selo{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#7c3aed;
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:3px 10px;
    border-radius:20px;
    margin-bottom:12px;
}

.relatorio-funil-atual-selo i{
    width:12px;
    height:12px;
}

.relatorio-funil-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

@media screen and (max-width:900px){
    .relatorio-funil-grid{ grid-template-columns:repeat(2,1fr); }
}

.relatorio-funil-item span{
    font-size:12px;
    color:var(--gca-texto-terciario);
    display:block;
    margin-bottom:4px;
}

.relatorio-funil-item h3{
    margin:0;
    font-size:18px;
    color:var(--gca-texto-principal);
}

/* =====================================================
   IMPRESSÃO / SALVAR PDF — histórico de 3 tentativas presas ao modal
   (removidas daqui, ver commits anteriores se precisar do relato
   completo): overflow do modal, depois paleta clara, depois liberar
   #app/.content/#view. Nenhuma resolveu de vez porque todas mexiam
   DENTRO da árvore do modal/Dashboard — e o Dashboard real (cards,
   gráficos, tabelas) só de ESTAR ali, mesmo invisível
   (visibility:hidden ainda ocupa espaço no layout), empurrava o
   relatório pra página 5+ quando #view virava fluxo normal. Achado
   testando o Print Preview de verdade (2026-09-07): o relatório saía
   depois de várias páginas de Dashboard "fantasma", e o navegador
   ainda escolhia Paisagem sozinho, sem `@page` explícito.

   Arquitetura nova, estrutural (pedido do usuário): um container de
   impressão PRÓPRIO (#areaImpressaoRelatorio, ver index.html — fica
   FORA de #app de propósito), que só existe pra impressão. Em vez de
   tentar esconder o Dashboard inteiro por baixo (visibility, que não
   libera espaço), a impressão agora esconde #app INTEIRO
   (display:none — remove de vez, sem sobrar altura nenhuma) e mostra
   só esse container paralelo, populado por
   relatorioMontarAreaImpressao() (js/relatorio.js) com uma CÓPIA das
   seções já renderizadas do modal (mesmo dado, sem recalcular nada)
   no instante de clicar "Imprimir / Salvar PDF". Como ele nunca fez
   parte de #app/#view, nunca herda altura/overflow/scroll de nada —
   é só um `<div>` solto no body, com fluxo 100% normal. */
#areaImpressaoRelatorio{
    display:none;
}

@media print{

    /* A4 retrato explícito (sem isso o Chrome já escolheu Paisagem
       sozinho). Margem pequena — cabeçalho/rodapé agora ocupam espaço
       próprio via thead/tfoot, não via margem. */
    @page{
        size:A4 portrait;
        margin:12mm;
    }

    /* html/body também têm height:100% + body com overflow:hidden
       (css/style.css) — mesma armadilha de altura fixa que já mordeu
       em #view, agora um nível acima. Sem isso, um relatório com mais
       de 1 página de conteúdo fica cortado no tamanho de UMA janela,
       de novo. Seguro liberar sem condição nenhuma: só ativa dentro
       de @media print, e nenhuma outra tela do sistema imprime hoje. */
    html,
    body{
        height:auto !important;
        overflow:visible !important;
    }

    /* O único display:none que importa: remove #app inteiro (sidebar,
       header, o Dashboard todo, o modal) e qualquer outro filho direto
       do body (ex.: #modalNotificacaoCompleta) — só sobra o container
       de impressão, sem NADA antes dele empurrando o conteúdo pra
       páginas seguintes. */
    body > *:not(#areaImpressaoRelatorio){
        display:none !important;
    }

    #areaImpressaoRelatorio{
        display:block !important;
        background:#fff;
        color:#1a1a2e;
    }

    #areaImpressaoRelatorio .relatorio-impressao-folha{
        width:100%;
        border-collapse:collapse;
    }

    #areaImpressaoRelatorio .relatorio-impressao-folha > thead > tr > td,
    #areaImpressaoRelatorio .relatorio-impressao-folha > tbody > tr > td,
    #areaImpressaoRelatorio .relatorio-impressao-folha > tfoot > tr > td{
        border:0;
        padding:0;
        vertical-align:top;
    }

    #areaImpressaoRelatorio .relatorio-impressao-folha > thead > tr > td{ padding-bottom:16px; }
    #areaImpressaoRelatorio .relatorio-impressao-folha > tfoot > tr > td{ padding-top:16px; }

    /* Paleta clara — mesmo raciocínio de antes: Dark Premium usa texto
       claro pensado pra fundo escuro; o Chrome não imprime cor de
       fundo por padrão ("Imprimir gráficos de fundo" desligado), e um
       relatório impresso deve ser sempre um documento claro/
       profissional, nunca uma captura do tema escuro — independente
       de qual tema estiver ativo na tela. */
    #areaImpressaoRelatorio h2,
    #areaImpressaoRelatorio h3,
    #areaImpressaoRelatorio p,
    #areaImpressaoRelatorio span,
    #areaImpressaoRelatorio small,
    #areaImpressaoRelatorio strong,
    #areaImpressaoRelatorio td,
    #areaImpressaoRelatorio th,
    #areaImpressaoRelatorio .relatorio-secao-titulo{
        color:#1a1a2e !important;
    }

    #areaImpressaoRelatorio .relatorio-tabela-comparativo td,
    #areaImpressaoRelatorio .relatorio-tabela-comparativo th{
        background:#fff !important;
        border-color:#ddd !important;
    }

    /* Identidade GCA (2026-09-10, pedido do usuário) — cada bloco do
       relatório ganha um fundo cinza levíssimo (separa do papel, tinta
       desprezível). print-color-adjust:exact pro cinza sair mesmo com
       "gráficos de fundo" desligado. A barra de acento bordô à esquerda
       saiu (2026-09-19, pedido do usuário) — com o cabeçalho novo já
       carregando a identidade bordô, a barra em CADA card ficava pesada
       repetida tantas vezes; cards agora batem com o visual mais limpo
       que já tinham em tela. */
    #areaImpressaoRelatorio .relatorio-indicador,
    #areaImpressaoRelatorio .relatorio-destaque-venda,
    #areaImpressaoRelatorio .relatorio-mix,
    #areaImpressaoRelatorio .relatorio-meta-card,
    #areaImpressaoRelatorio .relatorio-funil-atual{
        background:#f7f7f8 !important;
        border:1px solid #e3e3e6 !important;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

    /* Percentual da meta e a barra — igual ao card do troféu/mix, a
       regra genérica de span acima ("todo span vira #1a1a2e") pegaria
       o percentual junto; aqui devolve o bordô institucional. */
    #areaImpressaoRelatorio .relatorio-meta-topo span{
        color:#8B1E3F !important;
    }

    #areaImpressaoRelatorio .relatorio-meta-barra-fundo > div{
        background:#8B1E3F !important;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

    /* Gráfico de evolução — vira <img> antes de imprimir (ver
       relatorioMontarAreaImpressao, js/relatorio.js — <canvas> clonado
       não carrega o desenho). Largura total da coluna, sem esticar
       além do tamanho real renderizado. */
    #areaImpressaoRelatorio .relatorio-impressao-grafico{
        width:100%;
        height:auto;
        break-inside:avoid;
    }

    #areaImpressaoRelatorio .relatorio-indicador span,
    #areaImpressaoRelatorio .relatorio-mix-linha-topo span,
    #areaImpressaoRelatorio .relatorio-destaque-venda-texto span,
    #areaImpressaoRelatorio .relatorio-destaque-venda-texto small,
    #areaImpressaoRelatorio .relatorio-tabela-comparativo th{
        color:#666 !important;
    }

    #areaImpressaoRelatorio .relatorio-secao-titulo i{
        color:#8B1E3F !important;
    }

    /* Selo "Situação atual" do Funil — era roxo (#7c3aed), destoava da
       paleta GCA (bordô/carvão). Vira bordô. Já está na lista
       print-color-adjust:exact mais abaixo. */
    #areaImpressaoRelatorio .relatorio-funil-atual-selo{
        background:#8B1E3F !important;
    }

    /* Ícone do troféu (Maior venda) — era amarelo (#eab308), vira
       bordô pra alinhar 100% com a identidade. */
    #areaImpressaoRelatorio .relatorio-destaque-venda .card-icon{
        background:#8B1E3F !important;
    }

    /* O próprio selo "Situação atual" é um <span> — a regra genérica
       de "todo span vira #1a1a2e" logo acima o pegava também, virando
       texto escuro sobre o roxo (contraste ruim). 2 classes = mais
       específico, então essa vence sem precisar reordenar nada. Mesma
       lógica pro cabeçalho institucional: fundo escuro, precisa do
       texto claro de volta (o rodapé é fundo BRANCO, trata à parte,
       mais abaixo — não entra aqui). */
    #areaImpressaoRelatorio .relatorio-funil-atual-selo,
    #areaImpressaoRelatorio .relatorio-funil-atual-selo *,
    #areaImpressaoRelatorio .relatorio-impressao-cabecalho,
    #areaImpressaoRelatorio .relatorio-impressao-cabecalho *{
        color:#fff !important;
    }

    /* Selos/barras com cor própria (comparativo positivo/negativo,
       ícone da maior venda, mix por modalidade, cabeçalho institucional)
       — precisam do "imprime exatamente essa cor" pra sobreviver ao
       "sem gráficos de fundo" do navegador; sem isso saem cinza/branco
       sem cor nenhuma — no caso do cabeçalho, o texto branco ficaria
       sobre fundo TAMBÉM branco (a mesma armadilha que já mordeu 2x
       antes, ver histórico deste arquivo). */
    #areaImpressaoRelatorio .comparativo-positivo,
    #areaImpressaoRelatorio .comparativo-negativo,
    #areaImpressaoRelatorio .comparativo-neutro,
    #areaImpressaoRelatorio .relatorio-destaque-venda .card-icon,
    #areaImpressaoRelatorio .relatorio-funil-atual-selo,
    #areaImpressaoRelatorio .relatorio-mix-barra-fundo div,
    #areaImpressaoRelatorio .relatorio-impressao-cabecalho{
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

    #areaImpressaoRelatorio .comparativo-positivo{ background:#dcfce7 !important; color:#15803d !important; }
    #areaImpressaoRelatorio .comparativo-negativo{ background:#fee2e2 !important; color:#b91c1c !important; }
    #areaImpressaoRelatorio .comparativo-neutro{ background:#f0f0f0 !important; color:#666 !important; }

    /* Cabeçalho: fundo/borda mantidos exatamente como definidos fora
       do @media print (a regra acima já força a cor a imprimir) — só
       o texto secundário ("Gerado em") precisa de um cinza-claro
       específico, não o branco puro do resto do cabeçalho. */
    #areaImpressaoRelatorio .relatorio-impressao-titulo-bloco p{
        color:#c9c9d6 !important;
    }

    #areaImpressaoRelatorio .relatorio-impressao-gerado-em{
        color:#9c9ca8 !important;
    }

    /* Títulos de seção — versalete + espaçamento (tipografia de
       relatório) e agora TODO o texto em bordô (antes só o ícone),
       com filete bordô embaixo ecoando a borda do cabeçalho. */
    #areaImpressaoRelatorio .relatorio-secao-titulo{
        text-transform:uppercase;
        letter-spacing:.06em;
        font-size:12.5px;
        padding-bottom:6px;
        border-bottom:2px solid #8B1E3F;
        color:#8B1E3F !important;
    }

    #areaImpressaoRelatorio .relatorio-impressao-cabecalho{
        margin:0;
        border-radius:0;
        padding:11px 20px;
    }

    #areaImpressaoRelatorio .relatorio-impressao-logo{
        height:34px;
    }

    /* Marca-d'água — fixa (repete em toda página impressa), atrás do
       conteúdo, quase imperceptível. Recortada só no monograma "G" da
       logo (object-fit/position sobre o mesmo arquivo — nenhum asset
       novo), fica mais "carimbo oficial" que a logo inteira girada. */
    #areaImpressaoRelatorio .relatorio-impressao-marca-dagua{
        display:block !important;
        position:fixed;
        top:50%;
        left:50%;
        width:150px;
        height:210px;
        object-fit:cover;
        object-position:1% 16%;
        transform:translate(-50%,-50%) rotate(-22deg);
        opacity:.04;
        z-index:-1;
    }

    #areaImpressaoRelatorio .relatorio-impressao-rodape{
        display:flex !important;
        justify-content:space-between;
        align-items:center;
        padding-top:8px;
        border-top:2px solid #8B1E3F;
        font-size:9.5px;
    }

    #areaImpressaoRelatorio .relatorio-impressao-rodape,
    #areaImpressaoRelatorio .relatorio-impressao-rodape *{
        color:#999 !important;
    }

    #areaImpressaoRelatorio .relatorio-indicadores-grid,
    #areaImpressaoRelatorio .relatorio-linha-dupla,
    #areaImpressaoRelatorio .relatorio-funil-grid{
        break-inside:avoid;
    }

    /* Cada seção do relatório cabe folgada numa página A4 (Resumo,
       Destaque+Mix, Comparativo, Funil) — mantê-las inteiras evita
       linha/card partido na virada de página e evita que o fim de uma
       seção caia atrás do rodapé fixo. Se não couber no que resta da
       página, a seção inteira vai pra próxima (um pouco de espaço em
       branco no fim da página é aceitável num relatório). */
    #areaImpressaoRelatorio .relatorio-secao{
        break-inside:avoid;
    }

    /* Reforço, caso alguma seção cresça além de uma página no futuro:
       a tabela inteira e cada linha nunca devem partir ao meio (bug
       reportado pelo usuário). break-inside em <table>/<tr> é
       suportado no Chrome, o único motor de impressão desta feature. */
    #areaImpressaoRelatorio .relatorio-tabela-comparativo,
    #areaImpressaoRelatorio .relatorio-tabela-comparativo tr{
        break-inside:avoid;
    }

}


/* ===========================
   BLOQUEIO DE PLANO (2026-09-18, redesenhado 2026-09-19)
   Modal pequeno (modalRelatorioBloqueado, views/dashboard.html) aberto
   no lugar do modal de verdade pra quem não tem assinaturaTemAcessoAdvanced()
   — mesmo layout do bloqueio de página inteira da Agenda (pedido do
   usuário: padronizar os dois), reaproveitando as classes .bloqueio-
   plano-oferta*/-atual/-acoes/-rodape/-destaque/-icone/-cadeado de
   css/agenda.css. Só o que é específico de estar DENTRO de um .modal
   (em vez de ocupar a tela toda) mora aqui: a borda de destaque no
   próprio .modal e o botão de fechar flutuante.
=========================== */

.bloqueio-plano-modal{
    border:1px solid rgba(139,0,0,.35);
    box-shadow:0 0 0 1px rgba(139,0,0,.12), 0 20px 60px rgba(0,0,0,.25);
    position:relative;
}

.bloqueio-plano-modal-fechar{
    position:absolute;
    top:14px;
    right:14px;
    z-index:1;
}

/* max-height/overflow-y (achado na auditoria, 2026-09-19) — .modal
   (css/comissoes.css) tem overflow:hidden e max-height:90vh; sem isto,
   em tela baixa (celular deitado, notebook pequeno) o conteúdo de mais
   embaixo (botões, rodapé) ficaria cortado e inacessível, sem como
   rolar até ele — mesmo cuidado já aplicado no card cheio da Agenda
   (.bloqueio-plano-card, css/agenda.css). */
.bloqueio-plano-modal-conteudo{
    padding:36px;
    text-align:center;
    max-height:90vh;
    overflow-y:auto;
}

[data-theme="dark-premium"] .bloqueio-plano-modal{
    border-color:rgba(230,57,80,.4);
    box-shadow:0 0 0 1px rgba(230,57,80,.15), 0 20px 60px rgba(0,0,0,.25);
}