/* ============================================================
   SCHOOLARYX — CSS Variables
   Todas las variables del tema educativo K-12
   ============================================================ */

:root {
  /* === PALETA PRINCIPAL === */
  --sx-primary:        #ec774b;
  --sx-primary-dark:   #d4603a;
  --sx-primary-light:  #fde8de;
  --sx-primary-rgb:    236, 119, 75;

  --sx-red:            #da5f5f;
  --sx-red-dark:       #c24545;
  --sx-red-light:      #fde8e8;
  --sx-red-rgb:        218, 95, 95;

  --sx-green:          #6fc191;
  --sx-green-dark:     #52a877;
  --sx-green-light:    #e4f5ec;
  --sx-green-rgb:      111, 193, 145;

  --sx-sky:            #74cee4;
  --sx-sky-dark:       #50b8d4;
  --sx-sky-light:      #e3f6fb;
  --sx-sky-rgb:        116, 206, 228;

  --sx-purple:         #c489ce;
  --sx-purple-dark:    #ab6ab8;
  --sx-purple-light:   #f5e8f8;
  --sx-purple-rgb:     196, 137, 206;

  --sx-yellow:         #edbf47;
  --sx-yellow-dark:    #d4a52e;
  --sx-yellow-light:   #fdf5dc;
  --sx-yellow-rgb:     237, 191, 71;

  --sx-dark:           #302f3b;
  --sx-dark-2:         #3d3c4a;
  --sx-dark-3:         #4a4958;
  --sx-dark-rgb:       48, 47, 59;

  /* === COLORES SEMÁNTICOS === */
  --sx-success:        var(--sx-green);
  --sx-success-dark:   var(--sx-green-dark);
  --sx-success-light:  var(--sx-green-light);
  --sx-success-rgb:    var(--sx-green-rgb);

  --sx-warning:        var(--sx-yellow);
  --sx-warning-dark:   var(--sx-yellow-dark);
  --sx-warning-light:  var(--sx-yellow-light);
  --sx-warning-rgb:    var(--sx-yellow-rgb);

  --sx-danger:         var(--sx-red);
  --sx-danger-dark:    var(--sx-red-dark);
  --sx-danger-light:   var(--sx-red-light);
  --sx-danger-rgb:     var(--sx-red-rgb);

  --sx-info:           var(--sx-sky);
  --sx-info-dark:      var(--sx-sky-dark);
  --sx-info-light:     var(--sx-sky-light);
  --sx-info-rgb:       var(--sx-sky-rgb);

  /* === NEUTROS === */
  --sx-white:          #ffffff;
  --sx-body-bg:        #faf7f4;
  --sx-card-bg:        #ffffff;
  --sx-border-color:   #ebe6e0;
  --sx-text-muted:     #706f7f;
  --sx-text-body:      #4a4a6a;
  --sx-text-heading:   #302f3b;
  /* Hover de fila: sale de la marca, no del gris #f0f0f0 de antes — ese gris
     frío no era de esta paleta y se notaba sobre los neutros cálidos. Derivado
     con color-mix para que siga a la escuela (appearance.php). */
  --sx-row-hover:      color-mix(in srgb, var(--sx-primary-light) 60%, var(--sx-card-bg));

  /* === LAYOUT === */
  --sidebar-width:     260px;
  --sidebar-collapsed: 72px;
  --topbar-height:     75px;
  --navbar-height:     55px;

  /* === BORDER RADIUS === */
  --radius-xs:         4px;
  --radius-sm:         8px;
  --radius:            12px;
  --radius-lg:         16px;
  --radius-xl:         24px;
  --radius-pill:       50px;
  --radius-circle:     50%;

  /* === SOMBRAS === */
  --shadow-xs:   0 1px 3px rgba(48,47,59,0.06);
  --shadow-sm:   0 2px 8px rgba(48,47,59,0.08);
  --shadow:      0 4px 16px rgba(48,47,59,0.10);
  --shadow-lg:   0 8px 32px rgba(48,47,59,0.14);
  --shadow-xl:   0 16px 48px rgba(48,47,59,0.18);

  /* === TIPOGRAFÍA === */
  /* Intercambiadas respecto a la versión anterior, para igualar la plantilla:
     Roboto de cuerpo (más neutra en texto corrido) y Nunito de titular. */
  --font-body:    'Roboto', sans-serif;
  --font-display: 'Nunito', sans-serif;
  --font-mono:    'Fira Code', 'Consolas', monospace;

  /* === TRANSICIONES === */
  --transition:        all 0.25s ease;
  --transition-fast:   all 0.15s ease;
  --transition-slow:   all 0.4s ease;

  /* === GRADIENTES === */
  --gradient-primary:  linear-gradient(135deg, #ce4816 0%, #cb4b15 100%);
  --gradient-dark:     linear-gradient(135deg, #302f3b 0%, #4a4958 100%);
  --gradient-success:  linear-gradient(135deg, #6fc191 0%, #8dd4a8 100%);
  --gradient-info:     linear-gradient(135deg, #74cee4 0%, #96dced 100%);

  /* === SIDEBAR === */
  --sidebar-bg:        #302f3b;
  --sidebar-text:      rgba(255,255,255,0.7);
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255,255,255,0.06);
  --sidebar-item-active: var(--sx-primary);
  --sidebar-label-color: rgba(255,255,255,0.35);

  /* === TOPBAR === */
  --topbar-bg:         #ffffff;
  --topbar-border:     #e8eaf0;
  --topbar-icon-color: #6c757d;

  /* ─────────────────────────────────────────────────────────────────────
     Tokens portados de la plantilla (new-schoolaryx-v2). Solo adiciones:
     ninguno de estos nombres existía antes, así que nada cambia de aspecto
     hasta que una regla los use.

     OJO con el branding: includes/appearance.php inyecta en runtime
     --sx-{primary,success,danger,warning,info,dark} con sus -dark/-light/-rgb
     por escuela. Por eso en esas seis familias los -text/-solid van DERIVADOS
     de la variable con branding, no con un hex fijo como en la plantilla: si
     se fijaran, una escuela con color propio seguiría viendo el naranja base.
     El resto (green/red/sky/yellow/purple, materias, neutros) nadie los
     sobreescribe, así que van con el valor literal de la plantilla.
     ───────────────────────────────────────────────────────────────────── */

  /* Familias con branding — derivadas para que sigan el color de la escuela */
  /* Tinta y superficie sólida de la marca: el naranja de la paleta afinado a mano
     hasta contraste AA sobre fondo claro (el --sx-primary de arriba sirve para
     teñir, pero como texto no se lee).

     Es el valor de FÁBRICA. Una escuela con color propio NO ve este hex: para
     ella appearance.php deriva la tinta de SU color (core_color_ink) y la emite
     en un <style> posterior en la cascada. Si cambias --sx-primary, actualiza
     también $stock en includes/appearance.php, o dejará de reconocer el color de
     fábrica y derivará la tinta para todo el mundo. */
  --sx-primary-text:   #ba4114;
  --sx-primary-solid:  #ba4114;
  --sx-primary-solid-dark: #a03811;
  --sx-primary-solid-rgb:  186, 65, 20;
  /* La TINTA no puede ser la variante -dark: esa es el color base un 14% más
     oscuro, pensada para hover de rellenos, y como texto no llega a AA — sobre
     su propio tinte daba 2.1 (warning), 2.06 (info), 2.57 (success). Se deriva
     oscureciendo el color de la familia lo suficiente (medido: 4.8-7.6 sobre el
     -light correspondiente). Sigue siendo derivada, así que la escuela que
     configure su propio success/danger/warning/info se lleva SU tinta.
     El -solid se queda en -dark: ese va con texto blanco encima, no es tinta. */
  --sx-success-text:   color-mix(in srgb, var(--sx-success) 55%, #000);
  --sx-success-solid:  var(--sx-success-dark);
  --sx-danger-text:    color-mix(in srgb, var(--sx-danger)  55%, #000);
  --sx-danger-solid:   var(--sx-danger-dark);
  --sx-warning-text:   color-mix(in srgb, var(--sx-warning) 55%, #000);
  --sx-warning-solid:  var(--sx-warning-dark);
  --sx-info-text:      color-mix(in srgb, var(--sx-info)    55%, #000);
  --sx-info-solid:     var(--sx-info-dark);

  /* Paleta base, sin branding */
  --sx-green-text:  #347a51;  --sx-green-solid:  #347a51;
  --sx-red-text:    #c82e2e;  --sx-red-solid:    #c82e2e;
  --sx-sky-text:    #1c778e;  --sx-sky-solid:    #1d7f97;
  --sx-yellow-text: #8d6a0e;  --sx-yellow-solid: #946f0f;
  --sx-purple-text: #9b46aa;  --sx-purple-solid: #9b46aa;

  /* Neutros */
  --sx-neutral:      #ede8e2;
  --sx-neutral-dark: #ded7ce;
  --sx-disabled:     #c2bcb4;

  /* Colores por materia */
  --sx-subject-language: var(--sx-primary); --sx-subject-language-light: var(--sx-primary-light);
  --sx-subject-language-solid: var(--sx-primary-solid); --sx-subject-language-text: var(--sx-primary-text);
  --sx-subject-science: var(--sx-green); --sx-subject-science-light: var(--sx-green-light);
  --sx-subject-science-solid: var(--sx-green-solid); --sx-subject-science-text: var(--sx-green-text);
  --sx-subject-sports: var(--sx-sky); --sx-subject-sports-light: var(--sx-sky-light);
  --sx-subject-sports-solid: var(--sx-sky-solid); --sx-subject-sports-text: var(--sx-sky-text);
  --sx-subject-art: var(--sx-purple); --sx-subject-art-light: var(--sx-purple-light);
  --sx-subject-art-solid: var(--sx-purple-solid); --sx-subject-art-text: var(--sx-purple-text);
  --sx-subject-history: var(--sx-yellow); --sx-subject-history-light: var(--sx-yellow-light);
  --sx-subject-history-solid: var(--sx-yellow-solid); --sx-subject-history-text: var(--sx-yellow-text);
  --sx-subject-math: #7b83d4;  --sx-subject-math-light: #e9eaf9;
  --sx-subject-math-solid: #636ccc; --sx-subject-math-text: #545ec7;
  --sx-subject-tech: #6b7a8f;  --sx-subject-tech-light: #e8ecf1;
  --sx-subject-tech-solid: #68768b; --sx-subject-tech-text: #5d6a7d;
  --sx-subject-music: #e089a8; --sx-subject-music-light: #fbe8ef;
  --sx-subject-music-solid: #cd4072; --sx-subject-music-text: #c03265;
}

/* === MODO OSCURO (data-theme="dark") === */
[data-theme="dark"] {
  --sx-body-bg:        #22212c;
  --sx-card-bg:        #2d2c38;
  --sx-border-color:   #3d3c4a;
  --sx-text-muted:     #a8a8b5;
  --sx-text-body:      #c8c9d4;
  --sx-text-heading:   #eaeaf0;
  --sx-row-hover:      color-mix(in srgb, var(--sx-primary) 16%, var(--sx-card-bg));
  --topbar-bg:         #2d2c38;
  --topbar-border:     #3d3c4a;
  --topbar-icon-color: #9395a5;
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.2);
  --shadow:      0 4px 16px rgba(0,0,0,0.25);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.35);

  /* Tokens portados de la plantilla — variante oscura.
     Las familias con branding siguen derivadas: si la escuela cambia el color,
     el modo oscuro lo sigue igual que el claro. */
  --sx-green-text:  var(--sx-green);
  --sx-sky-text:    var(--sx-sky);
  --sx-yellow-text: var(--sx-yellow);
  --sx-red-text:    #e69393;
  --sx-purple-text: #cb97d4;
  --sx-neutral:      #3d3c4a;
  --sx-neutral-dark: #4a4958;
  --sx-disabled:     #5a5968;
  --sx-subject-math: #8b93de; --sx-subject-math-light: #2d3050; --sx-subject-math-text: #9fa5e0;
  --sx-subject-tech: #8b9aae; --sx-subject-tech-light: #2b333d; --sx-subject-tech-text: #a0aab8;
  --sx-subject-music: #e89ab5; --sx-subject-music-light: #452b36; --sx-subject-music-text: #e292ae;
}

/* === MODO OSCURO: el par tinte + tinta ===================================
 * En claro los -light son pasteles (#fde8e8…). Sin redefinirlos, TODO lo que usa
 * el par tinte+tinta —badge-soft-*, el disco de los botones de acción, los chips
 * de tipo de evento— sale pastel claro con la tinta encima, que en oscuro también
 * se aclara: claro sobre claro. Se derivan del propio color contra la tarjeta, no
 * en hex, para que la escuela que cambie su primario arrastre su tinte oscuro.
 *
 * Va aparte y con `:root[data-theme=...]` a propósito: appearance.php inyecta en
 * runtime un <style> con estos mismos tokens bajo `:root`, que empata en
 * especificidad con [data-theme="dark"] y gana por orden de aparición. Con el
 * `:root` delante, este bloque pesa más y el branding sigue mandando en claro.
 */
:root[data-theme="dark"] {
  --sx-primary-light: color-mix(in srgb, var(--sx-primary) 14%, var(--sx-card-bg));
  --sx-red-light:     color-mix(in srgb, var(--sx-red)     14%, var(--sx-card-bg));
  --sx-green-light:   color-mix(in srgb, var(--sx-green)   14%, var(--sx-card-bg));
  --sx-sky-light:     color-mix(in srgb, var(--sx-sky)     14%, var(--sx-card-bg));
  --sx-purple-light:  color-mix(in srgb, var(--sx-purple)  14%, var(--sx-card-bg));
  --sx-yellow-light:  color-mix(in srgb, var(--sx-yellow)  14%, var(--sx-card-bg));

  /* Las familias por ROL van aparte de sus gemelas por nombre (success/green,
     danger/red…): appearance.php sobreescribe las primeras por escuela, así que
     aquí no se pueden alias a un hex fijo o la escuela con color propio vería el
     de fábrica. Mismo tinte al 14% para las cuatro. */
  --sx-success-light: color-mix(in srgb, var(--sx-success) 14%, var(--sx-card-bg));
  --sx-danger-light:  color-mix(in srgb, var(--sx-danger)  14%, var(--sx-card-bg));
  --sx-warning-light: color-mix(in srgb, var(--sx-warning) 14%, var(--sx-card-bg));
  --sx-info-light:    color-mix(in srgb, var(--sx-info)    14%, var(--sx-card-bg));

  /* Y las TINTAS: aquí no valen los hex del tema claro (están calibrados contra
     blanco) ni el color base tal cual. El base funciona para los tonos claros de
     fábrica, pero una escuela puede configurar un verde o un azul oscuro —medido
     con uno real: 3.1-3.8 sobre su propio tinte— así que se aclaran todas por
     igual. Un 45% de blanco deja la peor familia en 5.09. */
  --sx-primary-text: color-mix(in srgb, var(--sx-primary) 55%, #fff);
  --sx-success-text: color-mix(in srgb, var(--sx-success) 55%, #fff);
  --sx-danger-text:  color-mix(in srgb, var(--sx-danger)  55%, #fff);
  --sx-warning-text: color-mix(in srgb, var(--sx-warning) 55%, #fff);
  --sx-info-text:    color-mix(in srgb, var(--sx-info)    55%, #fff);
  --sx-green-text:   color-mix(in srgb, var(--sx-green)   55%, #fff);
  --sx-red-text:     color-mix(in srgb, var(--sx-red)     55%, #fff);
  --sx-sky-text:     color-mix(in srgb, var(--sx-sky)     55%, #fff);
  --sx-yellow-text:  color-mix(in srgb, var(--sx-yellow)  55%, #fff);
  --sx-purple-text:  color-mix(in srgb, var(--sx-purple)  55%, #fff);
}