/*
 * Design tokens do EAD — o ÚNICO lugar onde cor e tipografia do PORTAL são definidas.
 *
 * ============================================================================
 * POR QUE ESTE ARQUIVO EXISTE (F3, 20/08/2026)
 * ============================================================================
 * Ordem do dono: *"para a gente falar uma língua só. O cliente entrar e perceber
 * que ele está dentro de um portal só."* — e com o recorte dele: **só as cores e
 * as fontes.** Estrutura, espaçamento e componente não se mexem, porque "isso vai
 * desenquadrar muita coisa que aqui já está funcionando muito perfeitinho".
 *
 * As **9 cores de marca** abaixo são byte-a-byte as mesmas do `tokens.css` do Keys,
 * do Cents e do site `gbinder.com`. Conferido ao vivo em 20/08/2026: os três já
 * compartilhavam esta paleta; o EAD era o único fora, com o azul/ardósia padrão do
 * Bootstrap e do Tailwind.
 *
 * ============================================================================
 * ⚠️ A REGRA QUE MAIS IMPORTA AQUI: `--primary` NÃO É NOSSA
 * ============================================================================
 * Este sistema é multitenant, e `--primary` é a cor que **a empresa cliente
 * escolheu** (`empresas.tema_cor_primaria`, injetada nas views a partir da sessão).
 * Os hexadecimais que existiam nas views eram só o **fallback** de quando o tenant
 * não configurou nada.
 *
 * **Foi o fallback que mudou, não a cor do cliente.** Quem tem marca configurada
 * continua vendo a marca dele — é a regra do `CLAUDE.md`: *"marca é do tenant,
 * nunca cravada em view".*
 *
 * E é isso que decide por que **o ouro não virou a primária**, por mais que ele
 * seja a cara do grupo: como `--primary` é escolha do cliente, o sistema não
 * controla o texto que pousa em cima dela — e o desenho existente escreve BRANCO
 * sobre ela em 10 lugares. Branco sobre ouro dá **1,6:1**: ilegível. O ouro entra
 * como ACENTO (`--ead-acento`), onde nunca há texto branco por cima, e a primária
 * padrão virou o **petróleo**, que aceita branco com folga (15:1) e é a cor
 * estrutural da família.
 *
 * A mesma trava do Keys vale aqui, e não se negocia:
 *   · NUNCA texto branco sobre ouro;
 *   · ouro como TEXTO só via `--ead-primaria-texto` (âmbar escuro no tema claro).
 */

:root {
    /* ══ As 9 cores de marca do mundo gbinder ══════════════════════════════
       Idênticas às do Keys, do Cents e do gbinder.com. Não se inventa cor aqui:
       se uma cor nova for preciso, ela nasce na identidade e desce para os três. */
    --ouro-centavo:      #FFC940; /* cor de marca, destaques, logo */
    --ouro-escuro:       #E5A916; /* variante do ouro p/ fundo claro e hover */
    --noite-petroleo:    #0D1F23; /* quase-preto azulado — estrutura, header, CTA */
    --grafite:           #182528; /* cartões e superfícies no modo escuro */
    --menta-crescimento: #3DDC97; /* aprovado, concluído, positivo */
    --menta-escura:      #18B877; /* variante da menta p/ fundo claro */
    --coral-despesa:     #FF6B57; /* reprovado, bloqueado, strike, negativo */
    --marfim:            #FAF7F0; /* creme — fundo do modo claro */
    --tinta:             #1B2426; /* texto sobre fundo claro */

    /* ══ Tipografia ════════════════════════════════════════════════════════
       A mesma dupla do Keys e do Cents. O corpo usa a fonte do sistema (não
       baixa nada, não pisca no carregamento); o título usa Sora, que é a letra
       do wordmark das três marcas. */
    --ead-fonte:        system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --ead-fonte-titulo: 'Sora', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* ══ Primária — o SLOT DO TENANT ═══════════════════════════════════════
       Estes são os PADRÕES. Empresa com marca configurada sobrescreve nas views,
       a partir da sessão. Petróleo de propósito: ver o aviso do cabeçalho. */
    --ead-primaria:        var(--noite-petroleo);
    --ead-primaria-escura: #071316;
    --ead-primaria-clara:  #1d3a40;
    --ead-primaria-suave:  #e8eded;
    --ead-primaria-rgb:    13, 31, 35;
    /* Texto/ícone que vai POR CIMA do preenchimento da primária. */
    --ead-sobre-primaria:  #ffffff;

    /* ══ Acento — o OURO, e a regra que o acompanha ════════════════════════
       Para preenchimento de destaque, barra de progresso, selo, item ativo do
       menu e anel de foco. NUNCA com texto branco em cima: o que pousa sobre
       ouro é `--ead-sobre-acento` (petróleo, ~11:1). */
    --ead-acento:        var(--ouro-centavo);
    --ead-acento-escuro: var(--ouro-escuro);
    --ead-acento-suave:  #FDF3D7;
    --ead-acento-rgb:    255, 201, 64;
    --ead-sobre-acento:  var(--noite-petroleo);
    /* Ouro puro reprova AA como TEXTO sobre claro. Âmbar escuro: 5,07:1 s/ branco,
       4,74:1 s/ marfim. É este que se usa para link/rótulo cor-de-marca. */
    --ead-primaria-texto: #8A6A00;

    /* ══ Superfícies e texto ═══════════════════════════════════════════════
       É AQUI que mora a maior parte da sensação de "mesmo portal": o fundo deixa
       de ser a ardósia fria (#f1f5f9) e passa a ser o marfim do grupo. */
    --ead-fundo:        var(--marfim);
    --ead-superficie:   #ffffff;
    --ead-superficie-2: #f4efe3;
    --ead-tinta:        var(--tinta);
    --ead-texto-2:      #5c6360; /* 6,16:1 s/ branco · 5,76:1 s/ marfim */
    --ead-texto-3:      #727975; /* dicas e legendas — 4,46:1 s/ branco */
    --ead-borda:        #e7e0d0;
    --ead-borda-forte:  #d3cab6;

    /* ══ Véus — superfície TRANSLÚCIDA e listra de tabela ══════════════════
       As views usam cartão de vidro (`rgba(255,255,255,.7)`) e listra zebrada.
       Cravados em `rgba()`, eles eram os únicos pedaços que NÃO viravam de tema
       — e um cartão branco translúcido sobre fundo petróleo é exatamente a tela
       quebrada de 20/08/2026. Aqui eles viram tokens e acompanham o resto. */
    --ead-veu:      rgba(255, 255, 255, 0.72);
    --ead-veu-borda: rgba(255, 255, 255, 0.55);
    --ead-listra:   rgba(13, 31, 35, 0.025);

    /* ══ Semântica do ENSINO ═══════════════════════════════════════════════
       No Keys a menta é receita e o coral é despesa. Aqui não há dinheiro: menta
       é APROVADO/CONCLUÍDO e coral é REPROVADO/BLOQUEADO. Mesmo pigmento, outra
       leitura — e é por isso que estes tokens têm nome próprio em vez de reusarem
       `--ead-receita`: o dia em que a semântica financeira mudar no Cents, ela não
       pode repintar o boletim de um aluno. */
    --ead-aprovado:       var(--menta-escura);
    --ead-aprovado-suave: #e3f7ee;
    --ead-aprovado-forte: #0c7a50; /* texto sobre claro — 5,36:1 s/ branco */
    --ead-reprovado:       var(--coral-despesa);
    --ead-reprovado-suave: #ffebe7;
    --ead-reprovado-forte: #c43a28; /* texto sobre claro — 5,27:1 s/ branco */
    --ead-aviso:        var(--ouro-escuro);
    --ead-aviso-suave:  #fbf0d6;
    --ead-aviso-forte:  #7a5d00; /* texto de aviso — 6,19:1 s/ branco */
    --ead-info:         #2c6e7a; /* teal informativo — 5,80:1 s/ branco */
    --ead-info-suave:   #e4f0f2;

    /* ══ Sombras, foco e geometria ═════════════════════════════════════════
       Sombras tingidas de petróleo, como nos irmãos — sombra cinza-neutra sobre
       fundo creme fica suja. */
    --ead-sombra-1: 0 1px 2px rgba(13, 31, 35, 0.06), 0 1px 6px rgba(13, 31, 35, 0.05);
    --ead-sombra-2: 0 4px 14px rgba(13, 31, 35, 0.09), 0 2px 4px rgba(13, 31, 35, 0.05);
    --ead-sombra-3: 0 12px 34px rgba(13, 31, 35, 0.16);
    --ead-anel-foco: rgba(255, 201, 64, 0.35);

    --ead-raio:    14px;
    --ead-raio-sm: 10px;
    --ead-raio-xs: 8px;

    /* ══ Bootstrap ═════════════════════════════════════════════════════════
       O EAD carrega Bootstrap 5.3 de CDN. Estas quatro linhas fazem o resto do
       framework herdar a paleta sem que seja preciso reescrever componente. */
    --bs-body-bg:        var(--ead-fundo);
    --bs-body-color:     var(--ead-tinta);
    --bs-border-color:   var(--ead-borda);
    --bs-font-sans-serif: var(--ead-fonte);

    /* AS CORES SEMÂNTICAS DO BOOTSTRAP, redirecionadas para a paleta da casa.
       Esta é a alavanca mais forte deste arquivo: sem ela, `.text-success`,
       `.bg-danger`, `.btn-warning`, `.badge` e `.alert` continuam pintando com o
       verde, o vermelho e o ciano de fábrica do framework — e foi exatamente isso
       que deixou um ícone CIANO no meio do painel do gestor, gritando no meio de
       uma tela creme e petróleo.
       O `-rgb` acompanha cada cor porque as classes de opacidade do Bootstrap
       (`bg-opacity-10`, `text-bg-*`) usam a versão em RGB, não o hexadecimal. */
    --bs-primary:        var(--ead-primaria);
    --bs-primary-rgb:    13, 31, 35;
    --bs-secondary:      var(--ead-texto-2);
    --bs-secondary-rgb:  92, 99, 96;
    --bs-success:        var(--ead-aprovado);
    --bs-success-rgb:    24, 184, 119;
    --bs-danger:         var(--ead-reprovado);
    --bs-danger-rgb:     255, 107, 87;
    --bs-warning:        var(--ead-acento);
    --bs-warning-rgb:    255, 201, 64;
    --bs-info:           var(--ead-info);
    --bs-info-rgb:       44, 110, 122;
    --bs-light:          var(--ead-superficie-2);
    --bs-light-rgb:      244, 239, 227;
    --bs-dark:           var(--noite-petroleo);
    --bs-dark-rgb:       13, 31, 35;

    /* Texto: as cores acima servem de PREENCHIMENTO. Como TEXTO sobre fundo claro,
       menta e coral puros ficam no limite do AA — o Bootstrap 5.3 tem tokens
       separados para isso, e é neles que entram as variantes "forte". */
    --bs-success-text-emphasis: var(--ead-aprovado-forte);
    --bs-danger-text-emphasis:  var(--ead-reprovado-forte);
    --bs-warning-text-emphasis: var(--ead-aviso-forte);
    --bs-info-text-emphasis:    var(--ead-info);
    --bs-primary-text-emphasis: var(--ead-primaria);

    --bs-link-color:       var(--ead-primaria);
    --bs-link-hover-color: var(--ead-primaria-texto);
    --bs-link-color-rgb:   13, 31, 35;
}

/* As classes de TEXTO semântico do Bootstrap apontam para a cor de preenchimento,
   que sobre fundo claro reprova contraste (menta pura sobre branco: 2,3:1). Aqui
   elas passam a usar a variante forte — mesma família, contraste conferido. */
.text-success { color: var(--ead-aprovado-forte) !important; }
.text-danger  { color: var(--ead-reprovado-forte) !important; }
.text-warning { color: var(--ead-aviso-forte) !important; }
.text-info    { color: var(--ead-info) !important; }
.text-muted   { color: var(--ead-texto-2) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   TEMA ESCURO — e a lição que custou uma tela feia
   ══════════════════════════════════════════════════════════════════════════
   ⚠️ ESTE BLOCO NÃO RESPONDE MAIS A `prefers-color-scheme`, E NÃO PODE VOLTAR
   A RESPONDER ENQUANTO AS VIEWS FOREM AS DE HOJE.

   O que aconteceu em 20/08/2026, na primeira versão deste arquivo: eu escrevi um
   `@media (prefers-color-scheme: dark)` aqui, achando que era zelo — "tema escuro
   que nasce depois custa três vezes mais". O resultado, na tela do dono:

     · o navegador dele está em modo escuro, então ESTES tokens viraram sozinhos;
     · as views, porém, só trocam de tema quando alguém aperta o botão "Modo
       Escuro", que escreve `data-theme="dark"` no <html> (ver `footer.php`);
     · ninguém apertou nada — então a ESTRUTURA continuou clara e as CORES
       ficaram escuras. Fundo escuro com cartão claro, texto cinza sobre cinza,
       título ilegível. Uma tela quebrada, e quebrada em produção.

   A regra que fica: **quem manda no tema deste app é o botão, não o sistema
   operacional.** Um dia o `prefers-color-scheme` pode voltar — mas só depois que
   ele também definir o `data-theme` inicial, para que views e tokens virem JUNTOS.
   Está registrado no `_continuar.md`.

   `data-theme` é o atributo que o app já usava antes de mim (`toggleTheme()` no
   `footer.php`, memória em `localStorage.lms_theme`). A primeira versão deste
   arquivo escutava `data-bs-theme` e `data-tema`, que não existem em lugar nenhum
   deste projeto — ou seja, o tema escuro do dono nunca teria pegado os tokens.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
    --ead-primaria:        #16323a;
    --ead-primaria-escura: #0d1f23;
    --ead-primaria-clara:  #24505b;
    --ead-primaria-suave:  #14262a;
    --ead-primaria-rgb:    22, 50, 58;
    --ead-sobre-primaria:  #eef2f0;

    --ead-acento:        var(--ouro-centavo);
    --ead-acento-escuro: var(--ouro-escuro);
    --ead-acento-suave:  #33290a;
    --ead-sobre-acento:  var(--noite-petroleo);
    /* No escuro o ouro é legível como texto: 11:1 s/ petróleo, 10:1 s/ grafite. */
    --ead-primaria-texto: var(--ouro-centavo);

    --ead-fundo:        var(--noite-petroleo);
    --ead-superficie:   var(--grafite);
    --ead-superficie-2: #1f2e31;
    --ead-tinta:        #eef2f0; /* 15:1 s/ petróleo · 14:1 s/ grafite */
    --ead-texto-2:      #a4b0ad; /* 7,6:1 s/ petróleo */
    --ead-texto-3:      #8b9794; /* 5,1:1 s/ grafite */
    --ead-borda:        #2a3b3e;
    --ead-borda-forte:  #3a4d50;

    /* Véus do escuro: grafite translúcido, não branco translúcido. */
    --ead-veu:       rgba(24, 37, 40, 0.82);
    --ead-veu-borda: rgba(238, 242, 240, 0.09);
    --ead-listra:    rgba(238, 242, 240, 0.035);

    --ead-aprovado:       var(--menta-crescimento);
    --ead-aprovado-suave: #12291f;
    --ead-aprovado-forte: var(--menta-crescimento);
    --ead-reprovado:       var(--coral-despesa);
    --ead-reprovado-suave: #2e1611;
    --ead-reprovado-forte: #ff8b7a;
    --ead-aviso:        #f0b429;
    --ead-aviso-suave:  #2c2410;
    --ead-aviso-forte:  var(--ouro-centavo);
    --ead-info:         #5fb6c4;
    --ead-info-suave:   #14262a;

    --ead-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 6px rgba(0, 0, 0, 0.25);
    --ead-sombra-2: 0 4px 14px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --ead-sombra-3: 0 12px 34px rgba(0, 0, 0, 0.55);
    --ead-anel-foco: rgba(255, 201, 64, 0.30);

    --bs-body-bg:      var(--ead-fundo);
    --bs-body-color:   var(--ead-tinta);
    --bs-border-color: var(--ead-borda);

    /* No escuro os tons de preenchimento clareiam e as variantes de texto
       acompanham — menta e coral puros sao legiveis sobre grafite. */
    --bs-success:     var(--ead-aprovado);
    --bs-success-rgb: 61, 220, 151;
    --bs-danger:      var(--ead-reprovado);
    --bs-danger-rgb:  255, 107, 87;
    --bs-warning:     var(--ead-acento);
    --bs-warning-rgb: 255, 201, 64;
    --bs-light:       var(--ead-superficie-2);
    --bs-light-rgb:   31, 46, 49;
    --bs-primary:     var(--ead-primaria);
    --bs-primary-rgb: 22, 50, 58;
    --bs-link-color:  var(--ead-acento);
    --bs-link-color-rgb: 255, 201, 64;
}

/* ══════════════════════════════════════════════════════════════════════════
   O MÍNIMO DE APLICAÇÃO — e é mínimo de propósito
   ══════════════════════════════════════════════════════════════════════════
   O recorte do dono foi "só as cores e as fontes". Estas regras trocam pigmento
   e letra; nenhuma delas mexe em tamanho, espaço, posição ou componente.
   ══════════════════════════════════════════════════════════════════════════ */
body {
    font-family: var(--ead-fonte);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand {
    font-family: var(--ead-fonte-titulo);
    letter-spacing: -0.01em;
}

/* Anel de foco visível — acessibilidade, e ouro é o acento da casa. */
:focus-visible {
    outline: 3px solid var(--ead-anel-foco);
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   OS BOTÕES DO BOOTSTRAP
   ══════════════════════════════════════════════════════════════════════════
   Redefinir `--bs-info` e companhia NÃO alcança os botões: o Bootstrap 5.3
   compila a cor DENTRO de cada variante (`.btn-outline-info` traz o seu próprio
   `--bs-btn-color: #0dcaf0`, literal). Foi por isso que sobrou um ícone CIANO no
   painel do gestor depois de toda a paleta já estar trocada — a cor não vinha de
   nenhuma variável que desse para redirecionar.

   Só as variantes que este projeto usa de fato estão aqui. Cada uma segue a
   trava da casa: o que pousa sobre o ouro é PETRÓLEO, nunca branco.
   ══════════════════════════════════════════════════════════════════════════ */

/* Sólidos */
.btn-primary {
    --bs-btn-bg: var(--ead-primaria);            --bs-btn-border-color: var(--ead-primaria);
    --bs-btn-color: var(--ead-sobre-primaria);
    --bs-btn-hover-bg: var(--ead-primaria-escura); --bs-btn-hover-border-color: var(--ead-primaria-escura);
    --bs-btn-hover-color: var(--ead-sobre-primaria);
    --bs-btn-active-bg: var(--ead-primaria-escura); --bs-btn-active-border-color: var(--ead-primaria-escura);
    --bs-btn-active-color: var(--ead-sobre-primaria);
    --bs-btn-disabled-bg: var(--ead-primaria);   --bs-btn-disabled-border-color: var(--ead-primaria);
    --bs-btn-disabled-color: var(--ead-sobre-primaria);
}
.btn-success {
    --bs-btn-bg: var(--ead-aprovado);            --bs-btn-border-color: var(--ead-aprovado);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: var(--ead-aprovado-forte); --bs-btn-hover-border-color: var(--ead-aprovado-forte);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--ead-aprovado-forte); --bs-btn-active-color: #ffffff;
}
.btn-danger {
    --bs-btn-bg: var(--ead-reprovado-forte);     --bs-btn-border-color: var(--ead-reprovado-forte);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #a82f20;                  --bs-btn-hover-border-color: #a82f20;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: #a82f20;                 --bs-btn-active-color: #ffffff;
}
/* ⚠️ O aviso é OURO, e ouro NÃO aceita texto branco (1,54:1). O que vai em cima
   dele é petróleo — 11:1. Esta é a trava que o Keys carrega escrita. */
.btn-warning {
    --bs-btn-bg: var(--ead-acento);              --bs-btn-border-color: var(--ead-acento);
    --bs-btn-color: var(--ead-sobre-acento);
    --bs-btn-hover-bg: var(--ead-acento-escuro); --bs-btn-hover-border-color: var(--ead-acento-escuro);
    --bs-btn-hover-color: var(--ead-sobre-acento);
    --bs-btn-active-bg: var(--ead-acento-escuro); --bs-btn-active-color: var(--ead-sobre-acento);
}
.btn-light {
    --bs-btn-bg: var(--ead-superficie-2);        --bs-btn-border-color: var(--ead-borda);
    --bs-btn-color: var(--ead-tinta);
    --bs-btn-hover-bg: var(--ead-borda);         --bs-btn-hover-border-color: var(--ead-borda-forte);
    --bs-btn-hover-color: var(--ead-tinta);
}

/* Contornados */
.btn-outline-primary {
    --bs-btn-color: var(--ead-primaria);         --bs-btn-border-color: var(--ead-primaria);
    --bs-btn-hover-bg: var(--ead-primaria);      --bs-btn-hover-border-color: var(--ead-primaria);
    --bs-btn-hover-color: var(--ead-sobre-primaria);
    --bs-btn-active-bg: var(--ead-primaria);     --bs-btn-active-color: var(--ead-sobre-primaria);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ead-texto-2);          --bs-btn-border-color: var(--ead-borda-forte);
    --bs-btn-hover-bg: var(--ead-superficie-2);  --bs-btn-hover-border-color: var(--ead-borda-forte);
    --bs-btn-hover-color: var(--ead-tinta);
    --bs-btn-active-bg: var(--ead-superficie-2); --bs-btn-active-color: var(--ead-tinta);
}
.btn-outline-success {
    --bs-btn-color: var(--ead-aprovado-forte);   --bs-btn-border-color: var(--ead-aprovado);
    --bs-btn-hover-bg: var(--ead-aprovado);      --bs-btn-hover-border-color: var(--ead-aprovado);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--ead-aprovado);     --bs-btn-active-color: #ffffff;
}
.btn-outline-danger {
    --bs-btn-color: var(--ead-reprovado-forte);  --bs-btn-border-color: var(--ead-reprovado);
    --bs-btn-hover-bg: var(--ead-reprovado-forte); --bs-btn-hover-border-color: var(--ead-reprovado-forte);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--ead-reprovado-forte); --bs-btn-active-color: #ffffff;
}
.btn-outline-warning {
    --bs-btn-color: var(--ead-aviso-forte);      --bs-btn-border-color: var(--ead-acento);
    --bs-btn-hover-bg: var(--ead-acento);        --bs-btn-hover-border-color: var(--ead-acento);
    --bs-btn-hover-color: var(--ead-sobre-acento);
    --bs-btn-active-bg: var(--ead-acento);       --bs-btn-active-color: var(--ead-sobre-acento);
}
/* O ciano de fábrica. Vira o teal informativo da casa. */
.btn-outline-info {
    --bs-btn-color: var(--ead-info);             --bs-btn-border-color: var(--ead-info);
    --bs-btn-hover-bg: var(--ead-info);          --bs-btn-hover-border-color: var(--ead-info);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--ead-info);         --bs-btn-active-color: #ffffff;
}
.btn-info {
    --bs-btn-bg: var(--ead-info);                --bs-btn-border-color: var(--ead-info);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #235761;                  --bs-btn-hover-border-color: #235761;
    --bs-btn-hover-color: #ffffff;
}

/* Emblemas sólidos — mesma trava do ouro. */
.badge.bg-warning, .badge.text-bg-warning { color: var(--ead-sobre-acento) !important; }
.badge.bg-success, .badge.text-bg-success,
.badge.bg-danger,  .badge.text-bg-danger,
.badge.bg-primary, .badge.text-bg-primary { color: #ffffff !important; }

/* As "pílulas" de navegação (`.nav-pills`) — o botão "Global" do ranking do aluno
   aparecia AZUL-BERRANTE numa tela creme e petróleo. Mesmo caso dos botões: o
   Bootstrap 5.3 compila `#0d6efd` dentro da regra, e redefinir `--bs-primary` não
   alcança. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ead-primaria);
    --bs-nav-pills-link-active-color: var(--ead-sobre-primaria);
    --bs-nav-link-color: var(--ead-texto-2);
    --bs-nav-link-hover-color: var(--ead-tinta);
}

/* Barras de progresso e listras — o azul de fábrica aparecia em toda barra de
   progresso de curso e de retenção. */
.progress { --bs-progress-bg: var(--ead-borda); }
.progress-bar { --bs-progress-bar-bg: var(--ead-acento); color: var(--ead-sobre-acento); }
.progress-bar.bg-success { --bs-progress-bar-bg: var(--ead-aprovado); color: #ffffff; }
.progress-bar.bg-danger  { --bs-progress-bar-bg: var(--ead-reprovado); color: #ffffff; }

/* Campos de formulário — a borda de foco do Bootstrap é azul por padrão. */
.form-control:focus, .form-select:focus {
    border-color: var(--ead-acento-escuro);
    box-shadow: 0 0 0 .25rem var(--ead-anel-foco);
}
.form-check-input:checked {
    background-color: var(--ead-primaria);
    border-color: var(--ead-primaria);
}
.form-check-input:focus { box-shadow: 0 0 0 .25rem var(--ead-anel-foco); }


/* ══════════════════════════════════════════════════════════════════════════
   O QUE MUDA NO TEMA ESCURO — e por que não bastava trocar os tokens
   ══════════════════════════════════════════════════════════════════════════
   `--ead-primaria` no escuro é um petróleo clareado (#16323a). Como PREENCHIMENTO
   de botão ele funciona; como CONTORNO e como TEXTO, não: some contra o cartão
   grafite. Visto numa captura — o botão "Conteúdo" do cartão de curso ficava
   praticamente invisível.
   No escuro, quem faz o papel de "cor de ação" é a tinta clara, e o realce é o ouro.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--ead-tinta);
    --bs-btn-border-color: var(--ead-borda-forte);
    --bs-btn-hover-bg: var(--ead-superficie-2);
    --bs-btn-hover-border-color: var(--ead-acento);
    --bs-btn-hover-color: var(--ead-tinta);
    --bs-btn-active-bg: var(--ead-superficie-2);
    --bs-btn-active-color: var(--ead-tinta);
}
:root[data-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--ead-texto-2);
    --bs-btn-border-color: var(--ead-borda-forte);
    --bs-btn-hover-bg: var(--ead-superficie-2);
    --bs-btn-hover-color: var(--ead-tinta);
}
:root[data-theme="dark"] .nav-pills {
    --bs-nav-pills-link-active-bg: var(--ead-acento);
    --bs-nav-pills-link-active-color: var(--ead-sobre-acento);
}