/* =========================================================
   TEMA CLARO — Escola de Eletroterapia
   ---------------------------------------------------------
   Ativado quando <html> recebe a classe "light" (ver
   includes/tema_boot.php — o claro é o padrão desde out/2026). Todas as páginas de aluno usam
   classes Tailwind escuras escritas diretamente no HTML; este
   arquivo remapeia essas classes para uma paleta clara sem
   precisar tocar em cada página.

   Regra de especificidade: "html.light .classe" (0,2,1) vence
   qualquer utilitário do Tailwind (0,1,0) sem !important.
   ========================================================= */

html.light {
    --ee-bg:        #eef2f7;   /* fundo da página */
    --ee-surface:   #ffffff;   /* cartões e painéis */
    --ee-surface-2: #f1f5f9;   /* cartão secundário / inputs */
    --ee-surface-3: #e2e8f0;   /* chips, botões neutros */
    --ee-surface-4: #cbd5e1;   /* hover de botões neutros */
    --ee-text:      #0f172a;   /* texto principal */
    --ee-text-2:    #1e293b;
    --ee-text-3:    #334155;
    --ee-muted:     #475569;   /* texto secundário */
    --ee-muted-2:   #526077;
    --ee-faint:     #5f6e84;   /* texto apagado (ainda legível) */
    --ee-border:    rgba(15, 23, 42, 0.08);
    --ee-border-2:  rgba(15, 23, 42, 0.14);
    --ee-border-3:  rgba(15, 23, 42, 0.22);
    --ee-tint-5:    rgba(15, 23, 42, 0.04);
    --ee-tint-10:   rgba(15, 23, 42, 0.07);
    --ee-tint-20:   rgba(15, 23, 42, 0.12);
    --ee-tint-30:   rgba(15, 23, 42, 0.18);
    --ee-brand:     #132575;

    color-scheme: light;
    background-color: var(--ee-bg);
}

/* ---------- Base ---------- */
html.light body { background-color: var(--ee-bg); color: var(--ee-muted); }

html.light ::-webkit-scrollbar-track { background: var(--ee-bg); }
html.light ::-webkit-scrollbar-thumb { background: #cbd5e1; border-color: var(--ee-bg); }
html.light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

html.light .glass {
    background: rgba(255, 255, 255, 0.72);
    border-color: var(--ee-border);
}

/* Estilos próprios repetidos em várias páginas */
html.light .tech-bg {
    background-color: var(--ee-bg);
    background-image: radial-gradient(at 50% 0%, rgba(19, 37, 117, 0.08) 0px, transparent 50%);
}
html.light .card-instagram { background-color: var(--ee-surface); border-color: var(--ee-border); }
html.light .input-glass { background: var(--ee-surface); border-color: var(--ee-border-2); color: var(--ee-text); }
html.light .input-glass:focus { background: var(--ee-surface); border-color: var(--ee-brand); box-shadow: 0 0 0 4px rgba(19, 37, 117, 0.12); }
html.light .input-disabled { background: var(--ee-tint-5); color: var(--ee-faint); border-color: var(--ee-border-2); }

/* ---------- Logotipo ---------- */
html.light .ee-logo-escuro { display: none; }
html.light .ee-logo-claro { display: block; }

/* ---------- Fundos de página ---------- */
html.light .bg-slate-950,
html.light .bg-black,
html.light .bg-\[\#000\],
html.light .bg-\[\#000000\] { background-color: var(--ee-bg); }

/* Barras fixas/translúcidas (cabeçalho, menu inferior, barra de resposta) */
html.light .bg-slate-950\/80,
html.light .bg-slate-950\/90,
html.light .bg-slate-950\/95,
html.light .bg-black\/80,
html.light .bg-black\/90,
html.light .bg-black\/95 { background-color: rgba(238, 242, 247, 0.92); }

/* Fundo escurecido atrás de modais e lightbox (cobre a tela inteira) */
html.light .inset-0.bg-black\/80,
html.light .inset-0.bg-black\/90 { background-color: rgba(15, 23, 42, 0.6); }

/* Selos pequenos sobre miniaturas (duração, "novo" etc.) continuam escuros */
html.light .absolute.bg-black\/80:not(.inset-0) { background-color: rgba(0, 0, 0, 0.75); }
html.light .absolute.bg-black\/80:not(.inset-0).text-white,
html.light .absolute.bg-black\/80:not(.inset-0) .text-white { color: #ffffff; }

/* Contêineres de vídeo/imagem continuam pretos (letterbox) */
html.light .bg-black.aspect-video,
html.light .bg-black.aspect-square,
html.light .bg-black[class*="aspect-\["],
html.light img.bg-black,
html.light video.bg-black { background-color: #000000; }

/* ---------- Cartões e superfícies ---------- */
html.light .bg-slate-900,
html.light .bg-neutral-900,
html.light .bg-zinc-900,
html.light .bg-gray-900,
html.light .bg-stone-900,
html.light .bg-neutral-950,
html.light .bg-zinc-950,
html.light .bg-gray-950,
html.light .bg-\[\#0a0a0a\],
html.light .bg-\[\#0f172a\],
html.light .bg-\[\#050505\],
html.light .bg-\[\#080808\],
html.light .bg-\[\#0d0d0d\],
html.light .bg-\[\#111\],
html.light .bg-\[\#111111\],
html.light .bg-\[\#121212\],
html.light .bg-\[\#141414\],
html.light .bg-\[\#151515\],
html.light .bg-\[\#161616\],
html.light .bg-\[\#171717\],
html.light .bg-\[\#181818\],
html.light .bg-\[\#1a1a1a\],
html.light .bg-\[\#1c1c1c\],
html.light .bg-\[\#1e1e1e\] { background-color: var(--ee-surface); }

/* Cabeçalho das ferramentas de aula (renderViewHeader em aula.php) */
html.light .bg-\[\#080808\].rounded-t-\[24px\] { background-color: var(--ee-surface-2); }

/* Escalas cinza usadas por ferramentas guardadas no banco */
html.light .bg-neutral-700,
html.light .bg-zinc-700,
html.light .bg-stone-700,
html.light .bg-zinc-800,
html.light .bg-stone-800,
html.light .bg-\[\#202020\],
html.light .bg-\[\#222\],
html.light .bg-\[\#222222\],
html.light .bg-\[\#262626\],
html.light .bg-\[\#2a2a2a\],
html.light .bg-\[\#2d2d2d\],
html.light .bg-\[\#333\],
html.light .bg-\[\#333333\] { background-color: var(--ee-surface-3); }
html.light .bg-neutral-600,
html.light .bg-zinc-600,
html.light .bg-gray-600,
html.light .bg-slate-600 { background-color: var(--ee-surface-4); }
html.light .bg-gray-400,
html.light .bg-slate-400,
html.light .bg-zinc-400,
html.light .bg-neutral-400 { background-color: var(--ee-surface); border-color: var(--ee-border-2); }
html.light .text-gray-100, html.light .text-zinc-100, html.light .text-neutral-100, html.light .text-stone-100,
html.light .text-gray-200, html.light .text-zinc-200, html.light .text-neutral-200, html.light .text-stone-200 { color: var(--ee-text-2); }
html.light .text-gray-300, html.light .text-zinc-300, html.light .text-neutral-300, html.light .text-stone-300 { color: var(--ee-text-3); }
html.light .text-gray-400, html.light .text-zinc-400, html.light .text-neutral-400, html.light .text-stone-400 { color: var(--ee-muted); }
html.light .text-gray-500, html.light .text-zinc-500, html.light .text-neutral-500, html.light .text-stone-500 { color: var(--ee-muted-2); }
html.light .text-gray-600, html.light .text-zinc-600, html.light .text-neutral-600 { color: var(--ee-faint); }
html.light .border-gray-700, html.light .border-zinc-700, html.light .border-stone-700,
html.light .border-gray-800, html.light .border-zinc-800, html.light .border-neutral-800, html.light .border-stone-800 { border-color: var(--ee-border-2); }
html.light .border-gray-600, html.light .border-zinc-600, html.light .border-neutral-600, html.light .border-slate-600 { border-color: var(--ee-border-3); }
html.light .divide-white\/5 > :not([hidden]) ~ :not([hidden]),
html.light .divide-white\/10 > :not([hidden]) ~ :not([hidden]),
html.light .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ee-border); }

html.light .bg-slate-900\/95,
html.light .bg-slate-900\/80,
html.light .bg-slate-900\/90,
html.light .bg-\[\#0a0a0a\]\/80 { background-color: rgba(255, 255, 255, 0.94); }
html.light .bg-slate-900\/60,
html.light .bg-slate-900\/50,
html.light .bg-slate-900\/40,
html.light .bg-slate-900\/30,
html.light .bg-\[\#0a0a0a\]\/50 { background-color: rgba(255, 255, 255, 0.6); }

html.light .bg-slate-800,
html.light .bg-neutral-800,
html.light .bg-gray-800,
html.light .bg-slate-800\/90,
html.light .bg-slate-800\/80 { background-color: var(--ee-surface-3); }
html.light .bg-slate-800\/50 { background-color: rgba(226, 232, 240, 0.6); }
html.light .bg-slate-700,
html.light .bg-gray-700 { background-color: var(--ee-surface-4); }
html.light .hover\:bg-slate-700:hover,
html.light .hover\:bg-slate-800:hover { background-color: var(--ee-surface-4); }
html.light .disabled\:bg-slate-800:disabled { background-color: var(--ee-surface-3); }

html.light .bg-black\/40,
html.light .bg-black\/50,
html.light .bg-black\/60,
html.light .bg-black\/20 { background-color: var(--ee-tint-5); }
html.light .hover\:bg-black\/70:hover,
html.light .hover\:bg-black\/10:hover { background-color: var(--ee-tint-10); }

/* Tons translúcidos brancos viram tons translúcidos escuros */
html.light .bg-white\/5  { background-color: var(--ee-tint-5); }
html.light .bg-white\/10 { background-color: var(--ee-tint-10); }
html.light .bg-white\/20 { background-color: var(--ee-tint-20); }
html.light .hover\:bg-white\/5:hover  { background-color: var(--ee-tint-10); }
html.light .hover\:bg-white\/10:hover { background-color: var(--ee-tint-20); }
html.light .hover\:bg-white\/20:hover,
html.light .hover\:bg-white\/30:hover { background-color: var(--ee-tint-30); }
html.light .blockquote\:bg-white\/5 blockquote { background-color: var(--ee-tint-5); }
html.light .code\:bg-slate-800\/50 code { background-color: var(--ee-surface-3); }

html.light .bg-slate-500\/10 { background-color: rgba(100, 116, 139, 0.12); }
html.light .bg-slate-500\/20,
html.light .hover\:bg-slate-500\/20:hover { background-color: rgba(100, 116, 139, 0.2); }

/* ---------- Bordas ---------- */
html.light .border-white\/5,
html.light .border-slate-800,
html.light .border-slate-950 { border-color: var(--ee-border); }
html.light .border-white\/10,
html.light .border-slate-700,
html.light .border-slate-700\/50,
html.light .border-neutral-700 { border-color: var(--ee-border-2); }
html.light .border-white\/20,
html.light .border-white\/30 { border-color: var(--ee-border-3); }
html.light .border-white\/80 { border-color: rgba(15, 23, 42, 0.5); }
html.light .hover\:border-white\/10:hover { border-color: var(--ee-border-2); }
html.light .hover\:border-white\/20:hover,
html.light .hover\:border-white\/30:hover,
html.light .hover\:border-white\/40:hover { border-color: var(--ee-border-3); }
html.light .focus\:border-white:focus { border-color: var(--ee-brand); }
html.light .ring-white\/10 { --tw-ring-color: var(--ee-border-2); }
html.light .focus\:ring-white\/20:focus { --tw-ring-color: rgba(19, 37, 117, 0.25); }
html.light .border-slate-500\/30 { border-color: rgba(100, 116, 139, 0.35); }
html.light .border-slate-500\/20 { border-color: rgba(100, 116, 139, 0.25); }
html.light .border-black { border-color: var(--ee-bg); }

/* ---------- Texto ---------- */
html.light .text-white          { color: var(--ee-text); }
html.light .text-slate-200      { color: var(--ee-text-2); }
html.light .text-slate-300      { color: var(--ee-text-3); }
html.light .text-slate-400      { color: var(--ee-muted); }
html.light .text-slate-500      { color: var(--ee-muted-2); }
html.light .text-slate-600      { color: var(--ee-faint); }
html.light .text-slate-700      { color: #64748b; }
html.light .text-slate-800      { color: #64748b; }
html.light .text-white\/70      { color: rgba(15, 23, 42, 0.7); }
html.light .text-white\/10      { color: rgba(15, 23, 42, 0.12); }
html.light .hover\:text-white:hover      { color: var(--ee-text); }
html.light .hover\:text-slate-200:hover  { color: var(--ee-text-2); }
html.light .hover\:text-slate-300:hover  { color: var(--ee-text-3); }
html.light .hover\:text-slate-400:hover  { color: var(--ee-muted); }
html.light .hover\:text-white\/30:hover  { color: rgba(15, 23, 42, 0.35); }
html.light .disabled\:text-slate-500:disabled { color: var(--ee-faint); }
html.light .placeholder\:text-slate-500::placeholder,
html.light .placeholder\:text-slate-600::placeholder,
html.light .placeholder-slate-500::placeholder,
html.light .placeholder-slate-600::placeholder { color: var(--ee-faint); }
html.light .strong\:text-white strong,
html.light .headings\:text-white :is(h1, h2, h3, h4, h5, h6) { color: var(--ee-text); }
html.light .checked\:text-white:checked { color: #ffffff; }

/* Cabeçalho (nav) usa text-white como "ativo" */
html.light .group-hover\:text-white:hover,
html.light .group:hover .group-hover\:text-white { color: var(--ee-text); }

/* ---------- Exceções: texto branco sobre fundos coloridos sólidos ----------
   Botões e selos com fundo saturado (azul da marca, vermelho, verde...)
   precisam manter o texto branco. */
html.light .bg-brand-accent.text-white,
html.light .bg-brand-accent .text-white,
html.light .bg-brand-accent\/90.text-white,
html.light .bg-brand-accent\/90 .text-white,
html.light .bg-brand.text-white,
html.light .bg-brand .text-white,
html.light .bg-brand\/80.text-white,
html.light .bg-brand\/80 .text-white,
html.light .bg-brand-light.text-white,
html.light .bg-brand-light .text-white,
html.light .bg-blue-600.text-white,
html.light .bg-blue-600 .text-white,
html.light .bg-blue-500.text-white,
html.light .bg-blue-500 .text-white,
html.light .bg-orange-500.text-white,
html.light .bg-orange-500 .text-white,
html.light .bg-red-600.text-white,
html.light .bg-red-600 .text-white,
html.light .bg-red-500.text-white,
html.light .bg-red-500 .text-white,
html.light .bg-rose-600.text-white,
html.light .bg-rose-600 .text-white,
html.light .bg-emerald-500.text-white,
html.light .bg-emerald-500 .text-white,
html.light .bg-emerald-600.text-white,
html.light .bg-emerald-600 .text-white,
html.light .bg-emerald-500\/90.text-white,
html.light .bg-emerald-500\/90 .text-white,
html.light .bg-green-500.text-white,
html.light .bg-green-500 .text-white,
html.light .bg-green-600.text-white,
html.light .bg-green-600 .text-white,
html.light .bg-purple-500.text-white,
html.light .bg-purple-500 .text-white,
html.light .bg-yellow-500.text-white,
html.light .bg-yellow-500 .text-white,
html.light .bg-indigo-600.text-white,
html.light .bg-indigo-600 .text-white,
html.light .hover\:bg-blue-600:hover.text-white,
html.light .hover\:bg-blue-500:hover.text-white,
html.light .hover\:bg-brand-accent:hover.text-white,
html.light .hover\:bg-brand-light:hover.text-white,
html.light .hover\:bg-orange-600:hover.text-white,
html.light .hover\:bg-red-500:hover.text-white,
html.light .hover\:bg-red-600:hover.text-white,
html.light .hover\:bg-rose-700:hover.text-white,
html.light .hover\:bg-emerald-400:hover.text-white,
html.light .hover\:bg-emerald-500:hover.text-white,
html.light .hover\:bg-green-600:hover.text-white,
html.light .hover\:text-white:hover[class*="hover\:bg-brand"],
html.light .hover\:text-white:hover[class*="hover\:bg-blue"],
html.light .hover\:text-white:hover[class*="hover\:bg-red"],
html.light .hover\:text-white:hover[class*="hover\:bg-emerald"] { color: #ffffff; }

/* Gradientes saturados (marca) e sobreposições escuras em imagens */
html.light .from-brand.text-white,
html.light .from-brand .text-white,
html.light .from-brand-accent.text-white,
html.light .from-brand-accent .text-white,
html.light .from-slate-800.text-white,
html.light .from-slate-800 .text-white,
html.light .from-slate-700.text-white,
html.light .from-slate-700 .text-white,
html.light .from-\[\#132575\].text-white,
html.light .from-\[\#132575\] .text-white,
html.light .from-\[\#0B1A42\].text-white,
html.light .from-\[\#0B1A42\] .text-white,
html.light .aspect-video .text-white,
html.light .aspect-video.text-white,
html.light .bg-brand-accent.text-white svg,
html.light .from-brand.text-white svg { color: #ffffff; }

/* Dentro de cartões com gradiente escuro/da marca, o texto cinza continua claro */
html.light .from-brand .text-slate-200,
html.light .from-brand .text-slate-300,
html.light .from-brand .text-slate-400,
html.light .from-brand-accent .text-slate-200,
html.light .from-brand-accent .text-slate-300,
html.light .from-brand-accent .text-slate-400,
html.light .from-slate-800 .text-slate-200,
html.light .from-slate-800 .text-slate-300,
html.light .from-slate-800 .text-slate-400,
html.light .from-\[\#132575\] .text-slate-200,
html.light .from-\[\#132575\] .text-slate-300,
html.light .from-\[\#132575\] .text-slate-400,
html.light .from-\[\#0B1A42\] .text-slate-200,
html.light .from-\[\#0B1A42\] .text-slate-300,
html.light .from-\[\#0B1A42\] .text-slate-400 { color: #cbd5e1; }
html.light .from-\[\#132575\] .hover\:text-white:hover,
html.light .from-brand .hover\:text-white:hover { color: #ffffff; }

/* Miniaturas de vídeo/imagem: legendas continuam claras */
html.light .aspect-video .text-slate-300,
html.light .aspect-video .text-slate-400 { color: #e2e8f0; }

/* ---------- Detalhes ---------- */
html.light .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(15, 23, 42, 0.06); }
html.light .border-slate-950.bg-red-500 { border-color: var(--ee-bg); } /* bolinha de notificação */
html.light .ring-offset-slate-950,
html.light .focus\:ring-offset-slate-950:focus { --tw-ring-offset-color: var(--ee-bg); }

/* ---------- Ferramentas de aula (HTML salvo no banco, dentro de .ee-ferramenta) ----------
   Variantes translúcidas das escalas cinza e azuis escuros que essas ferramentas usam. */
html.light .bg-gray-800\/50, html.light .bg-gray-800\/60, html.light .bg-gray-800\/80,
html.light .bg-gray-900\/50, html.light .bg-gray-900\/60, html.light .bg-gray-900\/80, html.light .bg-gray-900\/90,
html.light .bg-zinc-800\/50, html.light .bg-zinc-800\/60, html.light .bg-zinc-800\/80,
html.light .bg-zinc-900\/50, html.light .bg-zinc-900\/60, html.light .bg-zinc-900\/80, html.light .bg-zinc-900\/90,
html.light .bg-neutral-800\/50, html.light .bg-neutral-900\/50, html.light .bg-neutral-900\/80,
html.light .bg-slate-700\/50, html.light .bg-gray-700\/50, html.light .bg-zinc-700\/50 { background-color: rgba(255, 255, 255, 0.7); }
html.light .bg-gray-800\/30, html.light .bg-zinc-800\/30, html.light .bg-gray-900\/30, html.light .bg-zinc-900\/30,
html.light .bg-gray-700\/30, html.light .bg-zinc-700\/30, html.light .bg-slate-700\/30 { background-color: var(--ee-tint-5); }
html.light .hover\:bg-gray-700:hover, html.light .hover\:bg-zinc-700:hover, html.light .hover\:bg-neutral-700:hover,
html.light .hover\:bg-gray-800:hover, html.light .hover\:bg-zinc-800:hover, html.light .hover\:bg-neutral-800:hover { background-color: var(--ee-surface-4); }
html.light .placeholder-gray-500::placeholder, html.light .placeholder-zinc-500::placeholder,
html.light .placeholder\:text-gray-500::placeholder, html.light .placeholder\:text-zinc-500::placeholder { color: var(--ee-faint); }
html.light .text-gray-50, html.light .text-zinc-50, html.light .text-neutral-50 { color: var(--ee-text); }
html.light .border-gray-700\/50, html.light .border-zinc-700\/50, html.light .border-slate-700\/50 { border-color: var(--ee-border-2); }

/* Texto branco continua branco sobre azuis/roxos escuros e outras cores sólidas (balões de chat, botões) */
html.light .bg-blue-700.text-white,  html.light .bg-blue-700 .text-white,
html.light .bg-blue-800.text-white,  html.light .bg-blue-800 .text-white,
html.light .bg-blue-900.text-white,  html.light .bg-blue-900 .text-white,
html.light .bg-indigo-500.text-white, html.light .bg-indigo-500 .text-white,
html.light .bg-indigo-700.text-white, html.light .bg-indigo-700 .text-white,
html.light .bg-indigo-800.text-white, html.light .bg-indigo-800 .text-white,
html.light .bg-indigo-900.text-white, html.light .bg-indigo-900 .text-white,
html.light .bg-purple-600.text-white, html.light .bg-purple-600 .text-white,
html.light .bg-purple-700.text-white, html.light .bg-purple-700 .text-white,
html.light .bg-violet-600.text-white, html.light .bg-violet-600 .text-white,
html.light .bg-sky-600.text-white,    html.light .bg-sky-600 .text-white,
html.light .bg-cyan-600.text-white,   html.light .bg-cyan-600 .text-white,
html.light .bg-teal-600.text-white,   html.light .bg-teal-600 .text-white,
html.light .bg-emerald-700.text-white, html.light .bg-emerald-700 .text-white,
html.light .bg-green-700.text-white,  html.light .bg-green-700 .text-white,
html.light .bg-red-700.text-white,    html.light .bg-red-700 .text-white,
html.light .bg-rose-500.text-white,   html.light .bg-rose-500 .text-white,
html.light .bg-orange-600.text-white, html.light .bg-orange-600 .text-white,
html.light .bg-amber-600.text-white,  html.light .bg-amber-600 .text-white,
html.light .bg-\[\#132575\].text-white, html.light .bg-\[\#132575\] .text-white,
html.light .bg-\[\#1e3a8a\].text-white, html.light .bg-\[\#1e3a8a\] .text-white,
html.light .bg-\[\#0B1A42\].text-white, html.light .bg-\[\#0B1A42\] .text-white { color: #ffffff; }

/* Menu suspenso do usuário */
html.light #user-dropdown {
    background-color: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}

/* Cabeçalho fixo */
html.light header.bg-slate-950\/80 { background-color: rgba(255, 255, 255, 0.82); }

/* =========================================================
   CORES DE DESTAQUE (out/2026)
   ---------------------------------------------------------
   Os tons 300/400/500 foram escolhidos para fundo escuro e
   ficam apagados sobre branco (contraste < 3:1). No claro
   eles viram os tons 600/700 da mesma cor (contraste ≥ 4.5:1).
   ========================================================= */
html.light .text-emerald-300, html.light .text-emerald-400, html.light .text-emerald-500,
html.light .text-emerald-500\/80,
html.light .hover\:text-emerald-300:hover, html.light .hover\:text-emerald-400:hover,
html.light .group:hover .group-hover\:text-emerald-300,
html.light .group:hover .group-hover\:text-emerald-400 { color: #047857; }
html.light .text-green-300, html.light .text-green-400, html.light .text-green-500 { color: #166534; }
html.light .text-teal-300, html.light .text-teal-400 { color: #0f766e; }
html.light .text-cyan-300, html.light .text-cyan-400 { color: #0e7490; }
html.light .text-sky-300, html.light .text-sky-400 { color: #0369a1; }

html.light .text-blue-300, html.light .text-blue-400, html.light .text-blue-500,
html.light .text-brand-accent, html.light .text-brand-glow,
html.light .hover\:text-blue-300:hover, html.light .hover\:text-blue-400:hover,
html.light .hover\:text-brand-accent:hover, html.light .hover\:text-brand-glow:hover,
html.light .group:hover .group-hover\:text-brand-accent,
html.light .group:hover .group-hover\:text-brand-glow,
html.light .peer:checked ~ .peer-checked\:text-brand-accent,
html.light .file\:text-brand-accent::file-selector-button { color: #1d4ed8; }
html.light .group:hover .group-hover\:text-brand-light { color: #1e3a8a; }
html.light .text-indigo-300, html.light .text-indigo-400, html.light .text-indigo-500 { color: #4338ca; }
html.light .text-purple-300, html.light .text-purple-400, html.light .text-purple-500,
html.light .text-violet-300, html.light .text-violet-400 { color: #7e22ce; }
html.light .text-fuchsia-300, html.light .text-fuchsia-400 { color: #a21caf; }
html.light .text-pink-300, html.light .text-pink-400, html.light .text-pink-500,
html.light .hover\:text-pink-500:hover { color: #be185d; }

html.light .text-red-300, html.light .text-red-400, html.light .text-red-500,
html.light .hover\:text-red-300:hover, html.light .hover\:text-red-400:hover,
html.light .hover\:text-red-500:hover { color: #b91c1c; }
html.light .text-rose-300, html.light .text-rose-400, html.light .text-rose-500 { color: #be123c; }
html.light .text-orange-300, html.light .text-orange-400, html.light .text-orange-500 { color: #c2410c; }
html.light .text-amber-300, html.light .text-amber-400, html.light .text-amber-500 { color: #92400e; }
html.light .text-yellow-300, html.light .text-yellow-400, html.light .text-yellow-500,
html.light .hover\:text-yellow-400:hover { color: #854d0e; }

/* Ícone do sol no alternador de tema continua amarelo vivo */
html.light #ee-tema-icone-sol { color: #f59e0b; }

/* Fundos translúcidos coloridos: no branco precisam de um pouco mais de cor */
html.light .bg-emerald-500\/10, html.light .bg-green-500\/10 { background-color: rgba(16, 185, 129, 0.12); }
html.light .bg-blue-500\/10, html.light .bg-brand-accent\/10 { background-color: rgba(59, 130, 246, 0.12); }
html.light .bg-red-500\/10, html.light .bg-rose-500\/10 { background-color: rgba(239, 68, 68, 0.1); }
html.light .bg-amber-500\/10, html.light .bg-yellow-500\/10 { background-color: rgba(245, 158, 11, 0.14); }
html.light .border-emerald-500\/20, html.light .border-green-500\/20 { border-color: rgba(16, 185, 129, 0.35); }
html.light .border-blue-500\/20, html.light .border-brand-accent\/20 { border-color: rgba(59, 130, 246, 0.35); }
html.light .border-red-500\/20, html.light .border-rose-500\/20 { border-color: rgba(239, 68, 68, 0.3); }
html.light .border-amber-500\/20, html.light .border-yellow-500\/20 { border-color: rgba(245, 158, 11, 0.4); }

/* Translúcidos escuros restantes */
html.light .bg-slate-950\/50,
html.light .bg-slate-950\/80 { background-color: var(--ee-tint-5); }
html.light .bg-black\/30,
html.light .bg-black\/70 { background-color: var(--ee-tint-10); }
html.light .bg-\[\#020617\],
html.light .bg-\[\#050a14\],
html.light .bg-\[\#0f1115\],
html.light .bg-\[\#0a0a0a\]\/50,
html.light .bg-\[\#0a0a0a\]\/95 { background-color: var(--ee-surface); }
html.light .bg-\[\#272727\],
html.light .hover\:bg-\[\#3f3f3f\]:hover { background-color: var(--ee-surface-3); }
html.light .border-slate-800\/50,
html.light .border-slate-900 { border-color: var(--ee-border); }
html.light .text-slate-100 { color: var(--ee-text); }
html.light .text-white\/90 { color: rgba(15, 23, 42, 0.9); }
html.light .peer:focus ~ .peer-focus\:text-white,
html.light .peer:checked ~ .peer-checked\:text-white:not([class*="peer-checked:bg-"]) { color: var(--ee-text); }
html.light .file\:bg-slate-800::file-selector-button { background-color: var(--ee-surface-3); }
html.light .file\:text-slate-300::file-selector-button { color: var(--ee-text-3); }

html.light .text-brand-light,
html.light .hover\:text-brand-light:hover { color: #1d4ed8; }
html.light .border-brand-light { border-color: #1d4ed8; }

/* Variantes com opacidade (ficam ilegíveis no branco) */
html.light .text-emerald-500\/70, html.light .text-emerald-500\/80 { color: #047857; }
html.light .text-amber-500\/70, html.light .text-amber-500\/80 { color: #b45309; }
html.light .text-brand-accent\/60 { color: #2563eb; }

/* Tons muito claros (100/200) usados como texto de apoio em cartões
   que eram escuros e no claro ficaram claros */
html.light .text-blue-100, html.light .text-blue-200, html.light .text-blue-200\/70,
html.light .text-blue-200\/80, html.light .text-blue-200\/90 { color: #1e40af; }
html.light .text-emerald-100, html.light .text-emerald-100\/70, html.light .text-emerald-100\/80,
html.light .text-emerald-200 { color: #065f46; }
html.light .text-amber-100, html.light .text-amber-200, html.light .text-amber-200\/80 { color: #92400e; }

/* Rótulos flutuantes dos formulários (login, cadastro, senha) */
html.light .peer:placeholder-shown ~ .peer-placeholder-shown\:text-slate-300,
html.light .peer:placeholder-shown ~ .peer-placeholder-shown\:text-slate-400 { color: var(--ee-muted); }
html.light .peer:placeholder-shown ~ .peer-placeholder-shown\:text-slate-500 { color: var(--ee-muted-2); }
html.light .peer:focus ~ .peer-focus\:text-brand-accent { color: #1d4ed8; }

/* ---------- Botões sólidos ----------
   Azul/verde/laranja "500" com texto branco ficam abaixo de 4.5:1.
   No claro usamos o tom seguinte, que mantém a identidade e passa no contraste. */
html.light .bg-brand-accent, html.light .bg-blue-500 { background-color: #2563eb; }
html.light .hover\:bg-brand-accent:hover, html.light .hover\:bg-blue-500:hover,
html.light .hover\:bg-blue-600:hover { background-color: #1d4ed8; }
html.light .bg-emerald-500, html.light .bg-emerald-600 { background-color: #047857; }
html.light .hover\:bg-emerald-400:hover, html.light .hover\:bg-emerald-500:hover { background-color: #065f46; }
html.light .bg-green-500, html.light .bg-green-600 { background-color: #15803d; }
html.light .hover\:bg-green-500:hover, html.light .hover\:bg-green-600:hover { background-color: #166534; }
html.light .bg-orange-500 { background-color: #c2410c; }
html.light .hover\:bg-orange-600:hover { background-color: #9a3412; }
html.light .bg-rose-500 { background-color: #e11d48; }
html.light .bg-red-500 { background-color: #dc2626; }
/* Bolinhas/indicadores pequenos sem texto podem continuar vivos */
html.light .rounded-full.bg-emerald-500:empty, html.light .rounded-full.bg-green-500:empty { background-color: #10b981; }
html.light .rounded-full.bg-red-500:empty { background-color: #ef4444; }

/* Botões com gradiente próprio (btn-glow etc.) mantêm o texto branco */
html.light .btn-glow, html.light .btn-glow .text-white, html.light .btn-glow.text-white,
html.light .btn-blue-glow, html.light .btn-blue-glow .text-white, html.light .btn-blue-glow.text-white,
html.light .btn-primary, html.light .btn-primary .text-white { color: #ffffff; }

/* ---------- Áreas que continuam escuras/coloridas no tema claro ----------
   Cartões com gradiente da marca, fundos azuis sólidos e miniaturas de vídeo:
   aqui o texto volta aos tons claros originais. */
html.light :is(.from-brand, .from-brand-accent, .from-\[\#132575\], .from-\[\#0B1A42\], .from-slate-800, .from-slate-700, .from-blue-600, .from-blue-700, .from-blue-900, .from-indigo-600, .bg-blue-600, .bg-blue-700, .bg-blue-900, .bg-brand, .bg-\[\#132575\], .bg-\[\#1e3a8a\], .aspect-video)
    :is(.text-white, .text-slate-100, .text-slate-200) { color: #ffffff; }
html.light :is(.from-brand, .from-brand-accent, .from-\[\#132575\], .from-\[\#0B1A42\], .from-slate-800, .from-slate-700, .from-blue-600, .from-blue-700, .from-blue-900, .from-indigo-600, .bg-blue-600, .bg-blue-700, .bg-blue-900, .bg-brand, .bg-\[\#132575\], .bg-\[\#1e3a8a\], .aspect-video)
    :is(.text-blue-100, .text-blue-200, .text-blue-200\/70, .text-blue-200\/80, .text-blue-200\/90) { color: #dbeafe; }
html.light :is(.from-brand, .from-brand-accent, .from-\[\#132575\], .from-\[\#0B1A42\], .from-slate-800, .from-slate-700, .from-blue-600, .from-blue-700, .from-blue-900, .from-indigo-600, .bg-blue-600, .bg-blue-700, .bg-blue-900, .bg-brand, .bg-\[\#132575\], .bg-\[\#1e3a8a\], .aspect-video)
    :is(.text-emerald-300, .text-emerald-400, .text-green-400) { color: #34d399; }
html.light :is(.from-brand, .from-brand-accent, .from-\[\#132575\], .from-\[\#0B1A42\], .from-slate-800, .from-slate-700, .from-blue-600, .from-blue-700, .from-blue-900, .from-indigo-600, .bg-blue-600, .bg-blue-700, .bg-blue-900, .bg-brand, .bg-\[\#132575\], .bg-\[\#1e3a8a\], .aspect-video)
    :is(.text-blue-300, .text-blue-400, .text-brand-accent, .text-brand-glow) { color: #93c5fd; }
html.light :is(.from-brand, .from-brand-accent, .from-\[\#132575\], .from-\[\#0B1A42\], .from-slate-800, .from-slate-700, .from-blue-600, .from-blue-700, .from-blue-900, .from-indigo-600, .bg-blue-600, .bg-blue-700, .bg-blue-900, .bg-brand, .bg-\[\#132575\], .bg-\[\#1e3a8a\], .aspect-video)
    :is(.text-amber-300, .text-amber-400, .text-yellow-400, .text-yellow-500) { color: #fcd34d; }
html.light :is(.from-brand, .from-brand-accent, .from-\[\#132575\], .from-\[\#0B1A42\], .from-slate-800, .from-slate-700, .from-blue-600, .from-blue-700, .from-blue-900, .from-indigo-600, .bg-blue-600, .bg-blue-700, .bg-blue-900, .bg-brand, .bg-\[\#132575\], .bg-\[\#1e3a8a\], .aspect-video)
    :is(.text-red-400, .text-rose-400) { color: #fca5a5; }

/* Texto colorido sobre botão sólido continua branco */
html.light :is(.bg-emerald-500, .bg-emerald-600, .bg-blue-600, .bg-brand-accent, .bg-red-500, .bg-red-600) :is(.text-emerald-400, .text-blue-400, .text-red-400) { color: #ffffff; }
html.light .hover\:bg-brand-light:hover, html.light .hover\:bg-blue-700:hover, html.light .hover\:bg-blue-800:hover { background-color: #1e40af; }

/* =========================================================
   CLASSES PRÓPRIAS DAS PÁGINAS (<style> de cada arquivo)
   ========================================================= */
html.light .glass-panel { background: rgba(255, 255, 255, 0.75); border-color: var(--ee-border); }
html.light .tech-grid {
    background-color: var(--ee-bg);
    background-image: linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}
html.light .premium-bg,
html.light body.premium-bg {
    background-color: var(--ee-bg);
    background-image: radial-gradient(at 0% 0%, rgba(19, 37, 117, 0.08) 0px, transparent 50%),
                      radial-gradient(at 100% 0%, rgba(59, 130, 246, 0.08) 0px, transparent 50%);
}
html.light .premium-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.18);
}
html.light .card-dark {
    background-color: var(--ee-surface);
    border-color: var(--ee-border);
    box-shadow: 0 10px 30px -15px rgba(15, 23, 42, 0.15);
}

/* Campos de formulário próprios */
html.light .checkout-input,
html.light .input-chat,
html.light .input-admin,
html.light .input-code {
    background: var(--ee-surface);
    border-color: var(--ee-border-3);
    color: var(--ee-text);
}
html.light .checkout-input:focus,
html.light .input-chat:focus,
html.light .input-admin:focus {
    background: var(--ee-surface);
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
html.light .input-glass:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
html.light select option { background-color: #ffffff; color: var(--ee-text); }
html.light .search-input:focus + .search-icon { color: var(--ee-text); }

/* Abas */
html.light .tab-btn.active,
html.light .tab-active,
html.light .active-tab { color: var(--ee-text); }
html.light .tab-active { background: var(--ee-surface); border-color: var(--ee-border-2); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); }
html.light .tab-btn.active::after { background-color: var(--ee-text); }
html.light .tab-btn:hover { color: var(--ee-text); background: var(--ee-tint-5); }
html.light .live-card-hover:hover { background-color: var(--ee-surface-3); }

/* Editor de texto (Quill) do painel admin */
html.light .ql-toolbar.ql-snow,
html.light .ql-snow .ql-picker-options,
html.light .ql-snow .ql-tooltip { background-color: var(--ee-surface-2); border-color: var(--ee-border-2); color: var(--ee-text); }
html.light .ql-container.ql-snow { background-color: var(--ee-surface); border-color: var(--ee-border-2); color: var(--ee-text); }
html.light .ql-snow .ql-tooltip input[type=text] { background: var(--ee-surface); color: var(--ee-text); border-color: var(--ee-border-2); }
html.light .ql-snow .ql-stroke { stroke: var(--ee-text-3); }
html.light .ql-snow .ql-fill { fill: var(--ee-text-3); }
html.light .ql-snow .ql-picker { color: var(--ee-text-3); }

/* Gráficos (ApexCharts) do painel admin */
html.light .apexcharts-tooltip {
    background: #ffffff !important;
    border-color: var(--ee-border-2) !important;
    color: var(--ee-text) !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15) !important;
}
html.light .apexcharts-tooltip-title { background: var(--ee-surface-2) !important; border-bottom-color: var(--ee-border) !important; }

/* =========================================================
   ÁREAS SEMPRE ESCURAS — classe "ee-escuro"
   ---------------------------------------------------------
   Para painéis com foto/vitrine da marca que devem continuar
   escuros mesmo no tema claro (ex.: lateral do login). Aqui
   as classes voltam às cores originais do tema escuro.
   ========================================================= */
html.light .ee-escuro.bg-black, html.light .ee-escuro .bg-black { background-color: #000000; }
html.light .ee-escuro.bg-slate-900, html.light .ee-escuro .bg-slate-900 { background-color: #0f172a; }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) :is(.text-white, .text-slate-100) { color: #ffffff; }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) .text-slate-200 { color: #e2e8f0; }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) .text-slate-300 { color: #cbd5e1; }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) .text-slate-400 { color: #94a3b8; }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) .text-slate-500 { color: #94a3b8; }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) :is(.text-blue-100, .text-blue-200, .text-blue-200\/70, .text-blue-200\/80, .text-blue-200\/90) { color: #bfdbfe; }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) :is(.text-blue-300, .text-blue-400, .text-brand-accent, .text-brand-glow) { color: #60a5fa; }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) :is(.text-emerald-300, .text-emerald-400) { color: #34d399; }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) .bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) :is(.border-white\/5, .border-white\/10) { border-color: rgba(255, 255, 255, 0.1); }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) .bg-blue-500\/10 { background-color: rgba(59, 130, 246, 0.1); }

/* Rótulo flutuante dos campos: no claro o "recorte" sobre a borda acompanha
   o fundo da página (metade de cima) e do campo (metade de baixo) */
html.light .peer ~ label.bg-black,
html.light .peer ~ label.bg-slate-950,
html.light .peer ~ label.bg-slate-900,
html.light .peer ~ label.bg-\[\#0a0a0a\] { background: linear-gradient(to bottom, var(--ee-bg) 50%, var(--ee-surface) 50%); }
html.light .peer:placeholder-shown:not(:focus) ~ label { background: transparent; }

/* Alertas com fundo "900" translúcido viram tons claros da mesma cor */
html.light .bg-emerald-900\/10, html.light .bg-emerald-900\/20, html.light .bg-emerald-900\/30 { background-color: #ecfdf5; }
html.light .bg-red-900\/10, html.light .bg-red-900\/20, html.light .bg-red-900\/30 { background-color: #fef2f2; }
html.light .bg-blue-900\/10, html.light .bg-blue-900\/20, html.light .bg-blue-900\/40 { background-color: #eff6ff; }
html.light .bg-purple-900\/10 { background-color: #faf5ff; }
html.light .bg-orange-900\/10 { background-color: #fff7ed; }

/* Texto sobre foto: quando um degradê escuro absoluto cobre uma imagem,
   o texto que vem depois dele (irmão ou dentro do irmão) continua claro */
html.light .absolute.inset-0:is([class*="from-black"], [class*="from-slate-950"], [class*="from-\[\#132575\]"]) ~ :is(.text-white, .text-slate-100, .text-slate-200),
html.light .absolute.inset-0:is([class*="from-black"], [class*="from-slate-950"], [class*="from-\[\#132575\]"]) ~ * :is(.text-white, .text-slate-100, .text-slate-200) { color: #ffffff; }
html.light .absolute.inset-0:is([class*="from-black"], [class*="from-slate-950"], [class*="from-\[\#132575\]"]) ~ :is(.text-slate-300, .text-slate-400),
html.light .absolute.inset-0:is([class*="from-black"], [class*="from-slate-950"], [class*="from-\[\#132575\]"]) ~ * :is(.text-slate-300, .text-slate-400) { color: #cbd5e1; }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) .bg-black\/40 { background-color: rgba(0, 0, 0, 0.4); }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) :is(.border-white\/20, .border-white\/30) { border-color: rgba(255, 255, 255, 0.3); }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) :is(.text-amber-400, .text-yellow-400) { color: #fbbf24; }

/* Texto em degradê (títulos de destaque): tons mais fortes no claro */
html.light .bg-clip-text.text-transparent:is([class*="from-blue-4"], [class*="from-brand-glow"], [class*="from-blue-3"]) {
    background-image: linear-gradient(to right, #1d4ed8, #4f46e5, #2563eb);
}

/* Banner com foto que "derrete" no fundo da página (detalhe do evento):
   no claro o degradê termina na cor clara do fundo */
html.light .from-\[\#020617\] {
    --tw-gradient-from: #eef2f7 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(238 242 247 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.light .via-\[\#020617\]\/80 {
    --tw-gradient-to: rgb(238 242 247 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(238 242 247 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html.light .text-\[\#aaaaaa\] { color: var(--ee-muted-2); }

/* Sombras pretas fortes (pensadas para fundo escuro) viram sombras suaves */
html.light :is([class^="shadow-[0_"], [class*=" shadow-[0_"]):is([class*="rgba(0,0,0"]) { --tw-shadow: 0 12px 32px -14px rgba(15, 23, 42, 0.2); }
html.light :is([class^="shadow-[0_-"], [class*=" shadow-[0_-"]):is([class*="rgba(0,0,0"]) { --tw-shadow: 0 -8px 30px -14px rgba(15, 23, 42, 0.16); }
html.light .shadow-2xl { --tw-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18); }

/* Selos com fundo colorido 20%: fundo mais leve para o texto escuro da mesma cor passar no contraste */
html.light .bg-yellow-500\/20, html.light .bg-amber-500\/20 { background-color: rgba(245, 158, 11, 0.13); }
html.light .bg-emerald-500\/20, html.light .bg-green-500\/20 { background-color: rgba(16, 185, 129, 0.13); }
html.light .bg-orange-500\/20 { background-color: rgba(249, 115, 22, 0.12); }
html.light .bg-red-500\/20, html.light .bg-rose-500\/20 { background-color: rgba(239, 68, 68, 0.11); }
html.light .bg-blue-500\/20, html.light .bg-brand-accent\/20 { background-color: rgba(59, 130, 246, 0.13); }
html.light .bg-purple-500\/20 { background-color: rgba(168, 85, 247, 0.12); }
html.light .bg-emerald-500\/90 { background-color: rgba(4, 120, 87, 0.95); }
html.light .tab-inactive { color: var(--ee-muted); }
html.light .tab-inactive:hover { color: var(--ee-text); background: var(--ee-tint-5); }
html.light :is(.ee-escuro, .btn-glow, .btn-blue-glow) :is(.text-blue-200\/80, .text-blue-200\/90) { color: #eff6ff; }

/* Ajustes finos da auditoria de contraste */
html.light :is(.bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600, .bg-brand-accent, .bg-blue-600):is(.text-slate-950, .text-slate-900, .text-black) { color: #ffffff; }
html.light .text-white[style*="background"] { color: #ffffff; }
html.light .text-\[\#25D366\] { color: #128c4b; }
html.light .hover\:bg-\[\#25D366\]:hover.text-\[\#25D366\] { color: #ffffff; }
html.light span.bg-black\/80 { background-color: rgba(0, 0, 0, 0.75); color: #ffffff; }

/* =========================================================
   BRILHOS ("NEON") NO TEMA CLARO
   ---------------------------------------------------------
   Os brilhos coloridos ao redor de botões, ícones e cartões
   foram pensados para o fundo escuro; no claro viram manchas.
   Aqui eles viram sombras neutras e suaves.
   ========================================================= */
html.light :is([class^="shadow-[0_0_"], [class*=" shadow-[0_0_"]) { --tw-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 16px -8px rgba(15, 23, 42, 0.14); }
html.light :is([class*="shadow-blue-"], [class*="shadow-brand"], [class*="shadow-emerald-"], [class*="shadow-green-"],
               [class*="shadow-orange-"], [class*="shadow-red-"], [class*="shadow-rose-"], [class*="shadow-purple-"],
               [class*="shadow-indigo-"], [class*="shadow-yellow-"], [class*="shadow-amber-"], [class*="shadow-sky-"],
               [class*="shadow-cyan-"]) { --tw-shadow-color: rgba(15, 23, 42, 0.12); }
html.light [class*="drop-shadow-[0_0_"] { --tw-drop-shadow: drop-shadow(0 0 #0000); }
html.light .drop-shadow-md { --tw-drop-shadow: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.06)); }
/* Manchas desfocadas decorativas atrás de cartões: mais discretas */
html.light .absolute.rounded-full:is(.blur-xl, .blur-2xl, .blur-3xl, [class*="blur-["]) { opacity: 0.45; }

/* ---------- Texto dos artigos e descrições (plugin de tipografia, classes prose) ----------
   As páginas usam prose-invert (texto claro para fundo escuro). No claro, voltam as cores normais. */
html.light .prose-invert {
    --tw-prose-body: #334155;        --tw-prose-headings: #0f172a;  --tw-prose-lead: #475569;
    --tw-prose-links: #1d4ed8;       --tw-prose-bold: #0f172a;      --tw-prose-counters: #64748b;
    --tw-prose-bullets: #94a3b8;     --tw-prose-hr: #e2e8f0;        --tw-prose-quotes: #0f172a;
    --tw-prose-quote-borders: #cbd5e1; --tw-prose-captions: #64748b; --tw-prose-code: #0f172a;
    --tw-prose-pre-code: #e2e8f0;    --tw-prose-pre-bg: #1e293b;    --tw-prose-th-borders: #cbd5e1;
    --tw-prose-td-borders: #e2e8f0;
}
html.light .prose-headings\:text-white :is(h1, h2, h3, h4, h5, h6, th),
html.light .prose-strong\:text-white strong { color: var(--ee-text); }
html.light .prose-a\:text-brand-glow a { color: #1d4ed8; }
html.light .prose-code\:text-emerald-400 code { color: #047857; }
html.light .prose-code\:bg-slate-800\/50 code { background-color: var(--ee-surface-3); }
html.light .prose-blockquote\:bg-white\/5 blockquote { background-color: var(--ee-tint-5); }

/* Título que fica branco no hover só a partir do tablet (md:group-hover:text-white):
   no claro continua escuro, com contraste sobre o cartão branco */
@media (min-width: 768px) {
    html.light .group:hover .md\:group-hover\:text-white { color: var(--ee-text); }
}

/* ---------- Fundos escuros com prefixo de tela grande (lg:) ----------
   Ex.: o player (assistir.php) usa lg:bg-black / lg:bg-[#050505] no computador. */
@media (min-width: 1024px) {
    html.light .lg\:bg-black { background-color: var(--ee-bg); }
    html.light :is(.lg\:bg-\[\#050505\], .lg\:bg-\[\#0a0a0a\], .lg\:bg-\[\#080808\]) { background-color: var(--ee-surface); }
}

/* Dentro de áreas sempre escuras (ee-escuro), os véus pretos translúcidos continuam pretos
   (ex.: capa do vídeo, aviso de aula bloqueada, ícone de pausa no player) */
html.light .ee-escuro :is(.bg-black\/95, .bg-black\/90, .bg-black\/80) { background-color: rgba(0, 0, 0, 0.9); }
html.light .ee-escuro :is(.bg-black\/60, .bg-black\/50, .bg-black\/40) { background-color: rgba(0, 0, 0, 0.5); }
html.light .ee-escuro :is(.bg-black\/30, .bg-black\/20) { background-color: rgba(0, 0, 0, 0.25); }
html.light .ee-escuro .text-slate-600 { color: #94a3b8; }
/* Cabeçalho do player: o degradê escuro é só do modo imersivo do celular */
@media (min-width: 1024px) {
    html.light header.lg\:bg-\[\#050505\] { background-image: none; }
}
/* Texto DENTRO de uma faixa com degradê escuro sobre foto (ex.: perfil_publico.php) continua claro.
   O cabeçalho do player fica de fora: no computador ele vira uma barra clara. */
html.light .absolute:not(header):is([class*="from-black"]) :is(.text-white, .text-slate-100, .text-slate-200) { color: #ffffff; }
html.light .absolute:not(header):is([class*="from-black"]) :is(.text-slate-300, .text-slate-400) { color: #cbd5e1; }
html.light .bg-green-600\/20 { background-color: rgba(22, 163, 74, 0.12); }