/* =============================================================================
   INVENTARIO — SISTEMA DE ESTILOS GLOBAL
   =============================================================================
   Organización:
     1.  Variables CSS (Design Tokens)
     2.  Shell principal de la aplicación
     3.  Barra de navegación superior (Topbar)
     4.  Navegación horizontal (Top Nav links)
     5.  Sidebar (barra lateral)
     6.  Sidebar — modo compacto
     7.  Layout de contenido principal
     8.  Autenticación / Login
     9.  Tablero de llaves (Key Board)
    10.  Solicitudes de productos (Request Workspace)
    11.  Catálogo de productos
    12.  Carrito de solicitud
    13.  Historial de solicitudes
    14.  Dashboard — Overview y KPIs
    15.  Dashboard — Módulos y acciones
    16.  Panel de administración
    17.  Componentes reutilizables (botones, badges, estados)
    18.  Utilidades de animación / delay
    19.  Media queries — Tablet (≤ 980 px)
    20.  Media queries — Móvil  (≤ 640 px)
   ============================================================================= */


/* =============================================================================
   1. VARIABLES CSS (DESIGN TOKENS)
   =============================================================================
   Paleta, dimensiones y espaciados centralizados para toda la interfaz.
   ----------------------------------------------------------------------------- */
:root {
  /* — Colores base — */
  --bg:            #f0f4f8;      /* Fondo global de la app */
  --card:          #ffffff;      /* Fondo de tarjetas y paneles */
  --text:          #0f172a;      /* Texto principal */
  --muted:         #64748b;      /* Texto secundario / apagado */
  --border:        #e2e8f0;      /* Borde genérico */

  /* — Colores primarios (azul) — */
  --primary:       #1e40af;
  --primary-dark:  #1e3a8a;
  --primary-light: #dbeafe;
  --primary-mid:   #3b82f6;

  /* — Colores de peligro (rojo) — */
  --danger:        #b91c1c;
  --danger-bg:     #fee2e2;

  /* — Sidebar — */
  --sidebar-bg:     #0f172a;
  --sidebar-active: #1d4ed8;
  --sidebar-hover:  rgba(255, 255, 255, .07);
  --sidebar-text:   rgba(255, 255, 255, .82);

  /* — Dimensiones de layout — */
  --nav-h:          66px;   /* Altura de la barra superior */
  --side-w:         220px;  /* Ancho de sidebar expandida */
  --side-w-compact:  84px;  /* Ancho de sidebar compacta */
}


/* =============================================================================
   2. SHELL PRINCIPAL DE LA APLICACIÓN
   =============================================================================
   Contenedor raíz que aplica el fondo degradado y el color de texto base.
   ----------------------------------------------------------------------------- */
.app-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left,  rgba(59, 130, 246, .10), transparent 30%),
    radial-gradient(circle at top right, rgba(16, 185, 129, .08), transparent 26%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  color: var(--text);
}

/* Variante: shell con navegación horizontal (sin sidebar) */
.app-shell--topnav {
  display: block;
}


/* =============================================================================
   3. BARRA DE NAVEGACIÓN SUPERIOR (TOPBAR)
   =============================================================================
   Fija en la parte superior con efecto glassmorphism. Contiene logo,
   navegación, chip de contexto y datos del usuario.
   ----------------------------------------------------------------------------- */

/* — Topbar base (shell con sidebar) — */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid rgba(148, 163, 184, .24);
  backdrop-filter: blur(14px);
}

/* — Topbar fija (modo con sidebar fija) — */
.navbar.app-topbar {
  position: fixed;
  top: 0;
  left: var(--side-w);   /* arranca despues del sidebar full-height */
  right: 0;
  z-index: 50;
  height: var(--nav-h);
  padding: 0 24px;
  gap: 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 10px rgba(15, 23, 42, .07);
  backdrop-filter: none;
  transition: left .22s ease;
}
body.sidebar-compact .navbar.app-topbar { left: var(--side-w-compact); }

/* — Logotipo / Marca — */
.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
}

.app-brand:hover { text-decoration: none; }

.app-brand img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
}

/* — Espaciador flexible — */
.app-topbar-spacer { flex: 1; }

/* — Chip de contexto (área / módulo activo) — */
.app-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .25);
  color: #0f172a;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
}

.app-chip:hover { text-decoration: none; }

/* Variante suave (fondo azul claro) */
.app-chip--soft {
  background: linear-gradient(180deg, #eff6ff, #fff);
  color: #1d4ed8;
}

/* — Caja de usuario (nombre + rol + botón logout) — */
.app-userbox {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-user-meta {
  display: grid;
  gap: 2px;
  text-align: right;
}

.app-user-meta strong { font-size: .92rem; }

.app-user-meta span {
  font-size: .75rem;
  color: #64748b;
}

/* — Botón de cierre de sesión — */
.app-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 0;
  background: #111827;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* — Contenedor principal de página — */
.app-main {
  padding: 24px;
  max-width: 1480px;
  margin: 0 auto;
}

.app-notice { margin-bottom: 14px; }

/* — Botón hamburguesa (solo visible en móvil) — */
.hamburger {
  width: 40px;
  height: 40px;
  display: none; /* visible en ≤ 980 px */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}


/* =============================================================================
   4. NAVEGACIÓN HORIZONTAL (TOP NAV LINKS)
   =============================================================================
   Barra de pestañas en forma de píldoras, usada en la variante sin sidebar.
   ----------------------------------------------------------------------------- */
.inv-topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Control segmentado: una sola fila con scroll horizontal. Con muchos modulos
     NO se envuelve ni desborda la altura fija del navbar. */
  flex-wrap: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px;
  background: linear-gradient(180deg, #f1f5f9, #e8eef6);
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 8px;
}
/* Barra de scroll oculta en reposo; aparece sutil al pasar el mouse. */
.inv-topnav:hover { scrollbar-color: rgba(100, 116, 139, .4) transparent; }
.inv-topnav::-webkit-scrollbar { height: 5px; }
.inv-topnav::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.inv-topnav:hover::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .35); }
.inv-topnav::-webkit-scrollbar-track { background: transparent; }

.inv-topnav a {
  min-height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #475569;
  font-size: 13.5px;
  font-weight: 800;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* Hover: pildora blanca elevada dentro del track */
.inv-topnav a:hover {
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .10);
}
/* Activo: pildora con degradado azul y sombra */
.inv-topnav a.is-active {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 6px 14px rgba(29, 78, 216, .32);
}

/* Alerta roja: items pendientes de devolver en "Historial & devolución". */
.inv-topnav a.has-return-alert { gap: 7px; }
.inv-topnav a.has-return-alert:not(.is-active) { background: #fff5f5; color: #b91c1c; }
.inv-topnav a.has-return-alert:not(.is-active):hover { background: #fee2e2; }
.inv-topnav-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
  animation: invReturnPulse 1.8s ease-in-out infinite;
}
.inv-topnav a.is-active .inv-topnav-alert { box-shadow: 0 0 0 2px #1d4ed8; }
@keyframes invReturnPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .inv-topnav-alert { animation: none; } }


/* =============================================================================
   5. SIDEBAR (BARRA LATERAL)
   =============================================================================
   Panel de navegación vertical oscuro, fijo al costado izquierdo.
   Incluye marca, contexto de área, secciones y enlaces de navegación.
   ----------------------------------------------------------------------------- */

/* — Layout general con sidebar — */
.app-shell--with-sidebar {
  display: block; /* En desktop se controla con margen en .content */
}

/* — Sidebar contenedor — */
.sidebar.inv-sidebar {
  position: fixed;
  top: 0;            /* sidebar a toda la altura (incluye el tope antes ocupado por el topbar) */
  left: 0;
  bottom: 0;
  z-index: 45;
  width: var(--side-w);
  height: auto;
  display: block;
  padding: 18px 10px 24px;
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  border-right: 1px solid rgba(255, 255, 255, .04);
  overflow-y: auto;
  transition: transform .25s ease, width .22s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .55) rgba(255, 255, 255, .04);
}

/* Scrollbar personalizada (WebKit) */
.sidebar.inv-sidebar::-webkit-scrollbar { width: 10px; }

.sidebar.inv-sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .04);
  border-radius: 999px;
}

.sidebar.inv-sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(148, 163, 184, .62), rgba(100, 116, 139, .82));
  border: 2px solid rgba(15, 23, 42, .72);
  border-radius: 999px;
}

/* — Marca dentro del sidebar — */
.inv-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.inv-sidebar-brand img {
  width: 54px;
  height: 42px;
  padding: 4px;
  border-radius: 13px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 8px 18px rgba(2, 6, 23, .22);
}

.inv-sidebar-brand div {
  min-width: 0;
}

.inv-sidebar-brand strong,
.inv-sidebar-scope strong { display: block; font-weight: 900; line-height: 1.05; color: #f8fafc; }

.inv-sidebar-brand span,
.inv-sidebar-scope span,
.inv-sidebar-scope small {
  display: block;
  margin-top: 4px;
  color: rgba(226, 232, 240, .72);
  font-size: 12px;
  line-height: 1.1;
}

/* — Cambio de sede desde el drawer (solo móvil) —
   En escritorio la sede vive en el chip de la navbar (.nav-context-chip), que se
   oculta ≤900px; sin este acceso un usuario multi-sede queda atrapado en móvil.
   El selector lleva el tag `button` para ganarle a la global
   button:not(.hamburger) de app.css, que si no le mete su padding/azul. */
button.sidebar-branch { display: none; }
@media (max-width: 900px) {
  button.sidebar-branch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 12px 0 4px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: #e2e8f0;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  button.sidebar-branch:hover,
  button.sidebar-branch:active { background: rgba(255, 255, 255, .12); }
  button.sidebar-branch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .sidebar-branch-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
  .sidebar-branch-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
  }
  .sidebar-branch-value {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  button.sidebar-branch svg { flex: none; width: 16px; height: 16px; opacity: .75; }
}

/* — Panel de contexto (área / almacén activo) — */
.inv-sidebar-scope {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(96, 165, 250, .24);
  border-radius: 16px;
  background: rgba(30, 64, 175, .22);
}

/* — Etiqueta de sección (MAYÚSCULAS) — */
.sidebar-section {
  padding: 16px 12px 8px;
  color: rgba(148, 163, 184, .62);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: opacity .18s ease, height .18s ease, padding .18s ease;
}

.sidebar-section:first-of-type { padding-top: 6px; }

/* — Enlace de navegación — */
.sidebar-link.inv-sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 3px 6px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  color: rgba(255, 255, 255, .9);
  background: transparent;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  white-space: normal;
  overflow: visible;
  transition: background .18s, color .18s, padding .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sidebar-link.inv-sidebar-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: rgba(191, 219, 254, .86);
  opacity: .72;
}

/* Hover */
.sidebar-link.inv-sidebar-link:hover {
  background: rgba(255, 255, 255, .055);
  color: #fff;
  text-decoration: none;
  transform: translateX(2px);
}

/* Íconos en estado activo / hover */
.sidebar-link.inv-sidebar-link:hover svg,
.sidebar-link.inv-sidebar-link.active svg { opacity: 1; }

/* Estado activo — degradado azul + sombra */
.sidebar-link.inv-sidebar-link.active,
.sidebar-link.inv-sidebar-link.is-active {
  background: linear-gradient(135deg, #2563eb 0%, #3156d3 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .28);
}

/* Indicador lateral izquierdo (barra blanca) en estado activo */
.sidebar-link.inv-sidebar-link.active::before,
.sidebar-link.inv-sidebar-link.is-active::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
}

/* — Overlay oscuro detrás del sidebar en móvil — */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(0, 0, 0, .55);
}

/* — Botón para colapsar/expandir el sidebar (desktop) — */
button.sidebar-compact-btn.inv-menu-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

button.sidebar-compact-btn.inv-menu-btn:hover { background: #f8fafc; }

button.sidebar-compact-btn.inv-menu-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* — Botón de menú genérico — */
button.inv-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1d4ed8;
  gap: 0;
  flex-shrink: 0;
  cursor: pointer;
}

button.inv-menu-btn:hover { background: #dbeafe; }

button.inv-menu-btn svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

button.inv-menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #1d4ed8;
}


/* =============================================================================
   6. SIDEBAR — MODO COMPACTO
   =============================================================================
   Cuando <body> tiene la clase `sidebar-compact`, el sidebar se colapsa
   a iconos. Los textos se ocultan y las secciones desaparecen.
   ----------------------------------------------------------------------------- */
body.sidebar-compact .sidebar.inv-sidebar {
  width: var(--side-w-compact);
  padding: 18px 10px 24px;
}

/* Oculta etiquetas de sección */
body.sidebar-compact .sidebar-section {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Enlace centrado sin texto */
body.sidebar-compact .sidebar-link.inv-sidebar-link {
  justify-content: center;
  gap: 0;
  margin-left: 8px;
  margin-right: 8px;
  padding-left: 0;
  padding-right: 0;
  font-size: 0;        /* Oculta texto dejando solo el ícono SVG */
  white-space: nowrap;
  overflow: hidden;
}

body.sidebar-compact .sidebar-link.inv-sidebar-link svg {
  width: 19px;
  height: 19px;
}

/* Quita el indicador lateral en compacto */
body.sidebar-compact .sidebar-link.inv-sidebar-link::before { content: none; display: none; }

/* Indicador inferior en estado activo (modo compacto) */
body.sidebar-compact .sidebar-link.inv-sidebar-link.active::before,
body.sidebar-compact .sidebar-link.inv-sidebar-link.is-active::before {
  content: '';
  display: block;
  left: 50%;
  right: auto;
  top: auto;
  bottom: -4px;
  width: 24px;
  height: 3px;
  transform: translateX(-50%);
}

/* Marca centrada en modo compacto */
body.sidebar-compact .inv-sidebar-brand {
  justify-content: center;
  padding: 6px 0 12px;
}

body.sidebar-compact .inv-sidebar-brand img { width: 46px; height: 38px; }

/* Oculta texto de marca, scope y labels */
body.sidebar-compact .inv-sidebar-brand div,
body.sidebar-compact .inv-sidebar-scope,
body.sidebar-compact .inv-sidebar-label,
body.sidebar-compact .inv-sidebar-link span { display: none; }

/* — La marca como conmutador de SISTEMA (Inventario <-> Procura) —
   Es un <button> con pinta de marca: hay que devolverle el ancho, el fondo y la
   alineación que el reset de botones le quita. El selector lleva el tag `button`
   para ganarle a la global button:not(.hamburger) de app.css. El icono de
   intercambio solo se enciende al pasar por encima: en reposo la marca debe
   seguir leyéndose como marca, no como control. */
button.inv-sidebar-brand--switch {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
button.inv-sidebar-brand--switch:hover { background: rgba(255, 255, 255, .05); }
button.inv-sidebar-brand--switch:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.inv-sidebar-brand-switch-icon {
  width: 17px; height: 17px; flex: none; margin-left: auto;
  color: rgba(226, 232, 240, .55);
  opacity: .55;
  transition: opacity .18s ease, color .18s ease;
}
button.inv-sidebar-brand--switch:hover .inv-sidebar-brand-switch-icon { opacity: 1; color: #fff; }
body.sidebar-compact .inv-sidebar-brand-switch-icon { display: none; }

/* Mismo conmutador en el shell del solicitante, que no tiene sidebar: ahí la
   marca vive en la navbar clara, así que el icono va en tono oscuro. */
button.navbar-brand--switch {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0;
  cursor: pointer; font: inherit; color: var(--primary); text-align: left;
}
.navbar-brand-switch-icon {
  width: 16px; height: 16px; flex: none;
  opacity: .45;
  transition: opacity .18s ease;
}
button.navbar-brand--switch:hover .navbar-brand-switch-icon { opacity: 1; }
button.navbar-brand--switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 10px; }


/* =============================================================================
   6b. SIDEBAR — GRUPOS DE MÓDULO EXPANDIBLES
   =============================================================================
   Cada área es un grupo plegable: cabecera (ícono + nombre + badge de
   pendientes + chevron) y una sublista de acciones (Panel, Aprobaciones,
   Almacenes, Productos...). El grupo del módulo activo se abre solo.
   ----------------------------------------------------------------------------- */
.inv-nav-group { margin: 1px 0; }

/* — Cabecera del grupo (botón) — */
.inv-nav-group-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(100% - 12px);
  margin: 3px 6px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  color: rgba(255, 255, 255, .9);
  background: transparent;
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .18s, color .18s;
}

.inv-nav-group-toggle:hover { background: rgba(255, 255, 255, .055); color: #fff; }

.inv-nav-group-toggle svg.inv-nav-group-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(191, 219, 254, .86);
  opacity: .72;
}

.inv-nav-group.is-active > .inv-nav-group-toggle { color: #fff; background: rgba(37, 99, 235, .14); }
.inv-nav-group.is-active > .inv-nav-group-toggle svg.inv-nav-group-icon { opacity: 1; }

.inv-nav-group-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* — Badge de pendientes — */
.inv-nav-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}

/* — Chevron que rota al abrir — */
.inv-nav-chevron {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-left: auto;
  color: rgba(148, 163, 184, .85);
  transition: transform .2s ease;
}
.inv-nav-group.is-open .inv-nav-chevron { transform: rotate(90deg); }

/* — Sublista plegable (transición de altura con grid) — */
.inv-nav-sublist {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0 6px;
  transition: grid-template-rows .22s ease;
}
.inv-nav-group.is-open .inv-nav-sublist { grid-template-rows: 1fr; }
.inv-nav-sublist > div { overflow: hidden; }

/* — Sub-enlaces — */
.inv-nav-sublink {
  position: relative;
  display: flex;
  align-items: center;
  margin: 2px 0 2px 17px;
  padding: 9px 12px 9px 16px;
  border-left: 1px solid rgba(148, 163, 184, .22);
  border-radius: 0 10px 10px 0;
  color: rgba(226, 232, 240, .80);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .16s, color .16s;
}
.inv-nav-sublink::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: rgba(148, 163, 184, .32);
  transform: translateY(-50%);
}
.inv-nav-sublink:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.inv-nav-sublink.is-active {
  background: linear-gradient(135deg, rgba(37, 99, 235, .92), rgba(49, 86, 211, .92));
  color: #fff;
  border-left-color: transparent;
}

/* — Selector de modulo: panel inset con filas tipo navegacion — */
.inv-module-pills {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 8px 8px;
  padding: 5px;
  border-radius: 16px;
  background: rgba(2, 6, 23, .35);
  border: 1px solid rgba(148, 163, 184, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.inv-module-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 11px;
  color: rgba(226, 232, 240, .74);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
/* Chip del icono */
.inv-module-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  padding: 5px;
  box-sizing: content-box;
  border-radius: 9px;
  background: rgba(148, 163, 184, .12);
  color: rgba(191, 219, 254, .9);
  transition: background .16s ease, color .16s ease;
}
.inv-module-pill-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-module-pill:hover {
  background: rgba(255, 255, 255, .05);
  color: #fff;
  text-decoration: none;
}
.inv-module-pill:hover svg { background: rgba(148, 163, 184, .2); color: #fff; }
.inv-module-pill.is-active {
  background: linear-gradient(135deg, #2563eb 0%, #3156d3 100%);
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(37, 99, 235, .65);
}
.inv-module-pill.is-active svg { background: rgba(255, 255, 255, .18); color: #fff; }
.inv-module-pill-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: .64rem;
}

/* Acciones del modulo activo: lista indentada con guia vertical */
.inv-module-actions {
  position: relative;
  margin: 0 10px 6px 22px;
  padding-left: 12px;
}
.inv-module-actions::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(rgba(37, 99, 235, .55), rgba(37, 99, 235, .06));
}
.inv-module-actions .inv-nav-sublink {
  margin: 1px 0;
  padding: 8px 12px;
  border-left: 0;
  border-radius: 9px;
  color: rgba(226, 232, 240, .72);
}
.inv-module-actions .inv-nav-sublink::before {
  left: -12px;
  width: 12px;
  background: rgba(148, 163, 184, .28);
}
.inv-module-actions .inv-nav-sublink:hover { background: rgba(255, 255, 255, .05); }
.inv-module-actions .inv-nav-sublink.is-active {
  background: rgba(37, 99, 235, .16);
  color: #fff;
}
.inv-module-actions .inv-nav-sublink.is-active::before {
  background: #3b82f6;
  height: 2px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}

/* Compacto: panel sin marco, iconos centrados; acciones ocultas */
body.sidebar-compact .inv-module-pills {
  margin: 0 6px 6px;
  padding: 4px;
  gap: 4px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  align-items: center;
}
body.sidebar-compact .inv-module-pill { justify-content: center; padding: 5px; }
body.sidebar-compact .inv-module-pill .inv-module-pill-label { display: none; }
body.sidebar-compact .inv-module-pill svg { width: 18px; height: 18px; }
body.sidebar-compact .inv-module-pill-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  margin: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
}
body.sidebar-compact .inv-module-actions { display: none; }

/* — Modo compacto: solo íconos, el header navega al panel del módulo — */
body.sidebar-compact .inv-nav-group-toggle {
  justify-content: center;
  gap: 0;
  font-size: 0;
  padding-left: 0;
  padding-right: 0;
}
body.sidebar-compact .inv-nav-group-toggle .inv-nav-group-label,
body.sidebar-compact .inv-nav-chevron { display: none; }
body.sidebar-compact .inv-nav-sublist { display: none; }
body.sidebar-compact .inv-nav-group-toggle svg.inv-nav-group-icon { width: 19px; height: 19px; }
body.sidebar-compact .inv-nav-badge {
  position: absolute;
  top: 5px;
  right: 7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: .58rem;
}


/* =============================================================================
   7. LAYOUT DE CONTENIDO PRINCIPAL
   =============================================================================
   El área de contenido se desplaza a la derecha del sidebar en desktop.
   ----------------------------------------------------------------------------- */

/* — Área de contenido — */
.content.inv-app-frame {
  min-width: 0;
  min-height: 100vh;
  margin-left: var(--side-w);      /* Compensa el ancho del sidebar */
  padding-top: var(--nav-h);       /* Compensa el alto del topbar */
  transition: margin-left .22s ease;
}

/* Sin sidebar */
.content--full.inv-app-frame { margin-left: 0; }

/* Ajuste de margen en modo compacto */
body.sidebar-compact .content.inv-app-frame { margin-left: var(--side-w-compact); }

/* — Página interna — */
.page.app-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 28px;
}

.content--full.inv-app-frame .page.app-main {
  width: 100%;
  max-width: none;
}

/* — Contenedor del frame de la app — */
.inv-app-frame { min-width: 0; }

/* — Utilidades de íconos pequeños — */
.icon-search-sm { width: 15px; height: 15px; }

/* — Clases de control dinámico — */
.dynamic-item-label {
  display: block;
  margin-bottom: 5px;
  font-size: .78rem;
  font-weight: 700;
}

.dynamic-item-control { width: 100%; }

.field-hint--spaced { margin-top: 6px; }


/* =============================================================================
   8. AUTENTICACIÓN / LOGIN
   =============================================================================
   Pantalla de inicio de sesión dividida en dos columnas:
   izquierda = formulario, derecha = branding.
   ----------------------------------------------------------------------------- */

/* — Body en modo auth (fondo imagen) — */
body.auth-body {
  margin: 0;
  min-height: 100vh;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: url('../img/background.jpg') center/cover no-repeat;
}

body.auth-body > .auth-shell {
  width: 100%;
  max-width: none;
  display: block;
  gap: 0;
}

/* — Página contenedor con overlay oscuro — */
.inv-login-page {
  height: 100vh;
  height: 100svh;
  display: block;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .70), rgba(15, 23, 42, .52)),
    url('../img/background.jpg') center/cover no-repeat fixed;
}

/* — Tarjeta principal (dos columnas) — */
.inv-login-card {
  width: min(1060px, 100%);
  min-height: 590px;
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 28px;
  background: #0d1526;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .38);
}

/* — Panel lateral oscuro (branding + áreas) — */
.inv-login-side {
  padding: 34px;
  display: grid;
  align-content: center;
  gap: 26px;
  color: #fff;
}

/* — Marca (logo + nombre + subtítulo) — */
.inv-brand {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.inv-logo-box {
  width: 132px;
  height: 92px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 10px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .08));
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.inv-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.inv-brand h1 { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 900; }
.inv-brand p  { margin: 0; color: rgba(255, 255, 255, .48); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* — Grilla de áreas/módulos seleccionables — */
.inv-area-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.inv-area-link {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.inv-area-link:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  transform: translateY(-1px);
  text-decoration: none;
}

.inv-area-link.is-active { background: rgba(37, 99, 235, .26); border-color: rgba(96, 165, 250, .62); }
.inv-area-link strong   { display: block; font-size: 14px; line-height: 1.2; font-weight: 800; }
.inv-area-link span     { display: block; color: #93c5fd; font-size: 12px; font-weight: 800; }

/* — Dots decorativos (rojo / amarillo / verde) — */
.inv-dots { display: flex; justify-content: center; gap: 10px; }
.inv-dots span { width: 13px; height: 13px; border-radius: 50%; }
.inv-dots span:nth-child(1) { background: #ef4444; }
.inv-dots span:nth-child(2) { background: #f59e0b; }
.inv-dots span:nth-child(3) { background: #22c55e; }

/* — Panel del formulario (fondo blanco) — */
.inv-form-panel {
  display: grid;
  align-content: center;
  padding: 46px;
  background: #fff;
  border-radius: 28px 0 0 28px;
  box-shadow: -14px 0 48px rgba(0, 0, 0, .18);
}

.inv-form-card { width: min(100%, 430px); margin: 0 auto; display: grid; gap: 20px; }

/* — Encabezado del formulario — */
.inv-form-head { display: grid; gap: 6px; }
.inv-form-head h2 { margin: 0; color: #0d1526; font-size: 26px; line-height: 1.2; font-weight: 800; }
.inv-form-head p  { margin: 0; color: #64748b; font-size: 14px; }

/* — Contenedores de flash y formulario — */
.inv-flashes { display: grid; gap: 10px; }
.inv-form    { display: grid; gap: 18px; }

/* — Etiquetas de campo — */
.inv-label {
  display: block;
  margin-bottom: 7px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* — Select estilizado con ícono — */
.inv-select-wrap {
  min-height: 52px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 6px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.inv-select-wrap:focus-within {
  border-color: #1565c0;
  box-shadow: 0 16px 34px rgba(21, 101, 192, .12), 0 0 0 4px rgba(21, 101, 192, .10);
}

.inv-select-wrap.is-disabled { opacity: .6; background: #f8fafc; }

/* Ícono dentro del select */
.inv-field-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #1565c0; }
.inv-field-icon svg { width: 18px; height: 18px; }

.inv-select-wrap select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #0d1526; font: inherit; font-weight: 700; }

/* Select con búsqueda */
.inv-select-wrap .searchable-select { width: 100%; min-width: 0; }
.inv-select-wrap .searchable-select-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0d1526;
  font: inherit;
  font-weight: 700;
  padding: 0 34px 0 0 !important;
}
.inv-select-wrap .searchable-select-input:disabled { color: #94a3b8; }
.inv-select-wrap .searchable-select::after { right: 14px; top: 50%; margin-top: -5px; }

/* — Campo de texto con borde inferior (estilo underline) — */
.inv-field input {
  width: 100%;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1.5px solid #e2e8f0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #0d1526;
  font: inherit;
}
.inv-field input::placeholder { color: #cbd5e1; }
.inv-field input:focus { border-bottom-color: #1565c0; }
.inv-captcha-row { display: flex; align-items: center; gap: 12px; }
.inv-captcha-q { font-size: 20px; font-weight: 800; color: #0d1526; letter-spacing: .04em; padding: 6px 12px; background: #f1f5f9; border-radius: 8px; user-select: none; white-space: nowrap; }
.inv-captcha-row input { flex: 1; }
.inv-captcha-hint { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #b45309; }

/* — Campo de contraseña con botón de mostrar/ocultar — */
.inv-pass { position: relative; }
.inv-pass input { padding-right: 46px; }

button.inv-eye {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #eff6ff;
  color: #1565c0;
  display: grid;
  gap: 0;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
button.inv-eye:hover { background: #dbeafe; color: #1565c0; }

/* — Botón principal de submit — */
button.inv-submit {
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #1d4ed8, #2445bd);
  color: #fff;
  font: inherit;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(29, 78, 216, .24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
}
button.inv-submit:hover    { background: linear-gradient(135deg, #1e40af, #1d3da3); color: #fff; }
button.inv-submit:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }



/* =============================================================================
   8b. LOGIN CON TARJETAS PROTAGONISTAS (tema claro y aireado)
   ============================================================================= */
/* Fondo luminoso (reemplaza el overlay oscuro sobre la foto) */
.inv-login-page {
  background: linear-gradient(140deg, #eef2f9 0%, #e6edf7 45%, #eaf0fb 100%);
}

.inv-login-shell {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: #ffffff;
}

/* — Barra superior con marca — */
.inv-login-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 34px;
  border-bottom: 1px solid #eef2f7;
  color: #0f172a;
}
.inv-login-top .inv-logo-box {
  width: 56px;
  height: 48px;
  padding: 6px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e7ecf3;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}
.inv-login-top-text h1 { margin: 0; font-size: 21px; font-weight: 900; line-height: 1.1; color: #0f172a; }
.inv-login-top-text p { margin: 3px 0 0; color: #94a3b8; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* — Cuerpo: tarjetas (héroe) + formulario — */
.inv-login-body { display: grid; grid-template-columns: minmax(0, 1fr) 440px; min-height: 0; }

.inv-areas-hero {
  padding: clamp(24px, 3.4vw, 56px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(14px, 2vh, 24px);
  background: #f8fafc;
  min-height: 0;
  overflow: auto;
}
.inv-areas-hero-head h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 34px); font-weight: 900; line-height: 1.12; color: #0f172a; }
.inv-areas-hero-head p  { margin: 0; color: #64748b; font-size: 15px; }

.inv-area-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  grid-auto-rows: minmax(186px, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  min-height: 0;
}

/* Acento de color por área (se usa en estado normal/hover; la selección es azul) */
.inv-area-card--archivos     { --area-color: #2563eb; --area-tint: #eff6ff; }
.inv-area-card--herramientas { --area-color: #ea580c; --area-tint: #fff7ed; }
.inv-area-card--llaves        { --area-color: #d97706; --area-tint: #fffbeb; }
.inv-area-card--miscelaneos  { --area-color: #16a34a; --area-tint: #f0fdf4; }
.inv-area-card--materiales   { --area-color: #9333ea; --area-tint: #faf5ff; }

/* — Tarjeta protagonista: cuadrada, moderna, legible — */
.inv-area-card {
  position: relative;
  min-height: 186px;
  max-height: 300px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  padding: clamp(18px, 2vw, 26px);
  border-radius: 22px;
  text-decoration: none;
  color: #0f172a;
  background: #ffffff;
  border: 1.5px solid #e6ebf2;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.inv-area-card:hover {
  transform: translateY(-4px);
  border-color: var(--area-color, #c7d2fe);
  box-shadow: 0 18px 38px rgba(15, 23, 42, .14);
  text-decoration: none;
}

.inv-area-card-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--area-tint, #eff6ff);
  color: var(--area-color, #2563eb);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.inv-area-card-icon svg { width: 30px; height: 30px; }

.inv-area-card strong { font-size: 19px; font-weight: 800; line-height: 1.2; color: #0f172a; }
.inv-area-card small  {
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.inv-area-card-cta {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 800;
  color: var(--area-color, #2563eb);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease, color .18s ease;
}
.inv-area-card:hover .inv-area-card-cta { opacity: 1; transform: none; }

/* — Foco accesible — */
.inv-area-card:focus-visible {
  outline: 0;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .35);
}

/* — Selección: halo de luz azul — */
.inv-area-card.is-active {
  border-color: #2563eb;
  background: #f4f8ff;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, .45),
    0 0 26px rgba(37, 99, 235, .50),
    0 18px 40px rgba(37, 99, 235, .26);
}
.inv-area-card.is-active .inv-area-card-icon {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .45);
}
.inv-area-card.is-active .inv-area-card-cta { opacity: 1; transform: none; color: #2563eb; }

/* — Panel del formulario — */
.inv-login-form-panel {
  background: #fff;
  padding: clamp(28px, 4vw, 60px) clamp(24px, 3vw, 52px);
  display: grid;
  align-content: center;
  border-left: 1px solid #eef2f7;
  min-height: 0;
  overflow: hidden;
}
.inv-form-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 4px;
}

/* Tablets y móviles: liberar el alto, permitir scroll y quitar el cuadrado estricto */
@media (max-width: 1024px) {
  body.auth-body { height: auto; min-height: 100svh; overflow: auto; }
  .inv-login-page { height: auto; min-height: 100svh; overflow: visible; }
  .inv-login-shell { height: auto; min-height: 100svh; grid-template-rows: auto auto; overflow: visible; }
  .inv-login-body { grid-template-columns: 1fr; }
  .inv-areas-hero { grid-template-rows: none; align-content: start; overflow: visible; padding: clamp(24px, 5vw, 44px); }
  .inv-area-cards { grid-auto-rows: auto; }
  .inv-area-card { min-height: 150px; max-height: none; }
  .inv-login-form-panel { padding: 30px 26px; border-left: 0; border-top: 1px solid #eef2f7; align-content: start; overflow: visible; }
}
@media (max-width: 520px) {
  .inv-login-top { padding: 16px 20px; }
  .inv-areas-hero { padding: 22px 20px; }
  .inv-login-form-panel { padding: 24px 20px; }
  .inv-area-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .inv-area-card { padding: 14px 12px; }
  .inv-area-card small { display: none; }
  .inv-area-card-icon { width: 40px; height: 40px; }
}

/* =============================================================================
   LOGIN MÓVIL EN DOS PASOS (solo ≤520px)
   Paso 1: elegir módulo · Paso 2: formulario. El estado lo controla la clase
   .is-step-form en .inv-login-shell (la pone/quita el JS de la vista de login).
   ============================================================================= */
/* El botón "volver" solo existe en el flujo móvil: oculto en tablet/desktop.
   Selector con tag (button.inv-step-back) para ganarle en especificidad a la
   regla global button:not(.hamburger){display:inline-flex} de app.css. */
button.inv-step-back { display: none; }

@keyframes invStepIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  /* Paso 1 (por defecto, solo con JS activo): selector visible, form oculto.
     Sin JS no se añade .js-twostep y se conserva el apilado normal. */
  .inv-login-shell.js-twostep .inv-login-form-panel { display: none; }

  /* Paso 2: formulario visible (entra deslizando), selector oculto. */
  .inv-login-shell.js-twostep.is-step-form .inv-areas-hero { display: none; }
  .inv-login-shell.js-twostep.is-step-form .inv-login-form-panel {
    display: grid;
    animation: invStepIn .22s ease;
  }

  /* Botón "Cambiar módulo" (cápsula con flecha, área táctil ≥44px). */
  button.inv-step-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: start;
    margin-bottom: 18px;
    padding: 10px 16px 10px 12px;
    min-height: 44px;
    border: 1px solid #e6ebf2;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
  }
  .inv-step-back svg { width: 18px; height: 18px; }
  .inv-step-back:active { transform: scale(.98); }

  /* Encabezado del selector más compacto para ganar altura. */
  .inv-areas-hero-head h2 { font-size: 23px; }

  /* Ergonomía táctil: inputs ≥16px evita el zoom automático de iOS Safari. */
  .inv-field input,
  .inv-select-wrap select,
  .inv-select-wrap .searchable-select-input { font-size: 16px; }
  button.inv-eye { width: 44px; height: 44px; }
  button.inv-submit { min-height: 52px; }
}

/* Monitores grandes (24"/27"+): el login se ve pequeno con tamanos base,
   asi que se escalan barra, heroe, tarjetas y formulario. */
@media (min-width: 1700px) {
  .inv-login-top { padding: 26px 52px; gap: 18px; }
  .inv-login-top .inv-logo-box { width: 66px; height: 56px; }
  .inv-login-top-text h1 { font-size: 26px; }
  .inv-login-top-text p { font-size: 12.5px; }

  .inv-login-body { grid-template-columns: minmax(0, 1fr) 540px; }
  .inv-areas-hero-head h2 { font-size: 42px; }
  .inv-areas-hero-head p { font-size: 18px; }

  .inv-area-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: minmax(214px, 1fr); }
  .inv-area-card { min-height: 214px; border-radius: 26px; }
  .inv-area-card-icon { width: 72px; height: 72px; border-radius: 22px; }
  .inv-area-card-icon svg { width: 36px; height: 36px; }
  .inv-area-card strong { font-size: 23px; }
  .inv-area-card small { font-size: 15px; }
  .inv-area-card-cta { font-size: 15px; }

  .inv-form-card { width: min(100%, 480px); gap: 24px; }
  .inv-form-head h2 { font-size: 30px; }
  .inv-form-head p { font-size: 16px; }
  .inv-label { font-size: 13px; }
  .inv-field input, .inv-select-wrap select { font-size: 17px; }
  .inv-select-wrap { min-height: 58px; }
  button.inv-submit { min-height: 56px; font-size: 16px; }
}

@media (min-width: 2300px) {
  .inv-login-body { grid-template-columns: minmax(0, 1fr) 640px; }
  .inv-areas-hero-head h2 { font-size: 52px; }
  .inv-areas-hero-head p { font-size: 21px; }
  .inv-area-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows: minmax(250px, 1fr); }
  .inv-area-card { min-height: 250px; }
  .inv-area-card-icon { width: 84px; height: 84px; }
  .inv-area-card-icon svg { width: 42px; height: 42px; }
  .inv-area-card strong { font-size: 27px; }
  .inv-area-card small { font-size: 17px; }
  .inv-form-card { width: min(100%, 540px); }
  .inv-form-head h2 { font-size: 34px; }
  .inv-field input, .inv-select-wrap select { font-size: 19px; }
  button.inv-submit { min-height: 62px; font-size: 18px; }
}


/* =============================================================================
   9. TABLERO DE LLAVES (KEY BOARD)
   =============================================================================
   Vista especial para gestión de llaves físicas: casillas con ícono de llave,
   panel de solicitud y estadísticas de estado.
   ----------------------------------------------------------------------------- */

/* — Shell de dos columnas — */
/* Vista del solicitante: sidebar izquierda + tablero a la derecha (layout original). */
.inv-key-shell {
  min-height: calc(100vh - 116px);
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  /* NO animar grid-template-columns: forzaria relayout+repaint de todo el
     tablero de llaves en cada frame (lag al contraer). El cambio de ancho es
     instantaneo (un solo reflow); la suavidad se da animando el contenido del
     panel lateral, que es barato (opacity/transform). */
}

.inv-key-side,
.inv-key-toprow,
.inv-key-board-panel { min-width: 0; }

.inv-key-side { display: grid; align-content: start; gap: 16px; }

/* Vista admin: Gestión y Estado lado a lado (50% c/u) sobre el tablero a todo el ancho. */
.inv-key-shell--admin { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
.inv-key-shell--admin .inv-key-toprow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }

/* — Paneles genéricos — */
.inv-key-request,
.inv-key-board-panel {
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

/* — Panel de solicitud de llave — */
.inv-key-request { display: grid; gap: 16px; padding: 20px; }

/* — Panel de admin (contexto informativo) — */
.inv-key-admin-panel {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .9)),
    linear-gradient(135deg, rgba(219, 234, 254, .62), rgba(220, 252, 231, .44));
}
.inv-key-admin-copy  { margin: 0; color: #475569; font-weight: 700; line-height: 1.45; }

/* — Hero visual con gráfico de llave colgada — */
.inv-key-admin-hero {
  position: relative;
  min-height: 156px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(239, 246, 255, .86)),
    repeating-linear-gradient(90deg, transparent 0, transparent 54px, rgba(148, 163, 184, .14) 55px);
  overflow: hidden;
}
.inv-key-admin-hero .inv-key-peg       { top: 24px; left: 50%; margin-left: -15px; }
.inv-key-admin-hero .inv-key-hook-line { top: 49px; left: 50%; margin-left: -2px; }
.inv-key-admin-hero .inv-hanging-key   { top: 82px; left: 50%; margin-left: -21px; }

/* — Encabezados de paneles — */
.inv-key-request header,
.inv-key-board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.inv-key-request h2,
.inv-key-board-head h1 { margin: 0; color: #0f172a; font-weight: 900; }

.inv-key-request label  { display: grid; gap: 8px; color: #334155; font-weight: 900; }
.inv-key-request textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 12px;
  font: inherit;
  color: #0f172a;
  background: #fff;
}

/* — Tarjeta de llave seleccionada — */
.inv-key-selected-empty,
.inv-key-selected-card {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 16px;
  display: grid;
  gap: 6px;
  background: #f8fafc;
}
.inv-key-selected-empty strong,
.inv-key-selected-card strong { color: #0f172a; }
.inv-key-selected-empty span,
.inv-key-selected-card small { color: #64748b; font-weight: 700; }

.inv-key-selected-card {
  border-style: solid;
  border-color: #93c5fd;
  background: #eff6ff;
}
.inv-key-selected-card > span {
  width: max-content;
  padding: 6px 10px;
  border-radius: 8px;
  background: #1e3a8a;
  color: #fff;
  font-weight: 900;
}

/* Botones dentro de la tarjeta y botón de submit */
.inv-key-selected-card button,
.inv-key-submit {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.inv-key-selected-card button { width: max-content; padding: 0 14px; background: #fff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.inv-key-submit { width: 100%; background: #1d4ed8; color: #fff; box-shadow: 0 12px 24px rgba(29, 78, 216, .20); }

/* — Lista de llaves seleccionadas (multi-seleccion) — */
.inv-key-selected-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}
.inv-key-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  background: #eff6ff;
}
.inv-key-chip-info { display: grid; gap: 2px; min-width: 0; flex: 1; }
.inv-key-chip-code {
  width: max-content;
  padding: 2px 8px;
  border-radius: 6px;
  background: #1e3a8a;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.inv-key-chip-info strong { color: #0f172a; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-key-chip-info small  { color: #64748b; font-weight: 700; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* `button.` para ganarle a la regla global `button:not(.hamburger)` (azul). */
button.inv-key-chip-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff;
  color: #b91c1c;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
button.inv-key-chip-remove:hover { background: #fef2f2; color: #991b1b; }

/* — Paginador de listas ("Mis llaves") — */
.inv-key-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.inv-key-pager span { font-size: 12px; font-weight: 800; color: #475569; min-width: 92px; text-align: center; }
.inv-key-pager button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
  color: #1d4ed8;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.inv-key-pager button:hover:not(:disabled) { background: #eff6ff; color: #1d4ed8; }
.inv-key-pager button:disabled { color: #cbd5e1; border-color: #e2e8f0; background: #fff; cursor: not-allowed; }

/* — Contraer la columna izquierda del solicitante para ampliar el tablero — */
button.inv-key-side-toggle {
  width: 100%;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  color: #1d4ed8;
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
button.inv-key-side-toggle:hover { border-color: #93c5fd; color: #1d4ed8; box-shadow: 0 8px 18px -10px rgba(29, 78, 216, .55); }
.inv-key-side-toggle-icon { font-size: 15px; line-height: 1; transition: transform .3s ease; }

/* Estado contraído (solo escritorio: en móvil la columna se apila, no aplica). */
@media (min-width: 981px) {
  .inv-key-shell.is-side-collapsed { grid-template-columns: 48px minmax(0, 1fr); }
  .inv-key-shell.is-side-collapsed .inv-key-side { gap: 0; justify-items: center; }
  .inv-key-shell.is-side-collapsed .inv-key-side > :not(.inv-key-side-toggle) { display: none; }
  /* El botón se vuelve un handle redondo con la flecha hacia afuera. */
  .inv-key-shell.is-side-collapsed .inv-key-side-toggle {
    width: 40px;
    height: 40px;
    min-height: 40px;
    margin-top: 2px;
    padding: 0;
    border-radius: 999px;
    border-color: #1d4ed8;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 10px 20px -8px rgba(29, 78, 216, .6);
  }
  .inv-key-shell.is-side-collapsed .inv-key-side-toggle:hover { box-shadow: 0 12px 26px -8px rgba(29, 78, 216, .75); }
  .inv-key-shell.is-side-collapsed .inv-key-side-toggle-text { display: none; }
  .inv-key-shell.is-side-collapsed .inv-key-side-toggle-icon { transform: rotate(180deg); }
}
@media (max-width: 980px) {
  /* El boton de contraer no aplica cuando la columna ya se apila. */
  .inv-key-side-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .inv-key-shell { transition: none; }
  .inv-key-side-toggle-icon { transition: none; }
}

/* — Carrito flotante: conteo de llaves seleccionadas — */
button.inv-key-cart {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 16px 32px -10px rgba(29, 78, 216, .7);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
button.inv-key-cart:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -10px rgba(29, 78, 216, .8); }
button.inv-key-cart:active { transform: translateY(0); }
button.inv-key-cart svg { width: 24px; height: 24px; }
.inv-key-cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}
button.inv-key-cart.is-bump { animation: invKeyCartBump .32s ease; }
@keyframes invKeyCartBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  button.inv-key-cart.is-bump { animation: none; }
}
@media (max-width: 640px) {
  button.inv-key-cart { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

/* — Tablero agrupado por punto comercial (vista del solicitante) — */
/* Doble clase para ganarle a `.inv-key-board { grid-template-columns: auto-fill }`. */
.inv-key-board.inv-key-board--grouped {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-content: start;
}
.inv-key-group { display: grid; gap: 10px; }
.inv-key-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* `button.` para ganarle a la regla global `button:not(.hamburger)` (azul). */
button.inv-key-group-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  text-align: left;
}
button.inv-key-group-toggle:hover { border-color: #bfdbfe; background: #f8fbff; color: #0f172a; }
.inv-key-group-caret { color: #64748b; font-size: 12px; transition: transform .18s ease; }
.inv-key-group.is-collapsed .inv-key-group-caret { transform: rotate(-90deg); }
.inv-key-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.inv-key-group-count {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 26px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
button.inv-key-group-select {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #fff;
  color: #1d4ed8;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
button.inv-key-group-select:hover { background: #eff6ff; color: #1d4ed8; }
button.inv-key-group-select:disabled { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; cursor: not-allowed; }
.inv-key-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  align-content: start;
}
.inv-key-group.is-collapsed .inv-key-group-grid { display: none; }

/* — Panel de estado (sin sombra extra) — */
.inv-key-status-panel { box-shadow: none; }

/* — Grilla de filtros por estado de llave —
   Cada tarjeta lleva el color semantico de su estado (--st): disponible verde,
   prestada azul, extraviada rojo, etc. Los estados en cero se atenuan para que
   destaquen los conteos reales. Se califica con `button.` + clase propia para
   ganarle a la regla global `button:not(.hamburger):not([class])` (azul). */
.inv-key-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

button.inv-key-status-card {
  --st: #64748b;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  min-height: 76px;
  padding: 12px 14px 12px 17px;
  border: 1px solid #e6ebf3;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
/* Franja de acento del color del estado */
button.inv-key-status-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--st);
  opacity: .9;
}
.inv-key-status-card-dot {
  grid-row: 1 / span 2;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--st);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 16%, transparent);
}
button.inv-key-status-card strong {
  grid-column: 2;
  color: var(--st);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}
.inv-key-status-card-label {
  grid-column: 2;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  letter-spacing: .01em;
}
button.inv-key-status-card:hover {
  border-color: color-mix(in srgb, var(--st) 55%, #e6ebf3);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .09);
  transform: translateY(-1px);
}
button.inv-key-status-card:focus-visible {
  outline: 2px solid var(--st);
  outline-offset: 2px;
}
button.inv-key-status-card.is-active {
  background: color-mix(in srgb, var(--st) 10%, #fff);
  border-color: var(--st);
  box-shadow: 0 0 0 1px var(--st) inset;
}
/* Estados en cero: atenuados (no compiten visualmente con los conteos reales) */
button.inv-key-status-card.is-empty {
  --st: #94a3b8;
  background: #f8fafc;
}
button.inv-key-status-card.is-empty strong { color: #94a3b8; }

/* Paleta semantica por estado (despues de la base para ganar por orden) */
button.inv-key-status-card--disponible    { --st: #16a34a; }
button.inv-key-status-card--prestada      { --st: #2563eb; }
button.inv-key-status-card--alquilada     { --st: #7c3aed; }
button.inv-key-status-card--vacante       { --st: #64748b; }
button.inv-key-status-card--revision      { --st: #d97706; }
button.inv-key-status-card--mantenimiento { --st: #0891b2; }
button.inv-key-status-card--extraviada    { --st: #dc2626; }

/* — Numeros libres del SKU (huecos para asignar) — */
.inv-key-free-numbers { display: grid; gap: 8px; margin-top: 14px; }
.inv-key-free-numbers-title { font-size: 12px; font-weight: 900; color: #475569; text-transform: uppercase; letter-spacing: .03em; }
.inv-key-free-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 132px; overflow-y: auto; padding: 2px; }
.inv-key-free-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 4px 8px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 900;
}
.inv-key-free-empty { margin: 0; font-size: 12px; font-weight: 700; color: #64748b; }
.inv-key-free-next { font-size: 12px; font-weight: 700; color: #475569; }
.inv-key-free-next strong { color: #16a34a; font-weight: 900; }

/* — Mini lista de llaves — */
.inv-key-mini-list { display: grid; gap: 10px; }
.inv-key-mini-list article { display: grid; gap: 5px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.inv-key-mini-list span   { width: max-content; padding: 4px 8px; border-radius: 8px; background: #111827; color: #fff; font-size: 12px; font-weight: 900; }
.inv-key-mini-list strong { color: #0f172a; }
.inv-key-mini-list small  { color: #64748b; font-weight: 700; }

/* — Formulario de devolución — */
.inv-key-return-form { display: grid; gap: 8px; margin-top: 8px; }
.inv-key-return-form textarea { width: 100%; resize: vertical; min-height: 62px; border: 1px solid #dbeafe; border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 13px; color: #0f172a; }
.inv-key-return-form button { min-height: 38px; border: 0; border-radius: 8px; background: #0f172a; color: #fff; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }

/* — Badge de devolución pendiente — */
.inv-key-return-pending {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e !important;
}

/* — Panel del tablero de casillas — */
.inv-key-board-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  padding: 20px;
}
.inv-key-board-head h1  { font-size: clamp(28px, 3vw, 42px); }
.inv-key-board-head p   { max-width: 780px; margin: 6px 0 0; color: #475569; line-height: 1.5; }

/* — Barra de búsqueda + filtro de punto comercial (vista admin) — */
.inv-key-board-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inv-key-board-toolbar .inv-catalog-searchbox { flex: 1 1 320px; }
.inv-key-punto-filter { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.inv-key-punto-filter > span { font-size: 12px; font-weight: 800; color: #64748b; padding-left: 2px; }
.inv-key-punto-filter select {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  color: #0f172a;
}

/* — Estadísticas del tablero — */
.inv-key-board-stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.inv-key-board-stats span {
  min-width: 118px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-weight: 800;
  text-align: center;
}
.inv-key-board-stats strong { display: block; color: #0f172a; font-size: 24px; line-height: 1; }

/* — Tablero (grilla de casillas) — */
.inv-key-board {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-content: start;
  gap: 14px;
  padding: 14px;
  border: 1px solid #d7e2de;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .92)),
    repeating-linear-gradient(0deg, #eef3f1 0, #eef3f1 86px, #dce7e3 87px, #dce7e3 91px);
}

/* — Casilla individual — */
.inv-key-slot {
  min-height: 278px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.inv-key-slot:hover,
.inv-key-slot.is-selected { transform: translateY(-1px); border-color: #1d4ed8; box-shadow: 0 14px 28px rgba(29, 78, 216, .12); }
.inv-key-slot.is-empty    { border-style: dashed; background: #f8fafc; cursor: default; }
.inv-key-slot.is-review   { border-color: #f59e0b; background: #fffbeb; }
/* En el tablero del solicitante, una llave en revision se puede tocar para ver su descripcion. */
.inv-key-board--grouped .inv-key-slot.is-review { cursor: pointer; }
.inv-key-slot.is-rented   { border-color: #9333ea; background: #faf5ff; }
.inv-key-slot.is-rented .inv-missing-key { border-color: #c084fc; color: #7c3aed; background: rgba(255,255,255,.7); }
.inv-key-slot.is-vacant   { border-color: #0d9488; border-style: dashed; background: #f0fdfa; }
.inv-key-slot.is-vacant .inv-missing-key { border-color: #5eead4; color: #0f766e; background: rgba(255,255,255,.7); }
.inv-key-vacant-title { color: #0f766e !important; }
/* Modal de puntos comerciales */
/* .inv-admin-form (display:grid, mas abajo en el archivo) pisaba este flex; subimos especificidad. */
.inv-admin-form.inv-keypoint-add { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 14px; }
.inv-admin-form.inv-keypoint-add .inv-keypoint-add-field { flex: 1; }
.inv-admin-form.inv-keypoint-add .inv-key-submit { flex: 0 0 auto; width: auto; min-width: 110px; }
.inv-field-hint { display: block; margin-top: 4px; font-size: 11px; color: #94a3b8; }
.inv-keypoint-list { display: grid; gap: 8px; max-height: 340px; overflow: auto; padding: 2px; }
.inv-keypoint-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.inv-keypoint-row.is-inactive { opacity: .65; background: #f8fafc; }
.inv-keypoint-edit { display: flex; flex: 1; gap: 6px; align-items: center; min-width: 0; }
.inv-keypoint-edit input { flex: 1; min-width: 0; min-height: 38px; padding: 0 10px; border: 1px solid #dbeafe; border-radius: 9px; font: inherit; font-size: 14px; }
.inv-keypoint-state { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: #64748b; min-width: 56px; text-align: center; text-transform: uppercase; letter-spacing: .03em; }
.inv-keypoint-toggle { flex: 0 0 auto; padding: 7px 12px; font-size: 12.5px; }
.inv-key-export-row { display: flex; gap: 8px; margin-top: 8px; }
.inv-key-export-row .inv-secondary-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
.inv-key-export-row .inv-secondary-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* — Etiqueta de casilla — */
.inv-key-slot-label { display: grid; gap: 4px; }
.inv-key-slot-label span   { width: max-content; padding: 5px 8px; border-radius: 8px; background: #111827; color: #fff; font-size: 12px; font-weight: 900; }
.inv-key-slot-label strong { color: #0f172a; font-size: 18px; line-height: 1.12; }
.inv-key-slot-label small  { color: #64748b; font-weight: 700; line-height: 1.25; }

/* — Gráfico de gancho (hook visual) — */
.inv-key-hook {
  position: relative;
  min-height: 122px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fafc, #eef4f1);
  overflow: hidden;
}
.inv-key-peg {
  position: absolute;
  top: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #111827;
  box-shadow: inset 0 0 0 8px #dbe4e1;
}
.inv-key-hook-line {
  position: absolute;
  top: 40px;
  width: 4px;
  height: 36px;
  border-radius: 8px;
  background: #111827;
}
.inv-key-hook-line::after {
  content: "";
  position: absolute;
  left: -12px;
  bottom: -15px;
  width: 28px;
  height: 24px;
  border: 4px solid #111827;
  border-top: 0;
  border-radius: 0 0 18px 18px;
}

/* — Ícono SVG de llave colgada — */
.inv-hanging-key { position: absolute; top: 61px; width: 42px; height: 76px; filter: drop-shadow(0 10px 12px rgba(15, 23, 42, .18)); }
.inv-key-head    { position: absolute; top: 0; left: 5px; width: 32px; height: 32px; border: 8px solid #b58b22; border-radius: 50%; background: #fff7cc; }
.inv-key-stem    { position: absolute; top: 28px; left: 18px; width: 8px; height: 42px; border-radius: 8px; background: #b58b22; }
.inv-key-tooth   { position: absolute; height: 8px; border-radius: 0 4px 4px 0; background: #b58b22; }
.inv-key-tooth--one { left: 22px; top: 56px; width: 18px; }
.inv-key-tooth--two { left: 22px; top: 68px; width: 13px; }

/* — Placeholder cuando no hay llave — */
.inv-missing-key {
  position: absolute;
  top: 60px;
  width: 78px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 2px dashed #94a3b8;
  border-radius: 8px;
  background: rgba(255, 255, 255, .58);
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

/* — Acción de la casilla (nombre + botón) — */
.inv-key-slot-action { min-height: 46px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.inv-key-slot-action span       { display: grid; gap: 3px; color: #334155; font-size: 13px; font-weight: 900; }
.inv-key-slot-action span small { color: #64748b; font-size: 11px; font-weight: 800; line-height: 1.2; }
.inv-key-slot-action button     { min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: #1d4ed8; color: #fff; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.inv-key-slot-action button:disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed; }


/* =============================================================================
   10. SOLICITUDES DE PRODUCTOS (REQUEST WORKSPACE)
   =============================================================================
   Vista de dos paneles: formulario de solicitud (izquierda) + catálogo (derecha).
   Tiene dos variantes: estándar y táctil (touch, para tablets/quioscos).
   ----------------------------------------------------------------------------- */

/* — Encabezado hero de la sección — */
.inv-request-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: end;
  margin-bottom: 20px;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff, #eff6ff);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}
.inv-request-hero--compact { align-items: center; }
.inv-request-hero h1 { margin: 6px 0 8px; font-size: 32px; line-height: 1.1; }
.inv-request-hero p  { margin: 0; color: #64748b; max-width: 720px; }

/* — Stats del hero — */
.inv-request-stats { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 10px; }
.inv-request-stats div    { padding: 14px; border: 1px solid #dbeafe; border-radius: 16px; background: #fff; }
.inv-request-stats span   { display: block; color: #64748b; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.inv-request-stats strong { display: block; margin-top: 4px; font-size: 28px; line-height: 1; }

/* — Workspace (dos columnas) — */
.inv-request-workspace { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; align-items: stretch; width: 100%; }

/* — Paneles genéricos — */
.inv-request-panel,
.inv-catalog-panel,
.inv-history-panel {
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

/* — Panel de solicitud (sticky) — */
.inv-request-panel { position: sticky; top: 92px; display: grid; gap: 16px; padding: 18px; }
.inv-request-panel h2,
.inv-catalog-head h2 { margin: 4px 0 0; font-size: 18px; }

/* — Área de nota / comentario — */
.inv-request-note { display: grid; gap: 7px; color: #64748b; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.inv-request-note textarea { width: 100%; resize: vertical; min-height: 130px; padding: 12px; border: 1px solid #dbeafe; border-radius: 14px; color: #0f172a; font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; outline: 0; }
.inv-request-note textarea:focus,
.inv-catalog-search:focus,
.inv-qty-input:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .10); }
button.inv-request-note-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #f8fafc;
  color: #0f172a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.inv-request-note-trigger span {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #475569;
}
button.inv-request-note-trigger small {
  padding: 4px 9px;
  border-radius: 999px;
  background: #e0ecff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 900;
}
button.inv-request-note-trigger:hover,
button.inv-request-note-trigger:focus-visible {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
  outline: 0;
}
button.inv-request-note-trigger.has-value {
  border-color: #bfdbfe;
  background: #eff6ff;
}
button.inv-request-note-trigger.has-value small {
  background: #1d4ed8;
  color: #fff;
}
.inv-request-note--collapsed {
  display: block;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #f8fafc;
  overflow: hidden;
}
.inv-request-note--collapsed summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 12px;
  cursor: pointer;
  color: #475569;
  list-style: none;
}
.inv-request-note--collapsed summary::-webkit-details-marker { display: none; }
.inv-request-note--collapsed summary::after {
  content: '+';
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e0ecff;
  color: #1d4ed8;
  font-size: 15px;
  line-height: 1;
}
.inv-request-note--collapsed[open] summary::after { content: '-'; }
.inv-request-note--collapsed textarea {
  min-height: 82px;
  border: 0;
  border-top: 1px solid #dbeafe;
  border-radius: 0;
  background: #fff;
}
.inv-request-note--collapsed textarea:focus,
.inv-request-note--collapsed textarea:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .18);
}

/* — Botón de envío — */
.inv-request-submit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: #1d4ed8;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.inv-request-submit:hover    { background: #1e40af; color: #fff; text-decoration: none; }
.inv-request-submit:disabled { opacity: .58; cursor: not-allowed; }
.inv-request-submit--link    { width: max-content; }

/* — Enlace al historial — */
.inv-request-history-link { justify-self: center; color: #1d4ed8; font-weight: 800; text-decoration: none; }

/* — Variante táctil (tablet / quiosco) — */
.inv-request-workspace--touch {
  grid-template-columns: minmax(360px, 2fr) minmax(0, 3fr);
  gap: 20px;
  height: calc(100dvh - var(--nav-h) - 48px);
  min-height: 0;
  overflow: hidden;
}
.inv-request-workspace--touch .inv-request-panel {
  position: static;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
}
/* Solo la lista del carrito crece y hace scroll; el resto queda fijo. */
.inv-request-workspace--touch .inv-cart-list { flex: 1 1 auto; min-height: 0; }
.inv-request-workspace--touch .inv-request-note,
.inv-request-workspace--touch .inv-request-note-trigger,
.inv-request-workspace--touch .inv-request-submit,
.inv-request-workspace--touch .inv-request-history-link,
.inv-request-workspace--touch .inv-cart-summary,
.inv-request-workspace--touch .inv-cart-empty { flex: none; }

/* — Resumen del carrito — */
.inv-cart-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #f8fafc;
}
.inv-cart-summary span   { color: #64748b; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.inv-cart-summary strong { min-width: 42px; min-height: 42px; display: grid; place-items: center; border-radius: 12px; background: #1d4ed8; color: #fff; font-size: 22px; line-height: 1; }
.inv-request-kind {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}
.inv-request-kind legend {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.inv-request-kind label {
    cursor: pointer;
}
.inv-request-kind input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.inv-request-kind span {
    display: grid;
    gap: 3px;
    min-height: 76px;
    padding: 12px;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #0f172a;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.inv-request-kind strong {
    font-size: 14px;
    font-weight: 900;
}
.inv-request-kind small {
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.25;
}
.inv-request-kind input:checked + span {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.inv-request-kind input:focus-visible + span {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.inv-request-type {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: #e2e8f0;
    color: #334155;
}
.inv-request-type--prestamo { background: #dbeafe; color: #1d4ed8; }
.inv-request-type--salida { background: #fee2e2; color: #b91c1c; }
.inv-request-type--devolucion { background: #dcfce7; color: #15803d; }
.inv-request-type--consignacion { background: #fef3c7; color: #92400e; }
.inv-approval-compact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.inv-approval-compact-head h1 {
    margin: 3px 0 0;
    font-size: 28px;
    line-height: 1.1;
}
/* Bandeja de aprobaciones en modo auditoria: la nota avisa por que no hay
   botones de aprobar/rechazar, para que no se lea como una pantalla rota. */
.inv-readonly-note {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--muted, #64748b);
}
.inv-approval-type-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.inv-approval-type-counts span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #dbe4f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}
.inv-approval-type-counts strong {
    color: #0f172a;
    font-size: 15px;
}
.inv-history-panel--approval-admin {
    padding: 14px;
}
.inv-history-panel--approval-admin .approval-history-toolbar {
    gap: 12px;
    margin-bottom: 14px;
    padding: 0 0 12px;
    background: transparent;
    border-bottom: 1px solid #e2e8f0;
}
.inv-history-panel--approval-admin .approval-history-toolbar-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.inv-history-panel--approval-admin .approval-history-kicker {
    margin: 0;
}
.inv-history-panel--approval-admin .approval-history-toolbar-copy h2 {
    margin: 0;
    font-size: 18px;
}
.inv-history-panel--approval-admin .approval-history-filters {
    grid-template-columns: minmax(220px, 1fr) 150px 150px auto;
    gap: 10px;
}
.inv-history-panel--approval-admin .approval-history-filter-label {
    font-size: 10px;
}
.inv-history-panel--approval-admin .approval-history-meta {
    margin-top: 0;
}

/* Responsive de aprobaciones (admin): la grilla de filtros admin tenía columnas
   fijas (220px + 150 + 150 + auto ≈ 540px) que, por especificidad, ganaban a las
   media queries base y desbordaban el móvil. Aquí se colapsa con la MISMA
   especificidad para que sí aplique. */
@media (max-width: 980px) {
    .inv-history-panel--approval-admin .approval-history-filters {
        grid-template-columns: 1fr 1fr;
    }
    .inv-history-panel--approval-admin .approval-history-filter-search,
    .inv-history-panel--approval-admin .approval-history-actions {
        grid-column: 1 / -1;
    }
}
@media (max-width: 640px) {
    .inv-history-panel--approval-admin {
        padding: 12px;
    }
    .inv-history-panel--approval-admin .approval-history-filters {
        grid-template-columns: 1fr;
    }
    /* Header: título y contadores dejan de competir por el ancho y se apilan. */
    .inv-approval-compact-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .inv-approval-compact-head h1 {
        font-size: 23px;
    }
    .inv-approval-type-counts {
        justify-content: flex-start;
    }
    /* Acciones a lo ancho para que "Buscar/Limpiar" no se corten. */
    .inv-history-panel--approval-admin .approval-history-actions .btn {
        flex: 1;
        justify-content: center;
    }
}


/* =============================================================================
   11. CATÁLOGO DE PRODUCTOS
   =============================================================================
   Grilla de tarjetas de productos con buscador, etiquetas y acciones.
   ----------------------------------------------------------------------------- */
.inv-catalog-panel { padding: 18px; min-width: 0; }

/* — Encabezado del catálogo — */
.inv-catalog-head { display: flex; justify-content: space-between; gap: 14px; align-items: end; margin-bottom: 16px; }

/* — Buscador — */
.inv-catalog-search { width: min(100%, 360px); min-height: 42px; padding: 0 14px; border: 1px solid #dbeafe; border-radius: 12px; outline: 0; font: inherit; }

/* — Buscador del catálogo de solicitud: grande, con icono de lupa, acento por
   área (--ac) y contador de ítems en vivo. Pensado para que el usuario que pide
   productos lo encuentre de inmediato. color-mix degrada al azul base si no hay soporte. */
.inv-catalog-searchbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1 1 460px;
  max-width: 560px;
  min-height: 56px;
  padding: 0 12px 0 16px;
  border: 2px solid color-mix(in srgb, var(--ac, #2563eb) 28%, #e2e8f0);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--ac, #2563eb) 5%, #fff));
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04),
              0 14px 30px -22px color-mix(in srgb, var(--ac, #2563eb) 75%, transparent);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.inv-catalog-searchbox:hover { border-color: color-mix(in srgb, var(--ac, #2563eb) 45%, #e2e8f0); }
.inv-catalog-searchbox:focus-within {
  border-color: var(--ac, #2563eb);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac, #2563eb) 16%, transparent),
              0 16px 32px -20px color-mix(in srgb, var(--ac, #2563eb) 80%, transparent);
}
.inv-catalog-searchbox-icon { flex: none; width: 22px; height: 22px; color: var(--ac, #2563eb); }
.inv-catalog-searchbox .inv-catalog-search {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #0f172a;
}
.inv-catalog-searchbox .inv-catalog-search::placeholder { color: #94a3b8; font-weight: 500; }
.inv-catalog-searchbox .inv-catalog-search:focus { box-shadow: none; }
.inv-catalog-searchbox-count {
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ac, #2563eb) 12%, #fff);
  color: color-mix(in srgb, var(--ac, #2563eb) 72%, #0f172a);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* Sin título: el buscador ocupa todo el ancho del panel del catálogo. */
.inv-catalog-head--search-only .inv-catalog-head-actions { flex: 1 1 100%; width: 100%; }
.inv-catalog-head--search-only .inv-catalog-searchbox { flex: 1 1 auto; max-width: none; }

/* Variante para tableros (llaves): sin tope de ancho, ocupa el espacio disponible. */
.inv-catalog-searchbox--board { max-width: none; }

/* — Grilla de productos — */
.inv-catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

/* — Tarjeta de producto (modo estándar) — */
.inv-product-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f8fbff);
}
.inv-product-visual {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 22px;
  font-weight: 900;
}
.inv-product-copy { min-width: 0; }
.inv-product-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.inv-product-tags span { padding: 4px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 11px; font-weight: 900; }
.inv-product-copy h3 { margin: 0 0 5px; font-size: 16px; line-height: 1.25; }
.inv-product-copy p  { margin: 0; color: #64748b; font-size: 13px; line-height: 1.45; }
.inv-product-specs { display: block; margin-top: 5px; color: #475569; font-size: 11px; line-height: 1.4; font-style: italic; }
.inv-cart-desc     { display: block; margin-top: 2px; color: #475569; font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: pre-line; }
.inv-cart-specs    { display: block; margin-top: 2px; color: #334155; font-size: 11px; line-height: 1.4; white-space: pre-line; }
.inv-cart-specs .inv-product-detail-tag { font-style: normal; }
.inv-cart-wh       { display: block; margin-top: 2px; color: #64748b; font-size: 11px; font-weight: 700; }
.inv-product-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid #e2e8f0; }

/* — Controles de cantidad — */
.inv-check-line      { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; color: #0f172a; }
.inv-check-line input { width: 18px; height: 18px; }
.inv-qty-input       { width: 86px; min-height: 38px; padding: 0 10px; border: 1px solid #dbeafe; border-radius: 10px; font: inherit; font-weight: 800; }

/* — Tarjeta táctil (tablet/quiosco) — */
.inv-request-workspace--touch .inv-catalog-panel {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 18px;
  overflow: hidden;
}
.inv-request-workspace--touch .inv-catalog-grid {
  min-height: 0;
  height: 100%;
  overflow: auto;
  align-content: start;
  padding: 2px 4px 2px 2px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: max-content;
  gap: 12px;
}
.inv-request-workspace--touch .inv-product-card {
  min-height: 198px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.inv-request-workspace--touch .inv-product-card:hover,
.inv-request-workspace--touch .inv-product-card:focus-within { transform: translateY(-2px); border-color: #93c5fd; box-shadow: 0 14px 28px rgba(37, 99, 235, .12); }
.inv-request-workspace--touch .inv-product-card.is-selected  { border-color: #2563eb; background: linear-gradient(180deg, #eff6ff, #fff); box-shadow: 0 0 0 4px rgba(37, 99, 235, .10); }

/* Visual del producto (táctil): tile neutro y uniforme, sin colores rotativos. */
.inv-request-workspace--touch .inv-product-visual {
  width: 100%;
  height: 64px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
}
.inv-request-workspace--touch .inv-product-card .inv-product-visual--icon {
  display: grid;
  place-items: center;
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #475569;
}
/* Acento sutil solo cuando la tarjeta esta seleccionada. */
.inv-request-workspace--touch .inv-product-card.is-selected .inv-product-visual {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}
.inv-product-visual--icon svg { width: 28px; height: 28px; stroke-width: 1.7; }

.inv-request-workspace--touch .inv-product-copy { display: grid; align-content: start; gap: 5px; flex: 1 1 auto; }
.inv-request-workspace--touch .inv-product-sku {
  justify-self: start;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 2px 8px;
  border-radius: 7px;
}
.inv-request-workspace--touch .inv-product-copy h3 { margin: 1px 0 0; font-size: 16px; font-weight: 800; line-height: 1.2; color: #0f172a; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inv-request-workspace--touch .inv-product-copy p,
.inv-request-workspace--touch .inv-product-copy .inv-product-specs { margin: 0; color: #64748b; font-size: 12.5px; line-height: 1.4; font-style: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Footer: pill de stock + boton. Envuelve y el boton se encoge para no
   salirse del cuadro en tarjetas/pantallas angostas. */
.inv-request-workspace--touch .inv-product-actions { padding-top: 10px; margin-top: auto; gap: 8px; flex-wrap: wrap; }

/* Pill de stock disponible */
.inv-req-stock { display: inline-flex; align-items: baseline; gap: 4px; flex: 0 0 auto; max-width: 100%; padding: 5px 11px; border-radius: 999px; line-height: 1; }
.inv-req-stock strong { font-size: 15px; font-weight: 900; }
.inv-req-stock small { font-size: 11px; font-weight: 800; text-transform: lowercase; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.inv-req-stock.is-ok  { background: #ecfdf5; color: #047857; }
.inv-req-stock.is-out { background: #fef2f2; color: #b91c1c; }
.inv-req-stock.is-na  { background: #f1f5f9; color: #64748b; }

/* — Botón "Agregar" (táctil): suave en reposo, se rellena al seleccionar — */
.inv-touch-add { min-height: 42px; min-width: 108px; padding: 0 14px; border: 0; border-radius: 12px; background: #1d4ed8; color: #fff; font-weight: 900; cursor: pointer; }
.inv-request-workspace--touch .inv-touch-add {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 800;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.inv-request-workspace--touch .inv-touch-add svg { width: 16px; height: 16px; }
.inv-request-workspace--touch .inv-touch-add:hover { background: #dbeafe; border-color: #93c5fd; }
.inv-request-workspace--touch .inv-touch-add:active { transform: translateY(1px); }
.inv-request-workspace--touch .inv-product-card.is-selected .inv-touch-add {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
}


/* =============================================================================
   12. CARRITO DE SOLICITUD
   =============================================================================
   Lista de productos seleccionados con control de cantidad y botón de eliminar.
   ----------------------------------------------------------------------------- */
.inv-cart-empty {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  background: #f8fafc;
  color: #64748b;
  line-height: 1.35;
}
.inv-cart-empty strong { color: #0f172a; }

.inv-cart-list { display: grid; align-content: start; gap: 10px; min-height: 0; max-height: none; overflow: auto; padding-right: 2px; }

/* — Fila del carrito — */
.inv-cart-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid #dbeafe; border-radius: 16px; background: #fff; }
.inv-cart-row.is-highlighted { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.inv-cart-row-main        { min-width: 0; display: grid; gap: 4px; }
.inv-cart-row-main strong { color: #0f172a; line-height: 1.2; overflow-wrap: anywhere; }
.inv-cart-row-main small  { color: #64748b; font-size: 12px; font-weight: 800; }

/* — Controles de cantidad dentro del carrito — */
.inv-cart-qty { display: inline-grid; grid-template-columns: 38px 54px 38px; gap: 6px; align-items: center; margin-top: 6px; }
.inv-cart-qty button,
.inv-cart-remove { border: 1px solid #cbd5e1; border-radius: 11px; background: #fff; color: #0f172a; font-weight: 900; cursor: pointer; }
.inv-cart-qty button { min-height: 38px; font-size: 20px; }
.inv-cart-qty input  { width: 54px; min-height: 38px; padding: 0 6px; border: 1px solid #dbeafe; border-radius: 11px; text-align: center; font: inherit; font-weight: 900; }

/* — Botón eliminar — */
/* Especificidad > button:not(.hamburger) (regla global que pinta los botones de azul). */
button.inv-cart-remove {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  padding: 0; line-height: 1;
  border: 1px solid #cbd5e1; border-radius: 11px;
  background: #fff; color: #be123c;
  font-size: 16px; font-weight: 900; cursor: pointer;
}
button.inv-cart-remove:hover { border-color: #fecdd3; background: #fff1f2; }


/* =============================================================================
   13. HISTORIAL DE SOLICITUDES
   =============================================================================
   Lista de tarjetas con código de solicitud, items y estado.
   ----------------------------------------------------------------------------- */
.inv-history-panel { padding: 18px; }
.inv-history-list  { display: grid; gap: 12px; }
.inv-approval-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.inv-approval-summary article {
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.inv-approval-summary span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.inv-approval-summary strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
}
.inv-approval-summary small {
  display: block;
  margin-top: 5px;
  color: #64748b;
}
.inv-approval-hero-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.inv-approval-card-list {
  margin-top: 16px;
}
.inv-approval-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* — Tarjeta de historial — */
.inv-history-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
}
/* Ambas columnas deben poder encoger (si no, el panel de documentos desborda
   y obliga a scroll horizontal en pantallas medianas). */
.inv-history-card > * { min-width: 0; }
.inv-history-code { display: inline-flex; width: max-content; padding: 5px 9px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 900; }
.inv-history-main h3    { margin: 9px 0 4px; }
.inv-history-main h3 small { margin-top: 3px; font-size: 13px; font-weight: 700; }
.inv-history-main p,
.inv-history-main small { display: block; margin: 0; color: #64748b; }
.inv-history-items      { display: grid; gap: 6px; align-content: start; min-width: 0; }
.inv-history-items strong { color: #0f172a; }
.inv-history-items span   { padding: 7px 9px; border-radius: 10px; background: #f8fafc; color: #334155; font-size: 13px; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

/* ── Pulido tarjeta de aprobacion / historial ──────────────────────────────── */
.inv-approval-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.inv-approval-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 12px 30px -16px rgba(15, 23, 42, .22);
}
.inv-approval-card-head { margin-bottom: 4px; }

/* Solicitante + fecha */
.inv-history-main .inv-history-meta {
  display: flex;
  align-items: baseline;
  gap: 4px 10px;
  flex-wrap: wrap;
  margin: 12px 0 0;
}
.inv-history-main .inv-history-meta strong { color: #0f172a; font-size: 15px; font-weight: 800; }
.inv-history-main .inv-history-meta span   { color: #94a3b8; font-size: 12.5px; }

/* Nota / observacion como callout */
.inv-history-main .inv-history-note {
  position: relative;
  margin: 10px 0 0;
  padding: 9px 12px 9px 14px;
  border: 1px solid #eef2f7;
  border-left: 3px solid #94a3b8;
  border-radius: 0 10px 10px 0;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

/* Columna de items (panel a la derecha) */
.inv-history-items {
  padding: 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}
.inv-history-items > strong {
  display: inline-flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 800;
}
.inv-history-items span { background: #fff; border: 1px solid #e7edf3; }
.inv-hist-item--detailed { display: grid; gap: 5px; }
.inv-hist-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.inv-hist-item-name { font-weight: 700; color: #0f172a; }
.inv-hist-item-desc { color: #64748b; font-size: 12px; }
.inv-hist-item-specs { color: #64748b; font-size: 12px; display: grid; gap: 2px; }
.inv-hist-item-specs .inv-product-detail-tag {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 800;
}

/* Chip de stock disponible */
.inv-stock-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  white-space: nowrap;
}
.inv-stock-chip.is-ok  { background: #dcfce7; color: #15803d; }
.inv-stock-chip.is-low { background: #fee2e2; color: #b91c1c; }

/* — Estado vacío genérico — */
.inv-empty-state {
  margin: 0;
  padding: 22px;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  color: #64748b;
  text-align: center;
  background: #f8fafc;
}


/* =============================================================================
   14. DASHBOARD — OVERVIEW Y KPIs
   =============================================================================
   Panel principal con tarjeta de bienvenida, stats de resumen y foco de área.
   ----------------------------------------------------------------------------- */

/* — Overview hero — */
.inv-dash-overview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(191, 219, 254, .7);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, .78), rgba(255, 255, 255, .78) 46%, rgba(236, 253, 245, .46));
}
.inv-dash-overview::before {
  content: '';
  position: absolute;
  inset: -44px 16% auto -26px;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 165, 233, .18), rgba(37, 99, 235, .10), rgba(34, 197, 94, .12));
  filter: blur(34px);
}

/* — Tarjetas base (borde + fondo blanco) — */
.inv-dash-title,
.inv-dash-focus,
.inv-dash-section,
.inv-dash-summary article,
.inv-dash-module,
.inv-dash-area-grid article { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: none; }

/* — Glassmorphism en overview — */
.inv-dash-title,
.inv-dash-focus { position: relative; z-index: 1; background: rgba(255, 255, 255, .76); backdrop-filter: blur(14px); }

/* — Tarjeta de bienvenida — */
.inv-dash-title { padding: 20px; }
.inv-dash-title h1 { margin: 6px 0 8px; color: #0f172a; font-size: 28px; line-height: 1.08; }
.inv-dash-title p,
.inv-dash-focus p { margin: 0; max-width: 760px; color: #475569; line-height: 1.45; }
.inv-dash-context       { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.inv-dash-context span  { padding: 6px 9px; border-radius: 999px; background: #f8fafc; color: #475569; font-size: 12px; font-weight: 900; }

/* — Tarjeta de foco (área activa) — */
.inv-dash-focus          { display: grid; gap: 12px; align-content: center; padding: 20px; color: #0f172a; }
.inv-dash-focus .page-eyebrow { color: #1d4ed8; }
.inv-dash-focus h2       { margin: 0; color: #0f172a; font-size: 23px; line-height: 1.15; }
.inv-dash-focus p        { color: #64748b; }

/* — Mini stats dentro del foco — */
.inv-dash-focus-stats        { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.inv-dash-focus-stats span   { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: #f8fafc; color: #64748b; font-size: 12px; }
.inv-dash-focus-stats strong { color: #0f172a; font-size: 22px; }

/* — Fila de KPIs — */
.inv-dash-summary { display: grid; grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(140px, 1fr)); gap: 12px; margin-bottom: 14px; }
.inv-dash-summary article,
.inv-dash-area-grid article  { padding: 16px; }
.inv-dash-summary article > span,
.inv-dash-area-grid span     { display: block; color: #64748b; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.inv-dash-summary strong,
.inv-dash-area-grid strong   { display: block; margin: 8px 0 4px; color: #0f172a; font-size: 30px; line-height: 1; }
.inv-dash-summary small,
.inv-dash-summary p          { margin: 0; color: #64748b; font-size: 12px; }

/* KPI principal (gris, más grande) */
.inv-dash-summary-main { background: #f8fafc !important; border-color: #cbd5e1 !important; }
.inv-dash-summary-main strong { color: #0f172a; font-size: 38px; }

/* — Sección genérica del dashboard — */
.inv-dash-section { padding: 18px; margin-bottom: 14px; }

/* — Sección de módulos (glassmorphism con degradado) — */
.inv-dash-section--modules {
  position: relative;
  padding: 22px;
  overflow: hidden;
  border-color: #cbd5e1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(248, 250, 252, .82)),
    linear-gradient(110deg, rgba(219, 234, 254, .44), transparent 46%, rgba(220, 252, 231, .34));
  backdrop-filter: blur(10px);
}
.inv-dash-section--modules::before {
  content: '';
  position: absolute;
  inset: -36px -18px auto auto;
  width: 46%;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(96, 165, 250, .16), rgba(16, 185, 129, .10));
  filter: blur(30px);
}
.inv-dash-section--modules > * { position: relative; z-index: 1; }

/* — Encabezado de sección — */
.inv-dash-section-head          { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.inv-dash-section-head h2       { margin: 4px 0 0; color: #0f172a; font-size: 20px; }
.inv-dash-section-head p        { margin: 6px 0 0; max-width: 720px; color: #64748b; font-size: 13px; }
.inv-dash-section--modules .inv-dash-section-head h2 { font-size: 28px; line-height: 1.1; }

/* — Grilla de área — */
.inv-dash-area-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }

/* — Workspace del dashboard — */
.inv-dash-workspace           { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.inv-dash-workspace--global   { grid-template-columns: minmax(0, 1fr) 340px; }

/* — Centro de accion: pendientes por modulo — */
.inv-dash-pending-list { display: grid; gap: 8px; }
.inv-dash-pending {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.inv-dash-pending:hover { border-color: #c7d2fe; box-shadow: 0 8px 20px rgba(37, 99, 235, .10); transform: translateY(-1px); text-decoration: none; }

.inv-dash-pending-count {
  flex-shrink: 0;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 900;
  background: #f1f5f9;
  color: #94a3b8;
}
.inv-dash-pending.has-pending .inv-dash-pending-count { background: #fef2f2; color: #dc2626; }

.inv-dash-pending-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.inv-dash-pending-info strong { font-weight: 800; color: #0f172a; }
.inv-dash-pending-info small { color: #64748b; font-size: .8rem; }

.inv-dash-pending-cta {
  flex-shrink: 0;
  font-size: .82rem;
  font-weight: 800;
  color: #94a3b8;
}
.inv-dash-pending.has-pending .inv-dash-pending-cta { color: #2563eb; }

/* — Centro de accion: alertas de stock bajo — */
.inv-dash-stock-list { display: grid; gap: 8px; }
.inv-dash-stock {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-left: 3px solid #f59e0b;
  border-radius: 12px;
  background: #fffbeb;
}
.inv-dash-stock-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.inv-dash-stock-info strong {
  font-weight: 700;
  color: #0f172a;
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-dash-stock-info small { color: #92742e; font-size: .76rem; }
.inv-dash-stock-level {
  flex-shrink: 0;
  font-size: .82rem;
  color: #b45309;
  white-space: nowrap;
}
.inv-dash-stock-level strong { font-size: 1rem; font-weight: 900; color: #c2410c; }


/* =============================================================================
   15. DASHBOARD — MÓDULOS Y ACCIONES
   =============================================================================
   Tarjetas de módulo con indicador de estado, stats y acciones rápidas.
   ----------------------------------------------------------------------------- */

/* — Grilla de módulos — */
.inv-dash-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }

/* — Módulo individual — */
.inv-dash-module {
  position: relative;
  display: grid;
  gap: 14px;
  min-height: 230px;
  padding: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(8px);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
/* Barra lateral de color */
.inv-dash-module::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: #e2e8f0; }
.inv-dash-module.is-active { border-color: #1d4ed8; background: #f8fbff; }
.inv-dash-module.is-active::before { background: #1d4ed8; }
.inv-dash-module:hover { transform: translateY(-2px); border-color: #bfdbfe; box-shadow: 0 16px 34px rgba(15, 23, 42, .07); }

/* — Encabezado del módulo — */
.inv-dash-module-head        { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.inv-dash-module-head strong { padding: 5px 8px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 11px; }
.inv-dash-module span        { color: #1d4ed8; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.inv-dash-module h3          { margin: 4px 0 0; color: #0f172a; font-size: 20px; line-height: 1.15; }
.inv-dash-module p           { margin: 0; color: #64748b; font-size: 13px; line-height: 1.4; }

/* — Stats del módulo — */
.inv-dash-module-stats      { display: grid; gap: 7px; }
.inv-dash-module-stats span { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 10px; background: #f8fafc; color: #334155; }
.inv-dash-module-stats strong { color: #0f172a; }

/* — Acciones del módulo — */
.inv-dash-module-actions,
.inv-dash-actions-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-dash-module-actions a,
.inv-dash-action {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: #fff;
  color: #1d4ed8;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.inv-dash-module-actions a:first-child { background: #0f172a; border-color: #0f172a; color: #fff; }

/* Variantes de acción */
.inv-dash-action--primary { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.inv-dash-action--success { background: #047857; border-color: #047857; color: #fff; }
.inv-dash-action--warning { background: #fef3c7; border-color: #fde68a; color: #92400e; }

/* — Módulos de trabajo del dashboard — */
.inv-dash-module-work { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.inv-dash-module-work article {
  min-height: 164px;
  display: grid;
  align-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .92)),
    linear-gradient(135deg, rgba(219, 234, 254, .28), rgba(220, 252, 231, .20));
}
.inv-dash-module-work h3 { margin: 6px 0; color: #0f172a; font-size: 18px; line-height: 1.15; }
.inv-dash-module-work p  { margin: 0; color: #64748b; font-size: 13px; line-height: 1.45; }
.inv-dash-module-work .inv-secondary-btn { justify-self: start; }

/* — Listas de solicitudes — */
.inv-dash-request-list,
.inv-dash-compact-list { display: grid; gap: 10px; }

.inv-dash-request {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
.inv-dash-request strong,
.inv-dash-request small { display: block; }
.inv-dash-request strong { margin: 5px 0; color: #0f172a; }
.inv-dash-request small  { color: #64748b; font-size: 12px; }

.inv-dash-compact-list a     { display: grid; gap: 3px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 14px; color: inherit; text-decoration: none; }
.inv-dash-compact-list strong { color: #0f172a; }
.inv-dash-compact-list span   { color: #64748b; font-size: 12px; }


/* =============================================================================
   15b. DASHBOARD GLOBAL — CENTRO DE CONTROL (worklist, KPIs, micro-charts)
   ============================================================================= */

/* — Encabezado editorial (sin caja) — */
.inv-dash-head { margin-bottom: 16px; }
.inv-dash-head h1 { margin: 6px 0; font-size: clamp(26px, 3.2vw, 34px); font-weight: 900; line-height: 1.08; color: #0f172a; }
.inv-dash-head p  { margin: 0; max-width: 720px; color: #475569; font-size: 15px; line-height: 1.45; }
.inv-dash-head .inv-dash-context { margin-top: 14px; }

/* — Prioridad (hero azul) + banda de KPIs — */
.inv-dash-priority {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.55fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}
.inv-dash-priority > .inv-priority-hero {
  min-height: 238px;
  height: 100%;
}

.inv-priority-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: 24px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #2563eb 55%, #1e40af);
  box-shadow: 0 18px 42px rgba(37, 99, 235, .28);
}
.inv-priority-hero::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 60%;
  height: 160%;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 60%);
  pointer-events: none;
}
.inv-priority-hero.is-clear {
  background: linear-gradient(135deg, #0f766e, #16a34a 60%, #15803d);
  box-shadow: 0 18px 42px rgba(22, 163, 74, .26);
}
.inv-priority-hero > * { position: relative; z-index: 1; }
.inv-priority-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}
.inv-priority-eyebrow svg { width: 16px; height: 16px; }
.inv-priority-main { display: flex; align-items: center; gap: 16px; }
.inv-priority-main strong { font-size: clamp(46px, 6vw, 64px); font-weight: 900; line-height: .92; }
.inv-priority-text p { margin: 0; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .94); }
.inv-priority-flag {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(251, 191, 36, .24);
  color: #fde68a;
  font-size: 12px;
  font-weight: 800;
}
.inv-priority-note { display: inline-block; margin-top: 7px; font-size: 12.5px; color: rgba(255, 255, 255, .82); }
.inv-priority-cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: 12px;
  background: #fff;
  color: #1d4ed8;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
  transition: transform .15s ease;
}
.inv-priority-cta:hover { transform: translateY(-2px); color: #1d4ed8; text-decoration: none; }
.inv-priority-hero.is-clear .inv-priority-cta { color: #15803d; }
.inv-priority-cta.is-static { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; cursor: default; }
.inv-priority-cta.is-static:hover { transform: none; }

/* — Banda de KPIs — */
.inv-kpi-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: stretch;
}
.inv-kpi {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 15px 16px;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
a.inv-kpi:hover { transform: translateY(-2px); border-color: #c7d2fe; box-shadow: 0 10px 24px rgba(15, 23, 42, .08); text-decoration: none; }
.inv-kpi-top { display: flex; align-items: center; gap: 8px; }
.inv-kpi-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #eff6ff;
  color: #2563eb;
}
.inv-kpi-icon svg { width: 16px; height: 16px; }
.inv-kpi-icon--ok { background: #ecfdf5; color: #059669; }
.inv-kpi-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.inv-kpi-value { font-size: 30px; font-weight: 900; line-height: 1; color: #0f172a; }
.inv-kpi small { color: #94a3b8; font-size: 12px; }
.inv-kpi--trend { grid-column: span 2; }
.inv-kpi--alert.is-on { border-color: #fed7aa; background: #fff7ed; }
.inv-kpi--alert.is-on .inv-kpi-icon { background: #ffedd5; color: #ea580c; }
.inv-kpi--alert.is-on .inv-kpi-value { color: #c2410c; }

/* Sparkline */
.inv-spark { width: 100%; height: 30px; display: block; margin: 2px 0; }
.inv-spark-line { fill: none; stroke: #2563eb; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.inv-spark-area { fill: rgba(37, 99, 235, .12); stroke: none; }

/* — Pendientes por módulo (barras rankeadas) — */
.inv-modbar-list { display: grid; gap: 8px; }
.inv-modbar {
  display: grid;
  grid-template-columns: 10px minmax(90px, 150px) minmax(0, 1fr) 26px auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.inv-modbar:hover { transform: translateY(-1px); border-color: var(--mb, #c7d2fe); box-shadow: 0 8px 20px rgba(15, 23, 42, .08); text-decoration: none; }
.inv-modbar.is-clear { opacity: .68; }
.inv-modbar-dot { width: 10px; height: 10px; border-radius: 50%; }
.inv-modbar-label { font-weight: 800; color: #0f172a; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-modbar-track { height: 8px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.inv-modbar-fill { display: block; height: 100%; border-radius: 999px; background: var(--mb, #2563eb); }
.inv-modbar-count { font-weight: 900; color: #0f172a; font-size: 16px; text-align: right; }
.inv-modbar-cta { font-size: 12px; font-weight: 800; color: var(--mb, #2563eb); white-space: nowrap; }
.inv-modbar.is-clear .inv-modbar-cta { color: #94a3b8; }

/* — Worklist de solicitudes recientes — */
.inv-worklist { display: grid; gap: 8px; }
.inv-worklist-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.inv-worklist-row:hover { border-color: #c7d2fe; background: #f8fbff; text-decoration: none; }
.inv-worklist-dot { width: 10px; height: 10px; border-radius: 50%; align-self: start; margin-top: 5px; }
.inv-worklist-body { min-width: 0; display: grid; gap: 3px; }
.inv-worklist-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.inv-worklist-top strong { font-size: 14px; color: #0f172a; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-worklist-code { flex: 0 0 auto; font-size: 11px; color: #94a3b8; font-family: Consolas, Monaco, monospace; }
.inv-worklist-body small { color: #64748b; font-size: 12px; }

/* — Badges de estado — */
.inv-badge { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.inv-badge--pend { background: #fef3c7; color: #92400e; }
.inv-badge--ok   { background: #dcfce7; color: #166534; }
.inv-badge--no   { background: #fee2e2; color: #991b1b; }

/* — Barra apilada de estados — */
.inv-statusbar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #eef2f7; }
.inv-statusbar-seg { display: block; height: 100%; }
.inv-statusbar-seg--pend { background: #f59e0b; }
.inv-statusbar-seg--ok   { background: #16a34a; }
.inv-statusbar-seg--no   { background: #dc2626; }
.inv-status-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.inv-status-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #475569; }
.inv-status-legend strong { margin-left: auto; color: #0f172a; font-weight: 900; }
.inv-status-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.inv-status-legend .dot--pend { background: #f59e0b; }
.inv-status-legend .dot--ok   { background: #16a34a; }
.inv-status-legend .dot--no   { background: #dc2626; }

/* — Cola de stock por reponer — */
.inv-stockq-list { display: grid; gap: 10px; }
.inv-stockq {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #eef2f7;
  border-left: 3px solid #cbd5e1;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.inv-stockq:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15, 23, 42, .08); text-decoration: none; }
.inv-stockq-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inv-stockq-head strong { font-size: 13.5px; color: #0f172a; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-stockq-sev { flex: 0 0 auto; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.inv-stockq-track { height: 7px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.inv-stockq-fill { display: block; height: 100%; border-radius: 999px; background: #cbd5e1; }
.inv-stockq-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inv-stockq-meta small { color: #64748b; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-stockq-num { flex: 0 0 auto; font-weight: 900; font-size: 13px; color: #475569; }
.inv-stockq--out  { border-left-color: #dc2626; }
.inv-stockq--out  .inv-stockq-sev,  .inv-stockq--out  .inv-stockq-num { color: #b91c1c; }
.inv-stockq--out  .inv-stockq-fill { background: #dc2626; }
.inv-stockq--crit { border-left-color: #ea580c; }
.inv-stockq--crit .inv-stockq-sev,  .inv-stockq--crit .inv-stockq-num { color: #c2410c; }
.inv-stockq--crit .inv-stockq-fill { background: #f97316; }
.inv-stockq--low  { border-left-color: #f59e0b; }
.inv-stockq--low  .inv-stockq-sev,  .inv-stockq--low  .inv-stockq-num { color: #92400e; }
.inv-stockq--low  .inv-stockq-fill { background: #fbbf24; }

/* — Responsive del dashboard global — */
@media (max-width: 1000px) {
  .inv-dash-priority { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .inv-kpi-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-kpi--trend { grid-column: span 2; }
  .inv-modbar { grid-template-columns: 10px minmax(0, 1fr) 26px; }
  .inv-modbar-track, .inv-modbar-cta { display: none; }
}


/* =============================================================================
   15c. PANEL POR MÓDULO — mismo lenguaje del centro de control, tintado con
   el color de cada área (--ac). color-mix degrada al azul base si no hay soporte.
   ============================================================================= */

/* Hero de prioridad tintado por área (en vez del azul fijo del global) */
.inv-priority-hero--area {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ac, #2563eb) 76%, #0b1220), var(--ac, #2563eb));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--ac, #2563eb) 30%, transparent);
}
.inv-priority-hero--area.is-urgent { box-shadow: 0 0 0 3px rgba(251, 191, 36, .45), 0 18px 42px color-mix(in srgb, var(--ac, #2563eb) 30%, transparent); }
.inv-priority-hero--area .inv-priority-cta { color: var(--ac, #1d4ed8); }
.inv-priority-hero--area .inv-priority-cta:hover { color: var(--ac, #1d4ed8); }

/* Iconos de KPI con el tinte del área */
.inv-kpi-band--area .inv-kpi-icon { background: color-mix(in srgb, var(--ac, #2563eb) 12%, #fff); color: var(--ac, #2563eb); }
.inv-kpi-band--area .inv-kpi-icon--ok { background: #ecfdf5; color: #059669; }
.inv-kpi-band--area .inv-spark-line { stroke: var(--ac, #2563eb); }
.inv-kpi-band--area .inv-spark-area { fill: color-mix(in srgb, var(--ac, #2563eb) 14%, transparent); }
.inv-kpi-band--area a.inv-kpi:hover { border-color: color-mix(in srgb, var(--ac, #2563eb) 45%, #fff); }

/* Borde superior de acento en las tarjetas de acciones del módulo */
.inv-dash-module-work article { border-top: 3px solid var(--ac, #2563eb); }

/* Workspace sin columna lateral cuando no hay aside */
.inv-dash-workspace--solo { grid-template-columns: minmax(0, 1fr); }


/* =============================================================================
   15d. REPORTES — overview, rankings, tabla de duración. Mismo lenguaje inv-*.
   ============================================================================= */

/* Stock disponible (verde) en el listado inv-stockq del reporte */
.inv-stockq--ok  { border-left-color: #16a34a; }
.inv-stockq--ok  .inv-stockq-sev, .inv-stockq--ok .inv-stockq-num { color: #15803d; }
.inv-stockq--ok  .inv-stockq-fill { background: #22c55e; }

/* Overview: tarjetas de acceso a cada reporte */
.inv-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.inv-report-card {
  display: grid; grid-template-columns: 4px minmax(0, 1fr) 20px; align-items: center; gap: 12px;
  padding: 14px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.inv-report-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--rc, #2563eb) 45%, #fff); box-shadow: 0 10px 24px rgba(15, 23, 42, .08); text-decoration: none; }
.inv-report-card-dot { width: 4px; height: 100%; min-height: 38px; border-radius: 999px; background: var(--rc, #2563eb); }
.inv-report-card-body { display: grid; gap: 8px; min-width: 0; }
.inv-report-card-body strong { font-size: 15px; font-weight: 800; color: #0f172a; }
.inv-report-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-report-tag {
  font-size: 11px; font-weight: 700; color: #475569; background: #f1f5f9;
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.inv-report-card-arrow { width: 20px; height: 20px; color: var(--rc, #2563eb); }

/* Rankings (quién gasta más / qué se presta más / quién solicita más) */
.inv-rank-list { display: grid; gap: 10px; }
.inv-rank { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.inv-rank-pos {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 13px; font-weight: 900; color: var(--rc, #2563eb);
  background: color-mix(in srgb, var(--rc, #2563eb) 12%, #fff);
}
.inv-rank-main { display: grid; gap: 6px; min-width: 0; }
.inv-rank-label { font-weight: 700; color: #0f172a; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-rank-code { color: #94a3b8; font-weight: 700; }
.inv-rank-track { height: 8px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.inv-rank-fill { display: block; height: 100%; border-radius: 999px; background: var(--rc, #2563eb); }
.inv-rank-value { text-align: right; font-weight: 900; font-size: 16px; color: #0f172a; display: grid; }
.inv-rank-value small { font-weight: 600; font-size: 11px; color: #94a3b8; }

/* Tabla de duración de préstamos */
.inv-rtable-wrap { overflow-x: auto; }
.inv-rtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.inv-rtable thead th {
  text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #94a3b8; padding: 6px 10px; border-bottom: 1px solid #e2e8f0;
}
.inv-rtable td { padding: 10px; border-bottom: 1px solid #f1f5f9; color: #475569; vertical-align: middle; }
.inv-rtable tbody tr:hover { background: #f8fafc; }
.inv-rtable-strong { color: #0f172a; font-weight: 700; }
.inv-rtable-num { text-align: right; }
.inv-rtable-num { white-space: nowrap; }
.inv-rtable-bar { display: inline-block; vertical-align: middle; width: 64px; height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; margin-right: 8px; }
.inv-rtable-bar span { display: block; height: 100%; border-radius: 999px; }

@media (max-width: 720px) {
  .inv-rank-value { font-size: 14px; }
  .inv-rtable-bar { display: none; }
}

/* Tendencia mensual de compras (barras verticales) */
.inv-trend {
  display: flex; align-items: flex-end; gap: 10px; min-height: 180px;
  padding: 8px 4px 0; overflow-x: auto;
}
.inv-trend-col {
  flex: 1 1 0; min-width: 54px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 6px; height: 170px;
}
.inv-trend-val { font-size: 11px; font-weight: 800; color: #475569; white-space: nowrap; }
.inv-trend-bar {
  width: 100%; max-width: 46px; min-height: 4px; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--rc, #16a34a), color-mix(in srgb, var(--rc, #16a34a) 55%, #fff));
}
.inv-trend-label {
  font-size: 11px; font-weight: 700; color: #94a3b8; white-space: nowrap;
  text-align: center;
}

/* Botones de exportación del reporte */
.inv-report-export { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.inv-export-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff;
  font-size: 13px; font-weight: 800; color: #334155; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.inv-export-btn svg { width: 17px; height: 17px; }
.inv-export-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15, 23, 42, .08); text-decoration: none; }
.inv-export-btn--pdf { color: #b91c1c; border-color: #fecaca; }
.inv-export-btn--pdf:hover { background: #fef2f2; border-color: #f87171; }
.inv-export-btn--xls { color: #15803d; border-color: #bbf7d0; }
.inv-export-btn--xls:hover { background: #f0fdf4; border-color: #4ade80; }


/* =============================================================================
   16. PANEL DE ADMINISTRACIÓN
   =============================================================================
   Formularios, listas y acciones para gestión de productos, almacenes y usuarios.
   ----------------------------------------------------------------------------- */

/* — Encabezado admin — */
.inv-admin-head     { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.inv-admin-head h1  { margin: 4px 0 6px; font-size: 30px; line-height: 1.1; }
.inv-admin-head p   { margin: 0; max-width: 780px; color: #64748b; }

/* — Grillas admin — */
.inv-admin-grid               { display: grid; gap: 18px; align-items: start; margin-bottom: 18px; }
.inv-admin-stack              { display: grid; gap: 18px; }
.inv-admin-grid--products,
.inv-admin-grid--warehouses   { grid-template-columns: 1fr; }
.inv-product-module-shell {
  gap: 14px;
}
.inv-product-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.inv-product-summary > div {
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}
.inv-product-summary span,
.inv-product-summary small {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.inv-product-summary strong {
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
}
.inv-product-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #f8fafc;
  overflow-x: auto;
}
.inv-product-tabs button {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}
.inv-product-tabs button:hover {
  color: #1d4ed8;
  background: #eef2ff;
}
.inv-product-tabs button.is-active {
  color: #fff;
  background: #1d4ed8;
  box-shadow: 0 10px 18px rgba(29, 78, 216, .18);
}
.inv-product-tab-panel[hidden] {
  display: none !important;
}
.inv-product-context-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-product-search-form {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-product-search-form .inv-catalog-search {
  min-width: min(360px, 100%);
}
.inv-product-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}
.inv-product-pager > div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.inv-product-page-numbers {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  max-width: min(100%, 680px);
}
.inv-product-page-numbers a {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid #dbeafe;
  border-radius: 9px;
  background: #fff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}
.inv-product-page-numbers a:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}
.inv-product-page-numbers a.is-active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}
.inv-movement-panel {
  scroll-margin-top: 96px;
}
.inv-movement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.inv-movement-card {
  align-content: start;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}
.inv-movement-card h3 {
  margin: 4px 0 4px;
}
.inv-movement-card p {
  margin: 0;
  color: #64748b;
}
.inv-movement-card textarea {
  width: 100%;
  resize: vertical;
}
.inv-movement-recent {
  margin-top: 10px;
}
.inv-movement-recent--primary {
  padding: 14px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #f8fbff;
}
.inv-movement-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 150px 150px;
  align-items: end;
  gap: 8px;
  width: min(100%, 650px);
}
.inv-date-filter {
  display: grid;
  gap: 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.inv-date-filter input {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
.inv-movement-table-wrap {
  max-height: min(58vh, 560px);
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.inv-movement-table {
  width: 100%;
  min-width: 860px;
}
.inv-status--entrada { background: #dcfce7; color: #047857; }
.inv-status--salida  { background: #fee2e2; color: #b91c1c; }
.inv-status--ajuste  { background: #e0f2fe; color: #0369a1; }
.inv-status--traspaso { background: #ede9fe; color: #6d28d9; }
.inv-delta {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.inv-delta--up   { background: #dcfce7; color: #047857; }
.inv-delta--down { background: #fee2e2; color: #b91c1c; }
.inv-delta--zero { background: #f1f5f9; color: #64748b; }
.inv-bulk-details {
  margin-top: 12px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #fff;
}
.inv-bulk-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.inv-bulk-details summary::-webkit-details-marker { display: none; }
.inv-bulk-details summary strong {
  display: block;
  margin-top: 2px;
  color: #0f172a;
  font-size: 15px;
}
.inv-bulk-details summary > span {
  padding: 6px 11px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}
.inv-bulk-details[open] summary {
  border-bottom: 1px solid #dbeafe;
}
.inv-bulk-details[open] summary > span::before {
  content: 'Cerrar ';
}
.inv-bulk-details[open] summary > span {
  color: #475569;
  background: #f1f5f9;
}
.inv-bulk-details .inv-movement-grid {
  padding: 12px;
}

/* — Panel admin — */
.inv-admin-panel {
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

/* — Formulario admin — */
.inv-admin-form { display: grid; gap: 13px; }
.inv-admin-form h2,
.inv-admin-section-head h2 { margin: 4px 0 0; font-size: 18px; }
.inv-admin-form label      { display: grid; gap: 7px; align-content: start; color: #64748b; font-size: 12px; font-weight: 900; text-transform: uppercase; }
/* El display:grid de arriba pisa el atributo [hidden] del navegador; esto lo restablece
   para poder ocultar campos por JS (ej. Condicion/Marca/Serial fuera de equipos). */
.inv-admin-form label[hidden] { display: none; }
.inv-admin-form input,
.inv-admin-form select,
.inv-admin-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  outline: 0;
}
.inv-admin-form textarea { resize: vertical; }

/* — Fila doble en formulario — */
.inv-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* — Acciones de modal — */
.inv-modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* — Ayuda del modal de importación de llaves — */
.inv-key-import-help {
  display: grid;
  gap: 9px;
  padding: 14px 16px;
  border: 1px solid #dbeafe;
  border-left: 4px solid #2563eb;
  border-radius: 12px;
  background: #f5f8ff;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}
.inv-key-import-help p  { margin: 0; font-weight: 700; color: #0f172a; }
.inv-key-import-help ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.inv-key-import-help li { font-weight: 600; }
.inv-key-import-help em { font-style: normal; font-weight: 800; color: #1e40af; }
.inv-key-import-help .inv-secondary-btn { justify-self: start; margin-top: 3px; }

/* — Encabezado de sección admin — */
.inv-admin-section-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }

/* — Lista de ítems admin — */
.inv-admin-list       { display: grid; gap: 10px; }
.inv-admin-list--grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* — Fila de ítem admin — */
.inv-admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}
.inv-admin-row--stack   { display: grid; align-items: start; }
.inv-admin-row strong,
.inv-admin-row small    { display: block; }
.inv-admin-row strong   { margin-top: 4px; color: #0f172a; }
.inv-admin-row small,
.inv-admin-row p        { color: #64748b; font-size: 13px; }
.inv-admin-row p        { margin: 8px 0 0; }

/* — Badge de código — */
.inv-admin-code { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 11px; font-weight: 900; }

/* — Meta / acciones de la fila — */
.inv-admin-row-meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; text-align: right; }
.inv-admin-row-meta form { margin: 0; display: inline-flex; }


/* =============================================================================
   16b. MÓDULO DE PRODUCTOS — administración rápida, densa y tintada por área
   (--ac se hereda del shell; color-mix degrada al azul base si no hay soporte)
   ============================================================================= */

/* Encabezado + cambio de módulo */
.inv-product-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.inv-product-head-title h1 { margin: 2px 0 0; font-size: 28px; line-height: 1.1; font-weight: 900; color: #0f172a; }
.inv-seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.inv-seg-item { padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 800; color: #64748b; text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.inv-seg-item:hover { color: var(--ac, #1d4ed8); text-decoration: none; }
.inv-seg-item.is-active { background: #fff; color: var(--ac, #1d4ed8); box-shadow: 0 1px 3px rgba(15, 23, 42, .12), inset 0 0 0 1px color-mix(in srgb, var(--ac, #1d4ed8) 30%, #fff); }

/* Barra de pestañas (acceso rápido) del módulo de Configuración */
.config-tabs { overflow-x: auto; margin: 0 0 1.25rem; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.config-tabs .inv-seg { min-width: max-content; }

/* Chips de resumen */
.inv-product-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.inv-pstat { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid #e6ebf2; border-left: 3px solid var(--ac, #2563eb); border-radius: 12px; background: #fff; text-decoration: none; color: inherit; }
.inv-pstat-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.inv-pstat strong { font-size: 26px; font-weight: 900; line-height: 1; color: #0f172a; }
.inv-pstat small { font-size: 11.5px; color: #94a3b8; font-weight: 700; }
a.inv-pstat { transition: transform .15s ease, box-shadow .15s ease; }
a.inv-pstat:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, .08); text-decoration: none; }
.inv-pstat--alert { border-left-color: #cbd5e1; }
.inv-pstat--alert.is-on { border-left-color: #ea580c; background: #fff7ed; }
.inv-pstat--alert.is-on strong { color: #c2410c; }
.inv-pstat--alert.is-on .inv-pstat-label { color: #9a3412; }

/* Tabs tintadas */
.inv-product-tabs button:hover { color: var(--ac, #1d4ed8); background: color-mix(in srgb, var(--ac, #1d4ed8) 8%, #fff); }
.inv-product-tabs button.is-active { background: var(--ac, #1d4ed8); box-shadow: 0 10px 18px color-mix(in srgb, var(--ac, #1d4ed8) 22%, transparent); }
/* La pestaña activa conserva su texto blanco al pasar el cursor (si no, el hover
   pinta el texto del color del acento sobre el fondo del acento = invisible). */
.inv-product-tabs button.is-active:hover { color: #fff; background: var(--ac, #1d4ed8); }

/* Barra de acción del panel */
.inv-product-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.inv-product-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-product-panel-title { margin: 0; font-size: 18px; font-weight: 800; color: #0f172a; }
.inv-product-toolbar .inv-product-search-form { flex: 1 1 320px; justify-content: flex-start; }
.inv-product-search-wrap { position: relative; display: inline-flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.inv-product-search-wrap svg { position: absolute; left: 12px; width: 16px; height: 16px; color: #94a3b8; pointer-events: none; }
.inv-product-search-wrap .inv-catalog-search { width: 100%; min-width: 0; padding-left: 36px; }

/* Botón primario tintado + botones de ícono */
.inv-primary-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px;
  border: 0; border-radius: 12px; background: var(--ac, #1d4ed8); color: #fff;
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; text-decoration: none;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--ac, #1d4ed8) 30%, transparent);
  transition: transform .15s ease, filter .15s ease;
}
.inv-primary-btn:hover { transform: translateY(-1px); filter: brightness(1.06); color: #fff; text-decoration: none; }
.inv-primary-btn svg { width: 16px; height: 16px; }
/* Calificado con `button` para ganar a la regla global `button:not(.hamburger)`
   de app.css, que si no pinta estos botones de azul y oculta el icono. */
button.inv-icon-btn,
a.inv-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #475569; cursor: pointer; text-decoration: none; transition: border-color .15s ease, color .15s ease, background .15s ease; }
button.inv-icon-btn:hover,
a.inv-icon-btn:hover { border-color: color-mix(in srgb, var(--ac, #2563eb) 45%, #fff); color: var(--ac, #1d4ed8); background: color-mix(in srgb, var(--ac, #2563eb) 6%, #fff); }
button.inv-icon-btn svg,
a.inv-icon-btn svg { width: 16px; height: 16px; }
button.inv-icon-btn--danger:hover { border-color: #fecaca; color: #dc2626; background: #fef2f2; }

/* SKU tintado con el color del módulo */
.inv-product-module-shell .inv-admin-code { background: color-mix(in srgb, var(--ac, #2563eb) 12%, #fff); color: var(--ac, #1d4ed8); }

/* Fila de producto */
.inv-prod-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inv-prod-main .inv-admin-code { flex: 0 0 auto; }
.inv-prod-name { min-width: 0; }
.inv-prod-name strong { display: block; margin: 0; color: #0f172a; font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-prod-name small { display: block; color: #64748b; font-size: 12px; }
.inv-prod-desc { display: block; margin-top: 2px; color: #475569; font-size: 11.5px; font-weight: 600; line-height: 1.35; max-width: 100%; white-space: pre-line; overflow-wrap: anywhere; }
.inv-prod-spec { display: block; margin-top: 2px; color: #334155; font-size: 11.5px; line-height: 1.35; max-width: 100%; white-space: pre-line; overflow-wrap: anywhere; }
.inv-prod-spec .inv-product-detail-tag { display: block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.inv-prod-flag { color: #b45309; font-weight: 800; }
.inv-prod-cat {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: #eef2ff; color: #4338ca; font-weight: 700; font-size: 11px;
}
.inv-prod-stock { display: grid; gap: 1px; justify-items: end; text-align: right; }
.inv-prod-stock strong { color: #0f172a; font-weight: 900; font-size: 15px; }
.inv-prod-stock small { color: #94a3b8; font-size: 11px; font-weight: 700; }
.inv-prod-stock--none small { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; padding: 3px 9px; border-radius: 999px; font-weight: 800; }

/* Fila de stock con severidad y medidor */
.inv-stock-row { border-left: 3px solid #e2e8f0; }
.inv-stock-row--out  { border-left-color: #dc2626; }
.inv-stock-row--crit { border-left-color: #f97316; }
.inv-stock-row--low  { border-left-color: #f59e0b; }
.inv-stock-row--ok   { border-left-color: #16a34a; }
.inv-stock-gauge { display: grid; gap: 5px; justify-items: end; }
.inv-stock-gauge-num { font-size: 12.5px; color: #475569; font-weight: 700; }
.inv-stock-gauge-num strong { color: #0f172a; font-weight: 900; }
.inv-stock-gauge-track { width: 130px; height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.inv-stock-gauge-fill { display: block; height: 100%; border-radius: 999px; background: #cbd5e1; }
.inv-stock-row--out  .inv-stock-gauge-fill { background: #dc2626; }
.inv-stock-row--crit .inv-stock-gauge-fill { background: #f97316; }
.inv-stock-row--low  .inv-stock-gauge-fill { background: #fbbf24; }
.inv-stock-row--ok   .inv-stock-gauge-fill { background: #16a34a; }
.inv-stock-sev { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.inv-stock-sev--out  { background: #fee2e2; color: #b91c1c; }
.inv-stock-sev--crit { background: #ffedd5; color: #c2410c; }
.inv-stock-sev--low  { background: #fef3c7; color: #92400e; }
.inv-stock-sev--ok   { background: #dcfce7; color: #166534; }

/* — Movimientos inline desde la fila de stock — */
.inv-stock-item { display: block; }
.inv-stock-actions { display: inline-flex; gap: 4px; }
.inv-move-trigger { width: 32px; height: 32px; }
.inv-move-trigger--entrada:hover { border-color: #bbf7d0; color: #16a34a; background: #f0fdf4; }
.inv-move-trigger--salida:hover  { border-color: #fecaca; color: #dc2626; background: #fef2f2; }
.inv-move-trigger--ajuste:hover  { border-color: #bfdbfe; color: #2563eb; background: #eff6ff; }
.inv-stock-item.is-moving .inv-stock-row { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.inv-stock-move-panel {
  margin: 0 0 2px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: #f8fafc;
  display: grid;
  gap: 12px;
  animation: invMoveIn .14s ease;
}
@keyframes invMoveIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.inv-stock-move-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.inv-stock-move-title { font-weight: 800; color: #0f172a; font-size: 13.5px; }
.inv-stock-move-title small { color: #64748b; font-weight: 600; }
.inv-stock-move-current { font-size: 12.5px; color: #475569; }
.inv-stock-move-current strong { color: #0f172a; font-weight: 900; }

.inv-move-seg { display: inline-flex; padding: 3px; gap: 3px; background: #eef2f7; border-radius: 10px; justify-self: start; }
.inv-move-seg-btn { border: 0; background: transparent; padding: 6px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: #475569; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.inv-move-seg-btn:hover { color: #0f172a; }
.inv-move-seg-btn.is-active { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.inv-move-seg-btn[data-move-seg="entrada"].is-active { color: #15803d; }
.inv-move-seg-btn[data-move-seg="salida"].is-active  { color: #b91c1c; }
.inv-move-seg-btn[data-move-seg="ajuste"].is-active  { color: #1d4ed8; }

.inv-stock-move-fields { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.inv-stock-move-qty { display: grid; gap: 5px; }
.inv-stock-move-qty span { font-size: 12px; color: #475569; font-weight: 700; }
.inv-stock-move-qty input { width: 150px; }
.inv-stock-move-result { font-size: 13px; color: #475569; padding-bottom: 8px; }
.inv-stock-move-result strong { color: #0f172a; font-weight: 900; }
.inv-stock-move-result.is-negative { color: #b91c1c; font-weight: 700; }
.inv-stock-move-reason { display: grid; gap: 5px; font-size: 12px; color: #475569; font-weight: 700; }
.inv-stock-move-reason small { font-weight: 500; color: #94a3b8; }
.inv-stock-move-actions { display: flex; gap: 8px; align-items: center; }
.inv-stock-move-actions .inv-request-submit { width: auto; padding-inline: 18px; }
.inv-stock-move-actions .inv-request-submit:disabled { opacity: .5; cursor: not-allowed; }
.inv-bulk-adjust { gap: 12px; }
.inv-movement-grid .inv-bulk-adjust { width: 100%; }
.inv-bulk-add {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 120px 110px minmax(150px, .8fr) auto;
  gap: 8px;
  align-items: end;
}
.inv-bulk-add select,
.inv-bulk-add input,
.inv-bulk-row select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 13px;
}
.inv-bulk-list { display: grid; gap: 8px; }
.inv-bulk-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto 70px minmax(170px, .85fr) minmax(120px, .7fr) 34px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.inv-bulk-product { display: grid; gap: 2px; min-width: 0; }
.inv-bulk-product strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-bulk-product small { color: #64748b; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-bulk-qty { color: #1d4ed8; text-align: center; }
.inv-product-stock-search,
.inv-movement-search { min-width: min(100%, 320px); }
.inv-bulk-count-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, .55fr);
  gap: 8px;
  align-items: center;
}
.inv-bulk-count-toolbar input[type="text"] {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 13px;
}
.inv-bulk-count-list {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: min(52vh, 520px);
  min-height: 280px;
  overflow: auto;
  padding: 2px 6px 2px 2px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #fff;
}
.inv-bulk-count-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 120px 140px;
  align-items: center;
  align-self: start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fbff;
}
.inv-bulk-current {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}
.inv-bulk-current strong {
  color: #0f172a;
  font-size: 14px;
}
.inv-bulk-count-row input {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}
.inv-bulk-count-row input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
  outline: 0;
}

/* — Tarjeta guia de movimientos individuales — */
.inv-movement-card--guide { display: grid; gap: 12px; align-content: start; }
.inv-movement-card--guide p { margin: 0; }
.inv-movement-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: #475569; }
.inv-movement-legend li { display: flex; align-items: center; gap: 8px; }
.inv-move-chip { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.inv-move-chip--entrada { background: #dcfce7; color: #166534; }
.inv-move-chip--salida  { background: #fee2e2; color: #b91c1c; }
.inv-move-chip--ajuste  { background: #dbeafe; color: #1d4ed8; }
.inv-movement-card--guide .inv-secondary-btn { justify-self: start; }

/* Fila de 3 columnas en formularios */
.inv-form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .inv-product-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-form-row--3 { grid-template-columns: 1fr; }
  .inv-product-toolbar .inv-product-search-form { flex-basis: 100%; }
  .inv-stock-gauge { justify-items: start; }
  .inv-stock-gauge-track { width: 100%; }
  .inv-product-stock-search,
  .inv-movement-search { width: 100%; }
  .inv-movement-filters { grid-template-columns: 1fr; width: 100%; }
  .inv-bulk-add,
  .inv-bulk-row,
  .inv-bulk-count-toolbar,
  .inv-bulk-count-row { grid-template-columns: 1fr; }
  .inv-bulk-count-list { max-height: 58vh; }
  .inv-bulk-current { text-align: left; }
}

/* — Botones de aprobación (aprobar / rechazar) — */
/* — Auditoria global — */
/* Auditoría: pestañas Registro / En línea */
.audit-tabs { display: flex; gap: 6px; margin: 0 0 16px; border-bottom: 1px solid #e5eaf1; }
.audit-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.audit-tab svg { width: 16px; height: 16px; opacity: .85; }
.audit-tab:hover { color: #0f172a; background: rgba(15,23,42,.03); }
.audit-tab.is-active { color: #2563eb; border-bottom-color: #2563eb; }
.audit-tab-live { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #16a34a; color: #fff; font-size: 11px; font-weight: 800; }

/* Personas en línea (tiempo real) */
.audit-online-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #eef2f7; }
.audit-online-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.audit-online-total { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: #16a34a; }
.audit-online-total strong { font-size: 18px; }
.audit-online-dot, .audit-online-avatar-dot { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; animation: audit-pulse 1.8s infinite; }
@keyframes audit-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow: 0 0 0 6px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.audit-online-updated { font-size: 11.5px; color: #94a3b8; }
/* Aviso de reloj desalineado: la lista puede venir incompleta y hay que decirlo. */
.audit-online-warn {
  margin: 8px 0 0; padding: 8px 11px; border-left: 3px solid #d97706; border-radius: 8px;
  background: #fffbeb; color: #92400e; font-size: 12.5px; font-weight: 700; line-height: 1.45;
}
.audit-online-list { padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.inv-audit-empty { padding: 24px; text-align: center; color: #94a3b8; }
.audit-online-row { display: grid; grid-template-columns: auto 1.4fr 1fr 1.4fr auto; gap: 14px; align-items: center; padding: 12px 10px; border-radius: 10px; }
.audit-online-row:hover { background: #f8fafc; }
.audit-online-row + .audit-online-row { border-top: 1px solid #f1f5f9; }
.audit-online-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.audit-online-avatar-dot { position: absolute; right: -1px; bottom: -1px; border: 2px solid #fff; }
.audit-online-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.audit-online-id strong { font-size: 14px; color: #0f172a; }
.audit-online-id small { font-size: 12px; color: #64748b; }
.audit-online-where { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.audit-online-route { font-size: 12.5px; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-online-ago { font-size: 12px; font-weight: 700; color: #16a34a; white-space: nowrap; }
.audit-online-flag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; vertical-align: middle; }
.audit-online-kick { margin-left: 10px; padding: 5px 11px; border: 1px solid #fecaca; border-radius: 8px; background: #fff; color: #b91c1c; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.audit-online-kick:hover { background: #fef2f2; border-color: #f87171; }
.audit-sys-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.audit-sys-badge--padre { background: #dbeafe; color: #1d4ed8; }
.audit-sys-badge--hijo { background: #dcfce7; color: #15803d; }
@media (max-width: 720px) {
  .audit-online-row { grid-template-columns: auto 1fr; grid-template-areas: "avatar id" "where where" "sys ago"; }
  .audit-online-avatar { grid-area: avatar; }
  .audit-online-id { grid-area: id; }
  .audit-online-sys { grid-area: sys; }
  .audit-online-where { grid-area: where; }
  .audit-online-ago { grid-area: ago; text-align: right; }
}

.inv-audit-head {
  align-items: flex-start;
  margin-bottom: 20px;
}
.inv-audit-head h1 {
  margin-bottom: 4px;
}
.inv-audit-head .page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.inv-audit-filter-card {
  padding: 18px;
  margin-bottom: 18px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}
.inv-audit-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.inv-audit-filters .field {
  display: grid;
  gap: 7px;
  margin: 0;
}
.inv-audit-filters .field-label {
  margin: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.inv-audit-filters input,
.inv-audit-filters select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  outline: 0;
}
.inv-audit-filters input:focus,
.inv-audit-filters select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.inv-audit-search {
  grid-column: span 2;
}
.inv-audit-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.inv-audit-actions .btn {
  min-height: 40px;
}
/* Las dos fechas van juntas en una sola celda: como par no se pueden separar,
   y sueltas en la reja quedaban en filas distintas. */
.inv-audit-dates {
  grid-column: span 2;
}
.inv-audit-date-pair {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inv-audit-date-pair span {
  color: var(--muted);
  font-weight: 800;
}
/* Rangos rapidos de fecha. Ocupan su propia fila para no partir la reja de
   filtros. Gemelo del padre (.inv-audit-range* en app.css de compras_mvc). */
.inv-audit-ranges {
  grid-column: 1 / -1;
}
.inv-audit-range-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.inv-audit-range {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.inv-audit-range:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}
.inv-audit-range:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
/* Excel sin filas que exportar: se apaga en vez de bajar un archivo vacio. */
.inv-audit-head .btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.inv-audit-table-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
}
.inv-audit-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
}
.inv-audit-table-head h2 {
  margin: 4px 0 0;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.2;
}
.inv-audit-count {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.inv-audit-table-wrap {
  border: 0;
  margin: 0;
}
.inv-audit-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}
.inv-audit-table th {
  padding: 13px 16px;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.inv-audit-table td {
  padding: 14px 16px;
  vertical-align: top;
  border-top: 1px solid #edf2f7;
}
.inv-audit-table tbody tr:hover {
  background: #f8fbff;
}
.inv-audit-table td strong {
  display: block;
  margin-bottom: 3px;
  color: #0f172a;
}

/* — Toggle de detalle por fila — */
.inv-audit-th-toggle { width: 44px; }
.inv-audit-toggle-cell { width: 44px; text-align: center; }
/* `button.` para ganarle a la regla global `button:not(.hamburger)` (0,1,1)
   de app.css, que si no lo pinta azul y oculta el chevron.
   Ver memoria grupobande-button-specificity. */
button.inv-audit-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.inv-audit-expand svg { width: 16px; height: 16px; transition: transform .15s ease; }
button.inv-audit-expand:hover { border-color: #1d4ed8; background: #eff6ff; color: #1d4ed8; }
.inv-audit-row.is-open .inv-audit-expand { border-color: #1d4ed8; background: #1d4ed8; color: #fff; }
.inv-audit-row.is-open .inv-audit-expand svg { transform: rotate(180deg); }
.inv-audit-row.is-open > td { background: #f8fbff; }

/* — Fila de detalle expandible — */
.inv-audit-detail-row > td { border-top: 0; padding-top: 0; background: #f8fbff; }
.inv-audit-detail {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  display: grid;
  gap: 14px;
}
.inv-audit-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 18px;
}
.inv-audit-detail-grid > div { display: grid; gap: 3px; }
.inv-audit-detail-wide { grid-column: 1 / -1; }
.inv-audit-detail-k { font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; }
.inv-audit-detail-v { color: #0f172a; font-weight: 700; word-break: break-word; }
.inv-audit-detail-meta { display: grid; gap: 6px; }
.inv-audit-meta-pre {
  margin: 0;
  padding: 12px 14px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* — Paginacion — */
.inv-audit-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px;
  border-top: 1px solid #edf2f7;
}
.inv-audit-page-status { font-size: 13px; font-weight: 800; color: #475569; }
.inv-audit-page-nav.is-disabled { opacity: .45; pointer-events: none; cursor: default; }
.inv-audit-page-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}
.inv-audit-page-number,
.inv-audit-page-ellipsis {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
}
.inv-audit-page-number {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  text-decoration: none;
}
.inv-audit-page-number:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  text-decoration: none;
}
.inv-audit-page-number.is-active {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
}
.inv-audit-page-ellipsis { color: #94a3b8; min-width: 22px; }
.inv-audit-page-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.inv-audit-page-jump label {
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.inv-audit-page-jump input {
  width: 76px;
  height: 36px;
  padding: 0 9px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  outline: 0;
}
.inv-audit-page-jump input:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, .25);
}

.inv-approval-actions         { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.inv-approval-actions form    { display: inline-flex; }
/* Calificados con button./a. para ganarle a la regla global button:not(.hamburger)
   (que si no, los pinta de azul). */
button.inv-approval-btn,
a.inv-approval-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 15px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
button.inv-approval-btn--approve { background: #0f172a; border-color: #0f172a; color: #fff; }
button.inv-approval-btn--approve:hover { background: #1e293b; border-color: #1e293b; box-shadow: 0 6px 16px -8px rgba(15,23,42,.55); }
button.inv-approval-btn--reject  { background: #fff; border-color: #fecaca; color: #b91c1c; }
button.inv-approval-btn--reject:hover { background: #fef2f2; border-color: #fca5a5; }
button.inv-approval-btn--approve:active,
button.inv-approval-btn--reject:active { transform: translateY(1px); }


/* =============================================================================
   17. COMPONENTES REUTILIZABLES
   =============================================================================
   Botones, badges de estado y utilidades compartidas en toda la interfaz.
   ----------------------------------------------------------------------------- */

/* — Botón secundario (outline azul) — */
.inv-secondary-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid #dbeafe;
  background: #fff;
  color: #1d4ed8;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.inv-secondary-btn:hover    { background: #eff6ff; text-decoration: none; }
.inv-secondary-btn.is-active { border-color: #1d4ed8; background: #dbeafe; color: #1e3a8a; }

/* — Botón de peligro (outline rojo) — */
.inv-danger-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid #fecdd3;
  background: #fff;
  color: #be123c;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.inv-danger-btn:hover { background: #fff1f2; }

/* ── Guarda de contraste en hover ──────────────────────────────────────────
   La regla global `button:not(.hamburger)` de app.css (especificidad 0,1,1)
   le gana a las clases de un solo selector y, en hover, pinta el fondo de azul
   oscuro SIN cambiar el color del texto -> el texto se pierde en los botones
   claros (outline/secundario/peligro). Calificamos con `button.` para empatar
   esa especificidad (inventario.css carga despues de app.css, asi que el empate
   lo gana inventario) y fijamos SIEMPRE fondo + color legible.
   Ver memoria grupobande-button-specificity. */
button.inv-secondary-btn,
a.inv-secondary-btn            { background: #fff; color: #1d4ed8; }
button.inv-secondary-btn:hover,
a.inv-secondary-btn:hover      { background: #eff6ff; color: #1d4ed8; }
button.inv-secondary-btn.is-active,
a.inv-secondary-btn.is-active  { background: #dbeafe; color: #1e3a8a; border-color: #1d4ed8; }
button.inv-secondary-btn.is-active:hover,
a.inv-secondary-btn.is-active:hover { background: #c7dcfb; color: #1e3a8a; }
button.inv-secondary-btn:disabled,
button.inv-secondary-btn[disabled] { opacity: .55; }

button.inv-danger-btn,
a.inv-danger-btn               { background: #fff; color: #be123c; }
button.inv-danger-btn:hover,
a.inv-danger-btn:hover         { background: #fff1f2; color: #be123c; }

/* Boton primario solido: el hover global lo oscurece pero deja el texto blanco,
   asi que el contraste se mantiene; reafirmamos el color por si acaso. */
button.inv-request-submit:hover,
a.inv-request-submit:hover     { background: #1e40af; color: #fff; }

/* — Badge de estado — */
.inv-status {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.inv-status--activo    { background: #dcfce7; color: #166534; }  /* Verde */
.inv-status--inactivo  { background: #f1f5f9; color: #475569; }  /* Gris */
.inv-status--rechazado { background: #fee2e2; color: #991b1b; }  /* Rojo */
.inv-status--neutral   { background: #dbeafe; color: #1e40af; }  /* Azul */

/* — Clases de relleno de barras de progreso — */
.dash-flow-fill--full { width: 100%; }
.dash-flow-fill--low  { width: 15%;  }


/* =============================================================================
   18. UTILIDADES DE ANIMACIÓN / DELAY
   =============================================================================
   Variables CSS de delay para animar tarjetas KPI, módulos de foco
   y barras de flujo de forma escalonada con JS o CSS animations.
   ----------------------------------------------------------------------------- */

/* — KPI cards — */
.dash-kpi-delay-0 { --dash-kpi-delay: 0ms;   }
.dash-kpi-delay-1 { --dash-kpi-delay: 60ms;  }
.dash-kpi-delay-2 { --dash-kpi-delay: 120ms; }
.dash-kpi-delay-3 { --dash-kpi-delay: 180ms; }
.dash-kpi-delay-4 { --dash-kpi-delay: 240ms; }
.dash-kpi-delay-5 { --dash-kpi-delay: 300ms; }
.dash-kpi-delay-6 { --dash-kpi-delay: 360ms; }
.dash-kpi-delay-7 { --dash-kpi-delay: 420ms; }

/* — Módulos de foco — */
.dash-focus-delay-0 { --dash-focus-delay: 0ms;   }
.dash-focus-delay-1 { --dash-focus-delay: 80ms;  }
.dash-focus-delay-2 { --dash-focus-delay: 160ms; }
.dash-focus-delay-3 { --dash-focus-delay: 240ms; }
.dash-focus-delay-4 { --dash-focus-delay: 320ms; }
.dash-focus-delay-5 { --dash-focus-delay: 400ms; }
.dash-focus-delay-6 { --dash-focus-delay: 480ms; }
.dash-focus-delay-7 { --dash-focus-delay: 560ms; }

/* — Barras de flujo — */
.dash-flow-delay-0 { --dash-flow-delay: 0ms;   }
.dash-flow-delay-1 { --dash-flow-delay: 50ms;  }
.dash-flow-delay-2 { --dash-flow-delay: 100ms; }
.dash-flow-delay-3 { --dash-flow-delay: 150ms; }
.dash-flow-delay-4 { --dash-flow-delay: 200ms; }
.dash-flow-delay-5 { --dash-flow-delay: 250ms; }
.dash-flow-delay-6 { --dash-flow-delay: 300ms; }
.dash-flow-delay-7 { --dash-flow-delay: 350ms; }


/* =============================================================================
   19. MEDIA QUERIES — TABLET (≤ 980 px)
   =============================================================================
   Ajustes para pantallas medianas: colapso de sidebar, grillas de 1-2 columnas.
   ----------------------------------------------------------------------------- */
@media (max-width: 980px) {

  /* Tarjeta de aprobacion/historial: documentos pasan debajo (evita el panel
     desbordado en pantallas medianas que rompia el apartado de Archivos). */
  .inv-history-card { grid-template-columns: 1fr; }

  /* — Sidebar: oculta y deslizable — */
  .app-shell--with-sidebar { display: block; }
  .content.inv-app-frame,
  body.sidebar-compact .content.inv-app-frame { margin-left: 0; }

  .hamburger { display: flex; }  /* Muestra el botón hamburguesa */
  button.sidebar-compact-btn.inv-menu-btn { display: none; }

  .navbar.app-topbar { left: 0; padding: 0 16px; gap: 10px; }
  body.sidebar-compact .navbar.app-topbar { left: 0; }

  /* Sidebar se convierte en drawer (off-canvas).
     Se usa la doble clase `.sidebar.inv-sidebar` (misma especificidad que la
     regla base) para que estas propiedades NO sean pisadas por el bloque base
     —antes el width/z-index base ganaban y el drawer quedaba bajo el topbar. */
  .sidebar.inv-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;                 /* por encima del topbar (50) y del overlay (55) */
    width: min(86vw, 320px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    overscroll-behavior: contain;          /* el scroll del drawer no arrastra el fondo */
    -webkit-overflow-scrolling: touch;
    will-change: transform;                /* capa de composición estable (evita el repintado corrupto) */
    backface-visibility: hidden;
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .sidebar.inv-sidebar.open       { transform: translateX(0); }
  .sidebar-overlay                { z-index: 55; }   /* tapa también el topbar al abrir el drawer */
  .sidebar-overlay.open           { display: block; }
  .sidebar.inv-sidebar.open       { box-shadow: 18px 0 38px rgba(0, 0, 0, .35); }

  /* Bloquea el scroll del fondo mientras el drawer está abierto: en Android esto
     elimina el "sangrado"/repintado del contenido detrás del sidebar. */
  body.drawer-open { overflow: hidden; }

  /* — Tablero de llaves — */
  .inv-key-shell { min-height: auto; grid-template-columns: 1fr; }
  .inv-key-shell:not(.inv-key-shell--admin) .inv-key-side  { order: 2; }
  .inv-key-shell:not(.inv-key-shell--admin) .inv-key-board-panel { order: 1; }
  .inv-key-shell--admin { grid-template-rows: auto auto; }
  .inv-key-shell--admin .inv-key-toprow { grid-template-columns: 1fr; }
  .inv-key-board { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .inv-key-board-head { display: grid; }
  .inv-key-board-stats { justify-content: stretch; }
  .inv-key-board-stats span { flex: 1; }

  /* — Request workspace — */
  .inv-request-workspace { grid-template-columns: 1fr; }
  .inv-approval-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-request-workspace--touch { height: auto; min-height: 0; overflow: visible; }
  .inv-request-panel { position: static; }
  .inv-request-workspace--touch .inv-request-panel  { order: 1; }
  .inv-request-workspace--touch .inv-catalog-panel  { order: 2; height: auto; }
  .inv-request-workspace--touch .inv-catalog-grid   { overflow: visible; }
  .inv-cart-list { max-height: none; }

  /* — Admin — */
  .inv-admin-grid--products,
  .inv-admin-grid--warehouses,
  .inv-movement-grid { grid-template-columns: 1fr; }
  .inv-product-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-audit-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-audit-search { grid-column: 1 / -1; }

  /* — Dashboard — */
  .inv-dash-overview,
  .inv-dash-workspace { grid-template-columns: 1fr; }
  .inv-dash-summary   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-dash-modules,
  .inv-dash-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* — Login — */
  .inv-login-card { width: min(740px, 100%); grid-template-columns: 1fr; }
  .inv-login-side { padding: 24px; }
  .inv-form-panel { border-radius: 0; box-shadow: none; padding: 28px; }
}


/* =============================================================================
   20. MEDIA QUERIES — MÓVIL (≤ 640 px)
   =============================================================================
   Ajustes para pantallas pequeñas: grillas de 1 columna, texto reducido.
   ----------------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* — Tablero de llaves — */
  .inv-key-board { grid-template-columns: 1fr; }
  .inv-key-request,
  .inv-key-board-panel { padding: 14px; }

  /* — Layout general — */
  .app-main   { padding: 14px; }
  .app-topbar { padding: 12px 14px; }

  /* — Admin — */
  .inv-admin-head,
  .inv-admin-section-head,
  .inv-admin-row     { display: grid; align-items: start; }
  .inv-product-summary { grid-template-columns: 1fr; }
  .inv-product-context-actions,
  .inv-product-search-form { justify-content: stretch; }
  .inv-product-context-actions > *,
  .inv-product-search-form > * { width: 100%; }
  .inv-audit-head .page-actions,
  .inv-audit-head .btn { width: 100%; }
  .inv-audit-filters { grid-template-columns: 1fr; }
  .inv-audit-actions,
  .inv-audit-actions .btn { width: 100%; }
  .inv-audit-table-head { display: grid; align-items: start; }
  .inv-form-row      { grid-template-columns: 1fr; }
  .inv-admin-row-meta { justify-content: start; text-align: left; }

  /* — Dashboard — */
  .inv-dash-summary,
  .inv-approval-summary,
  .inv-dash-modules,
  .inv-dash-area-grid,
  .inv-dash-focus-stats { grid-template-columns: 1fr; }
  .inv-dash-section-head,
  .inv-dash-request      { display: grid; align-items: start; }

  /* — Topnav en columna — */
  .app-shell--topnav .app-topbar { align-items: stretch; flex-wrap: wrap; gap: 10px; }
  .app-shell--topnav .app-topbar-spacer { display: none; }
  .app-shell--topnav .app-userbox { width: 100%; justify-content: flex-end; }
  .inv-topnav { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; border-radius: 16px; }
  .inv-topnav a { min-width: 0; padding: 0 10px; }
  .app-chip,
  .app-user-meta { display: none; }

  /* — Request workspace — */
  .inv-request-hero,
  .inv-request-hero--compact,
  .inv-catalog-head,
  .inv-history-card { grid-template-columns: 1fr; }
  .inv-request-hero { padding: 16px; }
  .inv-request-hero h1 { font-size: 26px; }
  .inv-request-stats   { grid-template-columns: 1fr 1fr; }
  .inv-catalog-head    { display: grid; align-items: start; }
  .inv-catalog-search,
  .inv-request-submit--link { width: 100%; }
  .inv-catalog-head-actions { width: 100%; }
  .inv-catalog-searchbox { flex-basis: 100%; max-width: none; min-height: 52px; }
  .inv-catalog-searchbox-count { display: none; }

  /* — Catálogo táctil — */
  .inv-request-workspace--touch .inv-catalog-grid { grid-template-columns: 1fr; gap: 10px; }
  .inv-product-card { grid-template-columns: 44px minmax(0, 1fr); }
  .inv-request-workspace--touch .inv-product-card {
    min-height: 0;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
  }
  .inv-request-workspace--touch .inv-product-copy { flex: none; }
  .inv-request-workspace--touch .inv-product-visual {
    width: 74px;
    height: 74px;
    grid-row: 1 / span 2;
    font-size: 28px;
  }
  .inv-request-workspace--touch .inv-product-copy p     { display: none; }
  .inv-request-workspace--touch .inv-product-actions    { grid-column: 2; padding-top: 0; border-top: 0; }
  .inv-touch-add { min-width: 96px; }
  .inv-product-visual { width: 44px; height: 44px; border-radius: 12px; }

  /* — Login — */
  .inv-login-page  { padding: 10px; }
  .inv-login-card  { border-radius: 22px; min-height: 0; }
  .inv-login-side  { padding: 18px; gap: 18px; }
  .inv-logo-box    { width: 106px; height: 74px; border-radius: 20px; }
  .inv-brand h1    { font-size: 26px; }
  .inv-area-grid   { grid-template-columns: 1fr; }
  .inv-area-link   { min-height: 60px; }
  .inv-form-panel  { padding: 18px; }
  .inv-form-card   { gap: 16px; }
}

/* — Consignacion de archivos — */
.inv-catalog-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.inv-consign-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border: 0;
  background: #1d4ed8;
  color: #fff;
  border-radius: 12px;
  min-height: 42px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
  transition: background .2s ease, transform .15s ease;
}
.inv-consign-trigger:hover { background: #1e40af; transform: translateY(-1px); }
.inv-consign-trigger svg { width: 18px; height: 18px; }
.inv-archive-adder { display: flex; gap: 8px; margin-bottom: 12px; }
.inv-archive-adder .inv-archive-field { flex: 1; }
.inv-sign-block { margin: 4px 0 6px; }
.inv-sign-label { display: block; font-size: 13px; color: #334155; margin-bottom: 6px; }
.inv-archive-list { display: grid; gap: 12px; margin: 4px 0 12px; }
.inv-archive-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  transition: background .25s ease, border-color .25s ease;
}
.inv-archive-row.is-highlighted { background: #eff6ff; border-color: #bfdbfe; }
.inv-archive-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inv-archive-row-head strong { font-size: 14px; color: #0f172a; }
.inv-archive-field {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 13px;
  background: #fff;
  outline: 0;
}
.inv-archive-field:focus { border-color: #1e40af; box-shadow: 0 0 0 3px rgba(30, 64, 175, .12); }
.inv-archive-qty-wrap { display: flex; align-items: center; gap: 8px; }
.inv-archive-qty-wrap span { font-size: 12px; color: #64748b; }
.inv-archive-field--qty { width: 90px; }

/* — Panel de firma digital — */
.inv-sign-pad { position: relative; margin: 4px 0 14px; }
.inv-sign-pad canvas {
  width: 100%;
  height: 220px;
  border: 1px dashed #94a3b8;
  border-radius: 14px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}
.inv-sign-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #94a3b8;
  pointer-events: none;
}
.inv-archive-sign-copy { font-size: 14px; color: #334155; margin-bottom: 8px; }

/* — Firma en historial — */
.inv-history-signature { display: inline-flex; flex-direction: column; gap: 4px; margin-top: 8px; text-decoration: none; }
.inv-history-signature img {
  width: 140px;
  height: 56px;
  object-fit: contain;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}
.inv-history-signature span { font-size: 11px; color: #64748b; }

/* ── Campana de notificaciones ───────────────────────────────────────────── */
.inv-notif-wrap { position: relative; display: flex; align-items: center; }
button.inv-notif-btn:not(.hamburger),
button.inv-notif-btn {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #94a3b8 !important;
  cursor: pointer;
  transition: color .15s, background .15s;
  box-shadow: none !important;
}
button.inv-notif-btn:hover,
button.inv-notif-btn.has-notif {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}
button.inv-notif-close {
  background: #f1f5f9 !important;
  color: #64748b !important;
  padding: 0 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
}
button.inv-notif-close:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
.inv-notif-badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #dc2626; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
  pointer-events: none;
}
.inv-notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-height: 480px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14); z-index: 9999;
  display: flex; flex-direction: column; overflow: hidden;
}
/* Campana junto al logo (admin): separa del logo y abre el panel hacia la
   derecha para que no se salga por el borde izquierdo de la pantalla. */
.inv-notif-wrap--brand { margin-left: 6px; }
.inv-notif-wrap--brand .inv-notif-panel { left: 0; right: auto; }
@media (max-width: 600px) {
  .inv-notif-wrap--brand .inv-notif-panel { left: -8px; right: auto; }
}
.inv-notif-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.inv-notif-header strong { font-size: 14px; color: #0f172a; }
.inv-notif-close {
  width: 26px; height: 26px; border: 0; border-radius: 8px;
  background: #f1f5f9; color: #64748b; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.inv-notif-close:hover { background: #e2e8f0; }
.inv-notif-body { overflow-y: auto; flex: 1; padding: 8px 0; }
.inv-notif-section { padding: 4px 0 2px; }
.inv-notif-section + .inv-notif-section { border-top: 1px solid #f1f5f9; margin-top: 4px; padding-top: 8px; }
.inv-notif-section-title {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 16px 6px;
  font-size: 10px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: #94a3b8;
}
.inv-notif-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.inv-notif-dot--warn { background: #f59e0b; }
.inv-notif-dot--red  { background: #dc2626; }
.inv-notif-dot--blue { background: #3b82f6; }

.inv-notif-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; text-decoration: none !important; color: #0f172a !important;
  font-size: 13px; transition: background .12s; cursor: pointer;
}
.inv-notif-item:hover { background: #f8fafc; text-decoration: none !important; }
.inv-notif-item svg { color: #64748b; }
.inv-notif-item--danger svg { color: #dc2626; }
.inv-notif-item--danger { background: #fff5f5; }
.inv-notif-item--danger:hover { background: #fee2e2; }

.inv-notif-item-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.inv-notif-item-title {
  font-size: 13px; font-weight: 600; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-notif-item-title em { font-style: normal; color: #94a3b8; font-size: 11px; font-weight: 400; }
.inv-notif-item-sub { font-size: 11px; color: #94a3b8; white-space: nowrap; }

.inv-notif-count {
  flex-shrink: 0; min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: #fef3c7; color: #b45309;
  font-size: 11px; font-weight: 800; text-align: center; line-height: 22px;
}
.inv-notif-count--red { background: #fee2e2; color: #dc2626; }
.inv-notif-loading, .inv-notif-empty {
  padding: 24px 16px; font-size: 13px; color: #94a3b8; text-align: center;
}
@media (max-width: 480px) {
  .inv-notif-panel { width: calc(100vw - 24px); right: -8px; }
}

/* ── Módulo Despacho ─────────────────────────────────────────────────────── */
.inv-despacho-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.inv-despacho-panel { display: grid; gap: 18px; }
.inv-despacho-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inv-field { display: grid; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
.inv-field input, .inv-field textarea, .inv-field select { width: 100%; padding: 10px 13px; border: 1px solid #dbeafe; border-radius: 12px; font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; color: #0f172a; outline: 0; transition: border-color .18s; }
.inv-field input:focus, .inv-field textarea:focus, .inv-field select:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(147,197,253,.25); }
.inv-field--full { grid-column: 1 / -1; }
.inv-field textarea { resize: vertical; min-height: 72px; }
.inv-despacho-items-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 10px; }
.inv-despacho-items-head strong { font-size: 14px; color: #0f172a; }
.inv-despacho-hint { margin: 0 0 10px; font-size: 13px; color: #94a3b8; font-style: italic; }
.inv-despacho-list { display: grid; gap: 8px; }
/* .inv-despacho-row está definido en la sección de checklist */
.inv-despacho-select { flex: 1; padding: 8px 10px; border: 1px solid #dbeafe; border-radius: 10px; font: inherit; font-size: 13px; color: #0f172a; outline: 0; min-width: 0; }
.inv-despacho-estado { padding: 8px 10px; border: 1px solid #dbeafe; border-radius: 10px; font: inherit; font-size: 12px; color: #0f172a; outline: 0; background: #fff; }
.inv-despacho-estado--sm { padding: 4px 8px; font-size: 11px; border-radius: 8px; }
.inv-despacho-manual { padding: 8px 10px; border: 1px solid #dbeafe; border-radius: 10px; font: inherit; font-size: 13px; width: 100%; outline: 0; }
.inv-despacho-qty { width: 72px; padding: 8px 10px; border: 1px solid #dbeafe; border-radius: 10px; font: inherit; font-size: 13px; text-align: center; outline: 0; }
.inv-despacho-remove { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: #fee2e2; color: #dc2626; font-size: 18px; cursor: pointer; transition: background .15s; flex-shrink: 0; }
.inv-despacho-remove:hover { background: #fca5a5; }
.inv-request-submit--sm { padding: 10px 18px; font-size: 14px; min-height: 40px; border-radius: 12px; }
.inv-despacho-card { padding: 16px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; margin-bottom: 14px; }
.inv-despacho-card.is-parcial { border-color: #fde68a; background: #fffbeb; }
.inv-despacho-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.inv-despacho-card-who { display: flex; align-items: flex-start; gap: 10px; }
.inv-despacho-card-who svg { flex-shrink: 0; margin-top: 3px; color: #64748b; }
.inv-despacho-card-who strong { display: block; font-size: 15px; color: #0f172a; }
.inv-despacho-card-who small { display: block; font-size: 12px; color: #64748b; margin-top: 2px; }
.inv-despacho-card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.inv-despacho-card-meta small { font-size: 11px; color: #94a3b8; }
.inv-despacho-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.inv-despacho-badge--activo  { background: #dbeafe; color: #1d4ed8; }
.inv-despacho-badge--parcial { background: #fef3c7; color: #b45309; }
.inv-despacho-badge--devuelto { background: #dcfce7; color: #15803d; }
.inv-despacho-obs { margin: 0 0 10px; font-size: 13px; color: #64748b; padding: 8px 12px; background: #f1f5f9; border-radius: 10px; }
.inv-despacho-complete { margin: 12px 0 0; font-size: 13px; color: #15803d; font-weight: 700; }
.inv-badge-count { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 800; }
.inv-checklist { display: grid; gap: 8px; }
.inv-checklist-item { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; transition: background .15s, border-color .15s; }
.inv-checklist-item:hover:not(.is-done) { border-color: #93c5fd; background: #eff6ff; }
.inv-checklist-item.is-done { background: #f0fdf4; border-color: #bbf7d0; opacity: .85; }
.inv-checklist-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.inv-checklist-item.is-done .inv-checklist-check { cursor: default; }
.inv-checklist-checkbox { width: 18px; height: 18px; flex-shrink: 0; accent-color: #16a34a; cursor: pointer; }
.inv-checklist-item.is-done .inv-checklist-checkbox { cursor: default; }
.inv-checklist-name { flex: 1; font-size: 14px; color: #0f172a; }
.inv-checklist-item.is-done .inv-checklist-name { text-decoration: line-through; color: #64748b; }
.inv-checklist-qty { font-size: 12px; font-weight: 700; color: #64748b; white-space: nowrap; }
.inv-checklist-tag { font-size: 11px; font-weight: 800; color: #15803d; background: #dcfce7; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.inv-checklist-estados { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.inv-estado-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.inv-estado--buena { background: #dcfce7; color: #15803d; }
.inv-estado--defectuosa { background: #fef3c7; color: #b45309; }
.inv-estado--mala { background: #fee2e2; color: #dc2626; }
.inv-despacho-row { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.inv-dispatch-page { display: grid; gap: 14px; }
.inv-dispatch-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}
.inv-dispatch-head h1 { margin: 3px 0 0; font-size: 30px; line-height: 1.1; }
.inv-dispatch-builder,
.inv-dispatch-active { padding: 14px; }
.inv-dispatch-top {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(220px, 1.3fr);
  gap: 10px;
  margin-bottom: 12px;
}
.inv-dispatch-adder {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 86px minmax(176px, auto) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.inv-dispatch-delivered {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}
.inv-dispatch-delivered input { accent-color: #16a34a; }
.inv-dispatch-list { display: grid; gap: 8px; }
.inv-dispatch-item {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 64px auto auto 34px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.inv-dispatch-item.is-skipped { background: #fff7ed; border-color: #fed7aa; }
.inv-dispatch-item strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-dispatch-item small {
  display: block;
  color: #64748b;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-dispatch-item > span:not(.inv-estado-badge) {
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}
.inv-dispatch-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.inv-dispatch-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.inv-dispatch-section-head strong {
  min-width: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
}
.inv-dispatch-card {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 10px;
}
.inv-dispatch-card.is-parcial { border-color: #fde68a; background: #fffbeb; }
.inv-dispatch-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.inv-dispatch-card-head strong { display: block; color: #0f172a; font-size: 15px; }
.inv-dispatch-card-head small { color: #64748b; font-size: 12px; }
.inv-dispatch-checklist { display: grid; gap: 7px; }
.inv-dispatch-check {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.inv-dispatch-check.is-done { background: #f0fdf4; border-color: #bbf7d0; }
.inv-dispatch-check.is-skipped { background: #fff7ed; border-color: #fed7aa; }
.inv-dispatch-check label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.inv-dispatch-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: #16a34a; }
.inv-dispatch-check label span {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-dispatch-check label small { color: #64748b; font-size: 12px; font-weight: 800; }
/* Buscador de productos en préstamo */
.inv-product-search-wrap { position: relative; }
.inv-product-search-input {
  width: 100%; padding: 10px 13px; border: 1px solid #dbeafe; border-radius: 12px;
  font: inherit; font-size: 14px; color: #0f172a; outline: 0;
  transition: border-color .18s;
}
.inv-product-search-input:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(147,197,253,.25); }
.inv-product-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 200;
  list-style: none; max-height: 240px; overflow-y: auto; padding: 4px 0;
}
.inv-product-dropdown-item {
  padding: 9px 14px; cursor: pointer; transition: background .12s;
  display: grid; gap: 2px;
}
.inv-product-dropdown-item:hover { background: #eff6ff; }
.inv-product-dropdown-item strong { font-size: 14px; color: #0f172a; }
.inv-product-dropdown-item small { font-size: 12px; color: #64748b; }
.inv-product-dropdown-sku {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #64748b;
}
.inv-product-dropdown-empty { padding: 12px 14px; font-size: 13px; color: #94a3b8; font-style: italic; }

.inv-product-detail {
  margin: 8px 0 14px; padding: 12px 14px; border: 1px solid #dbeafe;
  border-radius: 12px; background: #f0f7ff; display: grid; gap: 6px;
}
.inv-product-detail-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv-product-detail-header strong { font-size: 15px; color: #0f172a; }
.inv-product-detail-sku {
  padding: 2px 8px; background: #dbeafe; color: #1d4ed8;
  border-radius: 999px; font-size: 11px; font-weight: 700;
}
.inv-product-detail-meta { display: flex; gap: 14px; flex-wrap: wrap; }
.inv-product-detail-meta span { font-size: 12px; color: #475569; font-weight: 600; }
.inv-product-detail-desc { margin: 0; font-size: 13px; color: #475569; line-height: 1.5; }
.inv-product-detail-specs {
  margin: 0; font-size: 12px; color: #334155; font-style: italic;
  padding: 6px 10px; background: #e0f0ff; border-radius: 8px; line-height: 1.5;
}

/* Prestamos */
.inv-loans-page { display: grid; gap: 14px; }
.inv-loans-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}
.inv-loans-head h1 { margin: 3px 0 0; font-size: 30px; line-height: 1.1; }
.inv-loans-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.inv-loans-counts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}
.inv-loans-counts strong { color: #0f172a; font-size: 15px; }
.inv-loans-panel { padding: 14px; }
.inv-loans-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(260px, 420px);
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.inv-loans-toolbar h2 { margin: 3px 0 0; font-size: 18px; }
.inv-loans-search { width: 100%; }
.inv-loans-list { display: grid; gap: 8px; }
.inv-loan-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) 70px auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.inv-loan-item,
.inv-loan-user { display: grid; gap: 3px; min-width: 0; }
.inv-loan-item strong,
.inv-loan-user strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-loan-item small,
.inv-loan-user small,
.inv-loan-returned-row small { color: #64748b; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-loan-qty {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 900;
}
.inv-loans-history {
  padding: 0;
  overflow: hidden;
}
.inv-loans-history summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
  color: #0f172a;
}
.inv-loans-history summary::-webkit-details-marker { display: none; }
.inv-loans-history summary strong {
  min-width: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
}
.inv-loans-returned-list {
  display: grid;
  gap: 6px;
  padding: 0 14px 14px;
}
.inv-loan-returned-row {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid #e2e8f0;
}
.inv-loan-returned-row strong { font-size: 13px; color: #0f172a; }
.inv-loan-return-summary {
  display: grid;
  gap: 3px;
  padding: 12px;
  border-radius: 12px;
  background: #f1f5f9;
  margin-bottom: 12px;
}
.inv-loan-return-summary strong { color: #0f172a; font-size: 15px; }
.inv-loan-return-summary small { color: #64748b; font-size: 12px; }

@media (max-width: 960px) {
  .inv-despacho-layout { grid-template-columns: 1fr; }
  .inv-despacho-fields { grid-template-columns: 1fr; }
  .inv-despacho-row { grid-template-columns: 1fr auto auto; }
  .inv-dispatch-top { grid-template-columns: 1fr; }
  .inv-dispatch-adder { grid-template-columns: 1fr 86px minmax(176px, auto); }
  .inv-dispatch-delivered,
  .inv-dispatch-adder .inv-secondary-btn { width: 100%; }
  .inv-dispatch-item { grid-template-columns: minmax(180px, 1fr) 60px auto 34px; }
  .inv-dispatch-item .inv-estado-badge:nth-of-type(2) { grid-column: 3 / 4; }
  .inv-dispatch-check { grid-template-columns: 1fr; }
  .inv-dispatch-check .inv-checklist-estados { justify-content: flex-start; }
  .inv-loans-toolbar { grid-template-columns: 1fr; }
  .inv-loan-row { grid-template-columns: 1fr auto; }
  .inv-loan-user { grid-column: 1 / -1; }
  .inv-loan-qty { justify-self: start; }
}
@media (max-width: 640px) {
  .inv-despacho-row { grid-template-columns: 1fr; }
  .inv-despacho-qty { width: 100%; }
  .inv-dispatch-head { align-items: start; flex-direction: column; }
  .inv-dispatch-adder,
  .inv-dispatch-item { grid-template-columns: 1fr; }
  .inv-dispatch-actions .inv-request-submit { width: 100%; }
  .inv-loans-head { align-items: start; flex-direction: column; }
  .inv-loans-counts { justify-content: flex-start; }
  .inv-loan-row { grid-template-columns: 1fr; }
  .inv-loan-row .inv-request-submit { width: 100%; }
}



/* =============================================================================
   18. BANDEJA DE INGRESOS (procura -> inventario del hijo)
   ============================================================================= */

/* — Pestañas por área — */
.bandeja-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 16px;
}
.bandeja-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .16s, color .16s, background .16s;
}
.bandeja-tab span {
  min-width: 20px;
  padding: 0 6px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: .72rem;
  font-weight: 800;
}
.bandeja-tab:hover { border-color: #c7d2fe; color: #1e293b; text-decoration: none; }
.bandeja-tab.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }
.bandeja-tab.is-active span { background: rgba(255, 255, 255, .25); color: #fff; }

/* — Estado vacío — */
.bandeja-empty {
  padding: 28px;
  border: 1px dashed var(--border, #cbd5e1);
  border-radius: 16px;
  background: #f8fafc;
  text-align: center;
  color: #64748b;
}
.bandeja-empty strong { display: block; color: #0f172a; font-size: 1.05rem; margin-bottom: 6px; }
.bandeja-empty p { margin: 0 auto; max-width: 560px; font-size: .9rem; }

/* — Lista de líneas — */
.bandeja-list { display: grid; gap: 10px; }
.bandeja-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  background: #fff;
}
.bandeja-item-main { min-width: 0; display: grid; gap: 4px; }
.bandeja-item-name { font-weight: 800; color: #0f172a; }
.bandeja-sku { color: #94a3b8; font-size: .76rem; }

.bandeja-area-chip {
  width: fit-content;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #eef2ff;
  color: #4338ca;
}
.bandeja-area-chip--herramientas { background: #ecfeff; color: #0e7490; }
.bandeja-area-chip--miscelaneos  { background: #f0fdf4; color: #15803d; }
.bandeja-area-chip--computadora  { background: #faf5ff; color: #7e22ce; }

.bandeja-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: #64748b;
  font-size: .8rem;
}

.bandeja-item-status {
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
  white-space: nowrap;
}
.bandeja-item-status small { color: #64748b; font-size: .76rem; }

/* — Valor heredado del padre (referencia de valor en el inventario) — */
.bandeja-valor {
  display: grid;
  justify-items: end;
  gap: 1px;
  padding: 3px 10px;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  background: #f0fdf4;
  color: #166534;
  font-size: .84rem;
  font-weight: 800;
}
.bandeja-valor small { color: #15803d; font-size: .7rem; font-weight: 600; }
.bandeja-valor--none {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
  font-weight: 700;
  font-size: .74rem;
}
.bandeja-valor-nota {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #86efac;
  border-radius: 8px;
  background: #f0fdf4;
  color: #166534;
  font-size: .8rem;
  line-height: 1.4;
}
.bandeja-pago {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
}
.bandeja-pago--pend { background: #fef2f2; color: #dc2626; }
.bandeja-pago--warn { background: #fffbeb; color: #b45309; }
.bandeja-pago--ok   { background: #f0fdf4; color: #15803d; }

/* — Acción de ingreso (abre modal) — */
.bandeja-item-action { display: grid; gap: 6px; justify-items: end; }
.bandeja-warn { display: block; max-width: 220px; color: #b45309; font-size: 11.5px; line-height: 1.35; }

/* — Agrupación por factura / orden de compra — */
.bandeja-groups { display: grid; gap: 16px; }
.bandeja-group {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}
.bandeja-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #f8fafc, #eff6ff);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.bandeja-group-id { min-width: 0; display: grid; gap: 3px; }
.bandeja-group-eyebrow {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #64748b;
}
.bandeja-group-id > strong {
  font-size: 1.02rem;
  font-weight: 900;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bandeja-group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  color: #64748b;
  font-size: .8rem;
}
.bandeja-group-status { display: grid; justify-items: end; gap: 3px; text-align: right; white-space: nowrap; }
.bandeja-group-status small { color: #64748b; font-size: .76rem; }
.bandeja-group-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .26);
  font-size: .72rem;
  font-weight: 800;
}
/* Las líneas van dentro de la tarjeta de la factura: sin doble borde ni doble radio. */
.bandeja-group .bandeja-list { gap: 0; }
.bandeja-group .bandeja-item {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #f1f5f9;
}
.bandeja-group .bandeja-item:last-child { border-bottom: 0; }

/* — Modal de ingreso (factura completa / producto individual) — */
.bandeja-bulk-form,
.bandeja-single-form { display: grid; gap: 14px; }
.bandeja-bulk-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: #f8fafc;
}
.bandeja-bulk-toggle,
.bandeja-bulk-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.bandeja-bulk-toggle span { font-size: .82rem; font-weight: 700; color: #334155; }
.bandeja-bulk-toggle input,
.bandeja-bulk-check input { width: 17px; height: 17px; flex: none; accent-color: #1d4ed8; }
.bandeja-bulk-apply { display: flex; align-items: center; gap: 8px; }
.bandeja-bulk-apply select {
  padding: 8px 10px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 10px;
  font-size: .84rem;
  max-width: 240px;
}

.bandeja-bulk-rows { display: grid; gap: 8px; }
.bandeja-bulk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 200px;
  align-items: end;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  transition: opacity .16s ease, background .16s ease;
}
.bandeja-bulk-row.is-off { opacity: .5; background: #f8fafc; }
.bandeja-bulk-row--blocked {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-style: dashed;
  border-color: #fed7aa;
  background: #fffbeb;
}
.bandeja-bulk-check { align-items: flex-start; }
.bandeja-bulk-prod { display: grid; gap: 2px; min-width: 0; }
.bandeja-bulk-prod strong { color: #0f172a; font-size: .9rem; font-weight: 800; }
.bandeja-bulk-prod small { color: #64748b; font-size: .76rem; }

.bandeja-bulk-field { display: grid; gap: 4px; font-size: .76rem; font-weight: 700; color: #475569; min-width: 0; }
.bandeja-bulk-field > span { letter-spacing: .01em; }
.bandeja-bulk-field input,
.bandeja-bulk-field select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 500;
}
.bandeja-bulk-field input:disabled,
.bandeja-bulk-field select:disabled { background: #f1f5f9; color: #94a3b8; }
.bandeja-bulk-note { border-top: 1px solid var(--border, #e2e8f0); padding-top: 14px; }

/* Los <button> de la bandeja llevan el TAG en el selector para ganarle a la
   global button:not(.hamburger) (0,1,1) de app.css: si no, les borra el borde
   (border: none) y les mete su propio padding. */
.bandeja-group-action button.inv-dash-action,
.bandeja-item-action button.inv-dash-action,
.bandeja-bulk-tools button.inv-secondary-btn,
.bandeja-bulk-form .inv-modal-actions button,
.bandeja-single-form .inv-modal-actions button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #dbeafe;
  border-radius: 11px;
  cursor: pointer;
}
.bandeja-group-action button.inv-dash-action--primary { border-color: #1d4ed8; }
.bandeja-bulk-form .inv-modal-actions button.inv-dash-action--success,
.bandeja-single-form .inv-modal-actions button.inv-dash-action--success { border-color: #047857; }
.bandeja-bulk-form .inv-modal-actions button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .bandeja-item { grid-template-columns: 1fr; align-items: start; }
  .bandeja-item-status { justify-items: start; text-align: left; }
  .bandeja-item-action { justify-items: start; }
  .bandeja-warn { max-width: none; }
  .bandeja-group-head { grid-template-columns: 1fr; }
  .bandeja-group-status { justify-items: start; text-align: left; }
  .bandeja-group-action .inv-dash-action { width: 100%; justify-content: center; }
  .bandeja-bulk-row { grid-template-columns: 1fr; align-items: stretch; }
  .bandeja-bulk-tools { flex-direction: column; align-items: stretch; }
  .bandeja-bulk-apply select { max-width: none; flex: 1; }
}

/* ── Reportes analíticos (Misceláneos / Facturación) ─────────────────────── */
.inv-report-export { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.inv-export-btn--csv { --xc: #0f766e; }

.inv-report-filters {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; margin: 18px 0 22px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}
.inv-report-filter { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.inv-report-filter label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.inv-report-filter input,
.inv-report-filter select {
  height: 42px; padding: 0 12px; border: 1px solid var(--border);
  border-radius: 9px; background: #fff; color: var(--text); font: inherit;
  min-width: 150px; max-width: 280px;
}
.inv-report-filter select { max-width: 240px; }
.inv-report-filter input:focus,
.inv-report-filter select:focus {
  outline: none; border-color: var(--ac, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac, var(--primary)) 18%, transparent);
}
.inv-report-filter-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.inv-report-filter-apply {
  height: 42px; padding: 0 20px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--ac, var(--primary)); color: #fff; font-weight: 700; font: inherit;
  font-weight: 700; transition: filter .15s ease, transform .04s ease;
}
.inv-report-filter-apply:hover { filter: brightness(1.07); }
.inv-report-filter-apply:active { transform: translateY(1px); }
.inv-report-filter-reset { color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 600; }
.inv-report-filter-reset:hover { color: var(--text); text-decoration: underline; }

.inv-chart-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin: 4px 0 22px;
}
.inv-chart-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 18px 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}
.inv-chart-card--wide { grid-column: 1 / -1; }
.inv-chart-head { margin-bottom: 12px; }
.inv-chart-head h2 { font-size: 1.05rem; margin: 2px 0 0; }
.inv-chart-box { position: relative; height: 300px; }
.inv-chart-card--wide .inv-chart-box { height: 320px; }

.inv-table--report { width: 100%; border-collapse: collapse; font-size: .9rem; }
.inv-table--report th, .inv-table--report td {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.inv-table--report th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #f8fafc; }
.inv-table--report td.num, .inv-table--report th.num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-table--report tbody tr:hover { background: #f8fafc; }
.inv-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }

.inv-tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; text-transform: capitalize;
}
.inv-tag--entrada { background: #dcfce7; color: #15803d; }
.inv-tag--salida { background: #fee2e2; color: #b91c1c; }
.inv-tag--ajuste { background: #fef3c7; color: #b45309; }

@media (max-width: 900px) {
  .inv-chart-grid { grid-template-columns: 1fr; }
  .inv-report-filter-actions { margin-left: 0; width: 100%; }
  .inv-report-filter, .inv-report-filter input, .inv-report-filter select { min-width: 0; width: 100%; max-width: none; }
}

/* ── Tablero de reportes (estilo dashboard) ──────────────────────────────── */
.rep-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.rep-head-text h1 { margin: 4px 0 6px; font-size: 1.6rem; }
.rep-head-text p { color: var(--muted); max-width: 64ch; margin: 0; }
.rep-head .inv-report-export { margin-top: 0; }

/* Toolbar de filtros — barra liviana, pegajosa y colapsable */
.rep-toolbar {
  position: sticky; top: calc(var(--nav-h) + 8px); z-index: 20;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 10px; margin: 6px 0 20px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
  transition: box-shadow .2s ease, border-color .2s ease, top .28s ease;
}
.rep-toolbar:focus-within { box-shadow: 0 8px 26px rgba(15, 23, 42, .10); border-color: color-mix(in srgb, var(--ac) 30%, var(--border)); }
/* Cuando el navbar se auto-oculta (escritorio), la barra de filtros sube con él
   para no dejar un hueco encima; vuelve a su sitio al reaparecer el navbar. */
@media (min-width: 901px) {
  body.nav-hidden .rep-toolbar { top: 8px; }
}
.rep-toolbar-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }

/* Botón que despliega los campos */
.rep-toolbar-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  border-radius: 9px; padding: 7px 12px; font: inherit; font-weight: 600; font-size: .86rem;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.rep-toolbar-toggle:hover { border-color: var(--ac); color: var(--ac); }
.rep-toolbar-toggle svg { width: 16px; height: 16px; }
.rep-toolbar-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  font-size: .7rem; font-weight: 800; font-style: normal; color: #fff; background: var(--ac); border-radius: 999px;
}
.rep-toolbar-chev { transition: transform .25s ease; opacity: .6; }
.rep-toolbar:not(.is-collapsed) .rep-toolbar-chev { transform: rotate(180deg); }

.rep-presets { display: flex; gap: 6px; }
.rep-preset {
  border: 1px solid var(--border); background: #f8fafc; color: var(--muted);
  border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}
.rep-preset:hover { border-color: var(--ac); color: var(--ac); background: color-mix(in srgb, var(--ac) 8%, #fff); }

/* Selector de trimestre (T1–T4 del año en curso) — pill igual a los atajos */
.rep-quarter {
  display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
  background: #f8fafc; transition: border-color .15s ease, background .15s ease;
}
.rep-quarter:hover, .rep-quarter:focus-within { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 8%, #fff); }
.rep-quarter.is-active { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 8%, #fff); }
.rep-quarter-select {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
}
.rep-quarter-select:focus { outline: none; }
.rep-quarter:hover .rep-quarter-select, .rep-quarter.is-active .rep-quarter-select { color: var(--ac); }

/* Chips de resumen: visibles solo cuando la barra está colapsada */
.rep-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.rep-toolbar:not(.is-collapsed) .rep-active { display: none; }
.rep-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 220px;
  padding: 4px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  color: var(--text); background: #eef2f7; border: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rep-chip svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .65; }
.rep-chip--range { color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, #fff); border-color: color-mix(in srgb, var(--ac) 28%, var(--border)); }
.rep-chip--range svg { opacity: 1; }

.rep-toolbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.rep-apply {
  height: 36px; padding: 0 20px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--ac); color: #fff; font: inherit; font-weight: 700;
  transition: filter .15s ease, transform .04s ease;
}
.rep-apply:hover { filter: brightness(1.08); }
.rep-apply:active { transform: translateY(1px); }
.rep-reset { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .88rem; }
.rep-reset:hover { color: var(--text); text-decoration: underline; }

/* Campos plegables (animación con grid-template-rows) */
.rep-toolbar-fields {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .26s ease, opacity .2s ease, margin-top .26s ease;
  margin-top: 12px;
}
.rep-fields-inner {
  overflow: hidden; min-height: 0;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  padding-top: 2px;
}
.rep-toolbar.is-collapsed .rep-toolbar-fields { grid-template-rows: 0fr; opacity: 0; margin-top: 0; pointer-events: none; }
.rep-field { display: flex; flex-direction: column; gap: 5px; }
.rep-field label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rep-field input, .rep-field select {
  height: 40px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px;
  background: #fff; color: var(--text); font: inherit; min-width: 140px; max-width: 220px;
}
.rep-field input:focus, .rep-field select:focus {
  outline: none; border-color: var(--ac);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 18%, transparent);
}

/* KPIs — icono circular sólido con glow (sin barras de acento) */
.rep-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.rep-kpi {
  --c: var(--ac);
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px; box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
  display: flex; flex-direction: column; gap: 5px; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.rep-kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, .10); border-color: color-mix(in srgb, var(--c) 35%, var(--border)); }
.rep-kpi--in { --c: #16a34a; } .rep-kpi--out { --c: #dc2626; } .rep-kpi--adj { --c: #d97706; }
.rep-kpi--biz { --c: #2563eb; } .rep-kpi--net { --c: #0f766e; }
/* Facturación */
.rep-kpi--buy { --c: #16a34a; } .rep-kpi--due { --c: #dc2626; } .rep-kpi--paid { --c: #0d9488; }
.rep-kpi--rhythm { --c: #2563eb; } .rep-kpi--fx { --c: #d97706; }
.rep-kpi.is-alert { border-color: color-mix(in srgb, #dc2626 45%, var(--border)); background: #fff7f7; }
.rep-kpi.is-alert .rep-kpi-value { color: #dc2626; }
.rep-card--good { border-color: #bbf7d0; background: #f0fdf4; }
.inv-empty-state--good { color: #15803d; font-style: normal; font-weight: 600; }
.inv-table--report td.num.is-bad { color: #dc2626; font-weight: 700; }
.rep-kpi-ico {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; margin-bottom: 4px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c));
  box-shadow: 0 7px 16px color-mix(in srgb, var(--c) 38%, transparent);
}
.rep-kpi-ico svg { width: 22px; height: 22px; }
.rep-kpi-label { min-width: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rep-kpi-value { min-width: 0; max-width: 100%; font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); font-weight: 800; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-kpi-value.is-neg { color: #dc2626; }
.rep-kpi-value.is-pos { color: #16a34a; }
.rep-kpi-foot { min-width: 0; font-size: .78rem; color: var(--muted); line-height: 1.3; }

/* Sub-indicadores dentro de un panel (compras / inventario inicial) */
.rep-substats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.rep-substat {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 18px; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}
.rep-substat span { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.rep-substat strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; color: var(--text); }

/* Barra de tableros: pestañas + métrica */
.rep-board-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.rep-tabs { display: inline-flex; gap: 4px; background: #eef2f7; border-radius: 11px; padding: 4px; }
.rep-tab {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 9px 16px; border-radius: 8px; font: inherit; font-weight: 600; font-size: .9rem;
  white-space: nowrap; transition: all .15s ease;
}
.rep-tab:hover { color: var(--text); }
.rep-tab.is-active { background: #fff; color: var(--ac); box-shadow: 0 2px 8px rgba(15, 23, 42, .1); }
.rep-metric { display: inline-flex; align-items: center; gap: 8px; }
.rep-metric-label { font-size: .76rem; font-weight: 600; color: var(--muted); }
.rep-metric-btn {
  border: 1px solid var(--border); background: #fff; color: var(--muted); cursor: pointer;
  padding: 7px 13px; font: inherit; font-weight: 600; font-size: .82rem;
}
.rep-metric-btn:first-of-type { border-radius: 8px 0 0 8px; }
.rep-metric-btn:last-of-type { border-radius: 0 8px 8px 0; border-left: 0; }
.rep-metric-btn.is-active { background: var(--ac); color: #fff; border-color: var(--ac); }
.rep-cgran, .rep-sgran { display: inline-flex; align-self: center; }

/* Sub-pestañas dentro de un panel (Consumo por empresa: totales ↔ detalle) */
.rep-subtabs { display: inline-flex; gap: 4px; background: #eef2f7; border-radius: 11px; padding: 4px; margin-bottom: 14px; }
.rep-subtab {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 8px 15px; border-radius: 8px; font: inherit; font-weight: 600; font-size: .86rem;
  transition: all .15s ease;
}
.rep-subtab:hover { color: var(--text); }
.rep-subtab.is-active { background: #fff; color: var(--ac); box-shadow: 0 2px 8px rgba(15, 23, 42, .1); }
.rep-subpanel[hidden] { display: none; }
/* Fila de total (footer) en tablas de reporte */
.inv-table--report tfoot td {
  font-weight: 700; border-top: 2px solid var(--border);
  background: color-mix(in srgb, var(--ac) 7%, #fff);
}

/* Paneles y tarjetas de gráfica */
.rep-panel[hidden] { display: none; }
.rep-context-note {
  background: color-mix(in srgb, var(--ac) 8%, #fff); border: 1px solid color-mix(in srgb, var(--ac) 25%, var(--border));
  color: var(--text); border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; font-size: .9rem;
}
.rep-context-note--warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.rep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.rep-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 15px;
  padding: 16px 18px 14px; box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
  /* En grid/flex el default es min-width:auto, así que un canvas de Chart.js (que
     recibe un ancho en px) puede empujar la tarjeta más allá de su columna y
     desbordar la página en móvil. min-width:0 deja que la tarjeta encoja. */
  min-width: 0;
}
.rep-card--wide { grid-column: 1 / -1; }
.rep-card--table { margin-bottom: 16px; }
.rep-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rep-card-head h2 { font-size: 1.02rem; margin: 0; }
.rep-card-head span { font-size: .78rem; color: var(--muted); font-weight: 600; }
.rep-canvas { position: relative; width: 100%; max-width: 100%; height: 300px; }
.rep-card--wide .rep-canvas { height: 320px; }
/* Tope duro: aunque Chart.js escriba un ancho en px mientras recalcula el layout
   responsivo, el canvas nunca supera el ancho de su contenedor (no desborda). */
.rep-canvas canvas { max-width: 100% !important; }
.rep-empty-row { text-align: center; color: var(--muted); padding: 22px; font-style: italic; }
.rep-canvas-empty { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; text-align: center; padding: 0 18px; color: var(--muted); font-style: italic; font-size: .9rem; }
.rep-muted { color: var(--muted); }

/* Badge de condicion del equipo en el catalogo de productos */
.inv-prod-cond { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em; }
.inv-prod-cond--optimo  { background: #dcfce7; color: #166534; }
.inv-prod-cond--bueno   { background: #e0f2fe; color: #075985; }
.inv-prod-cond--regular { background: #fef9c3; color: #854d0e; }
.inv-prod-cond--danado  { background: #fee2e2; color: #991b1b; }

/* ── Llaves · pestaña "Por llave": ficha e historial de cada llave ─────────
   Acordeón, no tabla: la cabecera responde de un vistazo "¿dónde está y quién
   la tuvo?" y al abrir salen los hechos de la llave + su historial. Es <details>
   nativo (funciona sin JS) y cada <details> es un [data-rep-row], así que el
   buscador de la tarjeta oculta la llave completa. La llave que está FUERA se
   marca con el filo ámbar del área (--ac) para que salte a la vista. */
.rep-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 17px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: #e2e8f0; color: #475569;
  font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rep-tab.is-active .rep-tab-count { background: rgba(255, 255, 255, .24); color: #fff; }

.rep-keys { display: flex; flex-direction: column; gap: 8px; }
.rep-key { border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; }
.rep-key[hidden] { display: none; }
.rep-key[open] { border-color: color-mix(in srgb, var(--ac, #d97706) 42%, var(--border)); box-shadow: 0 6px 18px -14px rgba(15, 23, 42, .5); }
.rep-key.is-out { border-left: 3px solid var(--ac, #d97706); }

.rep-key-head {
  display: grid; align-items: center; gap: 10px 14px; padding: 11px 14px; cursor: pointer;
  grid-template-columns: 74px minmax(0, 2.1fr) minmax(0, 2fr) 62px 62px auto 18px;
  list-style: none;
}
.rep-key-head::-webkit-details-marker { display: none; }
.rep-key-head:hover { background: #f8fafc; }
.rep-key-code {
  font-size: .74rem; font-weight: 800; letter-spacing: .02em; text-align: center;
  padding: 4px 6px; border-radius: 7px; background: #f1f5f9; color: #334155;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rep-key.is-out .rep-key-code { background: color-mix(in srgb, var(--ac, #d97706) 14%, #fff); color: color-mix(in srgb, var(--ac, #d97706) 72%, #0f172a); }
.rep-key-name, .rep-key-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rep-key-name strong { font-size: .92rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-key-name small, .rep-key-who small { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-key-who b { font-size: .84rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-key-who b.is-back { color: #15803d; }
.rep-key-who b.is-never { color: var(--muted); font-weight: 600; }
.rep-key-metric { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.rep-key-metric b { font-size: 1rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.05; }
.rep-key-metric small { font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; }
.rep-key-chev { width: 18px; height: 18px; color: var(--muted); transition: transform .2s ease; }
.rep-key[open] .rep-key-chev { transform: rotate(180deg); }

.rep-key-body { padding: 0 14px 14px; border-top: 1px dashed var(--border); }
.rep-key-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px; margin: 14px 0 16px;
}
.rep-key-facts > div { display: flex; flex-direction: column; gap: 2px; padding-left: 11px; border-left: 2px solid var(--border); min-width: 0; }
.rep-key-facts dt { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rep-key-facts dd { margin: 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rep-key-facts dd strong { font-size: .92rem; font-weight: 700; color: var(--text); }
.rep-key-facts dd span { font-size: .76rem; color: var(--muted); }
.rep-key-hist { font-size: .82rem; }
.rep-key-note { color: var(--muted); font-size: .76rem; }
.rep-key-nohist { margin: 10px 0 0; font-size: .78rem; color: var(--muted); font-style: italic; }
.inv-badge--mute { background: #e2e8f0; color: #475569; }

@media (max-width: 1080px) {
  /* Se cae el promedio (el dato "duro" es cuántas veces salió), no la identidad. */
  .rep-key-head { grid-template-columns: 68px minmax(0, 1.7fr) minmax(0, 1.7fr) 56px auto 18px; }
  .rep-key-metric--avg { display: none; }
  .rep-key-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  /* En móvil la cabecera pasa a flex: código+nombre+estado arriba y el "quién la
     tiene" en su propia línea completa (es la frase que se viene a leer). */
  .rep-key-head { display: flex; flex-wrap: wrap; row-gap: 6px; }
  .rep-key-code { flex: 0 0 auto; min-width: 62px; }
  .rep-key-name { flex: 1 1 120px; }
  .rep-key-head .inv-badge { order: 1; }
  .rep-key-chev { order: 2; }
  .rep-key-who { order: 3; flex: 1 1 100%; }
  .rep-key-metric { display: none; }
  .rep-key-facts { grid-template-columns: 1fr; }
}

/* Barra de herramientas de las tablas del reporte (búsqueda + chips de filtro) */
.rep-table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.rep-table-tools .inv-catalog-search { flex: 1 1 280px; }
.rep-table-chips { display: inline-flex; flex-wrap: wrap; align-self: center; }

/* ── Resumen ejecutivo (pestaña "Resumen") ────────────────────────────────
   Lectura editorial, no "cards de colores": cada sección numerada (01/02/03)
   cuenta una historia. El corazón es la barra de flujo — las compras del periodo
   partidas en lo CONSUMIDO y lo que quedó DISPONIBLE (consumido+disponible=compras).
   Las lecturas van como nota al margen (regla fina), no como caja tintada. */
.rep-sum { display: flex; flex-direction: column; gap: 14px; }
.rep-sum-slide {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 26px 24px; box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}
.rep-sum-head {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--border);
}
.rep-sum-num {
  flex: none; font-size: 1.05rem; font-weight: 800; letter-spacing: .04em;
  color: var(--ac, #16a34a); font-variant-numeric: tabular-nums;
}
.rep-sum-head h2 { margin: 0; font-size: 1.14rem; letter-spacing: -.01em; }
.rep-sum-head p { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }
.rep-sum-body { display: flex; flex-direction: column; gap: 22px; }

/* Titular: valor estimado del inventario hoy (estado actual del almacén) */
.rep-sum-hero { display: flex; align-items: center; gap: 16px; }
.rep-sum-hero-ico {
  flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  color: var(--ac, #16a34a); background: color-mix(in srgb, var(--ac, #16a34a) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--ac, #16a34a) 22%, var(--border));
}
.rep-sum-hero-ico svg { width: 26px; height: 26px; }
.rep-sum-hero-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rep-sum-hero-amount { font-size: clamp(2rem, 1.3rem + 2.4vw, 2.9rem); font-weight: 800; color: var(--text); line-height: 1.02; font-variant-numeric: tabular-nums; }
.rep-sum-rule { border: 0; border-top: 1px dashed var(--border); margin: 0; }

/* Barra de flujo: compras del periodo → consumido | disponible */
.rep-sum-flow { display: flex; flex-direction: column; gap: 14px; }
.rep-sum-flow-total { display: flex; flex-direction: column; gap: 2px; }
.rep-sum-flow-eyebrow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.rep-sum-flow-amount { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 800; color: var(--text); line-height: 1.02; font-variant-numeric: tabular-nums; }
.rep-sum-flow-units { font-size: .86rem; color: var(--muted); }
.rep-sum-flow-track {
  display: flex; height: 34px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--ac, #16a34a) 8%, var(--card));
}
.rep-sum-flow-seg { display: flex; align-items: center; justify-content: flex-end; padding: 0 11px; min-width: 0; transition: width .5s cubic-bezier(.22,.61,.36,1); }
.rep-sum-flow-seg--used { background: var(--ac, #16a34a); }
.rep-sum-flow-seg--left {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--ac, #16a34a) 13%, #fff) 0, color-mix(in srgb, var(--ac, #16a34a) 13%, #fff) 7px,
    color-mix(in srgb, var(--ac, #16a34a) 22%, #fff) 7px, color-mix(in srgb, var(--ac, #16a34a) 22%, #fff) 14px);
}
.rep-sum-flow-seg-pct { font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-sum-flow-seg--used .rep-sum-flow-seg-pct { color: #fff; }
.rep-sum-flow-seg--left .rep-sum-flow-seg-pct { color: color-mix(in srgb, var(--ac, #16a34a) 78%, #0f172a); }
.rep-sum-flow-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rep-sum-flow-leg { display: flex; flex-direction: column; gap: 2px; padding-left: 13px; border-left: 3px solid var(--ac, #16a34a); }
.rep-sum-flow-leg--left { border-left-color: color-mix(in srgb, var(--ac, #16a34a) 34%, var(--border)); }
.rep-sum-flow-leg-k { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rep-sum-flow-leg-v { font-size: 1.32rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.15; }
.rep-sum-flow-leg-v.is-bad { color: #dc2626; }
.rep-sum-flow-leg-u { font-size: .8rem; color: var(--muted); }

/* Lectura: nota al margen (pregunta en negrita → respuesta en prosa) */
.rep-sum-note {
  margin: 0; padding-left: 16px; font-size: .92rem; line-height: 1.55; color: var(--muted);
  border-left: 2px solid color-mix(in srgb, var(--ac, #16a34a) 55%, var(--border));
}
.rep-sum-note-q { display: block; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.rep-sum-note strong { color: var(--text); font-weight: 700; }

.rep-sum-canvas { height: 300px; }

/* Ranking de productos por consumo (barras inline) */
.rep-sum-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rep-sum-rank-item { display: grid; grid-template-columns: 26px minmax(0, 1.2fr) minmax(80px, 2fr) auto; align-items: center; gap: 12px; }
.rep-sum-rank-pos {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: .82rem; font-weight: 800; color: var(--ac, #16a34a);
  background: color-mix(in srgb, var(--ac, #16a34a) 12%, var(--card));
}
.rep-sum-rank-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-sum-rank-bar { height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--ac, #16a34a) 10%, var(--border)); overflow: hidden; }
.rep-sum-rank-bar span { display: block; height: 100%; border-radius: 999px; min-width: 3px; background: var(--ac, #16a34a); }
.rep-sum-rank-val { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 980px) {
  /* Red de seguridad: en móvil el contenido NUNCA debe desbordar horizontalmente
     la página. Las tablas (.inv-table-wrap) y las barras de pestañas (.config-tabs,
     .rep-tabs) tienen su propio overflow-x interno, así que recortar aquí solo mata
     el scroll lateral de toda la página, no el de esos contenedores. 'clip' evita
     crear un contenedor de scroll (a diferencia de hidden) y no toca el eje vertical.
     Sin efecto en escritorio (>980px), donde la toolbar sigue siendo sticky. */
  .content.inv-app-frame { overflow-x: clip; }

  .rep-kpis { grid-template-columns: repeat(2, 1fr); }
  .rep-grid { grid-template-columns: 1fr; }
  .rep-toolbar { position: static; }
  .rep-fields-inner { gap: 12px; }
  .rep-field, .rep-field input, .rep-field select { min-width: 0; width: 100%; max-width: none; }
  .rep-active { width: 100%; }
  .rep-toolbar-actions { margin-left: auto; }
  .rep-board-bar { flex-direction: column; align-items: stretch; }
  /* Pestañas: una tira horizontal deslizable (no apilada). Cada pestaña en una
     sola línea; el contenedor scrollea en X en vez de partir los textos. */
  .rep-tabs {
    display: flex; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .rep-tab { flex: 0 0 auto; }
  .rep-sum-flow-legend { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Reportes en pantallas chicas: una columna, tipografía y alturas más compactas. */
  .rep-head-text h1 { font-size: 1.3rem; }
  .rep-head-text p { font-size: .9rem; }
  .rep-kpis { grid-template-columns: 1fr; gap: 12px; }
  .rep-kpi { padding: 14px 16px; }
  .rep-substat { flex: 1 1 calc(50% - 6px); }
  .rep-card { padding: 14px 14px 12px; }
  .rep-card-head { flex-wrap: wrap; }
  .rep-canvas, .rep-card--wide .rep-canvas { height: 240px; }
  .rep-metric { width: 100%; justify-content: space-between; }
  .rep-table-tools .inv-catalog-search { flex: 1 1 100%; }
  .rep-sum-slide { padding: 16px 16px 18px; }
  .rep-sum-flow-amount { font-size: 1.8rem; }
  .rep-sum-rank-item { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .rep-sum-rank-bar { display: none; }
}

/* ── Mis llaves / Por devolver (tarjetas de llaves prestadas) ─────────────── */
.inv-key-held-list { display: flex; flex-direction: column; gap: 10px; }
.inv-key-held {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 3px 10px rgba(15, 23, 42, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.inv-key-held:hover { border-color: #fcd9a4; box-shadow: 0 8px 20px rgba(180, 83, 9, .10); }
.inv-key-held--review { background: #fffbeb; border-color: #fde68a; }
.inv-key-held-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inv-key-held-code {
  align-self: flex-start; background: #0f172a; color: #fff; border-radius: 6px;
  padding: 2px 9px; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.inv-key-held-name { font-weight: 700; color: var(--text); font-size: .98rem; }
.inv-key-held-since { font-size: .76rem; color: var(--muted); }

.inv-key-return-btn {
  flex: 0 0 auto; background: #d97706; color: #fff; border: 0; border-radius: 9px;
  padding: 9px 20px; font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(217, 119, 6, .28); transition: filter .15s ease, transform .05s ease;
}
.inv-key-return-btn:hover { filter: brightness(1.07); }
.inv-key-return-btn:active { transform: translateY(1px); }

.inv-key-return-allform { margin: 0; }
.inv-key-return-all-btn {
  background: #fff; color: #b45309; border: 1.5px solid #d97706; border-radius: 9px;
  padding: 8px 16px; font: inherit; font-weight: 700; cursor: pointer; transition: background .15s ease;
}
.inv-key-return-all-btn:hover { background: #fff7ed; }

.inv-key-review-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  background: #fef3c7; color: #b45309; border-radius: 999px;
  padding: 6px 13px; font-size: .76rem; font-weight: 700; white-space: nowrap;
}
.inv-key-review-dot { width: 8px; height: 8px; border-radius: 50%; background: #d97706; }

@media (max-width: 560px) {
  .inv-key-held { flex-direction: column; align-items: stretch; }
  .inv-key-return-btn, .inv-key-review-badge { align-self: flex-start; }
}

/* =============================================================================
   TRASPASOS ENTRE SUCURSALES
   Pantalla operativa: configurar envío (sede destino + solicitante) y elegir
   cantidades por producto. Resalta filas con cantidad y resume el envío.
   ============================================================================= */
.tras-route {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary-dark);
  font-size: .82rem; font-weight: 700;
}
.tras-route .tras-route-arrow { opacity: .6; }
.tras-route .tras-route-dest { color: var(--primary); }
.tras-route .tras-route-dest.is-empty { color: var(--muted); font-weight: 600; }

.tras-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px; margin-right: 9px;
  background: var(--primary); color: #fff; font-size: .8rem; font-weight: 800;
}

.tras-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Buscador + contador de la tabla de productos */
.tras-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 22px 16px;
}
.tras-count {
  margin-left: auto; font-size: .85rem; font-weight: 700; color: var(--muted);
  white-space: nowrap;
}
.tras-count strong { color: var(--primary); }

/* Lista de productos: alto máximo con scroll INTERNO (antes crecía sin fin y la
   página quedaba kilométrica). La cabecera ya es sticky, así que se queda fija
   dentro del contenedor mientras se recorre la lista. */
.tras-scroll {
  max-height: min(56vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--border);
}
.tras-scroll::-webkit-scrollbar { width: 10px; }
.tras-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid #fff; }
.tras-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Filtros de la lista (almacén / módulo / clasificación) */
.tras-filter {
  min-height: 38px;
  padding: 0 32px 0 11px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 11px center;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  max-width: 210px;
}
.tras-filter:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, .12); }
.tras-count-sep { margin: 0 6px; color: #cbd5e1; }
.tras-prod-wh { display: block; margin-top: 2px; font-size: .76rem; color: var(--muted); }
.tras-prod-clasif { display: block; margin-top: 3px; font-size: .74rem; color: var(--muted); }

/* Tabla de productos */
.tras-table { width: 100%; border-collapse: collapse; }
.tras-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #f8fafc; border-bottom: 1px solid var(--border);
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 11px 16px; font-weight: 700;
}
.tras-table tbody td { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tras-table tbody tr { transition: background-color .15s; }
.tras-table tbody tr:hover { background: #f8fbff; }
.tras-table tbody tr.is-selected { background: #eff6ff; }
.tras-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.tras-prod-name { font-weight: 700; color: var(--text); }
.tras-sku { font-family: ui-monospace, monospace; font-size: .82rem; color: var(--muted); }
.tras-avail { font-weight: 800; color: var(--text); }
.tras-avail-unit { font-size: .8rem; font-weight: 500; color: var(--muted); margin-left: 3px; }
.tras-avail.is-low { color: #b45309; }

/* Celda de cantidad: input + botón Máx */
.tras-qty { display: inline-flex; align-items: stretch; gap: 6px; }
.tras-qty input {
  width: 92px; padding: 9px 11px; text-align: right;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: .92rem; font-family: inherit; color: var(--text);
  background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
}
.tras-qty input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30,64,175,.12); }
.tras-qty input.has-val { border-color: var(--primary); background: #f5f9ff; font-weight: 700; }
.tras-max {
  border: 1.5px solid var(--border); background: #fff; border-radius: var(--radius-sm);
  padding: 0 11px; font-size: .76rem; font-weight: 700; color: var(--primary);
  cursor: pointer; transition: background-color .15s, border-color .15s;
}
.tras-max:hover { background: var(--primary-light); border-color: var(--primary-light); }

/* Barra de acción inferior con resumen */
.tras-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 16px 22px 0; padding: 16px 0 4px; border-top: 1px solid var(--border);
}
.tras-bar-summary { font-size: .9rem; color: var(--muted); }
.tras-bar-summary strong { color: var(--text); }
.tras-bar .btn { margin-left: auto; }

/* Insumo / fila vacía del buscador */
.tras-noresults td { text-align: center; color: var(--muted); padding: 26px; font-size: .9rem; }

/* Badges de dirección en el historial */
.tras-dir { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }

/* -----------------------------------------------------------------------------
   PRÉSTAMOS entre sedes: tipo de envío (permanente vs préstamo) y la deuda viva
   ("debemos devolver" / "nos deben"), con su modal de devolución parcial.
   -------------------------------------------------------------------------- */
.tras-tipo {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tras-tipo-opt {
  display: block; position: relative; cursor: pointer;
  padding: 13px 15px 13px 40px; border: 1.5px solid var(--border); border-radius: 11px;
  background: #fff; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.tras-tipo-opt:hover { border-color: #cbd5e1; background: #fcfdff; }
.tras-tipo-opt input {
  position: absolute; top: 15px; left: 14px; width: 15px; height: 15px;
  margin: 0; accent-color: var(--primary); cursor: pointer;
}
.tras-tipo-opt.is-active { border-color: var(--primary); background: #f5f9ff; box-shadow: 0 0 0 3px rgba(30, 64, 175, .1); }
.tras-tipo-title { display: block; font-weight: 800; font-size: .92rem; color: var(--text); }
.tras-tipo-desc { display: block; margin-top: 3px; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.tras-tipo-opt.is-active .tras-tipo-title { color: var(--primary-dark); }

/* Chips de deuda en la cabecera */
.tras-loan-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tras-chip {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  padding: 6px 13px; border-radius: 999px; font-size: .8rem; font-weight: 700;
}
.tras-chip strong { font-size: .88rem; }
.tras-chip--debe { background: #f3e8ff; color: #6d28d9; }
.tras-chip--acreedor { background: var(--primary-light); color: var(--primary); }
.tras-chip--vencido { background: var(--danger-bg); color: var(--danger); }
.tras-chip[href]:hover { filter: brightness(.96); }

.tras-loan-head-note { font-size: .8rem; margin-left: auto; }
.tras-loan-body { display: grid; gap: 26px; }
.tras-loan-title {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: .95rem; font-weight: 800;
}
.tras-loan-title.is-debe { color: #6d28d9; }
.tras-loan-title.is-acreedor { color: var(--primary); }
.tras-loan-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: #f1f5f9; color: var(--muted); font-size: .76rem; font-weight: 800;
}
.tras-loan-note { margin: 4px 0 14px; font-size: .82rem; color: var(--muted); }
.tras-loan-list {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.tras-loan-card {
  min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: #fff; display: flex; flex-direction: column; gap: 9px;
}
.tras-loan-card.is-vencido { border-color: #fecaca; background: #fffafa; }
.tras-loan-card-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tras-loan-code { font-family: ui-monospace, monospace; font-weight: 800; color: var(--text); }
.tras-loan-meta { font-size: .82rem; color: var(--text); display: flex; flex-wrap: wrap; gap: 5px; }
.tras-loan-items {
  list-style: none; margin: 0; padding: 9px 0 0; border-top: 1px dashed var(--border);
  display: grid; gap: 7px;
}
.tras-loan-items li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tras-loan-item-name { font-size: .86rem; font-weight: 600; color: var(--text); }
.tras-loan-item-qty { font-size: .8rem; color: var(--muted); text-align: right; white-space: nowrap; }
.tras-loan-item-qty strong { color: #6d28d9; font-size: .9rem; }
.tras-loan-item-qty small { display: block; font-size: .72rem; }
.tras-loan-obs { margin: 0; font-size: .8rem; color: var(--muted); font-style: italic; }
.tras-loan-actions { display: flex; justify-content: flex-end; }

/* Modal de devolución */
.tras-loan-modal-note { margin: 0 0 14px; font-size: .86rem; color: var(--muted); }
.tras-loan-modal-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.tras-loan-modal-scroll { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.tras-loan-modal-notes { display: block; margin: 14px 0 18px; }

/* -----------------------------------------------------------------------------
   DETALLE del traspaso: el código del historial es el disparador (se ve como un
   enlace monoespaciado, no como boton) y abre la ficha completa en un modal.
   Selectores con tag `button.` para ganarle a la global button:not(.hamburger).
   -------------------------------------------------------------------------- */
button.tras-code-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 0; min-height: 0; border: 0; background: none;
  font-family: ui-monospace, monospace; font-size: .86rem; font-weight: 800;
  color: var(--primary); cursor: pointer; text-align: left;
  border-bottom: 1.5px dashed rgba(30, 64, 175, .35);
  transition: color .15s, border-color .15s;
}
button.tras-code-link:hover { color: var(--primary-dark); border-bottom-color: var(--primary); }
button.tras-code-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; }

.tras-detail-dialog { max-width: 780px; }
.tras-detail-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.tras-detail-route {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 13px 16px; border: 1px solid var(--border); border-radius: 11px;
  background: #f8fafc; margin-bottom: 16px;
}
.tras-detail-node { font-weight: 800; font-size: .95rem; color: var(--text); }
.tras-detail-arrow { color: var(--primary); font-size: 1.15rem; font-weight: 800; }

.tras-detail-meta {
  display: grid; gap: 12px 20px; margin: 0 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.tras-detail-cell { min-width: 0; }
.tras-detail-meta dt {
  font-size: .7rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 3px;
}
.tras-detail-meta dd { margin: 0; font-size: .88rem; color: var(--text); word-break: break-word; }
.tras-detail-pend { color: #6d28d9; }

.tras-detail-obs {
  margin: 0 0 16px; padding: 11px 14px; border-radius: 10px;
  border-left: 3px solid var(--primary); background: var(--primary-light);
  font-size: .85rem; color: var(--text); line-height: 1.5;
}
.tras-detail-subtitle {
  display: flex; align-items: center; gap: 8px; margin: 0 0 9px;
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 800;
}
.tras-detail-scroll { max-height: 42vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.tras-detail-scroll .tras-table tbody td { padding: 10px 14px; }
.tras-detail-scroll .tras-table thead th { padding: 9px 14px; }
.tras-detail-wh { font-size: .82rem; color: var(--text); }
.tras-noresults-cell { text-align: center; color: var(--muted); padding: 24px; font-size: .88rem; }
.tras-detail-actions { margin-top: 14px; }

/* -----------------------------------------------------------------------------
   NOTA para firmar (PDF): aviso al terminar el envío + accesos en la ficha.
   -------------------------------------------------------------------------- */
.tras-nota-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 14px 18px;
  border: 1.5px solid #bfdbfe; border-left: 4px solid var(--primary);
  border-radius: 12px; background: linear-gradient(180deg, #f5f9ff, #fff);
  box-shadow: 0 3px 10px rgba(30, 64, 175, .07);
}
.tras-nota-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
  background: var(--primary-light); color: var(--primary);
}
.tras-nota-icon svg { width: 21px; height: 21px; }
.tras-nota-text { display: grid; gap: 2px; min-width: 200px; flex: 1 1 320px; }
.tras-nota-text strong { font-size: .95rem; color: var(--text); }
.tras-nota-text span { font-size: .83rem; color: var(--muted); line-height: 1.45; }
.tras-nota-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.tras-nota-actions svg, .tras-detail-doc svg { width: 15px; height: 15px; }

a.tras-nota-link { text-decoration: none; }
a.tras-nota-link svg { width: 14px; height: 14px; }

.tras-detail-doc {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 18px; padding: 12px 14px;
  border: 1px dashed #bfdbfe; border-radius: 11px; background: #f8fbff;
}
.tras-detail-doc-text { font-size: .84rem; font-weight: 700; color: var(--text); margin-right: auto; }
.tras-detail-doc a { text-decoration: none; }

@media (max-width: 640px) {
  .tras-toolbar, .tras-bar { padding-left: 16px; padding-right: 16px; }
  .tras-count { margin-left: 0; width: 100%; }
  .tras-qty input { width: 76px; }
  .tras-filter { max-width: none; flex: 1 1 46%; }
  .tras-scroll { max-height: 62vh; }
  .tras-loan-list { grid-template-columns: 1fr; }
  .tras-loan-head-note { margin-left: 0; }
  .tras-detail-meta { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 11px 14px; }
  .tras-detail-scroll { max-height: 50vh; }
}

/* =============================================================================
   LOCALIZADOR DE ARCHIMÓVILES (módulo Archivos): mapa físico de documentos.
   Columnas = letras, filas = números; el color de cada gaveta indica cuántos
   documentos guarda (heatmap). Clic en gaveta → lista; buscar código → resalta.
   ============================================================================= */
.arc-locator-hint { color: #64748b; font-size: .82rem; max-width: 40ch; text-align: right; }

.arc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.arc-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  border: 1.5px solid var(--border); background: #fff; color: var(--text);
  font-weight: 700; font-size: .82rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.arc-pill:hover { border-color: #2563eb; }
.arc-pill.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }
.arc-pill-count { font-size: .72rem; font-weight: 800; opacity: .7; }
.arc-pill.is-active .arc-pill-count { opacity: .92; }
.arc-pill--none { border-style: dashed; color: #b45309; }
.arc-pill--none.is-active { background: #b45309; border-color: #b45309; color: #fff; }

.arc-board { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.arc-grid-wrap { overflow-x: auto; padding-bottom: 4px; }
.arc-grid { display: grid; gap: 6px; min-width: max-content; }
.arc-colhead, .arc-rowhead, .arc-corner {
  display: grid; place-items: center;
  font-weight: 800; font-size: .74rem; color: #475569;
}
.arc-cell {
  min-width: 56px; aspect-ratio: 1 / 1;
  border: 1px solid var(--border); border-radius: 10px;
  background: #f8fafc; color: #0f172a; cursor: pointer; position: relative;
  display: grid; place-items: center; font-weight: 800; font-size: .92rem;
  transition: transform .12s ease, box-shadow .12s ease, outline-color .12s ease;
}
.arc-cell[data-count="0"] { color: #cbd5e1; background: #fff; cursor: default; }
.arc-cell:not([data-count="0"]):hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37, 99, 235, .18); }
.arc-cell.is-selected { outline: 3px solid #2563eb; outline-offset: 1px; }
.arc-cell.is-hit { outline: 3px solid #f59e0b; outline-offset: 1px; animation: arcPulse 1.1s ease 2; }
.arc-cell-coord { position: absolute; top: 3px; left: 5px; font-size: .55rem; font-weight: 700; color: #94a3b8; }
@keyframes arcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55); }
  50% { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
}

.arc-cell-panel {
  border: 1px solid var(--border); border-radius: 14px; background: #fff;
  padding: 14px; min-height: 130px; position: sticky; top: calc(var(--nav-h) + 70px);
}
.arc-cell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.arc-loc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eff6ff; color: #1d4ed8; font-weight: 800; font-size: .85rem;
  padding: 5px 11px; border-radius: 999px;
}
.arc-cell-count { font-size: .74rem; color: #64748b; font-weight: 700; white-space: nowrap; }
.arc-cell-list { display: grid; gap: 8px; max-height: 380px; overflow-y: auto; }
.arc-cell-hint { color: #64748b; font-size: .82rem; margin: 0; }
.arc-doc { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; }
.arc-doc-code { font-size: .68rem; font-weight: 800; color: #2563eb; letter-spacing: .02em; }
.arc-doc-ref { font-size: .84rem; font-weight: 600; color: #0f172a; line-height: 1.25; }
.arc-doc-meta { font-size: .72rem; color: #64748b; }

/* Chip de ubicación en cada fila del listado */
.arc-row-loc {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 700; color: #1d4ed8;
  background: #eff6ff; padding: 3px 9px; border-radius: 999px;
}
.arc-row-loc svg { width: 13px; height: 13px; }
.arc-row-loc--none { color: #94a3b8; background: #f1f5f9; font-weight: 600; }

/* Campos de ubicación en el formulario del documento */
.arc-loc-fields { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px 14px; margin: 0; }
.arc-loc-fields legend { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #475569; padding: 0 6px; }
.arc-loc-fields-hint { margin: 8px 0 0; font-size: .76rem; color: #64748b; }

@media (max-width: 860px) {
  .arc-board { grid-template-columns: 1fr; }
  .arc-cell-panel { position: static; }
  .arc-locator-hint { display: none; }
}

/* =============================================================================
   Computadora: Equipos / Tóner / Consumibles (eqx-*)
   Movido aquí (cargado en <head>) para evitar el FOUC: antes vivía en un <style>
   al final de cada vista, así que el HTML se pintaba sin estilo un instante.
   ========================================================================== */
.eqx-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.eqx-head h1 { margin:2px 0 0; }
.eqx-sub { margin:6px 0 0; color:#64748b; font-size:13px; max-width:620px; }
.eqx-sub a { color:#1d4ed8; text-decoration:none; font-weight:600; }
.eqx-sub strong { color:#0f172a; }
.eqx-actions { display:flex; gap:8px; flex-wrap:wrap; }
.eqx-alert { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; padding:12px 14px; border-radius:10px; font-size:13px; margin-bottom:14px; }
.eqx-summary { margin:0 0 18px; color:#475569; font-size:14px; border-left:3px solid #1e40af; padding:8px 14px; background:#f8fafc; border-radius:0 8px 8px 0; }
.eqx-summary strong { color:#0f172a; }
.eqx-forms { display:grid; gap:12px; margin-bottom:18px; }
.eqx-form { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px; }
.eqx-form[hidden] { display:none; }
.eqx-form > header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.eqx-form > header strong { color:#0f172a; }
.eqx-x { background:none; border:none; font-size:22px; line-height:1; color:#94a3b8; cursor:pointer; }
.eqx-x:hover { color:#ef4444; }
.eqx-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; align-items:start; }
.eqx-grid label { display:grid; gap:6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#64748b; min-width:0; }
.eqx-grid input, .eqx-grid select, .eqx-grid textarea { width:100%; padding:9px 11px; border:1px solid #cbd5e1; border-radius:9px; font-size:14px; color:#0f172a; background:#fff; font-family:inherit; }
.eqx-grid textarea { resize:vertical; min-height:64px; }
.eqx-grid input:focus, .eqx-grid select:focus, .eqx-grid textarea:focus { outline:none; border-color:#1e40af; box-shadow:0 0 0 3px rgba(30,64,175,.12); }
.eqx-grid .searchable-select { width:100%; }
.eqx-grid label:has(.searchable-select),
.eqx-grid label:has([data-searchable-select]) { grid-column:1 / -1; }
.eqx-c2 { grid-column:1 / -1; }
.eqx-opt { color:#94a3b8; font-weight:600; text-transform:none; }
.eqx-submit { grid-column:1 / -1; display:flex; justify-content:flex-end; align-items:flex-end; }
.eqx-submit .inv-primary-btn { width:auto; min-width:170px; }
.eqx-help { margin:10px 0 0; font-size:12px; color:#94a3b8; }
.eqx-panel { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px 18px; margin-bottom:16px; }
.eqx-panel-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.eqx-panel-head h2 { font-size:15px; color:#0f172a; margin:0; }
.eqx-count { font-size:12px; font-weight:800; color:#94a3b8; }
.eqx-filterbar { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:stretch; }
.eqx-search { display:flex; flex-direction:row; align-items:center; gap:8px; flex:1 1 0; min-width:220px; background:#fff; border:1px solid #cbd5e1; border-radius:9px; padding:0 11px; }
.eqx-search svg { flex:0 0 auto; width:16px; height:16px; }
.eqx-search input { flex:1 1 auto; min-width:0; border:none; outline:none; padding:9px 0; font-size:14px; background:transparent; color:#0f172a; }
.eqx-filterbar select { flex:1 1 0; min-width:220px; border:1px solid #cbd5e1; border-radius:9px; padding:9px 11px; font-size:14px; background:#fff; color:#0f172a; }
.eqx-filterbar select:focus, .eqx-search:focus-within { border-color:#1e40af; box-shadow:0 0 0 3px rgba(30,64,175,.12); }
.eqx-tablewrap { overflow-x:auto; }
.eqx-table { width:100%; border-collapse:collapse; font-size:14px; }
.eqx-table th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; font-weight:900; padding:8px 10px; border-bottom:2px solid #e2e8f0; white-space:nowrap; }
.eqx-table td { padding:10px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.eqx-table td strong { display:block; color:#0f172a; font-weight:700; }
.eqx-table td small { display:block; color:#94a3b8; font-size:11px; }
.eqx-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.eqx-strong { font-weight:800; color:#0f172a; }
.eqx-muted { color:#cbd5e1; }
.eqx-warn { color:#b45309; font-weight:700; }
.eqx-info { color:#1d4ed8; font-weight:700; }
.eqx-bad { color:#b91c1c; font-weight:700; }
.eqx-dead { color:#475569; font-weight:700; }
.eqx-zero td { color:#94a3b8; }
.eqx-zero td strong { color:#64748b; }
.eqx-cond { white-space:nowrap; }
.eqx-condform { margin:0; }
.eqx-cond-select { appearance:none; -webkit-appearance:none; border:1px solid #e2e8f0; border-radius:999px;
    padding:4px 26px 4px 12px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.02em;
    cursor:pointer; line-height:1.4; background-repeat:no-repeat; background-position:right 8px center; background-size:10px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23475569' d='M7 10l5 5 5-5z'/></svg>"); }
.eqx-cond-select:focus { outline:none; box-shadow:0 0 0 3px rgba(30,64,175,.15); }
.eqx-cond--none    { background-color:#f8fafc; color:#64748b; }
.eqx-cond--optimo  { background-color:#dcfce7; color:#166534; border-color:#86efac; }
.eqx-cond--bueno   { background-color:#e0f2fe; color:#075985; border-color:#7dd3fc; }
.eqx-cond--regular { background-color:#fef9c3; color:#854d0e; border-color:#fde047; }
.eqx-cond--danado  { background-color:#fee2e2; color:#991b1b; border-color:#fca5a5; }
.eqx-cond--desechado { background-color:#1f2937; color:#f9fafb; border-color:#111827; }
.eqx-loc { font-size:12px; }
.eqx-locpill { display:inline-block; background:#f1f5f9; border-radius:6px; padding:2px 7px; margin:1px 3px 1px 0; color:#475569; }
.eqx-locpill b { color:#0f172a; }
.eqx-table--models .eqx-model { cursor:pointer; }
.eqx-table--models .eqx-model:hover > td { background:#f8fafc; }
.eqx-modelname { display:flex; align-items:center; gap:10px; }
.eqx-modeltxt strong { display:block; color:#0f172a; font-weight:700; }
.eqx-modeltxt small { display:block; color:#94a3b8; font-size:11px; }
button.eqx-expand { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; flex:0 0 auto; border:1px solid #e2e8f0; border-radius:7px; background:#fff; color:#64748b; cursor:pointer; }
button.eqx-expand:hover { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.eqx-chev { transition:transform .15s ease; }
.eqx-model.is-open .eqx-chev { transform:rotate(90deg); }
.eqx-condsum { display:flex; flex-wrap:wrap; gap:5px; }
.eqx-cchip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.eqx-cchip b { font-weight:800; }
.eqx-unitrow > td { padding:0 !important; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.eqx-units { width:100%; border-collapse:collapse; font-size:13px; }
.eqx-units th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; font-weight:800; padding:8px 12px; }
.eqx-units td { padding:8px 12px; border-top:1px solid #eef2f7; vertical-align:middle; color:#475569; }
.eqx-units td strong { color:#0f172a; }
.eqx-units .eqx-rowact { justify-content:flex-start; }
.eqx-rowact { display:flex; gap:6px; align-items:center; white-space:nowrap; justify-content:flex-end; }
.eqx-rowact form { display:inline; }
button.eqx-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0;
    border:1px solid #e2e8f0; border-radius:8px; background:#fff; color:#1d4ed8; cursor:pointer;
    transition:background-color .12s, border-color .12s, color .12s; }
button.eqx-iconbtn svg { width:17px; height:17px; }
button.eqx-iconbtn:hover { background:#eff6ff; border-color:#bfdbfe; }
button.eqx-iconbtn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(30,64,175,.15); }
button.eqx-iconbtn:disabled { color:#cbd5e1; cursor:not-allowed; background:#fff; border-color:#eef2f7; }
.eqx-link { background:none; border:none; padding:0; color:#1d4ed8; font-weight:700; font-size:13px; cursor:pointer; }
.eqx-link:hover { text-decoration:underline; }
.eqx-link:disabled { color:#cbd5e1; cursor:not-allowed; }
.eqx-link--muted { color:#94a3b8; font-weight:600; }
.eqx-tag { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800; background:#eef2ff; color:#3730a3; }
.eqx-detail { color:#475569; font-size:13px; }
.eqx-pad { padding:8px 2px; }
.eqx-empty { padding:18px; border:1px dashed #cbd5e1; border-radius:10px; background:#f8fafc; }
.eqx-empty strong { color:#0f172a; font-size:15px; }
.eqx-empty p { margin:6px 0 0; color:#64748b; font-size:13px; }
.eqx-empty a { color:#1d4ed8; font-weight:600; text-decoration:none; }
.eqx-inline summary { cursor:pointer; color:#1d4ed8; font-weight:700; font-size:13px; list-style:none; }
.eqx-inline summary::-webkit-details-marker { display:none; }
.eqx-return { display:grid; gap:8px; margin-top:8px; padding:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; min-width:220px; text-align:left; }
.eqx-return label { display:grid; gap:4px; font-size:10px; font-weight:800; text-transform:uppercase; color:#64748b; }
.eqx-return input, .eqx-return select { padding:7px 9px; border:1px solid #cbd5e1; border-radius:8px; font-size:13px; }
@media (max-width:560px){ .eqx-grid { grid-template-columns:1fr; } }
@media (max-width:640px){ .eqx-c2 { grid-column:span 1; } }

/* ── Solicitar: producto SIN existencia (no solicitable) ──────────────────────
   El catalogo sigue mostrando el producto (para que el solicitante sepa que
   existe), pero apagado y sin boton de agregar. La regla vive tambien en el
   servidor: AreaRequestController::store() rechaza el POST. */
.inv-product-card.is-out-of-stock { opacity: .62; background: #f8fafc; }
.inv-product-card.is-out-of-stock:hover { transform: none; box-shadow: none; cursor: not-allowed; }
.inv-product-card.is-out-of-stock .inv-product-visual { filter: grayscale(1); }
.inv-request-workspace--touch .inv-product-card.is-out-of-stock button.inv-touch-add {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
    cursor: not-allowed;
}
.inv-product-card.is-denied { animation: inv-denied-shake .28s ease-in-out 2; }
@keyframes inv-denied-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Ajuste de stock aplicado sin recargar: destello breve en la fila afectada. */
.inv-stock-item.is-just-moved > .inv-stock-row { box-shadow: 0 0 0 2px rgba(37, 99, 235, .35); transition: box-shadow .3s ease; }

/* ── Equipos: eliminar (soft delete) y papelera ───────────────────────────── */
button.eqx-iconbtn--danger { color: #b91c1c; }
button.eqx-iconbtn--danger:hover { background: #fef2f2; border-color: #fecaca; }
.eqx-danger-note { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: 13px; }
.eqx-danger-note strong { color: #7c2d12; }
#formEliminarEquipo .eqx-submit button.inv-primary-btn { background: #b91c1c; border-color: #b91c1c; }
#formEliminarEquipo .eqx-submit button.inv-primary-btn:hover { background: #991b1b; border-color: #991b1b; }
.eqx-trash-target { font-weight: 800; color: #0f172a; }
.eqx-trash-target small { display: block; font-weight: 600; color: #64748b; }
.eqx-panel--trash { border-color: #fde68a; background: #fffdf5; }
.eqx-trash-motivo { color: #64748b; font-size: 12.5px; }

/* ── Equipos: entregar a un usuario o a una persona sin usuario ───────────────
   Exclusivo del módulo Computadoras: el equipo puede quedar en manos de alguien
   que no tiene usuario en el sistema (se guarda el nombre escrito). El selector
   de arriba decide cuál de los dos campos se ve; el otro se oculta y se limpia. */
.eqx-holder { display: grid; gap: 8px; }
.eqx-holder-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #64748b; }
.eqx-holder-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.eqx-holder-seg label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}
.eqx-holder-seg label span { font-size: 13px; font-weight: 700; color: #475569; }
.eqx-holder-seg input { width: auto; padding: 0; margin: 0; border: 0; accent-color: #1e40af; }
.eqx-holder-seg label:hover { border-color: #94a3b8; }
.eqx-holder-seg label:has(input:checked) { border-color: #1e40af; background: #eff4ff; box-shadow: 0 0 0 3px rgba(30, 64, 175, .1); }
.eqx-holder-seg label:has(input:checked) span { color: #1e3a8a; }
.eqx-holder-hint { font-size: 11.5px; font-weight: 600; color: #94a3b8; text-transform: none; letter-spacing: 0; }
.eqx-grid label[data-eq-holder-pane][hidden] { display: none; }
.eqx-who { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.eqx-who strong { display: inline; }
.eqx-tag--ext { background: #fef3c7; color: #92400e; }

/* ── Equipos: pestañas de los paneles (parque / asignados / eliminados / movs) ──
   Reutiliza el look de las pestañas de Productos (.inv-product-tabs) y añade el
   contador por pestaña. Los paneles viven dentro de #eqxPanels, que se reemplaza
   en cada refresco AJAX: el JS reaplica la pestaña activa tras el swap. */
.eqx-tabs { margin: 0 0 14px; }
.eqx-tabs button .eqx-tabcount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
}
.eqx-tabs button .eqx-tabcount--warn { background: #fde68a; color: #92400e; }
.eqx-tabs button.is-active .eqx-tabcount { background: rgba(255, 255, 255, .22); color: #fff; }
.eqx-panel[data-eq-tab-panel][hidden] { display: none !important; }