/* Traspasos y salidas internas (modulos80.js): líneas con talla y color, series y bultos; detalle; documento impreso.
   Todo con colores del tema (claro y oscuro) y pensado para reloj (240 px), celular, tableta y escritorio: nada de anchos fijos, lo tocable mide 44 px o más. */

/* lo que se toca mide 44 px o más (también en escritorio: son pantallas que se usan con el dedo) */
.a80-enc .btn, .a80-series .btn, .a80-toma .btn, .a80-acciones .btn, .a80-filtros .btn, .a80-modal .btn { min-height: 44px; }

/* ---------- filtros de la lista ---------- */
.a80-filtros { align-items: flex-end; }
.a80-filtros .campo { margin: 0; flex: 1 1 140px; min-width: 0; }
.a80-filtros .a80-art { flex: 2 1 220px; }
.a80-filtros .a80-folio { flex: 0 1 110px; }
.a80-filtros .btn { flex: 0 0 auto; }
.a80-filtros input { width: 100%; min-width: 0; min-height: 44px; }
@media (max-width: 760px) { .a80-filtros .btn { flex: 1 1 100%; } .a80-filtros .a80-folio { flex: 1 1 100px; } }
.tabla td.der small { display: block; color: var(--tinta-suave); font-weight: 400; }

/* ---------- líneas del documento (una tarjeta por producto) ---------- */
.a80-lineas { margin-top: 6px; }
.a80-tabla, .a80-tabla tbody, .a80-tabla tr.a80-fila, .a80-tabla tr.a80-fila > td { display: block; width: 100%; padding: 0; border: 0; background: none; }
.a80-linea { display: grid; gap: 10px; padding: 12px; margin-top: 10px; border: 1px solid var(--regla); border-left-width: 5px; border-radius: 10px; background: var(--blanco); min-width: 0; }
.a80-linea.ok { border-left-color: var(--hoja); }
.a80-linea.aviso { border-left-color: var(--ambar); }
.a80-linea.falta { border-left-color: var(--jitomate); }
.a80-enc { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; min-width: 0; }
.a80-enc .btn { flex: none; }
.a80-nom { min-width: 0; }
.a80-nom strong { display: block; overflow-wrap: anywhere; }
.a80-nom small { display: block; color: var(--tinta-suave); overflow-wrap: anywhere; }
.a80-ctl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; align-items: end; min-width: 0; }
.a80-ctl .campo, .a80-var { margin: 0; min-width: 0; }
.a80-ctl input[type=number], .a80-var select { width: 100%; min-width: 0; min-height: 44px; }
.a80-estado { margin: 0; font-size: .92rem; font-weight: 650; overflow-wrap: anywhere; }
.a80-estado.ok { color: var(--hoja); }
.a80-estado.aviso { color: var(--ambar); }
.a80-estado.falta { color: var(--jitomate); }
.a80-modo { display: flex; border: 1px solid var(--regla); border-radius: 10px; overflow: hidden; min-height: 44px; min-width: 0; }
.a80-modo button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 10px; border: 0; background: transparent; cursor: pointer; font-weight: 650; overflow-wrap: anywhere; }
.a80-modo button + button { border-left: 1px solid var(--regla); }
.a80-modo button[aria-pressed=true] { background: var(--activo-bg); color: var(--activo-tx); }
.a80-eq { font-weight: 700; align-self: center; min-width: 0; overflow-wrap: anywhere; }
.a80-series { display: grid; gap: 8px; grid-column: 1 / -1; min-width: 0; }
.a80-series .btn { justify-self: start; }
.a80-cuenta { font-weight: 650; }
.a80-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.a80-chips .chip { white-space: normal; overflow-wrap: anywhere; border-radius: 12px; }
.a80-et { font-size: .78rem; color: var(--tinta-suave); font-weight: 600; }

/* ---------- selector de series ---------- */
.modal-confirma .modal-salida-caja.a80-modal { text-align: left; padding: 18px; }
.a80-modal h3 { margin: 0 0 6px; overflow-wrap: anywhere; }
.a80-suave { color: var(--tinta-suave); font-size: .92rem; margin: 0 0 10px; }
.a80-modal .campo { margin: 0 0 10px; }
.a80-modal .campo input { width: 100%; min-height: 44px; }
.a80-msg { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--jitomate-fondo); color: var(--jitomate); font-weight: 600; overflow-wrap: anywhere; }
.a80-toma { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.a80-toma .campo { flex: 1 1 110px; margin: 0; min-width: 0; }
.a80-toma .btn { flex: 1 1 auto; }
.a80-s-lista { max-height: min(38vh, 300px); overflow-y: auto; border: 1px solid var(--regla); border-radius: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); background: var(--papel); }
.a80-s-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-bottom: 1px solid var(--regla); cursor: pointer; overflow-wrap: anywhere; min-width: 0; }
.a80-s-item span { min-width: 0; }
.a80-modal .modal-salida-botones { margin-top: 12px; }

/* ---------- detalle del documento ---------- */
.a80-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.a80-meta > div { min-width: 0; }
.a80-meta b { display: block; overflow-wrap: anywhere; }
.a80-meta small { display: block; color: var(--tinta-suave); overflow-wrap: anywhere; }
.a80-detalle .a80-chips { margin: 6px 0; }
.a80-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.a80-acciones .btn { flex: 1 1 140px; min-height: 44px; }
.a80-ayuda { margin-top: 10px; }
.a80-opcion { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--regla); border-radius: 10px; background: var(--blanco); margin-bottom: 14px; cursor: pointer; min-height: 44px; }
.a80-opcion span { min-width: 0; }
.a80-opcion b { display: block; }
.a80-opcion small { display: block; color: var(--tinta-suave); font-weight: 400; overflow-wrap: anywhere; }
.a80-opcion input { margin-top: 2px; }

/* ---------- el documento impreso (traspaso o salida) ---------- */
.a80-hoja { color: #000; font-size: 11pt; }
.a80-hoja th, .a80-hoja td { color: #000 !important; }                 /* en papel todo va en negro, aunque la pantalla esté en tema oscuro */
.a80-hoja th { border-bottom: 2px solid #000 !important; background: none !important; }
.a80-hechos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 20px; margin: 10px 0; }
.a80-hechos > div { display: flex; gap: 8px; align-items: flex-start; }
.a80-hechos b { min-width: 70px; }
.a80-hechos small { display: block; color: #444; }
.a80-hoja .a80-doc-tabla { width: 100%; border-collapse: collapse; }
.a80-obs { margin: 8px 0; }
.a80-hoja .a80-doc-tabla td small { display: block; color: #333 !important; font-size: 9pt; }
.a80-total { text-align: right; margin: 10px 0; }
.a80-anulado { text-align: center; font-weight: 700; font-size: 16pt; color: #a00; border: 3px solid #a00; padding: 4px; margin: 8px 0; }
.a80-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 60px; break-inside: avoid; }
.a80-firmas > div { text-align: center; }
.a80-firmas span { display: block; border-top: 1px solid #000; margin-bottom: 4px; }
.a80-firmas small { display: block; color: #333; }