/* =============================================================================
   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; }


/* =============================================================================
   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; }
.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;
}
.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; }

/* 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: 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; }