/* Componentes reutilizables: botones, badges, tabla, formularios, empty state */

/* Sin movimiento: se conservan color/fondo, se anula el escalado al presionar */
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .filter-chip,
  .pagination-btn,
  .icon-btn,
  .nav-item {
    transition-property: background, color, border-color, box-shadow;
  }
  .btn-primary:active,
  .btn-secondary:active,
  .btn-outline:active,
  .filter-chip:active,
  .pagination-btn:active,
  .icon-btn:active,
  .nav-item:active { transform: none; }
}

/* Botones */
/* Primario — azul de acento plano (--color-primary), sin degradé ni velo
   glass. El mismo botón en todo el panel: Cargar producto, Nuevo producto,
   Exportar, Ingresar, guardar en modales. Pastilla + sombra sutil. */
.btn-primary {
  position: relative;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-control);
  padding: 10px 16px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  transition: background 0.15s, transform 0.1s var(--ease-out), box-shadow 0.15s;
  letter-spacing: 0.01em;
  font-family: var(--font-family);
  box-shadow: var(--glow-primary);
}

.btn-primary > * { position: relative; z-index: 1; }

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-strong);
  transform: translateY(-1px);
  box-shadow: var(--glow-primary);
}
.btn-primary:active:not(:disabled) { transform: scale(0.98) translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary .btn-icon {
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  margin-top: -1px;
}

/* "Liquid glass": translúcido + blur + highlight interior + borde de luz,
   en vez de blanco plano. Se nota más sobre superficies con color detrás
   (el fondo de página, la franja decorativa), pero el highlight/borde ya
   le da volumen aunque esté sobre blanco. */
.btn-secondary {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-control);
  padding: 10px 16px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
              0 1px 2px rgba(20, 36, 61, 0.05),
              0 6px 16px -10px rgba(20, 36, 61, 0.18);
  transition: background 0.15s, border-color 0.15s, transform 0.15s var(--ease-out), box-shadow 0.15s;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 2px 4px rgba(20, 36, 61, 0.06),
              0 16px 28px -10px rgba(20, 36, 61, 0.22);
}
.btn-secondary:active:not(:disabled) { transform: scale(0.98) translateY(0); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: background 0.15s, border-color 0.15s, transform 0.15s var(--ease-out), box-shadow 0.15s;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--color-primary-border);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 14px -8px rgba(20, 36, 61, 0.24);
}
.btn-outline:active:not(:disabled) { transform: scale(0.98) translateY(0); }

/* Acción destructiva (eliminar producto). Mismo tamaño/forma que btn-outline,
   con el rojo de --color-danger en vez del borde neutro. */
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-control);
  background: var(--color-danger-bg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-danger-strong);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s var(--ease-out);
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
  transform: translateY(-1px);
}
.btn-danger:active:not(:disabled) { transform: scale(0.98) translateY(0); }
.btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

/* .btn-* también se usan en <a>; sin esto el navegador les mete el subrayado
   por defecto de los links. */
a.btn-outline,
a.btn-primary,
a.btn-secondary { text-decoration: none; }

/* Botón-ícono cuadrado chico — acciones de fila en tablas (Productos,
   Configuración, Historial). Vivía solo en productos.css; se sube acá
   porque más de una página lo necesita (evita duplicar la definición y
   centraliza el ajuste de tamaño táctil de mobile en un solo lugar). */
.icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-light);
  background: transparent;
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.1s var(--ease-out);
}

.icon-btn:hover {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 6px 14px -6px rgba(46, 127, 232, 0.4);
}

.icon-btn:active { transform: scale(0.92); }

/* Variante para la acción "Eliminar producto": mismo tamaño, hover en rojo
   en vez del azul de acento. */
.icon-btn--danger:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger-strong);
  box-shadow: 0 6px 14px -6px rgba(224, 72, 60, 0.4);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.icon-btn svg { width: 16px; height: 16px; }

/* Acciones de fila — atenuadas en reposo, nítidas al pasar por la fila (o
   al enfocar con teclado). El tooltip cubre la comprensión de cada ícono.
   En mobile no hay :hover, así que quedan siempre visibles (ver breakpoint
   más abajo). */
.row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  opacity: 0.55;
  transition: opacity 0.12s;
}

tbody tr:hover .row-actions,
tbody tr:focus-within .row-actions {
  opacity: 1;
}

/* Badges de estado */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.015em;
  text-transform: capitalize;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* "Vigente" (vigencia de documento) se queda verde: es la señal de cumplimiento.
   "Activo/Inactivo" es ciclo de vida del producto — otra jerarquía, tono calmo:
   así el verde queda reservado para "qué documento está vigente". */
.badge--vigente {
  background: var(--color-success-bg);
  color: var(--color-success-strong);
  border-color: var(--color-success-border);
}

/* Antes era texto gris sobre fondo casi blanco — se perdía contra la página.
   Se mantiene neutro (el verde queda reservado para "vigente"), pero ahora
   con tinta oscura, borde visible y un punto más grande: se lee como sello. */
.badge--activo {
  background: var(--color-bg-surface);
  color: var(--color-text-heading);
  border-color: var(--color-border);
  box-shadow: 0 1px 2px rgba(20, 36, 61, 0.04);
}

.badge--activo::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  margin-right: 7px;
  flex-shrink: 0;
}

.badge--inactivo {
  background: var(--color-danger-bg);
  color: var(--color-danger-strong);
  border-color: var(--color-danger-border);
}

.badge--inactivo::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-danger);
  margin-right: 7px;
  flex-shrink: 0;
}

.badge--pendiente {
  background: var(--color-warning-bg);
  color: var(--color-warning-strong);
  border-color: var(--color-warning-border);
}

/* Cards genéricas — una sola estrategia de profundidad: sombra difusa, sin
   borde. */
.card {
  background: var(--color-bg-surface);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-float);
}

/* Tabla de datos — tarjeta de tres partes: toolbar / cuerpo / pie */
.data-table-wrapper {
  background: var(--color-bg-surface);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.search-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 10px 18px;
  font-size: var(--text-base);
  flex: 1;
  min-width: 220px;
  max-width: 360px;
  box-shadow: 0 1px 2px rgba(15, 45, 80, 0.04);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.search-input:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}

.search-input svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.search-input input {
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--text-base);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  width: 100%;
}

.search-input input::placeholder { color: var(--color-text-muted); }

.table-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

thead th {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-light);
  white-space: nowrap;
}

thead th.sortable {
  cursor: pointer;
  user-select: none;
}

thead th .sort-icon {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.5;
}

tbody tr {
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.12s;
}

tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 5%, transparent); }

tbody td {
  padding: var(--space-3) var(--space-5);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  vertical-align: middle;
}

td.mono, .mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.cell-secondary {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.row-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  accent-color: var(--color-primary);
}

/* Formularios */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.form-input {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg-input);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}

.form-input:focus-within {
  border-color: var(--color-primary);
  background: var(--color-bg-surface);
  outline: none;
  box-shadow: 0 0 0 4px var(--color-primary-bg);
}

.form-input input {
  border: none;
  background: transparent;
  font-size: var(--text-base);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  flex: 1;
  outline: none;
  min-width: 0;
}

.form-input input::placeholder { color: var(--color-text-muted); }

.form-input .input-icon {
  color: var(--color-text-secondary);
  flex-shrink: 0;
  display: flex;
}

.form-input .input-icon svg { width: 18px; height: 18px; }

.form-error {
  font-size: var(--text-sm);
  color: var(--color-danger);
  min-height: 1em;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.empty-state-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--color-bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.empty-state-icon svg {
  width: 44px;
  height: 44px;
  color: var(--color-text-muted);
}

.empty-state-title {
  font-family: var(--font-family-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
}

.empty-state-description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  max-width: 320px;
  margin-bottom: var(--space-5);
  line-height: var(--leading-normal);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}

.breadcrumb-separator { color: var(--color-text-muted); }

/* El encabezado de cada página lo da <header class="topbar"> (ver layout.css),
   el mismo componente en todas — antes había un .page-header aparte con otra
   tipografía y otro tamaño. */

/* ─────────────────────────────────────────────
   Rediseño "Brix": ya no hay tarjeta-superficie. El contenido de cada
   página flota directo sobre el lienzo lavanda; cada card trae su sombra.
   Se conservan los selectores .surface / .surface-deco para no tocar el
   markup de todas las páginas — acá quedan neutralizados.
   ───────────────────────────────────────────── */
/* El menú de usuario vive dentro de la topbar en todas las páginas: el
   contenido arranca con el mismo aire arriba que el resto (igual que el
   dashboard). */
.main-content--surface .main-content-scroll {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.surface {
  position: relative;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.surface > * {
  position: relative;
  z-index: 1;
}

/* ── Entrada de página — fade + leve subida, escalonada por bloque ──
   Se aplica a los hijos directos de .surface en TODAS las páginas (menos
   Dashboard, que ya tiene su propio stagger disparado por JS una vez que
   cargan los datos, para no reventar la animación detrás del loader). */
/* Fade + subida + un leve "desenfoque que enfoca" (blur -> nítido) y
   escala 0.97 -> 1: pesada y lenta a propósito (nada de golpes rápidos)
   para que se sienta premium, sin caer en rebote (un back.out queda mal
   en una pantalla de datos densa como esta). */
@keyframes surface-rise {
  from { opacity: 0; transform: translateY(26px) scale(0.97); filter: blur(9px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.surface > * {
  animation: surface-rise 1.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.surface > *:nth-child(1) { animation-delay: 0s; }
.surface > *:nth-child(2) { animation-delay: 0.16s; }
.surface > *:nth-child(3) { animation-delay: 0.32s; }
.surface > *:nth-child(4) { animation-delay: 0.48s; }
.surface > *:nth-child(5) { animation-delay: 0.64s; }
.surface > *:nth-child(n+6) { animation-delay: 0.8s; }

@media (prefers-reduced-motion: reduce) {
  .surface > * { animation: none; }
}

/* ── Pantalla de arranque — logo + barrita de carga ───────────────────
   La arma session-guard.js apenas confirma la sesión (antes de que
   termine de pintar el resto de la página) y se retira sola. El logo
   claro/oscuro alterna igual que en la sidebar, según el tema guardado. */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  /* Blanco fijo en modo claro (no el token, que es gris lavanda): el PNG
     del logo claro trae su propio fondo blanco sólido, y sobre el lienzo
     gris quedaba como un recuadro blanco flotando — se nota feo. En modo
     oscuro el logo es transparente, así que ahí sí usa el fondo real. */
  background: #ffffff;
  transition: opacity 0.45s var(--ease-out), visibility 0.45s;
}
:root[data-theme='dark'] .boot-splash { background: var(--color-bg-page); }

.boot-splash--done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-splash-logo {
  width: 176px;
  height: auto;
  animation: boot-logo-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes boot-logo-in {
  from { opacity: 0; transform: scale(0.94); filter: blur(4px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

.boot-splash-logo--dark { display: none; }
:root[data-theme='dark'] .boot-splash-logo--light { display: none; }
:root[data-theme='dark'] .boot-splash-logo--dark { display: block; }

.boot-splash-bar {
  width: 160px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-bg-input);
  overflow: hidden;
}

.boot-splash-bar-fill {
  width: 0%;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  animation: boot-bar-fill 1s cubic-bezier(0.65, 0, 0.35, 1) 0.15s both;
}

@keyframes boot-bar-fill {
  from { width: 0%; }
  to   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-splash, .boot-splash-logo, .boot-splash-bar-fill { animation: none; transition: none; }
}

.surface-deco { display: none; }

/* Modal — el fondo se desenfoca (material tipo vidrio) en vez de solo
   oscurecerse, y la tarjeta entra con un ligero scale-in, nunca desde 0. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 21, 38, 0.38);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  overflow-y: auto;
  z-index: 200;
  animation: modal-overlay-in 0.18s var(--ease-out);
}

.modal-overlay.modal-overlay--visible { display: flex; }

@keyframes modal-overlay-in {
  from { opacity: 0; }
}

.modal {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  width: 100%;
  max-width: 560px;
  margin: auto;
  animation: modal-in 0.22s var(--ease-out);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
}

/* Diálogo de confirmación (eliminar producto): más angosto que el modal de
   alta/edición, no necesita el ancho del formulario. */
.modal--small { max-width: 420px; }

/* Confirmación de borrado definitivo: aviso de documentos + campo de GTIN. */
.confirm-definitivo { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.confirm-definitivo[hidden] { display: none; }
.confirm-definitivo-warning { margin: 0; font-weight: var(--weight-medium); color: var(--color-danger-strong); }
.confirm-definitivo-warning[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal { animation: none; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.modal-title {
  font-family: var(--font-family-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
}

.modal-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.modal-close:hover { background: var(--color-bg-input); color: var(--color-text-primary); }
.modal-close svg { width: 18px; height: 18px; }

.modal-body {
  padding: var(--space-6);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border);
}

.modal-alert {
  display: none;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
}

.modal-alert.modal-alert--visible { display: block; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-section-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin: var(--space-6) 0 var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-light);
}

.doc-upload-row {
  background: var(--color-bg-input);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.doc-upload-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.doc-upload-row-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.doc-upload-row-current {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.doc-upload-fields {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2);
  align-items: center;
}

/* Selector de archivo estilizado: input file oculto dentro de un label */
.file-picker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  cursor: pointer;
}

.file-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-bg-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.file-picker-btn svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-secondary);
}

.file-picker:hover .file-picker-btn { background: var(--color-bg-input); }

.file-picker-name {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.file-picker-name--selected {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

/* Toggle switch de estado (activo/inactivo) */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  padding: 12px 0;
  user-select: none;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-switch-track { background: var(--color-success); }
.toggle-switch input:checked + .toggle-switch-track::after { transform: translateX(20px); }

.toggle-switch input:focus-visible + .toggle-switch-track {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.toggle-switch-label {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.modal-hint {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: var(--color-info-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.gs1-url-block {
  margin-bottom: var(--space-5);
}

.gs1-url-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.gs1-url-value {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

/* Toast simple */
.toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  background: var(--color-text-primary);
  color: white;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-dropdown);
  font-size: var(--text-base);
  z-index: 1000;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.toast.toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.toast--error { background: var(--color-danger); }
.toast.toast--success { background: var(--color-success); }

/* Contador de resultados — bajo la toolbar, tono bajo */
.table-count {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-light);
}

.table-count strong {
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

/* Pie de la tarjeta — paginación */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.table-footer:empty { display: none; }

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.1s var(--ease-out);
}

.pagination-btn:hover:not(:disabled):not(.pagination-btn--active) {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-color: var(--color-primary-bg);
}

.pagination-btn:active:not(:disabled):not(.pagination-btn--active) { transform: scale(0.94); }

.pagination-btn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  cursor: default;
}

.pagination-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pagination-btn svg {
  width: 15px;
  height: 15px;
}

.pagination-ellipsis {
  min-width: 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  user-select: none;
}

/* Tooltip propio para botones-ícono — posicionado por JS, sin recorte */
.ui-tooltip {
  position: fixed;
  z-index: 500;
  background: var(--color-text-primary);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 6px 9px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.08s ease, transform 0.08s ease;
  box-shadow: var(--shadow-card);
}

.ui-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
}

.ui-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-text-primary);
}

/* ─────────────────────────────────────────────
   Sistema de filtros — vive arriba de la tarjeta
   ───────────────────────────────────────────── */
.filters-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.filters-row--main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* En la fila principal la búsqueda manda: ocupa todo el ancho disponible */
.filters-row--main .search-input {
  flex: 1;
  max-width: none;
}

/* Esta barra vive suelta sobre el fondo de la Capa 3 (no dentro de una
   card), así que un blanco opaco se ve como un recorte duro sobre la
   imagen. Vidrio translúcido + blur, mismo criterio que .btn-secondary. */
.filters-section .search-input {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.search-clear {
  display: flex;
  align-items: center;
  padding: 2px;
  border: none;
  background: none;
  border-radius: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s;
}

.search-clear:hover { color: var(--color-text-primary); }

.filters-row--chips {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Chip disparador del dropdown — pill: se lee como control conmutable,
   distinto de los contenedores (radio container) y del buscador (radio control) */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 2px rgba(15, 45, 80, 0.04);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s var(--ease-out);
}

.filter-chip:hover {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-chip:active { transform: scale(0.97); }

.filter-chip > svg:first-child { color: var(--color-text-muted); transition: color 0.15s; }
.filter-chip:hover > svg:first-child { color: var(--color-primary); }

.filter-chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.chip-chevron { color: var(--color-text-muted); transition: transform 0.2s; }

.filter-chip--active {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.filter-chip--active > svg:first-child,
.filter-chip--active .chip-chevron { color: var(--color-primary); }

.filter-dropdown.open .chip-chevron { transform: rotate(180deg); }

.chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* Menú */
.filter-dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 224px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-raised);
  z-index: 120;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.filter-dropdown.open .dropdown-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dropdown-menu--multi { min-width: 248px; max-height: 320px; overflow-y: auto; }

/* Encabezado del menú — caja normal, sin mayúsculas tracked (no es un eyebrow) */
.dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-light);
}

.dropdown-clear-btn {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  cursor: pointer;
}

.dropdown-clear-btn:hover { text-decoration: underline; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 9px var(--space-4);
  border: none;
  background: none;
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.dropdown-item:hover { background: var(--color-primary-bg); color: var(--color-primary); }
.dropdown-item.active { color: var(--color-primary); font-weight: var(--weight-semibold); }

.dropdown-item--muted { color: var(--color-warning-strong); }
.dropdown-item--muted:hover { background: var(--color-warning-bg); color: var(--color-warning-strong); }

/* Punto de estado */
.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-indicator--active   { background: var(--color-success); }
.status-indicator--inactive { background: var(--color-danger); }

/* Checkbox custom del menú múltiple */
.dropdown-item--check { cursor: pointer; user-select: none; }
.dropdown-item--check input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }

.check-box {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.dropdown-item--check input:checked ~ .check-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.dropdown-item--check input:checked ~ .check-box::after {
  content: '';
  width: 4px;
  height: 7px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

.dropdown-item--check input:focus-visible ~ .check-box {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Botón "Limpiar filtros" */
.filter-clear-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-full);
  background: none;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-danger-strong);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.filter-clear-all:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-strong);
}

/* Chips de filtros activos */
.active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.active-chips:empty { display: none; }

.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 11px;
  background: var(--color-primary-bg);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
}

.active-chip button {
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  font-size: 15px;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s;
}

.active-chip button:hover { opacity: 1; }

/* ── Adaptación por ALTURA (notebooks bajas) ─────────────────────
   Buscador y chips de filtro compartidos entre Dashboard y Productos:
   compactos en altura reducida, mismo criterio que el resto de los
   bloques de altura en tokens.css/layout.css/productos.css. */
@media (max-height: 800px) {
  .search-input { padding: 7px 16px; }
  .filter-chip { height: 34px; padding: 0 14px; }
  .filters-section { gap: var(--space-2); margin-bottom: var(--space-3); }
}

/* ═══════════════════════════════════════════════════════
   Mobile (≤860px) — mismo breakpoint que layout.css/productos.css.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* Objetivo táctil mínimo (44×44px): en mobile no hay :hover para
     "revelar" las acciones de fila, así que quedan siempre visibles. */
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .row-actions { opacity: 1; }

  .filter-chip { min-height: 44px; }

  /* Bug real encontrado tras el pase anterior: .table-actions (envuelve el
     <select> de filtro + el botón de refrescar, ej. "Todas las acciones"
     + "Actualizar" en Auditoría) pasa a su propia fila dentro de
     .table-toolbar (que sí tiene flex-wrap), pero SUS DOS hijos no tenían
     forma de bajar de línea entre sí — si juntos no entraban en el ancho
     disponible, el botón se salía del contenedor sin que scrollWidth lo
     reflejara (el overflow quedaba recortado por .main-content-scroll,
     invisible en ese chequeo, pero visible a ojo). Con flex-wrap acá y el
     <select> pudiendo encogerse, entran en una fila o bajan a dos sin
     desbordar. */
  .table-actions { flex-wrap: wrap; row-gap: var(--space-2); }
  .filter-select { flex: 1 1 auto; min-width: 0; }

  /* Modal: menos aire alrededor, ocupa el ancho disponible, los botones
     del pie pasan a columna a ancho completo (más fácil con el pulgar,
     la acción principal queda arriba). */
  .modal-overlay { padding: var(--space-4) var(--space-3); }
  .modal { max-width: 100%; }
  .modal-header,
  .modal-body,
  .modal-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .form-row,
  .doc-upload-fields { grid-template-columns: 1fr; }
  .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary { justify-content: center; width: 100%; }

  /* Dropdowns (filtros, notificaciones, menú de usuario): anclados al
     trigger con posición estática, sin deteccion de borde — un chip cerca
     del borde derecho en 320-375px desbordaba la pantalla. En mobile pasan
     a fixed con margen fijo a los dos lados (el "top" exacto lo calcula
     el JS de apertura, ver topbar.js/productos.js) en vez de depender del
     ancho fijo de 224-248px anclado a la izquierda del trigger. */
  .dropdown-menu,
  .dash-menu {
    position: fixed;
    left: var(--space-4);
    right: var(--space-4);
    min-width: 0;
    max-width: none;
    /* Por encima de la bottom navbar (z-index 195, ver layout.css): si el
       chip que lo abre está cerca del borde inferior, el menú no debe
       quedar tapado por la barra. */
    z-index: 220;
  }

  /* Tabla → cards. Compartido por Productos, Auditoría y Configuración
     (las tres envuelven su <table> en .table-scroll): con muchas columnas
     no entran en una pantalla chica, y un scroll horizontal no es cómodo
     con el dedo. Cada <tr> pasa a ser una card; cada <td> a una fila
     "etiqueta: valor" vía content:attr(data-label) — el <thead> visual se
     oculta (la tabla real para lectores de pantalla sigue intacta). Las
     páginas agregan data-label="..." a cada <td> en su render de JS. */
  .table-scroll thead { display: none; }
  .table-scroll table,
  .table-scroll tbody,
  .table-scroll tr { display: block; width: 100%; }
  .table-scroll tbody tr {
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
  }
  .table-scroll tbody tr:last-child { margin-bottom: 0; }
  .table-scroll tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border-light);
    text-align: right;
  }
  /* productos.css trae "table td:last-child { width:1%; white-space:nowrap }"
     para la columna de acciones en desktop — en mobile, con la celda ya
     convertida a flex, eso la dejaba angosta. Se neutraliza acá (gana por
     especificidad: clase + 2 elementos vs. 2 elementos). */
  .table-scroll tbody td:last-child { border-bottom: none; width: auto; white-space: normal; }
  .table-scroll tbody td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    text-align: left;
  }

  /* Celda "identidad" de la fila (nombre del producto, con principio
     activo/presentación abajo): sin etiqueta, ocupa el ancho completo
     arriba de la card en vez de partirse en label/valor — ya es
     autoexplicativa y es lo primero que hay que leer. */
  .table-scroll tbody td.cell-card-header {
    display: block;
    text-align: left;
    padding-top: 0;
  }
  .table-scroll tbody td.cell-card-header::before { content: none; }

  /* Celda de acciones: fila de botones a ancho completo, sin etiqueta. */
  .table-scroll tbody td.cell-card-actions {
    padding-top: var(--space-2);
  }
  .table-scroll tbody td.cell-card-actions::before { content: none; }
  .table-scroll tbody .row-actions { justify-content: flex-start; width: 100%; }
}