/* =============================================================
   almacen.css — estilos propios de almacen/index.html
   Vivían inline en el <head> (hasta 2026-10-09, revisión holística de
   bandejas, fase "un solo sistema de estilos"). Mismo orden en cascada:
   el <link> va donde estaba el <style>.
   ============================================================= */
/* La bandeja "Hoy" y la cola de "Asignar" usan el kit de bandeja
   (css/bandeja.css, js/ui/bandeja.js) desde 2026-09-07; aquí solo queda
   lo propio de la página. */

/* El loader del kit vive en el flujo (min-height 200px) y empujaba los
   títulos hacia abajo mientras cargaba cada pestaña. Aquí es un overlay
   fijo: aparece y desaparece sin mover una sola línea del layout. */
#loader {
  position: fixed; inset: 0; min-height: 0; z-index: 60;
  pointer-events: none; background: transparent;
}

/* Existencias (E2) — fila expandible + chips de serial con punto de estado */
tr.ex-fila td { font-variant-numeric: tabular-nums; }
tr.ex-fila.is-abierta td { background: var(--surface-sunken); }
tr.ex-expansion > td {
  background: var(--surface-sunken); padding: 10px 14px 12px;
  border-bottom: 2px solid var(--border-default);
}
.ex-bloque { margin-bottom: 8px; }
.ex-bloque:last-of-type { margin-bottom: 0; }
.ex-bloque-t {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--fg-3); margin-bottom: 4px;
}
.ex-serial {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  margin: 0 4px 4px 0; padding: 2px 9px;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-family: var(--mono, monospace); font-size: 11.5px; color: var(--fg-1, inherit);
}
.ex-serial:hover { border-color: var(--accent); color: var(--accent); }
.ex-serial i {
  width: 7px; height: 7px; border-radius: 50%; display: block;
  background: var(--fg-4);
}
/* Un solo color por estado (auditoría UX 2026-09-28, T1): los puntos toman
   el color de texto de los chips .eqpool-chip-* (ceco-ui.css). Antes taller
   era morado aquí y amarillo en el chip, y baja roja aquí y gris allá. Si
   cambia la paleta del chip, cambia este mapa también. */
.ex-serial[data-dot="en_bodega"] i         { background: #15803d; }
.ex-serial[data-dot="asignado_contrato"] i { background: #1d4ed8; }
.ex-serial[data-dot="en_cliente"] i        { background: #4338ca; }
.ex-serial[data-dot="en_taller"] i         { background: #a16207; }
.ex-serial[data-dot="devuelto_revision"] i { background: #c2410c; }
.ex-serial[data-dot="por_clasificar"] i    { background: #9f1239; }
.ex-serial[data-dot="vendido"] i           { background: #0f766e; }
.ex-serial[data-dot="pendiente_cobro"] i   { background: #b91c1c; }
.ex-serial[data-dot="no_retirado"] i       { background: #6d28d9; }
.ex-serial[data-dot="baja"] i              { background: #64748b; }
.ex-serial[data-dot="en_poc"] i            { background: #64748b; }
.ex-mas { font-size: 12px; margin-left: 4px; white-space: nowrap; }
.ex-expansion-pie { margin-top: 8px; font-size: 12.5px; }
/* Existencias en tablet (auditoría UX 2026-09-28, P2 §4.6): a ≤1024 px la
   tabla deja solo lo esencial (Modelo, Bodega, Devueltos, Conteo, Dif.) y
   el resto (Asignado, Cliente, Taller, Otros, Últ. conteo) se lee en la
   fila expandida. En escritorio el resumen no se pinta. */
.ex-sec-resumen { display: none; }
@media (max-width: 1024px) {
  #tab-existencias .ex-sec { display: none; }
  .ex-sec-resumen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-size: 12.5px; color: var(--fg-2); }
  .ex-sec-resumen b { font-variant-numeric: tabular-nums; color: var(--fg-1); }
}

/* Asignar (propuesta "Asignar desde Almacén" 2026-09-03): cola a la
   izquierda, trabajo a la derecha. El encabezado dice qué sacar del
   estante, no quién es el cliente. */
.as-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 860px) { .as-layout { grid-template-columns: 1fr; } }
/* La cola es una .bj-lista del kit; aquí solo su posición pegajosa. */
.as-cola { position: sticky; top: 8px; max-height: calc(100vh - 120px); overflow-y: auto; }
.as-work {
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: var(--sp-4); min-height: 320px; position: relative;
}
.as-work-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.as-work-t { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--fg-1); line-height: 1.15; }
.as-work-s { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; }
.as-picklist { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.as-pl { border: 1px solid var(--border-default); border-radius: var(--radius-sm, 6px); padding: 6px 10px; background: var(--surface-card); }
.as-pl b { font-family: var(--font-display); font-size: 15px; color: var(--fg-1); }
.as-pl small { display: block; color: var(--fg-3); font-size: 11.5px; }
.as-pl.short { border-color: #F59E0B; }
.as-pl.short small { color: #92400E; }
.as-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-3); }
.as-toolbar:empty { display: none; }
.as-foot {
  display: flex; align-items: center; gap: 10px; position: sticky; bottom: 0;
  margin: var(--sp-3) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4));
  padding: 10px var(--sp-4); background: var(--surface-card);
  border-top: 1px solid var(--border-default); border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.as-foot-prog { font-family: var(--font-mono, monospace); color: var(--fg-1); font-variant-numeric: tabular-nums; }
/* Filas del formulario compartido (mismas clases que contratos/seriales) */
.serial-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.serial-row.bloqueado .serial-input { background: var(--surface-sunken); color: var(--fg-3); }
.serial-num { width: 24px; text-align: right; color: var(--fg-3); font-size: 12px; }
.serial-input { height: 36px; flex: 1; min-width: 180px; font-family: var(--font-mono, monospace); }
.serial-input.dup { border-color: #dc2626 !important; background: #fef2f2; }
.serial-input.reemplazo { border-color: #2563eb !important; background: #eff6ff; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.serial-omit { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-3); white-space: nowrap; cursor: pointer; }
.motivo-input { flex-basis: 100%; margin-left: 32px; height: 34px; font-size: 13px; }

/* .badge: kit (ceco-ui.css) */

/* Avanzado — la lista por serial (era inventario/equipos.html; auditoría
   UX 2026-09-28, P2 #14). Estilos de página que viajaron con ella. Los
   chips de estado son .eqpool-chip del kit; nada de paletas propias. */
.eq-sub { font-size:12px; color:var(--fg-3); display:block; }
.eq-buscador { display:flex; align-items:center; gap:12px; margin:0 0 var(--sp-3); }
.eq-buscador .filter-search { max-width:640px; }
.eq-buscador-nota { font-size:12.5px; color:var(--fg-3); }
.eq-filtros-finos {
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-4) var(--sp-3);
  border-bottom:1px solid var(--border-subtle);
}
.eq-seccion-lbl {
  display:block; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--fg-3); margin-bottom:6px;
}
.eq-colas {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:10px; margin-bottom:var(--sp-4);
}
.eq-cola {
  display:flex; flex-direction:column; gap:2px; min-width:0;
  text-align:left; padding:11px 14px; cursor:pointer;
  background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.eq-cola:hover { border-color:var(--accent); }
.eq-cola-n   { font-size:22px; font-weight:700; line-height:1.1; color:var(--fg-2); }
.eq-cola-lbl { font-size:12.5px; font-weight:600; }
.eq-cola-sub { font-size:11px; color:var(--fg-3); }
/* Color por cola = el mismo del chip del estado que representa. */
.eq-cola[data-cola="por_clasificar"]    .eq-cola-n { color:#9f1239; }
.eq-cola[data-cola="devuelto_revision"] .eq-cola-n { color:#c2410c; }
.eq-cola[data-cola="no_retirado"]       .eq-cola-n { color:#6d28d9; }
.eq-cola[data-cola="sin_verificar"]     .eq-cola-n { color:#a16207; }
.eq-cola.is-active[data-cola="por_clasificar"]    { border-color:#9f1239; box-shadow:0 0 0 2px #9f123933; }
.eq-cola.is-active[data-cola="devuelto_revision"] { border-color:#c2410c; box-shadow:0 0 0 2px #c2410c33; }
.eq-cola.is-active[data-cola="no_retirado"]       { border-color:#6d28d9; box-shadow:0 0 0 2px #6d28d933; }
.eq-cola.is-active[data-cola="sin_verificar"]     { border-color:#a16207; box-shadow:0 0 0 2px #a1620733; }
.eq-cola.is-vacia .eq-cola-n { color:var(--fg-3); }
.eq-tabs { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.eq-tab {
  padding:5px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--border-default); background:var(--surface-sunken);
  font-size:13px; font-weight:500; color:var(--fg-2); cursor:pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.eq-tab:hover { border-color:var(--accent); color:var(--accent); }
.eq-tab.is-active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600; }
.eq-filtros-activos {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 14px; border-bottom:1px solid var(--border-default);
  background:#fffbeb; font-size:12.5px;
}
.eq-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 6px 3px 10px; border-radius:var(--radius-pill);
  background:#fef3c7; color:#92400e; border:1px solid #fde68a;
  font-weight:600;
}
.eq-chip button {
  border:none; background:transparent; cursor:pointer; color:inherit;
  font-size:13px; line-height:1; padding:2px 4px; border-radius:50%;
}
.eq-chip button:hover { background:#fde68a; }
.eq-td-sel { width:34px; text-align:center; }
.eq-td-sel input { width:15px; height:15px; cursor:pointer; }
.eq-barra-lote {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 14px; border-bottom:1px solid var(--border-default);
  background:#ECFDF5; color:#065F46; font-size:12.5px;
}
.eq-barra-lote .btn { background:var(--surface-card); border:1px solid #A7F3D0; color:#065F46; }
.eq-barra-lote .btn:hover { background:#D1FAE5; }
#tab-serial table.app-table tbody td { font-size:14px; }
#tab-serial table.app-table tbody tr:nth-child(even) { background:#f1f5f9; }