/* ============================================================================
 * Autor: Marcelo Alejandro Zúñiga Reátegui
 * Proyecto: LILBRU
 * Módulo: pantalla «Recibir mercadería» (la primera sobre la base nueva)
 * Fecha/Hora: 2026-10-07
 * Versión: 1.0.0
 * Aviso Legal: Código de propiedad exclusiva. Prohibida su reproducción o distribución sin autorización.
 * ============================================================================ */
/* Todo sale de las variables del tema: ningún color fijo, así se ve bien en los
   temas claros y oscuros. Todo lo que se toca mide 44 px o más (celular).
   Las clases propias llevan el prefijo rec-: styles.css ya usa .rejilla,
   .campo, .volver, .num y otras con otro sentido (choque visto el 7-oct). */

.rec-volver {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px 8px 6px;
  margin: -6px 0 6px -6px; border-radius: 8px; color: var(--marca); font-weight: 600; font-size: 15px;
}
.rec-volver:hover { background: var(--marca-claro); text-decoration: none; }
.rec-volver:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.rec-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 10px; }
.rec-campo-ancho { grid-column: 1 / -1; }
.rec-campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.rec-campo .suave { font-weight: 400; }
.rec-campo input, .rec-campo select { min-height: 44px; width: 100%; box-sizing: border-box; font-weight: 400; }
.rec-campo select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%), linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.rec-eco { min-height: 18px; font-size: 13px; font-weight: 400; color: var(--tinta-suave); }
.rec-eco.rec-mal { color: var(--rojo); }

/* Un segundo título dentro de la tarjeta NO es banda (.tarjeta > h2 tira hacia arriba y tapa lo anterior): es un subtítulo simple. */
.rec-titulo-bloque { margin: 22px 0 6px; font-size: 16px; font-weight: 700; color: var(--tinta); }

/* El buscador: una lista propia, no un datalist nativo (en oscuro se ve mal y no deja mostrar el SKU). */
.rec-buscador { position: relative; }
.rec-resultados {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 6px; list-style: none;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  max-height: 320px; overflow: auto;
}
.rec-resultados li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px;
  border-radius: 8px; cursor: pointer; font-size: 15px;
}
.rec-resultados li:hover, .rec-resultados li[aria-selected="true"] { background: var(--marca-claro); }
.rec-resultados li .rec-sku { color: var(--tinta-suave); font-size: 13px; white-space: nowrap; }
.rec-resultados li.rec-vacio { color: var(--tinta-suave); cursor: default; }
.rec-elegido {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--marca-borde); background: var(--marca-claro); border-radius: 8px; font-weight: 400;
}
.rec-elegido button { min-height: 36px; padding: 6px 12px; }

/* Los tipos de documento como botones, no como radios sueltos: cada uno mide para el dedo. */
.rec-segmentos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rec-segmento { position: relative; display: inline-flex; }
.rec-segmento input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.rec-segmento span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--tinta); font-size: 15px; font-weight: 600; cursor: pointer;
}
.rec-segmento input:checked + span { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); }
.rec-segmento input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }

.rec-nota-reserva { margin: 12px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--alerta-fondo); color: var(--alerta); font-size: 14px; line-height: 1.45; }

.rec-acciones { display: flex; justify-content: flex-end; margin-top: 18px; }
.rec-principal { min-height: 48px; min-width: 200px; padding: 10px 22px; font-size: 16px; }
.rec-principal:focus-visible, .secundario:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.rec-lista-empresas { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rec-lista-empresas button { min-height: 48px; text-align: left; font-size: 15px; }

.rec-tabla-envoltura { overflow-x: auto; margin-top: 8px; }
.rec-tabla-stock { width: 100%; border-collapse: collapse; font-size: 14px; }
.rec-tabla-stock th, .rec-tabla-stock td { padding: 10px 10px; border-bottom: 1px solid var(--borde); text-align: left; white-space: nowrap; }
.rec-tabla-stock th { color: var(--tinta-suave); font-weight: 600; font-size: 13px; }
.rec-tabla-stock .rec-num { text-align: right; font-variant-numeric: tabular-nums; }
.rec-tabla-stock td:first-child { white-space: normal; min-width: 160px; }
.rec-tabla-stock tr.rec-recien td { background: var(--marca-claro); }
.rec-col-plata[hidden] { display: none; }

@media (max-width: 640px) {
  .rec-rejilla { grid-template-columns: 1fr; }
  .rec-acciones { justify-content: stretch; }
  .rec-principal { width: 100%; }
  .rec-segmento, .rec-segmento span { flex: 1 1 auto; justify-content: center; }
}
.rec-ir { margin: 12px 0 0; }