/* ============================================================
   MÓDULO INVENTARIO — CECATECIS
   Paleta institucional: --primary #002D62, --accent #FFC300
   (los tokens viven en style.css; aquí se usan con var(...) y un
   fallback literal porque este archivo se sirve solo, sin garantía
   de orden de carga).

   REDISEÑO DE LA VISTA PRINCIPAL (2026-09-15)
   ------------------------------------------------------------
   La versión anterior calcaba el prototipo de AI Studio: barra azul
   de pills + franja de KPIs + hint + barra de filtros + píldoras de
   categoría, o sea 8 bandas apiladas antes del primer dato -- en un
   monitor de 1080p se veían 2,5 de las 70 familias. El rediseño deja
   3 zonas (cabecera / pestañas / barra de control) y le da el resto
   de la pantalla a la tabla:

   - La barra azul de pills desaparece: pesaba como un segundo header
     bajo la navbar (también azul) y mezclaba navegación con acciones.
     Ahora son pestañas claras con subrayado dorado, el mismo patrón
     que .modal-tab-btn en style.css.
   - Los totales globales pasan a ser una línea de contexto junto al
     título; los contadores que siempre valen 0 (mantenimiento, baja,
     préstamos) solo se pintan cuando hay algo que contar.
   - La tabla baja de 8 columnas a 4 + chevron: N° y la descripción
     truncada salen (60 de 70 descripciones se cortaban a mitad de
     palabra), Total/Gráfico/Estado se funden en una sola celda, y el
     botón "Ver Ficha" se elimina porque la fila entera ya es el
     destino (ahora también por teclado).

   La ficha de cada familia sigue siendo una PÁGINA COMPLETA dentro
   del módulo, no un recuadro flotante (pedido explícito 2026-09-14);
   ese bloque no se tocó en este rediseño.

   Sin reglas [data-theme="dark"] a propósito: el usuario pidió
   mantener Inventario solo en tema claro (2026-09-15).
   ============================================================ */

/* CORRECCIÓN (auditoría de responsividad 2026-09-16, parte 2): a diferencia
   de Encuestas/Libro Comercial (donde el fondo degradado vive en un wrapper
   a 100% de ancho y solo el contenido interno está acotado), este wrapper
   mezclaba max-width y fondo en el MISMO elemento -- fuera de ese ancho no
   había degradado, solo blanco. Se separa en dos capas, mismo patrón que las
   otras dos vistas: este wrapper vuelve a ser 100% de ancho (solo fondo +
   padding), y el contenido real (los #inv-page-*, ver inventario.html) queda
   en un .inv-content-container nuevo, aparte, con el max-width. Verificado
   que ningún selector de inventario.js asume que los #inv-page-* son hijos
   DIRECTOS de este wrapper (solo se referencian por id, nunca por
   `.inv-view-wrapper > ...` ni `.closest('.inv-view-wrapper')`). */
.inv-view-wrapper {
    padding: 14px clamp(12px, 3vw, 28px) 60px;
    /* Mismo degradado azul claro que .encuesta-view-wrapper / .lc-view-wrapper
       -- sin esto la vista quedaba sobre el gris plano de --body-bg y se veía
       "muy blanca" comparada con el resto del sistema (pedido explícito del
       usuario 2026-09-15). */
    background: linear-gradient(180deg, #f4f8fd 0%, #edf4fc 35%, #e2efff 70%, #d9e9fd 100%);
    min-height: calc(100vh - 58px);
}

.inv-content-container {
    max-width: var(--content-max-width-table, 1400px);
    margin: 0 auto;
    width: 100%;
}

/* Texto solo para lectores de pantalla (labels de inputs, celda del
   chevron): la vista no debe perder semántica por ser compacta. */
.inv-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------- Compartido con las demás pestañas del módulo ----------------
   Estas clases NACIERON en el directorio pero hoy las usan otras
   pestañas (Mantenimiento, Finanzas, Etiquetas, Equipos TI), que este
   rediseño no toca -- por eso sobreviven tal cual aunque el directorio
   ya no las use. */
.inv-kpi-strip {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 10px;
    padding: 10px 16px; margin-bottom: 16px;
    font-size: 0.82em; color: #475569; font-weight: 700;
}
.inv-kpi-strip strong { color: #0f172a; font-size: 1.05em; }
.inv-kpi-strip span { display: inline-flex; align-items: center; gap: 5px; }
.inv-kpi-strip-op { color: #16a34a; } .inv-kpi-strip-op strong { color: #16a34a; }
.inv-kpi-strip-mant { color: #ca8a04; } .inv-kpi-strip-mant strong { color: #ca8a04; }
.inv-kpi-strip-prest { color: #2563eb; } .inv-kpi-strip-prest strong { color: #2563eb; }
.inv-kpi-strip-noop { color: #dc2626; } .inv-kpi-strip-noop strong { color: #dc2626; }

.inv-catalogo-hint {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.82em; color: #475569; margin: 0 0 12px;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
    padding: 8px 12px;
}
.inv-catalogo-hint i { color: #002D62; flex-shrink: 0; }
.inv-catalogo-hint strong { color: #002D62; }

/* Chips de filtro (hoy solo los usa la pestaña Mantenimiento) */
.inv-quick-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-chip {
    border: 1.5px solid #cbd5e1; background: #ffffff; color: #475569;
    font-size: 0.78em; font-weight: 800; padding: 8px 14px;
    border-radius: 999px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap;
}
.inv-chip:hover { border-color: #94a3b8; }
.inv-chip.active { background: #002D62; border-color: #002D62; color: #ffffff; }
.inv-chip-falla.active { background: #dc2626; border-color: #dc2626; }
.inv-chip-full.active { background: #16a34a; border-color: #16a34a; }

/* Numeración de filas de la tabla de unidades de la ficha */
.inv-xl-num { color: #94a3b8; font-weight: 800; }

/* ---------------- Botonera base del módulo ---------------- */
.inv-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid transparent; border-radius: 9px;
    font-size: 0.8rem; font-weight: 800; padding: 8px 13px;
    cursor: pointer; white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.inv-btn-primary { background: var(--accent, #FFC300); color: var(--primary, #002D62); }
.inv-btn-primary:hover { background: #eab308; }
.inv-btn-ghost { background: #ffffff; border-color: #cbd5e1; color: #475569; }
.inv-btn-ghost:hover { border-color: var(--primary, #002D62); color: var(--primary, #002D62); }
.inv-btn-icon { background: #ffffff; border-color: #cbd5e1; color: #475569; padding: 9px; }
.inv-btn-icon:hover { border-color: var(--primary, #002D62); color: var(--primary, #002D62); }
.inv-btn:focus-visible,
.inv-tab:focus-visible,
.inv-segment:focus-visible,
.inv-select:focus-visible,
.inv-row:focus-visible {
    outline: 2px solid var(--primary, #002D62);
    outline-offset: 2px;
}

/* ---------------- Hero institucional (mismo lenguaje visual que
   .encuesta-hero-banner / .lc-hero-banner: degradado navy + borde/badge
   dorado) -- sumado 2026-09-15 a pedido del usuario para que Inventario
   deje de verse "distinto a las demás áreas del sistema". ---------------- */
.inv-hero-banner {
    display: flex; flex-direction: column; gap: 14px;
    background: linear-gradient(135deg, #002D62 0%, #003b82 55%, #001a38 100%);
    border: 1px solid #001a38;
    border-top: 4px solid #FFC300;
    border-radius: 18px;
    padding: 20px 26px;
    margin-bottom: 14px;
    box-shadow: 0 16px 34px rgba(0, 20, 48, 0.28);
    position: relative;
    overflow: hidden;
}
.inv-hero-banner::after {
    content: '';
    position: absolute; bottom: -90px; left: 12%;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.inv-hero-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; position: relative; z-index: 2;
}
.inv-hero-left { flex: 1.2; max-width: 800px; min-width: 0; }
.inv-hero-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: #FFC300; color: #002D62;
    border: 1px solid #e6b000;
    font-size: 0.7rem; font-weight: 900; letter-spacing: 0.6px;
    padding: 4px 11px; border-radius: 12px;
    box-shadow: 0 2px 8px rgba(255, 195, 0, 0.35);
    margin-bottom: 8px; white-space: nowrap;
}
.inv-hero-title {
    margin: 0 0 6px; font-size: 1.5rem; font-weight: 900;
    color: #ffffff; letter-spacing: -0.3px; line-height: 1.2;
}
/* Línea de contexto: reemplaza a la franja de KPIs que ocupaba una banda
   entera. Los números son de UNIDADES físicas; los segmentos de la barra
   de control cuentan FAMILIAS -- por eso cada uno lleva su sustantivo y
   no se pisan. Colores claros porque ahora vive sobre fondo navy. */
.inv-hero-resumen {
    margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); font-weight: 600;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
}
.inv-hero-resumen strong { color: #ffffff; font-weight: 900; }
.inv-res-sep { color: rgba(255, 255, 255, 0.3); }
.inv-res-op strong { color: #4ade80; }
.inv-res-noop strong { color: #f87171; }
.inv-res-mant strong { color: #fbbf24; }
.inv-res-prest strong { color: #7dd3fc; }
.inv-res-baja strong { color: rgba(255, 255, 255, 0.75); }
.inv-hero-right {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative; z-index: 2;
}
.inv-hero-icon-pill {
    width: 58px; height: 58px; border-radius: 16px;
    background: rgba(255, 195, 0, 0.14); color: #FFC300;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #FFC300;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.inv-hero-actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.15);
    position: relative; z-index: 2;
}
/* Botón "fantasma" propio del hero: translúcido sobre navy, distinto del
   .inv-btn-icon original (pensado para fondo blanco). */
.inv-btn-hero-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.10); border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #ffffff; border-radius: 9px; font-size: 0.8rem; font-weight: 800;
    padding: 8px 13px; cursor: pointer; white-space: nowrap; transition: all 0.15s ease;
}
.inv-btn-hero-ghost:hover { background: #FFC300; border-color: #FFC300; color: #002D62; }

/* ---------------- Pestañas del módulo ---------------- */
.inv-tabs {
    display: flex; align-items: stretch; gap: 2px;
    border-bottom: 2px solid #e2e8f0; margin-bottom: 12px;
    overflow-x: auto; scrollbar-width: none;
}
.inv-tabs::-webkit-scrollbar { display: none; }
.inv-tab {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none; border-bottom: 3px solid transparent;
    margin-bottom: -2px; color: #64748b;
    font-size: 0.8rem; font-weight: 800; padding: 10px 14px;
    cursor: pointer; white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.inv-tab:hover { color: var(--primary, #002D62); background: #f8fafc; }
.inv-tab.active { color: var(--primary, #002D62); border-bottom-color: var(--accent, #FFC300); }
.inv-tabs-divider { width: 1px; background: #e2e8f0; margin: 8px; flex-shrink: 0; }

.inv-tab-panel.hidden { display: none; }

/* ---------------- Barra de control (búsqueda + filtros + estado) ----------------
   Sticky sobre el scroll del body (nadie más declara overflow en la
   cadena de ancestros, ver el comentario del wrapper en encuestas.css).
   Su alto real lo mide el JS y lo publica como --inv-controls-h, que es
   lo que usa el thead para quedar pegado justo debajo sin números
   mágicos que se desfasen al envolverse los filtros. */
.inv-controls {
    position: sticky; top: 0; z-index: 30;
    /* Tono sólido tomado del extremo superior del degradado del wrapper
       (ver .inv-view-wrapper): un sticky no puede llevar el gradiente
       completo sin generar una costura visible al hacer scroll, así que
       usa el color con el que ese degradado empieza. */
    background: #f4f8fd;
    padding: 8px 0 10px;
    display: flex; flex-direction: column; gap: 9px;
}
.inv-controls-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inv-search {
    flex: 1 1 260px; min-width: 200px;
    display: flex; align-items: center; gap: 8px;
    background: #ffffff; border: 1.5px solid #cbd5e1;
    border-radius: 9px; padding: 8px 11px; color: #94a3b8;
}
.inv-search:focus-within { border-color: var(--primary, #002D62); }
.inv-search input {
    border: none; outline: none; flex: 1; min-width: 0;
    font-size: 0.84rem; color: #0f172a; background: transparent; font-family: inherit;
}
.inv-search-clear {
    border: none; background: #f1f5f9; color: #64748b;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.inv-search-clear:hover { background: #e2e8f0; color: #0f172a; }
.inv-select {
    border: 1.5px solid #cbd5e1; border-radius: 9px;
    padding: 8px 10px; font-size: 0.8rem; color: #0f172a;
    background: #ffffff; font-weight: 700; cursor: pointer;
    max-width: 210px; font-family: inherit;
}
.inv-select:hover { border-color: #94a3b8; }

.inv-controls-estado {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
/* Segmentos: fusionan los antiguos chips rápidos con la mitad
   accionable de la franja de KPIs (antes el mismo dato salía dos
   veces, una con número y otra sin él). */
.inv-segments { display: inline-flex; background: #e9eef5; border-radius: 9px; padding: 3px; gap: 2px; }
.inv-segment {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; background: transparent; color: #475569;
    font-size: 0.76rem; font-weight: 800; padding: 6px 12px;
    border-radius: 7px; cursor: pointer; white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.inv-segment b { font-weight: 900; color: #0f172a; }
.inv-segment:hover { background: rgba(255, 255, 255, 0.7); }
.inv-segment.active { background: #ffffff; color: var(--primary, #002D62); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.inv-segment.active b { color: var(--primary, #002D62); }
.inv-segment-falla.active { color: #b91c1c; }
.inv-segment-falla.active b { color: #b91c1c; }
.inv-segment-full.active { color: #15803d; }
.inv-segment-full.active b { color: #15803d; }

.inv-controls-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-results-count { font-size: 0.76rem; color: #64748b; font-weight: 700; }

/* ---------------- Tabla del directorio ----------------
   Sin overflow en el contenedor: eso rompía el sticky del thead (mismo
   trap documentado en encuestas.css/libro.css). Las pantallas angostas
   no scrollean en horizontal, se reorganizan -- ver el responsive. */
.inv-table-wrap {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.inv-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.82rem; }
.inv-table thead th {
    position: sticky; top: var(--inv-controls-h, 96px); z-index: 20;
    background: #ffffff; color: #64748b; text-align: left;
    padding: 10px 14px; font-weight: 800; font-size: 0.68rem;
    text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap;
    /* box-shadow en vez de border-bottom: con border-collapse:collapse
       los bordes no acompañan a una celda sticky. */
    box-shadow: inset 0 -1.5px 0 #e2e8f0;
}
.inv-table thead th:first-child { border-top-left-radius: 12px; }
.inv-table thead th:last-child { border-top-right-radius: 12px; }
.inv-th-producto { width: 36%; }
.inv-th-estado { width: 22%; }
.inv-th-area { width: 16%; }
.inv-th-ubicacion { width: 20%; }
.inv-th-go { width: 34px; }

.inv-table td { padding: 9px 14px; vertical-align: middle; color: #1e293b; }
.inv-row { cursor: pointer; transition: background 0.1s ease, box-shadow 0.1s ease; }
.inv-row td { border-top: 1px solid #f1f5f9; }
.inv-row:first-child td { border-top: none; }
/* Una sola señal de fila activa: antes competían el zebra striping y un
   hover gris, y la tabla se leía sucia. */
.inv-row:hover, .inv-row:focus-visible { background: #f8fafc; box-shadow: inset 3px 0 0 var(--accent, #FFC300); }

.inv-td-producto { min-width: 0; }
.inv-nombre-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.inv-nombre { font-weight: 800; color: var(--primary, #002D62); font-size: 0.86rem; }
.inv-perfil-tag {
    font-size: 0.6rem; font-weight: 900; letter-spacing: 0.3px;
    padding: 2px 7px; border-radius: 999px; text-transform: uppercase;
}
.inv-perfil-aparato { background: #dbeafe; color: #1d4ed8; }
.inv-perfil-material_didactico { background: #fef3c7; color: #92400e; }
.inv-perfil-mobiliario { background: #ede9fe; color: #6d28d9; }
.inv-perfil-equipo_ti { background: #dcfce7; color: #15803d; }
/* Prefijo del código físico (AF, AL, CA...): lo que está pegado en el
   equipo y por lo que la gente busca. Sustituye a la descripción
   truncada, que se cortaba a mitad de palabra en 60 de 70 filas. */
.inv-codigo-chip {
    font-size: 0.64rem; font-weight: 800; color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #f1f5f9; border-radius: 5px; padding: 2px 6px; letter-spacing: 0.3px;
}
/* Área/ubicación plegadas bajo el nombre: solo aparecen cuando su
   columna propia deja de caber (ver responsive). */
.inv-sub-meta { margin-top: 3px; font-size: 0.72rem; color: #64748b; font-weight: 600; }
.inv-sub-area, .inv-sub-ubic { display: none; }
.inv-sub-meta span + span::before { content: " · "; color: #cbd5e1; }

/* Celda de estado: funde las tres columnas que antes decían lo mismo
   (Estado en dos renglones + Total + Gráfico). Las familias de una sola
   unidad -- 27 de 70 -- no dibujan barra: un punto de color basta. */
.inv-estado-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; min-width: 0; }
.inv-bar { display: flex; width: 58px; height: 7px; border-radius: 99px; overflow: hidden; background: #e2e8f0; flex-shrink: 0; }
.inv-bar-seg.operativo { background: #22c55e; }
.inv-bar-seg.no_operativo { background: #ef4444; }
.inv-bar-seg.en_mantenimiento { background: #eab308; }
.inv-bar-seg.baja { background: #94a3b8; }
.inv-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.inv-dot.operativo { background: #22c55e; }
.inv-dot.no_operativo { background: #ef4444; }
.inv-dot.en_mantenimiento { background: #eab308; }
.inv-dot.baja { background: #94a3b8; }
.inv-estado-txt { font-size: 0.76rem; font-weight: 800; color: #334155; white-space: nowrap; }
.inv-badge-falla {
    font-size: 0.64rem; font-weight: 900; color: #b45309;
    background: #fef3c7; border: 1px solid #fde68a;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.inv-estado-vacio { font-size: 0.74rem; color: #94a3b8; font-weight: 700; }

.inv-area-tag {
    display: inline-block; max-width: 100%;
    font-size: 0.7rem; font-weight: 800; color: #475569;
    background: #f1f5f9; border-radius: 6px; padding: 3px 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.inv-td-ubicacion { color: #475569; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-td-go { text-align: right; color: #cbd5e1; }
.inv-row:hover .inv-td-go, .inv-row:focus-visible .inv-td-go { color: var(--primary, #002D62); }

/* Esqueleto de carga: antes la tabla aparecía de golpe tras un texto
   plano "Cargando inventario…". */
.inv-sk { height: 11px; border-radius: 6px; background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%); background-size: 400% 100%; animation: inv-sk-shimmer 1.3s ease infinite; }
.inv-sk-sm { width: 55%; }
.inv-sk-md { width: 75%; }
@keyframes inv-sk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .inv-sk { animation: none; } }

.inv-empty-state {
    text-align: center; padding: 46px 20px; color: #94a3b8;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.inv-empty-state p { margin: 0; font-weight: 700; font-size: 0.9em; }

/* ---------------- Responsive del directorio ----------------
   Antes la tabla tenía min-width:900px y 8 columnas: en la tablet de
   coordinación -- que es el dispositivo real de campo -- se navegaba en
   horizontal sí o sí. Ahora se pliega en dos cortes y nunca hay scroll
   lateral. */
@media (max-width: 1100px) {
    .inv-th-area, .inv-td-area { display: none; }
    .inv-sub-area { display: inline; }
    /* Reparto del ancho que libera la columna Área. Sin esto, el nombre y
       el badge de fallas se partían en dos líneas y las filas quedaban de
       alturas dispares. El chip de código se retira antes que ellos: es el
       dato menos crítico de la fila (el buscador sigue aceptando códigos). */
    .inv-th-producto { width: 43%; }
    .inv-th-estado { width: 29%; }
    .inv-th-ubicacion { width: 26%; }
    .inv-codigo-chip { display: none; }
    /* Barra más corta para que "N/M operativas + badge" quepa en una línea
       en el caso habitual. En familias con muchas unidades ("44/44") el
       badge sigue cayendo a una segunda línea: es el fallback previsto
       (flex-wrap en .inv-estado-cell), no un desborde sobre la columna. */
    .inv-bar { width: 44px; }
}

@media (max-width: 780px) {
    /* La tabla pasa a lista de tarjetas. El thead desaparece (cada dato
       se explica solo), así que tampoco hace falta su sticky. */
    .inv-controls { position: static; }
    .inv-table-wrap { background: transparent; border: none; border-radius: 0; }
    .inv-table, .inv-table tbody, .inv-table tr, .inv-table td { display: block; width: auto; }
    .inv-table { table-layout: auto; }
    .inv-table thead { display: none; }
    .inv-row {
        position: relative; background: #ffffff;
        border: 1px solid #e2e8f0; border-radius: 11px;
        margin-bottom: 8px; padding: 11px 34px 11px 13px;
    }
    .inv-row:hover, .inv-row:focus-visible { box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); background: #ffffff; }
    .inv-row td, .inv-row:first-child td { border-top: none; padding: 0; }
    .inv-td-estado { margin-top: 7px; }
    /* Calificadas con .inv-table a propósito: ".inv-table td { display:block }"
       de arriba pesa más (clase + elemento) que un ".inv-td-area" pelado, así
       que el área y la ubicación reaparecían duplicadas dentro de la tarjeta,
       debajo de la línea que ya las resume. */
    .inv-table .inv-td-area, .inv-table .inv-td-ubicacion { display: none; }
    .inv-sub-ubic { display: inline; }
    .inv-td-go { position: absolute; top: 50%; right: 11px; transform: translateY(-50%); }
    .inv-select { max-width: none; flex: 1 1 calc(50% - 6px); min-width: 0; }
    .inv-controls-estado { align-items: stretch; }
    .inv-segments { width: 100%; justify-content: space-between; }
    .inv-segment { flex: 1; justify-content: center; padding: 7px 6px; }
    /* El icono decorativo del hero solo resta espacio en pantallas
       angostas -- ya lleva el mismo glifo en .inv-hero-badge. */
    .inv-hero-right { display: none; }
    .inv-hero-actions { width: 100%; }
    .inv-hero-actions .inv-btn-primary { flex: 1; justify-content: center; }
}

/* ---------------- Tarjetas "Próximamente" (pestañas del módulo) ---------------- */
.inv-soon-card {
    background: #ffffff;
    border: 1.5px dashed #cbd5e1;
    border-radius: 16px;
    padding: 36px 28px;
    max-width: 620px;
    margin: 20px auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.inv-soon-icon {
    width: 64px; height: 64px; border-radius: 18px;
    background: #eff6ff; color: #002D62;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}
.inv-soon-card h3 { margin: 0; font-size: 1.15em; color: #0f172a; font-weight: 900; }
.inv-soon-card p { margin: 0; color: #64748b; font-size: 0.88em; line-height: 1.55; }
.inv-soon-list { list-style: none; padding: 0; margin: 8px 0; text-align: left; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.inv-soon-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85em; color: #334155; line-height: 1.45; }
.inv-soon-list li i { color: #16a34a; margin-top: 3px; flex-shrink: 0; }
.inv-soon-badge {
    margin-top: 8px; background: #fef9c3; color: #92400e; font-weight: 900;
    font-size: 0.72em; letter-spacing: 0.4px; text-transform: uppercase;
    padding: 5px 14px; border-radius: 999px; border: 1px solid #fde68a;
}

/* ================================================================
   PÁGINA DE FICHA (detalle de una familia) -- página completa, no modal
   ================================================================ */
.inv-ficha-breadcrumb {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.inv-btn-volver {
    display: inline-flex; align-items: center; gap: 6px;
    background: #ffffff; border: 1.5px solid #cbd5e1; color: #002D62;
    font-weight: 800; font-size: 0.82em; padding: 9px 16px;
    border-radius: 10px; cursor: pointer; transition: all 0.15s ease;
}
.inv-btn-volver:hover { border-color: #002D62; background: #eff6ff; }
.inv-breadcrumb-path { font-size: 0.82em; color: #64748b; font-weight: 600; }
.inv-breadcrumb-path strong { color: #002D62; }

.inv-ficha-subtabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    background: #002D62; border-radius: 12px; padding: 6px; margin-bottom: 12px;
}
.inv-ficha-subtab {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none; color: #cbd5e1;
    font-size: 0.78em; font-weight: 800; padding: 8px 14px;
    border-radius: 8px; cursor: pointer; white-space: nowrap; transition: all 0.15s ease;
}
.inv-ficha-subtab:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.inv-ficha-subtab.active { background: #FFC300; color: #002D62; }

.inv-ficha-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.inv-ficha-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eff6ff; border: 1.5px solid #bfdbfe; color: #002D62;
    font-size: 0.78em; font-weight: 800; padding: 8px 14px;
    border-radius: 9px; cursor: pointer; white-space: nowrap; transition: all 0.15s ease;
}
.inv-ficha-action-btn:hover { background: #002D62; color: #ffffff; border-color: #002D62; }
.inv-ficha-action-btn.inv-action-gold { background: #fff7e6; border-color: #ffe4a3; color: #92400e; }
.inv-ficha-action-btn.inv-action-gold:hover { background: #FFC300; color: #002D62; border-color: #FFC300; }
.inv-ficha-action-btn.inv-action-green { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.inv-ficha-action-btn.inv-action-green:hover { background: #16a34a; color: #ffffff; border-color: #16a34a; }

.inv-ficha-subtab-panel.hidden { display: none; }

/* Tarjeta de cabecera de 3 columnas */
.inv-ficha-header-card {
    display: grid;
    grid-template-columns: 220px 1.6fr 1fr;
    gap: 0;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 14px;
}
.inv-ficha-foto-col { border-right: 1px solid #f1f5f9; padding: 16px; display: flex; align-items: center; justify-content: center; }
.inv-ficha-foto-box {
    width: 100%; aspect-ratio: 1 / 1;
    background: #f8fafc; border: 1.5px dashed #cbd5e1; border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    color: #94a3b8; text-align: center; padding: 10px;
}
.inv-ficha-foto-box i { color: #cbd5e1; }
.inv-ficha-foto-box span { font-size: 0.72em; font-weight: 700; }

.inv-ficha-info-col { padding: 18px 20px; border-right: 1px solid #f1f5f9; }
.inv-ficha-eyebrow { display: block; font-size: 0.7em; font-weight: 900; letter-spacing: 0.5px; color: #FFC300; background: #002D62; display: inline-block; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; margin-bottom: 10px; }
.inv-ficha-titulo { margin: 0 0 10px; font-size: 1.5em; font-weight: 900; color: #0f172a; letter-spacing: -0.3px; }
.inv-ficha-caract-label { font-size: 0.72em; font-weight: 900; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 4px; }
.inv-ficha-caract-text { margin: 0 0 14px; font-size: 0.88em; color: #334155; line-height: 1.55; }
.inv-ficha-meta-rows { display: flex; flex-direction: column; gap: 6px; font-size: 0.84em; color: #334155; }
.inv-ficha-meta-rows strong { color: #002D62; font-weight: 800; }

.inv-ficha-side-col { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; background: #f8fafc; }
.inv-ficha-brand-box { text-align: center; }
.inv-ficha-brand-box .inv-ficha-brand-name { font-weight: 900; color: #002D62; font-size: 1em; }
.inv-ficha-brand-box .inv-ficha-brand-tag { display: block; font-size: 0.66em; font-weight: 800; color: #94a3b8; letter-spacing: 0.4px; text-transform: uppercase; margin-top: 2px; }
.inv-ficha-fecha-chip {
    margin-top: 10px; font-size: 0.74em; font-weight: 700; color: #475569;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 10px; display: inline-block;
}
.inv-ficha-mantenimiento-mini { border-top: 1px dashed #cbd5e1; padding-top: 12px; }
.inv-ficha-mantenimiento-mini h5 { margin: 0 0 3px; font-size: 0.72em; font-weight: 900; color: #002D62; letter-spacing: 0.3px; text-transform: uppercase; }
.inv-ficha-mantenimiento-mini > span { display: block; font-size: 0.72em; color: #94a3b8; margin-bottom: 8px; }
.inv-ficha-mini-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-ficha-mini-stat { font-size: 0.72em; font-weight: 800; padding: 4px 9px; border-radius: 999px; }
.inv-ficha-mini-stat.op { background: #dcfce7; color: #16a34a; }
.inv-ficha-mini-stat.noop { background: #fee2e2; color: #dc2626; }
.inv-ficha-mini-stat.total { background: #e2e8f0; color: #334155; }

.inv-ficha-tecnica-note {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 0.82em; color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; line-height: 1.5;
}
.inv-ficha-tecnica-note i { flex-shrink: 0; margin-top: 2px; }

.inv-ficha-unidades-section h4 {
    font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.4px;
    color: #002D62; font-weight: 900; margin: 0 0 10px;
    display: flex; align-items: center; gap: 6px;
}

.inv-ficha-unidades-table-wrap { overflow-x: auto; background: #ffffff; border-radius: 14px; border: 1.5px solid #e2e8f0; }
.inv-ficha-unidades-table { width: 100%; border-collapse: collapse; font-size: 0.85em; min-width: 640px; }
.inv-ficha-unidades-table th {
    background: #002D62; color: #ffffff; text-align: left;
    padding: 10px 12px; font-weight: 800; font-size: 0.74em;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.inv-ficha-unidades-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; color: #1e293b; }
.inv-ficha-unidades-table tbody tr:nth-child(even) { background: #fafbfc; }

.inv-estado-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.74em; font-weight: 900; padding: 4px 10px; border-radius: 999px;
}
.inv-estado-pill.operativo { background: #dcfce7; color: #16a34a; }
.inv-estado-pill.no_operativo { background: #fee2e2; color: #dc2626; }
.inv-estado-pill.en_mantenimiento { background: #fef9c3; color: #92400e; }
.inv-estado-pill.en_reparacion { background: #fef9c3; color: #92400e; }
.inv-estado-pill.baja { background: #e2e8f0; color: #475569; }

.inv-ficha-footer-resumen {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e2e8f0;
    font-size: 0.82em; color: #64748b; font-weight: 700;
}
.inv-ficha-btn-agregar-unidad {
    display: inline-flex; align-items: center; gap: 6px;
    background: #002D62; color: #ffffff; border: none;
    font-size: 0.8em; font-weight: 800; padding: 9px 16px;
    border-radius: 9px; cursor: pointer;
}
.inv-ficha-btn-agregar-unidad:hover { background: #FFC300; color: #002D62; }

/* Botón "+ Agregar Código / Unidad" ancho, estilo del prototipo */
.inv-ficha-btn-agregar {
    display: inline-flex; align-items: center; gap: 7px;
    background: #001a38; color: #ffffff; border: none;
    font-size: 0.8em; font-weight: 800; padding: 10px 18px;
    border-radius: 10px; cursor: pointer; margin-bottom: 16px;
}
.inv-ficha-btn-agregar:hover { background: #FFC300; color: #002D62; }

/* ================================================================
   PRÉSTAMOS A DOCENTES (Etapa 2)
   ================================================================ */
.inv-prestamo-subpanel.hidden { display: none; }

.inv-prestamo-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

.inv-prestamo-table-wrap { overflow-x: auto; background: #ffffff; border-radius: 14px; border: 1.5px solid #e2e8f0; }
.inv-prestamo-table { width: 100%; border-collapse: collapse; font-size: 0.84em; min-width: 760px; }
.inv-prestamo-table th {
    background: #002D62; color: #ffffff; text-align: left;
    padding: 10px 12px; font-weight: 800; font-size: 0.74em;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.inv-prestamo-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; color: #1e293b; vertical-align: middle; }
.inv-prestamo-table tbody tr:nth-child(even) { background: #fafbfc; }

.inv-prestamo-btn-devolver {
    display: inline-flex; align-items: center; gap: 5px;
    background: #002D62; color: #ffffff; border: none;
    padding: 7px 12px; border-radius: 8px; font-size: 0.78em; font-weight: 800; cursor: pointer;
}
.inv-prestamo-btn-devolver:hover { background: #FFC300; color: #002D62; }

.inv-condicion-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74em; font-weight: 900; padding: 4px 10px; border-radius: 999px; }
.inv-condicion-pill.conforme { background: #dcfce7; color: #16a34a; }
.inv-condicion-pill.con_observaciones { background: #fef9c3; color: #92400e; }
.inv-condicion-pill.requiere_mantenimiento { background: #fee2e2; color: #dc2626; }

/* Panel de devolución -- reemplaza la lista de activos mientras se
   confirma, en vez de un modal (mismo criterio "página, no recuadro
   flotante" que la ficha de equipo). */
.inv-devolucion-panel {
    background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 16px;
    padding: 20px; max-width: 560px; margin: 0 auto;
}
.inv-devolucion-panel h4 { margin: 0 0 4px; font-size: 1.05em; color: #002D62; font-weight: 900; }
.inv-devolucion-panel .inv-devolucion-sub { margin: 0 0 16px; font-size: 0.82em; color: #64748b; }

/* Formulario "Nuevo Préstamo" */
.inv-prestamo-form-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.inv-prestamo-form-col {
    background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 20px;
}
.inv-prestamo-form-col h4 { margin: 0 0 14px; font-size: 0.95em; color: #002D62; font-weight: 900; }
.inv-prestamo-form-col h5 { margin: 16px 0 8px; font-size: 0.78em; color: #64748b; font-weight: 900; text-transform: uppercase; letter-spacing: 0.3px; }
.inv-form-field { margin-bottom: 12px; }
.inv-form-field label { display: block; font-size: 0.76em; font-weight: 800; color: #475569; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.2px; }
.inv-form-field input[type="text"], .inv-form-field input:not([type]), .inv-form-field textarea {
    width: 100%; border: 1.5px solid #cbd5e1; border-radius: 9px; padding: 9px 11px;
    font-size: 0.88em; color: #0f172a; font-family: inherit; box-sizing: border-box;
}
.inv-form-field textarea { min-height: 60px; resize: vertical; }
.inv-checklist-row { display: flex; align-items: center; gap: 8px; font-size: 0.85em; color: #334155; margin-bottom: 8px; font-weight: 600; }
.inv-checklist-row input { width: 16px; height: 16px; }

.inv-clases-hoy-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.inv-clase-hoy-card {
    background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px;
    padding: 10px 12px; cursor: pointer; transition: all 0.15s ease;
}
.inv-clase-hoy-card:hover { border-color: #FFC300; background: #fffbeb; }
.inv-clase-hoy-card .nombre { font-weight: 800; color: #0f172a; font-size: 0.86em; }
.inv-clase-hoy-card .meta { font-size: 0.76em; color: #64748b; margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.inv-clases-hoy-empty { font-size: 0.82em; color: #94a3b8; text-align: center; padding: 20px; }

.inv-btn-primario-ancho {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
    background: #002D62; color: #ffffff; border: none; font-weight: 800;
    font-size: 0.88em; padding: 11px; border-radius: 10px; cursor: pointer; margin-top: 6px;
}
.inv-btn-primario-ancho:hover { background: #FFC300; color: #002D62; }
.inv-btn-secundario-ancho {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
    background: #f1f5f9; color: #475569; border: 1.5px solid #cbd5e1; font-weight: 800;
    font-size: 0.88em; padding: 10px; border-radius: 10px; cursor: pointer; margin-top: 8px;
}
.inv-btn-secundario-ancho:hover { background: #e2e8f0; }

.inv-radio-condicion { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.inv-radio-condicion label { display: flex; align-items: center; gap: 8px; font-size: 0.86em; font-weight: 700; color: #334155; cursor: pointer; }

@media (max-width: 900px) {
    .inv-prestamo-form-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   HABILITACIÓN DE AULAS -- selector de mobiliario por cantidad
   ================================================================ */
.inv-mobiliario-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 10px; margin-bottom: 8px;
}
.inv-mobiliario-row-info { display: flex; flex-direction: column; }
.inv-mobiliario-row-nombre { font-weight: 800; font-size: 0.86em; color: #0f172a; }
.inv-mobiliario-row-disp { font-size: 0.76em; color: #64748b; margin-top: 2px; }
.inv-mobiliario-row-disp.sin-stock { color: #dc2626; font-weight: 800; }
.inv-mobiliario-row-cantidad { width: 70px; text-align: center; }
.inv-turno-fecha-row { display: flex; gap: 10px; margin-bottom: 12px; }
.inv-turno-fecha-row .inv-form-field { flex: 1; margin-bottom: 0; }
.inv-aula-resumen-mobiliario { font-size: 0.82em; color: #475569; }
.inv-aula-resumen-mobiliario span { display: inline-block; background: #eff6ff; color: #002D62; border-radius: 6px; padding: 2px 8px; margin: 2px 4px 2px 0; font-weight: 700; }

/* ================================================================
   MANTENIMIENTO PREVENTIVO (Etapa 3)
   ================================================================ */
.inv-mant-estado-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74em; font-weight: 900; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.inv-mant-estado-pill.vencido { background: #fee2e2; color: #dc2626; }
.inv-mant-estado-pill.vence_este_mes { background: #fef9c3; color: #92400e; }
.inv-mant-estado-pill.al_dia { background: #dcfce7; color: #16a34a; }
.inv-mant-estado-pill.no_aplica { background: #e2e8f0; color: #64748b; }

.inv-mant-periodicidad-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 0.86em; color: #334155; flex-wrap: wrap; }
.inv-mant-periodicidad-row select { border: 1.5px solid #cbd5e1; border-radius: 8px; padding: 6px 10px; font-size: 0.95em; }

.inv-mant-historial-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.inv-mant-historial-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; font-size: 0.82em; }
.inv-mant-historial-item .cab { display: flex; justify-content: space-between; font-weight: 800; color: #002D62; margin-bottom: 3px; }
.inv-mant-historial-item .obs { color: #64748b; }

/* ================================================================
   ETIQUETAS QR Y ESCÁNER (Etapa 4)
   ================================================================ */
.inv-etiquetas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inv-etiquetas-card {
    background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 16px;
    padding: 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.inv-etiquetas-card h3 { margin: 0; font-size: 1.05em; color: #0f172a; font-weight: 900; }
.inv-etiquetas-card p { margin: 0 0 6px; color: #64748b; font-size: 0.86em; line-height: 1.5; }
.inv-etiquetas-card .inv-form-field { width: 100%; }
@media (max-width: 760px) { .inv-etiquetas-grid { grid-template-columns: 1fr; } }

/* Botón QR pequeño dentro de la tabla de unidades de la ficha */
.inv-btn-qr-unidad {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 7px;
    background: #eff6ff; border: 1px solid #bfdbfe; color: #002D62;
    cursor: pointer; margin-left: 6px; vertical-align: middle;
}
.inv-btn-qr-unidad:hover { background: #002D62; color: #ffffff; }

/* Overlay de un solo QR -- mismo patrón visual que #enc-qr-overlay en
   encuestas.css, reescrito acá porque cada módulo es autocontenido. */
.inv-qr-overlay {
    position: fixed; inset: 0; z-index: 100060; background: #ffffff;
    display: flex; align-items: center; justify-content: center; padding: 2vh 4vw; overflow: auto;
}
.inv-qr-overlay .inv-qr-close {
    position: fixed; top: 14px; right: 18px; width: 44px; height: 44px;
    border: none; border-radius: 50%; background: #f1f5f9; color: #334155;
    font-size: 1.6em; line-height: 1; cursor: pointer; z-index: 2;
}
.inv-qr-overlay .inv-qr-close:hover { background: #e2e8f0; }
.inv-qr-card { text-align: center; max-width: 480px; width: 100%; }
.inv-qr-kicker { font-size: 0.85em; font-weight: 900; letter-spacing: 1.5px; color: #d97706; margin-bottom: 8px; text-transform: uppercase; }
.inv-qr-title { font-size: clamp(1.2em, 3vw, 1.7em); font-weight: 900; color: #002D62; line-height: 1.15; margin: 0 0 12px; }
.inv-qr-box {
    width: min(46vh, 52vw, 320px); height: min(46vh, 52vw, 320px); margin: 0 auto 14px; padding: 12px;
    background: #ffffff; border: 3px solid #002D62; border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 45, 98, 0.18); line-height: 0;
}
.inv-qr-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; font-weight: 700;
    color: #002D62; background: #f0f7ff; border: 1.5px solid #bfdbfe; border-radius: 10px;
    padding: 8px 16px; display: inline-block; word-break: break-all; margin-bottom: 16px;
}
.inv-qr-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Hoja de impresión masiva */
.inv-print-overlay { position: fixed; inset: 0; z-index: 100050; background: #f1f5f9; overflow-y: auto; padding: 20px; }
.inv-print-toolbar {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    max-width: 900px; margin: 0 auto 16px; flex-wrap: wrap;
}
.inv-print-toolbar h3 { margin: 0; color: #002D62; font-weight: 900; }
.inv-print-sheet {
    max-width: 900px; margin: 0 auto; background: #ffffff; border-radius: 16px; padding: 24px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px;
}
.inv-print-label {
    border: 1.5px dashed #cbd5e1; border-radius: 10px; padding: 10px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.inv-print-label img { width: 100%; max-width: 130px; image-rendering: pixelated; }
.inv-print-label .codigo { font-weight: 900; color: #002D62; font-size: 0.9em; }
.inv-print-label .nombre { font-size: 0.72em; color: #64748b; line-height: 1.3; }
@media print {
    body * { visibility: hidden; }
    .inv-print-overlay, .inv-print-overlay * { visibility: visible; }
    .inv-print-overlay { position: absolute; inset: 0; background: #ffffff; padding: 0; }
    .inv-print-toolbar { display: none; }
    .inv-print-sheet { box-shadow: none; }
}

/* Escáner de cámara */
.inv-scanner-overlay {
    position: fixed; inset: 0; z-index: 100070; background: rgba(0, 15, 38, 0.92);
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px;
}
.inv-scanner-card { max-width: 480px; width: 100%; background: #ffffff; border-radius: 18px; padding: 20px; text-align: center; }
.inv-scanner-card h3 { margin: 0 0 4px; color: #002D62; font-weight: 900; }
.inv-scanner-card p { margin: 0 0 14px; font-size: 0.84em; color: #64748b; }
#inv-scanner-reader { width: 100%; border-radius: 12px; overflow: hidden; margin-bottom: 14px; background: #0f172a; min-height: 240px; }
.inv-scanner-manual { display: flex; gap: 8px; margin-top: 10px; }
.inv-scanner-manual input { flex: 1; border: 1.5px solid #cbd5e1; border-radius: 9px; padding: 9px 11px; font-size: 0.88em; }
.inv-scanner-close {
    position: fixed; top: 16px; right: 18px; width: 44px; height: 44px; border: none; border-radius: 50%;
    background: rgba(255,255,255,0.15); color: #ffffff; font-size: 1.6em; line-height: 1; cursor: pointer;
}
.inv-scanner-close:hover { background: rgba(255,255,255,0.28); }

/* Página pública de unidad (sin sesión) */
.inv-publica-card {
    max-width: 520px; margin: 60px auto; background: #ffffff; border-radius: 20px;
    border: 1.5px solid #e2e8f0; padding: 36px 30px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    box-shadow: 0 20px 50px rgba(0, 45, 98, 0.1);
}
.inv-publica-logo {
    width: 60px; height: 60px; border-radius: 16px; background: #002D62; color: #FFC300;
    display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
}
.inv-publica-kicker { font-size: 0.72em; font-weight: 900; letter-spacing: 1px; color: #94a3b8; text-transform: uppercase; }
.inv-publica-codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 900; color: #FFC300;
    background: #002D62; padding: 4px 14px; border-radius: 999px; font-size: 0.82em; margin: 8px 0;
}
.inv-publica-nombre { margin: 4px 0; font-size: 1.5em; font-weight: 900; color: #0f172a; }
.inv-publica-categoria { font-size: 0.82em; color: #64748b; font-weight: 700; margin-bottom: 10px; }
.inv-publica-desc { font-size: 0.88em; color: #334155; line-height: 1.55; margin: 0 0 12px; }
.inv-publica-meta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
.inv-publica-meta span { background: #f1f5f9; border-radius: 8px; padding: 5px 11px; font-size: 0.78em; font-weight: 700; color: #475569; }
.inv-publica-footer { border-top: 1px dashed #e2e8f0; padding-top: 16px; width: 100%; }
.inv-publica-footer p { margin: 0 0 10px; font-size: 0.8em; color: #94a3b8; }

/* ---------------- Toast liviano "Próximamente" ---------------- */
.inv-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: #002D62; color: #ffffff; border: 1px solid rgba(255,195,0,.4);
    padding: 12px 20px; border-radius: 12px; font-size: 0.85em; font-weight: 700;
    display: flex; align-items: center; gap: 9px; z-index: 10600;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    max-width: 90vw;
    animation: invToastIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.inv-toast.hidden { display: none; }
.inv-toast i { color: #FFC300; flex-shrink: 0; }
@keyframes invToastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 900px) {
    .inv-ficha-header-card { grid-template-columns: 1fr; }
    .inv-ficha-foto-col, .inv-ficha-info-col { border-right: none; border-bottom: 1px solid #f1f5f9; }
    .inv-ficha-foto-box { max-width: 220px; margin: 0 auto; }
}

@media (max-width: 640px) {
    /* .inv-filter-bar / .inv-topbar ya no existen: el directorio tiene su
       propio bloque responsive (ver "Responsive del directorio" arriba).
       Aquí solo queda lo de las demás pestañas. */
    .inv-quick-chips { justify-content: stretch; }
}