/* ============================================================
   Geintec — Design tokens (v1, tema claro)
   Generado a partir de tokens.json. No editar los valores aquí
   sin actualizar también tokens.json (deben quedar sincronizados).
   ============================================================ */

/* Tipografía: Plus Jakarta Sans desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* — Color: neutrales — */
  --surface-page: #f5f7fb;      /* Fondo general de la aplicación */
  --surface: #ffffff;           /* Fondo de tarjetas, tabla, formularios y menús */
  --surface-sunken: #eef1f7;    /* Encabezado de tabla, filas alternas suaves, campos deshabilitados */
  --border: #e2e6f0;            /* Bordes de tarjetas, inputs y divisores */
  --border-strong: #c7cede;     /* Foco / hover de controles */
  --ink: #1b2440;               /* Texto principal */
  --ink-muted: #616d8a;         /* Texto secundario, metadatos (4.5:1 sobre surface) */
  --ink-subtle: #94a0ba;        /* Placeholders y texto deshabilitado únicamente */

  /* — Color: marca — */
  --brand-700: #101b47;         /* Identidad Geintec: login, franja de marca */
  --brand-600: #1c2d6e;         /* Hover sobre brand-700 */
  --brand-100: #e8ecf9;         /* Fondos suaves de marca */

  /* — Color: acento interactivo — */
  --accent-teal: #0a726d;             /* Botón primario, enlaces, ítem activo, foco */
  --accent-teal-600: #085a56;         /* Hover/active de accent-teal */
  --accent-teal-100: #e1f5f3;         /* Fondo suave de acento */
  --accent-teal-bright: #2dd4cf;      /* Solo decorativo (login, portada) */
  --on-accent-teal: #ffffff;          /* Texto sobre accent-teal */

  /* — Color: estados de un pedido (fondo / texto) — */
  --status-recepcion-bg: #e8f0fd;     --status-recepcion-text: #2451b8;
  --status-alistamiento-bg: #f1ecfd; --status-alistamiento-text: #6d28d9;
  --status-facturacion-bg: #e1f5f3;  --status-facturacion-text: #0a726d;
  --status-despacho-bg: #fdf1dc;     --status-despacho-text: #9a5b06;
  --status-declinado-bg: #eef0f4;    --status-declinado-text: #475069;
  --status-incidente-bg: #fdeaea;    --status-incidente-text: #b42318;
  --status-entregado-bg: #e6f7ec;    --status-entregado-text: #15803d;

  /* — Espaciado (grilla base 4px) — */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px; --space-12: 48px;

  /* — Radios — */
  --radius-sm: 8px;     /* inputs, botones pequeños, chips de filtro */
  --radius-md: 12px;    /* tarjetas, botones, campos */
  --radius-lg: 20px;    /* paneles grandes (login, modales) */
  --radius-full: 999px; /* badges, pills, avatares */

  /* — Sombra — */
  --shadow-sm: 0 1px 2px rgba(16,24,54,0.06);
  --shadow-md: 0 8px 24px rgba(16,24,54,0.10);

  /* — Tipografía — */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* — Estilos de texto — aplican font-family: var(--font-sans) */
.display-lg { font: 700 32px/40px var(--font-sans); }                          /* Título de página */
.display-md { font: 700 26px/32px var(--font-sans); }                          /* Cifra principal de un StatCard */
.heading-lg { font: 600 18px/26px var(--font-sans); }                          /* Encabezado de tarjeta o sección */
.heading-md { font: 600 15px/22px var(--font-sans); }                          /* Subtítulo, nombre en fila de tabla */
.body-lg    { font: 400 15px/22px var(--font-sans); }                          /* Texto de lectura por defecto */
.body-md    { font: 400 13px/20px var(--font-sans); }                          /* Texto secundario */
.body-sm    { font: 400 12px/18px var(--font-sans); }                          /* Metadatos, fechas, IDs */
.label-md   { font: 600 13px/18px var(--font-sans); letter-spacing: 0.01em; }  /* Etiquetas de campo, encabezados de columna */
.label-sm   { font: 700 11px/16px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; } /* Texto de badges */
.button     { font: 600 14px/20px var(--font-sans); }                          /* Texto de botones */