/* =====================================================================
   Yalemo · tokens de marca v1 (19 oct 2026)
   Fuentes (Google Fonts, licencia SIL Open Font License):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   ===================================================================== */
:root{
  /* --- Color: marca ------------------------------------------------- */
  --y-cobalto:        #2A3FC4; /* principal: botones, enlaces, símbolo. Blanco encima 7.0:1 */
  --y-cobalto-hover:  #1C2D8F; /* hover/pressed del botón principal */
  --y-cobalto-900:    #18287F; /* texto de marca sobre cobalto-50 (8.8:1) */
  --y-cobalto-50:     #E9EDFF; /* fondos suaves, burbuja del usuario, chips seleccionados */
  --y-cobalto-claro:  #8196FF; /* símbolo sobre fondo oscuro (6.2:1 contra tinta) */
  --y-mandarina:      #FF8A3D; /* acento único: doblez del logo, detalles. Encima SOLO tinta (7.2:1), nunca blanco */
  --y-mandarina-50:   #FFF1E6; /* resaltados cálidos, avisos suaves */

  /* --- Color: neutros ------------------------------------------------ */
  --y-tinta:          #161B33; /* texto principal (16:1 sobre papel) y fondos oscuros */
  --y-tinta-2:        #4A5170; /* texto secundario (7.4:1 sobre papel) */
  --y-tinta-3:        #626987; /* texto terciario/ayudas, mínimo 14 px (4.7:1 sobre blanco) */
  --y-borde-campo:    #767E9C; /* borde de campos de formulario (4.0:1, cumple 3:1 de no-texto) */
  --y-linea:          #E3E6EF; /* separadores decorativos (no para delimitar campos) */
  --y-papel:          #FBF9F5; /* fondo general cálido */
  --y-blanco:         #FFFFFF; /* tarjetas, hoja del oficio */

  /* --- Color: estados -------------------------------------------------- */
  --y-exito:          #0B6E5C; /* texto/ícono de éxito (6.2:1 sobre blanco) */
  --y-exito-50:       #E3F5F0;
  --y-aviso:          #F5B533; /* ícono/fondo de aviso, texto encima en tinta */
  --y-aviso-50:       #FFF6DD;
  --y-error:          #C2362F; /* SOLO errores (5.4:1 sobre blanco) */
  --y-error-50:       #FDECEA;
  --y-foco:           #2A3FC4; /* anillo de foco visible */
  --y-pagar:          #F25500; /* SOLO botón de pago. Texto encima en tinta (4.90:1) */
  --y-pagar-texto:    #161B33;
  --y-pagar-hover:    #161B33;
  --y-pagar-hover-texto: #F25500;
  --y-pagar-sombra:   0 6px 18px rgba(242,85,0,.35);

  /* --- Color: robots (solo ilustración, nunca texto) ----------------- */
  --y-robot-gerente:   #2A3FC4;
  --y-robot-redactor:  #FF8A3D;
  --y-robot-revisor:   #17A88E;
  --y-robot-mensajero: #8C7BF0;

  /* --- Tipografía ------------------------------------------------------ */
  --y-font-titulos: "Outfit", "Inter", system-ui, sans-serif;   /* 600-700 */
  --y-font-texto:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* 400-600 */
  --y-font-oficio:  Arial, "Liberation Sans", Arimo, sans-serif; /* vista previa = el .docx usa Arial 12 */

  /* Escala (escritorio ≥ 960 px). Proporción ~1.25 */
  --y-t-display: 3.5rem;    /* 56 px · Outfit 700 · interlineado 1.05 · tracking -0.02em */
  --y-t-h1:      2.5rem;    /* 40 px · Outfit 700 · 1.1 */
  --y-t-h2:      2rem;      /* 32 px · Outfit 700 · 1.15 */
  --y-t-h3:      1.375rem;  /* 22 px · Outfit 600 · 1.25 */
  --y-t-lead:    1.1875rem; /* 19 px · Inter 400 · 1.55 */
  --y-t-body:    1rem;      /* 16 px · Inter 400 · 1.6 */
  --y-t-small:   0.875rem;  /* 14 px · Inter 500 · 1.45 (mínimo para texto de ayuda) */
  --y-t-caption: 0.8125rem; /* 13 px · Inter 600 · solo etiquetas cortas */

  /* --- Espaciado (base 4 px) ------------------------------------------ */
  --y-s-1: 4px;  --y-s-2: 8px;  --y-s-3: 12px; --y-s-4: 16px; --y-s-5: 20px;
  --y-s-6: 24px; --y-s-8: 32px; --y-s-10: 40px; --y-s-12: 48px; --y-s-16: 64px; --y-s-24: 96px;

  /* --- Forma y profundidad --------------------------------------------- */
  --y-r-sm: 10px; --y-r-md: 14px; --y-r-lg: 20px; --y-r-xl: 28px; --y-r-pill: 999px;
  --y-sombra-1: 0 1px 2px rgba(22,27,51,.06), 0 2px 8px rgba(22,27,51,.05);
  --y-sombra-2: 0 2px 4px rgba(22,27,51,.05), 0 16px 40px -12px rgba(22,27,51,.18);
  --y-sombra-hoja: 0 1px 3px rgba(22,27,51,.10), 0 24px 48px -20px rgba(22,27,51,.28);

  /* --- Interacción ------------------------------------------------------ */
  --y-toque-min: 44px;   /* área táctil mínima (WCAG 2.5.5 / Fitts) */
  --y-boton-alto: 48px;  /* botón estándar; 56 px el principal de la pantalla */
  --y-ancho-max: 1200px;
  --y-transicion: 160ms cubic-bezier(.2,.7,.3,1);
}
@media (max-width: 959px){
  :root{
    --y-t-display: 2.25rem; /* 36 px */
    --y-t-h1: 2rem;         /* 32 px */
    --y-t-h2: 1.625rem;     /* 26 px */
    --y-t-h3: 1.25rem;      /* 20 px */
    --y-t-lead: 1.0625rem;  /* 17 px */
  }
}