/* Almacenes (modulos49.js y modulos82.js): lista con ficha, duplicar y borrar, y la ficha del almacén. Del reloj (240 px) al escritorio. */

.alm82-caja { overflow-x: auto; max-width: 100%; }
.alm82-tabla { width: 100%; }
.alm82-tabla .nombre small { margin-top: 2px; }
.alm82-tabla .chip { vertical-align: middle; margin-left: 4px; }
.alm82-tabla .nombre .chip:first-of-type { margin-left: 8px; }
.alm82-cod { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.alm82-mio { background: var(--acento-fondo, var(--ambar-fondo)); color: var(--acento, var(--ambar)); }
.alm82-acc { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.alm82-acc .btn { min-height: 40px; }
.alm82-acc .btn[aria-pressed="true"] { border-color: var(--hoja); color: var(--hoja); }

/* ficha del almacén y duplicar */
.alm82-form textarea { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; font: inherit; padding: 10px 12px; border: 1px solid var(--regla); border-radius: 10px; background: var(--blanco); color: inherit; }
.alm82-form input, .alm82-form select { min-height: 44px; }
.alm82-sub { margin: 18px 0 8px; font-size: 1rem; }
.alm82-pie { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 16px; }
.alm82-pie .btn { min-height: 44px; }

/* en celular y reloj, cada almacén es una tarjeta (no hay barra de desplazamiento horizontal) */
@media (max-width: 760px) {
  .alm82-caja { overflow-x: visible; }
  .alm82-tabla, .alm82-tabla tbody, .alm82-tabla tr, .alm82-tabla td { display: block; width: 100%; box-sizing: border-box; }
  .alm82-tabla thead { display: none; }
  .alm82-tabla tr.alm82-fila { border: 1px solid var(--regla); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; background: var(--blanco); }
  .alm82-tabla td { border: 0; padding: 4px 0; text-align: left; }
  .alm82-tabla td.der { text-align: left; }
  .alm82-tabla td[data-et]:not(.nombre) { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .alm82-tabla td[data-et]:not(.nombre)::before { content: attr(data-et); color: var(--tinta-suave); font-size: .85rem; font-weight: 600; flex: none; }
  .alm82-tabla td.nombre { font-size: 1.05rem; padding-bottom: 6px; overflow-wrap: anywhere; }
  .alm82-acc { justify-content: stretch; padding-top: 8px; }
  .alm82-acc .btn { flex: 1 1 130px; min-height: 44px; }
  .alm82-pie .btn { flex: 1 1 120px; }
}
@media (max-width: 300px) {
  .alm82-acc .btn { flex-basis: 100%; }
  .alm82-tabla td[data-et]:not(.nombre) { flex-wrap: wrap; }
}