/* Inventario, rediseñado (18/10/2026, segunda vuelta). Ver inventario-nuevo.js.
   La tabla manda: píldoras y una barra de controles encima, estadísticas
   plegadas. Blanco sobre el gris de la web, bordes #E5E7EB, esquinas rectas
   como el resto (las píldoras y las etiquetas de estado, redondas: son
   fichas que se tocan o se leen, no cajas). */
#page-inventario {
  --iv-borde: #E5E7EB; --iv-linea: #F3F4F6; --iv-fondo: #F8FAFC; --iv-tinta: #0F172A; --iv-tinta-2: #475569; --iv-suave: #64748B;
  --iv-d: #16A34A; --iv-u: #2563EB; --iv-m: #DC2626;
  --iv-d-bg: #F0FDF4; --iv-u-bg: #EFF6FF; --iv-m-bg: #FEF2F2;
  --iv-d-tx: #15803D; --iv-u-tx: #1D4ED8; --iv-m-tx: #B91C1C;
}
:root[data-tema="oscuro"] #page-inventario {
  --iv-borde: var(--border); --iv-linea: rgba(255,255,255,.06); --iv-fondo: rgba(255,255,255,.03); --iv-tinta: #F4F5F7; --iv-tinta-2: #A7B0BE; --iv-suave: #8B93A1;
  --iv-d: #4ADE80; --iv-u: #60A5FA; --iv-m: #F87171;
  --iv-d-bg: rgba(74,222,128,.12); --iv-u-bg: rgba(96,165,250,.12); --iv-m-bg: rgba(248,113,113,.12);
  --iv-d-tx: #86EFAC; --iv-u-tx: #93C5FD; --iv-m-tx: #FCA5A5;
}

.invn { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }

/* ── Píldoras de departamento + resumen de una línea ─────────────────── */
.invn-fila-pild { display: flex; align-items: center; gap: 16px; min-width: 0; }
.invn-pilds { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; padding: 2px 0; }
.invn-pilds::-webkit-scrollbar { display: none; }
.invn-pild {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; height: 32px; padding: 0 12px;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--iv-tinta-2); white-space: nowrap;
  background: var(--surface); border: 1px solid var(--iv-borde); border-radius: 999px !important; cursor: pointer; transition: border-color .12s, color .12s;
}
.invn-pild span { font-size: 12px; color: var(--iv-suave); font-variant-numeric: tabular-nums; }
.invn-pild:hover { color: var(--iv-tinta); border-color: #CBD5E1; }
.invn-pild.activa { color: #fff; background: var(--iv-tinta); border-color: var(--iv-tinta); }
.invn-pild.activa span { color: rgba(255,255,255,.7); }
:root[data-tema="oscuro"] .invn-pild.activa { color: #0E0E10; }
:root[data-tema="oscuro"] .invn-pild.activa span { color: rgba(14,14,16,.6); }
.invn-pild:focus-visible, .invn-resumen:focus-visible { outline: 2px solid var(--iv-tinta); outline-offset: 2px; }
.invn-resumen { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 0; font: inherit; font-size: 12.5px; color: var(--iv-suave); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.invn-resumen .invn-barra { width: 90px; }
.invn-resumen b { color: var(--iv-tinta); font-weight: 650; }
.invn-resumen:hover span { color: var(--iv-tinta); text-decoration: underline; }

.invn-barra { display: flex; width: 100%; height: 5px; overflow: hidden; background: var(--iv-linea); }
.invn-barra i { display: block; height: 100%; }
.invn-barra .d, .invn i.d { background: var(--iv-d); }
.invn-barra .u, .invn i.u { background: var(--iv-u); }
.invn-barra .m, .invn i.m { background: var(--iv-m); }
.invn-leyenda i { display: inline-block; width: 7px; height: 7px; border-radius: 999px !important; }

/* ── Estadísticas plegadas ───────────────────────────────────────────── */
.invn-paneles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 10px; animation: invnAbre .18s ease; }
@keyframes invnAbre { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .invn-paneles { animation: none; } }
.invn-panel { min-width: 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--iv-borde); }
.invn-panel h3 { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--iv-suave); }
.invn-grande { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.invn-grande b { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--iv-tinta); font-variant-numeric: tabular-nums; }
.invn-grande b small { font-size: 18px; font-weight: 600; margin-left: 1px; }
.invn-grande span { font-size: 12.5px; color: var(--iv-tinta-2); max-width: 140px; line-height: 1.35; }
.invn-estado .invn-barra { height: 8px; }
.invn-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--iv-tinta-2); }
.invn-leyenda li { display: flex; align-items: center; gap: 6px; }
.invn-leyenda b { color: var(--iv-tinta); font-weight: 650; font-variant-numeric: tabular-nums; }
.invn-nota { margin: 10px 0 0; font-size: 12px; color: var(--iv-suave); }
.invn-vacio { margin: 6px 0 0; font-size: 13px; color: var(--iv-suave); }
.invn-top, .invn-ult { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.invn-top button, .invn-ult button { display: grid; align-items: center; width: 100%; padding: 6px 0; font: inherit; text-align: left; color: var(--iv-tinta); background: none; border: 0; border-top: 1px solid var(--iv-linea); cursor: pointer; }
.invn-top li:first-child button, .invn-ult li:first-child button { border-top: 0; }
.invn-top button:hover .invn-top-nom, .invn-ult button:hover .invn-ult-nom { text-decoration: underline; }
.invn-top button { grid-template-columns: minmax(0, 1fr) 70px 72px; gap: 10px; }
.invn-top-nom, .invn-ult-nom { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invn-top-barra { height: 4px; background: var(--iv-linea); }
.invn-top-barra i { display: block; height: 100%; background: #94A3B8; }
.invn-top li:first-child .invn-top-barra i { background: var(--iv-tinta); }
.invn-top-n, .invn-ult-f { font-size: 12px; color: var(--iv-suave); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invn-ult button { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; }
.invn-ult-ico { width: 28px; height: 28px; display: grid; place-items: center; color: var(--iv-tinta-2); background: var(--iv-fondo); border: 1px solid var(--iv-borde); }
.invn-ult-nom small { display: block; font-size: 11px; color: var(--iv-suave); }

/* ── Una sola barra de controles ─────────────────────────────────────── */
#page-inventario .filters-bar.invn-controles {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px !important; padding: 10px !important;
  background: var(--surface) !important; border: 1px solid var(--iv-borde) !important; box-shadow: none !important;
}
.invn-busca { position: relative; display: flex; align-items: center; flex: 1 1 320px; min-width: 240px; height: 40px; padding: 0 12px; gap: 9px; color: var(--iv-suave); background: var(--iv-fondo); border: 1px solid var(--iv-borde); cursor: text; }
.invn-busca:focus-within { background: var(--surface); border-color: var(--iv-suave); box-shadow: 0 0 0 3px rgba(15,23,42,.06); }
#page-inventario .invn-busca #inv-search { flex: 1; min-width: 0; height: 100%; padding: 0 !important; font-size: 14px !important; color: var(--iv-tinta); background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none; }
.invn-kbd { padding: 2px 6px; font: 500 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--iv-suave); background: var(--surface); border: 1px solid var(--iv-borde); }
#page-inventario .invn-controles .filter-select, #page-inventario .invn-controles .selector-boton { height: 40px; }
#page-inventario .invn-controles .btn { height: 40px; }
#page-inventario .invn-controles .invn-anadir { margin-left: auto; }

/* ── La tabla ────────────────────────────────────────────────────────── */
#page-inventario #inv-vista-lista { background: var(--surface); border: 1px solid var(--iv-borde); }
#page-inventario #inv-vista-lista thead th { padding-top: 11px !important; padding-bottom: 11px !important; font-size: 11.5px !important; background: var(--iv-fondo) !important; border-bottom: 1px solid var(--iv-borde) !important; }
#tbody-inventario tr.inv-fila > td:first-child,
#tbody-inventario tr[class*="banda-"] > td:first-child { border-left: 0 !important; box-shadow: none !important; }
#tbody-inventario tr > td { padding-top: 12px !important; padding-bottom: 12px !important; vertical-align: middle; border-bottom: 1px solid var(--iv-linea) !important; }
#tbody-inventario tr.inv-fila:hover > td { background: var(--iv-fondo) !important; }
#page-inventario .invn-oculta, #tbody-inventario td.inv-c-alq { display: none !important; }
#page-inventario .invn-th-foto, #tbody-inventario td.invn-c-foto { width: 46px; padding-left: 0 !important; padding-right: 0 !important; }
.invn-ico { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; color: var(--iv-tinta-2); background: var(--iv-fondo); border: 1px solid var(--iv-borde); }
.invn-ico img { width: 100%; height: 100%; object-fit: cover; }
#page-inventario td.inv-c-nom { min-width: 300px; font-weight: 500 !important; color: var(--iv-tinta); }
#page-inventario td.inv-c-cod { width: 70px; }

/* Estado: etiqueta suave. Verde en casa, azul en uso, rojo en el taller. */
#tbody-inventario .inv-c-estado .badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  border: 0 !important; box-shadow: none !important; border-radius: 999px !important; white-space: nowrap;
  color: var(--iv-tinta-2) !important; background: var(--iv-linea) !important;
}
#tbody-inventario .inv-c-estado .badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px !important; background: currentColor; }
#tbody-inventario .inv-c-estado .badge-disponible { color: var(--iv-d-tx) !important; background: var(--iv-d-bg) !important; }
#tbody-inventario .inv-c-estado .badge-en_uso { color: var(--iv-u-tx) !important; background: var(--iv-u-bg) !important; }
#tbody-inventario .inv-c-estado .badge-mantenimiento { color: var(--iv-m-tx) !important; background: var(--iv-m-bg) !important; }

#tbody-inventario .inv-c-cat .cat-chip { padding: 0 !important; font-size: 13px !important; color: var(--iv-tinta-2) !important; background: none !important; border: 0 !important; }
#tbody-inventario .inv-c-cat .cat-chip:hover { color: var(--iv-tinta) !important; text-decoration: underline; }

/* El «⋯» de las acciones. */
#page-inventario .invn-th-acc, #tbody-inventario td.actions { width: 48px; text-align: right; }
.invn-mas { width: 32px; height: 32px; display: inline-grid; place-items: center; color: var(--iv-suave); background: none; border: 1px solid transparent; cursor: pointer; }
.invn-mas:hover, .invn-mas:focus-visible { color: var(--iv-tinta); background: var(--surface); border-color: var(--iv-borde); }
#tbody-inventario .inv-tabla-mas td { padding: 14px !important; text-align: center; color: var(--iv-suave); }

@media (max-width: 1100px) { .invn-paneles { grid-template-columns: 1fr 1fr; } .invn-estado { grid-column: 1 / -1; } .invn-resumen span { display: none; } }
@media (max-width: 700px) {
  .invn-paneles { grid-template-columns: 1fr; }
  .invn-resumen { display: none; }
  .invn-busca { flex-basis: 100%; }
  #page-inventario .invn-controles .invn-anadir { margin-left: 0; }
}