/* ============================================================
   TOKENS DE DISEÑO — ENTRENADOR DE COMPETENCIAS EDUCATIVAS
   Sistema de diseño base para toda la plataforma
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* Le dice al navegador que pinte sus propios controles nativos —el
     desplegable de un <select>, la barra de scroll, el borde de un
     <input type="date">— en oscuro. Sin esto, el <select> del modal de
     filtros de tarjetas se veía bien cerrado (estilos propios) pero el
     navegador abría su lista de opciones en blanco por defecto, con texto
     claro pensado para fondo oscuro casi invisible sobre fondo claro. */
  color-scheme: dark;

  /* ---- COLOR PRIMARIO Y ACENTOS ---- */
  --color-primary:       #4F46E5;
  --color-primary-light: #818CF8;
  --color-primary-dark:  #3730A3;
  --color-accent:        #06B6D4;
  --color-accent-light:  #67E8F9;

  /* ---- PALETA DE COLORES POR ROL ---- */
  --role-rector:         #6C3EB8;
  --role-rector-light:   #EDE6F8;
  --role-rector-mid:     #9B6FD9;
  --role-rector-dark:    #4A2580;

  --role-coord:          #1A6FA5;
  --role-coord-light:    #E0F0FB;
  --role-coord-mid:      #3B91C9;
  --role-coord-dark:     #0D4A72;

  --role-orient:         #2A8A5E;
  --role-orient-light:   #E0F5EC;
  --role-orient-mid:     #4CB07E;
  --role-orient-dark:    #1A6044;

  --role-docente:        #C04A1E;
  --role-docente-light:  #FBE9E0;
  --role-docente-mid:    #E07045;
  --role-docente-dark:   #8A3210;

  /* ---- COLORES SEMÁNTICOS ---- */
  --color-success:       #10B981;
  --color-success-light: #D1FAE5;
  --color-warning:       #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-error:         #EF4444;
  --color-error-light:   #FEE2E2;
  --color-info:          #3B82F6;
  --color-info-light:    #DBEAFE;

  /* ---- DIFICULTAD ---- */
  --diff-basic:          #10B981;
  --diff-intermediate:   #F59E0B;
  --diff-advanced:       #F97316;
  --diff-expert:         #EF4444;

  /* ---- FONDO Y SUPERFICIE (DEEP SLATE NAVY) ---- */
  --bg-base:             #0A0E17;
  --bg-surface:          #111827;
  --bg-surface-2:        #162032;
  --bg-surface-3:        #1E293B;
  --bg-surface-raised:   #1F2937;
  --bg-overlay:          rgba(10, 14, 23, 0.85);

  /* ---- BORDES Y GLASSMORPHISM ---- */
  --border-subtle:       rgba(255, 255, 255, 0.08);
  --border-default:      rgba(255, 255, 255, 0.12);
  --border-strong:       rgba(255, 255, 255, 0.22);
  --glass-bg:            rgba(17, 24, 39, 0.75);
  --glass-border:        rgba(255, 255, 255, 0.10);
  --glass-blur:          blur(12px);

  /* ---- TEXTO ---- */
  --text-primary:        #F8FAFC;
  --text-secondary:      #94A3B8;
  --text-tertiary:       #64748B;
  --text-inverse:        #0A0E17;

  /* ---- TIPOGRAFÍA PREMIUM ---- */
  --font-sans:           'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display:        'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;

  --text-xs:             0.75rem;     /* 12px */
  --text-sm:             0.875rem;    /* 14px */
  --text-base:           1rem;        /* 16px */
  --text-lg:             1.125rem;    /* 18px */
  --text-xl:             1.25rem;     /* 20px */
  --text-2xl:            1.5rem;      /* 24px */
  --text-3xl:            1.875rem;    /* 30px */
  --text-4xl:            2.25rem;     /* 36px */

  --fw-light:            300;
  --fw-normal:           400;
  --fw-medium:           500;
  --fw-semibold:         600;
  --fw-bold:             700;
  --fw-extrabold:        800;

  --leading-tight:       1.25;
  --leading-snug:        1.375;
  --leading-normal:      1.5;
  --leading-relaxed:     1.625;

  /* ---- ESPACIADO ---- */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */

  /* ---- BORDES REDONDEADOS ---- */
  --radius-sm:   0.375rem;   /* 6px */
  --radius-md:   0.625rem;   /* 10px */
  --radius-lg:   1rem;       /* 16px */
  --radius-xl:   1.5rem;     /* 24px */
  --radius-2xl:  2rem;       /* 32px */
  --radius-full: 9999px;

  /* ---- SOMBRAS ---- */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.6);
  --shadow-glow-rector:  0 0 24px rgba(108, 62, 184, 0.3);
  --shadow-glow-coord:   0 0 24px rgba(26, 111, 165, 0.3);
  --shadow-glow-orient:  0 0 24px rgba(42, 138, 94, 0.3);
  --shadow-glow-docente: 0 0 24px rgba(192, 74, 30, 0.3);

  /* ---- TRANSICIONES ---- */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- LAYOUT ---- */
  --sidebar-width:      260px;
  --header-height:      64px;
  --max-content:        1200px;
  --content-padding:    var(--space-6);

  /* ---- GLASSMORPHISM ---- */
  --glass-bg:      rgba(255, 255, 255, 0.04);
  --glass-border:  rgba(255, 255, 255, 0.08);
  --glass-blur:    16px;
}

/* ============================================================
   MODO CLARO
   ============================================================

   Este bloque existía desde el principio bajo el selector
   `:root.auto-theme`, que no se aplicaba nunca porque nada añadía esa
   clase: el trabajo estaba hecho y desconectado, y la aplicación quedaba
   en oscuro fijo. Para un público que estudia con luz solar directa y en
   hardware antiguo, eso es una barrera de accesibilidad con la solución
   ya pagada.

   Ahora hay tres estados, no dos:

     · sin elegir (por defecto)  → manda el sistema operativo
     · elegido claro             → `data-theme="light"` en <html>
     · elegido oscuro            → `data-theme="dark"` en <html>

   La guarda `:not([data-theme="dark"])` es lo que hace que una elección
   explícita de oscuro gane sobre un sistema en claro. Sin ella, quien
   prefiere oscuro en una máquina configurada en claro no podría
   conservarlo.

   La paleta se repite en los dos selectores a propósito: CSS no tiene
   forma de reutilizar un bloque de declaraciones, y una capa intermedia
   de alias haría más difícil ver qué color acaba aplicándose.
   ============================================================ */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg-base:            #F3F4F8;
    --bg-surface:         #FFFFFF;
    --bg-surface-2:       #F0F2F7;
    --bg-surface-3:       #E5E8F0;
    --bg-surface-raised:  #FFFFFF;
    --bg-overlay:         rgba(15, 17, 23, 0.55);
    --border-subtle:      rgba(0, 0, 0, 0.08);
    --border-default:     rgba(0, 0, 0, 0.13);
    --border-strong:      rgba(0, 0, 0, 0.22);
    --text-primary:       #0F1117;
    --text-secondary:     #47505F;
    --text-tertiary:      #6B7484;
    --text-inverse:       #FFFFFF;
    --glass-bg:           rgba(255, 255, 255, 0.72);
    --glass-border:       rgba(0, 0, 0, 0.08);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-base:            #F3F4F8;
  --bg-surface:         #FFFFFF;
  --bg-surface-2:       #F0F2F7;
  --bg-surface-3:       #E5E8F0;
  --bg-surface-raised:  #FFFFFF;
  --bg-overlay:         rgba(15, 17, 23, 0.55);
  --border-subtle:      rgba(0, 0, 0, 0.08);
  --border-default:     rgba(0, 0, 0, 0.13);
  --border-strong:      rgba(0, 0, 0, 0.22);
  --text-primary:       #0F1117;
  --text-secondary:     #47505F;
  --text-tertiary:      #6B7484;
  --text-inverse:       #FFFFFF;
  --glass-bg:           rgba(255, 255, 255, 0.72);
  --glass-border:       rgba(0, 0, 0, 0.08);
}