/* =====================================================================
   TEMA MODERNO — EOL Express  (capa de renovación visual)
   Estilo: Moderno suave  ·  Acento: Azul #2563EB  ·  Modo claro + toggle
   Se carga DESPUÉS de adminlte.css y custom.css. No reemplaza nada:
   solo sobreescribe estilos. Para desactivarlo, quitar su <link> en
   vistas/plantilla.php.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --eol-primary:      #2563EB;
  --eol-primary-600:  #1D4ED8;
  --eol-primary-700:  #1E40AF;
  --eol-primary-50:   #EFF6FF;
  --eol-primary-100:  #DBEAFE;

  --eol-bg:       #F1F5F9;   /* fondo del área de contenido */
  --eol-surface:  #FFFFFF;   /* tarjetas */
  --eol-text:     #1E293B;
  --eol-muted:    #64748B;
  --eol-border:   #E5E9F0;

  --eol-sidebar:   #0F172A;  /* slate-900 */
  --eol-sidebar-2: #1E293B;

  --eol-radius:    14px;
  --eol-radius-sm: 10px;
  --eol-shadow:    0 1px 2px rgba(15,23,42,.05), 0 10px 26px -14px rgba(15,23,42,.22);
  --eol-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --eol-shadow-lg: 0 8px 30px -10px rgba(37,99,235,.35);
  --eol-trans:     all .18s cubic-bezier(.4,0,.2,1);
}

/* ------------------------------ BASE ------------------------------ */
body, .wrapper {
  font-family: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .1px;
}
.content-wrapper { background: var(--eol-bg); }
.content-header h1 { font-weight: 700; color: var(--eol-text); letter-spacing: -.3px; }
a { color: var(--eol-primary); }
a:hover { color: var(--eol-primary-700); }

/* ----------------------------- BOTONES ---------------------------- */
.btn {
  border-radius: var(--eol-radius-sm);
  font-weight: 600;
  padding: .48rem 1.05rem;
  border: 1px solid transparent;
  transition: var(--eol-trans);
  box-shadow: var(--eol-shadow-sm);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { border-radius: 8px; padding: .3rem .7rem; }
.btn-lg { border-radius: 12px; }

.btn-primary {
  background: var(--eol-primary);
  border-color: var(--eol-primary);
  box-shadow: 0 4px 14px -4px rgba(37,99,235,.5);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--eol-primary-600);
  border-color: var(--eol-primary-600);
  box-shadow: var(--eol-shadow-lg);
}
.btn-outline-primary { color: var(--eol-primary); border-color: var(--eol-primary); }
.btn-outline-primary:hover { background: var(--eol-primary); border-color: var(--eol-primary); }
.btn-default, .btn-secondary {
  background: #fff; border-color: var(--eol-border); color: var(--eol-text);
}
.btn-default:hover, .btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }
.btn-tool { box-shadow: none; }

/* ----------------------------- TARJETAS --------------------------- */
.card {
  border: none;
  border-radius: var(--eol-radius);
  box-shadow: var(--eol-shadow);
  background: var(--eol-surface);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--eol-border);
  border-radius: var(--eol-radius) var(--eol-radius) 0 0 !important;
  padding: 1rem 1.25rem;
}
.card-title { font-weight: 700; letter-spacing: -.2px; }
.card-outline { border-top: none; }

/* --- Tarjetas de color: header BLANCO + título en color + línea de acento ---
   (en vez del header de color fuerte original de AdminLTE) */
.card.card-primary:not(.card-outline),
.card.card-info:not(.card-outline),
.card.card-success:not(.card-outline),
.card.card-warning:not(.card-outline),
.card.card-danger:not(.card-outline),
.card.card-secondary:not(.card-outline),
.card.card-gray:not(.card-outline),
.card.card-green:not(.card-outline),
.card.card-aqua:not(.card-outline),
.card.card-teal:not(.card-outline),
.card.card-yellow:not(.card-outline) {
  border-top: 3px solid var(--eol-accent, var(--eol-primary));
}
.card.card-primary:not(.card-outline)   { --eol-accent: #2563EB; }
.card.card-info:not(.card-outline)      { --eol-accent: #0EA5E9; }
.card.card-aqua:not(.card-outline)      { --eol-accent: #0EA5E9; }
.card.card-success:not(.card-outline)   { --eol-accent: #16A34A; }
.card.card-green:not(.card-outline)     { --eol-accent: #16A34A; }
.card.card-teal:not(.card-outline)      { --eol-accent: #0D9488; }
.card.card-warning:not(.card-outline)   { --eol-accent: #D97706; }
.card.card-yellow:not(.card-outline)    { --eol-accent: #D97706; }
.card.card-danger:not(.card-outline)    { --eol-accent: #DC2626; }
.card.card-secondary:not(.card-outline) { --eol-accent: #64748B; }
.card.card-gray:not(.card-outline)      { --eol-accent: #64748B; }

.card.card-primary:not(.card-outline) > .card-header,
.card.card-info:not(.card-outline) > .card-header,
.card.card-success:not(.card-outline) > .card-header,
.card.card-warning:not(.card-outline) > .card-header,
.card.card-danger:not(.card-outline) > .card-header,
.card.card-secondary:not(.card-outline) > .card-header,
.card.card-gray:not(.card-outline) > .card-header,
.card.card-green:not(.card-outline) > .card-header,
.card.card-aqua:not(.card-outline) > .card-header,
.card.card-teal:not(.card-outline) > .card-header,
.card.card-yellow:not(.card-outline) > .card-header {
  background: var(--eol-surface) !important;
  color: var(--eol-text) !important;
  border-bottom: 1px solid var(--eol-border) !important;
}
.card.card-primary:not(.card-outline) > .card-header .card-title,
.card.card-info:not(.card-outline) > .card-header .card-title,
.card.card-success:not(.card-outline) > .card-header .card-title,
.card.card-warning:not(.card-outline) > .card-header .card-title,
.card.card-danger:not(.card-outline) > .card-header .card-title,
.card.card-secondary:not(.card-outline) > .card-header .card-title,
.card.card-gray:not(.card-outline) > .card-header .card-title,
.card.card-green:not(.card-outline) > .card-header .card-title,
.card.card-aqua:not(.card-outline) > .card-header .card-title,
.card.card-teal:not(.card-outline) > .card-header .card-title,
.card.card-yellow:not(.card-outline) > .card-header .card-title {
  color: var(--eol-accent) !important;
  font-weight: 700;
}
/* Botones de la tarjeta (colapsar/cerrar) legibles sobre header blanco */
.card.card-primary:not(.card-outline) > .card-header .btn-tool,
.card.card-info:not(.card-outline) > .card-header .btn-tool,
.card.card-success:not(.card-outline) > .card-header .btn-tool,
.card.card-warning:not(.card-outline) > .card-header .btn-tool,
.card.card-danger:not(.card-outline) > .card-header .btn-tool,
.card.card-secondary:not(.card-outline) > .card-header .btn-tool {
  color: var(--eol-muted);
}
.card-primary.card-outline { box-shadow: var(--eol-shadow); }
.card-footer { background: transparent; border-top: 1px solid var(--eol-border); border-radius: 0 0 var(--eol-radius) var(--eol-radius); }

/* ---------------------- WIDGETS DASHBOARD ------------------------- */
.small-box {
  border-radius: var(--eol-radius);
  box-shadow: var(--eol-shadow);
  overflow: hidden;
  transition: var(--eol-trans);
}
.small-box:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -16px rgba(15,23,42,.35); }
.small-box .icon > i { opacity: .25; }
.info-box {
  border-radius: var(--eol-radius);
  box-shadow: var(--eol-shadow);
  background: var(--eol-surface);
}
.info-box .info-box-icon { border-radius: var(--eol-radius); }

/* ---------------------- FORMULARIOS / INPUTS ---------------------- */
.form-control, .custom-select {
  border-radius: var(--eol-radius-sm);
  border: 1px solid var(--eol-border);
  color: var(--eol-text);
  transition: var(--eol-trans);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--eol-primary);
  box-shadow: 0 0 0 3px var(--eol-primary-100);
}
.input-group-text {
  border-radius: var(--eol-radius-sm);
  border: 1px solid var(--eol-border);
  background: #f8fafc;
  color: var(--eol-muted);
}
label { font-weight: 600; color: #334155; }

/* Select2 a juego */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: var(--eol-radius-sm) !important;
  border: 1px solid var(--eol-border) !important;
  min-height: calc(2.25rem + 2px);
}
.select2-container--default.select2-container--focus .select2-selection {
  border-color: var(--eol-primary) !important;
  box-shadow: 0 0 0 3px var(--eol-primary-100);
}
.select2-dropdown { border-radius: var(--eol-radius-sm); border-color: var(--eol-border); overflow: hidden; }
.select2-results__option--highlighted { background: var(--eol-primary) !important; }

/* ------------------------------ SIDEBAR --------------------------- */
.main-sidebar, .main-sidebar.sidebar-dark-primary {
  background: linear-gradient(180deg, #111C33 0%, #0F172A 100%);
  box-shadow: 4px 0 24px -16px rgba(0,0,0,.6);
}

/* Marca / logo */
.brand-link {
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-weight: 800; letter-spacing: -.3px;
  padding-top: .9rem; padding-bottom: .9rem;
  transition: var(--eol-trans);
}
.brand-link:hover { background: rgba(255,255,255,.03); }
.brand-link .brand-image { box-shadow: 0 0 0 2px rgba(37,99,235,.5); opacity: 1; }
.brand-link .brand-text { color: #fff; }

/* Panel de usuario */
.main-sidebar .user-panel { border-bottom: 1px solid rgba(255,255,255,.07); align-items: center; }
.main-sidebar .user-panel .image img {
  width: 38px; height: 38px; object-fit: cover;
  box-shadow: 0 0 0 2px rgba(37,99,235,.45);
}
.main-sidebar .user-panel .info a { color: #e2e8f0; font-weight: 600; }
.main-sidebar .user-panel .info a:hover { color: #fff; }

/* Buscador */
.form-control-sidebar {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  color: #e2e8f0; border-radius: 8px 0 0 8px;
}
.form-control-sidebar::placeholder { color: #64748b; }
.form-control-sidebar:focus { background: rgba(255,255,255,.1); border-color: var(--eol-primary); color: #fff; box-shadow: none; }
.btn-sidebar { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #94a3b8; border-radius: 0 8px 8px 0; }
.btn-sidebar:hover { color: #fff; }
/* Alinear el botón/ícono de búsqueda con el alto del campo (el ícono se veía
   un poco más grande que el rectángulo de Search). */
.input-group[data-widget="sidebar-search"] .form-control-sidebar,
.input-group[data-widget="sidebar-search"] .btn-sidebar { height: 38px; }
.input-group[data-widget="sidebar-search"] .btn-sidebar {
  display: flex; align-items: center; justify-content: center; padding: 0 .6rem;
}
.input-group[data-widget="sidebar-search"] .btn-sidebar > i { font-size: .9rem; line-height: 1; }

/* Encabezado de sección ("Menú Principal") */
.nav-sidebar .nav-header {
  color: #64748b; text-transform: uppercase; font-size: .68rem;
  font-weight: 800; letter-spacing: 1px; padding: .9rem 1.2rem .35rem;
}

/* Ítems */
.nav-sidebar .nav-item { margin: 1px 10px; }
.nav-sidebar .nav-link {
  border-radius: 10px; color: #cbd5e1; padding: .58rem .85rem;
  transition: var(--eol-trans); position: relative;
}
.nav-sidebar .nav-link .nav-icon { color: #94a3b8; transition: var(--eol-trans); }
.nav-sidebar .nav-link p { font-weight: 500; }
.nav-sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-sidebar .nav-link:hover .nav-icon { color: #fff; }

/* Activo */
.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
  background: var(--eol-primary); color: #fff; font-weight: 600;
  box-shadow: 0 6px 16px -6px rgba(37,99,235,.7);
}
.nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.nav-sidebar .nav-treeview .nav-link.active .nav-icon { color: #fff; }
.nav-sidebar .menu-open > .nav-link { background: rgba(255,255,255,.05); }

/* Submenús (treeview) */
.nav-sidebar .nav-treeview { background: rgba(0,0,0,.22); border-radius: 10px; margin: 2px 6px 4px; padding: 3px; }
.nav-sidebar .nav-treeview .nav-link { padding: .42rem .7rem .42rem 1.5rem; font-size: .9rem; border-radius: 8px; }
.nav-sidebar .nav-treeview .nav-icon { font-size: .9rem; }
.nav-sidebar .nav-link > p > .right { color: #94a3b8; }

/* Colapsado */
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-item { margin: 1px 6px; }

/* Scrollbar del sidebar */
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* Sin scroll horizontal en el menú: el texto largo envuelve, no desborda.
   Evita la barra de desplazamiento inferior por unos pocos píxeles de
   márgenes/padding anidados (item + treeview + padding del link). */
.sidebar { overflow-x: hidden !important; }
.sidebar .os-scrollbar-horizontal { display: none !important; }
.nav-sidebar .nav-link p { white-space: normal; overflow-wrap: break-word; }
.nav-sidebar .nav-treeview .nav-link { min-width: 0; }

/* Detalle inline (fila hija) en Reporte CC Ventas: factura / devolución */
.detalle-inline-cc { padding: 10px 14px; background: #f8fafc; border-left: 3px solid var(--eol-primary); border-radius: 6px; }
.detalle-inline-titulo { font-weight: 700; color: var(--eol-primary); margin-bottom: 6px; font-size: .85rem; }
.detalle-inline-cc > table { background: #fff; border-radius: 6px; overflow: hidden; }
.detalle-inline-cc > table thead th { border-top: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--eol-muted); }
.detalle-inline-vacio, .detalle-inline-cargando, .detalle-inline-error { padding: 10px 14px; }
.detalle-inline-error { color: #dc2626; font-weight: 600; }
.detalle-inline-cargando { color: var(--eol-muted); }
#reportCorriente tbody tr.detalle-abierto > td { background: #eef2ff; }
.dark-mode .detalle-inline-cc { background: #0f1c33; }
.dark-mode .detalle-inline-cc > table { background: transparent; }
.dark-mode #reportCorriente tbody tr.detalle-abierto > td { background: rgba(37, 99, 235, .12); }

/* Número de documento: indicar que es "hovereable" (muestra popup) */
#reportCorriente tbody td.celda-numero { cursor: help; text-decoration: underline dotted var(--eol-primary); text-underline-offset: 3px; }

/* Popup con todos los datos del documento (hover sobre el número) */
.popup-doc-cc {
  position: absolute; z-index: 1080; display: none;
  min-width: 300px; max-width: 460px; max-height: 60vh; overflow: auto;
  background: #fff; border: 1px solid var(--eol-border);
  border-radius: 10px; box-shadow: 0 18px 44px -14px rgba(15, 23, 42, .45);
  padding: 12px 14px;
}
.popup-doc-head { font-weight: 800; color: var(--eol-primary); font-size: .95rem; margin-bottom: 8px; border-bottom: 1px solid var(--eol-border); padding-bottom: 6px; }
.popup-doc-datos { width: 100%; margin-bottom: 6px; }
.popup-doc-datos td { padding: 2px 4px; font-size: .82rem; }
.popup-doc-datos td:first-child { color: var(--eol-muted); text-transform: uppercase; letter-spacing: .03em; font-size: .72rem; width: 34%; white-space: nowrap; }
.popup-doc-datos td:last-child { text-align: right; font-weight: 600; }
.popup-doc-items { margin-top: 4px; }
.popup-doc-items .detalle-inline-cc { border-left: 0; padding: 0; background: transparent; }
.dark-mode .popup-doc-cc { background: #0f1c33; border-color: rgba(255,255,255,.1); color: #e2e8f0; }

/* =====================================================================
   Spinner de carga unificado (mismo look que el de SweetAlert): un aro
   girando. Reemplaza a los <i class="fa-spinner fa-spin"> del sistema.
   Se escala con font-size (em) y toma el color primario.
   ===================================================================== */
.eol-spinner {
  display: inline-block; box-sizing: border-box;
  width: 1.25em; height: 1.25em;
  border: .16em solid var(--eol-primary);
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.2em;
  animation: eol-spin .7s linear infinite;
}
.eol-spinner-lg { width: 2.5em; height: 2.5em; border-width: .22em; }
@keyframes eol-spin { to { transform: rotate(360deg); } }

/* Indicador "Procesando..." de DataTables: tarjeta con spinner (más visible) */
div.dataTables_processing {
  background: #fff !important;
  border: 1px solid var(--eol-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .45) !important;
  color: var(--eol-text) !important;
  font-weight: 700 !important;
  padding: 16px 22px 16px 52px !important;
  width: auto !important; min-width: 180px;
  height: auto !important;
}
div.dataTables_processing > div { display: none !important; } /* oculta los dots viejos de DataTables */
div.dataTables_processing::before {
  content: ''; position: absolute; left: 20px; top: 50%; margin-top: -11px;
  width: 22px; height: 22px; box-sizing: border-box;
  border: 3px solid var(--eol-primary); border-right-color: transparent;
  border-radius: 50%; animation: eol-spin .7s linear infinite;
}
.dark-mode div.dataTables_processing { background: #0f1c33 !important; border-color: rgba(255,255,255,.1) !important; color: #e2e8f0 !important; }

/* ------------------------------ NAVBAR ---------------------------- */
.main-header.navbar {
  border: none;
  border-bottom: 1px solid var(--eol-border);
  box-shadow: 0 1px 12px -6px rgba(15,23,42,.25);
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(8px);
}
.main-header .nav-link { font-weight: 600; color: #334155; border-radius: 8px; }
.main-header .nav-link:hover { background: var(--eol-primary-50); color: var(--eol-primary); }

/* ------------------------------ TABLAS ---------------------------- */
.table { color: var(--eol-text); }
.table thead th {
  border-top: none;
  border-bottom: 2px solid var(--eol-border);
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .4px;
  color: var(--eol-muted);
  font-weight: 700;
}
.table td, .table th { border-top: 1px solid #eef2f7; vertical-align: middle; }
.table-hover tbody tr { transition: background .12s ease; }
.table-hover tbody tr:hover { background: var(--eol-primary-50); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--eol-border); }
.table tbody td { vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(148, 163, 184, .07); }

/* Botones de acción dentro de tablas: separados, redondeados y prolijos */
.table .btn-group { display: inline-flex; gap: 5px; flex-wrap: nowrap; vertical-align: middle; }
.table .btn-group > .btn {
  border-radius: 8px !important;
  box-shadow: none;
  transition: var(--eol-trans);
}
.table .btn-group > .btn:has(> i:only-child) {
  width: 34px; height: 34px; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem;
}
.table .btn-group > .btn:hover { transform: translateY(-1px); box-shadow: var(--eol-shadow-sm); }

/* DataTables controles */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: var(--eol-radius-sm); border: 1px solid var(--eol-border); padding: .25rem .6rem;
}
.page-item.active .page-link { background: var(--eol-primary); border-color: var(--eol-primary); }
.page-link { color: var(--eol-primary); border-radius: 8px !important; margin: 0 2px; border-color: var(--eol-border); }

/* ----------------------- BADGES / ALERTAS ------------------------- */
.badge { border-radius: 999px; padding: .38em .7em; font-weight: 600; }
.alert { border-radius: var(--eol-radius-sm); border: none; box-shadow: var(--eol-shadow-sm); }
.breadcrumb { background: transparent; padding-left: 0; }

/* ----------------------- MODALES / SWAL --------------------------- */
.modal-content { border: none; border-radius: var(--eol-radius); box-shadow: 0 24px 60px -20px rgba(15,23,42,.4); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--eol-border); }
.modal-footer { border-top: 1px solid var(--eol-border); }
.swal2-popup { border-radius: var(--eol-radius) !important; }
.swal2-styled.swal2-confirm { border-radius: var(--eol-radius-sm) !important; background: var(--eol-primary) !important; }
.toast { border-radius: var(--eol-radius-sm) !important; }

/* ------------------------------ LOGIN ----------------------------- */
.login-page, .register-page {
  background: radial-gradient(1200px 600px at 50% -10%, #1e3a8a 0%, #0f172a 55%, #0b1120 100%);
  min-height: 100vh;
}
.login-box, .register-box { width: 400px; }
.login-box .card {
  border-radius: 18px;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,.7);
  overflow: hidden;
}
.login-box .card-header { background: #fff; border-bottom: none; padding-top: 1.8rem; }
.login-box .card-header h1 { font-weight: 800; letter-spacing: -.5px; color: var(--eol-text); }
.login-box .card-header h1 b { color: var(--eol-primary); }
.login-box-msg { font-weight: 600; color: var(--eol-muted); }
.login-box .card-body { padding: 1.2rem 1.8rem 2rem; }
.login-box .btn-primary { padding: .6rem; font-size: 1rem; }

/* ----------------------- SCROLLBARS finos ------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* =====================================================================
   MODO OSCURO — refinado a slate moderno
   ===================================================================== */
.dark-mode {
  --eol-bg:      #0B1120;
  --eol-surface: #0F172A;
  --eol-text:    #E2E8F0;
  --eol-muted:   #94A3B8;
  --eol-border:  #1E293B;
}
.dark-mode .content-wrapper { background: var(--eol-bg); }
.dark-mode .card { background: var(--eol-surface); box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.7); }
.dark-mode .card-header,
.dark-mode .card-footer { border-color: var(--eol-border); }
.dark-mode .info-box { background: var(--eol-surface); }
.dark-mode .form-control, .dark-mode .custom-select,
.dark-mode .input-group-text { background: #111c33; border-color: var(--eol-border); color: var(--eol-text); }
.dark-mode .form-control:focus { border-color: var(--eol-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.25); }
.dark-mode label { color: #cbd5e1; }
.dark-mode .table { color: var(--eol-text); }
.dark-mode .table td, .dark-mode .table th { border-color: var(--eol-border); }
.dark-mode .table-hover tbody tr:hover { background: rgba(37,99,235,.12); }
.dark-mode .main-header.navbar { background: rgba(15,23,42,.85); border-color: var(--eol-border); }
.dark-mode .main-header .nav-link { color: #cbd5e1; }
.dark-mode .main-header .nav-link:hover { background: rgba(37,99,235,.18); color: #fff; }
.dark-mode .btn-default, .dark-mode .btn-secondary { background: #111c33; border-color: var(--eol-border); color: var(--eol-text); }
.dark-mode .modal-content { background: var(--eol-surface); color: var(--eol-text); }
.dark-mode .page-link { background: var(--eol-surface); border-color: var(--eol-border); }

/* =====================================================================
   AJUSTES DE FEEDBACK
   ===================================================================== */

/* (1) Selector "Mostrar N registros" de DataTables: que no se deforme */
.dataTables_length select,
.dataTables_wrapper select.custom-select,
.dataTables_wrapper select.form-control {
  width: auto !important;
  min-width: 4.6rem;
  display: inline-block !important;
  height: calc(1.9rem + 2px);
  padding: .25rem 1.8rem .25rem .65rem;
  line-height: 1.4;
  background-position: right .55rem center;
  vertical-align: middle;
}
.dataTables_length label { display: inline-flex; align-items: center; gap: .4rem; }

/* (2) Números de los widgets del dashboard: más chicos para no pisar el ícono */
.small-box .inner h3,
.small-box[class*="bg-pastel-"] .inner h3,
#dashboard-small-boxes-card .small-box .inner h3 {
  font-size: 1.55rem !important;
  font-weight: 800;
  word-break: break-word;
  padding-right: 54px;   /* deja libre la zona del ícono */
  line-height: 1.15;
}
.small-box .inner p { padding-right: 54px; }
.small-box .icon > i,
.small-box[class*="bg-pastel-"] .icon > i { font-size: 52px !important; top: 14px; }

/* (3) Lista "Nuevos Productos": sacar la negrita */
.products-list .product-info b,
.product-list-in-box b { font-weight: 500; }

/* (4) Botones "Agregar ..." de cada módulo: con color y sombra */
.btn-default[data-target^="#modalAgregar"],
.btn-sm.btn-default[data-target^="#modalAgregar"] {
  background: var(--eol-primary);
  border-color: var(--eol-primary);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(37,99,235,.55);
}
.btn-default[data-target^="#modalAgregar"]:hover,
.btn-sm.btn-default[data-target^="#modalAgregar"]:hover,
.btn-default[data-target^="#modalAgregar"]:focus {
  background: var(--eol-primary-600);
  border-color: var(--eol-primary-600);
  color: #fff;
  box-shadow: var(--eol-shadow-lg);
  transform: translateY(-1px);
}
.btn-default[data-target^="#modalAgregar"] i { margin-right: .25rem; }

/* Botones "Agregar ..." que son links (Agregar Reserva, Transito, Compra, etc.) */
a[href^="crear-"] > .btn-default,
a[href^="crear-"] > .btn-sm.btn-default {
  background: var(--eol-primary);
  border: 1px solid var(--eol-primary);
  color: #fff;
  border-radius: var(--eol-radius-sm);
  padding: .48rem 1.05rem;
  font-weight: 600;
  box-shadow: 0 4px 14px -4px rgba(37,99,235,.55);
  transition: var(--eol-trans);
}
a[href^="crear-"] > .btn-default:hover,
a[href^="crear-"] > .btn-default:focus {
  background: var(--eol-primary-600);
  border-color: var(--eol-primary-600);
  color: #fff;
  box-shadow: var(--eol-shadow-lg);
  transform: translateY(-1px);
}

/* (5) Reservas a Entregar en TARJETAS (estilo foto 5) */
.reservas-cards { display: flex; flex-direction: column; gap: 14px; }
.reservas-empty { padding: 26px; text-align: center; color: var(--eol-muted); font-weight: 600; }
.rsv-card {
  border: 1px solid var(--eol-border);
  border-left: 4px solid var(--eol-warning, #F59E0B);
  border-radius: var(--eol-radius);
  background: #FEFCE8;           /* amarillo muy suave = pendiente */
  box-shadow: var(--eol-shadow-sm);
  padding: 14px 16px;
  transition: var(--eol-trans);
}
.rsv-card:hover { box-shadow: var(--eol-shadow); transform: translateY(-1px); }
.rsv-card.is-prep { background: #F0FDF4; border-left-color: #16A34A; }
.rsv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rsv-cliente { font-size: 1.05rem; font-weight: 700; color: var(--eol-text); }
.rsv-cli-nota { font-size: .82rem; font-weight: 600; color: #B45309; }
.dark-mode .rsv-cli-nota { color: #FCD34D; }

/* =====================================================================
   EDITAR / CREAR RESERVA — divisor arrastrable, botones y X
   ===================================================================== */
@media (min-width: 768px) {
  /* Divisor: arrastrable, barra punteada, sin flechas */
  .reserva-productos-layout .resize-divider { cursor: col-resize; }
  .reserva-productos-layout .resize-divider .divider-indicator { display: none !important; }
  .reserva-productos-layout .resize-divider::before {
    width: 4px !important;
    border-radius: 2px !important;
    background: #cbd5e1 !important;
    background-image: none !important;
  }
  .reserva-productos-layout .resize-divider:hover::before,
  .reserva-productos-layout .resize-divider.is-dragging::before {
    background: var(--eol-primary) !important;
    background-image: none !important;
  }
  /* Manija central para agarrar */
  .reserva-productos-layout .resize-divider::after {
    content: "⋮";
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 14px; height: 46px; border-radius: 7px;
    background: #fff; border: 1px solid #cbd5e1; color: #94a3b8;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; line-height: 1; z-index: 5;
    box-shadow: var(--eol-shadow-sm);
  }
  .reserva-productos-layout .resize-divider:hover::after,
  .reserva-productos-layout .resize-divider.is-dragging::after {
    border-color: var(--eol-primary); color: var(--eol-primary);
  }
  /* Botones IMEI/SERIAL e Item Libre: que no se agranden de más */
  #editarImeiPP, #btnAgregarItemLibre { max-width: 175px; font-size: .8rem; white-space: nowrap; }
  /* Campos de precio: que no se agranden de más */
  .nuevoPrecioUProducto { max-width: 120px; }
  .nuevoPrecioTProducto { max-width: 150px; }

  /* Tabla de Productos (panel derecho): fuente más chica para que entre bien */
  .reserva-productos-layout .productos-pane .table,
  .reserva-productos-layout .productos-pane .dataTables_wrapper { font-size: .8rem; }
  .reserva-productos-layout .productos-pane .table th,
  .reserva-productos-layout .productos-pane .table td { padding: .4rem .5rem; }
  .reserva-productos-layout .productos-pane .btn { font-size: .76rem; padding: .25rem .55rem; }
}

/* Botón X de quitar producto — más prolijo */
/* Encabezado de modal: indicar que se puede arrastrar */
.modal-header { cursor: move; }
.modal-header .close { cursor: pointer; }

/* Lista de IMEI/SERIAL con números de línea */
.imei-editor {
  display: flex; align-items: stretch;
  border: 1px solid var(--eol-border); border-radius: var(--eol-radius-sm); overflow: hidden;
}
.imei-editor .imei-gutter {
  flex: 0 0 auto; min-width: 38px; text-align: right;
  padding: .375rem .5rem; background: #f1f5f9; color: #94a3b8;
  font-size: 1rem; line-height: 1.5; user-select: none; overflow: hidden;
  border-right: 1px solid var(--eol-border); white-space: nowrap;
}
.imei-editor .imei-gutter > div { line-height: 1.5; }
.imei-editor textarea {
  flex: 1; border: none !important; border-radius: 0 !important;
  font-size: 1rem; line-height: 1.5; box-shadow: none !important;
}
.dark-mode .imei-editor { border-color: var(--eol-border); }
.dark-mode .imei-editor .imei-gutter { background: #111c33; color: #64748b; border-color: var(--eol-border); }

.quitarProducto {
  font-size: .8rem !important;
  width: 26px; height: 26px; min-width: 26px; padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: #FEE2E2 !important; color: #DC2626 !important; border: 1px solid #FECACA !important;
  box-shadow: none !important; transition: all .15s ease;
}
.quitarProducto:hover { background: #DC2626 !important; color: #fff !important; border-color: #DC2626 !important; transform: none; }
.input-group-text:has(.quitarProducto) { background: transparent !important; border: none !important; padding: 0 6px 0 0 !important; }
.rsv-meta { font-size: .8rem; color: var(--eol-muted); margin-top: 2px; }
.rsv-head-right { text-align: right; white-space: nowrap; }
.rsv-total { font-size: 1.15rem; font-weight: 800; color: var(--eol-primary); }
.rsv-badge {
  display: inline-block; margin-top: 4px;
  font-size: .72rem; font-weight: 700; padding: .2em .7em; border-radius: 999px;
}
.rsv-badge-pend { background: #FEF3C7; color: #B45309; }
.rsv-badge-ok   { background: #DCFCE7; color: #15803D; }
.rsv-items {
  margin: 12px 0; padding: 10px 0; border-top: 1px dashed var(--eol-border);
  border-bottom: 1px dashed var(--eol-border);
}
.rsv-item { padding: 3px 0; font-size: .9rem; color: var(--eol-text); line-height: 1.5; }
.rsv-item strong { color: var(--eol-text); font-weight: 700; }

/* Toggle de detalle (colapsable) */
.rsv-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  margin: 6px 0 2px; font-size: .82rem; font-weight: 700; color: var(--eol-primary);
  user-select: none; padding: 3px 0;
}
.rsv-toggle:hover { color: var(--eol-primary-700); }
.rsv-chev { transition: transform .15s ease; font-size: .75rem; }
.rsv-card.is-open .rsv-chev { transform: rotate(90deg); }
.rsv-toggle-ocultar { display: none; }
.rsv-card.is-open .rsv-toggle-ver { display: none; }
.rsv-card.is-open .rsv-toggle-ocultar { display: inline; }
.rsv-items { display: none; }
.rsv-card.is-open .rsv-items { display: block; }

/* Nota — resaltada */
.rsv-nota {
  margin: 10px 0 2px; padding: 10px 14px; font-size: .92rem; font-weight: 600;
  background: #FEF3C7; border: 1px solid #FCD34D; border-left: 5px solid #F59E0B;
  border-radius: 8px; color: #92400E; box-shadow: 0 1px 2px rgba(245,158,11,.18);
}
.rsv-nota .fa-sticky-note { margin-right: 6px; color: #F59E0B; }
.rsv-nota-vend { font-weight: 800; }
.rsv-nota-sep { opacity: .6; }
.rsv-nota-txt { font-size: .82em; font-weight: 500; }
.rsv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Buscadores */
.rsv-search { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.rsv-search-field {
  flex: 1 1 200px; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 2px solid var(--eol-primary); border-radius: 10px;
  padding: .35rem .7rem; transition: var(--eol-trans);
  box-shadow: 0 0 0 3px var(--eol-primary-100);
}
.rsv-search-field:focus-within { border-color: var(--eol-primary-700); box-shadow: 0 0 0 4px var(--eol-primary-100); }
.rsv-search-field i { color: var(--eol-muted); font-size: .9rem; }
.rsv-search-field input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; color: var(--eol-text); font-size: .9rem; }
.rsv-search-clear {
  display: none; border: none; background: transparent; color: var(--eol-muted);
  cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0 2px; flex: 0 0 auto;
}
.rsv-search-field.has-text .rsv-search-clear { display: inline-block; }
.rsv-search-clear:hover { color: var(--eol-primary); }
.dark-mode .rsv-search-field { background: #111c33; }
.dark-mode .rsv-search-field input { color: var(--eol-text); }

/* Toolbar: Mostrar N + orden */
.rsv-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.rsv-mostrar { font-size: .85rem; color: var(--eol-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.rsv-pagesize {
  border: 1px solid var(--eol-border); border-radius: 8px; padding: .2rem 1.6rem .2rem .55rem;
  font-weight: 600; color: var(--eol-text); background-color: #fff;
}
.rsv-pagesize:focus { border-color: var(--eol-primary); box-shadow: 0 0 0 3px var(--eol-primary-100); outline: none; }
.dark-mode .rsv-pagesize { background-color: #111c33; color: var(--eol-text); }

/* Paginación */
.rsv-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rsv-pag-info { font-size: .82rem; color: var(--eol-muted); }
.rsv-pag-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.rsv-page-btn {
  border: 1px solid var(--eol-border); background: #fff; color: #334155;
  border-radius: 8px; padding: .25rem .7rem; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: var(--eol-trans); min-width: 34px;
}
.rsv-page-btn:hover:not(:disabled) { border-color: var(--eol-primary); color: var(--eol-primary); }
.rsv-page-btn.is-active { background: var(--eol-primary); border-color: var(--eol-primary); color: #fff; }
.rsv-page-btn:disabled { opacity: .45; cursor: default; }
.dark-mode .rsv-page-btn { background: #111c33; color: #cbd5e1; }

/* Lista de tarjetas y barra de orden */
.rsv-list { display: flex; flex-direction: column; gap: 14px; }
.rsv-sortbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 4px 2px 6px; border-bottom: 1px solid var(--eol-border); margin-bottom: 2px;
}
.rsv-sortbar-label { font-weight: 700; color: var(--eol-muted); font-size: .85rem; }
.rsv-sort-btn {
  border: 1px solid var(--eol-border); background: #fff; color: #334155;
  border-radius: 999px; padding: .25rem .8rem; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: var(--eol-trans); display: inline-flex; align-items: center; gap: 4px;
}
.rsv-sort-btn:hover { border-color: var(--eol-primary); color: var(--eol-primary); }
.rsv-sort-btn.is-active { background: var(--eol-primary); border-color: var(--eol-primary); color: #fff; }
.rsv-sort-num {
  background: rgba(255,255,255,.35); color: #fff; border-radius: 999px;
  font-size: .68rem; padding: 0 5px; margin-left: 2px;
}
.rsv-sortbar-hint { font-size: .74rem; color: var(--eol-muted); margin-left: auto; }
.dark-mode .rsv-sort-btn { background: #111c33; color: #cbd5e1; }
.dark-mode .rsv-item-cant { background: #1e293b; color: #cbd5e1; }
.dark-mode .rsv-nota { background: #2a2410; border-color: #5a4a1a; border-left-color: #F59E0B; color: #fcd34d; }

/* (7) Carga diferida de widgets del dashboard */
.lazy-widget { min-height: 120px; }
.lazy-spin {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 200px; color: var(--eol-muted); font-weight: 600;
  background: var(--eol-surface); border-radius: var(--eol-radius);
  box-shadow: var(--eol-shadow-sm); border: 1px dashed var(--eol-border);
}
.lazy-spin .fa-spinner { font-size: 1.4rem; color: var(--eol-primary); }
.lazy-error {
  min-height: 120px; display: flex; align-items: center; justify-content: center;
  color: var(--eol-muted); background: var(--eol-surface);
  border-radius: var(--eol-radius); border: 1px dashed var(--eol-border);
}

/* tarjetas en modo oscuro */
.dark-mode .rsv-card { background: #1c1f14; border-color: var(--eol-border); }
.dark-mode .rsv-card.is-prep { background: #102016; }
.dark-mode .rsv-item-desc, .dark-mode .rsv-cliente { color: var(--eol-text); }

/* (6) Encabezados de tarjeta: que el título largo NO se superponga con los
   botones (− ×). Header en flexbox: título a la izq, herramientas a la der. */
.card > .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
.card > .card-header > .card-title {
  flex: 1 1 auto;
  min-width: 0;
  float: none;
  line-height: 1.3;
}
.card > .card-header > .card-tools {
  flex: 0 0 auto;
  float: none !important;
  margin: 0 0 0 auto;
  white-space: nowrap;
}
/* Login y encabezados centrados: mantener centrado */
.login-box .card-header,
.register-box .card-header,
.card > .card-header.text-center {
  display: block;
  text-align: center;
}

/* =====================================================================
   TABLAS MODERNAS — capa global (DataTables / .table)
   Sin bordes de celda, encabezado tipo "label", hover suave, controles
   redondeados y numeración del orden acumulativo (multi-sort).
   ===================================================================== */
table.dataTable,
.table {
  border-collapse: separate !important;
  border-spacing: 0;
  color: var(--eol-text);
  font-size: .9rem;
}

/* Borderless: matar todos los bordes de celda (incluye table-bordered) */
.table, .table td, .table th,
.table-bordered, .table-bordered td, .table-bordered th,
table.dataTable, table.dataTable td, table.dataTable th {
  border: 0 !important;
}

/* Encabezado tipo "label" */
.table thead th,
table.dataTable thead th {
  background: transparent !important;
  border-bottom: 2px solid var(--eol-border) !important;
  color: var(--eol-muted);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: .7rem 1rem;
  white-space: nowrap;
  vertical-align: middle;
}

/* Celdas: más aire, separador ultrasutil (no "divisiones" marcadas) */
.table tbody td,
table.dataTable tbody td {
  padding: .72rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid #f2f5fa !important;
}
.table tbody tr:last-child td,
table.dataTable tbody tr:last-child td { border-bottom: 0 !important; }

/* Sin zebra: usamos hover */
.table-striped tbody tr,
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table tbody tr,
table.dataTable tbody tr { transition: background .12s ease; }
.table tbody tr:hover,
table.dataTable tbody tr:hover { background: var(--eol-primary-50); }

/* Miniaturas */
.table .imgTabla,
.table .img-thumbnail { border-radius: 8px; border: 1px solid var(--eol-border); }

/* Número de orden del multi-sort (shift+click) */
.orden-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; margin-left: 7px; padding: 0 4px;
  font-size: .62rem; font-weight: 800; line-height: 1;
  color: #fff; background: var(--eol-primary);
  border-radius: 999px; vertical-align: middle;
  box-shadow: 0 2px 6px -2px rgba(37,99,235,.6);
}

/* Estado como "pill" suave (Activo / Inactivo) */
.table .btn-xs {
  border-radius: 999px !important;
  font-weight: 700;
  font-size: .72rem;
  padding: .2rem .75rem !important;
  box-shadow: none !important;
  border: 0 !important;
}
.table .btn-xs.btn-success { background: #dcfce7 !important; color: #166534 !important; }
.table .btn-xs.btn-danger  { background: #fee2e2 !important; color: #991b1b !important; }

/* Botones de acción de la grilla: íconos cuadrados, espaciados */
.table .btn-group { box-shadow: none; }
.table .btn-group > .btn {
  border-radius: 9px !important;
  margin: 0 2px;
  box-shadow: none;
}
/* Sólo los botones de SÓLO ÍCONO se hacen cuadrados; los de texto (ej. "Agregar") conservan su ancho */
.table .btn-group > .btn:has(> i:only-child) {
  width: 34px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
/* Botones de texto en la grilla (Agregar, etc.): prolijos y legibles */
.table .btn-group > .btn:not(:has(> i:only-child)) {
  padding: .28rem .8rem;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.table .btn-group > .btn:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* Controles DataTables: length + buscar */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--eol-border);
  border-radius: 999px;
  padding: .34rem .95rem;
  background: #fff;
  color: var(--eol-text);
  outline: none;
  transition: var(--eol-trans);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--eol-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.dataTables_wrapper .dataTables_info { color: var(--eol-muted); font-size: .82rem; }

/* Paginación tipo "pill" */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  margin: 0 2px;
  padding: .3rem .72rem !important;
  color: var(--eol-text) !important;
  background: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--eol-primary-50) !important;
  border-color: transparent !important;
  color: var(--eol-primary-700) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--eol-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(37,99,235,.6);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: .45; background: transparent !important; color: var(--eol-muted) !important;
}

/* Dark mode para tablas */
.dark-mode .table thead th { color: #94a3b8; border-bottom-color: rgba(148,163,184,.28) !important; }
.dark-mode .table tbody td,
.dark-mode table.dataTable tbody td { border-bottom-color: rgba(148,163,184,.12) !important; }
.dark-mode .table tbody tr:hover,
.dark-mode table.dataTable tbody tr:hover { background: rgba(37,99,235,.14); }
.dark-mode .dataTables_wrapper .dataTables_length select,
.dark-mode .dataTables_wrapper .dataTables_filter input { background: #0f1c33; border-color: var(--eol-border); color: var(--eol-text); }
.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button { color: #cbd5e1 !important; }

/* =====================================================
   REPORTE DE VENTAS — Productos más vendidos (ranking)
   ===================================================== */
.top-prod-list { display: flex; flex-direction: column; }
.top-prod {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid #f1f5fa;
}
.top-prod:last-child { border-bottom: 0; }
.top-prod-rank {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .8rem;
  color: #fff;
  background: #cbd5e1;
  box-shadow: 0 1px 2px rgba(15,23,42,.12);
}
.top-prod-rank-1 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.top-prod-rank-2 { background: linear-gradient(135deg, #94a3b8, #cbd5e1); color: #334155; }
.top-prod-rank-3 { background: linear-gradient(135deg, #b45309, #d97706); }
.top-prod-img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 11px;
  border: 1px solid var(--eol-border);
  background: #fff;
  flex: 0 0 46px;
}
.top-prod-info { flex: 1 1 auto; min-width: 0; }
.top-prod-name {
  font-weight: 600;
  font-size: .86rem;
  color: var(--eol-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.top-prod-bar {
  height: 7px;
  background: #eef2f7;
  border-radius: 999px;
  overflow: hidden;
}
.top-prod-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--eol-primary), #60a5fa);
  transition: width .5s ease;
}
.top-prod-stats { flex: 0 0 auto; text-align: right; min-width: 66px; }
.top-prod-units { font-weight: 700; font-size: .82rem; color: var(--eol-text); }
.top-prod-pct { font-size: .72rem; color: var(--eol-muted); margin-top: 1px; }

.dark-mode .top-prod { border-bottom-color: rgba(148,163,184,.14); }
.dark-mode .top-prod-bar { background: #1e293b; }
.dark-mode .top-prod-img { background: #0f1c33; }

/* =====================================================
   ESTADÍSTICAS — leyenda de Ventas por categoría
   ===================================================== */
.rubro-legend { display: flex; flex-direction: column; }
.rubro-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 2px;
  border-bottom: 1px solid #f1f5fa;
  font-size: .85rem;
}
.rubro-item:last-child { border-bottom: 0; }
.rubro-dot { flex: 0 0 11px; width: 11px; height: 11px; border-radius: 4px; }
.rubro-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--eol-text);
  font-weight: 600;
}
.rubro-val { flex: 0 0 auto; color: var(--eol-text); font-variant-numeric: tabular-nums; }
.rubro-pct {
  flex: 0 0 46px;
  text-align: right;
  color: var(--eol-muted);
  font-size: .76rem;
  font-weight: 600;
}
.dark-mode .rubro-item { border-bottom-color: rgba(148,163,184,.14); }

/* =====================================================
   ESTADÍSTICAS — Cuentas corrientes (financiero)
   ===================================================== */
.fin-kpis { display: flex; flex-direction: column; gap: 12px; }
.fin-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--eol-radius);
  background: #f8fafc;
  border: 1px solid var(--eol-border);
}
.fin-kpi-ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
}
.fin-kpi-cobrar .fin-kpi-ico { background: linear-gradient(135deg, #059669, #10b981); }
.fin-kpi-pagar .fin-kpi-ico  { background: linear-gradient(135deg, #dc2626, #ef4444); }
.fin-pos .fin-kpi-ico        { background: linear-gradient(135deg, #2563EB, #3b82f6); }
.fin-neg .fin-kpi-ico        { background: linear-gradient(135deg, #b45309, #f59e0b); }
.fin-kpi-body { flex: 1 1 auto; min-width: 0; }
.fin-kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--eol-muted); font-weight: 600; }
.fin-kpi-val { font-size: 1.45rem; font-weight: 800; color: var(--eol-text); line-height: 1.15; }
.fin-kpi-cobrar .fin-kpi-val { color: #059669; }
.fin-kpi-pagar .fin-kpi-val  { color: #dc2626; }
.fin-neg .fin-kpi-val        { color: #b45309; }
.fin-kpi-sub { font-size: .76rem; color: var(--eol-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* avatar (inicial) y variante deuda del ranking */
.top-prod-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, #64748b, #94a3b8);
}
.top-prod--debt .top-prod-avatar { background: linear-gradient(135deg, #d97706, #f59e0b); }
.top-prod--debt .top-prod-bar > span { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.top-prod--debt .top-prod-units { color: #b45309; }

.dark-mode .fin-kpi { background: #0f1c33; }

/* =====================================================
   TARJETAS DE TOTALES (small-box) — estética moderna
   ===================================================== */
.small-box {
  border-radius: var(--eol-radius);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
  border: 0;
  overflow: hidden;
  position: relative;
}
.small-box > .inner { padding: 20px 22px; }
.small-box .inner h3 {
  font-size: 2rem !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 2px !important;
  line-height: 1.12 !important;
  text-align: left !important;
  text-shadow: none !important;
}
.small-box .inner p {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  opacity: .92;
  margin: 0;
}
.small-box .icon { top: 50%; transform: translateY(-50%); right: 16px; opacity: .16; }
.small-box .icon > i { font-size: 58px; }
.small-box:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, .12); transition: var(--eol-trans); }

/* Variantes de color con degradé suave (scopeadas a small-box) */
.small-box.bg-orange { background: linear-gradient(135deg, #f59e0b, #fb923c) !important; }
.small-box.bg-info   { background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important; }
.small-box.bg-green  { background: linear-gradient(135deg, #059669, #10b981) !important; }
.small-box.bg-red    { background: linear-gradient(135deg, #dc2626, #f87171) !important; }
.small-box.bg-orange, .small-box.bg-info, .small-box.bg-green, .small-box.bg-red { color: #fff !important; }
.small-box.bg-orange .inner h3, .small-box.bg-info .inner h3,
.small-box.bg-green .inner h3,  .small-box.bg-red .inner h3,
.small-box.bg-orange .inner p,  .small-box.bg-info .inner p,
.small-box.bg-green .inner p,   .small-box.bg-red .inner p { color: #fff !important; }

/* =====================================================
   PAGINACIÓN COMPACTA (markup Bootstrap de DataTables)
   Los números quedaban muy separados: se agrupan con gap chico y parejo.
   ===================================================== */
.dataTables_wrapper .dataTables_paginate ul.pagination {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
}
.dataTables_wrapper .dataTables_paginate .page-item,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  margin: 0 !important;
  padding: 0 !important;
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: .26rem .56rem !important;
  min-width: 30px;
  text-align: center;
  line-height: 1.4;
  color: var(--eol-text);
  background: transparent;
  transition: var(--eol-trans);
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
  background: var(--eol-primary-50);
  color: var(--eol-primary-700);
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background: var(--eol-primary) !important;
  border-color: var(--eol-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, .6);
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  opacity: .45;
  background: transparent;
}
.dark-mode .dataTables_wrapper .dataTables_paginate .page-item .page-link { color: #cbd5e1; }

/* =====================================================
   PATRIMONIO NETO — barras más gruesas y prolijas + iconos
   ===================================================== */
.pat-neto .progress {
  height: 22px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
  box-shadow: none;
  margin-bottom: 0;
}
.pat-neto .progress-bar {
  font-weight: 700;
  font-size: .76rem;
  line-height: 22px;
}
.pat-neto .table td { vertical-align: middle; }
.pat-neto .col-12.mb-2 .progress { height: 26px; }
.pn-ico { width: 18px; margin-right: 9px; text-align: center; }
.text-teal { color: #0d9488 !important; }
.dark-mode .pat-neto .progress { background: #1e293b; }

/* =====================================================
   ICONOS EMOJI en Rubros / Marcas
   ===================================================== */
.lista-emoji { font-size: 1.15rem; line-height: 1; margin-right: 2px; }
.emoji-input { font-size: 1.25rem !important; text-align: center; max-width: 90px; }

/* =====================================================
   DATOS PORTAL PÚBLICO — editor visual + vista previa
   ===================================================== */
.cotiz-preview-wrap { border: 1px dashed var(--eol-border); border-radius: var(--eol-radius-sm); padding: 10px 12px; background: #fafbfc; }
.cotiz-preview-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--eol-muted); font-weight: 700; margin-bottom: 6px; }
.cotiz-preview {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 34px;
  font-family: Arial, sans-serif;
  overflow-wrap: break-word;
}
.cotiz-preview:empty::before { content: 'Escribí arriba para ver la vista previa…'; color: #64748b; font-style: italic; font-family: 'Inter', sans-serif; }
.cotiz-preview a { color: #60a5fa; }
.emoji-picker { max-width: 190px; }
.note-editor.note-frame { border-radius: var(--eol-radius-sm); border-color: var(--eol-border); }
.dark-mode .cotiz-preview-wrap { background: #0f1c33; border-color: rgba(148,163,184,.2); }

/* =====================================================================
   ROBUSTEZ DE TABLAS ANTE ZOOM / TEXTO GRANDE
   Evita que las tablas se deformen/apreten: en vez de comprimir
   columnas, la tabla se desborda y aparece scroll horizontal dentro
   de la tarjeta.
   ===================================================================== */

/* El wrapper de DataTables permite scroll horizontal si la tabla no entra */
.dataTables_wrapper { overflow-x: auto; }

/* La tabla puede crecer con el contenido en vez de apretarse */
.card-body > .dataTables_wrapper > table.dataTable,
.card-body table.dataTable {
  min-width: 100%;
  width: auto;
}

/* =====================================================================
   SELECT2 — buscadores de clientes / proveedores (look del tema)
   ===================================================================== */
.select2-container--default .select2-selection--single {
  height: calc(2.25rem + 2px);
  border: 1px solid var(--eol-border);
  border-radius: var(--eol-radius-sm);
  display: flex;
  align-items: center;
  transition: var(--eol-trans);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  color: var(--eol-text);
  padding-left: .75rem;
  padding-right: 2rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--eol-muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 8px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--eol-primary);
  box-shadow: 0 0 0 3px var(--eol-primary-100);
}
.select2-dropdown {
  border-color: var(--eol-border);
  border-radius: var(--eol-radius-sm);
  box-shadow: var(--eol-shadow);
  overflow: hidden;
}
.select2-search--dropdown .select2-search__field {
  border-radius: 8px;
  border: 1px solid var(--eol-border);
  padding: .4rem .6rem;
  outline: none;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--eol-primary);
  box-shadow: 0 0 0 3px var(--eol-primary-100);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--eol-primary); }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--eol-primary-50); color: var(--eol-text); }

.dark-mode .select2-container--default .select2-selection--single { background: #111c33; border-color: var(--eol-border); }
.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--eol-text); }
.dark-mode .select2-dropdown { background: var(--eol-surface); border-color: var(--eol-border); }
.dark-mode .select2-search--dropdown .select2-search__field { background: #111c33; border-color: var(--eol-border); color: var(--eol-text); }
.dark-mode .select2-container--default .select2-results__option { color: var(--eol-text); }
.dark-mode .select2-container--default .select2-results__option[aria-selected=true] { background: rgba(37,99,235,.16); }

/* =====================================================================
   BOTONES UNIFICADOS — barra de acciones (Opción B)
   Todos sólidos y redondeados; las exportaciones conservan su color de
   marca: Imprimir=azul, Excel=verde, PDF=rojo, WhatsApp=verde WhatsApp.
   Aplica a TODO el sistema vía las clases que DataTables agrega a los
   botones (.buttons-print / .buttons-excel / .buttons-pdf).
   ===================================================================== */
.dt-buttons .btn,
.dt-buttons .dt-button {
  border-radius: var(--eol-radius-sm) !important;
  font-weight: 600;
  margin: 0 .4rem 0 0;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: var(--eol-shadow-sm);
  transition: var(--eol-trans);
}
.dt-buttons .btn:last-child,
.dt-buttons .dt-button:last-child { margin-right: 0; }
.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover { transform: translateY(-1px); }
.dt-buttons .btn i,
.dt-buttons .dt-button i { margin-right: .35rem; }

/* Imprimir → azul primario */
.dt-buttons .buttons-print,
.btn-eol-print {
  background: var(--eol-primary) !important;
  border-color: var(--eol-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -4px rgba(37,99,235,.5) !important;
}
.dt-buttons .buttons-print:hover,
.btn-eol-print:hover { background: var(--eol-primary-600) !important; border-color: var(--eol-primary-600) !important; }

/* Excel → verde */
.dt-buttons .buttons-excel,
.btn-eol-excel {
  background: #1D6F42 !important;
  border-color: #1D6F42 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -4px rgba(29,111,66,.5) !important;
}
.dt-buttons .buttons-excel:hover,
.btn-eol-excel:hover { background: #165536 !important; border-color: #165536 !important; }

/* PDF → rojo */
.dt-buttons .buttons-pdf,
.btn-eol-pdf {
  background: #D32F2F !important;
  border-color: #D32F2F !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -4px rgba(211,47,47,.5) !important;
}
.dt-buttons .buttons-pdf:hover,
.btn-eol-pdf:hover { background: #B71C1C !important; border-color: #B71C1C !important; }

/* WhatsApp → verde WhatsApp */
.dt-buttons .buttons-whatsapp,
.btn-whatsapp,
.btn-eol-whatsapp {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #0b3d1f !important;
  box-shadow: 0 4px 14px -4px rgba(37,211,102,.5) !important;
}
.dt-buttons .buttons-whatsapp:hover,
.btn-whatsapp:hover,
.btn-eol-whatsapp:hover { background: #1EBE5A !important; border-color: #1EBE5A !important; color: #0b3d1f !important; }

/* =====================================================================
   MENÚ DE USUARIO / CERRAR SESIÓN — versión moderna
   ===================================================================== */
.user-menu > .dropdown-menu {
  border: none;
  border-radius: var(--eol-radius);
  box-shadow: 0 20px 50px -18px rgba(15,23,42,.45);
  padding: 0;
  min-width: 260px;
  overflow: hidden;
}
.user-menu > .dropdown-menu > .user-header {
  height: auto;
  padding: 1.4rem 1rem 1.1rem;
  background: linear-gradient(180deg, var(--eol-primary) 0%, var(--eol-primary-700) 100%);
  text-align: center;
}
.user-menu > .dropdown-menu > .user-header img {
  width: 82px; height: 82px;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.5);
}
.user-menu > .dropdown-menu > .user-header p {
  color: #fff; font-weight: 700; font-size: 1rem; margin-top: .6rem;
}
.user-menu > .dropdown-menu > .user-header span { color: rgba(255,255,255,.85); font-size: .82rem; }
.user-menu > .dropdown-menu > .user-footer {
  background: var(--eol-surface);
  padding: .85rem 1rem;
  border-top: 1px solid var(--eol-border);
}
.user-menu > .dropdown-menu > .user-footer .btn-salir {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  padding: .55rem 1rem;
  font-weight: 600;
  color: #fff;
  background: #DC2626;
  border: 1px solid #DC2626;
  box-shadow: 0 4px 14px -4px rgba(220,38,38,.5);
  transition: var(--eol-trans);
}
.user-menu > .dropdown-menu > .user-footer .btn-salir:hover {
  background: #B91C1C;
  border-color: #B91C1C;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -8px rgba(220,38,38,.6);
}
.dark-mode .user-menu > .dropdown-menu > .user-footer { background: var(--eol-surface); border-top-color: var(--eol-border); }

/* =====================================================================
   SELECT2 clientes/proveedores: ESCRIBIR DIRECTO EN EL CAMPO
   Al abrir, el buscador se superpone sobre el propio campo (no aparece
   una cajita aparte debajo). Solo aplica a los selects con la clase
   eol-cp-select2 (clientes/proveedores), no al resto.
   ===================================================================== */
/* Oculta el campo entero mientras está abierto: el buscador del dropdown
   ocupa exactamente su lugar (una sola caja, se escribe "en el campo") */
.select2-container--open.eol-cp-select2 .select2-selection--single {
  visibility: hidden;
}
/* El dropdown se sube para tapar el campo cuando abre hacia abajo */
.eol-cp-select2-dd.select2-dropdown {
  border: 1px solid var(--eol-primary);
  box-shadow: 0 0 0 3px var(--eol-primary-100), var(--eol-shadow);
  border-radius: var(--eol-radius-sm);
}
.eol-cp-select2-dd.select2-dropdown--below {
  margin-top: calc(-2.25rem - 2px);
}
.eol-cp-select2-dd .select2-search--dropdown {
  padding: 0;
}
.eol-cp-select2-dd .select2-search--dropdown .select2-search__field {
  height: calc(2.25rem + 2px);
  border: none;
  border-bottom: 1px solid var(--eol-border);
  border-radius: var(--eol-radius-sm) var(--eol-radius-sm) 0 0;
  box-shadow: none;
  padding: 0 .75rem;
  outline: none;
  font-size: 1rem;
}
.eol-cp-select2-dd .select2-results { padding: 4px 0; }
.dark-mode .eol-cp-select2-dd .select2-search--dropdown .select2-search__field { border-bottom-color: var(--eol-border); }