/* =====================================================================
   tokens_dy.css  ·  Sistema de diseño D&Y CECAP (plataforma "aula")
   Versión 1.0 · 2026-11-03 · Propuesta de auditoría (NO desplegado)
   ---------------------------------------------------------------------
   Reglas de uso
   1. Las páginas NO definen colores propios: solo usan var(--dy-*).
   2. Oro (--dy-gold) es RELLENO / ACENTO, nunca texto sobre claro (2.13:1).
      Para texto dorado sobre claro usar --dy-gold-text.
   3. Un estado nunca depende solo del color: siempre icono + palabra.
   4. El bloque @media móvil de cada página sigue yendo AL FINAL del <style>.
   5. Contrastes verificados por cálculo (fórmula WCAG 2.x de luminancia
      relativa). Texto normal exige 4.5:1 (AA), bordes/iconos de UI 3:1.
      La cifra entre corchetes es la razón real calculada.
   ===================================================================== */

:root {
  color-scheme: light;

  /* ---------- 1. Marca (primitivos) ---------- */
  --dy-navy-900: #0B1B3D;   /* azul marino oficial (logo, certificados) */
  --dy-navy-800: #14264D;
  --dy-navy-700: #1E3566;
  --dy-navy-100: #E5EBF4;
  --dy-gold-500: #E0A91C;   /* oro oficial: rellenos y acentos */
  --dy-gold-600: #C9940F;   /* hover de botón dorado [tinta sobre él 6.24] */
  --dy-gold-700: #96731D;   /* oro profundo (líneas, iconos grandes) [4.41 sobre blanco: NO texto chico] */
  --dy-gold-800: #7F5F0F;   /* oro para TEXTO sobre claro */
  --dy-gold-100: #FBEFCC;
  --dy-gold-50:  #FDF8EA;

  /* ---------- 2. Superficies (capas, de atrás hacia adelante) ---------- */
  --dy-bg:             #F4F6FA; /* fondo de página (neutro, ya no celeste) */
  --dy-surface:        #FFFFFF; /* tarjeta */
  --dy-surface-2:      #F8FAFC; /* zona dentro de tarjeta (filas alternas, pie) */
  --dy-surface-sunken: #EDF1F6; /* campos de solo lectura, pistas de progreso */
  --dy-surface-tint:   #EEF3FA; /* resaltado suave informativo */
  --dy-surface-accent: var(--dy-gold-50);  /* "lo importante de hoy" */
  --dy-surface-inverse: var(--dy-navy-900);/* bandas de énfasis / héroe */
  --dy-surface-raised: #FFFFFF; /* tarjeta elevada (menús, modales) + sombra-lg */

  /* ---------- 3. Texto ---------- */
  --dy-text:        #0B1B3D; /* [16.96 blanco · 15.67 bg] */
  --dy-text-2:      #3B4760; /* secundario [9.31 blanco · 8.60 bg · 8.21 sunken] */
  --dy-text-muted:  #5A6478; /* ayudas, fechas [5.95 blanco · 5.50 bg · 5.25 sunken] */
  --dy-text-inverse:#FFFFFF; /* sobre navy [16.96] */
  --dy-text-on-gold:#0B1B3D; /* sobre oro [7.96] */
  --dy-gold-text:   var(--dy-gold-800); /* [5.92 blanco · 5.47 bg · 5.17 gold-100] */
  --dy-link:        #1F4FA3; /* [7.76 blanco · 7.17 bg] */
  --dy-link-hover:  #0B1B3D;

  /* ---------- 4. Bordes ---------- */
  --dy-border:        #D7DEE8; /* separadores decorativos (no requieren 3:1) */
  --dy-border-strong: #7A879C; /* borde de campos/controles [3.64 blanco · 3.36 bg] */
  --dy-border-gold:   var(--dy-gold-500);
  --dy-focus:         #1F4FA3; /* anillo de foco [7.76 blanco] */

  /* ---------- 5. Estados (texto / fondo / borde) ---------- */
  --dy-success:        #17703A; /* [6.15 blanco · 5.47 sobre su fondo · blanco sobre él 6.15] */
  --dy-success-bg:     #E7F5EC;
  --dy-success-border: #8FCBA5;
  --dy-warning:        #8A5100; /* [6.45 blanco · 5.86 sobre su fondo] */
  --dy-warning-bg:     #FFF3D9;
  --dy-warning-border: #E9C07A;
  --dy-danger:         #B42318; /* [6.57 blanco · 5.75 sobre su fondo] */
  --dy-danger-bg:      #FDECEA;
  --dy-danger-border:  #F2A9A1;
  --dy-info:           #1D5AA6; /* [6.85 blanco · 6.01 sobre su fondo] */
  --dy-info-bg:        #E8F1FC;
  --dy-info-border:    #9DBFEA;
  --dy-neutral-state:  #475569; /* "pendiente" [7.58 blanco · 6.69 sobre #EEF1F5] */
  --dy-neutral-bg:     #EEF1F5;

  /* ---------- 6. Estados de certificado (icono + palabra SIEMPRE) ---------- */
  --dy-cert-valido:       var(--dy-success);       /* ✔ VÁLIDO */
  --dy-cert-valido-bg:    var(--dy-success-bg);
  --dy-cert-anulado:      var(--dy-danger);        /* ⊘ ANULADO */
  --dy-cert-anulado-bg:   var(--dy-danger-bg);
  --dy-cert-reemplazado:  var(--dy-info);          /* ⇄ REEMPLAZADO (enlaza al nuevo) */
  --dy-cert-reemplazado-bg: var(--dy-info-bg);
  --dy-cert-pendiente:    var(--dy-neutral-state); /* ◷ PENDIENTE */
  --dy-cert-pendiente-bg: var(--dy-neutral-bg);

  /* ---------- 7. Tutor IA ---------- */
  --dy-ia:      #5B4FE0; /* relleno [blanco sobre él 5.77] */
  --dy-ia-text: #4B3FCF; /* texto [7.21 blanco · 6.36 sobre ia-bg] */
  --dy-ia-bg:   #F1EFFD;

  /* ---------- 8. Progreso y gamificación ---------- */
  --dy-progress-track: var(--dy-surface-sunken);
  --dy-progress-fill:  var(--dy-navy-700);   /* contraste alto con la pista; el oro solo no llega a 3:1 */
  --dy-progress-done:  var(--dy-success);    /* [4.54 vs pista] */
  --dy-points:         var(--dy-gold-500);   /* puntos: relleno oro + texto tinta [7.96] */
  --dy-points-text:    var(--dy-text-on-gold);
  --dy-streak:         #C2410C;              /* racha: blanco sobre él [5.18] */
  --dy-badge:          #6D45C4;              /* insignias: blanco sobre él [6.37] */
  /* Texto que va ENCIMA de los rellenos de color (cambia en modo oscuro) */
  --dy-on-ia:     #FFFFFF;  /* [5.77] */
  --dy-on-streak: #FFFFFF;  /* [5.18] */
  --dy-on-badge:  #FFFFFF;  /* [6.37] */

  /* ---------- 9. Escuelas (texto/borde AA sobre blanco · tinte de fondo) ----------
     Validado: texto ≥4.5 sobre blanco y sobre su tinte; blanco sobre el color ≥4.5.
     Separación mínima entre escuelas simulando deuteranopia/protanopia: ΔE 9 (antes 0).
     Recomendación: guardar en BD el NOMBRE del token (ej. "salud"), no el hex. */
  --dy-esc-docencia:     #2A5DB0; --dy-esc-docencia-bg:   #EAF0FA; /* [6.38 · 5.57] */
  --dy-esc-salud:        #0B7285; --dy-esc-salud-bg:      #E3F3F5; /* [5.59 · 4.90] */
  --dy-esc-tactica:      #5E5A1E; --dy-esc-tactica-bg:    #F1F0E3; /* [7.10 · 6.19] */
  --dy-esc-idiomas:      #6D45C4; --dy-esc-idiomas-bg:    #F0EBFA; /* [6.37 · 5.45] */
  --dy-esc-negocios:     #4B5563; --dy-esc-negocios-bg:   #EEF0F3; /* [7.56 · 6.62] */
  --dy-esc-industrial:   #C2410C; --dy-esc-industrial-bg: #FDEEE6; /* [5.18 · 4.57] */
  --dy-esc-vial:         #3D7A0A; --dy-esc-vial-bg:       #ECF5E4; /* [5.27 · 4.70] */
  --dy-esc-hosteleria:   #9F1239; --dy-esc-hosteleria-bg: #FBE8EE; /* [8.02 · 6.82] */
  --dy-esc-estetica:     #B5367A; --dy-esc-estetica-bg:   #FAEAF3; /* [5.57 · 4.80] */
  --dy-esc-general:      #0B1B3D; --dy-esc-general-bg:    #E5EBF4; /* escuela nueva sin color [16.96 · 14.15] */

  /* ---------- 10. Sombras (azul marino, nunca negro puro) ---------- */
  --dy-shadow-xs: 0 1px 2px rgba(11,27,61,.06);
  --dy-shadow-sm: 0 1px 2px rgba(11,27,61,.06), 0 2px 6px rgba(11,27,61,.06);
  --dy-shadow-md: 0 4px 10px rgba(11,27,61,.07), 0 10px 24px -6px rgba(11,27,61,.10);
  --dy-shadow-lg: 0 12px 32px -8px rgba(11,27,61,.22);
  --dy-ring:      0 0 0 3px var(--dy-surface), 0 0 0 5px var(--dy-focus);

  /* ---------- 11. Radios ---------- */
  --dy-radius-xs: 6px;
  --dy-radius-sm: 8px;
  --dy-radius-md: 12px;
  --dy-radius-lg: 16px;
  --dy-radius-xl: 24px;
  --dy-radius-pill: 999px;

  /* ---------- 12. Espaciado (base 4 px) ---------- */
  --dy-space-1: 4px;  --dy-space-2: 8px;  --dy-space-3: 12px; --dy-space-4: 16px;
  --dy-space-5: 20px; --dy-space-6: 24px; --dy-space-8: 32px; --dy-space-10: 40px;
  --dy-space-12: 48px; --dy-space-16: 64px;
  --dy-gutter: 16px;            /* margen lateral en celular */
  --dy-tap: 44px;               /* tamaño mínimo de toque */

  /* ---------- 13. Tipografía ---------- */
  --dy-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* solo títulos y marca */
  --dy-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --dy-font-mono: ui-monospace, Consolas, 'Courier New', monospace;
  /* Escala móvil primero (mínimo legible 12 px; nunca menos) */
  --dy-fs-xs:   0.75rem;   /* 12px – etiquetas, insignias */
  --dy-fs-sm:   0.875rem;  /* 14px – ayudas, tablas */
  --dy-fs-base: 1rem;      /* 16px – texto de lectura (evita zoom en iOS) */
  --dy-fs-lg:   1.125rem;  /* 18px */
  --dy-fs-xl:   1.375rem;  /* 22px – h3 */
  --dy-fs-2xl:  1.75rem;   /* 28px – h2 */
  --dy-fs-3xl:  clamp(1.9rem, 6vw, 2.75rem); /* h1 */
  --dy-lh-tight: 1.2; --dy-lh-base: 1.55;
  --dy-fw-regular: 400; --dy-fw-semibold: 600; --dy-fw-bold: 700; --dy-fw-black: 800;
  --dy-tracking-caps: .06em; /* MAYÚSCULAS: espaciado moderado (hoy hay 6-8 px) */

  /* ---------- 14. Movimiento ---------- */
  --dy-dur-fast: 120ms; --dy-dur: 200ms; --dy-ease: cubic-bezier(.2,.7,.2,1);
}

/* =====================  MODO OSCURO  =====================
   Automático según el teléfono, salvo que el usuario elija claro.
   Se repite el bloque para [data-theme="dark"] (elección manual). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --dy-bg: #0A1224;  --dy-surface: #111C33;  --dy-surface-2: #16233F;
    --dy-surface-sunken: #0D1629; --dy-surface-tint: #122644; --dy-surface-accent: #2A2210;
    --dy-surface-inverse: #050B18; --dy-surface-raised: #1B2A4A;
    --dy-text: #E9EEF7;        /* [16.03 bg · 14.57 surface] */
    --dy-text-2: #BBC5D8;      /* [10.75 bg · 9.77 surface · 8.19 raised] */
    --dy-text-muted: #97A3BA;  /* [7.35 bg · 6.68 surface · 5.60 raised] */
    --dy-text-inverse: #FFFFFF; --dy-text-on-gold: #0B1B3D; /* [10.10 sobre #F2C14E] */
    --dy-gold-500: #F2C14E; --dy-gold-600: #E0A91C; --dy-gold-text: #F2C14E; /* [10.11 surface] */
    --dy-gold-100: #2E2410; --dy-gold-50: #241C0C;
    --dy-link: #93B8FF; --dy-link-hover: #FFFFFF; /* [8.52 surface] */
    --dy-border: #2A3A5C; --dy-border-strong: #62769C; /* [3.71 surface] */
    --dy-focus: #F2C14E; /* [11.12 bg] */
    --dy-success: #5DD08F; --dy-success-bg: #0F2A1D; --dy-success-border: #2C6B48; /* [8.79 · 7.95] */
    --dy-warning: #F6B851; --dy-warning-bg: #2E2210; --dy-warning-border: #6E5320; /* [9.61 · 8.79] */
    --dy-danger:  #FF8F84; --dy-danger-bg:  #33161A; --dy-danger-border:  #7A3530; /* [7.69 · 7.49] */
    --dy-info:    #86B7FF; --dy-info-bg:    #122644; --dy-info-border:    #2F5A94; /* [8.27 · 7.38] */
    --dy-neutral-state: #B5C0D0; --dy-neutral-bg: #1B2A4A;
    --dy-ia: #A99DFF; --dy-ia-text: #A99DFF; --dy-ia-bg: #1E1B44; /* [7.23 surface] */
    --dy-progress-fill: #93B8FF; --dy-points: #F2C14E; --dy-streak: #FF9A6B; --dy-badge: #BFA6FF; --dy-on-ia: #0B1B3D; --dy-on-streak: #0B1B3D; --dy-on-badge: #0B1B3D; /* tinta sobre rellenos claros [7.23 · 8.14 · 8.17] */ /* rellenos con texto tinta [8.14 · 8.17] */
    --dy-esc-docencia: #8FB2F5; --dy-esc-salud: #5FCFE0; --dy-esc-tactica: #CFC48A;
    --dy-esc-idiomas: #BFA6FF;  --dy-esc-negocios: #B5C0D0; --dy-esc-industrial: #FF9A6B;
    --dy-esc-vial: #9BD86A;     --dy-esc-hosteleria: #FF8FAE; --dy-esc-estetica: #F59AD0;
    --dy-esc-general: #E9EEF7;  /* todos ≥7.9 sobre surface, ≥6.6 sobre raised */
    --dy-esc-docencia-bg: #16233F; --dy-esc-salud-bg: #16233F; --dy-esc-tactica-bg: #16233F;
    --dy-esc-idiomas-bg: #16233F; --dy-esc-negocios-bg: #16233F; --dy-esc-industrial-bg: #16233F;
    --dy-esc-vial-bg: #16233F; --dy-esc-hosteleria-bg: #16233F; --dy-esc-estetica-bg: #16233F;
    --dy-esc-general-bg: #16233F;
    --dy-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --dy-shadow-sm: 0 1px 3px rgba(0,0,0,.45);
    --dy-shadow-md: 0 6px 18px -4px rgba(0,0,0,.55);
    --dy-shadow-lg: 0 16px 40px -8px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --dy-bg: #0A1224;  --dy-surface: #111C33;  --dy-surface-2: #16233F;
  --dy-surface-sunken: #0D1629; --dy-surface-tint: #122644; --dy-surface-accent: #2A2210;
  --dy-surface-inverse: #050B18; --dy-surface-raised: #1B2A4A;
  --dy-text: #E9EEF7; --dy-text-2: #BBC5D8; --dy-text-muted: #97A3BA;
  --dy-text-inverse: #FFFFFF; --dy-text-on-gold: #0B1B3D;
  --dy-gold-500: #F2C14E; --dy-gold-600: #E0A91C; --dy-gold-text: #F2C14E;
  --dy-gold-100: #2E2410; --dy-gold-50: #241C0C;
  --dy-link: #93B8FF; --dy-link-hover: #FFFFFF;
  --dy-border: #2A3A5C; --dy-border-strong: #62769C; --dy-focus: #F2C14E;
  --dy-success: #5DD08F; --dy-success-bg: #0F2A1D; --dy-success-border: #2C6B48;
  --dy-warning: #F6B851; --dy-warning-bg: #2E2210; --dy-warning-border: #6E5320;
  --dy-danger:  #FF8F84; --dy-danger-bg:  #33161A; --dy-danger-border:  #7A3530;
  --dy-info:    #86B7FF; --dy-info-bg:    #122644; --dy-info-border:    #2F5A94;
  --dy-neutral-state: #B5C0D0; --dy-neutral-bg: #1B2A4A;
  --dy-ia: #A99DFF; --dy-ia-text: #A99DFF; --dy-ia-bg: #1E1B44;
  --dy-progress-fill: #93B8FF; --dy-points: #F2C14E; --dy-streak: #FF9A6B; --dy-badge: #BFA6FF; --dy-on-ia: #0B1B3D; --dy-on-streak: #0B1B3D; --dy-on-badge: #0B1B3D; /* tinta sobre rellenos claros [7.23 · 8.14 · 8.17] */
  --dy-esc-docencia: #8FB2F5; --dy-esc-salud: #5FCFE0; --dy-esc-tactica: #CFC48A;
  --dy-esc-idiomas: #BFA6FF;  --dy-esc-negocios: #B5C0D0; --dy-esc-industrial: #FF9A6B;
  --dy-esc-vial: #9BD86A;     --dy-esc-hosteleria: #FF8FAE; --dy-esc-estetica: #F59AD0;
  --dy-esc-general: #E9EEF7;
  --dy-esc-docencia-bg: #16233F; --dy-esc-salud-bg: #16233F; --dy-esc-tactica-bg: #16233F;
  --dy-esc-idiomas-bg: #16233F; --dy-esc-negocios-bg: #16233F; --dy-esc-industrial-bg: #16233F;
  --dy-esc-vial-bg: #16233F; --dy-esc-hosteleria-bg: #16233F; --dy-esc-estetica-bg: #16233F;
  --dy-esc-general-bg: #16233F;
  --dy-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --dy-shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --dy-shadow-md: 0 6px 18px -4px rgba(0,0,0,.55);
  --dy-shadow-lg: 0 16px 40px -8px rgba(0,0,0,.65);
}

/* =====================  BASE MÍNIMA COMPARTIDA  ===================== */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--dy-bg);
  color: var(--dy-text);
  font-family: var(--dy-font-body);
  font-size: var(--dy-fs-base);
  line-height: var(--dy-lh-base);
}
a { color: var(--dy-link); }
a:hover { color: var(--dy-link-hover); }
:focus-visible { outline: 3px solid var(--dy-focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--dy-gold-100); color: var(--dy-text); }

/* Escuela activa: en el contenedor poner class="esc-salud" (u otra) */
.esc-docencia   { --acc: var(--dy-esc-docencia);   --acc-bg: var(--dy-esc-docencia-bg); }
.esc-salud      { --acc: var(--dy-esc-salud);      --acc-bg: var(--dy-esc-salud-bg); }
.esc-tactica    { --acc: var(--dy-esc-tactica);    --acc-bg: var(--dy-esc-tactica-bg); }
.esc-idiomas    { --acc: var(--dy-esc-idiomas);    --acc-bg: var(--dy-esc-idiomas-bg); }
.esc-negocios   { --acc: var(--dy-esc-negocios);   --acc-bg: var(--dy-esc-negocios-bg); }
.esc-industrial { --acc: var(--dy-esc-industrial); --acc-bg: var(--dy-esc-industrial-bg); }
.esc-vial       { --acc: var(--dy-esc-vial);       --acc-bg: var(--dy-esc-vial-bg); }
.esc-hosteleria { --acc: var(--dy-esc-hosteleria); --acc-bg: var(--dy-esc-hosteleria-bg); }
.esc-estetica   { --acc: var(--dy-esc-estetica);   --acc-bg: var(--dy-esc-estetica-bg); }
.esc-general    { --acc: var(--dy-esc-general);    --acc-bg: var(--dy-esc-general-bg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  .dy-chip, .dy-btn, .dy-card { border: 1px solid CanvasText; }
}