/* Novaedd runtime theme override: Black + Blue + Gold */
/* Base palette */
:root{
  --color-bg: #0B0B0B;
  --color-surface: #101315;
  --color-text: #F5F7FA;
  --color-muted: #C9D1D9;
  --color-border: #2A2F33;

  --color-primary: #0A84FF;
  --color-primary-hover: #086CD9;
  --color-on-primary: #FFFFFF;

  --color-accent: #D4AF37; /* Gold */
  --color-accent-hover: #B8932F;
}

/* Force Angular Material legacy variables to our primary where applicable */
:root{
  --mat-option-selected-state-label-text-color: var(--color-primary) !important;
  --mat-option-label-text-color: var(--color-text) !important;
}

/* Global */
html, body{
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* Subtle radial glow background overlay (non-intrusive) */
/* Disabled background glow overlay to avoid unintended color bands */
/* body::before{ display:none; } */

/* Login and topbar containers */
.container-fluid, .container, .no-gutters {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}
.navbar, .navbar-header {
  background: #0B0B0B !important;
  color: var(--color-text) !important;
}
.navbar .nav-link, .navbar a, .nav .nav-link { color: var(--color-text) !important; }

/* Typography and links */
a{ color: var(--color-primary) !important; }
a:hover{ color: var(--color-primary-hover) !important; }
.text-primary{ color: var(--color-primary) !important; }
.border-primary{ border-color: var(--color-primary) !important; }
.bg-primary{ background-color: var(--color-primary) !important; color: var(--color-on-primary) !important; }
.badge-primary{ background-color: var(--color-primary) !important; color: var(--color-on-primary) !important; }
.btn-outline-primary{ color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.btn-outline-primary:hover{ background: var(--color-primary) !important; color: var(--color-on-primary) !important; }
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{ background: var(--color-primary) !important; color: var(--color-on-primary) !important; }
.progress-bar{ background-color: var(--color-primary) !important; }

/* Borders and subtle separators */
hr, .border, .table, .form-control, .input-group-text{
  border-color: var(--color-border) !important;
}

/* Surfaces (cards, panels, modals) */
.card, .panel, .modal-content, .mat-mdc-card, .dropdown-menu{
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}
.card, .panel { border-color: var(--color-border) !important; }

/* Sidebar */
.sidebar, .aside, .sidenav, .mat-drawer, .mat-sidenav{
  background: #0E1113 !important;
  color: var(--color-text) !important;
  border-right: 1px solid var(--color-border) !important;
}

/* Navbar / header */
.navbar, .navbar-default, .navbar-inverse, header{
  background: #0E1113 !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* Buttons */
.btn, .btn:focus{ outline: none !important; box-shadow: none !important; }
.btn-primary, .bg-primary, .badge-primary{
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}
.btn-primary:hover, .btn-primary:active{
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}
.btn-link{ color: var(--color-primary) !important; }

/* Accent (gold) for highlights */
.text-warning, .badge-warning, .accent, .text-accent{ color: var(--color-accent) !important; }
.bg-warning, .bg-accent{ background-color: rgba(212, 175, 55, 0.12) !important; }

/* Tables */
.table thead th{ color: var(--color-muted) !important; border-bottom-color: var(--color-border) !important; background: #0E1113 !important; }
.headerTable-top-left, .headerTable-top-right { background: #0E1113 !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }
.table-striped tbody tr:nth-of-type(odd){ background-color: rgba(255,255,255,0.02) !important; }
.table, .table td, .table th{ border-color: var(--color-border) !important; }
.table-hover tbody tr:hover { background: rgba(10,132,255,0.08) !important; }

/* Pagination */
.pagination .page-link{ background: transparent !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }
.pagination .page-item.active .page-link{ background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--color-on-primary) !important; }
.pagination .page-link:hover{ background: rgba(10,132,255,0.1) !important; }

/* Forms */
.form-control, .select2-container--default .select2-selection--single{
  background-color: #0F1316 !important;
  color: var(--color-text) !important;
}
.form-control:focus{
  background-color: #0F1316 !important;
  color: var(--color-text) !important;
  border-color: var(--color-primary) !important;
}
.form-check-input:checked{ background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.input-group-text{ background: #0F1316 !important; color: var(--color-text) !important; }

/* Angular Material (MDC) tokens where applicable */
:root{
  --mdc-theme-primary: var(--color-primary);
  --mdc-theme-on-primary: var(--color-on-primary);
  --mdc-theme-surface: var(--color-surface);
  --mdc-theme-on-surface: var(--color-text);
  --mdc-theme-background: var(--color-bg);
}

.mat-mdc-button.mat-primary,
.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary{
  --mdc-filled-button-container-color: var(--color-primary);
  --mdc-filled-button-label-text-color: var(--color-on-primary);
}
/* Legacy mat primary accents */
.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,
.mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full{ background: var(--color-primary) !important; }
.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
.mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after{ color: var(--color-primary) !important; }
.mat-ink-bar{ background: var(--color-primary) !important; }
.mat-mdc-slide-toggle.mat-primary .mdc-switch__track{ background: rgba(10,132,255,.35) !important; }
.mat-mdc-slide-toggle.mat-primary .mdc-switch__handle{ background: var(--color-primary) !important; }

.mat-mdc-form-field-subscript-wrapper, .mat-mdc-form-field-hint, .mat-mdc-form-field-error{ color: var(--color-muted) !important; }
.mat-mdc-menu-panel, .mat-mdc-select-panel{ background: var(--color-surface) !important; color: var(--color-text) !important; }
.mat-mdc-option.mdc-list-item--selected, .mdc-list-item--activated{ background: rgba(10,132,255,0.12) !important; }

/* Charts (generic) */
.chart-legend, .apexcharts-legend, .fc .fc-toolbar-title{ color: var(--color-text) !important; }
.ngx-charts text{ fill: var(--color-text) !important; }
.ngx-charts .gridline-path{ stroke: var(--color-border) !important; }

/* Misc badges and labels */
.label, .badge{ border: 0 !important; }
.label-primary, .badge-primary{ background-color: var(--color-primary) !important; }
.label-warning, .badge-warning{ background-color: var(--color-accent) !important; color: #111 !important; }

/* Focus ring */
*:focus{ box-shadow: 0 0 0 2px rgba(10,132,255,0.35) !important; }

/* SweetAlert2 */
.swal2-popup{ background: var(--color-surface) !important; color: var(--color-text) !important; }
.swal2-title, .swal2-html-container{ color: var(--color-text) !important; }
.swal2-styled.swal2-confirm{ background: var(--color-primary) !important; }
.swal2-styled.swal2-cancel{ background: transparent !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; }

/* Toastr */
.toast{ background-color: #0F1316 !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; }
.toast-success{ border-left: 4px solid #2ecc71 !important; }
.toast-warning{ border-left: 4px solid var(--color-accent) !important; }
.toast-error{ border-left: 4px solid #e74c3c !important; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background: #0F1316 !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  background: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}

/* DevExtreme (dx) */
.dx-widget{ color: var(--color-text) !important; }
.dx-datagrid, .dx-popup-content, .dx-toolbar{ background: var(--color-surface) !important; }
.dx-datagrid-headers{ background: #0E1113 !important; }
.dx-datagrid .dx-row, .dx-datagrid-rowsview{ color: var(--color-text) !important; }
.dx-datagrid .dx-row-focused{ background: rgba(10,132,255,0.12) !important; }
.dx-button-mode-contained{ background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--color-on-primary) !important; }
.dx-button-mode-contained:hover{ background: var(--color-primary-hover) !important; }
.dx-texteditor-input{ color: var(--color-text) !important; }
.dx-texteditor{ background: #0F1316 !important; border-color: var(--color-border) !important; }

/* Dropdowns & tooltips */
.dropdown-menu, .tooltip-inner{ background: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }
.tooltip .tooltip-arrow{ border-top-color: var(--color-surface) !important; }

/* Scrollbars (WebKit) */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: #0E1113; }
*::-webkit-scrollbar-thumb{ background-color: #1F2933; border-radius: 6px; border: 2px solid #0E1113; }
*::-webkit-scrollbar-thumb:hover{ background-color: #27323C; }

/* Navbar sizing adjustments (shrink to compact) */
.container-fluid.no-gutters{ padding-left: 8px !important; padding-right: 8px !important; }
/* Avoid forcing a global min-height on all navbars/headers */
.navbar, header{ min-height: auto !important; }
.navbar .nav-link{ padding: 8px 10px !important; font-size: 0.95rem !important; }
.navbar-header .fa-lg, .navbar .fa-lg{ font-size: 1rem !important; line-height: 1 !important; }
.navbar .dropdown-toggle{ padding-top: 8px !important; padding-bottom: 8px !important; }
.navbar .row{ align-items: center !important; }
.fondoSaldo{ background: rgba(212,167,63,.15) !important; color: var(--color-accent) !important; padding: 4px 8px !important; border-radius: 8px !important; font-weight: 600; font-size: .95rem !important; }

/* Even more compact just for the app menu navbar wrapper */
app-menu menu-navbar .container-fluid.no-gutters{ padding-top: 4px !important; padding-bottom: 4px !important; }
/* Set compact height directly on the custom element */
app-menu menu-navbar{ display:block; width:100% !important; min-height: 44px !important; }
/* Align inner content and set explicit height */
app-menu menu-navbar .container-fluid.no-gutters{ height:48px !important; display:flex !important; align-items:center !important; }
app-menu menu-navbar .navbar-header, app-menu menu-navbar .collapse.navbar-collapse{ display:flex !important; align-items:center !important; }
/* Normalize navbar inner heights/paddings */
app-menu menu-navbar,
app-menu menu-navbar .navbar,
app-menu menu-navbar .navbar-header,
app-menu menu-navbar .collapse.navbar-collapse,
app-menu menu-navbar .container-fluid.no-gutters{ min-height:48px !important; height:48px !important; }
app-menu menu-navbar .navbar-nav > li > a{ padding-top:8px !important; padding-bottom:8px !important; line-height:32px !important; }
app-menu menu-navbar .nav-link{ padding: 4px 8px !important; font-size: 0.875rem !important; line-height: 1.1 !important; }
app-menu menu-navbar .fa-lg{ font-size: 0.9rem !important; line-height: 1 !important; }
app-menu menu-navbar .dropdown-toggle{ padding-top: 4px !important; padding-bottom: 4px !important; }
app-menu menu-navbar .navbar-header{ margin: 0 !important; }
app-menu menu-navbar .nav.navbar-nav.flex-row > li{ margin: 0 4px !important; }
app-menu menu-navbar .collapse.navbar-collapse .row{ margin: 0 !important; }
app-menu menu-navbar .nav.navbar-nav.flex-row.float-right{ margin-right: 0 !important; }
app-menu menu-navbar .fondoSaldo{ padding: 2px 6px !important; font-size: .85rem !important; border-radius: 6px !important; }
/* Remove side paddings to avoid blank edges */
app-menu menu-navbar .container-fluid.no-gutters{ padding-left: 0 !important; padding-right: 0 !important; }

/* Force dashboard navbar to dark */
.page-controls.navbar-dashboard{ background: #0E1113 !important; border-color: var(--color-border) !important; }
.page-controls.navbar-dashboard .navbar-brand, .page-controls.navbar-dashboard .navbar-text,
.page-controls.navbar-dashboard .navbar-nav > li > a{ color: var(--color-text) !important; }
/* Ensure topbar does not block sidebar hover trigger */
.page-controls.navbar-dashboard{ position: relative; z-index: 998; }

/* Ensure main content background matches dark theme */
app-menu .content, app-menu .content-wrap{ background: var(--color-bg) !important; }

/* Remove focus glow inside sidebar to avoid blue edge effect */
.modern-navbar, .modern-navbar *{ outline: none !important; }
.modern-navbar *:focus{ box-shadow: none !important; }

/* ================= Reusable View Components (novaedd) ================= */
/* Breadcrumb (opt-in) */
.nova-breadcrumb{ padding: 1rem 0 .5rem; display:flex; align-items:center; gap:.5rem; color:#94a3b8; font-size:.9rem; }
.nova-breadcrumb a{ color:#94a3b8; text-decoration:none; display:flex; align-items:center; gap:.35rem; transition: color .2s ease; }
.nova-breadcrumb a:hover{ color:#f59e0b; }
.nova-breadcrumb .sep{ color:#475569; }

/* Page header section, alerts and actions */
.page-header-section{ background: rgba(0,0,0,.3); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding: 1.25rem 1.5rem; margin: 10px 0 16px 0; }
.page-title-row{ display:flex; justify-content:center; align-items:center; margin-bottom:.75rem; }
.page-title{ display:flex; align-items:center; gap:.75rem; font-size:1.6rem; font-weight:800; color:#fff; }
.alert-row{ display:flex; gap:.75rem; align-items:center; justify-content:center; flex-wrap: wrap; }
.alert-modern{ background: linear-gradient(135deg, rgba(251,191,36,.15) 0%, rgba(245,158,11,.1) 100%); border:1px solid rgba(251,191,36,.3); border-radius:12px; padding:.75rem 1rem; color:#fbbf24; font-size:.9rem; display:flex; align-items:center; gap:.6rem; flex:1; max-width:900px; box-shadow: 0 4px 12px rgba(251,191,36,.1); }
.action-buttons{ display:flex; gap:.6rem; }
.btn-icon{ background: rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.3); color:#3b82f6; width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s ease; }
.btn-icon:hover{ background: rgba(59,130,246,.2); transform: translateY(-2px); box-shadow:0 4px 12px rgba(59,130,246,.3); }
.btn-icon.add{ background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color:#fff; border:none; }
.btn-icon.export{ background: rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.3); color:#8b5cf6; }
.btn-icon.export:hover{ background: rgba(139,92,246,.2); box-shadow:0 4px 12px rgba(139,92,246,.3); }

/* Controls and search */
.controls-section, .search-section{ background: linear-gradient(135deg, rgba(15,23,42,.7) 0%, rgba(30,41,59,.5) 100%); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:1rem 1.1rem; margin: 8px 0 14px 0; }
.controls-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.entries-control{ display:flex; align-items:center; gap:.6rem; color:#94a3b8; font-size:.9rem; }
.entries-select{ background: rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:.5rem 2rem .5rem .75rem; color:#E9EDF2; font-size:.9rem; cursor:pointer; }
.search-box{ position:relative; max-width:350px; }
.search-box input{ width:100%; background: rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:.65rem 1rem .65rem 2.4rem; color:#E9EDF2; font-size:.95rem; }
.search-box i, .search-box svg{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:#64748b; }
.search-box input::placeholder{ color:#64748b; }
.search-box input:focus{ outline:none; border-color:#f59e0b; background: rgba(0,0,0,.5); box-shadow:0 0 0 3px rgba(245,158,11,.1); }

/* Table shells */
.table-section{ background: rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.3); }
.table-header{ background: rgba(0,0,0,.3); padding: .9rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.1); display:flex; justify-content:flex-end; }
.filter-btn{ background: rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.3); color:#3b82f6; padding:.6rem 1.1rem; border-radius:10px; font-weight:500; cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:.5rem; }
.filter-btn:hover{ background: rgba(59,130,246,.2); transform: translateY(-1px); box-shadow:0 4px 12px rgba(59,130,246,.2); }
.table-container{ overflow-x:auto; }
.table-modern{ width:100%; border-collapse: collapse; }
.table-modern thead{ background: rgba(0,0,0,.4); }
.table-modern th{ padding: 1rem 1.2rem; text-align:left; font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:1px; color:#94a3b8; border-bottom:2px solid rgba(255,255,255,.1); white-space:nowrap; }
.table-modern td{ padding: 1rem 1.2rem; color:#E9EDF2; font-size:.95rem; }

/* Dots for status and sessions */
.status-indicator, .sessions-indicator{ display:flex; justify-content:center; align-items:center; }
.status-active, .sessions-dot{ width:12px; height:12px; border-radius:50%; position:relative; }
.status-active.icon-verde, .sessions-dot.icon-verde{ background:#10b981; box-shadow:0 0 12px rgba(16,185,129,.6); }
.status-active.icon-rojo, .sessions-dot.icon-rojo{ background:#ef4444; box-shadow:0 0 12px rgba(239,68,68,.45); }
.status-active.icon-verde::before, .sessions-dot.icon-verde::before{ content:''; position:absolute; inset:-4px; border:2px solid #10b981; border-radius:50%; opacity:.3; animation: ping 2s cubic-bezier(0,0,0.2,1) infinite; }
.status-active.icon-rojo::before, .sessions-dot.icon-rojo::before{ content:''; position:absolute; inset:-4px; border:2px solid #ef4444; border-radius:50%; opacity:.25; animation: ping 2s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes ping{ 75%,100%{ transform: scale(1.5); opacity: 0; } }

/* Badges and content helpers */
.badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:8px; font-size:.8rem; font-weight:700; white-space:nowrap; }
.badge.super-admin{ background: linear-gradient(135deg, rgba(245,158,11,.2) 0%, rgba(217,119,6,.15) 100%); color:#f59e0b; border:1px solid rgba(245,158,11,.3); }
.badge.analista{ background: linear-gradient(135deg, rgba(59,130,246,.2) 0%, rgba(37,99,235,.15) 100%); color:#3b82f6; border:1px solid rgba(59,130,246,.3); }
.regex-cell{ font-family: 'Courier New', monospace; color:#a78bfa; font-size:.85rem; background: rgba(139,92,246,.1); padding:.35rem .6rem; border-radius:6px; display:inline-block; border:1px solid rgba(139,92,246,.2); }
.comment-cell{ color:#94a3b8; line-height:1.5; }

/* Small metrics/stats cards (shared) */
.stats-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:14px; margin: 10px 0 16px 0; }
.stat-card{ background: linear-gradient(135deg, rgba(15,23,42,.7) 0%, rgba(30,41,59,.5) 100%); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:1.1rem 1.25rem; display:flex; justify-content:space-between; align-items:center; transition:all .3s ease; position:relative; overflow:hidden; }
.stat-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, currentColor, transparent); opacity:0; transition:opacity .3s; }
.stat-card:hover{ transform: translateY(-3px); border-color: rgba(255,255,255,.2); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.stat-card:hover::before{ opacity:.5; }
.stat-card.total{ color:#f59e0b; }
.stat-card.verified{ color:#10b981; }
.stat-card.admins{ color:#ef4444; }
.stat-card.premium{ color:#a855f7; }
.stat-info h3{ font-size:.8rem; color:#94a3b8; font-weight:600; margin:0 0 .5rem 0; letter-spacing:.3px; text-transform:uppercase; }
.stat-info .value{ font-size:2.1rem; font-weight:800; color:#fff; line-height:1; }
.stat-info .subtitle{ font-size:.8rem; color:#64748b; }
.stat-icon{ width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.stat-icon.total{ background: rgba(245,158,11,.15); color:#f59e0b; }
.stat-icon.verified{ background: rgba(16,185,129,.15); color:#10b981; }
.stat-icon.admins{ background: rgba(239,68,68,.15); color:#ef4444; }
.stat-icon.premium{ background: rgba(168,85,247,.15); color:#a855f7; }

/* ========== Modern Sidebar Navbar (opt-in) ========== */
.modern-navbar{ width:256px; height:100vh; background: linear-gradient(180deg, #1a1d29 0%, #252936 100%); color:#9ca3af; display:flex; flex-direction:column; position:fixed; left:0; top:0; z-index:1000; transition: transform .25s ease; }
.modern-navbar .navbar-header{ padding:1.5rem; border-bottom:1px solid #374151; }
.modern-navbar .navbar-brand{ display:flex; align-items:center; gap:.75rem; }
.modern-navbar .navbar-logo{ width:40px; height:40px; background:#2563eb; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.modern-navbar .navbar-logo-text{ color:#fff; font-weight:700; font-size:1.125rem; }
.modern-navbar .navbar-title{ font-size:1.25rem; font-weight:700; color:#fff; letter-spacing:.05em; margin:0; }
.modern-navbar .navbar-subtitle{ font-size:.75rem; color:#9ca3af; margin:2px 0 0 0; }

.modern-navbar .navbar-balance{ padding:1rem 1.5rem; border-bottom:1px solid #374151; display:flex; align-items:center; gap:.75rem; }
.modern-navbar .balance-icon{ width:20px; height:20px; color:#9ca3af; flex-shrink:0; }
.modern-navbar .balance-amount{ font-size:1.2rem; font-weight:700; color:#60a5fa; }

.modern-navbar .navbar-nav{ flex:1; overflow-y:auto; overflow-x:hidden; padding:1rem 0; }
.modern-navbar .navbar-nav::-webkit-scrollbar{ width:6px; }
.modern-navbar .navbar-nav::-webkit-scrollbar-thumb{ background:#374151; border-radius:3px; }
.modern-navbar .navbar-nav::-webkit-scrollbar-thumb:hover{ background:#4b5563; }

.modern-navbar .nav-item{ width:100%; background:none; border:none; display:flex; align-items:center; gap:.75rem; padding:.75rem 1.5rem; cursor:pointer; transition:all .2s ease; color:#9ca3af; text-align:left; outline:none; }
.modern-navbar .nav-item:hover{ background-color: rgba(55,65,81,.5); }
.modern-navbar .nav-item:hover .nav-icon{ color:#60a5fa; }
.modern-navbar .nav-item:hover .nav-label{ color:#fff; }
.modern-navbar .nav-item.active{ background-color: rgba(37,99,235,.1); }
.modern-navbar .nav-item.active .nav-icon{ color:#60a5fa; }
.modern-navbar .nav-item.active .nav-label{ color:#60a5fa; }
.modern-navbar .nav-item.expanded .nav-chevron{ transform: rotate(90deg); }
.modern-navbar .nav-icon{ width:20px; height:20px; color:#9ca3af; flex-shrink:0; transition:color .2s ease; }
.modern-navbar .nav-label{ flex:1; font-size:.9rem; font-weight:600; color:#9ca3af; transition:color .2s ease; }
.modern-navbar .nav-chevron{ width:16px; height:16px; color:#9ca3af; transition: transform .2s ease; flex-shrink:0; }

.modern-navbar .sub-nav{ background-color: rgba(31,41,55,.5); }
.modern-navbar .sub-nav-item{ width:100%; background:none; border:none; display:flex; align-items:center; gap:.75rem; padding:.625rem 1.5rem .625rem 3rem; cursor:pointer; transition:all .2s ease; text-align:left; outline:none; }
.modern-navbar .sub-nav-item:hover{ background-color: rgba(55,65,81,.3); }
.modern-navbar .sub-nav-item .nav-icon{ width:16px; height:16px; color:#60a5fa; }
.modern-navbar .sub-nav-item .nav-label{ font-size:.875rem; color:#60a5fa; }
.modern-navbar .sub-nav-item.active, .modern-navbar .sub-nav-item.active .nav-label{ color:#93c5fd; }

.modern-navbar .navbar-footer{ padding:1rem; border-top:1px solid #374151; }
.modern-navbar .user-info{ display:flex; align-items:center; gap:.75rem; padding:.75rem; background-color:#1f2937; border-radius:8px; cursor:pointer; transition: background-color .2s ease; }
.modern-navbar .user-info:hover{ background-color:#374151; }
.modern-navbar .user-avatar{ width:32px; height:32px; background:#d97706; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.modern-navbar .user-avatar-text{ color:#fff; font-weight:700; font-size:.875rem; }
.modern-navbar .user-details{ flex:1; min-width:0; }
.modern-navbar .user-name{ font-size:.875rem; font-weight:600; color:#fff; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modern-navbar .user-email{ font-size:.75rem; color:#9ca3af; margin:2px 0 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Content shift for sidebar (override legacy left-based layout) */
app-menu .content-wrap{ margin-left:0 !important; left: 0 !important; transition: margin-left .25s ease !important; }
app-menu.nav-collapsed .modern-navbar{ transform: translateX(-100%); }
app-menu.nav-collapsed .content-wrap{ margin-left:0; }
/* Shift topbar when sidebar is expanded so they don't overlap */
app-menu:not(.nav-collapsed) menu-navbar{ margin-left:256px !important; transition: margin-left .25s ease; }
@media (max-width: 768px){ app-menu:not(.nav-collapsed) menu-navbar{ margin-left:0 !important; } }
/* Apply content shift only when expanded */
app-menu:not(.nav-collapsed) .content-wrap{ margin-left:256px !important; }
/* Neutralize legacy left/right positioning and transitions from base SCSS */
app-menu .page-controls, app-menu .content-wrap, app-menu .loader-wrap{ left: 0 !important; right: 0 !important; transition: none !important; }
app-menu .page-controls{ position: relative !important; height: 48px !important; }
@media (max-width: 768px){ app-menu .content-wrap{ margin-left:0; } .modern-navbar{ width:100%; position:relative; } }

/* Hover strip to expand when collapsed */
app-menu .sidebar-edge-trigger{ display:none; }
app-menu.nav-collapsed .sidebar-edge-trigger{ position: fixed; left:0; top:0; width:10px; height:100vh; z-index:999; display:block; background: transparent; }

/* Seguridad > Permisos modal: reinforce dark theme without rebuild */
.modal-dialog.modal-lg.modal-dialog-centered{
  max-width: 1180px !important;
}

.permisos-modal{
  background: linear-gradient(180deg, #0f131b 0%, #0b0e14 100%) !important;
  border: 1px solid rgba(10, 132, 255, 0.16) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45) !important;
  color: #e9edf2 !important;
}

.permisos-modal .modal-header,
.permisos-modal .modal-footer{
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}

.permisos-modal .modal-title,
.permisos-modal h4,
.permisos-modal h5{
  color: #f3f7fd !important;
}

.permisos-modal .form-container,
.permisos-modal .modal-body{
  background: transparent !important;
}

.permisos-modal .table{
  background: rgba(16, 19, 25, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.permisos-modal .table thead th{
  background: #131923 !important;
  color: #dbe5f5 !important;
  border-color: rgba(255,255,255,0.08) !important;
  font-weight: 700 !important;
}

.permisos-modal .table td,
.permisos-modal .table th{
  border-color: rgba(255,255,255,0.06) !important;
  color: #e9edf2 !important;
}

.permisos-modal .table tbody tr:hover{
  background: rgba(10,132,255,0.06) !important;
}

.permisos-modal .checkLabel{
  color: #dce6f6 !important;
  font-weight: 600 !important;
}

.permisos-modal input.labelCheckBox{
  accent-color: #0a84ff !important;
}

.permisos-modal .btn-danger{
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.24) !important;
  color: #ffd7d7 !important;
}

.permisos-modal .btn-success{
  background: linear-gradient(135deg, #0a84ff 0%, #1dd1a1 100%) !important;
  border-color: transparent !important;
  color: #081018 !important;
  font-weight: 700 !important;
}

.permisos-modal .btn-success:hover,
.permisos-modal .btn-danger:hover{
  transform: translateY(-1px);
}

.feature-section{
  background: linear-gradient(180deg, rgba(17,21,31,0.96) 0%, rgba(12,15,23,0.98) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
}

.feature-section__header p,
.feature-card__description,
.feature-empty{
  color: #90a1b5 !important;
}

.feature-section__summary{
  display: flex !important;
  gap: .75rem !important;
}

.feature-kpi{
  min-width: 94px !important;
  padding: .8rem .95rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(10,132,255,.2) !important;
  background: rgba(10,132,255,.1) !important;
  text-align: center !important;
}

.feature-kpi strong{
  display: block !important;
  color: #19b5ff !important;
  font-size: 1.1rem !important;
}

.feature-kpi span{
  color: #b7c4d6 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: .78rem !important;
}

.feature-toolbar{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .75rem !important;
  margin-bottom: 1rem !important;
}

.feature-action{
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;
  padding: .6rem 1rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(10,132,255,.22) !important;
  background: rgba(10,132,255,.1) !important;
  color: #e6efff !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.feature-action:hover{
  background: rgba(10,132,255,.18) !important;
  border-color: rgba(10,132,255,.45) !important;
}

.feature-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1rem !important;
}

.feature-card{
  background: rgba(20, 26, 38, 0.94) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.feature-card__title{
  color: #eef4ff !important;
  font-weight: 700 !important;
}

.feature-card__controls{
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
}

.feature-toggle{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: .8rem .9rem !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

.feature-toggle__label{
  color: #dce6f6 !important;
  font-weight: 600 !important;
}

.feature-toggle input{
  display: none !important;
}

.feature-toggle__slider{
  position: relative !important;
  width: 52px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: rgba(125,138,164,.35) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  transition: all .2s ease !important;
}

.feature-toggle__slider::after{
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
  transition: transform .2s ease !important;
}

.feature-toggle input:checked + .feature-toggle__slider{
  background: linear-gradient(135deg, #0a84ff 0%, #1dd1a1 100%) !important;
  border-color: rgba(10,132,255,.5) !important;
}

.feature-toggle input:checked + .feature-toggle__slider::after{
  transform: translateX(22px) !important;
}