/* =========================================================
   PORTAL COPA 2026 — Print White Mode
   REGRA: fundo branco + texto preto em TUDO
   EXCEÇÃO: apenas <img> mantém cores originais
   ========================================================= */

@media print {

    /* -------------------------------------------------------
       PASSO 1 — Override das variáveis CSS
       Garante que todos os var(--copa-*) resolvam para
       branco/cinza/preto antes das demais regras
       ------------------------------------------------------- */
    :root {
        --copa-darker:      #ffffff !important;
        --copa-dark:        #f4f6f9 !important;
        --copa-card:        #f4f6f9 !important;
        --copa-card-border: #cccccc !important;
        --copa-white:       #111111 !important;
        --copa-light:       #eeeeee !important;
        --copa-gray:        #333333 !important;
        --copa-gray-light:  #555555 !important;
        --copa-gold:        #333333 !important;
        --copa-red:         #cc0000 !important;
        --copa-blue:        #0044aa !important;
        --copa-green:       #007700 !important;
    }

    /* -------------------------------------------------------
       PASSO 2 — Regra nuclear: TODOS os elementos
       Fundo transparente (herda branco do body) + texto preto
       ------------------------------------------------------- */
    *,
    *::before,
    *::after {
        background-color:   transparent !important;
        color:              #111111 !important;
        border-color:       #cccccc !important;
        text-shadow:        none !important;
        box-shadow:         none !important;
        -webkit-text-fill-color: #111111 !important;
    }

    /* -------------------------------------------------------
       PASSO 3 — html e body: fundo branco base
       ------------------------------------------------------- */
    html,
    body {
        background: #ffffff !important;
        color: #111111 !important;
    }

    /* -------------------------------------------------------
       PASSO 4 — Cards: leve cinza para separar visualmente
       ------------------------------------------------------- */
    [class*="-card"],
    [class*="card-"],
    .curiosity-card,
    .tip-card,
    .glossary-entry,
    .question-card,
    .host-card,
    .match-row,
    .song-card,
    .hino-card,
    .selecao-card,
    .record-card {
        background: #f4f6f9 !important;
        border: 1px solid #cccccc !important;
    }

    /* -------------------------------------------------------
       PASSO 4b — Cartinhas dos jogos interativos: fundo BRANCO
       (card-back, card-front, card-inner são exclusivos dos
       jogos de memória — portanto branco puro, sem cinza)
       ------------------------------------------------------- */
    .card-back,
    .card-front,
    .card-inner,
    .memory-card,
    .card-face,
    .card.flipped .card-back,
    .card.matched .card-back {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    /* -------------------------------------------------------
       PASSO 5 — IMAGENS: mantém cores e não recebe fundo
       ------------------------------------------------------- */
    img {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
        background: transparent !important;
        background-color: transparent !important;
        /* remove forçagem de cor no img */
        color: inherit !important;
        -webkit-text-fill-color: inherit !important;
    }

    /* -------------------------------------------------------
       PASSO 6 — Barra tricolor: mantém cores
       ------------------------------------------------------- */
    .tri-bar span,
    [class*="tri-bar"] span {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        /* NÃO override background aqui — deixa o CSS inline agir */
    }

    /* -------------------------------------------------------
       PASSO 7 — Layout: corrige cortes de texto
       ------------------------------------------------------- */
    *:not(img) {
        overflow: visible !important;
        max-height: none !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* -------------------------------------------------------
       PASSO 8 — Ocultar elementos de interface
       ------------------------------------------------------- */
    .portal-sidebar,
    .portal-sidebar-btn,
    .portal-sidebar-overlay,
    .modo-toggle,
    .nav-top-controls,
    .btn-download-pdf,
    .btn-pdf,
    .pdf-btn,
    .btn-flags,
    .share-btn-aula,
    .share-btn-aluno,
    .share-popup,
    .qr-modal,
    .ball-kick,
    #page-transition,
    .cta-jogopedia,
    .cta-banner,
    .cta-desbloquear,
    [class*="jogopedia"],
    .footer,
    footer {
        display: none !important;
    }

    /* Password gate: SEMPRE oculto na impressão
       (o gate usa visibility:hidden via .hidden — força display:none) */
    #password-gate,
    #password-gate.hidden,
    .password-gate,
    [id*="password"],
    [id*="gate"] {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* -------------------------------------------------------
       PASSO 9 — Página A4, sem margens excessivas
       ------------------------------------------------------- */
    @page {
        size: A4 portrait;
        margin: 12mm 10mm;
    }

    html, body {
        overflow: visible !important;
        height: auto !important;
        font-size: 10pt !important;
    }

    /* -------------------------------------------------------
       PASSO 10 — Animações: desativadas
       ------------------------------------------------------- */
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    /* -------------------------------------------------------
       PASSO 11 — Links: azul escuro legível
       ------------------------------------------------------- */
    a,
    a:visited {
        color: #0033aa !important;
    }

    /* -------------------------------------------------------
       PASSO 12 — Tabelas
       ------------------------------------------------------- */
    table {
        border-collapse: collapse !important;
        width: 100% !important;
    }
    th {
        background: #e0e4ea !important;
        color: #111111 !important;
        font-weight: bold !important;
    }
    td, th {
        border: 1px solid #cccccc !important;
        padding: 4px 6px !important;
    }

    /* -------------------------------------------------------
       PASSO 13 — Garante que elementos .reveal fiquem visíveis
       (NÃO usa [class*="hidden"] para não revelar o password gate)
       ------------------------------------------------------- */
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-up {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    /* -------------------------------------------------------
       PASSO 14 — Quebras de página: evita cortes em cards
       ------------------------------------------------------- */
    [class*="-card"],
    .curiosity-card,
    .tip-card,
    .host-card,
    .match-row,
    .song-card,
    h1, h2, h3 {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    h1, h2, h3 {
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

}