/* tokens.css — todo valor visual de la app sale de aca. Ningun color, espaciado,
   tamanio, radio o sombra se escribe suelto en app.css.

   De donde salen los colores (marca Colectas, brief del 30/09/2026, opcion A): una
   paleta propia, sin colores de marca de ninguna empresa.
   - Indigo (#3D2C8D) = accion: botones, links, seleccion, "en vivo" y el fondo del icono.
     Es el unico tono que no usa ningun estado (rojo, ambar, celeste, verde, amarillo),
     asi que un boton nunca se confunde con un estado.
   - Rojo (#B42318) = criticidad ALTA, espera demorada y errores. Es el unico rojo.
   - Neutros slate (#F8FAFC / #0F172A) = superficies y texto.
   - Estados: para TEXTO se usa el escalon 700 de cada familia, porque el 600 no llega
     a 4,5:1 sobre blanco (ok 3,0:1 · warn 3,3:1 · info 3,9:1).
   - "Nuevo" (fila recien llegada) usa amarillo: la paleta no trae uno, y es el unico
     color que dice "mira esto" sin significar error. Familia amber/yellow, misma
     construccion que el resto de la paleta.
   Contrastes verificados (texto normal >= 4.5:1): ver comentario de cada par. */

:root {
  /* ---- Superficies ---- */
  --surface-base: #F8FAFC;          /* fondo de pagina */
  --surface-raised: #FFFFFF;        /* tablas, tarjetas, paneles */
  --surface-sunken: #F1F5F9;        /* inputs, hover de fila */
  --surface-overlay: rgb(15 23 42 / 0.45);  /* velo detras del panel de detalle */
  --border-subtle: #E2E8F0;
  --border-strong: #64748B;         /* bordes de control: 4,8:1, muy por encima del 3:1 que pide WCAG */

  /* ---- Texto ---- */
  --text-primary: #0F172A;          /* 17,9:1 sobre raised */
  --text-secondary: #475569;        /* 7,2:1 sobre base, 7,6:1 sobre raised */
  --text-disabled: #64748B;         /* 4,8:1 sobre raised */
  --text-on-accent: #FFFFFF;        /* 10,8:1 sobre accent; 6,6:1 sobre critical */

  /* ---- Accion (un solo acento) ---- */
  --accent: #3D2C8D;                /* indigo. 10,8:1 sobre raised, 9,2:1 sobre accent-soft */
  --accent-hover: #2F2270;          /* 13,3:1 con texto blanco */
  --accent-soft: #EEEBF8;           /* texto primario encima: 15,2:1 */
  --focus: #0284C7;                 /* anillo de foco: 4,1:1 sobre raised, distinto del acento y de los estados */

  /* ---- Intencion ---- */
  --critical: #B42318;              /* rojo: ALTA y demorado. 6,6:1 sobre raised, 5,5:1 sobre critical-soft */
  --critical-soft: #FEE4E2;
  --highlight: #FACC15;             /* amarillo: solo fondo ("nuevo"). 11,7:1 con texto primario */
  --highlight-soft: #FEF9C3;
  --warn: #B45309;                  /* ambar: espera en atencion, COLECTADO. 5,0:1 sobre raised */
  --warn-soft: #FEF3C7;
  --info: #0369A1;                  /* PROGRAMADO. 5,9:1 sobre raised */
  --info-soft: #E0F2FE;
  --ok: #15803D;                    /* confirmaciones (toast). 5,0:1 sobre raised */
  --ok-soft: #DCFCE7;

  /* ---- Espaciado: escala de 4 px ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Tipografia ----
     IBM Plex Sans y Plex Mono, de la misma familia, servidas desde el repo (css/fuentes.css).
     Plex distingue bien l, 1 e I, y sus numeros tabulares alinean los numeros de pedido y
     las OC. Sin la mono propia, Windows cae en Courier New y desalinea los numeros. */
  --font-body: 'IBM Plex Sans', 'Segoe UI', Arial, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;                  /* base */
  --text-lg: 20px;
  --text-xl: 30px;
  --leading-tight: 1.2;
  --leading-normal: 1.45;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;           /* 700 pesa de mas en la tabla densa */

  /* ---- Forma ---- */
  --radius-sm: 4px;                 /* controles */
  --radius-md: 8px;                 /* contenedores */
  --radius-pill: 999px;             /* chips */
  --border-width: 1px;
  --focus-width: 2px;
  --shadow-overlay: 0 8px 24px rgb(15 23 42 / 0.18), 0 2px 6px rgb(15 23 42 / 0.08);

  /* ---- Medidas de layout ---- */
  --header-height: 56px;
  --control-height: 32px;           /* densidad operativa */
  --control-height-touch: 44px;     /* objetivo tactil minimo en celular */
  --ancho-login: 380px;
  --ancho-detalle: 560px;
  --ancho-contenido: 1680px;
  --icono-sm: 14px;
  --icono-md: 18px;
  --icono-lg: 32px;
  --marca-alto-sm: 24px;            /* icono de la marca en la cabecera y en el form */
  --marca-alto-lg: 40px;            /* icono de la marca en login, clave y mensajes */
  --check-size: 18px;
  --vivo-punto: 8px;
  --espera-ancho: 44px;             /* barra de espera */
  --espera-alto: 6px;
  --resumen-min: 136px;             /* ancho minimo de cada numero del resumen */
  --col-prov-max: 30ch;
  --col-oc-max: 18ch;
  --ancho-toast: 420px;
  --esqueleto-fila: 40px;

  /* ---- Estados de fila ---- */
  --borde-alerta: 3px;              /* franja izquierda de las filas ALTA */
  --opacidad-guardando: 0.6;
  --opacidad-cerrada: 0.72;

  /* ---- Capas ---- */
  --z-cabecera: 10;
  --z-tabla-cabeza: 5;
  --z-velo: 40;
  --z-detalle: 50;
  --z-toast: 60;

  /* ---- Movimiento ---- */
  --duracion-corta: 120ms;
  --duracion-media: 220ms;
  --duracion-destello: 1.6s;        /* fila que cambio por "en vivo" */
  --duracion-latido: 2.4s;          /* punto de "En vivo" */
  --duracion-brillo: 1.4s;          /* esqueleto de carga */
  --easing: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Tipografia: detalles ---- */
  --tracking-mayus: 0.04em;         /* titulos de bloque en mayusculas */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion-corta: 0ms;
    --duracion-media: 0ms;
  }
}