/* ==========================================================================
   CeooPay · Design tokens · dirección «Puesto de mando»
   CEOO Tecnologías S.A.S. de C.V.
   Capa 1 (primitivos de marca) → capa 2 (semánticos) → capa 3 (componente, en componentes.css).
   Fuente única de verdad del color: tools/contraste.py lee ESTE archivo y calcula el contraste WCAG.
   Regla: los componentes solo consumen tokens semánticos, nunca hex sueltos.
   ========================================================================== */

@font-face{font-family:"IBM Plex Sans";src:url(../fuentes/ibm-plex-sans-var-latin.woff2) format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fuentes/ibm-plex-mono-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fuentes/ibm-plex-mono-500-latin.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root {
  color-scheme: light;

  /* ── Primitivos de marca CEOO (no cambian entre temas) ── */
  --marca-tinta: #0b0910;
  --marca-crema: #faf7f2;
  --marca-oro: #d4b574;

  /* ── Superficies ── */
  --fondo: #f6f4ef;
  --superficie: #ffffff;
  --superficie-2: #efece5;
  --superficie-invertida: #0b0910;

  /* ── Texto ── */
  --texto: #0b0910;
  --texto-2: #46434e;
  --texto-3: #615e6a;
  --texto-invertido: #faf7f2;

  /* ── Líneas ── */
  --linea: #e3dfd6;
  --linea-fuerte: #cfcabf;
  --borde-control: #858290;

  /* ── Acento único: azul mando (acción, selección, foco) ── */
  --mando: #1a3fc2;
  --mando-fuerte: #12308f;
  --mando-suave: #e9eefc;
  --sobre-mando: #ffffff;
  --foco: #1a3fc2;

  /* ── Oro CEOO: solo marca y perfil Negocio; nunca estado financiero ── */
  --oro: #d4b574;
  --oro-texto: #7a5a26;
  --oro-suave: #f4ecdc;

  /* ── Error de formulario / acción destructiva ── */
  --error: #a3261c;
  --error-fondo: #f8e4e1;

  /* ── Estados financieros (texto + fondo). Siempre con ícono y palabra. ── */
  --pendiente: #8a4b00;      --pendiente-fondo: #fbefd9;
  --confirmado: #0d5c80;     --confirmado-fondo: #e0eff6;
  --liquidado: #1f6b43;      --liquidado-fondo: #e3f1e8;
  --rechazado: #a3261c;      --rechazado-fondo: #f8e4e1;
  --reembolsado: #4a5163;    --reembolsado-fondo: #eceef2;
  --disputa: #8e2a5a;        --disputa-fondo: #f7e3ec;

  /* ── Series de gráficas (validadas con dataviz/validate_palette.js) ── */
  --serie-ingresos: #1a3fc2;
  --serie-egresos: #a8772c;

  /* ── Tipografía ── */
  --f-texto: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-xs: .75rem;     /* 12 · etiquetas mono, notas */
  --t-s: .875rem;     /* 14 · tablas, ayudas */
  --t-m: 1rem;        /* 16 · cuerpo, campos (16 evita zoom en iOS) */
  --t-l: 1.125rem;    /* 18 · cuerpo destacado */
  --t-xl: 1.375rem;   /* 22 · títulos de bloque */
  --t-2xl: 1.75rem;   /* 28 · títulos de página / importe principal */
  --t-3xl: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  --t-display: clamp(2.5rem, 1.1rem + 5.6vw, 5.75rem);
  --interlinea: 1.55;
  --interlinea-titulo: 1.04;
  --tracking-display: -0.035em;
  --tracking-titulo: -0.018em;
  --tracking-etiqueta: .08em;

  /* ── Espaciado (base 4 px) ── */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --e-10: 8rem;
  --seccion: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ── Forma ── */
  --r-1: 4px;   /* chips */
  --r-2: 8px;   /* controles */
  --r-3: 12px;  /* paneles */
  --grosor-linea: 1px;
  --alto-control: 2.75rem;    /* 44 px: objetivo táctil (WCAG 2.5.8 exige ≥ 24 px) */
  --alto-control-s: 2.25rem;  /* 36 px: acciones de tabla en escritorio */
  --alto-fila: 3.25rem;
  --alto-fila-compacta: 2.5rem;

  /* ── Profundidad: casi plana; la sombra solo marca capas flotantes ── */
  --sombra-1: 0 1px 2px rgba(11, 9, 16, .06);
  --sombra-2: 0 12px 32px -12px rgba(11, 9, 16, .22), 0 2px 6px rgba(11, 9, 16, .06);

  /* ── Retícula ── */
  --ancho: 78rem;
  --ancho-texto: 38rem;
  --ancho-lateral: 15.5rem;
  --margen: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  /* Breakpoints (documentales; CSS no permite variables en @media): 480 · 768 · 1024 · 1280 · 1600 */

  /* ── Movimiento ── */
  --curva-salida: cubic-bezier(.23, 1, .32, 1);
  --curva-mov: cubic-bezier(.77, 0, .175, 1);
  --dur-1: 120ms;  /* presión de botón */
  --dur-2: 180ms;  /* hover, menús */
  --dur-3: 260ms;  /* paneles */
}

/* ── Tema oscuro «cabina». Mismos roles, pasos propios validados contra su superficie. ── */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0b0910;
  --superficie: #14121a;
  --superficie-2: #1d1a24;
  --superficie-invertida: #faf7f2;
  --texto: #f3f0ea;
  --texto-2: #c7c3cd;
  --texto-3: #a29eab;
  --texto-invertido: #0b0910;
  --linea: #2a2733;
  --linea-fuerte: #3a3644;
  --borde-control: #777383;
  --mando: #93a8ff;
  --mando-fuerte: #b6c4ff;
  --mando-suave: #1b2140;
  --sobre-mando: #0b0910;
  --foco: #93a8ff;
  --oro-texto: #d4b574;
  --oro-suave: #2a2416;
  --error: #ff8c7d;
  --error-fondo: #35150f;
  --pendiente: #f0b862;      --pendiente-fondo: #2e2310;
  --confirmado: #74c6ea;     --confirmado-fondo: #0f2631;
  --liquidado: #7ad3a0;      --liquidado-fondo: #10271b;
  --rechazado: #ff8f80;      --rechazado-fondo: #35150f;
  --reembolsado: #b9c0cf;    --reembolsado-fondo: #23262e;
  --disputa: #f291c0;        --disputa-fondo: #351321;
  --serie-ingresos: #6f8af2;
  --serie-egresos: #b8862f;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-2: 0 16px 40px -12px rgba(0, 0, 0, .7), 0 0 0 1px #2a2733;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}