/* ==========================================================================
   Hebb - Design Tokens (Custom Properties)

   Fase 16a: los valores de marca ya NO se fijan aquí. Esta hoja los toma de las
   variables que genera `/api/tema/css` a partir de los tokens del tenant
   (`--color-primario`, `--gris-*`, `--radio-*`, `--fuente-*`), y deja como
   fallback la paleta histórica para el caso de que ese CSS no cargue.

   Consecuencia práctica: cambiar el tema o pasar a modo oscuro repinta toda la
   interfaz heredada sin tocar sus hojas, porque todas leen de aquí.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Colores de marca (del tema del tenant)
     -------------------------------------------------------------------------- */
  --color-primary-dark: var(--color-secundario, #347172);
  --color-primary: var(--color-primario, #349084);
  --color-primary-light: var(--color-primario-claro, #3caaaa);

  --color-primary-dark-rgb: var(--color-secundario-rgb, 52, 113, 114);
  --color-primary-rgb: var(--color-primario-rgb, 52, 144, 132);
  --color-primary-light-rgb: var(--color-primario-rgb, 60, 170, 170);

  /* Variantes con opacidad */
  --color-primary-50: rgba(var(--color-primary-rgb), 0.05);
  --color-primary-100: rgba(var(--color-primary-rgb), 0.1);
  --color-primary-200: rgba(var(--color-primary-rgb), 0.2);
  --color-primary-300: rgba(var(--color-primary-rgb), 0.3);

  /* Acento del tema: color de realce distinto del primario. */
  --color-accent: var(--color-acento, #c8552d);
  --color-accent-rgb: var(--color-acento-rgb, 200, 85, 45);

  /* Superficies del tema: lienzo de la página y de las tarjetas. */
  --color-surface: var(--color-superficie, #f5f7fa);
  --color-surface-alt: var(--color-superficie-alt, #eef1f6);
  --color-bg: var(--color-fondo, #ffffff);
  --color-text: var(--color-texto, #1f2937);
  --color-text-soft: var(--color-texto-suave, #6b7280);

  /* --------------------------------------------------------------------------
     Colores semanticos
     -------------------------------------------------------------------------- */
  /* `--color-error` y `--color-error-rgb` los declara también el CSS del tema
     con el mismo nombre; como esa hoja se carga DESPUÉS que esta, el valor del
     tenant gana y lo de aquí queda como respaldo si no llegara a cargar. */
  --color-error: #dc2626;
  --color-error-rgb: 220, 38, 38;
  --color-error-light: var(--color-error-suave, #fef2f2);
  --color-error-border: var(--color-error-borde, #fecaca);

  --color-success: var(--color-exito, #16a34a);
  --color-success-light: var(--color-exito-suave, #f0fdf4);
  --color-success-border: var(--color-exito-borde, #bbf7d0);
  --color-success-rgb: var(--color-exito-rgb, 22, 163, 74);

  --color-warning: var(--color-aviso, #d97706);
  --color-warning-light: var(--color-aviso-suave, #fffbeb);
  --color-warning-border: var(--color-aviso-borde, #fde68a);
  --color-warning-rgb: var(--color-aviso-rgb, 217, 119, 6);

  --color-info: #2563eb;
  --color-info-light: #eff6ff;
  --color-info-border: #bfdbfe;
  --color-info-rgb: 37, 99, 235;

  /* --------------------------------------------------------------------------
     Colores neutros — derivados del par fondo/texto del tema, de modo que se
     invierten solos en modo oscuro.
     -------------------------------------------------------------------------- */
  --color-white: var(--color-fondo, #ffffff);
  --color-black: var(--color-texto, #000000);
  --color-gray-50: var(--gris-50, #f9fafb);
  --color-gray-100: var(--gris-100, #f3f4f6);
  --color-gray-200: var(--gris-200, #e5e7eb);
  --color-gray-300: var(--gris-300, #d1d5db);
  --color-gray-400: var(--gris-400, #9ca3af);
  --color-gray-500: var(--gris-500, #6b7280);
  --color-gray-600: var(--gris-600, #4b5563);
  --color-gray-700: var(--gris-700, #374151);
  --color-gray-800: var(--gris-800, #1f2937);
  --color-gray-900: var(--gris-900, #111827);

  /* --------------------------------------------------------------------------
     Tokens de glassmorphism
     -------------------------------------------------------------------------- */
  /* El "cristal" se compone sobre el fondo del tema, no sobre blanco fijo: así
     el efecto sigue funcionando cuando el tenant elige un fondo cálido o pasa a
     modo oscuro. */
  --glass-rgb: var(--color-fondo-rgb, 255, 255, 255);
  --glass-bg: rgba(var(--glass-rgb), 0.15);
  --glass-bg-strong: rgba(var(--glass-rgb), 0.25);
  --glass-bg-card: rgba(var(--glass-rgb), 0.7);
  --glass-bg-sidebar: rgba(var(--color-secundario-rgb, 36, 100, 96), 0.95);
  --glass-blur: 12px;
  --glass-blur-strong: 20px;
  /* El borde del cristal se tinta con el color de TEXTO, no con blanco: sobre un
     fondo claro un borde blanco es invisible y las tarjetas se quedaban sin
     contorno. El bloque [data-theme="dark"] ya lo hacia asi; esto lo hace
     simetrico en claro. */
  --glass-border: rgba(var(--color-texto-rgb, 31, 41, 51), 0.10);
  --glass-border-strong: rgba(var(--color-texto-rgb, 31, 41, 51), 0.18);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
  --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
  --glass-radius: var(--radio-lg, 16px);
  --glass-radius-sm: var(--radio-md, 12px);
  --glass-radius-lg: calc(var(--radio-lg, 16px) * 1.5);

  /* --------------------------------------------------------------------------
     Tipografia
     -------------------------------------------------------------------------- */
  /* La tipografía sale del catálogo autoalojado del tema (Fase 16a). Typold se
     conserva como respaldo para las instancias que no hayan publicado tema. */
  --font-family: var(--fuente-cuerpo, 'Typold Medium', system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
  --font-family-headings: var(--fuente-titulos, var(--font-family));
  --font-family-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono',
    'Courier New', monospace;

  /* Tamanos tipograficos */
  --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 */

  /* Alturas de linea */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Pesos */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* --------------------------------------------------------------------------
     Escala de espaciado (incrementos de 4px)
     -------------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --------------------------------------------------------------------------
     Bordes
     -------------------------------------------------------------------------- */
  /* Los tres radios del tema se estiran a la escala que ya usaba la interfaz. */
  --radius-sm: var(--radio-sm, 6px);
  --radius-md: var(--radio-md, 8px);
  --radius-lg: var(--radio-lg, 12px);
  --radius-xl: calc(var(--radio-lg, 12px) * 1.35);
  --radius-2xl: calc(var(--radio-lg, 12px) * 2);
  --radius-full: 9999px;

  --border-width: 1px;
  --border-color: var(--color-borde, var(--color-gray-200));
  /* Alias historicos: varias hojas heredadas escriben var(--color-border, …),
     var(--color-text-muted, …) y companyia. Sin definirlos aqui siempre ganaba
     el literal de reserva, que es claro, y esas pantallas se quedaban en claro
     dentro del modo oscuro. El test tests/test_css_tokens.py vigila que no
     aparezcan nuevos tokens huerfanos. */
  --color-border: var(--border-color);
  --color-text-muted: var(--color-text-soft);
  --color-bg-hover: var(--color-gray-50);
  --color-bg-subtle: var(--color-gray-50);
  --color-success-bg: var(--color-success-light);
  --color-error-bg: var(--color-error-light);
  /* Un paso mas claro que --color-primary-light en claro y mas oscuro en
     oscuro, porque se mezcla contra el fondo real del tema. */
  --color-primary-lighter: color-mix(in srgb, var(--color-primary-light) 65%, var(--color-white));

  /* --------------------------------------------------------------------------
     Sombras
     -------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.14);

  /* --------------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------------- */
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 64px;
  --navbar-height: 64px;
  --content-max-width: 1280px;

  /* --------------------------------------------------------------------------
     Transiciones
     -------------------------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --------------------------------------------------------------------------
     Z-index
     -------------------------------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sidebar: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* --------------------------------------------------------------------------
     Colores de roles
     -------------------------------------------------------------------------- */
  --role-alumno: #16a34a;
  --role-alumno-light: #f0fdf4;
  --role-alumno-border: #bbf7d0;

  --role-tutor: #2563eb;
  --role-tutor-light: #eff6ff;
  --role-tutor-border: #bfdbfe;

  --role-gestor: #d97706;
  --role-gestor-light: #fffbeb;
  --role-gestor-border: #fde68a;

  --role-inspector: #dc2626;
  --role-inspector-light: #fef2f2;
  --role-inspector-border: #fecaca;

  --role-admin: #7c3aed;
  --role-admin-light: #f5f3ff;
  --role-admin-border: #c4b5fd;
}

/* --------------------------------------------------------------------------
   Variables moviles (aplicables dentro de @media max-width 768px)
   -------------------------------------------------------------------------- */
:root {
  --mobile-padding-x: 1rem;
  --mobile-padding-y: 0.75rem;
  --mobile-font-base: 15px;
  --mobile-touch-min: 44px;
  --mobile-navbar-height: 56px;
  --mobile-drawer-width: 280px;
}

/* ==========================================================================
   Fase 16a — Modo oscuro

   La inversión de la paleta la hace el CSS del tema: `[data-theme="dark"]`
   redefine los tokens (`--color-fondo`, `--color-texto`, `--gris-*`…) y, como
   todo lo de arriba lee de ellos, la interfaz entera cambia sola.

   Aquí solo quedan los ajustes que NO se deducen de un color: opacidades del
   cristal, fuerza de las sombras y los pocos valores que estaban fijados en
   blanco o negro literales.
   ========================================================================== */

[data-theme="dark"] {
  /* Sobre fondo oscuro el cristal tiene que ser más opaco: con 0,15 de blanco
     el texto pierde contraste y con 0,7 se ve lechoso. */
  --glass-bg: rgba(var(--color-superficie-rgb), 0.35);
  --glass-bg-strong: rgba(var(--color-superficie-rgb), 0.55);
  --glass-bg-card: rgba(var(--color-superficie-rgb), 0.82);
  --glass-border: rgba(var(--color-texto-rgb), 0.14);
  --glass-border-strong: rgba(var(--color-texto-rgb), 0.24);

  /* Las sombras suaves desaparecen sobre negro: se compensan con más alfa. */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);

  --color-info: #7aa5ff;
  --color-info-light: rgba(122, 165, 255, 0.14);
  --color-info-border: rgba(122, 165, 255, 0.35);
  --color-info-rgb: 122, 165, 255;

  /* Colores de rol: los tonos planos de la versión clara quedan chillones en
     oscuro; se aclaran y sus fondos pasan a transparencias del propio color. */
  --role-alumno: #58c07c;
  --role-alumno-light: rgba(88, 192, 124, 0.14);
  --role-alumno-border: rgba(88, 192, 124, 0.35);
  --role-tutor: #7aa5ff;
  --role-tutor-light: rgba(122, 165, 255, 0.14);
  --role-tutor-border: rgba(122, 165, 255, 0.35);
  --role-gestor: #e8a33d;
  --role-gestor-light: rgba(232, 163, 61, 0.14);
  --role-gestor-border: rgba(232, 163, 61, 0.35);
  --role-inspector: #f07a75;
  --role-inspector-light: rgba(240, 122, 117, 0.14);
  --role-inspector-border: rgba(240, 122, 117, 0.35);
  --role-admin: #b18cf0;
  --role-admin-light: rgba(177, 140, 240, 0.14);
  --role-admin-border: rgba(177, 140, 240, 0.35);

  /* Los degradados de la barra lateral parten del fondo, no del primario: en
     oscuro una banda de color saturado a pantalla completa cansa la vista. */
  --sidebar-gradient-start: rgba(var(--color-superficie-rgb), 0.98);
  --glass-bg-sidebar: rgba(var(--color-superficie-rgb), 0.95);
  --sidebar-gradient-end: rgba(var(--color-superficie-rgb), 0.92);

  color-scheme: dark;
}

/* Fondo y color de texto de la página: sin esto el <body> seguiría con el
   degradado claro de `base.css` y solo cambiarían los componentes. */
[data-theme="dark"] body {
  background: var(--color-fondo);
  color: var(--color-texto);
}