/* ══════════════════════════════════════════════════════════════════════════
   INVENTARIO FERIA DE IXMI · interfaz
   ══════════════════════════════════════════════════════════════════════════

   Escrita para Agustín: no le entiende a la tecnología, trabaja de noche, con
   las manos ocupadas, con prisa y con gente esperando enfrente.

   Las reglas que rigen todo lo de abajo:

   1. UNA SOLA COSA IMPORTA POR PANTALLA. La acción principal es un botón
      grande, de color, hasta abajo. Todo lo demás es gris. Si dos botones
      compiten en color, ninguno se ve.
   2. LOS NÚMEROS QUE DECIDEN SE LEEN DE LEJOS. Cuánto va contado, cuánto se
      cobra, qué sticker pegar: gigantes. El resto puede ser chico.
   3. EL COLOR SIGNIFICA ALGO, SIEMPRE LO MISMO.
        verde  = cuadró, va bien, se puede seguir
        naranja= hay diferencia, se puede continuar pero queda asentado
        rojo   = alto, esto no debe pasar
        azul   = la acción normal
      Nunca se usa un color por adorno.
   4. AIRE. Los renglones apretados se leen mal con poca luz y se pican mal con
      los dedos fríos. Nada mide menos de 44 px de alto.
   5. La impresión NO se toca: sigue saliendo en blanco y negro, sobria, como
      un documento que se firma.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Fondo negro de verdad: en el andén de noche cansa menos y el contraste con
     el número grande es total. */
  --fondo:        #000000;
  --superficie:   #1c1c1e;   /* tarjetas */
  --superficie-2: #2c2c2e;   /* controles dentro de una tarjeta */
  --superficie-3: #3a3a3c;   /* pulsado */
  --separador:    #38383a;

  --texto:        #ffffff;
  --texto-2:      #aeaeb2;   /* secundario */
  --texto-3:      #8e8e93;   /* terciario, etiquetas */

  --azul:    #0a84ff;
  --verde:   #30d158;
  --rojo:    #ff453a;
  --naranja: #ff9f0a;
  --amarillo:#ffd60a;

  --verde-fondo:   #0e2f1a;
  --rojo-fondo:    #3a1210;
  --naranja-fondo: #3a2606;
  --azul-fondo:    #0a2540;

  --r-chico:  10px;
  --r:        14px;
  --r-grande: 18px;

  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
               system-ui, Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

.pantalla { display: none; padding: 20px 18px 64px; max-width: 560px; margin: 0 auto; }
.pantalla.activa { display: block; }
.hidden { display: none !important; }

h2 {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  margin: 4px 0 18px; line-height: 1.15;
}
h3 {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto-3);
  margin: 26px 0 8px;
}

/* ── Barra de arriba ─────────────────────────────────────────────────────── */
#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top));
  background: rgba(28,28,30,.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--separador);
  position: sticky; top: 0; z-index: 60;
}
#rol-badge { flex: 1; font-size: 15px; font-weight: 600; color: var(--texto); }
#version-badge { font-size: 11px; color: var(--texto-3); }
#btn-inicio, #btn-salir {
  background: var(--superficie-2); color: var(--texto);
  font-size: 15px; font-weight: 500; padding: 8px 14px;
  min-height: 36px; border-radius: 999px;
}
#btn-inicio { padding: 8px 13px; }

/* ── Aviso grande: se ve con las manos ocupadas y a contraluz ────────────── */
.banda {
  position: sticky; top: 56px; z-index: 55;
  margin: 0 auto; max-width: 560px;
  padding: 16px 18px; border-radius: 0 0 var(--r) var(--r);
  font-size: 18px; font-weight: 600; line-height: 1.35; text-align: center;
  color: #fff; box-shadow: var(--sombra);
}
.banda.bien  { background: #248a3d; }
.banda.mal   { background: #c9271e; }
.banda.aviso { background: #a86a04; }

/* ── Login ───────────────────────────────────────────────────────────────── */
#pantalla-login { text-align: center; padding-top: 14vh; }
#pantalla-login h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.sub { color: var(--texto-3); font-size: 15px; margin: 10px 0 40px; }
input#pin {
  font-size: 32px; font-weight: 600; text-align: center; letter-spacing: .45em;
  text-indent: .45em;
  width: 100%; padding: 16px; border-radius: var(--r);
  border: none; background: var(--superficie); color: var(--texto);
  min-height: 62px;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
button {
  font-family: inherit; font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  padding: 14px 18px; min-height: 50px;
  border: none; border-radius: var(--r-chico);
  background: var(--superficie-2); color: var(--texto);
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: scale(.975); background: var(--superficie-3); }
button:disabled { background: var(--superficie); color: #5a5a5e; cursor: not-allowed; transform: none; }

/* La acción principal de la pantalla: una sola, hasta abajo, de color. */
button.grande {
  width: 100%; margin-top: 22px; padding: 17px;
  min-height: 56px; font-size: 18px; font-weight: 600;
  border-radius: var(--r); background: var(--azul); color: #fff;
}
button.grande:active { background: #0670d8; }
/* .peligro marca el botón que CIERRA algo. Estaba del mismo azul y del mismo
   tamaño que "AGREGAR", separados 100 px: dos barras idénticas que empiezan
   con ✔. Con el chofer enfrente, picar el de abajo cierra la remisión a media
   captura. Ahora va en contorno naranja: se ve que es un botón, se ve que es
   otra cosa, y no compite con la acción que se repite. */
button.peligro {
  background: transparent; color: var(--naranja);
  box-shadow: inset 0 0 0 1.5px var(--naranja);
}
button.peligro:active { background: rgba(255,159,10,.14); }
button.verde    { background: #248a3d; color: #fff; }
button.verde:active { background: #1d7233; }
button.naranja  { background: #b8730a; color: #fff; }
button.naranja:active { background: #9a5f08; }
button.mini {
  font-size: 15px; font-weight: 500; padding: 9px 14px; min-height: 40px;
  background: var(--superficie-2); color: var(--texto-2); border-radius: 999px;
}
button.mini:active { color: var(--texto); }

/* ── Menú principal ──────────────────────────────────────────────────────── */
#menu { display: grid; gap: 10px; margin-top: 8px; }
#menu button {
  text-align: left; background: var(--superficie);
  padding: 16px 18px; min-height: 68px;
  border-radius: var(--r); font-size: 18px; font-weight: 600;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
}
#menu button small {
  grid-column: 1; font-size: 14px; font-weight: 400; color: var(--texto-3);
  letter-spacing: 0; line-height: 1.3;
}
#menu button::after {
  content: '›'; grid-column: 2; grid-row: 1 / 3;
  font-size: 26px; font-weight: 400; color: #5a5a5e; line-height: 1;
}
#menu button:disabled { opacity: .32; }
#menu button:disabled::after { content: ''; }

/* El contador va encima del botón, no dentro de la rejilla: así no empuja el
   texto ni le mueve el renglón al que ya se sabe de memoria dónde toca. */
#menu button { position: relative; }
#menu button .contador {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  min-width: 26px; height: 26px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rojo); color: #fff;
  border-radius: 13px; font-size: 15px; font-weight: 700; letter-spacing: 0;
}

/* ── Contar la entrada ───────────────────────────────────────────────────── */
/* Un renglón por producto, el número grande a la derecha. Se cuenta con una
   mano y se teclea con la otra, así que el campo tiene que ser grande y el
   estado tiene que leerse de reojo, sin acercar la cara. */
.ent-reng {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  background: var(--superficie); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 10px;
  box-shadow: inset 0 0 0 1px var(--separador);
}
.ent-reng.ok  { box-shadow: inset 0 0 0 2px var(--verde); }
.ent-reng.dif { box-shadow: inset 0 0 0 2px var(--naranja); background: var(--naranja-fondo); }

.ent-reng-nom b     { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; }
.ent-reng-nom small { display: block; font-size: 13.5px; color: var(--texto-3); margin-top: 2px; }
.ent-reng-nom .ent-declaro { color: var(--texto-2); margin-top: 6px; }

.ent-reng-cant { text-align: right; }
.ent-reng-cant label {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; color: var(--texto-3);
}
.ent-reng-cant .ent-input {
  width: 108px; text-align: center; margin-top: 4px;
  font-size: 30px; font-weight: 700;
}
.ent-estado { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 700; }
.ent-ok    { color: var(--verde); }
.ent-dif   { color: var(--naranja); }
.ent-falta { color: var(--texto-3); font-weight: 500; }

@media (max-width: 520px) {
  .ent-reng { grid-template-columns: 1fr; gap: 8px; }
  .ent-reng-cant { text-align: left; }
}

/* ── Lo que quedó a medias ───────────────────────────────────────────────── */
/* Va antes que los botones porque es lo primero que hay que saber al entrar.
   Cada renglón trae TRES cosas: qué pasó, desde cuándo, y qué hacer. La
   tercera es la que faltaba: marcar el problema sin decir el siguiente paso
   deja a quien está solo en la bodega igual de atorado. */
.pend-caja {
  background: var(--superficie); border-radius: var(--r-grande);
  padding: 14px; margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px var(--naranja);
}
.pend-caja.hay-rojo { box-shadow: inset 0 0 0 2px var(--rojo); }
.pend-caja h3 {
  margin: 2px 4px 12px; font-size: 17px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.pend-caja h3 span { font-size: 14px; font-weight: 500; color: var(--texto-3); }

.pend-item {
  display: block; width: 100%; text-align: left;
  background: var(--naranja-fondo); color: var(--texto);
  border-radius: var(--r); padding: 13px 15px; margin-bottom: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,159,10,.45);
}
.pend-item.rojo {
  background: var(--rojo-fondo);
  box-shadow: inset 0 0 0 1px rgba(255,69,58,.5);
}
.pend-item:active { filter: brightness(1.35); }
.pend-item b     { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; }
.pend-item small { display: block; font-size: 14px; color: var(--texto-2); margin-top: 3px; }
.pend-item em    {
  display: block; font-style: normal; font-size: 14.5px; line-height: 1.4;
  color: var(--texto); margin-top: 9px; padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.pend-ajeno { margin: 10px 4px 2px; font-size: 13.5px; color: var(--texto-3); }

/* ── Confirmación de pedido entregado ─────────────────────────────────────── */
/* Lo primero que ve Agustín al liberar: grande, claro, sin ambigüedad de si
   el pedido ya salió. Verde = entregado y cobrado. Naranja = quedó a deber. */
.entregado-ok {
  display: flex; align-items: center; gap: 16px;
  padding: 20px; border-radius: var(--r-grande); margin-bottom: 16px;
}
.entregado-ok.ok  { background: var(--verde-fondo);  box-shadow: inset 0 0 0 2px var(--verde); }
.entregado-ok.dif { background: var(--naranja-fondo); box-shadow: inset 0 0 0 2px var(--naranja); }
.entregado-icono { font-size: 48px; line-height: 1; }
.entregado-ok b  { font-size: 22px; font-weight: 800; display: block; }
.entregado-ok > div > div { font-size: 15px; color: var(--texto-2); margin-top: 2px; }
.entregado-monto { font-size: 26px !important; font-weight: 700; color: var(--texto) !important; margin-top: 6px !important; }
#ped-btn-listo { background: var(--verde); color: #fff; }

.pend-limpio {
  background: var(--verde-fondo); color: var(--verde);
  border-radius: var(--r); padding: 12px 15px; margin-bottom: 14px;
  font-size: 15.5px; font-weight: 600;
}
.pend-aviso {
  background: var(--superficie-2); color: var(--texto-2);
  border-radius: var(--r); padding: 12px 15px; margin-bottom: 14px; font-size: 14.5px;
}

/* ── Campos ──────────────────────────────────────────────────────────────── */
/* OJO CON ESTE SELECTOR. Estaba escrito como `input:not(#pin)`, y `:not()`
   hereda el peso de lo que lleva dentro: esa regla pesaba como un ID y le
   ganaba a TODO el resto del archivo -- la palomita de Precios, el deslizador
   de Margen, los campos del corte de Mary --, sin importar que vinieran
   después. Por eso .lector y .cantidad-grande habían necesitado !important:
   se venía parchando caso por caso en vez de quitarle el peso.
   `:where()` no suma peso: la regla vale lo que vale un `input` a secas y
   cualquier clase le gana, que es como debe ser.

   Y el fondo: los campos van en --superficie-2, la variable que este archivo
   reservó para "controles dentro de una tarjeta". Antes iban en --superficie,
   el MISMO color de la tarjeta que los contiene, sin borde: eran invisibles.
   Agustín tenía que picarle a una caja que no se veía. */
select,
input:where(:not(#pin):not([type=checkbox]):not([type=range]):not([type=file])),
textarea {
  font-family: inherit; font-size: 17px;
  padding: 14px; min-height: 50px; width: 100%;
  border: none; border-radius: var(--r-chico);
  background: var(--superficie-2); color: var(--texto);
  box-shadow: inset 0 0 0 1px var(--texto-3);
  appearance: none; -webkit-appearance: none;
}
select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%238e8e93' d='M2.5 4.5L6 8l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  background-size: 14px; padding-right: 38px;
}
input::placeholder { color: var(--texto-3); }   /* antes 2.5:1, ilegible de noche */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--azul); outline-offset: -2px;
}
.fila { display: flex; gap: 10px; margin: 12px 0; }
.fila > * { flex: 1; min-width: 0; }
.fila label { display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--texto-3); }
.chk { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--texto-2); }
.chk input { width: auto; min-height: 0; accent-color: var(--azul); transform: scale(1.3); }
input[type=range] { width: 100%; margin: 10px 0 18px; accent-color: var(--azul); }

/* El campo donde cae la pistola: se distingue de todos los demás. */
.lector {
  font-size: 17px; font-family: ui-monospace, Menlo, monospace;
  background: var(--azul-fondo) !important;
  box-shadow: inset 0 0 0 1.5px rgba(10,132,255,.55);
}

/* ── Tarjetas y listas ───────────────────────────────────────────────────── */
.tarjeta {
  background: var(--superficie); border-radius: var(--r-grande);
  padding: 18px; margin: 14px 0;
}
.pend { color: var(--texto-3); font-size: 15px; line-height: 1.5; }
.error { color: var(--rojo); font-size: 15px; margin-top: 14px; min-height: 1.2em; }
.sub, .stock-linea { color: var(--texto-3); }
.stock-linea { font-size: 14px; margin: 8px 0; }
.pregunta {
  text-align: center; color: var(--texto-3);
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; margin: 16px 0 8px;
}
.pregunta.ojo { color: var(--naranja); text-transform: none; font-size: 15px; letter-spacing: 0; }

/* Renglón elegible: producto, punto, recepción. */
.resultado {
  display: block; width: 100%; text-align: left;
  background: var(--superficie); border-radius: var(--r-chico);
  padding: 15px 16px; margin-top: 8px; min-height: 58px;
  font-size: 17px; font-weight: 500;
}
.resultado small { display: block; font-size: 14px; font-weight: 400; color: var(--texto-3); margin-top: 3px; }
.resultado.listo { background: var(--verde-fondo); box-shadow: inset 3px 0 0 var(--verde); }
.resultado.agotado { background: var(--rojo-fondo); box-shadow: inset 3px 0 0 var(--rojo); }
.resultado.bajo { background: var(--naranja-fondo); box-shadow: inset 3px 0 0 var(--naranja); }

/* Renglón de avance con su barra. */
.reng {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--superficie); border-radius: var(--r-chico);
  padding: 14px 16px; margin-bottom: 8px;
}
.reng b { font-size: 16px; font-weight: 600; }
.reng small { color: var(--texto-3); font-size: 14px; line-height: 1.5; }
.reng.listo { background: var(--verde-fondo); box-shadow: inset 3px 0 0 var(--verde); }
.reng.falta { background: var(--rojo-fondo); box-shadow: inset 3px 0 0 var(--rojo); }
.fila-mini { display: flex; gap: 6px; flex: 0 0 auto; }
.fila-mini .mini { padding: 9px 12px; min-width: 44px; }

.barra { height: 5px; background: var(--superficie-3); border-radius: 3px;
  margin-top: 9px; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--verde); transition: width .25s ease; }

ul#rec-lista, ul#sur-lista { list-style: none; margin: 10px 0; }
ul#rec-lista li, ul#sur-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 0; border-bottom: .5px solid var(--separador);
}
ul#rec-lista li small, ul#sur-lista li small { color: var(--texto-3); font-size: 14px; }
li.cancelada { color: var(--texto-3); text-decoration: line-through; }
button.quitar { background: transparent; color: var(--rojo); font-size: 20px; padding: 8px 12px; min-height: 44px; }

/* ── Los números que deciden ─────────────────────────────────────────────── */
.avance {
  background: var(--superficie); border-radius: var(--r);
  padding: 18px; margin: 14px 0; text-align: center;
  font-size: 16px; color: var(--texto-2);
}
.avance b { font-size: 28px; font-weight: 700; color: var(--texto); letter-spacing: -0.02em; }

.contador-grande {
  font-size: 44px; font-weight: 700; letter-spacing: -0.03em; text-align: center;
  padding: 22px 12px; margin: 14px 0; border-radius: var(--r);
  background: var(--superficie); color: var(--texto);
  font-variant-numeric: tabular-nums;
  transition: background .2s ease;
}
.contador-grande b { font-weight: 700; }
.contador-grande small { display: block; font-size: 15px; font-weight: 400; color: var(--texto-3); margin-top: 4px; }
.contador-grande.cuadra { background: #248a3d; color: #fff; }
.contador-grande.cuadra small { color: rgba(255,255,255,.75); }
.contador-grande.sobra { background: #b8730a; color: #fff; }
.contador-grande.sobra small { color: rgba(255,255,255,.75); }

/* El sticker que hay que pegar: es la instrucción, tiene que gritar. */
.folio-grande {
  font-size: 46px; font-weight: 700; letter-spacing: .04em; text-align: center;
  padding: 22px 12px; border-radius: var(--r);
  background: var(--azul); color: #fff;
  font-variant-numeric: tabular-nums;
}

.cantidad-grande {
  font-size: 40px !important; font-weight: 700; text-align: center;
  padding: 14px !important; margin: 12px 0; min-height: 76px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.dos-cant label { text-align: center; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; color: var(--texto-3); }
.dos-cant .cantidad-grande { font-size: 32px !important; margin: 0; min-height: 66px; }
.equivale { text-align: center; font-size: 15px; color: var(--texto-3); margin: 8px 0 14px; }
.equivale b { font-size: 24px; font-weight: 700; color: var(--verde); }

.prod-grande { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.prod-grande small { display: block; font-size: 14px; font-weight: 400;
  color: var(--texto-3); margin-top: 4px; letter-spacing: 0; }

/* Total a cobrar: el número que Agustín le dice al bar. */
.cobro {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  background: var(--superficie); border-radius: var(--r);
  padding: 18px 20px; margin: 14px 0;
}
.cobro span { font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texto-3); }
.cobro b { font-size: 34px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--texto-3); font-variant-numeric: tabular-nums; }
.cobro.con-saldo { background: var(--verde-fondo); }
.cobro.con-saldo b { color: var(--verde); }

/* ── Botonera de cantidad ────────────────────────────────────────────────── */
.botones-cant { gap: 8px; }
button.cant {
  background: var(--superficie-2); font-size: 18px; font-weight: 600;
  padding: 16px 4px; min-height: 56px; border-radius: var(--r-chico);
}
button.cant.borrar { background: var(--superficie); color: var(--rojo); }

/* Selector de modo: CAJAS / SUELTAS. El activo se ve activo de verdad. */
.modo-sel { display: flex; gap: 8px; }
button.modo { flex: 1; background: var(--superficie-2); color: var(--texto-2);
  font-size: 16px; font-weight: 600; padding: 18px 6px; min-height: 58px; }
button.modo.activo-modo { background: var(--azul); color: #fff; }

/* Pestañas */
.tab { background: var(--superficie); color: var(--texto-2);
  font-size: 15px; font-weight: 500; padding: 11px 14px; min-height: 44px;
  border-radius: 999px; }
.tab.activo-tab { background: var(--azul); color: #fff; font-weight: 600; }

/* ── Existencias ─────────────────────────────────────────────────────────── */
.exi-card {
  background: var(--superficie); border-radius: var(--r);
  padding: 16px; margin: 10px 0;
  box-shadow: inset 3px 0 0 var(--azul);
}
.exi-card.agotado { background: var(--rojo-fondo); box-shadow: inset 3px 0 0 var(--rojo); }
.exi-card.critico { box-shadow: inset 3px 0 0 var(--naranja); }
.exi-card.bajo    { box-shadow: inset 3px 0 0 var(--amarillo); }
.exi-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.exi-nom { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.exi-num { font-size: 32px; font-weight: 700; margin: 6px 0 2px;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.exi-num small { font-size: 14px; font-weight: 400; color: var(--texto-3); letter-spacing: 0; }
.exi-det { font-size: 14px; color: var(--texto-2); }
.exi-sku { font-size: 12px; color: var(--texto-3); margin-top: 5px; }
.exi-tag {
  background: var(--rojo); color: #fff; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.exi-card.bajo .exi-tag { background: #9a7a05; }
.exi-card.critico .exi-tag { background: #b8730a; }
.exi-tag.tag-ambar { background: #9a7a05; }
.alerta-fuerte {
  background: var(--rojo-fondo); border-radius: var(--r);
  padding: 16px; margin: 12px 0; line-height: 1.5; font-size: 15px;
  box-shadow: inset 3px 0 0 var(--rojo);
}
.alerta-ok {
  background: var(--verde-fondo); border-radius: var(--r);
  padding: 14px 16px; margin: 12px 0; font-size: 15px; line-height: 1.5;
  box-shadow: inset 3px 0 0 var(--verde);
}

/* ── Zonas y puntos de venta ─────────────────────────────────────────────── */
.zonas { display: grid; gap: 10px; }
.zona-btn {
  display: grid; grid-template-columns: 52px 1fr; gap: 2px 14px;
  text-align: left; background: var(--superficie);
  padding: 18px; min-height: 76px; border-radius: var(--r); align-items: center;
}
.zona-ico { grid-row: 1 / 3; font-size: 32px; text-align: center; }
.zona-nom { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.zona-det { font-size: 14px; font-weight: 400; color: var(--texto-3); }
.zona-titulo { text-align: center; font-weight: 600; color: var(--texto-2); align-self: center; }

.punto-btn {
  display: block; width: 100%; text-align: left;
  background: var(--superficie); border-radius: var(--r);
  padding: 16px 18px; margin-bottom: 9px; min-height: 68px;
  box-shadow: inset 3px 0 0 var(--azul);
}
.punto-btn.bloq { background: var(--rojo-fondo); box-shadow: inset 3px 0 0 var(--rojo); }
.punto-nom { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.punto-det { display: block; font-size: 14px; font-weight: 400; color: var(--texto-3); margin-top: 3px; }
.punto-resp { display: block; font-size: 14px; font-weight: 400; color: var(--verde); margin-top: 3px; }
.punto-tag {
  display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--superficie-3); color: var(--texto-2);
  padding: 3px 9px; border-radius: 999px;
}
.punto-fila { display: flex; gap: 9px; align-items: stretch; margin-bottom: 9px; }
.punto-fila .punto-btn { flex: 1; margin-bottom: 0; }
.punto-fila .editar { flex: 0 0 56px; background: var(--superficie); font-size: 19px; }
.punto-activo {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--superficie); border-radius: var(--r);
  padding: 15px 18px; margin-bottom: 4px;
  box-shadow: inset 3px 0 0 var(--verde);
}
.punto-activo b { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

/* ── Tablas ──────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 12px 0; }
th, td {
  border: none; border-bottom: .5px solid var(--separador);
  padding: 12px 10px; text-align: left; font-size: 15px;
}
th { font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-3); }
td small { color: var(--texto-3); font-size: 13px; }
tr.fila-mala td { background: var(--rojo-fondo); }
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -18px; padding: 0 18px; }
.tabla-scroll table { min-width: 560px; }
.tabla-scroll td, .tabla-scroll th { font-size: 14px; white-space: nowrap; padding: 10px 8px; }

/* ── Precios y margen ────────────────────────────────────────────────────── */
.precio-fila label { flex: 1; font-size: 12px; font-weight: 600;
  letter-spacing: .05em; color: var(--texto-3); }
.precio-fila input { font-size: 19px; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums; }
.pre-unit { font-size: 14px; color: var(--verde); margin-top: 8px; }
.pre-costo { color: var(--texto-3); }
.pre-punto { color: var(--verde); font-weight: 600; }
.pre-max { color: var(--texto-2); }
.exi-card.agotado .pre-unit { color: #ff8f88; }

.sim-caja { background: var(--superficie); border-radius: var(--r-grande);
  padding: 18px; margin: 12px 0; }
.sim-linea { display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 15px; color: var(--texto-2);
  border-bottom: .5px solid var(--separador); }
.sim-linea:last-of-type { border-bottom: none; }
.sim-linea b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.sim-total { display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  border-top: .5px solid var(--separador); margin-top: 10px; padding-top: 14px; }
.sim-total span { font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texto-3); }
.sim-total b { color: var(--verde); font-size: 30px; font-weight: 700;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sim-nota { font-size: 14px; color: var(--texto-3); margin-top: 12px; line-height: 1.5; }
.sim-aviso { background: var(--rojo-fondo); border-radius: var(--r-chico);
  padding: 12px 14px; margin-top: 12px; font-size: 14px; line-height: 1.5; }
.dif { font-variant-numeric: tabular-nums; }

/* ── Texto con significado ───────────────────────────────────────────────── */
.verde    { color: var(--verde); }
.rojo     { color: var(--rojo); }
.bien-txt { color: var(--verde); font-weight: 600; font-size: 18px; }
.mal-txt  { color: var(--rojo);  font-weight: 600; font-size: 18px; }

/* ── Cámara ──────────────────────────────────────────────────────────────── */
video { width: 100%; border-radius: var(--r); background: #000;
  max-height: 280px; object-fit: cover; display: none; margin: 12px 0; }
video.activo { display: block; }
.h5qr { border-radius: var(--r); overflow: hidden; margin: 12px 0; }

/* ── Testigo de la pistola ───────────────────────────────────────────────── */
.chip-lector {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  background: var(--superficie-2); color: var(--texto-3);
  min-width: 32px; text-align: center;
}
.chip-lector.chip-vivo { animation: chispazo .35s ease-out; }
.chip-lector.chip-leyo { background: #248a3d; color: #fff; }
@keyframes chispazo {
  0%   { background: var(--azul); color: #fff; transform: scale(1.22); }
  100% { background: var(--superficie-2); color: var(--texto-3); transform: scale(1); }
}

/* ── Monitor crudo del lector (diagnóstico) ──────────────────────────────── */
.crudo {
  background: var(--superficie); border-radius: var(--r-chico); padding: 14px;
  font-family: ui-monospace, Menlo, monospace; font-size: 14px;
  color: var(--texto-3); line-height: 2.3; min-height: 68px; word-break: break-all;
}
.tecla { background: var(--azul); color: #fff; border-radius: 6px;
  padding: 3px 7px; margin: 0 3px; font-weight: 600; }
.tecla sub { font-size: .62em; opacity: .75; margin-left: 2px; }

/* ── Dos columnas en pantalla grande ─────────────────────────────────────── */
.dos-columnas { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) {
  .pantalla { max-width: 980px; }
  .dos-columnas { grid-template-columns: 1fr 1fr; align-items: start; }
  .dos-columnas > div:last-child { position: sticky; top: 78px; max-height: 82vh; overflow-y: auto; }
}

option.bloqueado, option:disabled { color: #ff8f88; }

/* ══════════════════════════════════════════════════════════════════════════
   DOCUMENTOS · en pantalla se parecen a como van a salir impresos
   ══════════════════════════════════════════════════════════════════════════ */
.doc-cabeza {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  border-bottom: 1.5px solid var(--separador); padding-bottom: 12px; margin-bottom: 14px;
}
.doc-folio {
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--verde); color: var(--verde);
  border-radius: var(--r-chico); padding: 6px 12px; white-space: nowrap;
}
.doc-datos td { border: none; padding: 5px 8px; font-size: 14px; }
.doc-firmas { margin-top: 30px; }
.doc-firmas td { border: none; border-top: .5px solid var(--separador);
  text-align: center; padding-top: 12px; width: 50%; font-size: 14px; }
.doc-nota { font-size: 14px; color: var(--texto-3); margin: 12px 0; line-height: 1.55; }
.doc-pie { font-size: 12px; color: var(--texto-3); margin-top: 16px;
  border-top: .5px solid var(--separador); padding-top: 8px; }
.firmas { margin-top: 30px; font-size: 14px; }
.corte-linea, .corte-papel {
  text-align: center; color: var(--texto-3); font-size: 13px;
  letter-spacing: 3px; margin: 28px 0; border-top: 1px dashed var(--separador);
  padding-top: 10px;
}
.comprobante { break-inside: avoid; }

/* ══════════════════════════════════════════════════════════════════════════
   IMPRESIÓN
   Se imprime EXCLUSIVAMENTE lo que imprimir() mueve a #print-root. Un solo
   bloque: cuando hubo tres acumulados, las reglas viejas ocultaban el
   documento por su posición en el árbol y la hoja salía en blanco.
   ══════════════════════════════════════════════════════════════════════════ */
@media print {
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; background: #fff !important; color: #000 !important; }
  #print-root, #print-root * {
    color: #000 !important; background: transparent !important;
    box-shadow: none !important; font-family: Georgia, 'Times New Roman', serif;
  }
  #print-root .imprimible { display: block !important; position: static !important;
    width: 100%; padding: 0; margin: 0; border-radius: 0; border: none; }
  #print-root button { display: none !important; }
  #print-root table { width: 100%; border-collapse: collapse; font-size: 11pt; margin: 8px 0; }
  #print-root th, #print-root td { border: 1px solid #000 !important; padding: 5px 7px; text-align: left; }
  #print-root th { text-transform: none; letter-spacing: 0; font-size: 10pt; }
  #print-root thead { display: table-header-group; }
  #print-root tr { break-inside: avoid; page-break-inside: avoid; }
  #print-root .doc-cabeza { display: flex; justify-content: space-between;
    align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; }
  #print-root .doc-folio { font-size: 15pt; font-weight: 700; border: 2px solid #000; padding: 4px 10px; }
  #print-root .doc-datos td { border: none !important; padding: 2px 6px !important; font-size: 10pt; }
  #print-root .doc-firmas { margin-top: 26px; }
  #print-root .doc-firmas td { border: none !important; border-top: 1px solid #000 !important;
    text-align: center; padding-top: 6px !important; width: 50%; }
  #print-root .doc-nota { font-size: 9pt; margin: 8px 0; font-style: italic; }
  #print-root .doc-pie { font-size: 8pt; margin-top: 14px; border-top: 1px solid #999; padding-top: 4px; }
  #print-root .corte-linea, #print-root .corte-papel { margin: 18px 0; border-top: 1px dashed #999; }
  #print-root .comprobante { page-break-inside: avoid; }
  #print-root .cobro { border: 2px solid #000; padding: 10px; }
  #print-root .cobro b { font-size: 18pt; }
  @page { margin: 12mm; }
}

/* Quien prefiere el equipo en claro: se respeta, sin perder el significado
   de los colores. */
@media (prefers-color-scheme: light) {
  :root {
    --fondo: #f2f2f7; --superficie: #ffffff; --superficie-2: #e5e5ea;
    --superficie-3: #d1d1d6; --separador: #d1d1d6;
    --texto: #000000; --texto-2: #3c3c43; --texto-3: #8e8e93;
    --azul: #007aff; --verde: #248a3d; --rojo: #d70015; --naranja: #b25000;
    --amarillo: #9a7a05;
    --verde-fondo: #e3f7e8; --rojo-fondo: #ffe5e3; --naranja-fondo: #fff2dd;
    --azul-fondo: #e5f1ff;
    --sombra: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  }
  #topbar { background: rgba(255,255,255,.82); }
  button:disabled { color: #aeaeb2; }
  .chip-lector.chip-vivo { animation: chispazo-claro .35s ease-out; }
  @keyframes chispazo-claro {
    0%   { background: var(--azul); color: #fff; transform: scale(1.22); }
    100% { background: var(--superficie-2); color: var(--texto-3); transform: scale(1); }
  }
}

/* Quien pidió menos movimiento en el sistema, no ve animaciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Campos que se capturan dentro de una tabla: el conteo del corte y las cajas
   a devolver al proveedor. Van angostos para que quepa el renglón, pero con
   el número grande porque son cifras que se teclean mirando el producto. */
.cor-cons, .cor-final, .dc-cant {
  width: 92px; min-height: 46px; padding: 10px;
  font-size: 19px; font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--superficie-2);
}
.cor-final { background: var(--azul-fondo); box-shadow: inset 0 0 0 1.5px rgba(10,132,255,.45); }
button.dc-dev { background: var(--superficie-2); color: var(--azul); font-size: 18px;
  padding: 10px 14px; min-height: 46px; }

/* ── Panel de pago ───────────────────────────────────────────────────────── */
/* Tres botones grandes en vez de "escribe E, T o F" en una ventanita. */
#ped-pago-opciones { display: grid; gap: 10px; margin: 10px 0; }
.pago-btn { text-align: center; font-size: 20px; }
.pago-fiado { background: var(--naranja-fondo); box-shadow: inset 0 0 0 2px var(--naranja); }

/* ── Secciones de pedidos por zona ───────────────────────────────────────── */
.ped-zona {
  margin: 22px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--separador);
  font-size: 14px; letter-spacing: .06em; color: var(--texto-2);
}
.ped-zona span { color: var(--texto-3); font-weight: 400; text-transform: none; letter-spacing: 0; }
.ped-hoja-card { margin-bottom: 12px; }

/* ── Renglón que el locatario ya no quiso, en la entrega ─────────────── */
/* Se ve tachado y apagado pero SE QUEDA VISIBLE: así se nota qué se quitó
   y el botón de regresarlo está ahí mismo si fue un dedazo. */
.ent-reng.quitado { opacity: .5; }
.ent-reng.quitado .ent-reng-nom b { text-decoration: line-through; }
.ent-quitar, .ent-regresar { margin-top: 6px; }
.ent-regresar { font-weight: 700; }

/* ── Refrigeradores ──────────────────────────────────────────────────── */
/* El refri fuera SIN contrato firmado grita: es el único papel con el que
   se puede reclamar un aparato del Consorcio en un puesto ajeno. */
.tarjeta.sin-firma { border-left: 6px solid #c62828; }
.ref-rojo { color: #c62828; }