/* VITRU — tokens para Open Design.
 * Paleta oficial (Fer, 2026-10-25): #082822 #113F36 #256659 #E59661 #D18159 #C2C2C2 #FFFFFF.
 * Las variantes (--vitru-verde-950/850, offwhite, piel, línea) salen de esa paleta y se aprobaron
 * con la muestra v4 de pantallas (KM-10). Escala de letra, espacios y radios: propuesta del kit,
 * no están en el manual.
 * Grafito #3A3A3A: gris muy oscuro neutro para texto suave y números en la clara
 * (modo claro v5, aprobado por Fer 26/10/2026, KM-11).
 * Pantalla clara por defecto; la oscura va en [data-theme="dark"].
 */
:root, [data-theme="light"] {
  /* ─── Paleta de marca (extensiones VITRU) ─────────────────────────── */
  --vitru-verde-950: #051B17;
  --vitru-verde-900: #082822;
  --vitru-verde-850: #0C3029;
  --vitru-verde-800: #113F36;
  --vitru-verde-600: #256659;
  --vitru-cobre-claro: #E59661;
  --vitru-cobre-profundo: #D18159;
  --vitru-gris: #C2C2C2;
  --vitru-blanco: #FFFFFF;
  --vitru-offwhite: #F6F3EE;
  --vitru-offwhite-calido: #EDE4D8;
  --vitru-piel: #F4E1D2;
  --vitru-linea: #E7E2DA;
  --vitru-grafito: #3A3A3A;   /* v5: gris muy oscuro neutro, texto suave y números en la clara */

  /* Cobre: solo detalles (hilos, rayitas, subrayados, foco). Nunca relleno. */
  --detalle: var(--vitru-cobre-profundo);
  --hilo-cobre: linear-gradient(90deg, transparent, #D18159 20%, #E59661 50%, #D18159 80%, transparent);
  --antetitulo: var(--vitru-verde-600);   /* v5: queda verde (antes salía de --muted) */
  --texto-parrafo: var(--fg);
  --link: var(--vitru-verde-600);

  /* Vidrio: tarjetas translúcidas con brillo, que parecen flotar */
  --glass-bg: rgba(246, 243, 238, 0.50);   /* v5: off-white #F6F3EE translúcido (antes blanco .58) */
  --glass-border: rgba(8, 40, 34, 0.12);   /* v5: hilo fino verde #082822 al 12% (antes blanco, no se veía) */
  --glass-shine: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 28%, transparent 55%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(8,40,34,.04), 0 14px 30px -18px rgba(8,40,34,.16);   /* v5: sombra más tenue */
  --glass-blur: blur(18px) saturate(1.2);
  /* Fondo claro (aprobado por Fer 26/10/2026, KM-13): off-white neutro, sin halo de color.
     Degradé radial muy suave: #F6F3EE en el centro, apenas más oscuro (#E7E2DA) hacia los bordes. */
  --halo: none;
  --fondo: radial-gradient(ellipse 140% 110% at 50% 35%, #F6F3EE 0%, #F6F3EE 45%, #E7E2DA 100%);
  --cabecera-bg: radial-gradient(120% 90% at 50% 0%, #113F36 0%, #082822 55%, #051B17 100%);

  /* Botón principal: verde con degradé, letra off-white cálido */
  --accent-gradient: linear-gradient(180deg, #113F36, #082822);
  --accent-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 14px -4px rgba(8,40,34,.45);

  /* ─── Superficies ────────────────────────────────────────────────── */
  --bg: var(--vitru-offwhite);   /* KM-13: color liso de respaldo = centro del fondo #F6F3EE (el fondo real es --fondo) */
  --surface: var(--vitru-blanco);
  --surface-warm: var(--vitru-piel);

  /* ─── Texto ──────────────────────────────────────────────────────── */
  --fg: var(--vitru-verde-900);
  --fg-2: var(--vitru-verde-800);
  --muted: var(--vitru-grafito);   /* v5: grafito (antes verde medio #256659) */
  --meta: var(--muted);
  --aviso-texto: var(--vitru-grafito);   /* v5: texto bajo el título del aviso */
  --numero: var(--vitru-grafito);   /* v5: número grande de las filas (vt-numero) */

  /* ─── Bordes ─────────────────────────────────────────────────────── */
  --border: rgba(8, 40, 34, 0.12);   /* v5: la línea sale del verde (sigue igual con el fondo KM-13) */
  --border-soft: var(--border);

  /* ─── Acción principal ───────────────────────────────────────────── */
  --accent: var(--vitru-verde-800);
  --accent-on: var(--vitru-offwhite-calido);
  --accent-hover: var(--vitru-verde-900);
  --accent-active: var(--vitru-verde-950);

  /* ─── Estados (aprobados por Fer, 2026-10-25) ────────────────────── */
  --success: #15803D;
  --warn: #B45309;
  --danger: #C81E1E;
  /* Aviso: tarjeta de vidrio off-white (v5); título y sombra tenue en el color del aviso */
  --aviso-bg: var(--glass-bg);   /* v5: sin tinte salvia */
  --aviso-border: var(--glass-border);
  --aviso-inset: inset 0 1px 0 rgba(255,255,255,.7);

  /* ─── Letras ─────────────────────────────────────────────────────── */
  --font-display: "Candara", "Calibri", "Segoe UI", "Optima", sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 19px;
  --text-xl: 22px;
  --text-2xl: 27px;
  --text-3xl: 34px;
  --text-4xl: 48px;

  --leading-body: 1.6;
  --leading-tight: 1.1;
  --tracking-display: -0.005em;
  /* Letra más liviana (aprobado por Fer 26/10/2026, KM-13) */
  --peso-titulo: 400;                      /* Candara regular: título de página («Hoy») y de sección */
  --peso-numero: 400;                      /* Candara regular: número grande de las filas */
  --peso-aviso: 700;                       /* Candara negrita: título de aviso (19px negrita = texto grande AA, 3:1) */
  --titulo-tarjeta: var(--vitru-grafito);  /* título dentro de una tarjeta de vidrio: grafito en la clara */

  /* ─── Espacios ───────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --section-y-desktop: 96px;
  --section-y-tablet: 72px;
  --section-y-phone: 48px;

  /* ─── Radios ─────────────────────────────────────────────────────── */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 9999px;

  /* ─── Relieve ────────────────────────────────────────────────────── */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 1px 2px rgba(8,40,34,.04), 0 14px 30px -18px rgba(8,40,34,.16);

  /* ─── Foco (hilo cobre) ──────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(209, 129, 89, 0.45);

  /* ─── Movimiento ─────────────────────────────────────────────────── */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.23, 1, 0.32, 1);

  /* ─── Diseño de página ───────────────────────────────────────────── */
  --container-max: 1120px;
  --container-gutter-desktop: 48px;
  --container-gutter-tablet: 32px;
  --container-gutter-phone: 16px;
}

[data-theme="dark"] {
  --antetitulo: var(--vitru-cobre-claro);
  --texto-parrafo: rgba(237,228,216,.86);
  --bg: var(--vitru-verde-900);
  --surface: var(--vitru-verde-800);
  --surface-warm: var(--vitru-verde-850);

  --fg: var(--vitru-offwhite-calido);
  --fg-2: var(--vitru-offwhite);
  --muted: var(--vitru-gris);
  --meta: var(--muted);
  --aviso-texto: var(--fg);   /* oscura: igual que antes */
  --numero: var(--fg);
  --titulo-tarjeta: var(--fg);   /* oscura: off-white cálido, igual que antes */

  --border: rgba(194, 194, 194, 0.16);
  --border-soft: var(--border);

  --accent: var(--vitru-verde-600);
  --accent-on: var(--vitru-offwhite-calido);
  --accent-hover: #2E7465;
  --accent-active: #1B5146;
  --accent-gradient: linear-gradient(180deg, #2E7465, #256659 45%, #1B5146);
  --accent-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 20px -8px rgba(0,0,0,.65);

  --detalle: var(--vitru-cobre-claro);
  --link: var(--vitru-cobre-claro);

  /* Estados sobre verde (aprobados por Fer, 2026-10-25) */
  --success: #3DDC84;
  --warn: #FFC96B;
  --danger: #FF6B6B;
  --aviso-bg: var(--glass-bg);
  --aviso-border: var(--glass-border);
  --aviso-inset: inset 0 1px 0 rgba(255,255,255,.10);

  --glass-bg: linear-gradient(180deg, rgba(37,102,89,.30), rgba(17,63,54,.38));
  --glass-border: rgba(229, 150, 97, 0.16);
  --glass-shine: linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 30%, transparent 55%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 28px 50px -18px rgba(0,0,0,.7);
  --halo: radial-gradient(60% 30% at 85% 60%, rgba(229,150,97,.10), transparent 70%);
  --fondo: none;   /* oscura: sin cambios (KM-13 solo toca la clara) */
  --cabecera-bg: transparent;

  --elev-raised: 0 28px 50px -18px rgba(0,0,0,.7);
  --focus-ring: 0 0 0 3px rgba(229, 150, 97, 0.5);
}