/* Pensado primero para el teléfono del depósito y después para la compu.
   Nada de framework: son 200 líneas y cargan al instante con mal WiFi.

   Los botones y campos van en 44px de alto mínimo porque es lo que se puede
   apretar con el dedo sin mirar. El verde es el mismo #38761d de las hojas
   de producción, para que se lea como parte del mismo sistema. */

:root {
  --verde: #38761d;
  --verde-claro: #d9ead3;
  --rojo: #a61c00;
  --rojo-claro: #f4c7c3;
  --ambar: #7f6000;
  --ambar-claro: #fff2cc;
  --texto: #1f2328;
  --tenue: #656d76;
  --borde: #d8dee4;
  --fondo: #ffffff;
  --panel: #f6f8fa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --verde: #7bb661;
    --verde-claro: #1c2b16;
    --rojo: #ff8b7a;
    --rojo-claro: #3a1712;
    --ambar: #e3c04a;
    --ambar-claro: #33290a;
    --texto: #e6edf3;
    --tenue: #9198a1;
    --borde: #30363d;
    --fondo: #0d1117;
    --panel: #161b22;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;               /* menos que esto y iOS hace zoom al tocar un campo */
  line-height: 1.45;
  color: var(--texto);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}

.contenido { max-width: 900px; margin: 0 auto; padding: 12px 14px 90px; }

/* --- Encabezado ------------------------------------------------------- */

header {
  background: var(--verde);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
header .titulo { font-weight: 600; font-size: 17px; }
header a { color: #fff; text-decoration: none; opacity: .9; font-size: 14px; }

/* --- Navegación inferior: el pulgar llega ahí, no arriba -------------- */

nav.barra {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; background: var(--panel);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}
nav.barra a {
  flex: 1; text-align: center; padding: 10px 4px 12px;
  text-decoration: none; color: var(--tenue); font-size: 12px;
}
nav.barra a.activo { color: var(--verde); font-weight: 600; }
nav.barra .icono { display: block; font-size: 20px; line-height: 1.2; }

/* --- Bloques ---------------------------------------------------------- */

h1 { font-size: 20px; margin: 14px 0 8px; }
h2 { font-size: 16px; margin: 20px 0 8px; color: var(--tenue);
     text-transform: uppercase; letter-spacing: .04em; }

.panel {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; padding: 12px; margin: 10px 0;
}

.resumen { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.resumen .dato {
  flex: 1 1 130px; background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; padding: 10px 12px;
}
.resumen .dato .n { font-size: 22px; font-weight: 600; }
.resumen .dato .r { font-size: 12px; color: var(--tenue); }

/* --- Formularios ------------------------------------------------------ */

label { display: block; font-size: 13px; color: var(--tenue); margin: 8px 0 3px; }

input, select, textarea, button {
  font: inherit; width: 100%; min-height: 44px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--fondo); color: var(--texto);
}
input[type="number"] { text-align: right; }

button, .boton {
  background: var(--verde); color: #fff; border: none;
  font-weight: 600; cursor: pointer; text-align: center;
  text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center;
}
button.secundario, .boton.secundario {
  background: var(--fondo); color: var(--texto); border: 1px solid var(--borde);
}
button.peligro { background: var(--rojo); }
button.chico, .boton.chico {
  min-height: 34px; width: auto; padding: 4px 12px; font-size: 14px;
}

form button[type="submit"] { margin-top: 12px; }
form .fila button { margin-top: 0; }

.fila { display: flex; gap: 8px; align-items: flex-end; }
.fila > * { flex: 1; }
.fila > .angosto { flex: 0 0 96px; }

/* --- Tablas ----------------------------------------------------------- */

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--tenue);
  border-bottom: 1px solid var(--borde); padding: 8px 6px; white-space: nowrap;
}
td { padding: 9px 6px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.cero td { color: var(--tenue); }
tr.negativo td { background: var(--rojo-claro); color: var(--rojo); font-weight: 600; }
td a { color: inherit; text-decoration: none; }
td a:hover { text-decoration: underline; }

.sku { font-size: 11px; color: var(--tenue); font-family: ui-monospace, monospace; }

/* En el teléfono no entran cinco columnas sin que el nombre del producto se
   parta en cuatro renglones. Se esconde el detalle por depósito y queda el
   total, que es lo que se mira parado en el pasillo; el desglose está a un
   toque de distancia, en la ficha del producto. */
@media (max-width: 560px) {
  .solo-ancho { display: none; }
  table { font-size: 13px; }
  td, th { padding: 8px 4px; }
}

/* --- Avisos ----------------------------------------------------------- */

/* La variante ámbar se llama `atencion` y no `aviso` por un motivo que costó
   encontrar: `.aviso.aviso` es lo mismo que `.aviso`, así que pintaba de
   ámbar TODOS los avisos, incluidos los rojos, por venir última en el
   archivo. Dos nombres distintos y el problema no puede volver. */
.aviso { border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-size: 14px; }
.aviso.ok       { background: var(--verde-claro); color: var(--verde); }
.aviso.error    { background: var(--rojo-claro);  color: var(--rojo); }
.aviso.atencion { background: var(--ambar-claro); color: var(--ambar); }

.pastilla {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; background: var(--panel); border: 1px solid var(--borde);
  color: var(--tenue);
}
.pastilla.alerta { background: var(--ambar-claro); color: var(--ambar); border-color: var(--ambar); }
.pastilla.mal    { background: var(--rojo-claro);  color: var(--rojo);  border-color: var(--rojo); }
.pastilla.bien   { background: var(--verde-claro); color: var(--verde); border-color: var(--verde); }

.tenue { color: var(--tenue); font-size: 13px; }
.vacio { color: var(--tenue); text-align: center; padding: 24px 12px; font-size: 14px; }

/* --- Pantalla de escaneo ---------------------------------------------- */

/* Los tres botones de sentido son lo primero que se toca y se ven desde
   lejos: la tablet está colgada en la pared y hay que saber de un vistazo si
   está en ingreso o en egreso. El elegido queda pintado, no solo marcado. */
.sentido { display: flex; gap: 8px; margin: 4px 0 14px; }
.sentido button {
  flex: 1; min-height: 72px; font-size: 15px; font-weight: 700;
  letter-spacing: .04em; border: 2px solid var(--borde);
  background: var(--panel); color: var(--tenue);
  display: flex; flex-direction: column; gap: 2px;
}
.sentido button .flecha { font-size: 22px; line-height: 1; }
.sentido button.elegido.ingreso { background: var(--verde); color: #fff; border-color: var(--verde); }
.sentido button.elegido.egreso  { background: var(--rojo);  color: #fff; border-color: var(--rojo); }
.sentido button.elegido.ajuste  { background: var(--ambar); color: #fff; border-color: var(--ambar); }

/* El campo de escaneo: grande, monoespaciado y con el borde del color del
   sentido, para que no se pueda escanear "sin darse cuenta" en el otro. */
.escaneo input#codigo {
  font-size: 24px; min-height: 60px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; border-width: 2px;
}
.escaneo.ingreso { border-color: var(--verde); }
.escaneo.egreso  { border-color: var(--rojo); }
.escaneo.ingreso input#codigo { border-color: var(--verde); }
.escaneo.egreso  input#codigo { border-color: var(--rojo); }
.escaneo button.ingreso { background: var(--verde); }
.escaneo button.egreso  { background: var(--rojo); }

.entra { color: var(--verde); font-weight: 600; }
.sale  { color: var(--rojo);  font-weight: 600; }

/* --- Filas de grupo en la tabla de stock ------------------------------ */

/* Reemplazan a las filas en blanco de la planilla: separan los bloques y
   dicen de qué familia es lo que viene abajo. */
tr.grupo td {
  background: var(--panel); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--tenue);
  padding-top: 14px; border-bottom: 2px solid var(--borde);
}
tr.grupo.sobrante td { color: var(--ambar); }

table.stock tfoot td {
  border-top: 2px solid var(--borde); font-weight: 700; padding-top: 10px;
}

select.sin-motivo { border-color: var(--ambar); background: var(--ambar-claro); }

details.panel summary { cursor: pointer; padding: 2px 0; }
details.panel[open] summary { margin-bottom: 10px; }

/* --- El último escaneo ------------------------------------------------- */

/* Ocupa una banda entera bajo el campo. Es la confirmación de que la pistola
   leyó lo que se esperaba, y tiene que leerse a un metro de distancia. */
.ultimo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px; border-radius: 10px; margin: 12px 0;
  border: 2px solid; 
}
.ultimo.entra { background: var(--verde-claro); border-color: var(--verde); }
.ultimo.sale  { background: var(--rojo-claro);  border-color: var(--rojo); }

.ultimo .producto { font-size: 18px; font-weight: 700; line-height: 1.2; }
.ultimo .detalle {
  font-size: 12px; margin-top: 3px; opacity: .75;
  font-family: ui-monospace, monospace;
}
.ultimo .cuanto { text-align: right; flex: 0 0 auto; }
.ultimo .delta { font-size: 30px; font-weight: 800; line-height: 1; }
.ultimo .queda { font-size: 12px; opacity: .75; margin-top: 2px; }

.ultimo.entra .producto, .ultimo.entra .delta { color: var(--verde); }
.ultimo.sale  .producto, .ultimo.sale  .delta { color: var(--rojo); }

/* --- Quién está con la pistola ---------------------------------------- */

.operador-activo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 12px; margin: 0 0 10px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
}
.operador-activo strong { font-size: 17px; }
.operador-activo .cuenta { color: var(--ambar); font-size: 13px; font-weight: 600; }
.operador-activo form { flex: 0 0 auto; }

/* Los nombres frecuentes, como botones grandes: en el depósito son siempre
   las mismas cinco personas y nadie tipea su nombre entero cada vez. */
.operadores { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.operadores form { flex: 1 1 140px; }
.operadores button { min-height: 56px; font-size: 16px; font-weight: 600; }

.escaneo.ajuste { border-color: var(--ambar); }
.escaneo.ajuste input#codigo { border-color: var(--ambar); }
button.ajuste { background: var(--ambar); }
.sentido button .quien { font-size: 10px; opacity: .85; font-weight: 500; }