/* ==========================================================================
   CHASQUI — inventario.css
   Dueño: módulo «inventario» (§11). Vistas inventario y etiquetas.
   --------------------------------------------------------------------------
   1  Pestañas y paneles
   2  Controles de la carga: jornada y carga/descarga
   3  El contador grande («17 de 18 arriba»)
   4  El escáner (campo Etiqueta) y la cámara
   5  Filas de la carga: Arriba / Falta / Abajo, por enviar
   6  Pestaña Inventario
   7  Etiquetas: la hoja sobre la mesa
   8  Impresión de etiquetas (A4)

   Se apoya en lo compartido de app.css (.lista, .segmentos, .barra,
   .barra-acciones, .documento--etiqueta, .campo) y solo agrega lo propio.
   No hay colores nuevos: todo sale de los tokens de base.css y app.css.
   ========================================================================== */

/* ── 1 · PESTAÑAS Y PANELES ─────────────────────────────────────────────── */
.inventario__pestanas{align-self:flex-start}
.inventario__pestanas .segmentos__opcion{min-height:var(--tactil)}
.inventario__panel{display:flex;flex-direction:column;gap:1rem;min-width:0}

/* ── 2 · CONTROLES DE LA CARGA ──────────────────────────────────────────── */
.carga__controles{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:.8rem 1.2rem;
}
.carga__jornada{flex:1 1 16rem;max-width:26rem}
.carga__tipo{display:flex;flex-direction:column;gap:.38rem}
.carga__tipo .segmentos__opcion{min-height:var(--tactil);padding-inline:1.2rem}
.carga__ayuda{margin-top:-.4rem;font-size:.88rem;color:var(--tx-3)}

/* ── 3 · EL CONTADOR GRANDE ─────────────────────────────────────────────── */
/*  Se tiene que leer a un metro, con el teléfono apoyado en un case.       */
.carga__resumen{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  padding:1rem 1.2rem 1.1rem;
  border:1px solid var(--brd);
  border-radius:var(--radio);
  background:linear-gradient(180deg,var(--sup-2),var(--sup-1));
  box-shadow:var(--sombra-1);
  transition:border-color var(--t-medio) var(--ease),background-color var(--t-medio) var(--ease);
}
.carga__contador{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.1rem .35rem;
  font-family:var(--f-display);
  font-weight:700;
  font-stretch:106%;
  font-size:1.2rem;
  letter-spacing:-.01em;
  color:var(--tx-2);
}
.carga__numero{
  font-weight:800;
  font-stretch:114%;
  font-size:clamp(3rem,12vw,4.4rem);
  line-height:.9;
  letter-spacing:-.045em;
  color:var(--tx);
  font-feature-settings:"tnum" 1;
}
.carga__barra{margin:0;height:8px}
.carga__faltan{font-size:.92rem;font-weight:600;line-height:1.45;color:var(--alerta);overflow-wrap:anywhere}
.carga__faltan:empty{display:none}

.carga__resumen.is-completa{
  border-color:var(--ok-borde);
  background:linear-gradient(120deg,var(--ok-tinte),var(--sup-2) 62%);
}
.carga__resumen.is-completa .carga__numero,
.carga__resumen.is-completa .carga__faltan{color:var(--ok)}
.carga__resumen.is-celebrando .carga__numero{animation:inventario-festejo .9s var(--ease)}
@keyframes inventario-festejo{
  0%{transform:scale(1)}
  35%{transform:scale(1.14) rotate(-3deg)}
  70%{transform:scale(.97)}
  100%{transform:none}
}

/* ── 4 · ESCÁNER Y CÁMARA ───────────────────────────────────────────────── */
.escaner{display:flex;flex-direction:column;gap:.38rem}
.escaner__fila{display:flex;flex-wrap:wrap;gap:.5rem}
.escaner__control{
  flex:1 1 11rem;
  width:auto;
  min-width:0;
  font-family:var(--f-mono);
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.escaner__control::placeholder{text-transform:none;font-weight:400}
.escaner .campo__error:not([hidden]) + .escaner__eco{display:none}
.escaner__eco{min-height:1.35em;font-size:.88rem;line-height:1.45;color:var(--tx-2)}
.escaner__eco.is-ok{color:var(--ok);font-weight:600}
.escaner .campo__error{margin:0}

.camara{
  position:relative;
  overflow:hidden;
  aspect-ratio:4 / 3;
  border-radius:var(--radio-sm);
  background:var(--tx);
}
.camara__video{display:block;width:100%;height:100%;object-fit:cover}
/* La mira: una franja donde conviene poner el código de barras. */
.camara::after{
  content:"";
  position:absolute;
  inset:38% 12%;
  border:2px solid var(--sodio);
  border-radius:6px;
  box-shadow:0 0 0 999px var(--velo);
  pointer-events:none;
}
.camara__estado{min-height:2.9em;font-size:.92rem;line-height:1.45;color:var(--tx-2)}

/* ── 5 · FILAS DE LA CARGA ──────────────────────────────────────────────── */
/*  Cada fila es un <button> dentro de su <li>: tocarla la marca. El borde de
    .lista__fila:first-child no alcanza (todas son primeras de su li), así
    que la separación la pone el li siguiente.                             */
.carga__lista{list-style:none}
.carga__item + .carga__item > .lista__fila{border-top:1px solid var(--brd)}
.carga__fila{min-height:60px;cursor:pointer}
div.carga__fila{cursor:default}
.carga__fila .lista__titulo,
.carga__fila .lista__detalle{display:block}
.carga__fila .lista__codigo{color:var(--tx);font-weight:700}
.carga__fila:focus-visible{outline:2px solid var(--sodio);outline-offset:-3px}
/* La descarga completa es tan buena noticia como la carga: el mismo verde. */
.lista__fila.is-abajo{box-shadow:inset 3px 0 0 var(--ok)}
.carga__cuando{
  font-family:var(--f-mono);
  font-size:.74rem;
  letter-spacing:.03em;
  color:var(--tx-3);
  white-space:nowrap;
}
/* Guardada en el teléfono, esperando señal. */
.carga__fila.is-pendiente{
  background:repeating-linear-gradient(135deg,var(--alerta-tinte) 0 8px,transparent 8px 16px);
  box-shadow:inset 3px 0 0 var(--alerta);
}
.carga__fila.is-pendiente .carga__cuando{color:var(--alerta);font-weight:700}
/* Recién leída por el escáner: un destello para encontrarla en la lista. */
.carga__fila.is-recien{animation:inventario-destello 1.4s var(--ease)}
@keyframes inventario-destello{
  0%{background-color:var(--sodio-brillo)}
  100%{background-color:transparent}
}
.carga__cierre .boton{flex:none}

/* ── 6 · PESTAÑA INVENTARIO ─────────────────────────────────────────────── */
.inventario__barra{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.8rem}
.inventario__buscar{flex:1 1 16rem;max-width:26rem}
.inventario__cuenta{
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tx-3);
}
.inventario__cuenta:empty{display:none}
.inventario__lista .lista__codigo{color:var(--tx);font-weight:700}
.inventario__lista .lista__fila.is-inactivo .lista__titulo,
.inventario__lista .lista__fila.is-inactivo .lista__codigo{color:var(--tx-3)}
.inventario__borrar{display:flex;justify-content:flex-start;padding-top:.9rem;border-top:1px dashed var(--brd-2)}

/* ── 7 · ETIQUETAS ──────────────────────────────────────────────────────── */
.etiquetas__cuerpo{display:flex;flex-direction:column;gap:1.25rem}
.etiquetas__seleccion .tarjeta__cab{flex-wrap:wrap}
.etiquetas__opciones{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));
  gap:.1rem .9rem;
  list-style:none;
}
.etiquetas__opcion{display:flex;align-items:center;gap:.6rem;min-height:var(--tactil)}
.etiquetas__opcion-texto{display:flex;flex-direction:column;min-width:0;line-height:1.3;cursor:pointer}
.etiquetas__opcion-codigo{font-family:var(--f-mono);font-weight:700;font-size:.86rem;letter-spacing:.04em}
.etiquetas__opcion-nombre{font-size:.84rem;color:var(--tx-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etiquetas__cuenta{font-size:.9rem;color:var(--tx-2)}

.etiquetas__hoja{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
  gap:1rem;
}
.etiqueta-case{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  min-width:0;
}
.etiqueta-case__banda{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.etiqueta-case__codigo{
  font-family:var(--f-mono);
  font-weight:700;
  font-size:clamp(1.9rem,6vw,2.4rem);
  line-height:1;
  letter-spacing:.01em;
  color:var(--tinta);
}
.etiqueta-case__nombre{
  font-weight:600;
  font-size:.95rem;
  line-height:1.3;
  color:var(--tinta-2);
  overflow-wrap:anywhere;
}
.etiqueta-case__barras{margin-top:.35rem;color:var(--tinta)}
.etiqueta-case__barras .codigo-barras{display:block;width:100%;height:56px}
.etiqueta-case__sin-barras{font-size:.8rem;color:var(--tinta-3)}
.etiqueta-case__base{
  display:flex;
  justify-content:space-between;
  gap:.6rem;
  padding-top:.35rem;
  border-top:1px dashed var(--papel-3);
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tinta-3);
}

/* ── 8 · IMPRESIÓN DE ETIQUETAS ─────────────────────────────────────────── */
/*  Página con nombre: solo la hoja de etiquetas va en A4 con estos márgenes;
    la hoja del día y lo demás que se imprime siguen con los suyos.
    2 columnas × 5 filas de 52 mm = 10 por hoja (272 de los 277 mm útiles);
    el borde punteado es la guía de corte. */
@page etiquetas{size:A4;margin:10mm}
@media print{
  .etiquetas__mesa{page:etiquetas}
  .etiquetas__hoja{grid-template-columns:repeat(2,minmax(0,1fr));gap:3mm}
  .etiquetas__hoja .etiqueta-case{
    height:52mm;
    padding:4mm 5mm;
    gap:1mm;
    overflow:hidden;
    border:1px dashed var(--papel-3);
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .etiqueta-case__codigo{font-size:24pt}
  /* Dos líneas como máximo: un nombre largo no puede empujar las barras fuera del papel. */
  .etiqueta-case__nombre{
    font-size:10pt;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .etiqueta-case__banda,.etiqueta-case__base{font-size:7pt}
  /* Las barras van al pie y salen en tinta aunque el navegador quiera ahorrarla: sin ellas no hay lectura. */
  .etiqueta-case__barras{margin-top:auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .etiqueta-case__barras .codigo-barras{height:13mm}
}