/* ==========================================================================
   Rediseño Minimalista del Cuadro de Registro (#main-menu / #scanResults)
   - No se altera HTML ni JS.
   - Solo overrides finales y encapsulados.
   - Enfatiza columnas clave y mejora legibilidad.
   ========================================================================== */

/* Variables locales (scoped) */
#main-menu {
  --registro-bg: #FFFFFF;
  --registro-border: #E2E8F0;
  --registro-border-strong: #D5DEE8;
  --registro-accent: #132A48;
  --registro-accent-soft: #F1F4FA;
  --registro-row-hover: #F6F8FC;
  --registro-row-zebra: #FAFBFD;
  --registro-key-text: #1E346A;
  --registro-secondary-text: #5B6475;
  --registro-chip-ok-bg: #E4F7EE;
  --registro-chip-ok-text: #0B5E3A;
  --registro-chip-in-bg: #FFF4D8;
  --registro-chip-in-text: #8A5A00;
  --registro-chip-neutral-bg: #F0F3F7;
  --registro-chip-neutral-text: #6A7484;
  --registro-focus: #2E4C9A;
  --registro-radius: 22px;
  --registro-radius-sm: 8px;
  --registro-font-size: 14px;
  --registro-font-size-small: 12px;
  --registro-transition: 120ms ease;

  /* Encabezado de día (versión azul pastel) */
  --registro-day-header-bg: #DBEAFE;          /* base solicitada */
  --registro-day-header-bg-hover: #D2E4FB;    /* hover suave */
  --registro-day-header-bg-active: #C8DCF7;   /* activo ligeramente más contrastado */
  --registro-day-header-text: #1E346A;        /* texto oscuro para contraste AA */
  --registro-lote-header-bg: #EEF2F7;
  /* Controles unificados */
  --registro-control-height: 36px;
  --registro-control-radius: 20px;
  --registro-control-font-size: 13px;
  --registro-control-padding-x: 16px;
  --registro-control-bg: #F5F7FA;
  --registro-control-bg-hover: #EDF1F5;
  --registro-control-border: var(--registro-border);
  --registro-control-border-focus: var(--registro-accent);
  /* Alineación con paleta global brand */
  --registro-primary-bg: var(--brand-600);
  --registro-primary-bg-hover: var(--brand-700);
  --registro-danger-bg: #DC3545;
  --registro-danger-bg-hover: #C62838;
}

/* Sistema unificado de controles (botones + inputs) */
#main-menu .btn:not(.btn-egreso):not(.btn-icon):not(.btn-primary.btn-sm):not(.btn-success.btn-sm) {
  height: var(--registro-control-height) !important;
  line-height: 1 !important;
  padding: 0 var(--registro-control-padding-x) !important;
  font-size: var(--registro-control-font-size) !important;
  border-radius: var(--registro-control-radius) !important;
  border: 1px solid var(--registro-control-border) !important;
  background: var(--registro-control-bg) !important;
  color: #39495F !important;
  font-weight: 500;
  box-shadow: none !important;
  transition: background-color var(--registro-transition), color var(--registro-transition), border-color var(--registro-transition);
}
#main-menu .btn:not(.btn-egreso):not(.btn-icon):hover:not(:disabled):not(.btn-primary):not(.btn-danger) {
  background: var(--registro-control-bg-hover) !important;
}
#main-menu .btn-primary:not(.btn-icon) {
  background: var(--registro-primary-bg) !important;
  border-color: var(--registro-primary-bg) !important;
  color: #FFFFFF !important;
  border-radius: var(--registro-control-radius) !important;
  height: var(--registro-control-height) !important;
  padding: 0 var(--registro-control-padding-x) !important;
  font-size: var(--registro-control-font-size) !important;
  font-weight: 600;
}
#main-menu .btn-primary:not(.btn-icon):hover:not(:disabled) {
  background: var(--registro-primary-bg-hover) !important;
}

/* Override específico ajustado: Escanear DNI con escala exacta (#2563EB base, #1D4ED8 hover, #1E40AF active) */
#main-menu #startScanButton.btn-primary{
  background:#2563EB !important;
  border-color:#2563EB !important;
  color:#FFF !important;
  box-shadow:0 2px 4px rgba(37,99,235,0.35) !important;
}
#main-menu #startScanButton.btn-primary:hover{
  background:#1D4ED8 !important;
  border-color:#1D4ED8 !important;
}
#main-menu #startScanButton.btn-primary:active{
  background:#1E40AF !important;
  border-color:#1E40AF !important;
  box-shadow:0 2px 4px rgba(30,64,175,0.45) inset !important;
}
#main-menu #startScanButton.btn-primary:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(37,99,235,0.35) !important;
}
#main-menu .btn-danger {
  background: var(--registro-danger-bg) !important;
  border-color: var(--registro-danger-bg) !important;
  color: #FFFFFF !important;
  border-radius: var(--registro-control-radius) !important;
  height: var(--registro-control-height) !important;
  padding: 0 var(--registro-control-padding-x) !important;
  font-size: var(--registro-control-font-size) !important;
  font-weight: 600;
}
#main-menu .btn-danger:hover:not(:disabled) {
  background: var(--registro-danger-bg-hover) !important;
}
#main-menu input.form-control,
#main-menu select,
#main-menu textarea {
  height: var(--registro-control-height) !important;
  padding: 0 14px !important;
  font-size: var(--registro-control-font-size) !important;
  border-radius: var(--registro-control-radius) !important;
  background: var(--registro-control-bg) !important;
  border: 1px solid var(--registro-control-border) !important;
  box-shadow: none !important;
  line-height: 1.1 !important;
  transition: background-color var(--registro-transition), border-color var(--registro-transition);
}
#main-menu input.form-control:focus,
#main-menu select:focus,
#main-menu textarea:focus {
  border-color: var(--registro-control-border-focus) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 2px rgba(19,42,72,0.15) !important;
  outline: none !important;
}

/* Contenedor principal (card que envuelve la tabla de registros) */
#main-menu #scanResults {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--registro-bg);
}

/* Anti overflow horizontal móvil para detalles/acciones dentro de filas */
@media (max-width: 640px) {
  #main-menu .table-wrapper { overflow-x: hidden !important; }
  #main-menu #scanResults { table-layout: fixed; width:100%; }
  #main-menu #scanResults tbody tr td { word-wrap: break-word; word-break: break-word; max-width: 140px; }
  #main-menu #scanResults tbody tr td:last-child { max-width: 160px; }
  #main-menu #scanResults .d-flex.gap-2, 
  #main-menu #scanResults .d-flex.gap-1, 
  #main-menu #scanResults .d-flex.justify-content-center { flex-wrap: wrap; }
  #main-menu #scanResults td .btn-icon, 
  #main-menu #scanResults td .btn, 
  #main-menu #scanResults td .chip { max-width: 100%; overflow:hidden; text-overflow: ellipsis; }
  #main-menu #scanResults td input.form-control { max-width: 120px; }
  /* Contenedores de detalles expandibles (si existen) */
  #main-menu #scanResults .row-details, 
  #main-menu #scanResults .record-extra, 
  #main-menu #scanResults .mobile-row-details { overflow:hidden; }
}

/* Asegurar fondo neutro en el bloque tabla y eliminar glass/gradientes heredados */
#main-menu .table-wrapper,
#main-menu .table {
  background: var(--registro-bg) !important;
  box-shadow: none !important;
  border: 1px solid var(--registro-border) !important;
}

#main-menu .table-wrapper {
  border-radius: var(--registro-radius);
  overflow: hidden;
}

/* Encabezados (thead) */
#main-menu #scanResults thead th {
  background: #F5F7FA !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  color: #768299 !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--registro-border) !important;
  position: sticky;
  top: 0;
  backdrop-filter: blur(4px);
  z-index: 5;
}

/* Columnas clave (DNI, Apellido, Nombres, Ingreso, Estado) */
#main-menu #scanResults thead th:nth-child(1),
#main-menu #scanResults thead th:nth-child(2),
#main-menu #scanResults thead th:nth-child(3),
#main-menu #scanResults thead th:nth-child(6),
#main-menu #scanResults thead th:nth-child(8) {
  color: var(--registro-key-text) !important;
}

/* Filas jerárquicas Día / Lote */
#main-menu #scanResults .table-day-header td {
  background: var(--registro-day-header-bg) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--registro-day-header-text) !important;
  letter-spacing: .4px;
  padding: 14px 18px !important;
  border: 0 !important;
  text-transform: uppercase;
  transition: background-color var(--registro-transition), color var(--registro-transition);
}

/* Estados interacción encabezado de día */
#main-menu #scanResults .table-day-header:hover td {
  background: var(--registro-day-header-bg-hover) !important;
}
#main-menu #scanResults .table-day-header.active-row td,
#main-menu #scanResults .table-day-header.collapsed td {
  background: var(--registro-day-header-bg-active) !important;
}

#main-menu #scanResults .table-lote-header td {
  background: var(--registro-lote-header-bg) !important;
  font-size: 12px !important;
  font-weight: 600;
  color: var(--registro-secondary-text) !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid var(--registro-border) !important;
}

/* Filas de datos */
#main-menu #scanResults tbody tr:not(.table-day-header):not(.table-lote-header) td {
  font-size: var(--registro-font-size) !important;
  font-weight: 500;
  color: var(--registro-secondary-text);
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--registro-border);
  background: transparent;
  transition: background-color var(--registro-transition), color var(--registro-transition);
}

/* Zebra */
#main-menu #scanResults tbody tr:not(.table-day-header):not(.table-lote-header):nth-of-type(even) td {
  background: var(--registro-row-zebra);
}

/* Hover desactivado (removido hover accesible original) */
#main-menu #scanResults tbody tr:not(.table-day-header):not(.table-lote-header):hover td {
  background: transparent !important;
}

/* Eliminar separadores verticales anteriores */
#main-menu #scanResults tbody tr td::before {
  content: none !important;
}

/* Columnas clave enfatizadas */
#main-menu #scanResults tbody tr td:nth-child(1),
#main-menu #scanResults tbody tr td:nth-child(2),
#main-menu #scanResults tbody tr td:nth-child(3),
#main-menu #scanResults tbody tr td:nth-child(6),
#main-menu #scanResults tbody tr td:nth-child(8) {
  font-weight: 600;
  color: var(--registro-key-text);
}

/* Estado (chip) */
#main-menu #scanResults tbody tr td:nth-child(8) .chip {
  font-size: 11px !important;
  padding: 4px 10px !important;
  letter-spacing: .4px;
  line-height: 1.1;
}

/* Chips personalizados */
#main-menu #scanResults .chip-success {
  background: var(--registro-chip-ok-bg) !important;
  color: var(--registro-chip-ok-text) !important;
}
#main-menu #scanResults .chip-warn {
  background: var(--registro-chip-in-bg) !important;
  color: var(--registro-chip-in-text) !important;
}
#main-menu #scanResults .chip-neutral {
  background: var(--registro-chip-neutral-bg) !important;
  color: var(--registro-chip-neutral-text) !important;
}

/* Botones de acción dentro de celdas */
#main-menu #scanResults td .btn-icon,
#main-menu #scanResults td .btn.btn-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 8px !important;
  background: transparent;
  color: var(--registro-secondary-text);
  opacity: .65;
  transition: background-color var(--registro-transition), color var(--registro-transition), opacity var(--registro-transition);
}

#main-menu #scanResults td .btn-icon:hover {
  opacity: 1;
  background: var(--registro-accent-soft);
  color: var(--registro-accent);
}

/* Botón de egreso: base + estados hover/active visibles en filas "En curso" */
#main-menu #scanResults td .btn-egreso {
  opacity: 1 !important;
  background: #00C853 !important; /* base */
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
}
#main-menu #scanResults td .btn-egreso:hover {
  background: #00B14A !important; /* hover */
  color: #FFFFFF !important;
}
#main-menu #scanResults td .btn-egreso:active {
  background: #00A043 !important; /* active */
  color: #FFFFFF !important;
}
#main-menu #scanResults td .btn-egreso:focus {
  background: #00C853 !important; /* focus mantiene base */
  color: #FFFFFF !important;
}
#main-menu #scanResults td .btn-egreso.btn-egreso-disabled,
#main-menu #scanResults td .btn-egreso[aria-disabled="true"],
#main-menu #scanResults td .btn-egreso:disabled {
  background: #E2E8F0 !important;
  color: #475569 !important;
}

#main-menu #scanResults td .btn-primary,
#main-menu #scanResults td .btn-success,
#main-menu #scanResults td .btn-secondary {
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  line-height: 1.1;
}

#main-menu #scanResults td .btn-primary {
  background: #384667 !important;
  border: none;
  box-shadow: none;
}
#main-menu #scanResults td .btn-primary:hover {
  background: #31405A !important;
}

/* Escritorio: espaciado entre botones de acciones apilados (columna Acciones) */
@media (min-width: 1025px) {
  #main-menu #scanResults td .reg-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* separación vertical clara */
  }
  #main-menu #scanResults td .reg-actions .btn {
    margin: 0 !important; /* evitar márgenes inline heredados */
  }
}

/* Inputs inline edición (lote / motivo) */
#main-menu #scanResults td input.form-control {
  height: var(--registro-control-height) !important;
  padding: 0 12px !important;
  font-size: var(--registro-control-font-size) !important;
  border: 1px solid var(--registro-border) !important;
  background: var(--registro-control-bg) !important;
  box-shadow: none !important;
  transition: border-color var(--registro-transition), background-color var(--registro-transition);
}
#main-menu #scanResults td input.form-control:focus {
  border-color: var(--registro-accent) !important;
  background: #FFFFFF !important;
  outline: none;
}

/* Focus accesible (teclado) */
#main-menu #scanResults button:focus-visible,
#main-menu #scanResults .btn-icon:focus-visible,
#main-menu #scanResults input.form-control:focus-visible {
  outline: 2px solid var(--registro-focus);
  outline-offset: 2px;
  box-shadow: none !important;
  border-radius: 6px;
}

/* Observaciones (ícono) */
#main-menu #scanResults td .bi-info-circle {
  font-size: 16px;
}

/* Observaciones: botón + tooltip custom */
.obs-cell { position: relative; }
.obs-btn { position: relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:#F1F5F9 !important; border:1px solid #E2E8F0; border-radius:10px; padding:0; line-height:1; cursor:pointer; transition:background .15s, border-color .15s, box-shadow .15s; }
.obs-btn i { color:#2563EB; font-size:18px; transition:color .15s; }
.obs-btn:hover { background:#E2E8F0 !important; }
.obs-btn:hover i { color:#1E40AF; }
#main-menu #scanResults td .obs-btn.obs-critical { background:#FEE2E2 !important; border-color:#FCA5A5 !important; color:#B91C1C !important; opacity:1 !important; }
#main-menu #scanResults td .obs-btn.obs-critical i { color:#B91C1C !important; }
#main-menu #scanResults td .obs-btn.obs-critical:hover { background:#FECACA !important; }
#main-menu #scanResults tbody tr.row-critical td .obs-btn { background:#FEE2E2 !important; border-color:#FCA5A5 !important; color:#B91C1C !important; opacity:1 !important; }
#main-menu #scanResults tbody tr.row-critical td .obs-btn i { color:#B91C1C !important; }
.obs-btn:focus-visible { outline:2px solid #2563EB; outline-offset:2px; }

/* Tooltip rediseñado (arriba-izquierda) */
.obs-tooltip { position:absolute; top:50%; right:100%; transform:translate(-8px,-50%); background:#FFFFFF; color:#1F2937; border:1px solid #D1D5DB; padding:8px 10px; min-width:220px; max-width:320px; font-size:9px; line-height:1.25; letter-spacing:.2px; border-radius:10px; box-shadow:0 10px 25px -5px rgba(0,0,0,0.18),0 4px 8px rgba(0,0,0,0.08); z-index:60; pointer-events:none; opacity:0; transition:opacity .14s ease, transform .14s ease; }
.obs-tooltip:before { content:""; position:absolute; top:50%; left:100%; width:12px; height:12px; background:#FFFFFF; border:1px solid #D1D5DB; border-left:none; border-bottom:none; transform:translate(-6px,-50%) rotate(45deg); box-shadow:2px -1px 3px rgba(0,0,0,0.06); }
.obs-cell.show-tooltip .obs-tooltip { opacity:1; transform:translate(-12px,-50%); }
.obs-tooltip p { margin:0; white-space:normal; word-wrap:break-word; }

@media (max-width:768px){
  /* En móvil mantener encima para evitar overflow lateral */
  .obs-tooltip { right:auto; left:50%; top:-6px; transform:translate(-50%, -110%); }
  .obs-tooltip:before { left:50%; bottom:-6px; transform:translate(-50%,0) rotate(45deg); border-left:1px solid #D1D5DB; border-bottom:1px solid #D1D5DB; border-right:none; border-top:none; }
  .obs-cell.show-tooltip .obs-tooltip { transform:translate(-50%, -118%); }
}

/* Última fila sin borde extra */
#main-menu #scanResults tbody tr:last-child td {
  border-bottom: none;
}

/* Ajuste margen interno card-body p-0 envolvente */
#main-menu .card .card-body.p-0 {
  background: var(--registro-bg);
}

/* Mobile (mantener mismos tonos) */
/* Ampliado a 900px para cubrir dispositivos que reportan >768px en modo móvil (iPad / tablets vertical) */
@media (max-width: 900px) {
  #main-menu .mobile-table-row {
    border: 1px solid var(--registro-border);
    background: var(--registro-bg);
  }
  #main-menu .mobile-row-header {
    background: var(--registro-bg);
  }
  #main-menu .mobile-row-details {
    background: var(--registro-row-hover);
  }
  #main-menu .mobile-dni {
    color: var(--registro-key-text);
  }
  #main-menu .mobile-status .chip {
    font-size: 11px;
  }
  #main-menu .mobile-row-actions .btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
  }

  /* Mejora específica: espaciado y estructura interna al desplegar detalles en móvil (solo Registro) */
  #main-menu .mobile-row-details {
    padding: 16px 18px 20px !important; /* más respiro interior */
  }
  #main-menu .mobile-detail-grid {
    grid-template-columns: 1fr; /* una columna para evitar compresión horizontal */
    gap: 14px !important; /* mayor separación entre ítems */
    margin-bottom: 18px !important;
  }
  #main-menu .mobile-detail-item {
    padding: 10px 12px 12px; /* caja interna */
    background: #FFFFFF; /* contraste sobre hover azul suave */
    border: 1px solid var(--registro-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  #main-menu .mobile-detail-label {
    font-size: 11px !important;
    letter-spacing: .5px;
  }
  #main-menu .mobile-detail-value {
    font-size: 14px !important;
    line-height: 1.25;
    font-weight: 600;
    color: var(--registro-key-text);
    word-break: break-word; /* evita overflow en textos largos */
  }
  #main-menu .mobile-row-actions {
    flex-wrap: wrap; /* permitir que los botones bajen si no entran */
    gap: 10px 12px;
    padding-top: 14px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Botones móviles edit / egreso: circulares y del mismo tamaño */
  #main-menu .mobile-row-actions .btn-editar-mobile,
  #main-menu .mobile-row-actions .btn-egreso-mobile {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    padding:0 !important;
    border-radius:50% !important;
    font-size:0 !important; /* icon-only */
  }
  #main-menu .mobile-row-actions .btn-editar-mobile i,
  #main-menu .mobile-row-actions .btn-egreso-mobile i {
    font-size:20px !important;
  }
  /* Ocultar label de texto del botón editar en móvil para evitar estirado */
  #main-menu .mobile-row-actions .btn-editar-mobile .btn-text-label { display:none !important; }
  #main-menu .mobile-row-actions .btn-egreso-mobile {
    background:#00C853 !important;      /* Verde saturado */
    color:#FFFFFF !important;            /* Texto/ícono blanco */
    border:none !important;              /* Sin contorno */
    box-shadow:none !important;          /* Sin halo */
  }
  #main-menu .mobile-row-actions .btn-egreso-mobile:hover,
  #main-menu .mobile-row-actions .btn-egreso-mobile:focus {
    background:#00B14A !important;      /* Hover/Focus más oscuro */
    color:#FFFFFF !important;
    border:none !important;
    box-shadow:none !important;
    outline:none !important;
  }
  #main-menu .mobile-row-actions .btn-egreso-mobile:active {
    background:#00A043 !important;      /* Active aún más oscuro */
    color:#FFFFFF !important;
    border:none !important;
    box-shadow:none !important;
  }
  #main-menu .mobile-row-actions .btn-egreso-mobile:disabled,
  #main-menu .mobile-row-actions .btn-egreso-mobile.btn-egreso-disabled {
    background:#E2E8F0 !important;      /* Gris neutro disabled */
    color:#475569 !important;
    border:none !important;
    box-shadow:none !important;
  }
  /* Asegurar color blanco del ícono en activo */
  #main-menu .mobile-row-actions .btn-egreso-mobile i { color:#FFFFFF !important; }
  #main-menu .mobile-row-actions .btn-editar-mobile {
  background:#384667 !important;
  color:#FFF !important;
  border:1px solid #384667 !important;
  }
  #main-menu .mobile-row-actions .btn-editar-mobile:disabled {
    background:#A3AFBF !important;
    border-color:#A3AFBF !important;
  }
}

/* Transiciones suaves */
#main-menu #scanResults tbody tr,
#main-menu #scanResults td,
#main-menu #scanResults td .btn-icon,
#main-menu #scanResults td input.form-control {
  transition: background-color var(--registro-transition), color var(--registro-transition), border-color var(--registro-transition);
}

/* Override final: eliminar cualquier resto de hover/degradado */
#main-menu .table tbody tr:not(.table-day-header):not(.table-lote-header):hover,
#main-menu .table tbody tr:not(.table-day-header):not(.table-lote-header):hover td {
  background: transparent !important;
  box-shadow: none !important;
}

/* Garantizar centrado vertical consistente */
#main-menu #scanResults td,
#main-menu #scanResults th {
  vertical-align: middle !important;
}

/* Alineación: centrado general excepto primeras tres columnas y fechas para lectura tabular */
#main-menu #scanResults th:nth-child(1),
#main-menu #scanResults th:nth-child(2),
#main-menu #scanResults th:nth-child(3),
#main-menu #scanResults th:nth-child(6),
#main-menu #scanResults th:nth-child(7) {
  text-align: left !important;
}
#main-menu #scanResults td:nth-child(1),
#main-menu #scanResults td:nth-child(2),
#main-menu #scanResults td:nth-child(3),
#main-menu #scanResults td:nth-child(6),
#main-menu #scanResults td:nth-child(7) {
  text-align: left !important;
}

/* Mantener centradas acción y obs */
#main-menu #scanResults th:nth-child(9),
#main-menu #scanResults th:nth-child(10),
#main-menu #scanResults td:nth-child(9),
#main-menu #scanResults td:nth-child(10) {
  text-align: center !important;
}

/* === Overrides pastel encabezado de día (prioridad final) === */
#main-menu #scanResults .table-day-header td {
  background: var(--registro-day-header-bg) !important;
  color: var(--registro-day-header-text) !important;
  border: 0 !important;
}
#main-menu #scanResults .table-day-header.en-curso-header td {
  background:#FEF3C7 !important; /* amarillo pastel prioridad */
  color:#92400E !important;
}
#main-menu #scanResults .table-day-header:hover td {
  background: var(--registro-day-header-bg-hover) !important;
  color: var(--registro-day-header-text) !important;
}
#main-menu #scanResults .table-day-header.active-row td,
#main-menu #scanResults .table-day-header.collapsed td {
  background: var(--registro-day-header-bg-active) !important;
  color: var(--registro-day-header-text) !important;
}

/* Fallback: si algún hover global elimina color de línea, reforzar */
#main-menu #scanResults tbody tr:not(.table-day-header):not(.table-lote-header) td {
  box-shadow: none !important;
}

/* Nota: Este bloque puede afinarse luego sin impacto en JS. */

/* Paginación de registros */
#main-menu .records-pagination-container,
#main-menu .records-pagination {
  background: transparent !important; /* Fondo removido para coherencia visual */
}
#main-menu .records-pagination button.btn-secondary {
  background:#EDF1F5;
  border:none;
  color:#39495F;
}
#main-menu .records-pagination button.btn-secondary:hover:not(:disabled) {
  background:#E1E7ED;
}
#main-menu .records-pagination button.btn-primary {
  background:#384667;
  border:none;
}
#main-menu .records-pagination span.small.text-muted {
  font-size:12px;
}

/* Header Registros inline */
#main-menu .registros-header-inline {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100%;
  overflow: hidden;
}
#main-menu .registros-header-inline h2 {
  flex: 0 0 auto;
}
#main-menu .registros-header-inline #pageSizeWrapper {
  flex: 0 0 auto;
  margin-left: auto !important; /* Empuja el selector hacia la derecha antes del buscador */
}
#main-menu .registros-search-container {
  flex: 0 0 auto;
  max-width: 360px;
}
#main-menu .registros-search-container.ms-auto {
  margin-left: 0 !important;
  padding-left: 0 !important;
  flex: 0 1 320px;
  display: flex !important;
  align-items: center !important;
}
#main-menu .registros-page-size-select {
  width: auto;
  min-width: 70px;
}
#main-menu .registros-header-inline .search-input-wrapper {
  width: 100%;
}

/* Evitar salto de línea interno en los elementos del header */
#main-menu .registros-header-inline > * { white-space: nowrap; }
#main-menu .registros-header-inline .registros-search-container { white-space: normal; }

/* Paginación fuera de la card */
#records-pagination.records-pagination-container {
  margin-top: 12px;
  padding: 4px 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* ==========================================================
   OVERRIDE ADICIONAL: Filas y celdas totalmente rectas
   (No elimina el radio externo del contenedor; solo interior)
   ========================================================== */
#main-menu #scanResults,
#main-menu #scanResults thead th,
#main-menu #scanResults tbody tr,
#main-menu #scanResults tbody td,
#main-menu #scanResults .table-day-header td,
#main-menu #scanResults .table-lote-header td,
#main-menu #scanResults .record-row-lote td,
#main-menu .mobile-table-row,
#main-menu .mobile-row-header,
#main-menu .mobile-row-details,
#main-menu .mobile-row-actions {
  border-radius: 0 !important;
}

/* Si también quieres el contenedor sin radios, descomentar:
#main-menu .table-wrapper,
#main-menu .card .card-body.p-0 {
  border-radius: 0 !important;
}
*/

/* =============================================================
   BOTÓN EGRESO (match actividad reciente)
   - Mismo tamaño 32x32, circular
   - Activo: fondo verde suave (#DCFCE7) icono verde var(--success)
   - Egresado: fondo gris claro (#F3F4F6) icono gris (var(--muted))
   - Sin cambios en lógica JS
   ============================================================= */
#main-menu .btn-egreso {
  width:32px !important;
  height:32px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  background:#00C853 !important;     /* Verde saturado activo */
  color:#FFFFFF !important;           /* Texto/ícono blanco */
  border:none !important;             /* Sin contorno */
  box-shadow:none !important;         /* Sin halo */
  font-size:14px !important;
  transition:background .16s ease, color .16s ease;
}
#main-menu .btn-egreso:hover,
#main-menu .btn-egreso:focus {
  background:#00B14A !important;      /* Hover/Focus mismo verde más oscuro */
  color:#FFFFFF !important;
  outline:none !important;
  box-shadow:none !important;          /* Quitar anillo */
  border:none !important;
}
#main-menu .btn-egreso:active {
  background:#00A043 !important;      /* Active aún más oscuro */
  box-shadow:none !important;
  border:none !important;
}
#main-menu .btn-egreso.btn-egreso-disabled,
#main-menu .btn-egreso[disabled],
#main-menu .btn-egreso[aria-disabled="true"] {
  background:#E2E8F0 !important;      /* Gris neutro */
  color:#475569 !important;            /* Texto/ícono gris oscuro */
  box-shadow:none !important;
  cursor:default !important;
  pointer-events:none !important;
  border:none !important;              /* Sin borde gris */
}
#main-menu .btn-egreso.btn-egreso-disabled:hover {
  background:#E2E8F0 !important;
  color:#475569 !important;
  box-shadow:none !important;
  border:none !important;
}
#main-menu .btn-egreso i {
  margin:0 !important;
  font-size:16px !important;
  line-height:1;
  color:#FFFFFF !important;            /* Forzar ícono blanco en activo */
}

/* =============================================================
   Espaciado acciones (egreso + editar)
   - Mantiene sólo flecha + editar (cuando procede)
   - Alineación horizontal sin wrap ni salto vertical
   - No modifica lógica JS
   ============================================================= */
#main-menu #scanResults td .btn-egreso,
#main-menu #scanResults td .btn-primary.btn-sm {
  margin-bottom:0 !important;
}

#main-menu #scanResults td .btn-egreso + .btn-primary.btn-sm {
  margin-left:8px !important;
}

/* Asegurar que el botón Aceptar (cuando aparece) no se pegue */
#main-menu #scanResults td .btn-primary.btn-sm + .btn-success.btn-sm {
  margin-left:6px !important;
}

/* Sólo reforzar circular egreso verde activo vs gris egresado (ya implementado arriba) */
#main-menu #scanResults td .btn-egreso.btn-egreso-disabled {
  background:#F3F4F6 !important;
  color:var(--muted) !important;
}

/* =============================================================
   Botón editar como icono circular azul (sin texto visible)
   - Sin tocar JS: se oculta la palabra "Editar" con font-size:0
   - Mantiene accesibilidad (title sigue activo)
   ============================================================= */
#main-menu #scanResults td .btn-primary.btn-sm {
  width:32px !important;
  height:32px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  font-size:0 !important;            /* Oculta el texto "Editar" */
  line-height:1 !important;
  min-width:32px !important;
  min-height:32px !important;
}

#main-menu #scanResults td .btn-primary.btn-sm i.bi-pencil {
  font-size:16px !important;         /* Reestablece tamaño del ícono */
  line-height:1;
  margin:0;
}

#main-menu #scanResults td .btn-egreso {
  border-radius:50% !important;      /* Refuerzo circular egreso */
}

#main-menu #scanResults td .btn-egreso + .btn-primary.btn-sm {
  margin-left:8px !important;        /* Espaciado consistente */
}

/* =============================================================
   Override adicional: botones verticales (egreso arriba, editar abajo)
   - Mismo ancho/alto 32px
   - Separación vertical 5px
   - Quita margen horizontal previo
   - Refuerza forma circular del egreso aun con .btn-icon
   ============================================================= */
#main-menu #scanResults td .d-flex.justify-content-center.gap-2.flex-wrap {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap:5px !important;
}

#main-menu #scanResults td .d-flex.justify-content-center.gap-2.flex-wrap > .btn-egreso,
#main-menu #scanResults td .d-flex.justify-content-center.gap-2.flex-wrap > .btn-primary.btn-sm {
  margin:0 !important;
}

/* Forzar separación vertical explícita entre egreso (arriba) y editar (abajo) en escritorio */
@media (min-width: 1025px) {
  #main-menu #scanResults td .d-flex.justify-content-center.gap-2.flex-wrap > .btn-egreso + .btn-primary.btn-sm {
    margin-top: 6px !important;
  }
}

#main-menu #scanResults td .btn-egreso + .btn-primary.btn-sm {
  margin-left:0 !important; /* anula separación horizontal previa */
}

#main-menu #scanResults td .btn-icon.btn-egreso {
  border-radius:50% !important;
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  min-height:32px !important;
  padding:0 !important;
}

/* Refuerzo definitivo de separación: aseguro margen superior al segundo botón en escritorio */
@media (min-width: 1025px) {
  #main-menu #scanResults td .reg-actions > .btn + .btn {
    margin-top: 6px !important;
  }
}

/* Asegurar que ningún estilo previo de .btn-icon deje esquinas a 8px */
#main-menu #scanResults td .btn-egreso {
  border-radius:50% !important;
}

/* === Overrides finales: separación fiable entre botones de Acciones === */
#main-menu #scanResults td .reg-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
#main-menu #scanResults td .reg-actions > .btn:not(:first-child) {
  margin-top: 8px !important;
}

/* =============================================================
   OVERRIDES Paginación y Selector "Mostrar X por página"
   ============================================================= */

/* Selector tamaño de página: alineación horizontal y pill */
#main-menu #pageSizeWrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 12px;
  line-height: 1;
}

#main-menu #pageSizeWrapper label,
#main-menu #pageSizeWrapper span.small {
  margin: 0;
  font-size: 11px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #5F6C80;
  white-space: nowrap;
}

#main-menu #pageSizeWrapper select {
  height: 28px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.1;
  background: #FFFFFF;
  border: 1px solid var(--registro-border);
  border-radius: 6px;
  min-width: 68px;
}

#main-menu #pageSizeWrapper select:focus {
  outline: none;
  border-color: var(--registro-accent);
  box-shadow: 0 0 0 2px rgba(19,42,72,0.15);
}

/* Contenedor de paginación: ahora en fila, centrado, sin fondo */
#main-menu #records-pagination.records-pagination-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  background: transparent !important;
  border: none !important;
  padding: 6px 0 !important;
  margin-top: 12px;
  width: 100%;                /* Ocupa mismo ancho que la card para centrar visualmente */
}

/* Sub-bloques (info rango + botones) en línea, sin forzar ancho completo */
#main-menu #records-pagination > div {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

/* Info rango registros (primera fila) */
#main-menu #records-pagination > div:first-child .small.text-muted {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6A768A !important;
  background: transparent !important;
  padding: 0;
  border-radius: 0;
}

/* Botones de paginación: tamaño uniforme y espaciado limpio */
#main-menu #records-pagination button.btn {
  min-width: var(--registro-control-height);
  height: var(--registro-control-height);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--registro-control-radius) !important;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

/* Refinado extra: contenedor interno de páginas e info en una sola línea centrada */
#main-menu #records-pagination .pagination-info {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6A768A;
  line-height: 1;
  padding: 0 4px;
}

#main-menu #records-pagination .pagination-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#main-menu #records-pagination .pagination-pages .btn {
  margin: 0;
}

@media (max-width:600px) {
  #main-menu #records-pagination .pagination-pages {
    gap: 4px;
  }
  #main-menu #records-pagination .pagination-info {
    font-size: 10px;
    padding: 0 2px;
  }
}

/* Estado secundario (no activa) */
#main-menu #records-pagination button.btn.btn-secondary {
  background: #E9EEF3;
  color: #39495F;
  border: 1px solid #D7DFE7;
}
#main-menu #records-pagination button.btn.btn-secondary:hover:not(:disabled) {
  background: #DFE6ED;
}

/* Activa */
#main-menu #records-pagination button.btn.btn-primary {
  background: #384667;
  border: 1px solid #384667;
}
#main-menu #records-pagination button.btn.btn-primary:hover:not(:disabled) {
  background: #303C59;
}

/* Disabled */
#main-menu #records-pagination button.btn:disabled {
  opacity: .45;
  cursor: default;
}

/* Elipsis estilizada */
#main-menu #records-pagination span.px-1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  font-size: 14px;
  color: #7A8796;
  padding: 0 2px;
}

/* Ajuste responsive: reducir gaps en móvil */
@media (max-width: 600px) {
  #main-menu #records-pagination.records-pagination-container {
    gap: 4px !important;
  }
  #main-menu #records-pagination button.btn {
    min-width: 30px;
    height: 32px;
    font-size: 12px;
    border-radius: 8px !important;
  }
  #main-menu #pageSizeWrapper {
    padding: 4px 8px !important;
    gap: 4px !important;
  }
  #main-menu #pageSizeWrapper select {
    min-width: 60px;
    height: 26px;
    font-size: 11px;
  }
}

/* Suavizar enfoque de botones paginación */
#main-menu #records-pagination button.btn:focus-visible {
  outline: 2px solid var(--registro-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* =================== Overrides adicionales (alineación header + tipografías + bordes) =================== */

/* Forzar alineación horizontal: título a la izquierda, pageSize + search a la derecha */
#main-menu .registros-header-inline {
  width: 100%;
  align-items: center !important;
}

/* Quitar radios superiores del wrapper de la tabla para encabezado recto */
#main-menu .table-wrapper {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Unificar color/opacidad de todos los TH (encabezados de columnas) */
#main-menu #scanResults thead th {
  color: #5F6C80 !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* Anular cualquier color diferenciado previo (columna clave) */
#main-menu #scanResults thead th:nth-child(1),
#main-menu #scanResults thead th:nth-child(2),
#main-menu #scanResults thead th:nth-child(3),
#main-menu #scanResults thead th:nth-child(6),
#main-menu #scanResults thead th:nth-child(8) {
  color: #5F6C80 !important;
}

/* Ajustar gap entre selector y buscador si el espacio es reducido */
@media (max-width: 900px) {
  #main-menu .registros-search-container {
    max-width: 280px;
  }
}

@media (max-width: 640px) {
  /* En móvil permitir volver a apilar si el ancho no alcanza */
  #main-menu .registros-header-inline {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
  #main-menu .registros-header-inline #pageSizeWrapper {
    order: 2;
    margin-left: 0 !important;
  }
  #main-menu .registros-search-container {
    order: 3;
    margin-left: 0 !important;
    width: 100%;
    max-width: 100%;
  }
}

/* Restaurar radios externos de la card principal (mantener encabezado de tabla recto) */
#main-menu .card.card-registros {
  border-radius: var(--registro-radius) !important;
  overflow: hidden;
}
#main-menu .card.card-registros .card-header {
  border-top-left-radius: var(--registro-radius) !important;
  border-top-right-radius: var(--registro-radius) !important;
}
#main-menu .card.card-registros .card-body.p-0 {
  border-bottom-left-radius: var(--registro-radius) !important;
  border-bottom-right-radius: var(--registro-radius) !important;
}
#main-menu .card.card-registros .table-wrapper {
  border-top-left-radius: 0 !important;  /* Recto bajo el header */
  border-top-right-radius: 0 !important;
}


/* Ajuste: asegurar radios sólo si no se sobreescriben después */
#main-menu .card.card-registros {
  border-radius: var(--registro-radius) !important;
}

/* ================= Overrides adicionales centrado paginación =================
   - Eliminar empuje a la derecha del bloque de páginas (ms-auto)
   - Unificar gap entre info de rango y botones
   - Centrar todo el conjunto respecto al contenedor
   - Ajustar tamaño mínimo uniforme de cada botón
   ============================================================================ */
#main-menu #records-pagination > div.ms-auto {
  margin-left: 0 !important;
}
#main-menu #records-pagination > div {
  gap: 8px !important;
}

/* === EXPANSIÓN COMPLETA DEL CUADRO DE REGISTROS ===
   Quita padding interno y bordes del wrapper para que la tabla
   ocupe 100% del contenedor (sin margen visual alrededor).
   ========================================================= */
#main-menu .card.card-registros .card-body.registros-table-wrapper {
  padding: 0 !important; /* eliminar espacio interno */
}
#main-menu .card.card-registros .table-wrapper {
  border: none !important; /* quitar borde interno que crea "marco" */
  border-radius: 0 !important; /* evitar doble radio dentro de la card */
  padding: 0 !important; /* asegurar sin relleno lateral */
  margin: 0 !important; /* eliminar posibles márgenes heredados */
  width: 100% !important; /* ocupar todo el ancho disponible */
}
#main-menu .card.card-registros .table {
  border-radius: 0 !important;
  margin: 0 !important; /* sin margen inferior */
}
/* Quitar borde y spacing residual de la tabla misma */
#main-menu .card.card-registros .table th,
#main-menu .card.card-registros .table td {
  /* mantener padding de celdas, pero asegurar que no genere scroll horizontal artificial */
  white-space: nowrap;
}
/* Si hubiera scrollbar y aparece un gap inferior, forzamos colapso */
#main-menu .card.card-registros .registros-table-wrapper {
  margin: 0 !important;
}
#main-menu #records-pagination button.btn {
  min-width: 32px;
}
#main-menu #records-pagination.records-pagination-container {
  justify-content: center !important;
}

/* =============================================================
   Alert banner permanencia y resaltado filas sobretiempo
   ============================================================= */
#main-menu .alert-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 16px;
  font-size:13px;
  line-height:1.2;
  border:1px solid var(--registro-border);
  border-left-width:4px;
  background:#F7F9FC;
  color:#39495F;
  position:relative;
  z-index:6;
  animation:fadeSlideIn .35s ease;
}

#main-menu .alert-banner .alert-content {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
  font-size:11px;
  color:#5F6C80;
}

#main-menu .alert-banner .alert-content i {
  font-size:16px;
  opacity:.85;
}

#main-menu .alert-banner button.btn {
  height:30px;
  padding:0 14px;
  font-size:12px;
  font-weight:600;
  border-radius:18px !important;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:none;
  border:1px solid transparent;
  background:#384667;
}
#main-menu .alert-banner button.btn:hover:not(:disabled){
  background:#303C59;
}
#main-menu .alert-banner button.btn i {
  font-size:14px;
  margin:0;
  line-height:1;
}

/* Severidades (prioridad: critical > medium > early) */
#main-menu .alert-banner.early {
  border-left-color:#F3C969;
  background:#FFF9E6;
}
#main-menu .alert-banner.medium {
  border-left-color:#F5A733;
  background:#FFF4E0;
}
#main-menu .alert-banner.critical {
  border-left-color:#DC3545;
  background:#FFE9EC;
}

#main-menu .alert-banner.critical .alert-content i { color:#C41F32; }
#main-menu .alert-banner.medium .alert-content i { color:#D97A10; }
#main-menu .alert-banner.early .alert-content i { color:#C28A00; }

@keyframes fadeSlideIn {
  from { opacity:0; transform:translateY(-4px); }
  to { opacity:1; transform:translateY(0); }
}

/* Resaltado filas sobretiempo (sin romper zebra) */
#main-menu #scanResults tbody tr.overstay-early td {
  background:linear-gradient(to right, #FFF9E6, #FFFDF7) !important;
}
#main-menu #scanResults tbody tr.overstay-medium td {
  background:linear-gradient(to right, #FFF4E0, #FFF9ED) !important;
}
#main-menu #scanResults tbody tr.overstay-critical td {
  background:linear-gradient(to right, #FFE9EC, #FFF4F5) !important;
}

#main-menu #scanResults tbody tr.overstay-critical td,
#main-menu #scanResults tbody tr.overstay-medium td,
#main-menu #scanResults tbody tr.overstay-early td {
  transition:background-color var(--registro-transition), box-shadow var(--registro-transition);
  position:relative;
}

/* Borde lateral fino para mayor indicación */
#main-menu #scanResults tbody tr.overstay-early td:first-child {
  box-shadow:inset 4px 0 0 #F3C969;
}
#main-menu #scanResults tbody tr.overstay-medium td:first-child {
  box-shadow:inset 4px 0 0 #F5A733;
}
#main-menu #scanResults tbody tr.overstay-critical td:first-child {
  box-shadow:inset 4px 0 0 #DC3545;
}

/* En móvil aplicar mismo destaque a tarjetas si se reutiliza clase (futuro) */

/* Enfoque al hacer scroll ("Ir al visitante") */
#main-menu #scanResults tbody tr.overstay-focus td {
  animation: overstayFocusBlink 2s ease;
}
@keyframes overstayFocusBlink {
  0% { box-shadow:inset 0 0 0 0 rgba(56,70,103,0), 0 0 0 0 rgba(56,70,103,0); }
  20% { box-shadow:inset 0 0 0 2px rgba(56,70,103,.45), 0 0 0 4px rgba(56,70,103,.15); }
  60% { box-shadow:inset 0 0 0 2px rgba(56,70,103,.45), 0 0 0 4px rgba(56,70,103,.15); }
  100% { box-shadow:inset 0 0 0 0 rgba(56,70,103,0), 0 0 0 0 rgba(56,70,103,0); }
}

/* Ajustes responsivos del banner */
@media (max-width: 640px) {
  #main-menu .alert-banner {
    flex-wrap:wrap;
    gap:12px;
    padding:10px 14px;
  }
  #main-menu .alert-banner button.btn {
    width:100%;
    justify-content:center;
  }
}

/* === Banner global fijo sobre toda la pantalla (override) === */
#timeoutAlert {
  position:fixed !important;
  top:0;
  left:0;
  width:100%;
  z-index:3000;
  border:0 !important;
  border-bottom:1px solid #F5BFC6 !important;
  border-radius:0 !important;
  background:#FFE9EC !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  box-shadow:0 2px 4px rgba(0,0,0,0.06);
  padding:10px 20px;
}
#timeoutAlert .alert-content span {
  color:#9B2332 !important;
  font-weight:600;
  letter-spacing:.5px;
}
#timeoutAlert button.btn {
  background:#C41F32 !important;
  border:none !important;
  box-shadow:0 0 0 0 transparent !important;
  font-weight:600;
  padding:6px 18px !important;
  border-radius:999px !important;
}
#timeoutAlert button.btn:hover:not(:disabled){
  background:#A91B2B !important;
}
body.alert-active {
  padding-top: var(--alert-banner-offset, 54px);
  transition:padding-top .25s ease;
}
@media (max-width:640px){
  #timeoutAlert {
    flex-wrap:wrap;
    padding:12px 14px;
  }
  #timeoutAlert button.btn {
    width:100%;
    justify-content:center;
  }
}

/* ==========================================================
   PAGINACIÓN MINIMALISTA (alineación horizontal, sin bloques blancos)
   - Números en línea, sin fondos sólidos
   - Página activa con barra inferior
   - Botones flecha discretos
   ========================================================== */
#main-menu #records-pagination.records-pagination-container {
  gap:14px !important;
  padding:8px 0 !important;
}
#main-menu #records-pagination .pagination-info {
  order:-1;
  flex:1 0 100%;
  text-align:center;
  padding:0 !important;
  margin:0 !important;
}
#main-menu #records-pagination .pagination-pages {
  gap:10px !important; /* Mayor separación para lectura y clic más cómodo */
}
#main-menu #records-pagination .pagination-pages .btn {
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  min-width:36px !important;              /* Ancho base uniforme */
  height:auto !important;
  padding:6px 14px !important;            /* Más aire lateral */
  line-height:1.1;
  font-size:14px !important;
  font-weight:500;
  color:#566478 !important;
  border-radius:8px !important;
  position:relative;
  transition:color .18s ease, background-color .18s ease;
}
#main-menu #records-pagination .pagination-pages .btn:hover:not(:disabled){
  color:#384667 !important;
  background:rgba(56,70,103,0.08) !important;
}
#main-menu #records-pagination .pagination-pages .btn:disabled {
  opacity:.38 !important;
  background:transparent !important;
}
#main-menu #records-pagination .pagination-pages .btn.btn-primary {
  background:transparent !important;
  color:#384667 !important;
  font-weight:700 !important;
}
#main-menu #records-pagination .pagination-pages .btn.btn-primary::after {
  content:"";
  position:relative;
  display:block;
  height:3px;
  border-radius:2px;
  background:#384667;
  margin-top:4px;
  width:100%;
}
#main-menu #records-pagination .pagination-pages .btn.btn-secondary {
  background:transparent !important;
  color:#566478 !important;
  border:none !important;
}
#main-menu #records-pagination .pagination-pages .btn.btn-secondary:hover:not(:disabled){
  background:rgba(56,70,103,0.08) !important;
  color:#384667 !important;
}
#main-menu #records-pagination .pagination-pages .btn:first-child,
#main-menu #records-pagination .pagination-pages .btn:nth-child(2),
#main-menu #records-pagination .pagination-pages .btn:last-child,
#main-menu #records-pagination .pagination-pages .btn:nth-last-child(2){
  background:transparent !important;
  box-shadow:none !important;
}
#main-menu #records-pagination span.px-1 {
  padding:0 4px;
  color:#7A8796 !important;
  font-size:16px !important;
  line-height:1;
}

/* Ajuste selector "Mostrar X" coherente */
#main-menu #pageSizeWrapper {
  gap:8px !important;
}
#main-menu #pageSizeWrapper select {
  background:#F5F7FA !important;
  border:1px solid #D7DFE7 !important;
  height:30px !important;
  padding:2px 8px !important;
  font-size:12px !important;
  line-height:1.1 !important;
  border-radius:8px !important;
}
#main-menu #pageSizeWrapper label,
#main-menu #pageSizeWrapper span.small {
  font-size:11px !important;
  letter-spacing:.05em;
  font-weight:600;
  color:#5F6C80 !important;
}

/* Responsive refinado */
@media (max-width:600px){
  #main-menu #records-pagination.records-pagination-container {
    gap:8px !important;
  }
  #main-menu #records-pagination .pagination-pages .btn {
    padding:6px 8px !important;
    font-size:13px !important;
  }
  #main-menu #records-pagination .pagination-info {
    font-size:10px !important;
  }
}

/* =============================================================
   Alertas individuales de permanencia (stack)
   ============================================================= */
#timeoutAlertsContainer {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:3000;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:6px 12px;
  pointer-events:none;
}

#timeoutAlertsContainer .alert-banner.alert-individual {
  pointer-events:auto;
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  font-size:12px;
  line-height:1.2;
  background:#F7F9FC;
  border:1px solid #E2E8F0;
  border-left:4px solid #CBD5E1;
  border-radius:6px;
  box-shadow:0 2px 4px rgba(0,0,0,0.06);
  animation:fadeSlideIn .35s ease;
}

.severity-early.alert-individual { border-left-color:#F3C969; }
.severity-medium.alert-individual { border-left-color:#F5A733; }
.severity-critical.alert-individual { border-left-color:#DC3545; }

.alert-individual .visitor-main { font-weight:600; color:#1E346A; }
.alert-individual .visitor-dni,
.alert-individual .visitor-motivo { font-size:11px; color:#5B6475; }

.alert-individual .egreso-individual {
  margin-left:auto;
  background:#384667 !important;
  color:#FFF !important;
  border:none;
  height:30px;
  padding:0 14px;
  font-size:12px;
  font-weight:600;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:none;
  transition:background .18s ease;
}
.alert-individual .egreso-individual:hover {
  background:#303C59 !important;
}

/* Input motivo inline reducido (egreso masivo) */
#egresoMasivoMotivoInline,
.motivo-inline-input {
  max-width:180px !important;
  width:100% !important;
  padding:2px 8px !important;
  font-size:12px !important;
  line-height:1.2 !important;
  height:28px !important;
  border-radius:8px !important;
}

/* Responsive alertas individuales */
@media (max-width:640px){
  #timeoutAlertsContainer {
    gap:8px;
    padding:8px 10px;
  }
  #timeoutAlertsContainer .alert-banner.alert-individual {
    flex-wrap:wrap;
  }
  .alert-individual .egreso-individual {
    width:100%;
    justify-content:center;
  }
}

/* ===============================================
   OVERRIDES FINALES PAGINACIÓN (pedido específico)
   - Alinear horizontalmente selector "Mostrar X"
   - Quitar cualquier fondo residual del bloque paginación
   - Centrar y espaciar números respecto al ancho de la card
   - Estética minimal: sólo barra inferior en activo
   =============================================== */
#main-menu #pageSizeWrapper {
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  background:transparent !important;
  padding:0 !important;
  border:none !important;
}
#main-menu #pageSizeWrapper label,
#main-menu #pageSizeWrapper span.small {
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#5F6C80 !important;
}
#main-menu #pageSizeWrapper select {
  background:#F5F7FA !important;
  border:1px solid #D7DFE7 !important;
  border-radius:8px !important;
  height:30px !important;
  font-size:12px !important;
  padding:2px 8px !important;
  line-height:1.1 !important;
}

#main-menu #records-pagination.records-pagination-container {
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:column;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  width:100%;
  padding:6px 0 !important;
  margin:10px 0 0 0 !important;
}

#main-menu #records-pagination .pagination-info {
  order:-1;
  width:100%;
  text-align:center;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
}

#main-menu #records-pagination .pagination-pages {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px !important; /* Espaciado prolijo entre números */
  flex-wrap:wrap;
  background:transparent !important;
  padding:2px 0;
}

#main-menu #records-pagination .pagination-pages .btn {
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  min-width:34px !important;
  padding:6px 10px !important;
  font-size:14px !important;
  font-weight:500;
  color:#566478 !important;
  position:relative;
  border-radius:6px !important;
  transition:color .18s ease, background-color .18s ease;
}

#main-menu #records-pagination .pagination-pages .btn:hover:not(:disabled){
  background:rgba(56,70,103,0.08) !important;
  color:#384667 !important;
}

#main-menu #records-pagination .pagination-pages .btn.btn-primary {
  background:transparent !important;
  color:#384667 !important;
  font-weight:700 !important;
}
#main-menu #records-pagination .pagination-pages .btn.btn-primary::after {
  content:"";
  display:block;
  height:3px;
  background:#384667;
  border-radius:2px;
  width:100%;
  margin-top:4px;
}

#main-menu #records-pagination .pagination-pages .btn:disabled {
  opacity:.38 !important;
  background:transparent !important;
}

#main-menu #records-pagination span.px-1 {
  font-size:16px !important;
  color:#7A8796 !important;
  padding:0 2px !important;
}

@media (max-width:600px){
  #main-menu #records-pagination .pagination-pages {
    gap:6px !important;
  }
  #main-menu #records-pagination .pagination-pages .btn {
    min-width:30px !important;
    padding:6px 8px !important;
    font-size:13px !important;
  }
  #main-menu #records-pagination .pagination-info {
    font-size:10px !important;
  }
}

/* ==========================================================================
   AJUSTES FINALES PAGINACIÓN (Solicitud: alineación horizontal, sin fondo,
   números espaciados y centrados respecto al cuadro principal)
   Fecha: 24-08-2025
   ========================================================================== */

/* Forzar que el wrapper "Mostrar X por página" quede siempre en línea y centrado visualmente */
#main-menu .registros-header-inline #pageSizeWrapper {
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-left:auto !important;
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  padding:0 !important;
}

/* Uniformar tipografía del bloque selector */
#main-menu .registros-header-inline #pageSizeWrapper label,
#main-menu .registros-header-inline #pageSizeWrapper span.small {
  font-size:11px !important;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#5F6C80 !important;
  line-height:1;
}

/* Select compacto y coherente con controles */
#main-menu .registros-header-inline #pageSizeWrapper select {
  height:30px !important;
  line-height:1.1 !important;
  padding:2px 10px !important;
  font-size:12px !important;
  border-radius:8px !important;
  background:#F5F7FA !important;
  border:1px solid #D7DFE7 !important;
  box-shadow:none !important;
  min-width:68px;
}
#main-menu .registros-header-inline #pageSizeWrapper select:focus {
  border-color:#384667 !important;
  box-shadow:0 0 0 2px rgba(56,70,103,0.15) !important;
  outline:none !important;
}

/* Contenedor de paginación absolutamente neutro y centrado */
#main-menu #records-pagination.records-pagination-container {
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding:8px 0 !important;
  margin:12px 0 0 0 !important;
  width:100%;
}

/* Info rango siempre arriba y centrada */
#main-menu #records-pagination .pagination-info {
  order:-1;
  width:100%;
  text-align:center;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
}

/* Números centrados con espaciado prolijo (sin fondo) */
#main-menu #records-pagination .pagination-pages {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px !important;
  flex-wrap:wrap;
  background:transparent !important;
  padding:2px 0;
  margin:0;
}

/* Botones como texto interactivo con barra inferior en activo */
#main-menu #records-pagination .pagination-pages .btn {
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  min-width:34px !important;
  padding:6px 10px !important;
  font-size:14px !important;
  font-weight:500;
  color:#566478 !important;
  position:relative;
  border-radius:6px !important;
  transition:color .18s ease, background-color .18s ease;
}
#main-menu #records-pagination .pagination-pages .btn:hover:not(:disabled){
  background:rgba(56,70,103,0.08) !important;
  color:#384667 !important;
}
#main-menu #records-pagination .pagination-pages .btn.btn-primary {
  background:transparent !important;
  color:#384667 !important;
  font-weight:700 !important;
}
#main-menu #records-pagination .pagination-pages .btn.btn-primary::after {
  content:"";
  display:block;
  height:3px;
  background:#384667;
  border-radius:2px;
  width:100%;
  margin-top:4px;
}
#main-menu #records-pagination .pagination-pages .btn:disabled {
  opacity:.38 !important;
  background:transparent !important;
}

/* Elipsis consistente */
#main-menu #records-pagination span.px-1 {
  font-size:16px !important;
  color:#7A8796 !important;
  padding:0 2px !important;
  line-height:1;
}

/* Responsive: reducir ligeramente el gap */
@media (max-width:600px){
  #main-menu #records-pagination .pagination-pages {
    gap:8px !important;
  }
  #main-menu #records-pagination .pagination-pages .btn {
    min-width:30px !important;
    padding:6px 8px !important;
    font-size:13px !important;
  }
}

/* Notas:
   - No se tocó JS.
   - Se evita fondo blanco y cajas alrededor.
   - Centrado total respecto al ancho disponible.
*/

/* ==========================================================
   Paginación estética en estilo "chip" (píldoras)
   - Solo estilos. No modifica estructura ni JS.
   - Números como chips, activo relleno, flechas discretas.
   ========================================================== */
#main-menu #records-pagination .pagination-pages {
  gap: 10px !important;
}
#main-menu #records-pagination .pagination-pages .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: #FFFFFF00 !important; /* transparente */
  color: #566478 !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
#main-menu #records-pagination .pagination-pages .btn:hover:not(:disabled),
#main-menu #records-pagination .pagination-pages .btn:focus-visible {
  background: #F1F4FA !important;
  border-color: #E3E8F2 !important;
  color: #384667 !important;
  outline: none !important;
}
#main-menu #records-pagination .pagination-pages .btn:active:not(:disabled) {
  background: #E9EDF6 !important;
  border-color: #D7DFE7 !important;
}
/* Página activa */
#main-menu #records-pagination .pagination-pages .btn.btn-primary {
  background: #384667 !important;
  border-color: #384667 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
#main-menu #records-pagination .pagination-pages .btn.btn-primary::after {
  display: none !important; /* anula subrayado previo */
}
/* Flechas e inactivos (secundarios) con borde sutil */
#main-menu #records-pagination .pagination-pages .btn.btn-secondary {
  border-color: #D7DFE7 !important;
  background: #FFFFFF !important; /* leve contraste sobre fondo */
}
#main-menu #records-pagination .pagination-pages .btn.btn-secondary:hover:not(:disabled){
  background: #F7F9FC !important;
  border-color: #D7DFE7 !important;
}
#main-menu #records-pagination .pagination-pages .btn:disabled {
  opacity: .45 !important;
  cursor: default !important;
}
#main-menu #records-pagination span.px-1 {
  color: #7A8796 !important;
  font-weight: 700;
  letter-spacing: .02em;
}
@media (max-width: 600px) {
  #main-menu #records-pagination .pagination-pages {
    gap: 8px !important;
  }
  #main-menu #records-pagination .pagination-pages .btn {
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================
   BLOQUE FINAL OVERRIDES PAGINACIÓN (refinado adicional)
   - Garantiza alineación horizontal limpia
   - Elimina cualquier fondo residual (hover/focus/active)
   - Uniforma altura y espaciado preciso
   - Centra numérico respecto a ancho de la card
   ========================================================== */
#main-menu #records-pagination.records-pagination-container {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#main-menu #records-pagination .pagination-info {
  order: -1;
  width: 100%;
  text-align: center;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

#main-menu #records-pagination .pagination-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px !important;
  flex-wrap: wrap;
  padding: 2px 0;
  margin: 0;
  background: transparent !important;
}

#main-menu #records-pagination .pagination-pages .btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 34px !important;
  padding: 6px 10px !important;
  font-size: 14px !important;
  font-weight: 500;
  color: #566478 !important;
  position: relative;
  border-radius: 6px !important;
  line-height: 1.1;
  transition: color .18s ease, background-color .18s ease;
}

#main-menu #records-pagination .pagination-pages .btn:hover:not(:disabled),
#main-menu #records-pagination .pagination-pages .btn:focus-visible {
  background: rgba(56,70,103,0.08) !important;
  color: #384667 !important;
  outline: none !important;
}

#main-menu #records-pagination .pagination-pages .btn:active {
  background: rgba(56,70,103,0.12) !important;
  color: #384667 !important;
}

#main-menu #records-pagination .pagination-pages .btn.btn-primary {
  background: #F1F4FA !important; /* gris claro activo */
  border: 1px solid #E3E8F2 !important;
  font-weight: 700 !important;
  color: #384667 !important;
}

#main-menu #records-pagination .pagination-pages .btn.btn-primary:hover:not(:disabled) {
  background: #E9EDF6 !important; /* hover ligeramente más marcado */
  border-color: #D7DFE7 !important;
}

#main-menu #records-pagination .pagination-pages .btn.btn-primary::after {
  display: none !important; /* sin barra inferior para el activo */
}

#main-menu #records-pagination .pagination-pages .btn:disabled {
  opacity: .38 !important;
  background: transparent !important;
  cursor: default;
}

#main-menu #records-pagination .pagination-pages .btn:focus,
#main-menu #records-pagination .pagination-pages .btn:active {
  box-shadow: none !important;
}

#main-menu #records-pagination span.px-1 {
  font-size: 16px !important;
  color: #7A8796 !important;
  padding: 0 2px !important;
  line-height: 1;
  background: transparent !important;
  border: 0;
}

@media (max-width: 600px) {
  #main-menu #records-pagination .pagination-pages {
    gap: 8px !important;
  }
  #main-menu #records-pagination .pagination-pages .btn {
    min-width: 30px !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
  }
  #main-menu #records-pagination .pagination-info {
    font-size: 10px !important;
  }
}

/* Selector "Mostrar X por página" coherente y totalmente en línea */
#main-menu #pageSizeWrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

#main-menu #pageSizeWrapper label,
#main-menu #pageSizeWrapper span.small {
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5F6C80 !important;
  line-height: 1;
  margin: 0;
  background: transparent !important;
}

#main-menu #pageSizeWrapper select {
  height: 30px !important;
  line-height: 1.1 !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  background: #F5F7FA !important;
  border: 1px solid #D7DFE7 !important;
  box-shadow: none !important;
  min-width: 68px;
  transition: border-color .18s ease, background-color .18s ease;
}

#main-menu #pageSizeWrapper select:hover {
  background: #EEF2F6 !important;
}

#main-menu #pageSizeWrapper select:focus {
  border-color: #384667 !important;
  box-shadow: 0 0 0 2px rgba(56,70,103,0.15) !important;
  outline: none !important;
}