/* ============================================================================
   caja-tokens.css — tokens de diseño de la caja
   ----------------------------------------------------------------------------
   Los comparten ingresoPedidoV2.html e historialRecientes.html (y, a través de
   ellos, usuarioActivo.css y chat.css). Va antes que cualquier otra hoja de la
   página: una página puede pisar un token en su propia hoja si lo necesita.
   Al final, la transición entre esas dos pantallas.
   ========================================================================== */

:root {
  /* superficies claras — zona de trabajo */
  --bg:         #f4f5f7;
  --surface:    #ffffff;
  --surface-2:  #fafbfc;
  --line:       #dde0e5;
  --line-2:     #e7e9ed;
  --line-3:     #f0f1f4;

  /* tinta */
  --ink:        #1a1c20;
  --ink-2:      #43464e;
  --ink-3:      #6e7178;
  --ink-4:      #8a8d95;
  --ink-5:      #a3a6ae;

  /* panel de cobro — grafito */
  --pos:        #17181c;
  --pos-2:      #202228;
  --pos-3:      #292b32;
  --pos-line:   #33353c;
  --pos-line-2: #2a2c33;
  --pos-line-3: #3d3f48;
  --pos-ink:    #ffffff;
  --pos-ink-2:  #e7e8ec;
  --pos-ink-3:  #c6c8ce;
  --pos-ink-4:  #9b9ea6;
  --pos-ink-5:  #7c7f89;
  --pos-ink-6:  #6c6f78;

  /* acentos — los mismos que el JS impone inline */
  --violeta:      #6c4eb6;
  --violeta-2:    #5a3da0;
  --violeta-3:    #4b2e83;
  --violeta-claro:#8b6fd6;
  --violeta-soft: rgba(108, 78, 182, .12);
  --violeta-ring: rgba(108, 78, 182, .28);
  --verde:        #28a745;
  --verde-2:      #218838;
  --verde-bg:     #e8f5e8;
  --rojo:         #dc2626;
  --rojo-bg:      #fef2f2;
  --rojo-suave:   #c2413b;
  --rojo-suave-bg:#fcf0f0;

  /* devolución / garantía */
  --op-devolucion:      #d97706;
  --op-devolucion-soft: rgba(217, 119, 6, .12);
  --op-devolucion-bg:   #fffbf2;
  --op-garantia:        #dc2626;
  --op-garantia-soft:   rgba(220, 38, 38, .12);
  --op-garantia-bg:     #fff7f7;

  /* escala de espaciado — todo múltiplo de 4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;

  /* radios */
  --r1: 7px; --r2: 10px; --r3: 14px;

  /* alturas de control — piso táctil de 44px */
  --h-sm: 38px; --h-md: 44px; --h-lg: 52px; --h-xl: 56px;

  --header-h: 70px;

  --font: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system,
          'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Consolas', 'Courier New', monospace;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-2: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04);
  --shadow-3: 0 12px 28px rgba(15, 23, 42, .16);
  --shadow-modal: 0 24px 48px rgba(15, 23, 42, .22);

  /* Springs cortos y críticamente amortiguados: esto es una herramienta de
     trabajo, no una demo. Sin rebote en ningún lado. */
  --t-fast: 100ms cubic-bezier(.2, 0, .2, 1);
  --t-base: 160ms cubic-bezier(.2, 0, .2, 1);
  --t-slow: 220ms cubic-bezier(.2, 0, .2, 1);

  /* compat: styles.css exponía estas variables y algún fragmento suelto
     todavía podría leerlas */
  --primary: #6c4eb6;
  --background: #f4f5f7;
  --white: #ffffff;
  --border: #dde0e5;
  --radius: 10px;
  --spacing: 1rem;
}

/* ------------------------------------------------- paso entre pantallas -- */
/* Caja e historial son páginas distintas, pero se recorren como una sola app:
   el navegador funde una en la otra y el encabezado queda en su lugar en vez
   de parpadear. Donde no está soportado, la navegación es la de siempre. */
@view-transition { navigation: auto; }

.pos-header { view-transition-name: caja-encabezado; }

::view-transition-group(*) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(.2, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}