/*
 * Almacén de la planta - Mafer Camila.
 *
 * Pensada para un celular en la mano, de pie, en un almacén: texto grande,
 * botones que se tocan con el pulgar sin apuntar, y nada de fuentes ni
 * iconos que haya que descargar.
 *
 * EL MARRÓN EN VEZ DEL CORAL no es decoración. Con las dos apps instaladas
 * en el mismo celular, el color dice cuál se está abriendo antes de que
 * cargue nada.
 */

:root {
  --marron: #8D4A01;
  --marron-claro: #B26B00;
  --coral: #FF6D60;
  --gris: #4A4A4A;

  --fondo: #FAF7F4;
  --tarjeta: #FFFFFF;
  --suave: #FFF6EC;
  --borde: #ECE4DC;
  --texto: #2D2A26;
  --texto-suave: #7A736C;

  --ok: #2E7D32;
  --ok-fondo: #E8F5E9;
  --error: #C62828;
  --error-fondo: #FFEBEE;
  --aviso: #B26B00;
  --aviso-fondo: #FFF8E1;

  --radio: 14px;
}

/* De noche, en una planta a media luz, una pantalla blanca encandila. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #17150F;
    --tarjeta: #221F19;
    --suave: #2B2119;
    --borde: #3A342B;
    --texto: #F2EDE6;
    --texto-suave: #A79F94;
    --gris: #D6CFC6;
    --marron: #A05A0C;
    --marron-claro: #E8A765;
    --ok-fondo: #1D3020;
    --error-fondo: #3A1D1D;
    --aviso-fondo: #33280F;
  }
}

* { box-sizing: border-box; }

/* `hidden` tiene que ganar siempre: la regla del navegador es muy débil y
   cualquier `display` que pongamos aquí la pisa. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  /* Quien hace scroll es la lista, NUNCA la página. */
  overflow: hidden;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* `min-height: 0` no es un descuido: sin él, un hijo flexible se niega a
   encogerse por debajo de su contenido y el scroll interno no aparece. */
.pantalla { display: none; height: 100dvh; min-height: 0; flex-direction: column; }
.pantalla.activa { display: flex; }
#pantalla-entrar { overflow-y: auto; }

/* ── Entrar ────────────────────────────────────────────────────────── */

.entrar {
  margin: auto;
  width: 100%;
  max-width: 380px;
  padding: 32px 20px max(32px, env(safe-area-inset-bottom));
}

.entrar h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: var(--marron);
  letter-spacing: -0.5px;
}

.entrar__sub { margin: 4px 0 28px; color: var(--texto-suave); font-size: 15px; }

.entrar label,
.hoja label {
  display: block;
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gris);
}

.entrar input,
.hoja input,
.hoja select {
  width: 100%;
  min-height: 48px;
  padding: 13px 14px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--tarjeta);
  color: var(--texto);
  /* 16px exactos: con menos, iOS hace zoom solo al tocar el campo. */
  font-size: 16px;
  font-family: inherit;
}

.entrar input:focus,
.hoja input:focus,
.hoja select:focus {
  outline: 2px solid var(--marron-claro);
  outline-offset: -1px;
  border-color: var(--marron-claro);
}

/* ── Botones ───────────────────────────────────────────────────────── */

.boton {
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--tarjeta);
  color: var(--texto);
  font-size: 16px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
}

.boton--principal { background: var(--marron); border-color: var(--marron); color: #fff; }
.boton--principal:disabled { opacity: .6; }

/* ── Barra de arriba ───────────────────────────────────────────────── */

.barra {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: env(safe-area-inset-top) 8px 0;
  background: var(--marron);
  color: #fff;
}

.barra__titulo { flex: 1; min-width: 96px; padding: 0 6px; }

.barra__titulo strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra__sub {
  display: block;
  font-size: 12.5px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra__accion {
  flex: none;
  /* 44px es lo que mide un pulgar. Menos que eso y se falla el toque. */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.barra__accion--texto {
  width: auto;
  padding: 0 12px;
  border-radius: 22px;
  font-size: 14.5px;
  font-weight: 500;
  font-family: inherit;
  background: rgba(255, 255, 255, .18);
}

#btn-volver { font-size: 32px; line-height: 1; }

/* ── Buscador y filtros ────────────────────────────────────────────── */

.buscador { position: relative; padding: 12px 12px 0; background: var(--tarjeta); }

.buscador input {
  width: 100%;
  min-height: 46px;
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 23px;
  background: var(--fondo);
  color: var(--texto);
  font-size: 16px;
  font-family: inherit;
}

.buscador__limpiar {
  position: absolute;
  right: 20px;
  top: 19px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto-suave);
  font-size: 15px;
  cursor: pointer;
}

.filtros {
  display: flex;
  gap: 8px;
  padding: 12px;
  overflow-x: auto;
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
  scrollbar-width: none;
}

.filtros::-webkit-scrollbar { display: none; }

.filtro {
  flex: none;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--borde);
  border-radius: 20px;
  background: transparent;
  color: var(--gris);
  font-size: 14.5px;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.filtro.activo { background: var(--marron); border-color: var(--marron); color: #fff; }

/* ── Lo que se está acabando ───────────────────────────────────────── */

.faltan {
  padding: 10px 14px;
  background: var(--aviso-fondo);
  color: var(--aviso);
  font-size: 13.5px;
  border-bottom: 1px solid var(--borde);
}

/* ── La lista de productos ─────────────────────────────────────────── */

.lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 12px 12px max(20px, env(safe-area-inset-bottom));
  list-style: none;
}

.producto {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  padding: 13px 14px;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Sin nada y bajo mínimo: lo que hay que mirar primero. */
.producto--cero { border-left-color: var(--error); }
.producto--poco { border-left-color: var(--aviso); }

.producto__texto { flex: 1; min-width: 0; }
.producto__nombre { font-size: 15px; font-weight: 500; }
.producto__cat { color: var(--texto-suave); font-size: 12.5px; }

.producto__stock {
  flex: none;
  min-width: 52px;
  text-align: right;
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--marron);
}

.producto--cero .producto__stock { color: var(--error); }

/* ── La hoja de anotar ─────────────────────────────────────────────── */

.capa {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, .45);
}

.hoja {
  width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 20px 16px max(20px, env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: var(--tarjeta);
}

.hoja h2 { margin: 0 0 2px; font-size: 19px; color: var(--marron); }
.hoja__ayuda { margin: 0 0 14px; color: var(--texto-suave); font-size: 13px; }

.hoja__seccion {
  margin: 22px 0 8px;
  font-size: 13px;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* En una pantalla grande la hoja se centra y se acota. */
@media (min-width: 720px) {
  .capa { align-items: center; }
  .hoja { max-width: 480px; margin-inline: auto; border-radius: 18px; }
}

.tengo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--suave);
}

.tengo span { color: var(--texto-suave); font-size: 14px; }
.tengo strong { font-size: 30px; color: var(--marron); font-variant-numeric: tabular-nums; }

/* Entró o salió: dos botones grandes, porque es la decisión que más se toma
   en todo el día y se toca con una mano mientras la otra sostiene una caja. */
.mover__que { display: flex; gap: 10px; margin-top: 14px; }

.mover__boton {
  flex: 1;
  min-height: 56px;
  border: 2px solid var(--borde);
  border-radius: 12px;
  background: var(--tarjeta);
  color: var(--texto);
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.mover__boton--entra.elegido { background: var(--ok-fondo); border-color: var(--ok); color: var(--ok); }
.mover__boton--sale.elegido { background: var(--error-fondo); border-color: var(--error); color: var(--error); }

/* ── El historial ──────────────────────────────────────────────────── */

#movimientos { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }

.mov {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}

.mov:last-child { border-bottom: 0; }

.mov__cant {
  flex: none;
  min-width: 52px;
  text-align: right;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mov__cant--entra { color: var(--ok); }
.mov__cant--sale { color: var(--error); }

.mov__texto { flex: 1; min-width: 0; }
.mov__que { font-size: 14.5px; }
.mov__quien { color: var(--texto-suave); font-size: 12.5px; }

/* El anulado se queda a la vista, tachado: que el error se vea es el punto. */
.mov--anulado { opacity: .55; }
.mov--anulado .mov__cant, .mov--anulado .mov__que { text-decoration: line-through; }

.mov__deshacer {
  flex: none;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--texto-suave);
  font-size: 12.5px;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.historial-prod { font-size: 14px; }

/* ── Avisos ────────────────────────────────────────────────────────── */

.aviso { margin: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.aviso--error { background: var(--error-fondo); color: var(--error); }
.aviso--ok { background: var(--ok-fondo); color: var(--ok); }

.vacio { padding: 40px 24px; color: var(--texto-suave); text-align: center; font-size: 15px; }

.version { padding: 6px 12px 20px; color: var(--texto-suave); text-align: center; font-size: 11.5px; }

/* ── El informe ────────────────────────────────────────────────────── */

.mandos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 12px;
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
}

.mandos__campo { display: flex; flex-direction: column; gap: 4px; }
.mandos__campo span { color: var(--texto-suave); font-size: 12.5px; }

.mandos__campo input,
.mandos__campo select {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo);
  color: var(--texto);
  /* 16px exactos: con menos, iOS hace zoom solo al tocar el campo. */
  font-size: 16px;
  font-family: inherit;
}

.mandos__atajos { display: flex; gap: 8px; }

.mandos__casilla {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
}

.mandos__casilla input { width: 20px; height: 20px; accent-color: var(--marron); }

.mandos__botones { display: flex; gap: 8px; margin-left: auto; }
.mandos__botones .boton { width: auto; margin: 0; padding: 11px 18px; }

.hoja-informe {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  background: var(--tarjeta);
}

.hoja-informe__cab { margin-bottom: 18px; }
.hoja-informe__cab h2 { margin: 0; font-size: 17px; color: var(--marron); letter-spacing: .3px; }
.hoja-informe__cab p { margin: 2px 0 0; font-size: 14px; }
.hoja-informe__quien { color: var(--texto-suave); font-size: 12.5px; }

.tabla {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.tabla th, .tabla td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--borde);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabla th { color: var(--texto-suave); font-size: 12px; font-weight: 600; }
.tabla__nombre { text-align: left; }

.tabla thead th.tabla__nombre {
  color: var(--marron);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.tabla__fuerte td { font-weight: 700; border-top: 2px solid var(--borde); border-bottom: 0; }
.tabla--total { margin-top: -6px; }

.hoja-informe__firmas {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 34px;
  font-size: 13px;
}

/* ── Al imprimir ───────────────────────────────────────────────────── */

/*
 * La hoja se imprime desde el navegador: Ctrl+P, o "Guardar como PDF". Nada
 * de librerías — una que no cargue deja un botón que no hace nada, y con la
 * señal de un almacén eso pasa.
 *
 * Todo lo que no es el informe desaparece, los colores de fondo se van (gastan
 * tinta y en blanco y negro salen como manchas grises) y ninguna categoría se
 * parte entre dos páginas.
 */
@media print {
  .no-imprimir,
  .barra,
  .mandos { display: none !important; }

  html, body {
    height: auto;
    overflow: visible;
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .pantalla { display: none; height: auto; }
  .pantalla.activa { display: block; }

  .hoja-informe {
    overflow: visible;
    padding: 0;
    background: #fff;
  }

  .hoja-informe__cab h2 { color: #000; }
  .hoja-informe__quien { color: #444; }

  /* Una categoría no se corta a la mitad entre dos hojas. */
  .tabla { page-break-inside: avoid; break-inside: avoid; font-size: 10pt; }
  .tabla th, .tabla td { border-bottom: 1px solid #ccc; padding: 3px 5px; }
  .tabla thead th.tabla__nombre { color: #000; }
  .tabla__fuerte td { border-top: 1.5px solid #000; }

  /* Que la cabecera de la tabla se repita en cada página. */
  thead { display: table-header-group; }

  @page { margin: 14mm; }
}

/* ── La hoja, en pantalla ──────────────────────────────────────────── */

/*
 * Se ve como la hoja que va a ser.
 *
 * Estirada de borde a borde en un monitor, el nombre quedaba a un lado y los
 * números al otro con medio metro de vacío en el medio: el ojo no llega de
 * uno al otro y hay que ir siguiendo la línea con el dedo.
 *
 * Acotada al ancho de un papel y centrada, se lee de un vistazo — y además
 * uno ve en pantalla lo que va a salir por la impresora, que es justo lo que
 * se está por hacer.
 */
@media screen {
  .hoja-informe { background: var(--fondo); }

  .hoja-informe > * {
    max-width: 860px;
    margin-inline: auto;
  }

  .hoja-informe__cab,
  .tabla,
  .hoja-informe__firmas {
    background: var(--tarjeta);
    padding-inline: 22px;
    border-radius: 0;
  }

  .hoja-informe__cab { padding-top: 22px; border-radius: 12px 12px 0 0; }
  .hoja-informe__firmas { padding-bottom: 22px; border-radius: 0 0 12px 12px; }

  /* Una línea sí y otra no, para seguir la fila hasta el final sin perderse.
     Solo en pantalla: al imprimir sería tinta gastada en nada. */
  .tabla tbody tr:nth-child(even) { background: var(--suave); }
}

/* Las columnas de números, todas del mismo ancho y juntas al final. Sin esto
   se reparten el sobrante y quedan desparramadas. */
.tabla th:not(.tabla__nombre),
.tabla td:not(.tabla__nombre) { width: 88px; }

.tabla__nombre { width: auto; }

/* El nombre pegado al borde izquierdo de la hoja, no flotando. */
.tabla tbody .tabla__nombre { padding-left: 10px; }

/* ── El detalle, día por día ───────────────────────────────────────── */

.dia { margin-bottom: 22px; }

.dia__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  padding: 8px 10px;
  background: var(--suave);
  border-radius: 8px;
  color: var(--marron);
  font-size: 13.5px;
  letter-spacing: .5px;
}

/* Cuánto entró y salió ese día, al lado del título: es lo primero que se
   pregunta al mirar una jornada. */
.dia__resumen {
  color: var(--texto-suave);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

.tabla--detalle td { border-bottom: 1px solid var(--borde); text-align: left; }

.detalle__hora {
  width: 58px;
  color: var(--texto-suave);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.detalle__cant {
  width: 70px;
  text-align: right !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.detalle__cant--entra { color: var(--ok); }
.detalle__cant--sale { color: var(--error); }

.detalle__motivo { width: 190px; color: var(--texto-suave); font-size: 12.5px; }
.detalle__quien { width: 120px; color: var(--texto-suave); font-size: 12.5px; }

/* Lo deshecho se queda a la vista, tachado: que el error se vea es el punto. */
.tabla__anulado { opacity: .5; }
.tabla__anulado .tabla__nombre,
.tabla__anulado .detalle__cant { text-decoration: line-through; }

@media screen {
  .dia { max-width: 860px; margin-inline: auto; }
  .dia__titulo, .tabla--detalle { background-color: var(--tarjeta); }
  .dia__titulo { background: var(--suave); }
  .tabla--detalle { padding-inline: 22px; }
}

@media print {
  /* Un día no se parte entre dos hojas. */
  .dia { page-break-inside: avoid; break-inside: avoid; }
  .dia__titulo { background: #fff; color: #000; border-bottom: 1.5px solid #000; border-radius: 0; }
  .detalle__hora, .detalle__motivo, .detalle__quien { color: #333; }
  .detalle__cant--entra, .detalle__cant--sale { color: #000; }
}