/* ===================== GeraProva — tema (cores + fonte + animações) ===================== */

/* ===================== PALETA CADERNO — FONTE ÚNICA (07/08/2026) =====================
   Por que os tokens moram AQUI e não num .css novo: o App.razor lê este arquivo e o
   despeja INLINE no <head> de toda página (bloco AppCssInline). Então declarar a paleta
   aqui custa zero requisição, chega antes da primeira pintura e — o que importa — fica
   visível pros TRÊS lugares que precisam dela ao mesmo tempo:
     1. CSS isolado (.razor.css) — o atributo de escopo não bloqueia herança de variável;
     2. CSS global (blog-publico.css, gp-landing.css, seo-programatico.css);
     3. estilos do próprio Bootstrap sobrescritos por classe.

   ANTES daqui a paleta vivia declarada em .gp-app-shell/.gp-public-shell no
   MainLayout.razor.css, e o valor cru estava REPETIDO em 19 arquivos do painel. Foi essa
   duplicação que fez a conversão por regex quebrar seletor e gerar texto invisível:
   trocar "#f4ecdd" por "#fffcf5" em 19 lugares acerta o fundo num arquivo e o texto no
   outro. Com token, o par fundo/texto muda junto e não tem como divergir.

   REGRA: nada de hex de paleta em arquivo de página. Cor nova entra AQUI, com nome.
   Os valores abaixo já foram medidos para contraste AA sobre o papel/cartão. */
:root {
    /* --- superfícies --- */
    --gp-papel: #f4ecdd;         /* fundo da página (o papel do caderno) */
    --gp-papel-claro: #fffcf5;   /* cartão//campo por cima do papel */

    /* --- texto (os 3 pesos; todos AA sobre papel e sobre cartão) --- */
    --gp-tinta: #2b2420;         /* texto principal e títulos */
    --gp-tinta-media: #5b5148;   /* texto de apoio, parágrafo secundário */
    --gp-tinta-fraca: #78695a;   /* rótulo, legenda, metadado */

    /* --- traço --- */
    --gp-linha: #ddceb0;         /* borda, divisória, pauta */

    /* --- vermelho da caneta (ação primária) ---
       -vermelho é a cor do TRAÇO/ícone sobre papel; -vermelho-fundo é a versão escura
       usada como FUNDO de botão com letra branca. Não trocar um pelo outro: #1f6fd6
       atrás de texto branco não passa AA. */
    --gp-vermelho: #1f6fd6;
    --gp-vermelho-fundo: #1857ad;

    /* --- kicker/eyebrow (o dourado que vira texto) ---
       O latão #b6892a é bonito como filete mas REPROVA em AA como texto sobre papel.
       Quando o dourado precisa ser lido, é --gp-kicker. */
    --gp-latao: #b6892a;         /* só filete/borda/ícone decorativo */
    --gp-kicker: #7a5a1a;        /* o mesmo dourado, legível como texto */

    /* --- sálvia (acento de apoio: sucesso, trilha do aluno) --- */
    --gp-salvia: #5f7350;        /* traço/ícone sobre papel */
    --gp-salvia-forte: #3e4c31;  /* fundo com letra branca, e texto sobre cartão */

    /* --- azul informativo (aviso neutro, link de sistema) --- */
    --gp-info: #46618f;

    /* --- capa do fichário (sidebar do painel; superfície escura) --- */
    --gp-capa: #1e4f9a;
    --gp-capa-alta: #1f6fd6;
    --gp-creme: #eaf2fe;         /* texto sobre a capa */

    /* Creme translúcido — os 3 papéis que aparecem SOBRE a capa (hero e CTA das
       páginas públicas, 08/08). Moram aqui como token, e não como rgba() solto no
       .razor.css, pela mesma regra do resto da paleta: o dia que o creme mudar,
       muda num lugar só. Não dá pra derivar de --gp-creme com rgba() porque a
       variável guarda o hex inteiro, não os canais. */
    --gp-creme-suave: rgba(238, 240, 255, .82);  /* parágrafo de apoio sobre a capa */
    --gp-creme-tenue: rgba(238, 240, 255, .14);  /* preenchimento de pílula/botão fantasma */
    --gp-creme-linha: rgba(232, 220, 192, .28);  /* borda sobre a capa */

    /* ===== DEGRAUS QUE FALTAVAM (28/08/2026) =====
       Nasceram de uma auditoria do CriarProva.razor.css: 627 hex escritos na mao,
       89 tons distintos, e a regra la em cima ("nada de hex de paleta em arquivo de
       pagina") valendo desde 07/08. Nao sao cores NOVAS — sao os tons que ja estavam
       espalhados pelas telas sem nome, agrupados: 14 variantes de creme viraram 3,
       13 de linha viraram 2, 20 de marrom quente viraram 1 a mais. O criterio de qual
       tom ficou foi o MAIS USADO de cada familia, nao a media: media inventa cor que
       ninguem escolheu. */

    /* --- superficies, os 3 degraus entre o papel e o branco --- */
    --gp-papel-veu: #fffdf8;     /* quase branco, ainda quente: cartao sobre cartao */
    --gp-papel-morno: #fdf8ee;   /* bloco suave, topo de gradiente */
    --gp-papel-quente: #f6ecd3;  /* realce/hover sobre o papel; o creme que se ve */

    /* --- traco, os vizinhos da --gp-linha --- */
    --gp-linha-forte: #d3c4a6;   /* borda de 2,5px que precisa aparecer */
    --gp-linha-suave: #e4ddd0;   /* divisoria tenue dentro de cartao */

    /* --- tinta: o 4o peso, mais claro que -fraca (placeholder, item desligado) --- */
    --gp-tinta-tenue: #9a9081;

    /* --- vermelho lavado: os fundos e bordas claras da acao primaria ---
       Sem estes dois, cada tela inventava o proprio rosa: achei 7 no CriarProva. */
    --gp-vermelho-veu: #f1f2fc;    /* fundo de estado ligado/selecionado */
    --gp-vermelho-linha: #dcdef5;  /* borda clara combinando com o veu */

    /* --- verde do "ja esta na prova" ---
       NAO e a salvia: a salvia e apoio/sucesso generico, este marca item que o
       professor JA colocou na prova. Foi mantido separado de proposito na
       consolidacao — juntar os dois apagaria a diferenca que o professor le. */
    --gp-verde-prova: #3e6b47;

    /* ===== ESCALA TIPOGRAFICA (28/08/2026) =====
       O CriarProva tinha 43 tamanhos distintos em 249 declaracoes — 12px, 12,5px e
       12,75px convivendo. Isso nao e hierarquia, e sedimento de rodadas de aperto de
       layout. Sete degraus cobrem tudo que a tela precisa dizer. */
    --gp-fs-micro: 10px;   /* contador, badge, selo */
    --gp-fs-mini: 11px;    /* legenda, metadado */
    --gp-fs-rotulo: 12px;  /* rotulo de campo, chip, botao pequeno */
    --gp-fs-corpo: 13px;   /* texto corrente do painel */
    --gp-fs-medio: 15px;   /* enfase, valor, botao primario */
    --gp-fs-titulo: 18px;  /* titulo de bloco */
    --gp-fs-hero: 24px;    /* titulo de tela */

    /* --- veus de apoio que faltavam --- */
    --gp-salvia-veu: #e5ecdc;   /* fundo claro de sucesso/trilha */
    --gp-info-veu: #e7edf6;     /* fundo claro de aviso neutro */

    /* ===== A FOLHA IMPRESSA E OUTRA SUPERFICIE (28/08/2026) =====
       A prova e o gabarito NAO usam a paleta caderno, e isso e proposital: papel
       branco com tinta preta. A auditoria do CriarProva achou 53 cinzas ali dentro
       (.cp-folha-*, .cp-cab-*, .cp-folha-gab-*) e a primeira leitura foi "deriva de
       paleta" — era engano. Converter #1a1a1a em --gp-tinta deixaria a prova sepia
       e gastaria toner colorido onde o professor quer preto.
       Entao a folha ganha escala PROPRIA, neutra: 13 cinzas soltos viram 7 degraus.
       Regra: dentro da folha usa-se --gp-folha-*; fora dela, a paleta caderno. */
    --gp-folha-tinta: #1a1a1a;        /* texto da prova, titulo, regua do cabecalho */
    --gp-folha-tinta-media: #555;     /* rotulo, apoio */
    --gp-folha-tinta-fraca: #999;     /* metadado, linha de preencher */
    --gp-folha-tenue: #bbb;           /* placeholder, dica em italico */
    --gp-folha-linha: #ccc;           /* pauta, tracejado, divisoria */
    --gp-folha-linha-suave: #ddd;     /* borda de campo, moldura leve */
    --gp-folha-veu: #fafafa;          /* fundo de campo editavel na folha */

    /* ===== TAMANHO DE CAMPO (28/08/2026) =====
       Caixa de texto, combo e select tinham 4 alturas, 5 paddings horizontais e 6
       raios diferentes DENTRO da mesma tela — um select de canto 12px ao lado de um
       combo de 9px, o mesmo .cp-campo-caixa declarado duas vezes com bordas de 1px e
       2,5px. Nao era decisao, era sedimento.
       O valor de cada degrau e o MAIS USADO que ja existia, nao um numero novo: assim
       a maioria dos campos nao se move e so os fora-de-linha entram na fila.
       A folha impressa NAO usa esta escala (campo de papel e miudo de proposito). */
    --gp-campo-h: 46px;          /* campo principal: select, input, combo da faixa */
    --gp-campo-h-m: 38px;        /* secundario: modal, campo de apoio */
    --gp-campo-h-p: 32px;        /* inline: pontuacao, mini-acao */
    --gp-campo-h-mini: 24px;     /* controle miudo dentro de card */
    --gp-campo-h-composto: 62px; /* caixa com icone + rotulo + controle empilhados */

    --gp-campo-px: 14px;         /* respiro horizontal padrao */
    --gp-campo-px-m: 12px;
    --gp-campo-px-p: 9px;

    --gp-campo-raio: 10px;       /* o canto de TODO campo */
    --gp-campo-raio-p: 7px;      /* campo pequeno/inline */
    --gp-campo-raio-pilula: 999px;

    --gp-campo-borda: 1px;
    --gp-campo-borda-forte: 2.5px;  /* campo em destaque na faixa de filtros */
}

/* Tema antigo (roxo/azul). Ainda vivo no que não foi migrado — some quando o
   último uso sair. Não usar em tela nova. */
:root {
    --gp-indigo: #4f46e5;
    --gp-purple: #7c3aed;
    --gp-blue: #3b82f6;
    --gp-grad: linear-gradient(120deg, #4f46e5 0%, #7c3aed 100%);
    --gp-grad-vivo: linear-gradient(120deg, #3b82f6, #4f46e5, #6366f1, #7c3aed);
    --gp-ink: #1b1733;
}

/* O <body> pinta o PAPEL desde o primeiro quadro (08/08). Antes ficou pra trás na
   migração e continuava no #f5f6fc (o cinza-azulado do tema roxo). Como as cascas
   (.gp-public-shell / .gp-app-shell) só cobrem depois que o CSS delas chega, os
   primeiros quadros da página saíam azulados e trocavam de cor no meio do
   carregamento — dá pra ver na filmstrip do PageSpeed, e conta contra o Speed
   Index, que mede justamente a evolução desses quadros.
   Papel serve às duas áreas: público e painel usam o mesmo fundo. */
html, body {
    font-family: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--gp-papel);
    color: var(--gp-tinta);
    scroll-behavior: smooth;
}

a, .btn-link { color: #5a4bd6; text-decoration: none; }
a:hover { color: #764ba2; }
h1, h2, h3, .fw-bold, .fw-semibold { letter-spacing: -0.015em; }

/* ----- gradiente animado (hero / faixas) ----- */
@keyframes gpShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.gp-anim-grad {
    background: var(--gp-grad-vivo);
    background-size: 300% 300%;
    animation: gpShift 16s ease infinite;
}




/* ----- pílula de ícone colorida ----- */
.gp-ico {
    width: 3rem; height: 3rem; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .9rem; color: #fff; font-size: 1.35rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    transition: transform .18s ease;
}
.gp-grad-1 { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.gp-grad-2 { background: linear-gradient(135deg, #3b82f6, #4f46e5); }
.gp-grad-3 { background: linear-gradient(135deg, #4facfe, #2563eb); }
.gp-grad-4 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.gp-grad-5 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.gp-grad-6 { background: linear-gradient(135deg, #06b6d4, #4f46e5); }

/* ----- número grande com gradiente ----- */
.gp-stat {
    font-weight: 800;
    background: var(--gp-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ----- plano em destaque ----- */
.gp-destaque { outline: 2px solid #667eea; transform: scale(1.03); }
.gp-destaque:hover { transform: scale(1.03) translateY(-5px); }
.gp-badge-grad { background: var(--gp-grad); color: #fff; }

/* ----- navbar com leve blur ----- */
.gp-navbar { backdrop-filter: saturate(140%) blur(2px); }


/* ----- entrada suave do conteúdo (troca de página) ----- */
@keyframes gpFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* fill-mode "backwards" (não "both"): um transform residual no fim da animação
   viraria containing block e quebraria position:fixed dos modais internos. */
.gp-app-main > *, .gp-public-main > * {
    animation: gpFadeUp .35s ease backwards;
}

/* ----- detalhes de plataforma moderna ----- */
::selection { background: rgba(124, 58, 237, .22); color: inherit; }

* { scrollbar-width: thin; scrollbar-color: #c7c9f0 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #c7c9f0; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: #a5a8e8; }
*::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
    outline: 3px solid rgba(124, 58, 237, .5);
    outline-offset: 2px;
    border-radius: .35rem;
}

/* ----- badge/chip reutilizável ----- */
.gp-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: rgba(79, 70, 229, .1);
    color: #4f46e5;
    font-size: .78rem; font-weight: 800;
}

/* ----- skeleton de carregamento ----- */
@keyframes gpShimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}
.gp-skeleton {
    border-radius: .6rem;
    background: linear-gradient(90deg, #ecedfa 25%, #f8f8ff 50%, #ecedfa 75%);
    background-size: 200% 100%;
    animation: gpShimmer 1.4s linear infinite;
    color: transparent;
    user-select: none;
}

/* ----- respeita usuários sensíveis a movimento ----- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html, body { scroll-behavior: auto; }
}

/* ===================== infra do Blazor (manter) ===================== */
.content { padding-top: 1.1rem; }
h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: #fff; }
.blazor-error-boundary::after { content: "Ocorreu um erro."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

/* ----- rodapé SEMPRE por último ----- */
/* Nas páginas interativas (prerender:false) o miolo chega VAZIO até o circuito montar;
   sem isto o rodapé aparecia "antes"/no meio da tela durante o carregamento (feio).
   Regra: só mostra o rodapé quando o corpo da página já tem conteúdo. */
.gp-app-main:not(:has(> .gp-app-body > *)) .rodape-gp,
.gp-public-shell:not(:has(> .gp-public-main > *)) .rodape-gp {
    display: none;
}

/* ----- impressão: esconde o shell do app (cartão-resposta, provas, etc.) ----- */
@media print {
    .gp-topbar, .gp-sidebar, .gp-footer, .gp-public-topbar, .rodape-gp { display: none !important; }
    .gp-app-main { margin: 0 !important; padding: 0 !important; }
    body { background: #fff !important; }
}

/* ===================================================================
   BLOQUEIO DE IMPRESSÃO DO TRIAL (07/08/2026)
   ===================================================================
   O trial já não conseguia usar os botões de imprimir/exportar do app
   (FeatureService.PodeImprimir + travas nos endpoints). Mas a impressão
   acionada pelo PRÓPRIO NAVEGADOR — Ctrl+P, menu do Chrome, "compartilhar
   → imprimir" do celular — não passa por botão nenhum, então saía limpa.
   Foi por aí que uma professora em trial tirou 19 atividades sem gerar
   um único registro de bloqueio: no celular não existe Ctrl+P nem botão
   direito pra detectar.

   A defesa certa é CSS de impressão, porque o navegador o aplica
   INDEPENDENTEMENTE de como a impressão foi acionada — cobre desktop e
   celular de uma vez. Basta a página marcar o container com
   .gp-conteudo-restrito quando o professor não pode imprimir.

   Isto NÃO impede print de tela (nada impede) — é a marca d'água que
   cuida desse caso.
   =================================================================== */
@media print {
    /* Esconde os FILHOS, não o container: o aviso mora dentro dele (junto da
       marca d'água) e, se o pai fosse display:none, sumiria junto e a folha
       sairia em branco sem explicar nada. */
    /* 02/09/2026 — IMPRESSÃO LIBERADA PRA TODOS (ordem do fundador). A regra que
       apagava .gp-conteudo-restrito > * na impressão saiu; a marca d'água é o que
       fica pra quem não paga. O aviso substituto nunca mais imprime. */
    .gp-aviso-impressao {
        display: none !important;
        text-align: center;
        padding: 80px 40px;
        font-family: Arial, Helvetica, sans-serif;
        color: #0f172a;
    }

    .gp-aviso-impressao .gp-aviso-titulo {
        font-size: 22pt;
        font-weight: 700;
        margin-bottom: 14pt;
    }

    .gp-aviso-impressao .gp-aviso-texto {
        font-size: 12pt;
        line-height: 1.6;
        color: #475569;
    }
}

/* Na tela o aviso não aparece: ele existe só pra ocupar a folha impressa. */
.gp-aviso-impressao {
    display: none;
}

.gp-app-body [class*="hero"] > .ps-wrap { order: 9; }
.gp-app-body [class*="hero"] > :has(> h1) { margin-right: auto; text-align: left; }
.gp-app-body [class*="hero"] h1 { text-align: left; }

/* Botão de ação sobre a barra de degradê (ex.: "Minhas provas", "Ver planos") —
   mesmo estilo do .cp-btn-ghost do Criar prova, agora compartilhado. */
.gp-hero-ghost {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 13.5px;
    transition: background .15s ease;
}

.gp-hero-ghost:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* ── IMPRIMIR A FOLHA DE PROVA (21/08/2026) ──
   gp-print-folha entra no body na hora do window.print (js/folha-prova.js) e sai
   depois. Precisa ser GLOBAL: esconder o menu/topbar exige alcançar ancestrais
   que o CSS isolado da CriarProva não alcança. Cada .cp-folha-a4 = 1 página. */
@media print {
    /* A FOLHA FICA NO FLUXO NORMAL (23/08). Era visibility:hidden em tudo +
       position:absolute na area da folha; conteudo absoluto NAO pagina, entao o
       papel saia com 1 pagina onde a tela mostrava 2. Agora somem os IRMAOS da
       folha (display:none de verdade), em todos os niveis ate o body — quem faz
       essa marcacao e o js/folha-prova.js no beforeprint. */
    body.gp-print-folha .gp-print-fora { display: none !important; }

    /* Os ancestrais da folha viram caixas neutras: sem largura, sem rolagem, sem
       moldura. Qualquer overflow ou altura fixa no caminho tambem cortaria as
       paginas seguintes. */
    body.gp-print-folha .gp-print-caminho {
        display: block !important; position: static !important;
        overflow: visible !important;
        width: auto !important; max-width: none !important;
        height: auto !important; max-height: none !important; min-height: 0 !important;
        margin: 0 !important; padding: 0 !important;
        background: none !important; box-shadow: none !important; border: 0 !important;
    }

    body.gp-print-folha .cp-folha-area {
        display: block !important; position: static !important;
        width: var(--fp-largura, 794px) !important; margin: 0 !important; padding: 0 !important;
        gap: 0 !important;   /* o respiro entre folhas e da TELA; no papel viraria sobra */
    }

    /* MESMO TAMANHO DA TELA: 794x1122px = A4 a 96dpi, com a margem do papel zerada
       pelo @page do gpFolha.escopar. Como a paginacao do C# mede nesta largura,
       tela e papel batem por construcao. */
    body.gp-print-folha .cp-folha-a4 {
        box-shadow: none !important; border-radius: 0 !important;
        width: var(--fp-largura, 794px) !important; max-width: var(--fp-largura, 794px) !important;
        height: var(--fp-altura, 1122px) !important; min-height: var(--fp-altura, 1122px) !important;
        margin: 0 !important; overflow: hidden !important;
        page-break-after: always; break-after: page;
    }
    body.gp-print-folha .cp-folha-a4:last-child { page-break-after: auto; }
    /* controles de edicao NAO sao parte da prova */
    body.gp-print-folha .cp-q-folha-ctrl,
    body.gp-print-folha .cp-folha-editar,
    body.gp-print-folha .cp-folha-campo i,
    body.gp-print-folha .cp-folha-campo button,
    body.gp-print-folha .cp-folha-campo-add,
    body.gp-print-folha .cp-cab-editor,
    body.gp-print-folha .cp-folha-vazia-dica { display: none !important; }
    body.gp-print-folha .cp-q-folha-pontos input { border: 0 !important; background: none !important; }

    /* So o gabarito: as folhas da prova ficam no DOM (a medicao da paginacao
       depende delas) mas nao vao pro papel. Regra GLOBAL de proposito - a versao
       no CSS isolado da CriarProva nao estava bastando. */
    body.gp-print-folha .cp-folha-area.so-gabarito .cp-folha-a4:not(.cp-folha-gabarito) { display: none !important; }
    body.gp-print-folha .cp-folha-area.so-gabarito .cp-folha-gabarito {
        page-break-before: auto !important; break-before: auto !important;
        height: auto !important; min-height: 0 !important;
    }
}

/* ══════════ .gp-combo — combo bonito, SOB DEMANDA (03/09/2026) ══════════
   Mesmo mecanismo do SeletorNativo (appearance: base-select), mas pra <select>
   que NAO tem figura: turma, ano letivo, tipo, dificuldade, filtro.

   OPT-IN de proposito. A primeira versao disto valia pra TODO select do app, e o
   fundador matou a ideia com o argumento certo: combo sem icone continua sem
   icone, entao o global espalhava risco de layout por 30 telas pra entregar so
   arredondado de lista - e quem conferiria as 30 telas seria ELE. Aqui a regra so
   pega quem tem class="gp-combo", entao o alcance e' exatamente o que se escolheu.

   Onde nao ha suporte (Safari/iOS e Firefox, 10,5% dos professores medidos em
   03/09) o navegador ignora e desenha o select de sempre. */

.gp-combo { appearance: base-select; }

.gp-combo::picker-icon {
    color: var(--gp-tinta-tenue, #9a9081);
    transition: transform .15s ease;
}
.gp-combo:open::picker-icon { transform: rotate(180deg); }

.gp-combo::picker(select) {
    appearance: base-select;
    padding: 6px;
    border: 1px solid var(--gp-linha, #e8dcc0);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 44px rgba(43, 36, 32, .26);
    max-height: 340px;
    overflow-y: auto;
}

/* 44px de alvo: o combo antigo tinha 34 e o fundador viu, no Clarity, gente
   clicando e nao selecionando. */
.gp-combo option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: .9rem;
    font-weight: 650;
    color: var(--gp-tinta, #2b2420);
}

.gp-combo option:hover,
.gp-combo option:focus { background: var(--gp-areia, #f6ecd3); }
.gp-combo option:checked { background: rgba(31, 111, 214, .10); }
.gp-combo option::checkmark { color: var(--gp-vermelho, #1f6fd6); order: 99; margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
    .gp-combo::picker-icon { transition: none; }
}

.gp-faixa-cota {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    background: #b91c1c;
    color: #fff;
    font: 600 15px/1.4 system-ui, sans-serif;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}

.gp-faixa-cota a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

@media print {
    .gp-faixa-cota { display: none !important; }
}

.gp-aguarde {
    position: fixed;
    inset: 0;
    z-index: 2147483002;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .45);
    cursor: progress;
}

.gp-aguarde.on { display: flex; }

.gp-aguarde-caixa {
    display: grid;
    justify-items: center;
    gap: 8px;
    max-width: 360px;
    padding: 22px 26px;
    border-radius: 16px;
    background: #fff;
    color: #1e293b;
    text-align: center;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    font-family: Figtree, system-ui, sans-serif;
}

.gp-aguarde-caixa b { font-size: 1.1rem; }


.gp-aguarde-roda {
    width: 34px;
    height: 34px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--gp-vermelho, #1f6fd6);
    border-radius: 50%;
    animation: gp-aguarde-gira .8s linear infinite;
}

@keyframes gp-aguarde-gira { to { transform: rotate(360deg); } }

@media print {
    .gp-aguarde { display: none !important; }
}

.gp-aviso-imp {
    position: fixed;
    inset: 0;
    z-index: 2147483001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
}

.gp-aviso-imp[hidden] { display: none; }

.gp-aviso-imp-caixa {
    max-width: 420px;
    width: 100%;
    padding: 24px 22px 20px;
    border-radius: 16px;
    background: #fff;
    color: #1e293b;
    text-align: center;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    font-family: Figtree, system-ui, sans-serif;
}

.gp-aviso-imp-caixa i { font-size: 2rem; color: #4f46e5; }
.gp-aviso-imp-caixa p { margin: 10px 0 18px; font-size: 1.05rem; font-weight: 700; }

.gp-aviso-imp-ok {
    border: 0;
    border-radius: 10px;
    padding: 9px 26px;
    background: #4f46e5;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

@media print {
    .gp-aviso-imp { display: none !important; }
}

/* Montagem de prova: o que nao saiu pelo botao Imprimir (menu do navegador) vai pro papel so com o aviso. */
@media print {
    body.gp-impressao-guiada:not(.gp-print-folha) * { visibility: hidden !important; }
    body.gp-impressao-guiada:not(.gp-print-folha)::before {
        visibility: visible !important;
        content: "Para imprimir a prova, use o botão Imprimir do GeraProva.";
        position: fixed; top: 40%; left: 0; right: 0;
        text-align: center; font-size: 20px; font-weight: 800; color: #1f6fd6;
    }
}

/* Folha vai ao papel como IMAGEM (js/folha-prova.js fotografa cada .cp-folha-a4). */
#gp-print-imgs { display: none; }
@media print {
    body.gp-print-imagem .cp-folha-area > :not(#gp-print-imgs) { display: none !important; }
    body.gp-print-imagem #gp-print-imgs { display: block !important; }
    body.gp-print-imagem #gp-print-imgs img {
        display: block; width: var(--fp-largura, 794px); height: auto;
        page-break-after: always; break-after: page;
    }
    body.gp-print-imagem #gp-print-imgs img:last-child { page-break-after: auto; break-after: auto; }
}

/* Plano de aula e simulado vao ao papel como IMAGEM (gpDoc.imprimir em js/folha-prova.js). */
#gp-print-imgs-doc { display: none; }
@media print {
    body.gp-print-imagem-doc > *:not(#gp-print-imgs-doc) { display: none !important; }
    body.gp-print-imagem-doc #gp-print-imgs-doc { display: block !important; }
    body.gp-print-imagem-doc #gp-print-imgs-doc img {
        display: block; width: 210mm; height: 297mm;
        page-break-after: always; break-after: page;
    }
    body.gp-print-imagem-doc #gp-print-imgs-doc img:last-child { page-break-after: auto; break-after: auto; }
}

/* Aviso do Word gerado por JS (gpWord em js/folha-prova.js): vive fora de qualquer pagina. */
.gp-word-aviso { display: none; position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10050;
    max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px; font-size: .95rem; line-height: 1.3;
    color: #fff; background: #334155; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.gp-word-aviso.andamento, .gp-word-aviso.ok, .gp-word-aviso.erro { display: block; }
.gp-word-aviso.ok { background: #15803d; }
.gp-word-aviso.erro { background: #b91c1c; }
@media print { .gp-word-aviso { display: none !important; } }


/* ===== PADRAO DE FORMULARIO (criar prova, plano de aula, atividade e trabalho) =====
   Muda aqui, muda nas 4 telas. */
:root {
    --gpf-campo-h: 38px;
    --gpf-campo-raio: 10px;
    --gpf-campo-px: 10px;
    --gpf-campo-fs: 13px;
    --gpf-borda: 1.5px solid #dd9a92;
    --gpf-borda-foco: #1f6fd6;
    --gpf-botao-borda: 1.5px solid #1f6fd6;
    --gpf-botao-cor: #1857ad;
    --gpf-slider-w: 180px;
    --gpf-slider-h: 22px;
}

/* Caixa de combo do padrao de formulario (igual a do criar prova): icone + rotulo pequeno + valor, numa moldura so. */
.gp-campo-caixa {
    display: flex; align-items: center; gap: 8px;
    min-height: var(--gpf-campo-h); padding: 0 9px;
    border: var(--gpf-borda); border-radius: var(--gpf-campo-raio); background: #fff;
    transition: border-color .15s ease;
}
.gp-campo-caixa:hover, .gp-campo-caixa:focus-within { border-color: var(--gpf-borda-foco); }
.gp-campo-ico {
    flex: none; width: 26px; height: 26px; display: grid; place-items: center;
    border-radius: var(--gpf-campo-raio); background: #f6efe0; color: #78695a; font-size: 13px;
}
.gp-campo-caixa:focus-within .gp-campo-ico { background: rgba(31, 111, 214, .1); color: #1f6fd6; }
.gp-campo-mio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.gp-campo-mio > label, .gp-campo-mio > span.gp-campo-rot { margin: 0; padding: 0; font-size: 10px; font-weight: 600; line-height: 1; color: #9a9081; letter-spacing: .01em; text-transform: none; }
.gp-campo-mio .se-wrap.is-compacto, .gp-campo-mio .sn-wrap { display: block; width: 100%; }
.gp-campo-mio .sn-select, .gp-campo-mio .se-chip {
    width: 100%; height: auto !important; min-height: 0 !important;
    padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #2b2420;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp-campo-mio .se-chip-rot { display: none; }

.gp-carregando { display: inline-block; width: 2rem; height: 2rem; vertical-align: -.125em; border: .25em solid currentcolor; border-right-color: transparent; border-radius: 50%; animation: gp-girar .75s linear infinite; }
.gp-carregando-p { width: 1rem; height: 1rem; border-width: .2em; }
@keyframes gp-girar { to { transform: rotate(360deg); } }
.ico-p { margin-right: .25rem; }
.ico-m { margin-right: .5rem; }