/* ==========================================================
   FACTURACION — Custom UI Design System
   Autor: Sistema Propio — Sin dependencias de plantillas externas
   ========================================================== */

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

/* ── Variables ───────────────────────────────────────────── */
:root {
  /* Brand */
  --primary:        #4f46e5;
  --primary-hover:  #4338ca;
  --primary-light:  #eef2ff;
  --accent:         #06b6d4;
  --success:        #10b981;
  --warning:        #f59e0b;
  --danger:         #ef4444;
  --info:           #3b82f6;

  /* Sidebar */
  --sidebar-w:        260px;
  --sidebar-mini-w:   72px;
  --sidebar-bg:       #0f172a;
  --sidebar-text:     #94a3b8;
  --sidebar-hover:    rgba(255,255,255,.06);
  --sidebar-active-bg: rgba(79,70,229,.20);
  --sidebar-active-text: #818cf8;
  --sidebar-border:   rgba(255,255,255,.06);

  /* Topbar */
  --topbar-h:       64px;
  --topbar-bg:      #ffffff;
  --topbar-shadow:  0 1px 0 0 #e2e8f0, 0 2px 8px rgba(0,0,0,.04);

  /* Content */
  --content-bg:     #f1f5f9;
  --card-bg:        #ffffff;
  --card-radius:    14px;
  --card-shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);

  /* Typography */
  --font:           'Inter', system-ui, sans-serif;
  --text-primary:   #0f172a;
  --text-muted:     #64748b;
  --text-light:     #94a3b8;

  /* Transitions */
  --ease:           cubic-bezier(.4,0,.2,1);
  --duration:       220ms;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  font-family:    var(--font);
  background:     var(--content-bg);
  color:          var(--text-primary);
  line-height:    1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }

/* ── Layout Shell ────────────────────────────────────────── */
#app-wrapper {
  display:    flex;
  min-height: 100vh;
  width:      100%;
  overflow-x: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar {
  position:   fixed;
  top:        0;
  left:       0;
  width:      var(--sidebar-w);
  height:     100vh;
  background: var(--sidebar-bg);
  display:    flex;
  flex-direction: column;
  z-index:    1000;
  transition: width var(--duration) var(--ease);
  overflow:   hidden;
}

/* Brand */
.sidebar-brand {
  display:        flex;
  align-items:    center;
  gap:            12px;
  padding:        0 20px;
  height:         var(--topbar-h);
  min-height:     var(--topbar-h);
  border-bottom:  1px solid var(--sidebar-border);
  flex-shrink:    0;
}
.sidebar-brand img {
  width:  36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
}
.sidebar-brand-text {
  font-size:     1.05rem;
  font-weight:   700;
  color:         #f8fafc;
  white-space:   nowrap;
  overflow:      hidden;
  transition:    opacity var(--duration) var(--ease), width var(--duration) var(--ease);
}

/* User card */
.sidebar-user {
  display:        flex;
  align-items:    center;
  gap:            12px;
  padding:        16px 20px;
  border-bottom:  1px solid var(--sidebar-border);
  flex-shrink:    0;
}
.sidebar-user img {
  width:        40px;
  height:       40px;
  border-radius:50%;
  object-fit:   cover;
  flex-shrink:  0;
  border:       2px solid var(--primary);
}
.sidebar-user-info {
  overflow: hidden;
}
.sidebar-user-name {
  font-size:   .85rem;
  font-weight: 600;
  color:       #f1f5f9;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size:   .72rem;
  color:       var(--accent);
  font-weight: 500;
  white-space: nowrap;
}

/* Nav */
.sidebar-nav {
  flex:       1;
  overflow-y: auto;
  overflow-x: hidden;
  padding:    12px 0 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.nav-section-label {
  font-size:      .68rem;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--text-light);
  padding:        16px 22px 6px;
  white-space:    nowrap;
  overflow:       hidden;
  transition:     opacity var(--duration) var(--ease);
}

.nav-item { list-style: none; }

.nav-link {
  display:      flex;
  align-items:  center;
  gap:          12px;
  padding:      10px 20px;
  border-radius: 10px;
  margin:       2px 10px;
  color:        var(--sidebar-text);
  font-size:    .875rem;
  font-weight:  500;
  cursor:       pointer;
  transition:   background var(--duration) var(--ease),
                color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
  white-space:  nowrap;
  position:     relative;
}
.nav-link:hover,
.nav-link:focus {
  background: var(--sidebar-hover);
  color:      #e2e8f0;
}
.nav-link.active,
.nav-link[aria-current="page"] {
  background: var(--sidebar-active-bg);
  color:      var(--sidebar-active-text);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.3);
}
.nav-link i, .nav-link svg {
  font-size:  1.1rem;
  flex-shrink: 0;
  width:      20px;
  text-align: center;
}
.nav-link-text {
  white-space: nowrap;
  overflow:    hidden;
  transition:  opacity var(--duration) var(--ease);
}

/* Submenu */
.nav-has-sub .nav-link::after {
  content:     '\f282';
  font-family: 'bootstrap-icons';
  margin-left: auto;
  font-size:   .75rem;
  transition:  transform var(--duration) var(--ease);
  flex-shrink: 0;
}
.nav-has-sub.open > .nav-link {
  color: #e2e8f0;
}
.nav-has-sub.open > .nav-link::after {
  transform: rotate(90deg);
}
.nav-sub {
  list-style: none;
  max-height: 0;
  overflow:   hidden;
  transition: max-height .3s var(--ease);
}
.nav-has-sub.open > .nav-sub {
  max-height: 600px;
}
.nav-sub .nav-link {
  font-size:   .82rem;
  padding:     8px 20px 8px 52px;
  margin:      1px 10px;
  font-weight: 400;
}
.nav-sub .nav-link i { font-size: .9rem; }

/* ── Mini Sidebar ────────────────────────────────────────── */
#app-wrapper.sidebar-mini #sidebar {
  width: var(--sidebar-mini-w);
}
#app-wrapper.sidebar-mini .sidebar-brand-text,
#app-wrapper.sidebar-mini .sidebar-user-info,
#app-wrapper.sidebar-mini .nav-link-text,
#app-wrapper.sidebar-mini .nav-section-label,
#app-wrapper.sidebar-mini .nav-has-sub .nav-link::after {
  opacity: 0;
  pointer-events: none;
  width: 0;
}
#app-wrapper.sidebar-mini .sidebar-user { justify-content: center; }
#app-wrapper.sidebar-mini .nav-link { margin: 2px 8px; justify-content: center; padding: 10px; }
#app-wrapper.sidebar-mini .nav-sub .nav-link { padding: 10px; }

/* ── Main content area ───────────────────────────────────── */
#main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--duration) var(--ease);
  min-width: 0;
  overflow-x: hidden;
}
#app-wrapper.sidebar-mini #main-content {
  margin-left: var(--sidebar-mini-w);
}

/* ── Topbar ──────────────────────────────────────────────── */
#topbar {
  position:    sticky;
  top:         0;
  z-index:     900;
  height:      var(--topbar-h);
  background:  var(--topbar-bg);
  box-shadow:  var(--topbar-shadow);
  display:     flex;
  align-items: center;
  padding:     0 24px;
  gap:         16px;
  flex-shrink: 0;
}

.topbar-toggle {
  background: none;
  border:     none;
  cursor:     pointer;
  width:      38px;
  height:     38px;
  border-radius: 10px;
  display:    flex;
  align-items:center;
  justify-content: center;
  color:      var(--text-muted);
  font-size:  1.2rem;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
  flex-shrink: 0;
}
.topbar-toggle:hover { background: #f1f5f9; color: var(--primary); }

.topbar-search {
  flex:        1;
  max-width:   380px;
}
.topbar-search-inner {
  display:     flex;
  align-items: center;
  gap:         8px;
  background:  #f8fafc;
  border:      1.5px solid #e2e8f0;
  border-radius: 10px;
  padding:     7px 14px;
  transition:  border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.topbar-search-inner:focus-within {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(79,70,229,.12);
}
.topbar-search-inner i { color: var(--text-muted); font-size: .95rem; }
.topbar-search-inner input {
  border:      none;
  background:  transparent;
  font-family: var(--font);
  font-size:   .875rem;
  color:       var(--text-primary);
  outline:     none;
  width:       100%;
}
.topbar-search-inner input::placeholder { color: var(--text-light); }

.topbar-spacer { flex: 1; }

/* Topbar actions */
.topbar-actions {
  display:     flex;
  align-items: center;
  gap:         6px;
}
.topbar-btn {
  position:   relative;
  background: none;
  border:     none;
  cursor:     pointer;
  width:      40px;
  height:     40px;
  display:    flex;
  align-items:center;
  justify-content: center;
  border-radius: 10px;
  color:      var(--text-muted);
  font-size:  1.15rem;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.topbar-btn:hover { background: #f1f5f9; color: var(--primary); }
.topbar-badge {
  position:    absolute;
  top:         6px;
  right:       6px;
  width:       8px;
  height:      8px;
  border-radius: 50%;
  background:  var(--danger);
  border:      2px solid #fff;
}

/* Plan link */
.topbar-plan-link {
  display:      flex;
  align-items:  center;
  gap:          6px;
  font-size:    .82rem;
  font-weight:  600;
  color:        var(--warning);
  padding:      7px 14px;
  border-radius: 10px;
  border:       1.5px solid rgba(245,158,11,.3);
  background:   rgba(245,158,11,.07);
  transition:   background var(--duration) var(--ease);
  white-space:  nowrap;
}
.topbar-plan-link:hover { background: rgba(245,158,11,.14); }

/* User avatar dropdown */
.topbar-user {
  display:     flex;
  align-items: center;
  gap:         10px;
  cursor:      pointer;
  padding:     5px 10px 5px 5px;
  border-radius: 12px;
  border:      1.5px solid transparent;
  transition:  border-color var(--duration) var(--ease),
               background var(--duration) var(--ease);
}
.topbar-user:hover { background: #f1f5f9; border-color: #e2e8f0; }
.topbar-user img {
  width:  36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-light);
}
.topbar-user-name {
  font-size:   .82rem;
  font-weight: 600;
  color:       var(--text-primary);
}

/* ── Plan expired banner ─────────────────────────────────── */
.plan-expired-bar {
  background:  linear-gradient(90deg, #dc2626, #ef4444);
  color:       #fff;
  text-align:  center;
  font-size:   .83rem;
  font-weight: 600;
  padding:     10px 24px;
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         8px;
}
.plan-expired-bar a { color: #fef9c3; text-decoration: underline; }

/* ── Page content ────────────────────────────────────────── */
.page-content {
  flex:       1;
  padding:    28px 28px;
  /* Evita que tablas anchas desborden el layout horizontalmente */
  overflow-x: hidden;
  min-width:  0;
}

/* Contención de overflow en la tarjeta principal de cada vista */
.page-content .card {
  min-width: 0;
  overflow:  hidden;
}

/* Fix estructural: Evita el desborde (bleeding) cuando un .card se coloca directamente dentro de un .row sin usar .col-12 */
.row:has(> .card) {
  margin-left:  0 !important;
  margin-right: 0 !important;
}
.row > .card {
  width: 100%;
}

/* Permitir scroll solo cuando explicitly usamos scrollX en DataTables (como en productos) */
.page-content .dataTables_scrollBody {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Anulamos el overflow horizontal en los wrappers para que DataTables Responsive SÍ colapse las columnas en móviles */
/* Excluimos .invoice-scroll que es la tabla manual de ítems de factura */
.page-content .table-responsive:not(.invoice-scroll),
.page-content .dataTables_wrapper .dt-scroll {
  overflow-x: visible !important;
}

/* Tabla de ítems de factura: scroll horizontal en móvil */
.page-content .invoice-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  display: block;
}

/* DataTables scrollX: forzar que el wrapper no expanda la tarjeta */
.dataTables_wrapper {
  min-width: 0;
  overflow:  hidden;
}
/* ── Cards ───────────────────────────────────────────────── */
.card {
  background:    var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow:    var(--card-shadow);
  border:        none;
  max-width:     100%;
  overflow:      hidden;
}
.card-header {
  background:    transparent;
  border-bottom: 1px solid #f1f5f9;
  padding:       18px 22px;
  font-weight:   600;
  font-size:     .95rem;
  color:         var(--text-primary);
  display:       flex;
  align-items:   center;
  gap:           8px;
}
.card-body { padding: 22px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  font-family: var(--font);
  font-weight: 500;
  font-size:   .875rem;
  border:      none;
  border-radius: 9px;
  padding:     8px 18px;
  cursor:      pointer;
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  transition:  background var(--duration) var(--ease),
               transform  .1s var(--ease),
               box-shadow var(--duration) var(--ease);
}
.btn:active { transform: scale(.97); }

.btn-primary   { background: var(--primary);  color: #fff; }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 4px 14px rgba(79,70,229,.35); }
.btn-success   { background: var(--success);  color: #fff; }
.btn-success:hover { background: #059669; box-shadow: 0 4px 14px rgba(16,185,129,.35); }
.btn-danger    { background: var(--danger);   color: #fff; }
.btn-danger:hover  { background: #dc2626; }
.btn-warning   { background: var(--warning);  color: #fff; }
.btn-info      { background: var(--info);     color: #fff; }
.btn-light     { background: #f1f5f9; color: var(--text-muted); }
.btn-light:hover { background: #e2e8f0; }
.btn-outline-primary {
  background: transparent;
  color:      var(--primary);
  border:     1.5px solid var(--primary);
}
.btn-outline-primary:hover { background: var(--primary-light); }
.btn-sm { padding: 5px 12px; font-size: .8rem; border-radius: 7px; }
.btn-lg { padding: 12px 28px; font-size: 1rem; border-radius: 12px; }

/* ── Forms ───────────────────────────────────────────────── */
.form-label {
  font-size:   .82rem;
  font-weight: 500;
  color:       var(--text-primary);
  margin-bottom: 5px;
  display:     block;
}
.form-control,
.form-select {
  font-family: var(--font);
  font-size:   .875rem;
  color:       var(--text-primary);
  background:  #f8fafc;
  border:      1.5px solid #e2e8f0;
  border-radius: 9px;
  padding:     9px 13px;
  width:       100%;
  transition:  border-color var(--duration) var(--ease),
               box-shadow   var(--duration) var(--ease);
}
.form-control:focus,
.form-select:focus {
  outline:      none;
  border-color: var(--primary);
  background:   #fff;
  box-shadow:   0 0 0 3px rgba(79,70,229,.12);
}
.form-control::placeholder { color: var(--text-light); }
.input-group { position: relative; display: flex; }
.input-group .form-control { border-radius: 0 9px 9px 0; }
.input-group-text {
  display:      flex;
  align-items:  center;
  padding:      9px 14px;
  background:   #f1f5f9;
  border:       1.5px solid #e2e8f0;
  border-right: none;
  border-radius: 9px 0 0 9px;
  color:        var(--text-muted);
  font-size:    .95rem;
}

/* ── Tables ──────────────────────────────────────────────── */
.table-responsive { 
  overflow-x: auto !important; 
  -webkit-overflow-scrolling: touch;
  width: 100%;
  margin-bottom: 1rem;
}
.table-responsive::-webkit-scrollbar {
  height: 8px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.table-wrapper { overflow-x: auto; }
table.dataTable,
.table {
  width:       100%;
  font-size:   .875rem;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th,
.table tbody td {
  white-space:   nowrap;
  padding:       12px 16px;
}
.table thead th {
  background:    #f8fafc;
  color:         var(--text-muted);
  font-size:     .75rem;
  font-weight:   600;
  letter-spacing:.04em;
  text-transform: uppercase;
  border-bottom: 1.5px solid #e2e8f0;
}
.table tbody td {
  border-bottom: 1px solid #f1f5f9;
  color:       var(--text-primary);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: #fafbff; }

.table tbody tr:hover td { background: #fafbff; }

/* Ensure Actions column fits tightly to its contents (buttons) */
.table td:has(.dropdown),
.table th:has(+ td:has(.dropdown)) { /* Fallback for some engines, though td rule usually suffices */
  width: 1%;
  white-space: nowrap;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   .72rem;
  font-weight: 600;
  padding:     4px 10px;
  border-radius: 999px;
  font-family: var(--font);
}
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-info    { background: #dbeafe; color: #1e40af; }
.badge-muted   { background: #f1f5f9; color: var(--text-muted); }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
  border:      none;
  border-radius: 10px;
  padding:     14px 18px;
  font-size:   .875rem;
  display:     flex;
  align-items: center;
  gap:         10px;
}
.alert-success { background: #d1fae5; color: #065f46; }
.alert-danger  { background: #fee2e2; color: #991b1b; }
.alert-warning { background: #fef3c7; color: #92400e; }
.alert-info    { background: #dbeafe; color: #1e40af; }

/* ── Dropdown ────────────────────────────────────────────── */
.dropdown-menu {
  border:        none;
  border-radius: 14px;
  box-shadow:    0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
  padding:       8px;
  font-family:   var(--font);
  font-size:     .875rem;
  min-width:     200px;
  animation:     dropDown .15s var(--ease);
}
@keyframes dropDown {
  from { opacity: 0; margin-top: -6px; }
  to   { opacity: 1; margin-top: 0; }
}
.dropdown-item {
  border-radius: 8px;
  padding:       9px 14px;
  color:         var(--text-primary);
  display:       flex;
  align-items:   center;
  gap:           9px;
  font-weight:   500;
  transition:    background var(--duration) var(--ease);
}
.dropdown-item:hover { background: #f1f5f9; }
.dropdown-item.text-danger:hover { background: #fee2e2; color: #dc2626; }
.dropdown-divider { margin: 6px 0; border-color: #f1f5f9; }
.dropdown-header { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); padding: 8px 14px 4px; }

/* ── Responsive Table Actions (Desktop vs Mobile) ────────── */
@media (min-width: 992px) {
  /* Hide the 3-dots trigger button on desktop */
  .table .dropdown > .action-menu-btn {
    display: none !important;
  }
  
  /* Flatten the dropdown menu into a row of buttons on desktop */
  .table .dropdown > .dropdown-menu {
    display: flex !important;
    position: static !important;
    flex-direction: row;
    gap: 6px;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    justify-content: center;
    margin: 0 !important;
  }
  
  .table .dropdown > .dropdown-menu > li {
    display: block;
  }
  
  /* Hide dividers on desktop */
  .table .dropdown > .dropdown-menu .dropdown-divider {
    display: none !important;
  }
  
  /* Style the dropdown items as proper buttons on desktop */
  .table .dropdown > .dropdown-menu .dropdown-item {
    padding: 7px 14px !important;
    border-radius: 9px !important;
    font-size: 0.82rem !important;
    font-weight: 600;
    width: auto !important;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Specific styling for primary (Editar/Ver) */
  .table .dropdown > .dropdown-menu .dropdown-item.text-primary {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 2px 6px rgba(79,70,229,0.2) !important;
  }
  .table .dropdown > .dropdown-menu .dropdown-item.text-primary i {
    color: #ffffff !important;
    font-size: 0.95rem;
    transition: transform 0.2s ease;
  }
  .table .dropdown > .dropdown-menu .dropdown-item.text-primary:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    box-shadow: 0 4px 12px rgba(79,70,229,0.3) !important;
    transform: translateY(-1px);
  }
  .table .dropdown > .dropdown-menu .dropdown-item.text-primary:hover i {
    transform: scale(1.15);
  }
  
  /* Specific styling for danger (Eliminar) */
  .table .dropdown > .dropdown-menu .dropdown-item.text-danger {
    background: var(--danger) !important;
    color: #ffffff !important;
    border-color: var(--danger) !important;
    box-shadow: 0 2px 6px rgba(239,68,68,0.2) !important;
  }
  .table .dropdown > .dropdown-menu .dropdown-item.text-danger i {
    color: #ffffff !important;
    font-size: 0.95rem;
    transition: transform 0.2s ease;
  }
  .table .dropdown > .dropdown-menu .dropdown-item.text-danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    box-shadow: 0 4px 12px rgba(239,68,68,0.3) !important;
    transform: translateY(-1px);
  }
  .table .dropdown > .dropdown-menu .dropdown-item.text-danger:hover i {
    transform: scale(1.15);
  }

  /* Specific styling for warning (Modificar/Alertas) */
  .table .dropdown > .dropdown-menu .dropdown-item.text-warning {
    background: var(--warning) !important;
    color: #ffffff !important;
    border-color: var(--warning) !important;
    box-shadow: 0 2px 6px rgba(245,158,11,0.2) !important;
  }
  .table .dropdown > .dropdown-menu .dropdown-item.text-warning i {
    color: #ffffff !important;
    font-size: 0.95rem;
    transition: transform 0.2s ease;
  }
  .table .dropdown > .dropdown-menu .dropdown-item.text-warning:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
    box-shadow: 0 4px 12px rgba(245,158,11,0.3) !important;
    transform: translateY(-1px);
  }
  .table .dropdown > .dropdown-menu .dropdown-item.text-warning:hover i {
    transform: scale(1.15);
  }

  /* Specific styling for success (Aprobar/Activar) */
  .table .dropdown > .dropdown-menu .dropdown-item.text-success {
    background: var(--success) !important;
    color: #ffffff !important;
    border-color: var(--success) !important;
    box-shadow: 0 2px 6px rgba(16,185,129,0.2) !important;
  }
  .table .dropdown > .dropdown-menu .dropdown-item.text-success i {
    color: #ffffff !important;
    font-size: 0.95rem;
    transition: transform 0.2s ease;
  }
  .table .dropdown > .dropdown-menu .dropdown-item.text-success:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    box-shadow: 0 4px 12px rgba(16,185,129,0.3) !important;
    transform: translateY(-1px);
  }
  .table .dropdown > .dropdown-menu .dropdown-item.text-success:hover i {
    transform: scale(1.15);
  }
}

/* ── Page header helper ──────────────────────────────────── */
.page-title {
  font-size:   1.35rem;
  font-weight: 700;
  color:       var(--text-primary);
  margin-bottom: 4px;
}
.page-subtitle {
  font-size:  .875rem;
  color:      var(--text-muted);
  margin-bottom: 24px;
}
.page-header {
  display:        flex;
  align-items:    flex-start;
  justify-content: space-between;
  flex-wrap:      wrap;
  gap:            12px;
  margin-bottom:  24px;
}

/* ── Stat cards ──────────────────────────────────────────── */
.stat-card {
  background:    var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow:    var(--card-shadow);
  padding:       22px 24px;
  display:       flex;
  align-items:   flex-start;
  gap:           16px;
}
.stat-icon {
  width:         52px;
  height:        52px;
  border-radius: 14px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.4rem;
  flex-shrink:   0;
}
.stat-icon-primary { background: var(--primary-light); color: var(--primary); }
.stat-icon-success { background: #d1fae5; color: var(--success); }
.stat-icon-warning { background: #fef3c7; color: var(--warning); }
.stat-icon-danger  { background: #fee2e2; color: var(--danger); }
.stat-value {
  font-size:   1.6rem;
  font-weight: 700;
  color:       var(--text-primary);
  line-height: 1.2;
}
.stat-label {
  font-size:   .8rem;
  color:       var(--text-muted);
  font-weight: 500;
}

/* ── Preloader ───────────────────────────────────────────── */
.preloader {
  position:   fixed;
  inset:      0;
  background: var(--sidebar-bg);
  display:    flex;
  align-items:center;
  justify-content: center;
  z-index:    99999;
  transition: opacity .4s ease, visibility .4s ease;
}
.preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.spinner {
  width:  44px;
  height: 44px;
  border: 3.5px solid rgba(255,255,255,.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Footer ──────────────────────────────────────────────── */
.main-footer {
  padding:     16px 28px;
  font-size:   .78rem;
  color:       var(--text-light);
  border-top:  1px solid #e2e8f0;
  text-align:  center;
}
.main-footer a { color: var(--primary); }
.main-footer a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
  #sidebar {
    transform: translateX(-100%);
    width:     var(--sidebar-w) !important;
    transition: transform var(--duration) var(--ease);
  }
  #app-wrapper.sidebar-mobile-open #sidebar {
    transform: translateX(0);
  }
  #main-content {
    margin-left: 0 !important;
  }
  .sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.45);
    z-index:    999;
  }
  #app-wrapper.sidebar-mobile-open .sidebar-overlay { display: block; }
  .topbar-search { display: none; }
}

@media (max-width: 576px) {
  .page-content { padding: 18px 16px; }
  .topbar-plan-link span { display: none; }
}

/* ===========================================================
   DATATABLES — Estilos personalizados
   =========================================================== */

/* Wrapper general */
.dataTables_wrapper {
  font-family:   var(--font);
  font-size:     .875rem;
  color:         var(--text-primary);
}

/* ── Top bar: length + search ─────────────────────────────── */
.dt-top-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
  padding:         14px 0 14px;
}

/* Length select */
.dt-length label,
.dataTables_length label {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   .82rem;
  font-weight: 500;
  color:       var(--text-muted);
  margin:      0;
}
.dt-length select,
.dataTables_length select {
  font-family:   var(--font);
  font-size:     .82rem;
  color:         var(--text-primary);
  background:    #f8fafc;
  border:        1.5px solid #e2e8f0;
  border-radius: 8px;
  padding:       5px 10px;
  cursor:        pointer;
  outline:       none;
  transition:    border-color var(--duration) var(--ease);
}
.dt-length select:focus,
.dataTables_length select:focus {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(79,70,229,.1);
}

/* Search input */
.dt-search,
.dataTables_filter {
  display:     flex;
  align-items: center;
}
.dt-search label,
.dataTables_filter label {
  position:    relative;
  display:     flex;
  align-items: center;
  margin:      0;
}
.dt-search label::before,
.dataTables_filter label::before {
  content:     '\f52a';
  font-family: 'bootstrap-icons';
  position:    absolute;
  left:        12px;
  color:       var(--text-light);
  font-size:   .9rem;
  pointer-events: none;
}
.dt-search input,
.dataTables_filter input {
  font-family:   var(--font);
  font-size:     .875rem;
  color:         var(--text-primary);
  background:    #f8fafc;
  border:        1.5px solid #e2e8f0;
  border-radius: 10px;
  padding:       8px 14px 8px 36px;
  min-width:     220px;
  outline:       none;
  transition:    border-color var(--duration) var(--ease),
                 box-shadow   var(--duration) var(--ease);
}
.dt-search input:focus,
.dataTables_filter input:focus {
  border-color: var(--primary);
  background:   #fff;
  box-shadow:   0 0 0 3px rgba(79,70,229,.1);
}
.dt-search input::placeholder,
.dataTables_filter input::placeholder { color: var(--text-light); }

/* ── Scroll area ──────────────────────────────────────────── */
.dt-scroll { overflow-x: auto; }

/* Estilos globales para forzar scroll horizontal de DataTables en móviles */
.dataTables_wrapper {
  width: 100%;
  overflow: hidden;
}
.dataTables_scrollBody {
  overflow-x: auto !important;
}

/* ── Table inside DataTables ──────────────────────────────── */
table.dataTable {
  width:            100%;
  border-collapse:  separate !important;
  border-spacing:   0 !important;
  margin:           0 !important;
}
table.dataTable thead th,
table.dataTable thead td {
  background:    #f8fafc;
  color:         var(--text-muted);
  font-size:     .73rem;
  font-weight:   600;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:       12px 16px;
  border-bottom: 1.5px solid #e2e8f0 !important;
  border-top:    none !important;
  white-space:   nowrap;
  cursor:        pointer;
  user-select:   none;
}
/* Sort arrows */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  font-family: 'bootstrap-icons';
  font-size:   .75rem;
  margin-left: 6px;
  opacity:     .5;
}
table.dataTable thead th.sorting::after        { content: '\f127'; }
table.dataTable thead th.sorting_asc::after    { content: '\f148'; opacity: 1; color: var(--primary); }
table.dataTable thead th.sorting_desc::after   { content: '\f145'; opacity: 1; color: var(--primary); }

/* Body rows */
table.dataTable tbody td {
  padding:       11px 16px;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle;
  color:         var(--text-primary);
}
table.dataTable tbody tr:last-child td { border-bottom: none !important; }
table.dataTable tbody tr:hover td {
  background: #fafbff !important;
}
table.dataTable tbody tr.odd td  { background: #ffffff; }
table.dataTable tbody tr.even td { background: #fafbff; }

/* ── Bottom bar: info + paging ────────────────────────────── */
.dt-bottom-bar,
.dataTables_wrapper .row:last-child {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             10px;
  padding:         14px 0 4px;
}

/* Info text */
.dt-info,
.dataTables_info {
  font-size:  .8rem;
  color:      var(--text-muted);
  font-weight:500;
}

/* Pagination */
.dt-paging,
.dataTables_paginate {
  display: flex;
  align-items: center;
}
.dataTables_paginate .paginate_button {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-width:     34px;
  height:        34px;
  padding:       0 8px;
  margin:        0 2px;
  border-radius: 8px;
  font-size:     .82rem;
  font-weight:   500;
  cursor:        pointer;
  border:        1.5px solid transparent;
  color:         var(--text-muted) !important;
  background:    transparent;
  transition:    background var(--duration) var(--ease),
                 border-color var(--duration) var(--ease),
                 color var(--duration) var(--ease);
  text-decoration: none !important;
  box-shadow:    none !important;
}
.dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
  background:    #f1f5f9 !important;
  color:         var(--primary) !important;
  border-color:  #e2e8f0;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background:   var(--primary) !important;
  color:        #fff !important;
  border-color: var(--primary) !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  opacity: .35;
  cursor:  not-allowed;
}

/* ── No results ───────────────────────────────────────────── */
table.dataTable tbody td.dataTables_empty {
  text-align:  center;
  color:       var(--text-light);
  font-size:   .875rem;
  padding:     40px 16px;
}

/* ── Responsive DataTables detail row ────────────────────── */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  background-color: var(--primary) !important;
}


/* ── Menú de Acciones en Tablas ────────────────────────── */
.action-menu-btn {
    transition: all 0.18s ease;
    font-weight: 500;
}

.action-menu-btn:hover {
    background-color: #f1f3f5;
    border-color: #adb5bd;
    color: #212529;
}

.table .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
    min-width: 180px;
    font-size: 0.95rem;
}

.table .dropdown-item {
    transition: all 0.15s ease;
    cursor: pointer;
}

.table .dropdown-item:hover,
.table .hover-bg-light:hover {
    background-color: #f8f9fa !important;
    color: #0d6efd !important;
}

.table .hover-bg-danger:hover {
    background-color: #f8d7da !important;
    color: #dc3545 !important;
}

.table .dropdown-item i {
    width: 1.3em;
    text-align: center;
}

/* Disabled items más claros */
.table .dropdown-item.disabled,
.table .dropdown-item.text-muted {
    color: #adb5bd !important;
    background: transparent;
    cursor: not-allowed;
}