/* ============================================================================
   theme-tokens.css  —  Capa canónica de tokens de tema (claro / oscuro)
   ----------------------------------------------------------------------------
   Esta es la ÚNICA fuente de verdad para superficies, texto, bordes y neutros.
   El color de marca lo inyecta el servidor en :root (ver _Layout). Acá viven
   los valores que dependen SOLO del modo (claro/oscuro) — no del profesor.

   Reglas:
   - Ningún componente vuelve a hardcodear #fff / #1f2937 / white. Usan estos tokens.
   - El texto sobre cada superficie usa su --on-* correspondiente (contraste garantizado).
   - El acento de marca legible (--theme-brand-accent) lo calcula el servidor por
     contraste; acá solo se consume.

   Cargar DESPUÉS de site.css para que estos tokens ganen, o mover site.css a
   consumir estos nombres directamente.
   ============================================================================ */

:root,
body.theme-mode-light {
  /* --- Neutros / superficies (modo claro) --- */
  --theme-page-bg:        #f5f6f8;   /* fondo base de la app */
  --theme-surface:        #ffffff;   /* tarjetas, paneles, dropdowns, tablas */
  --theme-surface-rgb:    255, 255, 255; /* rgb de surface (para tintes rgba) */
  --theme-surface-2:      #f4f6f9;   /* encabezados de tabla, zonas hundidas */
  --theme-on-surface:     #1b1f27;   /* texto principal sobre superficie */
  --theme-on-surface-rgb: 27, 31, 39; /* rgb de on-surface (para tintes rgba) */
  --theme-on-surface-muted: rgba(27, 31, 39, 0.64); /* texto secundario/apagado — 4.97:1 sobre surface (AA) */
  --theme-border:         #e7e9ee;   /* bordes y separadores */
  --theme-footer-bg:      #ececef;   /* footer (se recalcula en server desde surface) */
  /* Texto del footer: contrasta con --theme-footer (el bg real). En claro el footer
     logueado es gris claro -> texto oscuro. El público lo override a oscuro y setea
     su propio --theme-on-footer (ver home-rubro.css). */
  --theme-on-footer:      #1b1f27;
  --theme-on-footer-rgb:  27, 31, 39;

  /* --- Semánticos FIJOS (no editables). theme-tokens.css es la ÚNICA fuente.
         El server NO debe emitirlos para no entrar en conflicto. Valores verificados
         a ≥4.5:1 sobre surface y surface-2. --- */
  --theme-success:        #157347;   /* 5.43:1 sobre surface-2 */
  --theme-success-rgb:    21, 115, 71;
  --theme-danger:         #c82333;   /* 5.18:1 sobre surface-2 */
  --theme-danger-rgb:     200, 35, 51;
  --theme-focus-ring-color: #0a6ca5; /* oscurecido: 0ea5e9 daba 2.77:1 sobre blanco (<3) */
  --theme-focus-ring-rgb: 10, 108, 165;
  --theme-star-color:     #f4b400;
  /* Alerta/pago (chips de notificación): el texto contrasta por modo; el rgb es la
     base FIJA del tinte rgba(...) — no cambia por modo, cambia el texto encima. */
  --theme-warning:        #8a6400;   /* 5.6:1 sobre surface */
  --theme-warning-rgb:    244, 180, 0;
  /* Badge relleno: en claro el fondo semántico es OSCURO -> texto blanco */
  --theme-on-success:     #ffffff;
  --theme-on-danger:      #ffffff;
}

body.theme-mode-dark {
  /* --- Neutros / superficies (modo oscuro) --- */
  --theme-page-bg:        #12161d;
  --theme-surface:        #1b2230;
  --theme-surface-rgb:    27, 34, 48; /* rgb de surface (para tintes rgba) */
  --theme-surface-2:      #232c3c;
  --theme-on-surface:     #e8edf5;
  --theme-on-surface-rgb: 232, 237, 245; /* rgb de on-surface (para tintes rgba) */
  --theme-on-surface-muted: rgba(232, 237, 245, 0.62);
  --theme-border:         rgba(255, 255, 255, 0.12);
  --theme-footer-bg:      #0d1016;
  --theme-on-footer:      #e8edf5;          /* footer oscuro -> texto claro */
  --theme-on-footer-rgb:  232, 237, 245;

  /* Semánticos aclarados para leerse sobre superficies oscuras */
  --theme-success:        #5dd39e;
  --theme-success-rgb:    93, 211, 158;
  --theme-danger:         #f1707b;
  --theme-danger-rgb:     241, 112, 123;
  --theme-warning:        #f4b400;
  --theme-warning-rgb:    244, 180, 0;
  --theme-focus-ring-color: #0ea5e9; /* 5.75:1 sobre surface oscura, OK */
  --theme-focus-ring-rgb: 14, 165, 233;
  /* Badge relleno: en oscuro el fondo semántico es CLARO -> texto oscuro */
  --theme-on-success:     #0f1f17;
  --theme-on-danger:      #2a0d10;
}

/* ----------------------------------------------------------------------------
   Footer público unificado por rubro (footer-only)
   ----------------------------------------------------------------------------
   El footer del sitio público debe verse SIEMPRE oscuro, igual que en la home,
   en todas las vistas del layout público (Info, catálogo, área del alumno). La
   home con skin completa ya define su --theme-footer en home-rubro.css; acá
   replicamos SOLO los tokens del footer (fondo + on-footer) para las vistas SIN
   skin, vía la clase body.public-footer-skin-<rubro> que emite _Layout. Todo el
   footer (texto, íconos, divisores, pills) deriva de estos tres tokens en
   site.css, así que replicarlos reproduce el footer de la home idéntico.
   Estos valores DEBEN mantenerse en sync con los bloques body.home-skin-<rubro>
   de home-rubro.css. Especificidad (0,2,0): le gana al :root inline del server.
   ---------------------------------------------------------------------------- */
body.public-footer-skin-arte    { --theme-footer: #2f3338; --theme-on-footer: #ffffff; --theme-on-footer-rgb: 255, 255, 255; }
body.public-footer-skin-tech    { --theme-footer: #0c1014; --theme-on-footer: #ffffff; --theme-on-footer-rgb: 255, 255, 255; }
body.public-footer-skin-tecnica { --theme-footer: #21242a; --theme-on-footer: #ffffff; --theme-on-footer-rgb: 255, 255, 255; }
body.public-footer-skin-biz     { --theme-footer: #0f1a2e; --theme-on-footer: #ffffff; --theme-on-footer-rgb: 255, 255, 255; }
body.public-footer-skin-musica  { --theme-footer: #150d3a; --theme-on-footer: #ffffff; --theme-on-footer-rgb: 255, 255, 255; }
body.public-footer-skin-fit     { --theme-footer: #0c1d18; --theme-on-footer: #ffffff; --theme-on-footer-rgb: 255, 255, 255; }
body.public-footer-skin-edu     { --theme-footer: #131d2e; --theme-on-footer: #ffffff; --theme-on-footer-rgb: 255, 255, 255; }
body.public-footer-skin-otros   { --theme-footer: #151a29; --theme-on-footer: #ffffff; --theme-on-footer-rgb: 255, 255, 255; }

/* ----------------------------------------------------------------------------
   Aliases de compatibilidad: muchos selectores existentes usan --theme-tertiary
   (superficie) y --theme-on-tertiary / --theme-on-background (texto). Los
   apuntamos a los tokens canónicos para no tener que renombrar todo de golpe.
   A medida que se migran selectores, reemplazar por los nombres canónicos.
   ---------------------------------------------------------------------------- */
:root {
  /* fondo de página (hex) — fallback mode-aware por si el server no lo emite */
  --theme-background:          var(--theme-page-bg);
  --theme-tertiary:            var(--theme-surface);
  --theme-on-tertiary:         var(--theme-on-surface);
  --theme-on-background:       var(--theme-on-surface);
  --theme-text-title:          var(--theme-on-surface);
  --theme-text-body:           var(--theme-on-surface);
  --theme-text-subtitle:       var(--theme-on-surface-muted);
  --theme-text-muted:          var(--theme-on-surface-muted);
  --theme-text-title-on-surface:   var(--theme-on-surface);
  --theme-text-body-on-surface:    var(--theme-on-surface);
  --theme-text-muted-on-surface:   var(--theme-on-surface-muted);

  /* --- Tokens que el modelo nuevo deja de emitir (hallazgo Fase 0) ---
     El modelo viejo permitía secondary/quaternary/primary-interactive editables.
     site.css los usa ~230 veces, casi siempre como (a) cola de un fallback de texto
     o (b) tinte translúcido rgba(quaternary-rgb, .06-.2) con fallback OSCURO — que se
     rompe en modo oscuro. Apuntándolos a tokens canónicos MODE-AWARE, los ~92 tintes
     auto-voltean por modo sin barrer site.css. Solo los pocos `background:var(--theme-
     quaternary)` SÓLIDOS se revisan a mano en Fase 4. */
  --theme-quaternary:            var(--theme-on-surface);
  --theme-quaternary-rgb:        var(--theme-on-surface-rgb);
  --theme-secondary:             var(--theme-on-surface-muted);
  --theme-secondary-rgb:         var(--theme-on-surface-rgb);
  --theme-on-secondary:          var(--theme-on-surface);
  --theme-primary-interactive:   var(--theme-primary-strong, var(--theme-primary));

  /* rgb legacy que site.css consume y el server ya no emite → apuntan a los canónicos */
  --theme-tertiary-rgb:          var(--theme-surface-rgb);
  --theme-on-tertiary-rgb:       var(--theme-on-surface-rgb);
  --theme-on-background-rgb:     var(--theme-on-surface-rgb);
  --theme-background-rgb:        var(--theme-surface-rgb);
}

/* ----------------------------------------------------------------------------
   Reglas base. Reemplazan a los #fff / colores oscuros hardcodeados.
   El barrido de site.css debe dejar a estas superficies tomando los tokens.
   ---------------------------------------------------------------------------- */
body {
  background-color: var(--theme-page-bg);
  color: var(--theme-on-surface);
}

.card,
.panel-card,
.settings-card,
.dashboard-card,
.dropdown-menu,
.modal-content,
.list-group-item,
.table {
  background-color: var(--theme-surface);
  color: var(--theme-on-surface);
  border-color: var(--theme-border);
}

.table > :not(caption) > * > * { color: var(--theme-on-surface); }
.table thead th { background-color: var(--theme-surface-2); }

.text-muted,
.text-secondary,
small.text-muted,
.form-text { color: var(--theme-on-surface-muted) !important; }

h1, h2, h3, h4, h5, h6,
.card-title, .modal-title,
.page-header-title, .page-subtitle { color: var(--theme-on-surface); }

a:not(.btn) { color: var(--theme-brand-accent, var(--theme-primary)); }

.dropdown-item { color: var(--theme-on-surface); }
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--theme-on-surface);
  background-color: rgba(var(--theme-primary-rgb), 0.16);
}

footer { background-color: var(--theme-footer-bg); color: var(--theme-on-footer, #fff); }
footer a { color: var(--theme-on-footer, #fff); }

/* Botón y navbar usan la marca REFORZADA (contraste garantizado), no la marca cruda.
   --theme-on-primary es el texto legible que el servidor calculó sobre ese fondo. */
.btn-primary,
.navbar.sweet-navbar {
  background-color: var(--theme-primary-strong, var(--theme-primary));
  color: var(--theme-on-primary, #fff);
  border-color: var(--theme-primary-strong, var(--theme-primary));
}
.btn-primary:hover,
.btn-primary:focus { color: var(--theme-on-primary, #fff); }

/* Texto secundario sobre el navbar: NO usar opacity (en marcas borderline cae <4.5:1).
   Usar el mismo --theme-on-primary a opacidad plena, o no atenuar. */
.navbar.sweet-navbar .nav-link,
.navbar.sweet-navbar .navbar-text { color: var(--theme-on-primary, #fff); opacity: 1; }

/* ----------------------------------------------------------------------------
   Inputs / formularios  (Q1) — entran en esta pasada, son chrome.
   El bug "blanco sobre blanco" también aparece en un <input> de fondo blanco
   hardcodeado sobre superficie oscura. Tomar los tokens canónicos.
   ---------------------------------------------------------------------------- */
.form-control,
.form-select,
textarea,
textarea.form-control {
  background-color: var(--theme-surface);
  color: var(--theme-on-surface);
  border-color: var(--theme-border);
}
.form-control::placeholder,
textarea::placeholder { color: var(--theme-on-surface-muted); opacity: 1; }
.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: var(--theme-primary-strong, var(--theme-primary));
  box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.25);
}
.form-control:disabled,
.form-select:disabled,
textarea:disabled {
  background-color: var(--theme-surface-2);
  color: var(--theme-on-surface-muted);
}
/* La flecha del <select> debe contrastar con el texto, no quedar negra en oscuro */
.form-select { color: var(--theme-on-surface); }

/* ----------------------------------------------------------------------------
   Estados de botón  (Q2) — el algoritmo da el fondo+texto en reposo; los estados
   son un delta fijo que funciona en claro y oscuro sin tokens extra.
   ---------------------------------------------------------------------------- */
.btn-primary:hover { filter: brightness(0.93); }      /* feedback al pasar el mouse */
.btn-primary:active { filter: brightness(0.86); }
.btn-primary:disabled,
.btn-primary.disabled { opacity: 0.5; filter: none; } /* estándar del design system */

/* ----------------------------------------------------------------------------
   Badges rellenos con color semántico  (Q3) — el par fondo/texto se calcula:
   en claro el fondo es oscuro (texto blanco), en oscuro el fondo es claro (texto oscuro).
   ---------------------------------------------------------------------------- */
.badge.bg-success,
.text-bg-success { background-color: var(--theme-success) !important; color: var(--theme-on-success) !important; }
.badge.bg-danger,
.text-bg-danger  { background-color: var(--theme-danger)  !important; color: var(--theme-on-danger)  !important; }

/* Anillo de foco accesible global (consume el token por modo) */
:focus-visible { outline: 2px solid var(--theme-focus-ring-color); outline-offset: 2px; }