/* ==========================================================================
   SIVAL — tokens.css
   Unico archivo que declara colores, tamanos, tipografias y tiempos.
   Ningun otro CSS de la aplicacion puede escribir un valor literal:
   todo se consume con var(--token). Si falta un token, se agrega aqui.
   Referencia: CONTRATO_CORE.md §20 y PROMPT_SIVAL.md §9.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     1. Superficies, fondos y bordes
     ------------------------------------------------------------------ */
  --fondo: #f3f4f6;                 /* fondo de la aplicacion */
  --superficie: #fff;               /* tarjetas, tablas, barras */
  --superficie-2: #f7f9fb;          /* superficie hundida (pies, ayudas) */
  --borde: #d9dde3;                 /* linea por defecto */
  --borde-fuerte: #c3cad3;          /* linea de enfasis (separadores, inputs) */

  /* ------------------------------------------------------------------
     2. Texto
     ------------------------------------------------------------------ */
  --texto: #1b1f24;                 /* texto principal */
  --texto-2: #5b6470;               /* secundario, etiquetas, cabeceras */
  --texto-3: #8b95a1;               /* terciario, ayudas, deshabilitado */
  --texto-invertido: #fff;          /* sobre relleno primario / peligro */

  /* ------------------------------------------------------------------
     3. Color con significado (nunca decorativo)
     ------------------------------------------------------------------ */
  --primario: #1f3a5f;              /* azul petroleo, unico color primario */
  --primario-hover: #16304f;        /* hover: oscurece ~6 % */
  --primario-suave: #eaf0f7;        /* fondo de estado activo/seleccion */
  --exito: #1e7d4f;
  --exito-hover: #186640;
  --exito-suave: #e8f3ed;
  --aviso: #b7791f;
  --aviso-hover: #96631a;
  --aviso-suave: #f8f0df;
  --peligro: #b42318;
  --peligro-hover: #951d13;
  --peligro-suave: #f9e9e7;
  --neutro-suave: #eef1f5;          /* badge neutro */
  --acento: #0f172a;                /* totales y cifras finales */

  /* ------------------------------------------------------------------
     4. Tabla
     ------------------------------------------------------------------ */
  --fondo-cabecera-tabla: #eef1f5;
  --fila-hover: #f7f9fb;
  --fila-seleccionada: #eaf0f7;

  /* ------------------------------------------------------------------
     5. Radios, sombras, velos y anillo de foco
     Radio maximo 6 px. --r-circulo se usa solo en el spinner (es una
     forma, no una esquina redondeada).
     ------------------------------------------------------------------ */
  --linea: 1px;                     /* grosor de borde por defecto */
  --linea-2: 2px;                   /* borde de enfasis: tab activa, KPI, foco */
  --r: 4px;
  --r-2: 6px;
  --r-circulo: 50%;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06);
  --sombra-2: 0 4px 12px rgba(16, 24, 40, .10);
  --velo: rgba(16, 24, 40, .38);                       /* fondo de drawer/modal */
  --anillo-foco: 0 0 0 2px rgba(31, 58, 95, .45);
  --anillo-foco-peligro: 0 0 0 2px rgba(180, 35, 24, .40);

  /* ------------------------------------------------------------------
     6. Espaciado — grilla de 8 px (4 px solo dentro de chips y badges).
     Nada por encima de --e6 dentro de una pantalla.
     ------------------------------------------------------------------ */
  --e0: 2px;                        /* media unidad: solo franjas y chips */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;

  /* ------------------------------------------------------------------
     7. Tipografia — solo fuentes del sistema, nunca fuentes externas
     ------------------------------------------------------------------ */
  --fuente: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", Consolas, "Roboto Mono", monospace;
  --t-cuerpo: 14px;
  --t-tabla: 13px;
  --t-etiqueta: 12px;
  --t-titulo: 20px;
  --t-kpi: 30px;
  --lh: 1.35;
  --t-boton: 13px;                  /* texto de boton */
  --t-mini: 12px;                   /* ayudas, pies, breadcrumb */
  --t-badge: 11px;                  /* badge y contadores */
  --t-micro: 11px;                  /* titulos de grupo del sidebar, atajos */
  --peso-medio: 500;
  --peso-fuerte: 600;
  --peso-total: 700;                /* fila de total */
  --espaciado-etiqueta: .04em;      /* letter-spacing de etiquetas en mayusculas */
  --lh-apretada: 1.1;               /* cifras grandes (KPI, total del POS) */

  /* ------------------------------------------------------------------
     8. Controles
     ------------------------------------------------------------------ */
  --alto-control: 36px;             /* altura unica de boton/campo */
  --alto-control-pos: 44px;         /* POS y pantallas tactiles */
  --alto-control-sm: 28px;          /* .btn--sm */
  --pad-control: 14px;              /* padding horizontal de boton */
  --pad-campo: 10px;                /* padding horizontal de input */
  --ancho-min-boton: 112px;         /* botones hermanos del mismo ancho */
  --gap-icono: 6px;                 /* separacion icono-texto dentro del boton */
  --spinner: 14px;
  --grosor-spinner: 2px;
  --icono: 16px;
  --icono-2: 18px;
  --icono-tactil: 20px;             /* maximo permitido en la interfaz */
  --opacidad-deshabilitada: .5;
  --transicion: 120ms ease;         /* solo cambios de estado, nunca decoracion */
  --transicion-panel: 160ms ease;   /* entrada de drawer y modal */

  /* ------------------------------------------------------------------
     9. Layout maestro
     ------------------------------------------------------------------ */
  --ancho-barra-lateral: 220px;
  --ancho-barra-lateral-plegada: 56px;
  --alto-barra-superior: 48px;
  --ancho-contenido: 1440px;
  --pad-contenido: 24px;
  --pad-contenido-movil: 12px;
  --alto-fila: 36px;                /* fila de tabla */
  --alto-fila-tactil: 44px;         /* area tactil minima < 768 px */

  /* ------------------------------------------------------------------
     10. Paneles flotantes
     ------------------------------------------------------------------ */
  --ancho-drawer: 480px;
  --ancho-drawer-min: 420px;
  --ancho-drawer-max: 560px;
  --ancho-modal: 480px;
  --ancho-toast: 340px;
  --ancho-panel-alertas: 340px;
  --alto-panel-alertas: 420px;
  --ancho-kpi-min: 180px;           /* columna minima de la rejilla de KPI */
  --alto-sugerencias: 320px;        /* lista de resultados de un buscador */
  --ancho-acceso: 380px;            /* caja de la pantalla de acceso */
  /* Pantalla de acceso con fotografía del local de fondo. El velo no es decoración: la foto es
     oscura pero desigual, y sin él el texto blanco del pie se pierde sobre las zonas iluminadas
     de las estanterías. La imagen se pasa desde la vista como variable, porque su URL depende de
     la subcarpeta de instalación y el CSS no sabe de PHP. */
  --acceso-velo: rgba(10, 12, 16, .55);
  --acceso-pie: rgba(255, 255, 255, .72);
  --ancho-lectura: 640px;           /* columna de texto largo (ayuda, notas) */

  /* ------------------------------------------------------------------
     11. Anchos de campo obligatorios (PROMPT §9.3)
     ------------------------------------------------------------------ */
  --ancho-codigo: 200px;            /* codigo, SKU, cedula, telefono, factura */
  --ancho-numero: 120px;            /* cantidad, precio, porcentaje, monto */
  --ancho-fecha: 150px;             /* fecha y hora */
  --ancho-select: 240px;            /* selector corto */
  --ancho-nombre: 420px;            /* nombre, direccion, email */
  --ancho-busqueda: 480px;          /* buscadores principales */
  --ancho-notas: 640px;             /* notas y descripciones */

  /* ------------------------------------------------------------------
     12. Capas (z-index)
     ------------------------------------------------------------------ */
  --z-cabecera-tabla: 5;
  --z-barra-lateral: 20;
  --z-barra-superior: 30;
  --z-menu: 40;
  --z-velo: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;

  /* ------------------------------------------------------------------
     13. POS — pantalla de cobro (§9.9 del PROMPT)
     Los nombres --pos-* se consumen solo dentro de pos.css, pero se
     declaran aqui porque tokens.css es el unico archivo que puede
     escribir un valor literal (§20 del contrato).

     13.1 Tipografia y medidas
     ------------------------------------------------------------------ */
  --t-pos-total: 32px;              /* total final, monoespaciada */
  --t-pos-cambio: 40px;             /* cambio a devolver */

  --pos-t-total: var(--t-pos-total);
  --pos-t-cambio: var(--t-pos-cambio);
  --pos-t-subtotal: 15px;           /* filas de subtotal y descuento */
  --pos-t-chip: 13px;               /* chip de ticket en espera */
  --pos-t-campo: 16px;              /* 16 px evita el zoom automatico en iOS */
  --pos-t-signo: 18px;              /* signos + y - del contador de cantidad */

  --pos-alto-tactil: var(--alto-control-pos);   /* 44px, nada por debajo */
  --pos-alto-linea: var(--alto-control-pos);    /* fila del ticket */
  --pos-alto-cabecera: var(--alto-barra-superior);
  --pos-alto-lista: 200px;          /* alto minimo de la lista de lineas */
  --pos-alto-cobrar: 56px;          /* boton Cobrar */
  --pos-alto-compacto: 24px;        /* fila de subtotal, enlace de componentes */
  --pos-alto-boton-texto: 32px;     /* botones de solo texto y opciones */
  --pos-alto-envases: 32px;         /* campo de envases devueltos */
  --pos-alto-barra: 3px;            /* barra de tiempo de la pantalla de exito */
  --pos-alto-inferior: 244px;       /* bloque fijo de totales y botonera */
  --pos-marca-activo: 3px;          /* franja interior del resultado activo */
  --pos-pad-buscador: 38px;         /* hueco que deja el icono de lupa */

  --pos-ancho-buscador: 520px;
  --pos-ancho-kit: 380px;
  --pos-ancho-franja: 240px;        /* base flexible del texto de una franja */
  --pos-ancho-cantidad: 48px;
  --pos-ancho-envases: 72px;
  --pos-ancho-recibido: 140px;
  --pos-ancho-monto: 132px;
  --pos-ancho-billete: 60px;
  --pos-ancho-referencia: 320px;
  --pos-ancho-exito: 420px;

  /* Columnas fijas de la tabla de lineas */
  --pos-col-presentacion: 176px;
  --pos-col-cantidad: 156px;
  --pos-col-precio: 100px;
  --pos-col-total: 108px;
  --pos-col-quitar: 60px;
  --pos-col-izq: 58%;
  --pos-col-der: 42%;

  /* 13.2 Variantes por tamano de pantalla (se aplican en pos.css) */
  --pos-alto-inferior-movil: 320px;
  --pos-ancho-chip-movil: 200px;
  --pos-alto-fila-movil: 20px;
  --pos-ancho-accion-movil: 104px;
  --pos-ancho-cobrar-movil: 132px;
  --pos-ancho-anular-movil: 120px;
  --pos-col-presentacion-media: 132px;
  --pos-col-precio-media: 88px;
  --pos-col-total-media: 96px;
  /* Pantalla de portátil o ventana partida (1024–1279 px): el panel de totales pasa a un ancho
     fijo en vez del 42 %, porque con porcentaje el ticket se quedaba en 577 px y, descontadas las
     columnas fijas, al NOMBRE DEL PRODUCTO le sobraban 43 px: se leía "P…". El nombre es lo único
     que el cajero necesita leer de verdad, así que es la columna que se queda con lo que sobre. */
  --pos-col-der-estrecha: 336px;
  --pos-col-presentacion-estrecha: 112px;
  --pos-col-cantidad-estrecha: 128px;
  --pos-col-precio-estrecha: 76px;
  --pos-col-total-estrecha: 88px;
  --pos-col-quitar-estrecha: 44px;
  --pos-col-nombre-minimo: 160px;
  --pos-alto-tactil-tablet: 48px;
  --pos-col-cantidad-tablet: 164px;
  --pos-col-quitar-tablet: 64px;
  --pos-alto-cobrar-tablet: 60px;

  /* 13.3 Color del POS en modo claro
     Franjas de aviso no bloqueantes y texto sobre relleno primario. */
  --pos-aviso-fondo: #fdf6e3;
  --pos-aviso-borde: #e3c07a;
  --pos-aviso-texto: #7c5510;
  --pos-peligro-fondo: #fdecea;
  --pos-peligro-borde: #edb0aa;
  --pos-peligro-texto: #8e1b13;
  --pos-exito-fondo: #eaf5ef;
  --pos-exito-borde: #a9d3bd;
  --pos-sobre-primario: var(--texto-invertido);
  --pos-fondo-panel: var(--fondo-cabecera-tabla);

  /* 13.4 Modo oscuro opcional del POS (§9.9): tokens alternativos que
     pos.css mapea sobre los generales dentro del ambito .pos--oscuro.
     Se nombran aparte para que no haya referencias circulares. */
  --pos-oscuro-fondo: #0b0e12;
  --pos-oscuro-superficie: #14181d;
  --pos-oscuro-borde: #262d36;
  --pos-oscuro-borde-fuerte: #3a444f;
  --pos-oscuro-texto: #e7ebf0;
  --pos-oscuro-texto-2: #a4aeba;
  --pos-oscuro-texto-3: #737f8c;
  --pos-oscuro-primario: #34648f;
  --pos-oscuro-primario-hover: #40749f;
  --pos-oscuro-primario-suave: #1a2531;
  --pos-oscuro-exito: #3aa06d;
  --pos-oscuro-aviso: #d7a044;
  --pos-oscuro-peligro: #e0594b;
  --pos-oscuro-acento: #f2f5f9;
  --pos-oscuro-cabecera-tabla: #1a1f26;
  --pos-oscuro-fila-hover: #1b2129;
  --pos-oscuro-sombra: 0 1px 2px rgba(0, 0, 0, .45);
  --pos-oscuro-sombra-2: 0 4px 12px rgba(0, 0, 0, .55);
  --pos-oscuro-aviso-fondo: #2c2312;
  --pos-oscuro-aviso-borde: #6b5320;
  --pos-oscuro-aviso-texto: #f0cf87;
  --pos-oscuro-peligro-fondo: #2e1614;
  --pos-oscuro-peligro-borde: #6d2b25;
  --pos-oscuro-peligro-texto: #f5a79c;
  --pos-oscuro-exito-fondo: #12251c;
  --pos-oscuro-exito-borde: #2c5642;
  --pos-oscuro-sobre-primario: #f1f5fa;
  --pos-oscuro-fondo-panel: #10141a;

  /* ------------------------------------------------------------------
     14. Impresion — A4 y tickets termicos
     El papel de 80 mm imprime util 72 mm; el de 58 mm imprime util 50 mm.
     ------------------------------------------------------------------ */
  --imp-fondo: #fff;
  --imp-texto: #000;
  --imp-borde: #000;
  --imp-borde-suave: #999;
  --margen-a4: 12mm;
  --ancho-ticket-80: 72mm;
  --ancho-ticket-58: 50mm;
  --margen-ticket: 3mm;
  --t-imp-titulo: 14pt;
  --t-imp: 10pt;
  --t-imp-tabla: 9pt;
  --t-imp-pie: 8pt;
  --t-ticket: 11px;
  --t-ticket-58: 10px;
  --t-ticket-total: 14px;
  --lh-ticket: 1.3;
}