/* Pantallas del encargado de inventario:
   ingreso (Llegó mercadería), productos, importar (Cargar Excel), ajuste (Corregir stock)
   y movimientos (Historial de stock).
   Las clases compartidas (.card, .btn, .chip, .badge, .lista-item, .tabla, .pie-fijo, .exito…)
   viven en app.css. Acá solo colores de los tokens de DESIGN.md: nunca hex sueltos. */

:root {
  --inv-cond: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
}

/* ================================================================ compartido */

/* Texto que solo hace falta cuando la tabla se ve como tarjetas (celular). */
.inv-solo-movil { display: none; }

/* Código de repuesto como etiqueta: se distingue del nombre de un vistazo. */
.inv-codigo {
  display: inline-flex;
  align-self: flex-start; /* dentro de columnas flex no se estira a todo el ancho */
  width: fit-content;
  align-items: center;
  padding: 1px 7px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--papel);
  color: var(--gris);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  line-height: 1.5;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pastilla de stock: número + palabra ("3 Bajo", "0 Agotado"). Nunca solo color. */
.inv-stock {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.inv-stock-num { font-family: var(--inv-cond); font-size: 20px; font-weight: 700; line-height: 1.2; }
.inv-stock-txt { font-size: 14px; font-weight: 600; }
.inv-stock-ok { background: var(--ok-suave); color: var(--ok); }
.inv-stock-aviso { background: var(--aviso-suave); color: var(--aviso); }
.inv-stock-error { background: var(--error-suave); color: var(--error); }

/* Chips en una sola fila que se desliza en celular (no ocupan media pantalla). */
.productos-chips,
.movimientos-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 639px) {
  .productos-chips,
  .movimientos-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 2px 16px 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px; /* sin esto el primer chip quedaba pegado al borde de la tarjeta */
  }
  .productos-chips::-webkit-scrollbar,
  .movimientos-chips::-webkit-scrollbar { display: none; }
  .productos-chips > .chip,
  .movimientos-chips > .chip { flex: none; scroll-snap-align: start; }
}

/* Casillas grandes */
.ingreso-chk,
.productos-chk,
.importar-chk {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  cursor: pointer;
  font-weight: 500;
}
.ingreso-chk input,
.productos-chk input,
.importar-chk input {
  width: 26px;
  height: 26px;
  flex: none;
  margin: 0;
  accent-color: var(--azul);
}

/* Datos clave/valor de los detalles */
.ingreso-datos,
.productos-datos {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 20px;
  margin: 0;
}
.ingreso-datos dt,
.productos-datos dt { color: var(--gris); }
.ingreso-datos dd,
.productos-datos dd { margin: 0; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }

.ingreso-exito-acciones,
.importar-exito-acciones,
.ajuste-exito-acciones {
  width: 100%;
  max-width: 420px;
  margin: 8px auto 0;
}
@media (min-width: 560px) {
  .ingreso-exito-acciones,
  .importar-exito-acciones,
  .ajuste-exito-acciones { flex-direction: row; max-width: 560px; }
  .ingreso-exito-acciones > .btn,
  .importar-exito-acciones > .btn,
  .ajuste-exito-acciones > .btn { flex: 1 1 0; }
}

/* ---------------------------------------------------- tablas que en celular son tarjetas
   Uso: envolver ui.tabla(...) en <div class="inv-tabla ..."> y darle a cada columna
   una `clase` para ubicarla en la tarjeta con grid-area. */

.inv-tabla .tabla-wrap { border-radius: 14px; }
.inv-tabla .tabla { font-size: 16px; }
.inv-tabla .tabla th {
  padding: 12px 16px;
  background: var(--papel);
  color: var(--gris);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.inv-tabla .tabla td {
  padding: 12px 16px;
  height: 56px;
  border-top: 1px solid var(--linea);
  color: var(--tinta);
  vertical-align: middle;
}
.inv-tabla .tabla tr.fila-tocable { transition: background-color .15s; }
@media (hover: hover) { .inv-tabla .tabla tr.fila-tocable:hover td { background: var(--azul-suave); } }
.inv-tabla .tabla tr.fila-tocable:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; }
.inv-tabla .tabla .texto-der { font-variant-numeric: tabular-nums; }

@media (max-width: 639px) {
  .inv-solo-movil { display: inline; }

  .inv-tabla .tabla-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .inv-tabla .tabla,
  .inv-tabla .tabla tbody { display: block; width: 100%; }
  .inv-tabla .tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .inv-tabla .tabla tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    padding: 14px 16px;
    margin: 0 0 8px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 14px;
    box-shadow: var(--sombra-1);
  }
  .inv-tabla .tabla tr:last-child { margin-bottom: 0; }
  .inv-tabla .tabla td {
    display: block;
    min-width: 0;
    height: auto;
    min-height: 0; /* el alto de fila de tabla (52px) dejaba huecos en la tarjeta */
    padding: 0;
    border: 0;
    background: transparent;
  }
  @media (hover: hover) { .inv-tabla .tabla tr.fila-tocable:hover td { background: transparent; } }
  @media (hover: hover) { .inv-tabla .tabla tr.fila-tocable:hover { border-color: var(--azul); } }
  .inv-tabla .tabla tr.fila-tocable:active { transform: scale(.98); background: var(--azul-suave); }
  .inv-tabla .tabla .texto-der { white-space: normal; text-align: right; }
  .inv-tabla .tabla .tabla-vacia { grid-column: 1 / -1; padding: 16px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .inv-tabla .tabla tr.fila-tocable:active { transform: none; }
}

/* ================================================================ ingreso
   "Llegó mercadería": a la izquierda se busca, a la derecha se arma la nota. */

.ingreso-aviso {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  background: var(--aviso-suave);
  border-color: var(--aviso-suave);
  box-shadow: none;
}
.ingreso-aviso-icono { color: var(--aviso); flex: none; }
.ingreso-aviso-texto { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ingreso-aviso-texto strong { color: var(--tinta); font-size: 17px; }
.ingreso-aviso-texto span { color: var(--gris); font-size: 15px; }

.ingreso-paso {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--inv-cond);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--tinta);
}
.ingreso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--blanco);
  font-family: var(--inv-cond);
  font-size: 20px;
  font-weight: 700;
}

.ingreso-opcional { color: var(--gris); font-weight: 400; }

.ingreso-ayuda { display: flex; flex-direction: column; gap: 8px; }
.ingreso-ayuda p { margin: 0; color: var(--gris); font-size: 15px; }
.ingreso-teclas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ingreso-teclas-label { font-weight: 600; color: var(--tinta); }
.ingreso-teclas kbd {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--linea);
  border-bottom-width: 3px;
  border-radius: 6px;
  background: var(--blanco);
  color: var(--tinta);
  font: 600 13px/1 var(--inv-cond);
}
@media (pointer: coarse) {
  .ingreso-teclas { display: none; }
}

/* ---- la nota */
.ingreso-nota {
  display: flex;
  flex-direction: column;
  gap: 16px;
  container-type: inline-size;
}
.ingreso-nota-cab {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
}
.ingreso-resumen { display: flex; gap: 6px; flex-wrap: wrap; }
.ingreso-badge { background: var(--azul-suave); color: var(--azul); }

.ingreso-nota-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linea);
}
.ingreso-nota-datos .campo > span { font-size: 15px; }
@media (max-width: 479px) {
  /* En celular, lado a lado se cortaban la etiqueta y el ejemplo */
  .ingreso-nota-datos { grid-template-columns: minmax(0, 1fr); }
}

/* Renglones como hoja de cuaderno: número en el margen y línea roja de margen. */
.ingreso-lista {
  display: flex;
  flex-direction: column;
  margin: -4px 0 0;
  background-image: linear-gradient(var(--rojo), var(--rojo));
  background-repeat: no-repeat;
  background-size: 2px 100%;
  background-position: 40px 0;
}
.ingreso-lista:has(.ingreso-vacio) { background-image: none; }


.ingreso-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 52px;
  grid-template-areas:
    "n info quitar"
    "n cant cant"
    "n costo costo";
  column-gap: 14px;
  row-gap: 8px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--linea);
  min-height: 64px;
}
.ingreso-item:last-child { border-bottom: 0; }

@container (min-width: 540px) {
  .ingreso-item {
    grid-template-columns: 40px minmax(0, 1fr) auto 52px;
    grid-template-areas:
      "n info cant quitar"
      "n costo costo costo";
  }
}

.ingreso-renglon {
  grid-area: n;
  align-self: start;
  padding: 4px 12px 0 0;
  text-align: right;
  color: var(--rojo);
  font-family: var(--inv-cond);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.ingreso-item-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ingreso-item-nombre { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--tinta); overflow-wrap: anywhere; }
.ingreso-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--gris);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.ingreso-codigo {
  padding: 0 7px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--papel);
  font-size: 14px;
  font-weight: 600;
}
.ingreso-queda strong { color: var(--ok); font-weight: 600; }

.ingreso-cant { grid-area: cant; justify-self: start; }
@container (min-width: 540px) {
  .ingreso-cant { justify-self: end; }
}

.ingreso-quitar {
  grid-area: quitar;
  align-self: start;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--gris);
  transition: background-color .15s, color .15s, transform .15s;
}
@container (min-width: 540px) {
  .ingreso-quitar { align-self: center; }
}
@media (hover: hover) { .ingreso-quitar:hover { background: var(--error-suave); color: var(--error); } }
.ingreso-quitar:active { transform: scale(.98); }
.ingreso-quitar:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

.ingreso-costo {
  grid-area: costo;
  display: grid;
  grid-template-columns: auto minmax(110px, 160px) minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
  margin: 0;
}
.ingreso-costo > span:first-child { font-size: 15px; font-weight: 600; color: var(--gris); }
.ingreso-costo input { min-height: 48px; font-variant-numeric: tabular-nums; }
.ingreso-costo-leido { font-size: 15px; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .ingreso-costo { grid-template-columns: minmax(0, 1fr); }
}

.ingreso-nuevo { animation: ingreso-brillo 1.4s ease-out; }
@keyframes ingreso-brillo {
  from { background-color: var(--aviso-suave); }
  to { background-color: transparent; }
}

.ingreso-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 12px;
  text-align: center;
  border: 2px dashed var(--linea);
  border-radius: 14px;
}
.ingreso-vacio p { margin: 0; max-width: 340px; }
.ingreso-vacio-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--azul-suave);
  color: var(--azul);
}

/* Total: la misma raya que el total de la venta (2px sólida, tinta). */
.ingreso-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label valor" "label sub";
  align-items: baseline;
  column-gap: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--tinta);
}
.ingreso-total-label { grid-area: label; align-self: center; font-size: 17px; font-weight: 600; color: var(--tinta); }
.ingreso-total-valor { grid-area: valor; display: inline-flex; align-items: baseline; gap: 8px; justify-self: end; }
.ingreso-total-num {
  font-family: var(--inv-cond);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.ingreso-total-txt { font-family: var(--inv-cond); font-size: 20px; font-weight: 600; color: var(--gris); }
.ingreso-total-sub { grid-area: sub; justify-self: end; font-size: 15px; color: var(--gris); }

/* Botón guardar: rojo, 64px, con el resumen adentro. */
.ingreso-guardar,
.importar-cargar {
  min-height: 64px;
  gap: 14px;
  justify-content: center;
  text-align: left;
}
.ingreso-guardar-textos,
.importar-cargar-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ingreso-guardar-titulo,
.importar-cargar-titulo {
  font-family: var(--inv-cond);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}
.ingreso-guardar-sub,
.importar-cargar-sub {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  opacity: .92;
  font-variant-numeric: tabular-nums;
}
/* Deshabilitado: lo resuelve la regla única de .btn-primario:disabled (app.css). */

/* Escritorio: la nota a la derecha, pegada arriba, y más ancha que el buscador. */
@media (min-width: 900px) {
  .ingreso .split.ingreso-split {
    grid-template-columns: minmax(0, 1fr) minmax(460px, 1.2fr);
    gap: 24px;
  }
  /* La nota crece con la página (sin barras de scroll adentro de otras). Lo que queda siempre
     a la vista: el buscador a la izquierda (pegado arriba) y "Guardar ingreso" (pegado abajo). */
  .ingreso .split.ingreso-split > .ingreso-nota {
    position: static; max-height: none; overflow: visible;
  }
  .ingreso .split.ingreso-split > :first-child {
    position: sticky; top: calc(var(--barra) + 16px); align-self: start;
  }
  .ingreso-pie {
    position: sticky; bottom: 0; z-index: 2;
    margin: 4px -20px -20px; padding: 12px 20px 20px;
    background: var(--blanco);
    border-radius: 0 0 var(--r-tarjeta) var(--r-tarjeta);
  }
}

/* ---- notas ya guardadas */
.ingreso-ultimos h2 { margin: 0; font-family: var(--inv-cond); font-size: 24px; font-weight: 700; color: var(--tinta); }
.ingreso-ultimos p { margin: 4px 0 0; font-size: 15px; }

.ingreso-ult {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  text-align: left;
}
.ingreso-ult-fecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 10px;
  background: var(--papel);
  border: 1px solid var(--linea);
  font-variant-numeric: tabular-nums;
}
.ingreso-ult-dia { font-family: var(--inv-cond); font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--tinta); }
.ingreso-ult-hora { font-size: 13px; color: var(--gris); }
.ingreso-ult-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ingreso-ult-info .muted { font-size: 15px; overflow-wrap: anywhere; }
.ingreso-ult-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.ingreso-ult-nums .muted { font-size: 14px; white-space: nowrap; }
@media (max-width: 479px) {
  /* En celular el texto del medio quedaba en una columna angosta de 4 renglones */
  .ingreso-ult { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; }
  .ingreso-ult-nums .muted { display: none; }
}
.ingreso-ult-unid {
  font-family: var(--inv-cond);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}

.ingreso-det-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--gris); }
.ingreso-det-total .ingreso-total-num { color: var(--ok); font-size: 30px; }

/* ================================================================ productos */

.productos-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 559px) {
  .productos-acciones > .btn { width: 100%; }
}

.productos-filtros { gap: 12px; }
.productos-buscar { width: 100%; }

.productos-conteo { margin: 0; font-size: 17px; color: var(--tinta); }
.productos-conteo strong { font-family: var(--inv-cond); font-size: 20px; font-weight: 700; }
@media (pointer: coarse) {
  .productos-conteo-ayuda { display: none; }
}

.productos-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.productos-nombre { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--tinta); overflow-wrap: anywhere; }
.productos-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--gris); font-size: 15px; }
.productos-precio {
  font-family: var(--inv-cond);
  font-size: 20px;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.productos-c-costo { color: var(--gris); font-size: 15px; }
.productos-tabla .productos-c-stock { width: 1%; }

.productos-inactivo td { opacity: .65; }

@media (max-width: 639px) {
  /* Sin celdas que ocupen dos filas: así la tarjeta no deja huecos. */
  .productos-tabla .tabla tr {
    grid-template-areas:
      "nombre nombre"
      "precio stock";
  }
  .productos-tabla.con-costo .tabla tr {
    grid-template-areas:
      "nombre nombre"
      "precio stock"
      "costo  .";
  }
  .productos-tabla .tabla .productos-c-precio { text-align: left; }
  .productos-tabla .productos-c-nombre { grid-area: nombre; align-self: start; }
  .productos-tabla .productos-c-precio { grid-area: precio; }
  .productos-tabla .productos-c-stock { grid-area: stock; width: auto; justify-self: end; }
  .productos-tabla .tabla .productos-c-costo { grid-area: costo; text-align: left; font-size: 14px; }
  .productos-inactivo td { opacity: 1; }
  .productos-tabla .tabla tr.productos-inactivo { background: var(--papel); }
}

/* Detalle del producto (modal) */
.productos-stock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  border-radius: 14px;
  text-align: center;
}
.productos-stock-label { font-size: 15px; font-weight: 600; color: var(--gris); }
.productos-stock-num {
  font-family: var(--inv-cond);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.productos-stock-fondo-ok { background: var(--ok-suave); }
.productos-stock-fondo-aviso { background: var(--aviso-suave); }
.productos-stock-fondo-error { background: var(--error-suave); }
.productos-stock-ok { color: var(--ok); }
.productos-stock-aviso { color: var(--aviso); }
.productos-stock-error { color: var(--error); }

/* ================================================================ importar
   Cuatro pasos siempre visibles: lo que ya pasó, lo que toca y lo que viene. */

.importar-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.importar-paso {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: var(--sombra-1);
  min-width: 0;
}
.importar-paso-actual { border: 2px solid var(--azul); padding: 19px; }
.importar-paso-pendiente {
  background: var(--papel);
  border-style: dashed;
  box-shadow: none;
}

.importar-paso-cab { display: flex; align-items: center; gap: 14px; }
.importar-paso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--blanco);
  font-family: var(--inv-cond);
  font-size: 22px;
  font-weight: 700;
}
.importar-paso-opcional .importar-paso-num { background: var(--azul-suave); color: var(--azul); }
.importar-paso-hecho .importar-paso-num { background: var(--ok-suave); color: var(--ok); }
.importar-paso-pendiente .importar-paso-num {
  background: transparent;
  border: 2px solid var(--linea);
  color: var(--gris);
}

.importar-paso-titulos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.importar-paso-titulo {
  margin: 0;
  font-family: var(--inv-cond);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--tinta);
}
.importar-paso-pendiente .importar-paso-titulo { color: var(--gris); }
.importar-paso-sub { font-size: 15px; color: var(--gris); overflow-wrap: anywhere; }

.importar-paso-cuerpo { min-width: 0; }
@media (min-width: 640px) {
  .importar-paso-cuerpo { margin-left: 54px; }
}

.importar-espera { margin: 0; color: var(--gris); font-size: 15px; max-width: 560px; }
.importar-cargando { padding: 8px 0; }

/* paso 1: plantilla */
.importar-plantilla p { margin: 0; }
.importar-columnas-ej { display: flex; flex-wrap: wrap; gap: 6px; }
.importar-col {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 12px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--papel);
}
.importar-col-nombre {
  font-family: var(--inv-cond);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--tinta);
}
.importar-col-ayuda { font-size: 13px; color: var(--gris); }
.importar-col-oblig { border-color: var(--azul); background: var(--azul-suave); }
.importar-col-oblig .importar-col-nombre { color: var(--azul); }

/* paso 2: archivo */
.importar-zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 16px;
  border: 2px dashed var(--linea);
  border-radius: 14px;
  background: var(--papel);
  text-align: center;
  transition: background-color .15s, border-color .15s;
}
.importar-zona.importar-encima { border-color: var(--azul); background: var(--azul-suave); }
.importar-zona.con-archivo {
  align-items: stretch;
  padding: 16px;
  border-style: solid;
  background: var(--blanco);
  text-align: left;
}
.importar-zona.con-archivo .importar-elegir { align-self: flex-start; }
.importar-zona-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--azul-suave);
  color: var(--azul);
}

.importar-elegir {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.importar-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.importar-elegir:focus-within { outline: 3px solid var(--azul); outline-offset: 2px; }

.importar-arrastrar { margin: 0; font-size: 15px; }
@media (pointer: coarse) {
  .importar-arrastrar { display: none; }
}

.importar-info { width: 100%; order: -1; }
.importar-archivo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.importar-archivo-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ok-suave);
  color: var(--ok);
}
.importar-archivo-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.importar-archivo-info strong { font-size: 17px; overflow-wrap: anywhere; color: var(--tinta); }
.importar-archivo-info .muted { font-size: 15px; }

.importar-columnas { display: flex; flex-direction: column; gap: 8px; }
.importar-columnas-label { font-size: 15px; font-weight: 600; color: var(--gris); }
.importar-columnas-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.importar-mapa {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--papel);
  max-width: 100%;
}
.importar-mapa-campo { font-size: 14px; color: var(--gris); }
.importar-mapa-col { font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.importar-cambiar { align-self: flex-start; color: var(--azul); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.importar-mapeo {
  padding: 16px;
  border: 2px solid var(--azul);
  border-radius: 14px;
  background: var(--blanco);
}
.importar-mapeo h3 { margin: 0; font-family: var(--inv-cond); font-size: 20px; font-weight: 700; color: var(--tinta); }
.importar-mapeo p { margin: 0; }
.importar-mapeo select { width: 100%; }
@media (max-width: 479px) {
  .importar-mapeo .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

.importar-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--aviso-suave);
  color: var(--tinta);
  font-weight: 500;
}
.importar-aviso > .icono { color: var(--aviso); }

/* paso 3: resumen grande */
.importar-resumen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.importar-num {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--blanco);
  min-width: 0;
}
.importar-num-valor {
  font-family: var(--inv-cond);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.importar-num-label { font-size: 17px; font-weight: 600; color: var(--tinta); }
.importar-num-ayuda { font-size: 14px; color: var(--gris); }
.importar-num-nuevo .importar-num-valor { color: var(--ok); }
.importar-num-suma .importar-num-valor { color: var(--azul); }
.importar-num-cero .importar-num-valor { color: var(--gris); }
.importar-num-error { background: var(--error-suave); border-color: var(--error-suave); }
.importar-num-error .importar-num-valor { color: var(--error); }

@media (max-width: 639px) {
  .importar-resumen { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .importar-num {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "valor label" "valor ayuda";
    align-items: center;
    column-gap: 12px;
    padding: 12px 16px;
  }
  .importar-num-valor { grid-area: valor; font-size: 40px; text-align: center; }
  .importar-num-label { grid-area: label; align-self: end; }
  .importar-num-ayuda { grid-area: ayuda; align-self: start; }
}

.importar-badge-suma { background: var(--azul-suave); color: var(--azul); }

.importar-errores {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: var(--error-suave);
}
.importar-errores-cab { display: flex; gap: 12px; align-items: flex-start; }
.importar-errores-cab > .icono { color: var(--error); margin-top: 2px; }
.importar-errores-cab h3 { margin: 0; font-family: var(--inv-cond); font-size: 20px; font-weight: 700; color: var(--error); }
.importar-errores-cab p { margin: 2px 0 0; font-size: 15px; color: var(--tinta); }
.importar-errores .tabla-wrap { border-color: var(--blanco); }

.importar-col-fila { white-space: nowrap; width: 1%; }
.importar-fila {
  font-family: var(--inv-cond);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.importar-detalle { border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco); }
.importar-detalle > summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
  font-weight: 600;
  color: var(--azul);
  cursor: pointer;
  list-style-position: inside;
}
.importar-detalle > summary:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 14px; }
.importar-detalle[open] > summary { border-bottom: 1px solid var(--linea); }
.importar-detalle > .inv-tabla { padding: 0; }
.importar-detalle .tabla-wrap { border: 0; border-radius: 0 0 14px 14px; box-shadow: none; }
.importar-detalle > p { margin: 0; padding: 12px 16px; }

.importar-prod { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.importar-prod-nombre { font-weight: 600; overflow-wrap: anywhere; }
.importar-col-cant strong { font-family: var(--inv-cond); font-size: 20px; color: var(--ok); }

@media (max-width: 639px) {
  .importar-tabla-errores .tabla tr {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    background: var(--blanco);
  }
  .importar-detalle > .inv-tabla { padding: 8px; background: var(--papel); border-radius: 0 0 14px 14px; }
  .importar-tabla-detalle .tabla tr {
    grid-template-areas:
      "accion   cant"
      "producto cant"
      "precio   stock"
      "fila     fila";
  }
  .importar-tabla-detalle .importar-col-accion { grid-area: accion; }
  .importar-tabla-detalle .importar-col-producto { grid-area: producto; }
  .importar-tabla-detalle .importar-col-cant { grid-area: cant; }
  .importar-tabla-detalle .importar-col-precio { grid-area: precio; text-align: left; color: var(--gris); }
  .importar-tabla-detalle .importar-col-stock { grid-area: stock; color: var(--gris); }
  .importar-tabla-detalle .importar-col-fila { grid-area: fila; width: auto; font-size: 13px; color: var(--gris); }
  .importar-tabla-detalle .importar-col-fila::before { content: "Fila "; }
}

/* paso 4: cargar */
.importar-cargar-ayuda { margin: 0; font-size: 15px; }

.importar-exito-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; }
.importar-exito-nums > div { display: flex; flex-direction: column; align-items: center; }
.importar-exito-nums strong {
  font-family: var(--inv-cond);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.importar-exito-nums span { color: var(--gris); font-size: 15px; }

/* ================================================================ ajuste
   "Corregir stock": lo que dice el sistema contra lo que contaste, mismo tamaño. */

.ajuste-intro { display: flex; gap: 14px; align-items: flex-start; }
.ajuste-intro-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--azul-suave);
  color: var(--azul);
}
.ajuste-intro h2 { margin: 0; font-family: var(--inv-cond); font-size: 24px; font-weight: 700; color: var(--tinta); }
.ajuste-intro p { margin: 4px 0 0; font-size: 15px; }

.ajuste-cab {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
}
.ajuste-cab-info { min-width: 0; flex: 1 1 240px; }
.ajuste-nombre {
  margin: 0 0 4px;
  font-family: var(--inv-cond);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.ajuste-cab-info .muted { font-size: 15px; }
@media (max-width: 559px) {
  .ajuste-cab > .btn { width: 100%; }
}

.ajuste-comparar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 640px) {
  .ajuste-comparar { gap: 16px; }
}
.ajuste-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 20px 12px;
  border-radius: 20px;
  text-align: center;
}
.ajuste-panel-sistema { background: var(--papel); border: 1px solid var(--linea); }
.ajuste-panel-contado { background: var(--blanco); border: 2px solid var(--azul); cursor: text; }
.ajuste-panel-label { font-size: 17px; font-weight: 600; color: var(--gris); }
.ajuste-panel-contado .ajuste-panel-label { color: var(--azul); }
.ajuste-panel-pie { font-size: 14px; color: var(--gris); min-height: 1.5em; }

/* Mismo tamaño para los dos números: se comparan de un vistazo. */
.ajuste-heroe,
.ajuste-cant {
  font-family: var(--inv-cond);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.ajuste-heroe { display: flex; align-items: center; justify-content: center; min-height: 88px; }
.ajuste-heroe-neg { color: var(--error); }

.ajuste-cant {
  width: 100%;
  max-width: 220px;
  height: 88px;
  padding: 0 8px;
  border: 2px solid var(--linea);
  border-radius: 14px;
  background: var(--blanco);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
  transition: border-color .15s, box-shadow .15s;
}
.ajuste-cant::-webkit-outer-spin-button,
.ajuste-cant::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ajuste-cant::placeholder { color: var(--gris); opacity: .35; }
.ajuste-cant:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.ajuste-cant:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

@media (max-width: 379px) {
  .ajuste-heroe, .ajuste-cant { font-size: 48px; }
  .ajuste-heroe, .ajuste-cant { min-height: 76px; height: 76px; }
  .ajuste-panel { padding: 16px 8px; }
}

/* Diferencia: qué va a pasar antes de guardar. */
.ajuste-dif {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  text-align: center;
  background: var(--papel);
}
.ajuste-dif-titulo { font-family: var(--inv-cond); font-size: 24px; font-weight: 700; line-height: 1.15; }
.ajuste-dif-detalle { font-size: 15px; color: var(--tinta); }
.ajuste-dif-vacio .ajuste-dif-titulo { color: var(--gris); font-size: 20px; }
.ajuste-dif-vacio .ajuste-dif-detalle { color: var(--gris); }
.ajuste-dif-error { background: var(--error-suave); }
.ajuste-dif-error .ajuste-dif-titulo { color: var(--error); }
.ajuste-dif-igual { background: var(--azul-suave); }
.ajuste-dif-igual .ajuste-dif-titulo { color: var(--azul-noche); }
.ajuste-dif-mas { background: var(--ok-suave); }
.ajuste-dif-mas .ajuste-dif-titulo { color: var(--ok); }
.ajuste-dif-menos { background: var(--aviso-suave); }
.ajuste-dif-menos .ajuste-dif-titulo { color: var(--aviso); }

.ajuste-motivo { gap: 12px; }
.ajuste-label { margin: 0; font-family: var(--inv-cond); font-size: 20px; font-weight: 700; color: var(--tinta); }
.ajuste-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ajuste-chip { min-height: 52px; padding-left: 18px; padding-right: 18px; }

.ajuste-exito-nums {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
}
.ajuste-exito-antes,
.ajuste-exito-ahora { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ajuste-exito-antes > span,
.ajuste-exito-ahora > span { font-size: 15px; color: var(--gris); }
.ajuste-exito-antes s {
  font-family: var(--inv-cond);
  font-size: 30px;
  font-weight: 700;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}
.ajuste-exito-ahora strong {
  font-family: var(--inv-cond);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}
.ajuste-exito-flecha { color: var(--gris); }
.ajuste-exito-flecha svg { transform: rotate(180deg); }

/* ================================================================ movimientos */

.movimientos-filtros { gap: 20px; }
.movimientos-filtro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.movimientos-label { font-size: 17px; font-weight: 600; color: var(--tinta); }
.movimientos-label .muted { font-weight: 400; font-size: 15px; }

.movimientos-elegido {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--papel);
}
.movimientos-elegido-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--azul-suave);
  color: var(--azul);
}
.movimientos-elegido-info { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.movimientos-elegido-info .muted { font-size: 15px; }

.movimientos-producto {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
}
.movimientos-producto-stock { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.movimientos-producto-label { font-size: 15px; font-weight: 600; color: var(--gris); width: 100%; }
.movimientos-heroe {
  font-family: var(--inv-cond);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 559px) {
  .movimientos-producto > .btn { width: 100%; }
}

.movimientos-resumen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.movimientos-res {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--blanco);
  box-shadow: var(--sombra-1);
  min-width: 0;
}
.movimientos-res-label { font-size: 15px; color: var(--gris); }
.movimientos-res-num {
  font-family: var(--inv-cond);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--azul-noche);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.movimientos-res-entra .movimientos-res-num { color: var(--ok); }
.movimientos-res-sale .movimientos-res-num { color: var(--error); }
@media (max-width: 379px) {
  .movimientos-res { padding: 10px 12px; }
  .movimientos-res-num { font-size: 24px; }
}

.movimientos-limite {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--aviso-suave);
  color: var(--tinta);
}
.movimientos-limite > .icono { color: var(--aviso); }

.movimientos-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.movimientos-prod { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.movimientos-prod-nombre { font-weight: 600; overflow-wrap: anywhere; }
.movimientos-cant { font-family: var(--inv-cond); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mov-c-ref, .mov-c-usuario { color: var(--gris); font-size: 15px; }

.movimientos-tipo { white-space: nowrap; }
.movimientos-tipo-ingreso,
.movimientos-tipo-carga_inicial,
.movimientos-tipo-importacion { background: var(--ok-suave); color: var(--ok); }
.movimientos-tipo-venta { background: var(--azul-suave); color: var(--azul); }
.movimientos-tipo-anulacion { background: var(--aviso-suave); color: var(--aviso); }
.movimientos-tipo-ajuste { background: var(--papel); color: var(--azul-noche); box-shadow: inset 0 0 0 1px var(--linea); }

@media (max-width: 639px) {
  .movimientos-tabla .tabla tr {
    grid-template-areas:
      "tipo     cant"
      "producto cant"
      "ref      quedo"
      "fecha    usuario";
  }
  .movimientos-tabla.con-producto .tabla tr {
    grid-template-areas:
      "tipo  cant"
      "ref   quedo"
      "fecha usuario";
  }
  .movimientos-tabla .mov-c-tipo { grid-area: tipo; }
  .movimientos-tabla .mov-c-producto { grid-area: producto; }
  .movimientos-tabla .mov-c-cant { grid-area: cant; align-self: center; }
  .movimientos-tabla .mov-c-cant .movimientos-cant { font-size: 30px; line-height: 1; }
  .movimientos-tabla .mov-c-quedo { grid-area: quedo; font-size: 15px; color: var(--gris); }
  .movimientos-tabla .mov-c-ref { grid-area: ref; }
  .movimientos-tabla .mov-c-fecha { grid-area: fecha; font-size: 14px; color: var(--gris); padding-top: 6px; border-top: 1px solid var(--linea); }
  .movimientos-tabla .mov-c-usuario { grid-area: usuario; font-size: 14px; text-align: right; padding-top: 6px; border-top: 1px solid var(--linea); }
  .movimientos-tabla .movimientos-fecha { white-space: normal; }
}

/* ================================================================ impresión */
@media print {
  .ingreso, .productos, .importar, .ajuste, .movimientos { display: none; }
}

/* Mientras la lista de resultados está abierta, la ayuda se esconde (antes saltaba debajo de la lista). */
.ingreso-buscar:has(.buscador-resultados:not(:empty)) .ingreso-ayuda { display: none; }