/*
  Tokens de diseño del sitio. Los NOMBRES son contrato: los usan sitio.css, el widget del
  asesor (asesor.css) y el panel. Los VALORES se pueden ajustar aquí sin tocar componentes.
  Marca: azul marino #0B3954 y ámbar #FFB128 del sitio anterior + verdes y naranja del logo.
  Todos los pares de texto cumplen WCAG 2.2 AA (ratios anotados).
*/
:root {
  /* Marca */
  --sys-azul: #0B3954;          /* 12,2:1 sobre blanco */
  --sys-azul-hondo: #072638;    /* barra superior y pie */
  --sys-azul-claro: #225471;    /* enlaces y hover de azul; 8,2:1 sobre blanco */
  --sys-ambar: #FFB128;         /* acción principal; con texto marino 6,7:1 */
  --sys-ambar-hondo: #E09400;   /* solo iconos y adornos sobre claro (no texto) */
  --sys-verde: #5DDC32;         /* verde del logo: solo adorno o texto SOBRE AZUL (6,8:1) */
  --sys-verde-hondo: #056C3C;   /* verde para texto sobre claro: 6,5:1 */
  --sys-verde-claro: #87C351;
  --sys-naranja: #F5AB3F;       /* solo adorno (guiones de cifras, portadas) */

  /* Superficies y texto */
  --sys-fondo: #FFFFFF;
  --sys-fondo-suave: #F4F6F9;
  --sys-superficie: #FFFFFF;
  --sys-borde: #DFE4EC;         /* bordes decorativos de tarjetas */
  --sys-texto: #16222C;         /* 16,2:1 */
  --sys-texto-suave: #55616A;   /* 6,4:1 sobre blanco · 5,9:1 sobre fondo suave */
  --sys-sobre-azul: #FFFFFF;
  --sys-sobre-ambar: #0B3954;

  /* Estados */
  --sys-ok: #12733A;            /* 5,2:1 sobre --sys-ok-fondo */
  --sys-aviso: #8A5100;         /* 5,9:1 sobre --sys-aviso-fondo */
  --sys-error: #C62828;         /* 5,6:1 sobre blanco · 4,9:1 sobre --sys-error-fondo */
  --sys-whatsapp: #15803D;      /* texto blanco 5,0:1 (el #1FA855 anterior daba 3,1:1) */

  /* Tipografía */
  --sys-fuente-titulos: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sys-fuente-texto: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Forma */
  --sys-radio: 12px;
  --sys-radio-grande: 20px;
  --sys-radio-pildora: 999px;
  --sys-sombra: 0 1px 2px rgba(11, 57, 84, .05), 0 4px 14px rgba(11, 57, 84, .07);
  --sys-sombra-alta: 0 14px 36px rgba(11, 57, 84, .16);
  --sys-ancho-max: 1240px;

  /* ---------- Nuevos ---------- */
  /* Color */
  --sys-ambar-claro: #FFC24F;        /* hover del botón ámbar (7,6:1 con marino) */
  --sys-whatsapp-hondo: #106B32;     /* hover de WhatsApp */
  --sys-sobre-azul-suave: #B9C9D6;   /* texto secundario sobre azul (7,2:1) y azul hondo (9,2:1) */
  --sys-tinte-azul: #EAF0F5;         /* fondos informativos, hover de contorno */
  --sys-borde-control: #7B8794;      /* borde de campos e interruptores: 3,7:1 (≥ 3:1) */
  --sys-borde-chip: #C3CCD7;         /* borde de chips y botones icono (decorativo) */
  --sys-ok-fondo: #E6F4EA;
  --sys-aviso-fondo: #FFF3DC;
  --sys-error-fondo: #FDECEC;
  --sys-foco: #072638;               /* borde interior del anillo de foco */
  --sys-foco-anillo: #FFB128;        /* aro exterior del foco */
  --sys-espectro: linear-gradient(90deg,
    #10b981 0 5.26%, #b45309 0 10.53%, #0ea5e9 0 15.79%, #16a34a 0 21.05%, #8b5cf6 0 26.32%,
    #0d9488 0 31.58%, #6366f1 0 36.84%, #f97316 0 42.11%, #db2777 0 47.37%, #06b6d4 0 52.63%,
    #65a30d 0 57.89%, #2563eb 0 63.16%, #64748b 0 68.42%, #dc2626 0 73.68%, #d97706 0 78.95%,
    #0284c7 0 84.21%, #c026d3 0 89.47%, #6b7280 0 94.74%, #ea580c 0); /* respaldo: el layout la arma con las líneas activas */

  /* Tipografía */
  --sys-fuente-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --sys-t-display: clamp(2rem, 1.25rem + 3.2vw, 3.5rem);     /* 32 → 56 px · H1 portada */
  --sys-t-h1: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem);      /* 26 → 38 px · H1 de listado y ficha */
  --sys-t-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);         /* 24 → 36 px · títulos de sección */
  --sys-t-h3: 1.25rem;                                         /* 20 px */
  --sys-t-lead: 1.125rem;                                      /* 18 px */
  --sys-t-cuerpo: 1rem;                                        /* 16 px */
  --sys-t-pequeno: .875rem;                                    /* 14 px */
  --sys-t-meta: .8125rem;                                      /* 13 px */
  --sys-t-micro: .75rem;                                       /* 12 px · mínimo para texto */
  --sys-t-cifra: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);        /* 28 → 44 px */

  /* Forma */
  --sys-radio-pequeno: 8px;
  --sys-sombra-menu: 0 18px 28px -18px rgba(11, 57, 84, .28);

  /* Espaciado (base 4 px) */
  --sys-esp-1: .25rem;  --sys-esp-2: .5rem;  --sys-esp-3: .75rem; --sys-esp-4: 1rem;
  --sys-esp-5: 1.25rem; --sys-esp-6: 1.5rem; --sys-esp-8: 2rem;   --sys-esp-10: 2.5rem;
  --sys-esp-12: 3rem;   --sys-esp-16: 4rem;
  --sys-seccion: clamp(2.75rem, 1.75rem + 3vw, 4.75rem);       /* 44 → 76 px arriba y abajo */
  --sys-gutter: 16px;                                          /* 24 px desde 641, 32 px desde 1024 */

  /* Controles */
  --sys-alto-control: 48px;   /* campos de formulario y buscadores */
  --sys-tactil: 44px;         /* mínimo de botones y botones icono */

  /* Capas */
  --sys-z-cabecera: 40; --sys-z-menu: 45; --sys-z-flotante: 50; --sys-z-modal: 60;
}
@media (min-width: 641px)  { :root { --sys-gutter: 24px; } }
@media (min-width: 1024px) { :root { --sys-gutter: 32px; } }