/* =====================================================================
   ALMACÉN — Sistema de Tokens
   Pollos Asados Chimbo's: azul royal + amarillo dorado.
   ===================================================================== */

:root {
  /* --- Superficies (papel, cartón, anaquel) --- */
  --canvas:           #f5f7ff;   /* fondo general con toque azul muy suave */
  --canvas-grain:    #eef0fb;   /* trama suave */
  --anaquel:          #ffffff;   /* tarjeta blanca */
  --anaquel-elev-1:   #fafbff;   /* anaquel apenas elevado */
  --anaquel-elev-2:   #f4f6fd;   /* dropdown / popover */
  --bahia:            #1935b0;   /* sidebar azul Chimbo's */
  --bahia-hover:      #1e40c4;
  --bahia-active:     #2348d4;

  /* --- Tinta y texto --- */
  --tinta-1:          #1a1d23;   /* texto principal */
  --tinta-2:          #4a5260;   /* texto secundario */
  --tinta-3:          #7a8290;   /* metadatos */
  --tinta-4:          #b0b6c0;   /* deshabilitado */
  --tinta-inv-1:      #f1ede4;   /* texto sobre grafito */
  --tinta-inv-2:      #b8b3a8;
  --tinta-inv-3:      #8a8579;

  /* --- Bordes (sombra de anaquel) --- */
  --linea-suave:      rgba(31, 37, 48, 0.06);
  --linea:            rgba(31, 37, 48, 0.10);
  --linea-firme:      rgba(31, 37, 48, 0.16);
  --linea-foco:       rgba(25, 53, 176, 0.55);   /* azul Chimbo's */

  /* --- Acentos Chimbo's --- */
  --kraft:            #f5c200;   /* amarillo dorado Chimbo's */
  --kraft-suave:      #fff3c0;
  --kraft-fondo:      #fffbe0;
  --kraft-tinta:      #7a5900;

  --cinta:            #f7ce00;   /* amarillo brillante */
  --cinta-suave:      #fff0a0;

  /* --- Semánticos (señalética industrial) --- */
  --recibido:         #4a7c2a;   /* verde óxido — recibido/ok */
  --recibido-suave:   #dde9cf;
  --recibido-fondo:   #f2f6e9;

  --alerta:           #c4581a;   /* terracota — stock bajo */
  --alerta-suave:     #f5d6c0;
  --alerta-fondo:     #fbeee2;

  --critico:          #a22c1f;   /* óxido — agotado */
  --critico-suave:    #ecc4be;
  --critico-fondo:    #faeae5;

  --info:             #2c5a7c;   /* azul plano — meta */
  --info-suave:       #cbd9e3;

  /* --- Espaciado (base 4) --- */
  --s-0:  2px;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;

  /* --- Radios (cartón es cuadrado, no redondo) --- */
  --r-0: 0;
  --r-1: 3px;     /* inputs, botones */
  --r-2: 6px;     /* tarjetas */
  --r-3: 10px;    /* cajones */
  --r-pill: 999px;

  /* --- Sombras (luz cenital de bodega) --- */
  --sombra-0: none;
  --sombra-1: 0 1px 0 rgba(31,37,48,.04), 0 1px 2px rgba(31,37,48,.04);
  --sombra-2: 0 2px 4px rgba(31,37,48,.06), 0 4px 12px rgba(31,37,48,.05);
  --sombra-3: 0 6px 18px rgba(31,37,48,.10), 0 12px 36px rgba(31,37,48,.08);
  --sombra-cajon: -16px 0 40px rgba(31,37,48,.18);

  /* --- Tipografía --- */
  --tipo-ui: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tipo-titular: "Space Grotesk", "Inter", sans-serif;
  --tipo-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;

  /* --- Tamaños --- */
  --t-12: 11px;
  --t-13: 12px;
  --t-14: 13px;
  --t-15: 14px;
  --t-16: 15px;
  --t-18: 17px;
  --t-22: 21px;
  --t-28: 26px;
  --t-36: 32px;

  /* --- Curvas de animación --- */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.7, 0, .84, 0);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);

  --t-fast:   140ms;
  --t-med:    240ms;
  --t-slow:   420ms;

  /* --- Layout --- */
  --bahia-w: 248px;
  --topbar-h: 56px;
  --cajon-w: 480px;
}

/* =====================================================================
   Modo Nocturno — turno nocturno en el almacén
   ===================================================================== */
:root[data-tema="nocturno"] {
  --canvas:           #12152e;
  --canvas-grain:    #151833;
  --anaquel:          #1a1e3a;
  --anaquel-elev-1:   #1e2242;
  --anaquel-elev-2:   #23284c;
  --bahia:            #080e2e;
  --bahia-hover:      #0d1440;
  --bahia-active:     #141c52;

  --tinta-1:          #ece8df;
  --tinta-2:          #b6b0a3;
  --tinta-3:          #807a6e;
  --tinta-4:          #4f4d47;
  --tinta-inv-1:      #ece8df;
  --tinta-inv-2:      #b6b0a3;
  --tinta-inv-3:      #6b6457;

  --linea-suave:      rgba(255,255,255,.04);
  --linea:            rgba(255,255,255,.08);
  --linea-firme:      rgba(255,255,255,.14);

  --kraft-fondo:      #2a2418;
  --kraft-suave:      #3d331d;
  --recibido-fondo:   #1c2618;
  --recibido-suave:   #2c3a22;
  --alerta-fondo:     #2a1d12;
  --alerta-suave:     #3d2818;
  --critico-fondo:    #2c1815;
  --critico-suave:    #3f1f1a;

  --sombra-1: 0 1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.25);
  --sombra-2: 0 2px 4px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2);
  --sombra-3: 0 6px 18px rgba(0,0,0,.4), 0 12px 36px rgba(0,0,0,.3);
}

/* Reset cómodo */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--tipo-ui);
  font-size: var(--t-15);
  color: var(--tinta-1);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01", "cv11";
  line-height: 1.45;
  letter-spacing: -0.005em;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Trama sutil de cartón en el canvas */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(31,37,48,.025) 1px, transparent 0);
  background-size: 18px 18px;
  z-index: 0;
}