/* ── MODO CLARO ────────────────────────────────────────────────────────
   Único archivo CSS compartido del Aula. El modo oscuro sigue viviendo
   en el :root inline de cada página (es el predeterminado y no cambia);
   acá solo están las anulaciones para cuando el tema es claro.

   POR QUÉ ES UN ARCHIVO APARTE
   Las 6 páginas necesitan estas mismas reglas. Inline serían ~90 líneas
   repetidas 6 veces, y cada retoque de paleta obligaría a tocar las 6.

   POR QUÉ "html[data-theme=light]" Y NO ":root[data-theme=light]"
   Este archivo se carga en el <head>, ANTES del <style> inline de cada
   página. Con la misma especificidad ganaría el que va después, o sea
   el :root inline, y el tema claro no se aplicaría nunca.
   html + [atributo] = especificidad (0,1,1), que le gana a :root
   (0,1,0) sin importar el orden.

   OJO AL EDITAR: acá se anulan tanto VARIABLES como COMPONENTES
   concretos. Los componentes hacen falta porque el calipso y el
   amarillo de marca son ilegibles sobre fondo claro cuando se usan
   como color de texto, y esas mismas variables se usan también como
   fondo de botón, así que no se pueden redefinir sin más.

   CACHÉ: igual que los js/, Cloudflare sirve esto con 4 horas de
   caché de navegador. Si lo cambias, sube el ?v=N del <link> en las 6
   páginas (ver el bloque de caché en CLAUDE.md). */

html[data-theme="light"]{
  --az1:#F0F4F8;   /* fondo principal */
  --az2:#FFFFFF;   /* tarjetas y paneles */
  --az3:#EDF2F7;   /* inputs, hovers, fondos secundarios */
  --borde:#CBD5E1;

  --bl:#0B1D2B;    /* texto primario (en oscuro es blanco) */
  --t1:#112040;    /* texto de cuerpo */
  --t2:#112040;
  --t3:#54708F;    /* texto atenuado — pasa WCAG AA (4.64:1 fondo, 5.13:1 tarjetas); #7A96B8 no llegaba a 4.5:1 */

  /* Calipso y verde oscurecidos: los de marca no se leen sobre claro.
     Se mantienen dentro de la familia cromática. */
  --ca:#0B7A85;
  --ca2:#095F68;
  --verde:#15803D;

  /* El amarillo NO se toca: sigue siendo el de marca porque solo se usa
     como fondo de botón, y ahí abajo el botón pasa a ser oscuro. */
}

/* Los círculos decorativos son destellos pensados para fondo oscuro:
   sobre claro se ven como manchas sucias. */
html[data-theme="light"] body::before{
  background:radial-gradient(circle,rgba(11,29,43,.05) 0%,transparent 65%);
}
html[data-theme="light"] body::after{
  background:radial-gradient(circle,rgba(11,29,43,.035) 0%,transparent 65%);
}

/* ── Botones ──
   Según la pauta de marca: en claro son oscuros con texto amarillo,
   para conservar el contraste que en oscuro daba el amarillo de fondo. */
html[data-theme="light"] .btn,
html[data-theme="light"] .btn-am{
  background:#0B1D2B;
  color:#F6FF00;
}
html[data-theme="light"] .btn:hover:not(:disabled),
html[data-theme="light"] .btn-am:hover:not(:disabled){
  background:#152F45;
}

/* Título de fase: es el único sitio donde el amarillo es TEXTO. */
html[data-theme="light"] .bloque-titulo{color:#0B1D2B;}

/* ── Logo FM Tenis del header (dashboard/modulo/configuracion) ──
   Dos <img> superpuestas en el mismo <a>; cada tema muestra la suya.
   La que queda oculta por display:none no llega al árbol de
   accesibilidad, así que el lector de pantalla nunca anuncia las dos. */
html[data-theme="light"] .logo-fm-dark{display:none;}
html[data-theme="light"] .logo-fm-light{display:block;}

/* ── Tarjetas de módulo (dashboard) ── */
html[data-theme="light"] .modulo-portada{
  background:linear-gradient(135deg,#E4ECF4 0%,#F5F8FB 60%,rgba(11,122,133,.12) 100%);
}
html[data-theme="light"] .modulo-portada-num{color:rgba(11,29,43,.20);}
html[data-theme="light"] .modulo-check{
  background:rgba(255,255,255,.92);
  border-color:rgba(21,128,61,.55);
}
html[data-theme="light"] .modulo-card.completado{border-color:rgba(21,128,61,.45);}
html[data-theme="light"] .modulo-card{box-shadow:0 1px 3px rgba(11,29,43,.08);}

/* ── Vista de módulo ── */
html[data-theme="light"] .clase-item.activa a{border-color:rgba(11,122,133,.55);}
html[data-theme="light"] .clase-item.hecha .clase-check{
  border-color:rgba(21,128,61,.55);
  background:rgba(21,128,61,.12);
}
html[data-theme="light"] .btn-check.hecha{
  background:rgba(21,128,61,.12);
  border-color:var(--verde);
}
html[data-theme="light"] .proximamente-card{border-color:rgba(11,122,133,.35);}

/* ── Configuración ── */
html[data-theme="light"] .tab-btn.activa{border-color:rgba(11,122,133,.55);}
html[data-theme="light"] .avatar-grande{background:#EDF2F7;}

/* ── Avisos y mensajes ──
   Los rojos y verdes claros del modo oscuro pierden contraste sobre
   blanco, así que se oscurecen. */
html[data-theme="light"] .aviso,
html[data-theme="light"] .msg-error{
  background:rgba(185,28,28,.08);
  border-color:rgba(185,28,28,.35);
  color:#B91C1C;
}
html[data-theme="light"] .msg-ok{
  background:rgba(21,128,61,.10);
  border-color:rgba(21,128,61,.35);
  color:#15803D;
}

/* ── Sombras ──
   En oscuro las sombras son negras y profundas; sobre claro se vuelven
   suciedad visual. */
html[data-theme="light"] .auth-card,
html[data-theme="light"] .menu-desplegable{
  box-shadow:0 10px 30px rgba(11,29,43,.12);
}

/* ── Selector de tema (pestaña Apariencia) ── */
html[data-theme="light"] .tema-card.activa{
  border-color:var(--ca);
  background:rgba(11,122,133,.07);
}
