/* ==========================================================================
   QUÉDATE - Sistema de Tokens y Variables de Diseño Accesible
   Cumplimiento: UNE-EN 301549:2022, RD 1112/2018, WCAG 2.1 / 2.2 AA y AAA
   Optimizado para personas mayores (Senior UX & Alta Legibilidad)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* --- Paleta Cromática Principal (Ratio de contraste > 7:1 y > 11:1 sobre fondos) --- */
  --color-primary: #0b3b60;          /* Azul océano profundo institucional */
  --color-primary-dark: #062238;     /* Azul noche profundo */
  --color-primary-light: #165384;    /* Azul medio */
  --color-secondary: #007782;        /* Turquesa sanitario cálido accesible */
  --color-secondary-light: #83c5be;  /* Turquesa suave para fondos decorativos */
  --color-secondary-dark: #004d55;   /* Turquesa oscuro */
  --color-accent: #d9531e;           /* Terracota / Naranja cálido para llamadas a la acción */
  --color-accent-hover: #b84013;     /* Hover accesible */

  /* --- Fondos y Superficies --- */
  --color-bg-base: #f8fafc;          /* Fondo base blanco nieve (reduce fatiga visual) */
  --color-bg-surface: #ffffff;       /* Fondo blanco puro para tarjetas */
  --color-bg-alt: #f1f5f9;           /* Fondo grisáceo azulado suave para secciones alternas */
  --color-bg-muted: #e2e8f0;         /* Fondo tenue para bordes y separadores */
  --color-bg-glass: rgba(255, 255, 255, 0.92); /* Fondo translúcido para header glassmorphism */

  /* --- Tipografía y Colores de Texto --- */
  --color-text-main: #0f172a;        /* Contraste 15:1 sobre blanco */
  --color-text-muted: #334155;       /* Contraste 8.5:1 sobre blanco */
  --color-text-inverse: #ffffff;     /* Texto sobre fondos oscuros */
  --color-border: #cbd5e1;          /* Borde con contraste visual claro */
  --color-border-subtle: #e2e8f0;   /* Borde suave interior */
  --color-border-focus: #0056b3;     /* Borde reforzado para foco de teclado */

  /* --- Colores de Estado --- */
  --color-success: #155724;
  --color-success-bg: #d4edda;
  --color-warning: #856404;
  --color-warning-bg: #fff3cd;
  --color-error: #721c24;
  --color-error-bg: #f8d7da;

  /* --- Tipografías del Sistema --- */
  --font-family-base: "Atkinson Hyperlegible", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-headings: "Plus Jakarta Sans", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-family-dyslexic: "Comic Sans MS", "Arial Rounded MT Bold", sans-serif;

  /* --- Escala Tipográfica Senior (Base mínima 18px / 1.125rem) --- */
  --font-size-multiplier: 1;         /* Controlado dinámicamente por el widget (+A / -A) */
  --font-size-xs: calc(0.95rem * var(--font-size-multiplier));    /* ~15.2px */
  --font-size-sm: calc(1.05rem * var(--font-size-multiplier));    /* ~16.8px */
  --font-size-base: calc(1.15rem * var(--font-size-multiplier));  /* ~18.4px */
  --font-size-md: calc(1.3rem * var(--font-size-multiplier));     /* ~20.8px */
  --font-size-lg: calc(1.55rem * var(--font-size-multiplier));    /* ~24.8px */
  --font-size-xl: calc(1.95rem * var(--font-size-multiplier));    /* ~31.2px */
  --font-size-2xl: calc(2.45rem * var(--font-size-multiplier));   /* ~39.2px */
  --font-size-3xl: calc(3rem * var(--font-size-multiplier));      /* ~48px */

  /* --- Espaciados y Longitud de Lectura --- */
  --line-height-base: 1.7;
  --line-height-heading: 1.25;
  --max-reading-width: 70ch;         /* Máximo 70 caracteres por línea para evitar desorientación */
  --container-max-width: 1240px;

  /* --- Dimensiones Interactivas (Criterio WCAG 2.2 / Senior) --- */
  --min-touch-target: 48px;          /* Mínimo 48x48px para cualquier elemento interactivo */
  --focus-outline-width: 3px;
  --focus-outline-offset: 3px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 50px;
  
  /* --- Sombras Multicapa Suaves (Depth System) --- */
  --shadow-sm: 0 2px 4px rgba(11, 59, 96, 0.04);
  --shadow-md: 0 4px 14px rgba(11, 59, 96, 0.07);
  --shadow-lg: 0 10px 25px rgba(11, 59, 96, 0.11);
  --shadow-card: 0 4px 20px -2px rgba(11, 59, 96, 0.06), 0 2px 6px -1px rgba(11, 59, 96, 0.04);
  --shadow-card-hover: 0 14px 30px -4px rgba(11, 59, 96, 0.12), 0 4px 10px -2px rgba(11, 59, 96, 0.06);
  --shadow-float: 0 20px 35px -8px rgba(11, 59, 96, 0.18);

  --transition-default: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.15s ease;
}

/* --- Tema: Alto Contraste Oscuro (Negro / Amarillo / Blanco) --- */
body.theme-high-contrast-dark {
  --color-primary: #ffff00;          /* Amarillo brillante */
  --color-primary-dark: #ffee00;
  --color-primary-light: #ffffff;
  --color-secondary: #00ffff;        /* Cian puro */
  --color-secondary-light: #80ffff;
  --color-accent: #ff9900;           /* Naranja brillante */
  --color-accent-hover: #ffaa33;

  --color-bg-base: #000000;          /* Fondo negro total */
  --color-bg-surface: #121212;
  --color-bg-alt: #1a1a1a;
  --color-bg-muted: #2d2d2d;
  --color-bg-glass: #000000;

  --color-text-main: #ffffff;
  --color-text-muted: #f0f0f0;
  --color-text-inverse: #000000;
  --color-border: #ffffff;
  --color-border-subtle: #888888;
  --color-border-focus: #ffff00;
  --shadow-sm: none;
  --shadow-md: 0 0 0 2px #ffffff;
  --shadow-lg: 0 0 0 3px #ffff00;
  --shadow-card: 0 0 0 2px #ffffff;
  --shadow-card-hover: 0 0 0 3px #ffff00;
}

/* --- Tema: Alto Contraste Claro (Blanco / Negro puro) --- */
body.theme-high-contrast-light {
  --color-primary: #000000;
  --color-primary-dark: #000000;
  --color-primary-light: #1a1a1a;
  --color-secondary: #003366;
  --color-secondary-light: #005599;
  --color-accent: #990000;
  --color-accent-hover: #cc0000;

  --color-bg-base: #ffffff;
  --color-bg-surface: #ffffff;
  --color-bg-alt: #f0f0f0;
  --color-bg-muted: #d0d0d0;
  --color-bg-glass: #ffffff;

  --color-text-main: #000000;
  --color-text-muted: #111111;
  --color-text-inverse: #ffffff;
  --color-border: #000000;
  --color-border-subtle: #333333;
  --color-border-focus: #000000;
  --shadow-sm: none;
  --shadow-md: 0 0 0 2px #000000;
  --shadow-lg: 0 0 0 3px #000000;
  --shadow-card: 0 0 0 2px #000000;
  --shadow-card-hover: 0 0 0 3px #000000;
}

/* --- Modo Tipografía Dislexia / Lectura Fácil --- */
body.font-mode-dyslexic {
  --font-family-base: var(--font-family-dyslexic);
  --font-family-headings: var(--font-family-dyslexic);
  --line-height-base: 1.85;
  letter-spacing: 0.04em;
  word-spacing: 0.08em;
}