/* ==========================================================================
   TEMA CLARO da área do aluno (17/10/2026)
   Só vale quando o <html> tem data-tema="claro" (botão ☀️/🌙 no topo, guardado no navegador).
   Carregar DEPOIS de plataforma.css e folhear.css. Não altera nada no tema escuro.
   Ficam escuros de propósito: a arte do login, as capas dos módulos, o player,
   as miniaturas dos vídeos e o fundo do certificado (são imagens com texto branco por cima).
   ========================================================================== */
html[data-tema="claro"] {
  --bg: #F4F7FA;
  --bg2: #EAF0F5;
  --panel: #FFFFFF;
  --panel2: #FFFFFF;
  --line: rgba(15, 30, 46, .10);
  --line2: rgba(15, 30, 46, .18);
  --text: #0F1E2E;
  --muted: #475569;
  --dim: #64748B;
  --mag2: #0077A8;
  --shadow: 0 20px 50px -24px rgba(15, 30, 46, .28);
  color-scheme: light;
}
html[data-tema="claro"] body { background: var(--bg); color: var(--text); }

/* ---------- botão de trocar o tema ---------- */
.tema-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line2); background: rgba(255, 255, 255, .06); color: var(--text); font-size: 17px; line-height: 1; padding: 0; transition: background .15s, transform .15s; }
.tema-btn:hover { background: rgba(255, 255, 255, .12); transform: rotate(-12deg); }
.tema-btn--solto { position: fixed; top: 14px; right: 14px; z-index: 40; box-shadow: var(--shadow); background: var(--panel); }
html[data-tema="claro"] .tema-btn { background: #fff; }
html[data-tema="claro"] .tema-btn:hover { background: #EEF4F8; }

/* ---------- geral ---------- */
html[data-tema="claro"] .btn--ghost { background: rgba(15, 30, 46, .04); }
html[data-tema="claro"] .btn--ghost:hover { background: rgba(15, 30, 46, .08); }
html[data-tema="claro"] .boot__ring { border-color: rgba(15, 30, 46, .1); border-top-color: var(--mag); }
html[data-tema="claro"] .avatar { color: #fff; }

/* ---------- login: a arte da esquerda continua escura ---------- */
html[data-tema="claro"] .auth__art { color: #F3F5F8; }
html[data-tema="claro"] .auth__art .brand { color: #F3F5F8; }
html[data-tema="claro"] .auth__art .brand__txt span { color: #42B2DE; }
html[data-tema="claro"] .auth__facts div { color: #94A3B8; }
html[data-tema="claro"] .auth__side { background: radial-gradient(600px 400px at 80% 0%, rgba(0, 180, 216, .10), transparent 60%), var(--bg2); }
html[data-tema="claro"] .field span { color: #334155; }
html[data-tema="claro"] .field input,
html[data-tema="claro"] .qa__form textarea,
html[data-tema="claro"] .qa__rform textarea,
html[data-tema="claro"] .ch__form textarea,
html[data-tema="claro"] .cert__bar input { background: #fff; }
html[data-tema="claro"] .msg--err { background: #FFF1F2; border-color: #FECDD3; color: #9F1239; }
html[data-tema="claro"] .msg--ok { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }

/* ---------- bloqueado / boletos ---------- */
html[data-tema="claro"] .lock { background: radial-gradient(700px 420px at 50% -10%, rgba(0, 180, 216, .12), transparent 70%), var(--bg); }
html[data-tema="claro"] .bill { background: #F8FAFC; }
html[data-tema="claro"] .bill__due,
html[data-tema="claro"] .tag--lock,
html[data-tema="claro"] .top__bol { color: #B45309 !important; }
html[data-tema="claro"] .note { color: #166534; background: #F0FDF4; border-color: #BBF7D0; }
html[data-tema="claro"] .bol-extrato__res div { background: #F8FAFC; }
html[data-tema="claro"] .bol-extrato__res b { color: var(--text); }
html[data-tema="claro"] .bol-extrato__res .pago b,
html[data-tema="claro"] .bol-extrato .st-pago { color: #15803D; }
html[data-tema="claro"] .bol-extrato__res .aberto b,
html[data-tema="claro"] .bol-extrato .st-aberto { color: #B45309; }
html[data-tema="claro"] .bol-extrato .st-vencido { color: #BE123C; }
/* estilos escritos direto no plataforma.js (total em aberto e aviso amarelo) */
html[data-tema="claro"] b[style*="color:#fff"] { color: var(--text) !important; }
html[data-tema="claro"] p[style*="#FDE68A"] { background: #FFFBEB !important; border-color: #FCD34D !important; color: #92400E !important; }
html[data-tema="claro"] a[style*="#FDE68A"] { color: #92400E !important; }

/* ---------- barra do topo ---------- */
html[data-tema="claro"] .top { background: rgba(255, 255, 255, .88); }
html[data-tema="claro"] .top__nav a.is-on,
html[data-tema="claro"] .top__nav a:hover { color: var(--text); background: rgba(15, 30, 46, .06); }
html[data-tema="claro"] .search input { background: #fff; }
html[data-tema="claro"] .search input:focus { background: #fff; }
html[data-tema="claro"] .user__menu button:hover,
html[data-tema="claro"] .user__menu a:hover { background: rgba(15, 30, 46, .05); }

/* ---------- capa da home ---------- */
html[data-tema="claro"] .hero { background-color: var(--bg); }
html[data-tema="claro"] .hero::before { background: linear-gradient(90deg, rgba(244, 247, 250, .97) 0%, rgba(244, 247, 250, .8) 45%, rgba(244, 247, 250, 0) 75%), linear-gradient(0deg, var(--bg) 0%, rgba(244, 247, 250, 0) 40%); }
html[data-tema="claro"] .hero h1 em,
html[data-tema="claro"] .auth__side .auth__title em { background: linear-gradient(90deg, #0077B6, #00A3C4); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="claro"] .hero p { color: #334155; }
html[data-tema="claro"] .hero__meta b { color: var(--text); }
html[data-tema="claro"] .pill { color: #006C8F; background: rgba(0, 180, 216, .1); }
html[data-tema="claro"] .prog__bar,
html[data-tema="claro"] .mod__prog { background: rgba(15, 30, 46, .1); }

/* ---------- módulos (a arte da capa continua escura) ---------- */
html[data-tema="claro"] .rail__arrow { color: var(--text); }
html[data-tema="claro"] .mod:hover { box-shadow: 0 20px 40px -22px rgba(0, 119, 182, .45); }
html[data-tema="claro"] .mod__kind { color: #F3F5F8; border-color: rgba(255, 255, 255, .18); }
html[data-tema="claro"] .mod.is-locked .mod__art { filter: grayscale(.7) brightness(.75); }

/* ---------- aula ---------- */
html[data-tema="claro"] .crumbs a:hover { color: var(--text); }
html[data-tema="claro"] .doc { background: radial-gradient(500px 300px at 70% 20%, rgba(0, 119, 182, .08), transparent 70%), radial-gradient(500px 300px at 20% 90%, rgba(0, 180, 216, .08), transparent 70%), var(--panel); }
html[data-tema="claro"] .doc__ico { background: linear-gradient(160deg, #E6F4F9, #D4EAF3); }
html[data-tema="claro"] .doc__ico::after { background: linear-gradient(225deg, var(--bg) 50%, #B9D9E8 50%); }
html[data-tema="claro"] .check { background: #fff; }
html[data-tema="claro"] .check.is-on { background: #F0FDF4; color: #166534; }
html[data-tema="claro"] .side__list { scrollbar-color: #B8C7D3 transparent; }
html[data-tema="claro"] .side__sec > button:hover { background: rgba(15, 30, 46, .04); }
html[data-tema="claro"] .item { color: #334155; }
html[data-tema="claro"] .item:hover { background: rgba(15, 30, 46, .04); color: var(--text); }
html[data-tema="claro"] .item.is-on { background: rgba(0, 180, 216, .1); color: var(--text); }
html[data-tema="claro"] .item__st { border-color: #94A3B8; }

/* ---------- perguntas e respostas ---------- */
html[data-tema="claro"] .qa__t { color: #1E2D3D; }
html[data-tema="claro"] .qa__msg.is-prof.qa__msg--r .qa__t { color: var(--text); }

/* ---------- janelas ---------- */
html[data-tema="claro"] .modal { background: rgba(15, 30, 46, .45); }
html[data-tema="claro"] .leitor { background: #E2E8F0; }
html[data-tema="claro"] .leitor__pg { box-shadow: 0 6px 20px -8px rgba(15, 30, 46, .35); }
html[data-tema="claro"] .lzf__fundo { background: rgba(15, 30, 46, .6); }
html[data-tema="claro"] .lzf__btn { background: rgba(15, 30, 46, .05); }
html[data-tema="claro"] .lzf__btn:hover { background: rgba(15, 30, 46, .1); }

/* ---------- chat ---------- */
html[data-tema="claro"] .ch__top { background: linear-gradient(135deg, #E6F4F9, #EEF6FA); }
html[data-tema="claro"] .ch__vazio { background: #F8FAFC; }
html[data-tema="claro"] .ch__bal { background: #F1F5F9; }
html[data-tema="claro"] .ch__m.is-eu .ch__bal { background: linear-gradient(135deg, rgba(0, 180, 216, .16), rgba(0, 119, 182, .12)); }
html[data-tema="claro"] .ch__bal a { color: var(--mag2); }

/* ---------- busca ---------- */
html[data-tema="claro"] .result .ico { color: #006C8F; }
html[data-tema="claro"] .result mark { background: rgba(0, 180, 216, .25); color: var(--text); }

/* ---------- vídeos de ajuda: miniatura escura com texto branco ---------- */
html[data-tema="claro"] .vf__play { color: #F3F5F8; }