/* =============================================================================
 * app-modern.css — Capa de UI profesional que reemplaza el look de AdminLTE.
 *
 * Estrategia "app-shell": NO se toca el markup de las 87 vistas; se reestilizan
 * las clases estructurales de AdminLTE (.content-wrapper, .main-sidebar, .box,
 * .btn, .form-control, .table, .info-box, .modal, …) con un sistema moderno:
 *   · Fuente  : Plus Jakarta Sans
 *   · Paleta  : contenido claro (default) / oscuro (data-theme=dark) + sidebar
 *               navy permanente con acento indigo.
 *   · Detalles: radios suaves, sombras refinadas, focus accesible, transiciones.
 *
 * Reemplaza a ui-theme.css y define los mismos tokens (--bg, --surface, …) para
 * que reports.css y el centro de reportes sigan funcionando sin cambios.
 * Debe cargarse AL FINAL para ganar especificidad sobre AdminLTE.
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------------------------- TOKENS ---------------------------------- */
:root, :root[data-theme="light"]{
    --bg:#eef1f8; --bg-2:#f6f8fc;
    --surface:#ffffff; --surface-2:#f4f6fb;
    --border:#e3e8f2; --border-soft:#eef1f7;
    --text:#0f172a; --text-muted:#475569; --text-soft:#94a3b8;
    --primary:#4f46e5; --primary-2:#4338ca; --primary-soft:rgba(79,70,229,.10);
    --accent:#0ea5e9; --success:#16a34a; --warning:#d97706; --danger:#dc2626; --info:#0284c7;
    --shadow:0 14px 40px -18px rgba(15,23,42,.28), 0 2px 6px -2px rgba(15,23,42,.10);
    --shadow-sm:0 1px 2px rgba(15,23,42,.08);
    --radius:14px; --radius-sm:9px;
    --header-bg:rgba(255,255,255,.82);
    /* Sidebar azul marino formal (mismo tono en claro y oscuro). */
    --sidebar-bg:#0b2545; --sidebar-bg-2:#0f2f5c;
    --sidebar-text:#b7c5e0; --sidebar-active:rgba(59,130,246,.22);
    --sidebar-accent:#4f8cf0;
    --font-sans:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
:root[data-theme="dark"]{
    --bg:#070b18; --bg-2:#0b1124;
    --surface:#0f1630; --surface-2:#141d3c;
    --border:#222c52; --border-soft:#1a2244;
    --text:#e8ecfb; --text-muted:#9aa6cc; --text-soft:#6b769b;
    --primary:#6366f1; --primary-2:#818cf8; --primary-soft:rgba(99,102,241,.16);
    --accent:#38bdf8; --success:#22c55e; --warning:#f59e0b; --danger:#ef4444; --info:#38bdf8;
    --shadow:0 18px 44px -18px rgba(0,0,0,.6), 0 2px 8px -2px rgba(0,0,0,.4);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --header-bg:rgba(12,18,40,.85);
    --sidebar-bg:#081b33; --sidebar-bg-2:#0b2647;
    --sidebar-accent:#5b95f2;
}

/* ---------------------------- BASE ------------------------------------ */
body.skin-blue, body{
    font-family:var(--font-sans) !important;
    background:var(--bg) !important;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}
.wrapper{ background:var(--bg); }
a{ color:var(--primary); }
a:hover, a:focus{ color:var(--primary-2); }
.content-wrapper{
    background:var(--bg) !important;
    color:var(--text);
    min-height:100vh;
}
::selection{ background:var(--primary-soft); }

/* Scrollbars */
*{ scrollbar-color:var(--border) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--text-soft); }

/* --------------------------- HEADER ----------------------------------- */
.main-header .navbar,
.main-header > .logo{
    background:var(--header-bg) !important;
    -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-sm);
}
.main-header .logo{ color:var(--text) !important; font-weight:800; letter-spacing:-.3px; border-right:1px solid var(--border) !important; }
.main-header .logo:hover{ background:var(--surface-2) !important; }
.main-header .navbar .nav > li > a{ color:var(--text-muted) !important; }
.main-header .navbar .nav > li > a:hover{ background:var(--surface-2) !important; color:var(--text) !important; }
.main-header .sidebar-toggle{ color:var(--text-muted) !important; }
.main-header .sidebar-toggle:hover{ background:var(--surface-2) !important; color:var(--text) !important; }
.main-header .navbar .user-menu .user-image{ border:2px solid var(--border); }

/* ---------------------------- SIDEBAR --------------------------------- */
.main-sidebar, .left-side{
    background:linear-gradient(180deg, var(--sidebar-bg-2), var(--sidebar-bg)) !important;
    box-shadow:2px 0 24px -12px rgba(0,0,0,.5);
}
.sidebar{ padding-bottom:30px; }
.sidebar-menu > li > a{
    color:var(--sidebar-text) !important;
    font-weight:600; font-size:.92rem;
    margin:2px 10px; border-radius:10px; padding:11px 14px !important;
    transition:background .18s ease, color .18s ease;
    border-left:0 !important;
}
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > [class*="fa-"],
.sidebar-menu > li > a > .glyphicon{ width:22px; color:#7f8bc4; transition:color .18s ease; }
.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a{
    background:var(--sidebar-active) !important;
    color:#fff !important;
}
.sidebar-menu > li:hover > a > .fa,
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > [class*="fa-"]{ color:#a5b4fc; }
.sidebar-menu > li.active > a{ box-shadow:inset 3px 0 0 var(--primary-2); }
.sidebar-menu .treeview-menu{
    background:rgba(0,0,0,.22) !important; margin:0 10px 6px; border-radius:10px; padding:4px 0;
}
.sidebar-menu .treeview-menu > li > a{
    color:#8c96c2 !important; font-size:.86rem; padding:8px 12px 8px 24px !important;
}
.sidebar-menu .treeview-menu > li > a > .fa-circle-o{ font-size:.45rem; color:#5b67a3; }
.sidebar-menu .treeview-menu > li:hover > a,
.sidebar-menu .treeview-menu > li.active > a{ color:#fff !important; }
.sidebar-menu .treeview-menu > li.active > a > .fa-circle-o{ color:var(--primary-2); }
.sidebar-form, .user-panel{ border-color:rgba(255,255,255,.06) !important; }
.user-panel > .info, .user-panel > .info > a{ color:#e6e9f7 !important; }

/* ------------------------- CONTENT HEADER ----------------------------- */
.content-header{ padding:22px 22px 6px !important; }
.content-header > h1{
    font-family:var(--font-sans); font-weight:800; letter-spacing:-.6px;
    color:var(--text); font-size:1.7rem;
}
.content-header > h1 > small{ color:var(--text-soft); font-weight:500; }
.content-header > .breadcrumb{
    background:var(--surface) !important; border:1px solid var(--border);
    border-radius:999px; padding:6px 14px !important; box-shadow:var(--shadow-sm);
    top:20px !important;
}
.content-header > .breadcrumb > li > a{ color:var(--text-muted); }
.content-header > .breadcrumb > .active{ color:var(--primary); }
.content-header > .breadcrumb > li + li:before{ color:var(--text-soft); }

/* ----------------------------- BOXES (cards) -------------------------- */
.box{
    background:var(--surface) !important;
    border:1px solid var(--border) !important;
    border-radius:var(--radius) !important;
    box-shadow:var(--shadow) !important;
    border-top:1px solid var(--border) !important;
}
.box.box-primary,.box.box-info,.box.box-warning,.box.box-success,.box.box-danger,.box.box-default{
    border-top:3px solid var(--primary) !important;
}
.box.box-info{ border-top-color:var(--info) !important; }
.box.box-warning{ border-top-color:var(--warning) !important; }
.box.box-success{ border-top-color:var(--success) !important; }
.box.box-danger{ border-top-color:var(--danger) !important; }
.box-header{ border-bottom:1px solid var(--border-soft); padding:16px 20px; }
.box-header .box-title{ font-weight:700; font-size:1.02rem; color:var(--text); letter-spacing:-.2px; }
.box-body{ padding:18px 20px; color:var(--text); }
.box-footer{ background:transparent !important; border-top:1px solid var(--border-soft); border-radius:0 0 var(--radius) var(--radius); }

/* ---------------------------- BUTTONS --------------------------------- */
.btn{
    border-radius:10px; font-weight:600; font-family:var(--font-sans);
    border:1px solid transparent; padding:8px 16px;
    transition:filter .18s ease, box-shadow .2s ease, background .18s ease, transform .08s ease;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.btn-primary{ background:linear-gradient(120deg,var(--primary),var(--primary-2)) !important; border:none !important;
    box-shadow:0 10px 24px -12px rgba(79,70,229,.7); }
.btn-primary:hover{ filter:brightness(1.07); }
.btn-default{ background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--border) !important; }
.btn-default:hover{ background:var(--surface-2) !important; }
.btn-success{ background:var(--success) !important; border:none !important; }
.btn-info{ background:var(--info) !important; border:none !important; }
.btn-warning{ background:var(--warning) !important; border:none !important; color:#fff !important; }
.btn-danger{ background:var(--danger) !important; border:none !important; }
.btn-flat{ border-radius:10px; }

/* ----------------------------- FORMS ---------------------------------- */
.form-control{
    background:var(--surface) !important; color:var(--text) !important;
    border:1px solid var(--border) !important; border-radius:10px !important;
    box-shadow:none !important; height:42px; font-family:var(--font-sans);
    transition:border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus{ border-color:var(--primary) !important; box-shadow:0 0 0 4px var(--primary-soft) !important; }
.form-control::placeholder{ color:var(--text-soft); }
textarea.form-control{ height:auto; }
label{ color:var(--text); font-weight:600; }
.input-group-addon{ background:var(--surface-2) !important; border:1px solid var(--border) !important; color:var(--text-muted) !important; border-radius:10px; }
.help-block{ color:var(--text-soft); }
.has-error .form-control{ border-color:var(--danger) !important; }

/* ----------------------------- TABLES --------------------------------- */
.table{ color:var(--text); }
.table > thead > tr > th{
    border-bottom:2px solid var(--border) !important; color:var(--text-muted);
    text-transform:uppercase; font-size:.72rem; letter-spacing:.4px; font-weight:700; padding:12px 14px;
}
.table > tbody > tr > td{ border-top:1px solid var(--border-soft) !important; padding:12px 14px; vertical-align:middle; font-variant-numeric:tabular-nums; }
.table-striped > tbody > tr:nth-of-type(odd){ background:var(--surface-2) !important; }
.table-hover > tbody > tr:hover{ background:var(--primary-soft) !important; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td{ border-color:var(--border) !important; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
    background:var(--surface) !important; border:1px solid var(--border) !important; color:var(--text) !important; border-radius:8px; padding:5px 10px;
}
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate{ color:var(--text-muted) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button{
    border-radius:8px !important; border:1px solid var(--border) !important; color:var(--text-muted) !important; background:var(--surface) !important; margin:0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
    background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background:var(--surface-2) !important; color:var(--text) !important; }

/* --------------------- INFO-BOX / SMALL-BOX (KPIs) -------------------- */
.info-box, .small-box{
    background:var(--surface) !important; color:var(--text) !important;
    border:1px solid var(--border); border-radius:var(--radius) !important; box-shadow:var(--shadow) !important;
    overflow:hidden;
}
.info-box-icon{ border-radius:var(--radius) 0 0 var(--radius); background:var(--primary-soft) !important; color:var(--primary) !important; }
.info-box-number{ font-weight:800; letter-spacing:-.4px; }
.info-box-text{ color:var(--text-muted); text-transform:uppercase; font-size:.72rem; letter-spacing:.4px; }
.small-box > .inner{ padding:18px; }
.small-box h3{ font-weight:800; letter-spacing:-.5px; }
.small-box .icon{ color:rgba(15,23,42,.12); }
.small-box .small-box-footer{ background:rgba(0,0,0,.04); color:var(--text-muted) !important; }
.bg-aqua,.bg-blue{ background:linear-gradient(120deg,var(--primary),var(--primary-2)) !important; color:#fff !important; }
.bg-green{ background:linear-gradient(120deg,#16a34a,#15803d) !important; color:#fff !important; }
.bg-yellow{ background:linear-gradient(120deg,#f59e0b,#d97706) !important; color:#fff !important; }
.bg-red{ background:linear-gradient(120deg,#ef4444,#dc2626) !important; color:#fff !important; }
.bg-aqua .info-box-icon,.bg-blue .info-box-icon,.bg-green .info-box-icon,.bg-yellow .info-box-icon,.bg-red .info-box-icon{ background:rgba(255,255,255,.18) !important; color:#fff !important; }

/* ----------------------------- MODALS --------------------------------- */
.modal-content{ background:var(--surface) !important; color:var(--text); border:1px solid var(--border) !important; border-radius:var(--radius) !important; box-shadow:0 40px 90px -30px rgba(0,0,0,.55) !important; overflow:hidden; }
.modal-header{ background:linear-gradient(120deg,var(--primary),var(--primary-2)) !important; color:#fff !important; border:none; padding:16px 20px; }
.modal-header .modal-title, .modal-header h4{ color:#fff !important; font-weight:700; }
.modal-header .close{ color:#fff; opacity:.9; text-shadow:none; }
.modal-body{ padding:20px; }
.modal-footer{ border-top:1px solid var(--border-soft); }

/* ------------------------ TABS / NAV ---------------------------------- */
.nav-tabs{ border-bottom:1px solid var(--border); }
.nav-tabs > li > a{ color:var(--text-muted); border:none !important; border-radius:8px 8px 0 0; font-weight:600; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover{
    background:transparent !important; color:var(--primary) !important; border:none !important;
    box-shadow:inset 0 -2px 0 var(--primary);
}
.nav-tabs-custom{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); }

/* ----------------------- LABELS / BADGES / ALERTS --------------------- */
.label, .badge{ border-radius:999px; font-weight:700; padding:.3em .7em; font-size:.72rem; }
.label-primary,.badge{ background:var(--primary-soft); color:var(--primary); }
.label-success{ background:rgba(22,163,74,.14); color:var(--success); }
.label-warning{ background:rgba(217,119,6,.16); color:var(--warning); }
.label-danger{ background:rgba(220,38,38,.14); color:var(--danger); }
.label-info{ background:rgba(2,132,199,.14); color:var(--info); }
.alert{ border-radius:12px; border:1px solid transparent; }
.alert-success{ background:rgba(22,163,74,.10); border-color:rgba(22,163,74,.3); color:var(--success); }
.alert-danger,.alert-error{ background:rgba(220,38,38,.10); border-color:rgba(220,38,38,.3); color:var(--danger); }
.alert-warning{ background:rgba(217,119,6,.10); border-color:rgba(217,119,6,.3); color:var(--warning); }
.alert-info{ background:rgba(2,132,199,.10); border-color:rgba(2,132,199,.3); color:var(--info); }

/* ----------------------- SELECT2 / SWEETALERT ------------------------- */
.select2-container--default .select2-selection--single{
    background:var(--surface) !important; border:1px solid var(--border) !important; height:42px !important; border-radius:10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--text) !important; line-height:40px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:40px !important; }
.select2-dropdown{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:10px !important; box-shadow:var(--shadow); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--primary) !important; }
.select2-search--dropdown .select2-search__field{ background:var(--surface-2) !important; border:1px solid var(--border) !important; color:var(--text) !important; border-radius:8px; }
/* Selector de empresa del header (soporte/developer) — visible en header claro */
.main-header .hdr-company-li{ display:flex; align-items:center; height:50px; padding:0 6px; }
.hdr-company{ display:flex; align-items:center; gap:8px; height:38px; padding:0 6px 0 10px;
    background:var(--surface); border:1px solid var(--border); border-radius:999px; box-shadow:var(--shadow-sm); }
.hdr-company-badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px;
    font-size:.68rem; font-weight:800; letter-spacing:.3px; color:#fff; white-space:nowrap; }
.hdr-company.is-support .hdr-company-badge{ background:#e11d48; }
.hdr-company.is-dev .hdr-company-badge{ background:#7c3aed; }
.hdr-company-ico{ color:var(--text-soft); font-size:.85rem; }
.hdr-company .select2-container{ min-width:200px; }
.hdr-company .select2-container--default .select2-selection--single{
    background:transparent !important; border:none !important; height:36px !important; }
.hdr-company .select2-selection__rendered{ color:var(--text) !important; font-weight:600; font-size:.86rem; line-height:36px !important; padding-left:2px !important; }
.hdr-company .select2-selection__placeholder{ color:var(--text-muted) !important; }
.hdr-company .select2-selection__arrow{ height:34px !important; }
/* sin select2 (fallback): que el <select> nativo igual se vea bien */
.hdr-company select#hdrCompanySwitch{ border:none; background:transparent; color:var(--text);
    font-weight:600; font-size:.86rem; max-width:220px; outline:none; }

/* Menú colapsado: el submenú flyout no debe heredar los márgenes inline */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu{
    margin:0 !important; border-radius:0 10px 10px 0 !important; padding:6px 0 !important;
    box-shadow:var(--shadow); }

/* SweetAlert2 — tematizado completo (antes solo radio/fuente y el popup
   quedaba blanco en modo oscuro). */
.swal2-popup{
    background:var(--surface) !important; color:var(--text) !important;
    border:1px solid var(--border) !important;
    border-radius:var(--radius) !important; font-family:var(--font-sans) !important;
    box-shadow:0 30px 70px -24px rgba(0,0,0,.55) !important;
}
.swal2-title{ color:var(--text) !important; font-weight:700; }
.swal2-content, .swal2-html-container{ color:var(--text-muted) !important; }
.swal2-styled.swal2-confirm{
    background:linear-gradient(120deg,var(--primary),var(--primary-2)) !important;
    border:none !important; border-radius:10px !important; font-weight:600;
}
.swal2-styled.swal2-cancel{
    background:var(--surface-2) !important; color:var(--text) !important;
    border:1px solid var(--border) !important; border-radius:10px !important; font-weight:600;
}
.swal2-input, .swal2-textarea, .swal2-select, .swal2-file{
    background:var(--surface-2) !important; color:var(--text) !important;
    border:1px solid var(--border) !important; border-radius:10px !important;
}
.swal2-footer{ border-top:1px solid var(--border-soft) !important; color:var(--text-muted); }
.swal2-close{ color:var(--text-muted) !important; }
.swal2-close:hover{ color:var(--text) !important; }
.swal2-validationerror, .swal2-validation-message{
    background:var(--surface-2) !important; color:var(--warning) !important;
}

/* ------------------------------- MISC --------------------------------- */
.pagination > li > a{ color:var(--primary); border-color:var(--border); background:var(--surface); }
.pagination > li > a:hover{ background:var(--surface-2); color:var(--text); border-color:var(--border); }
.pagination > .active > a{ background:var(--primary) !important; border-color:var(--primary) !important; }
.pagination > .disabled > a, .pagination > .disabled > a:hover{ background:var(--surface); color:var(--text-soft); border-color:var(--border-soft); }
.progress{ background:var(--surface-2); border-radius:999px; box-shadow:none; }
.progress-bar{ background:var(--primary); }
.callout{ border-radius:12px; box-shadow:var(--shadow-sm); }
hr{ border-color:var(--border); }
.text-muted{ color:var(--text-soft) !important; }

/* ================= COBERTURA TOTAL DE TEMA (parchones blancos) =========== */
/* Componentes de AdminLTE/Bootstrap/plugins con fondo claro fijo que quedaban
   blancos en modo oscuro. Todos pasan a los tokens del tema. */

/* Footer (quedaba blanco fijo en modo oscuro) */
.main-footer{
    background:var(--surface) !important;
    color:var(--text-muted) !important;
    border-top:1px solid var(--border) !important;
}
.main-footer h5{ color:var(--text-muted); margin:0; }
.main-footer a{ color:var(--primary); }

/* Dropdowns de Bootstrap (menú de usuario del header, acciones de tablas…) */
.dropdown-menu{
    background:var(--surface) !important;
    border:1px solid var(--border) !important;
    border-radius:10px !important;
    box-shadow:var(--shadow) !important;
}
.dropdown-menu > li > a{ color:var(--text) !important; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{
    background:var(--primary-soft) !important; color:var(--primary) !important;
}
.dropdown-menu .divider{ background:var(--border-soft) !important; }
/* Menú del usuario de AdminLTE (cabecera azul + cuerpo claro fijos) */
.navbar-nav > .user-menu > .dropdown-menu > li.user-header{
    background:linear-gradient(120deg,var(--primary),var(--primary-2)) !important;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-body,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer{
    background:var(--surface) !important; border-color:var(--border-soft) !important;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default{
    background:var(--surface-2) !important; color:var(--text) !important;
}

/* Pestañas custom de AdminLTE: el contenedor de tabs era blanco fijo */
.nav-tabs-custom{ background:var(--surface) !important; border:1px solid var(--border); }
.nav-tabs-custom > .nav-tabs{ background:transparent !important; border-bottom-color:var(--border) !important; }
.nav-tabs-custom > .nav-tabs > li > a{ color:var(--text-muted) !important; background:transparent !important; }
.nav-tabs-custom > .nav-tabs > li.active > a{ background:transparent !important; color:var(--primary) !important; }
.nav-tabs-custom > .tab-content{ background:transparent !important; color:var(--text); }

/* Paneles/wells de Bootstrap y list-groups */
.panel, .panel-default{ background:var(--surface) !important; border-color:var(--border) !important; box-shadow:var(--shadow-sm); }
.panel-heading{ background:var(--surface-2) !important; color:var(--text) !important; border-color:var(--border-soft) !important; }
.panel-body{ color:var(--text); }
.well{ background:var(--surface-2) !important; border:1px solid var(--border) !important; color:var(--text); box-shadow:none; }
.list-group-item{
    background:var(--surface) !important; border-color:var(--border-soft) !important; color:var(--text) !important;
}
a.list-group-item:hover, .list-group-item:hover{ background:var(--surface-2) !important; }
.list-group-item.active{ background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; }
.list-group-item small, .list-group-item .text-muted{ color:var(--text-muted) !important; }

/* Popovers y tooltips */
.popover{
    background:var(--surface) !important; border:1px solid var(--border) !important;
    color:var(--text) !important; border-radius:10px; box-shadow:var(--shadow);
}
.popover-title{ background:var(--surface-2) !important; color:var(--text) !important; border-bottom-color:var(--border-soft) !important; }
.popover-content{ color:var(--text-muted); }
.popover > .arrow:after{ border-top-color:var(--surface) !important; border-bottom-color:var(--surface) !important; }
.tooltip-inner{ background:var(--sidebar-bg) !important; color:#e8ecfb !important; border-radius:8px; }

/* Filas con clases de color de AdminLTE usadas en tfoot/subtotales */
.table tr.bg-gray, .table tfoot tr.bg-gray, td.bg-gray, th.bg-gray{
    background:var(--surface-2) !important; color:var(--text) !important;
}
.table tr.bg-light-blue, .table tfoot tr.bg-light-blue, td.bg-light-blue, th.bg-light-blue{
    background:var(--primary-soft) !important; color:var(--text) !important;
}
.table tr.bg-yellow-row, .table tr.warning > td, .table > tbody > tr.warning > td{
    background:rgba(245,158,11,.10) !important; color:var(--text);
}
.table > tbody > tr.success > td{ background:rgba(34,197,94,.10) !important; color:var(--text); }
.table > tbody > tr.danger > td{ background:rgba(239,68,68,.10) !important; color:var(--text); }
.table > tbody > tr.info > td{ background:rgba(2,132,199,.10) !important; color:var(--text); }
.table > tbody > tr.active > td{ background:var(--surface-2) !important; color:var(--text); }

/* Callouts de AdminLTE: los originales llevan fondos solidos (naranja/rojo…)
   con !important que se comen el texto; pasan a fondo translucido + borde de
   color, legibles en claro y oscuro. */
.callout{ background:var(--surface) !important; color:var(--text) !important; border-left:4px solid var(--border); }
.callout h4{ color:var(--text) !important; }
.callout p{ color:var(--text-muted) !important; }
.callout a{ color:var(--primary) !important; text-decoration:underline; }
.callout.callout-danger{ background:rgba(239,68,68,.10) !important; border-left-color:var(--danger) !important; }
.callout.callout-warning{ background:rgba(245,158,11,.12) !important; border-left-color:var(--warning) !important; }
.callout.callout-info{ background:rgba(56,189,248,.10) !important; border-left-color:var(--info) !important; }
.callout.callout-success{ background:rgba(34,197,94,.10) !important; border-left-color:var(--success) !important; }
.callout.callout-danger h4{ color:var(--danger) !important; }
.callout.callout-warning h4{ color:var(--warning) !important; }
.callout.callout-info h4{ color:var(--info) !important; }
.callout.callout-success h4{ color:var(--success) !important; }

/* Estado "abierto" de los dropdowns de la navbar (Bootstrap pinta el toggle
   con gris claro fijo al abrir) */
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus{
    background:var(--surface-2) !important; color:var(--text) !important;
}

/* Utilidades de color de AdminLTE usadas fuera de tablas (thead, celdas…) */
.bg-gray{ background:var(--surface-2) !important; color:var(--text) !important; }
.bg-light-blue{ background:var(--primary) !important; color:#fff !important; }
thead.bg-gray > tr > th, .bg-gray > tr > th{ background:var(--surface-2) !important; color:var(--text-muted) !important; }

/* Miniaturas de imagen (marco blanco fijo de Bootstrap) */
.img-thumbnail{ background:var(--surface-2) !important; border-color:var(--border) !important; }

/* Cabeceras de cajas "solid" con color (AdminLTE las pinta con azul fijo) */
.box.box-solid.box-primary > .box-header{ background:var(--primary) !important; color:#fff !important; }
.box.box-solid.box-info    > .box-header{ background:var(--info) !important; color:#fff !important; }
.box.box-solid.box-success > .box-header{ background:var(--success) !important; color:#fff !important; }
.box.box-solid.box-warning > .box-header{ background:var(--warning) !important; color:#fff !important; }
.box.box-solid.box-danger  > .box-header{ background:var(--danger) !important; color:#fff !important; }

/* Inputs de solo lectura/deshabilitados */
.form-control[readonly], .form-control[disabled], fieldset[disabled] .form-control{
    background:var(--surface-2) !important; color:var(--text-muted) !important; opacity:1;
}

/* Filas "saldadas" (antes inline darkgrey en settles) */
tr.row-settled > td{ background:var(--surface-2) !important; color:var(--text-muted) !important; }

/* Cajas "solid" de AdminLTE */
.box.box-solid{ border:1px solid var(--border) !important; }
.box.box-solid > .box-header{ color:var(--text) !important; background:var(--surface-2) !important; }

/* pre / code / kbd */
pre{
    background:var(--surface-2) !important; color:var(--text) !important;
    border:1px solid var(--border) !important; border-radius:10px;
}
code{ background:var(--surface-2); color:var(--accent); border-radius:6px; padding:2px 6px; }
kbd{ background:var(--sidebar-bg); color:#e8ecfb; border-radius:6px; }

/* Checkboxes/radios nativos acordes al tema */
input[type="checkbox"], input[type="radio"]{ accent-color:var(--primary); }

/* bootstrap-datepicker: el calendario emergente era blanco fijo */
.datepicker.dropdown-menu{
    background:var(--surface) !important; color:var(--text) !important;
    border:1px solid var(--border) !important; border-radius:12px !important;
    box-shadow:var(--shadow) !important; padding:8px;
}
.datepicker table tr td, .datepicker table tr th{ color:var(--text); border-radius:8px; }
.datepicker table tr td.day:hover, .datepicker table tr td.focused{ background:var(--surface-2); }
.datepicker table tr td.old, .datepicker table tr td.new{ color:var(--text-soft); }
.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.active{
    background:var(--primary) !important; color:#fff !important; background-image:none !important; text-shadow:none;
}
.datepicker table tr td.today{ background:var(--primary-soft) !important; color:var(--text) !important; background-image:none !important; }
.datepicker table tr td span{ color:var(--text); border-radius:8px; }
.datepicker table tr td span:hover{ background:var(--surface-2); }
.datepicker table tr td span.active{ background:var(--primary) !important; color:#fff !important; background-image:none !important; text-shadow:none; }
.datepicker .datepicker-switch:hover, .datepicker .prev:hover, .datepicker .next:hover{ background:var(--surface-2); }

/* bootstrap-daterangepicker: panel emergente blanco fijo */
.daterangepicker{
    background:var(--surface) !important; color:var(--text) !important;
    border:1px solid var(--border) !important; border-radius:12px !important;
    box-shadow:var(--shadow) !important; font-family:var(--font-sans);
}
.daterangepicker:before, .daterangepicker:after{ display:none; }
.daterangepicker .calendar-table{ background:var(--surface) !important; border:none !important; }
.daterangepicker td, .daterangepicker th{ color:var(--text) !important; }
.daterangepicker td.off{ background:transparent !important; color:var(--text-soft) !important; }
.daterangepicker td.available:hover, .daterangepicker th.available:hover{ background:var(--surface-2) !important; }
.daterangepicker td.in-range{ background:var(--primary-soft) !important; color:var(--text) !important; }
.daterangepicker td.active, .daterangepicker td.active:hover{ background:var(--primary) !important; color:#fff !important; }
.daterangepicker .drp-buttons, .daterangepicker .ranges{ border-color:var(--border-soft) !important; }
.daterangepicker .ranges li:hover{ background:var(--surface-2); }
.daterangepicker .ranges li.active{ background:var(--primary); color:#fff; }
.daterangepicker .drp-selected{ color:var(--text-muted); }
.daterangepicker .calendar-time select{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); }

/* DataTables: fila hija responsive y controles restantes */
table.dataTable > tbody > tr.child{ background:var(--surface-2) !important; }
table.dataTable > tbody > tr.child span.dtr-title{ color:var(--text-muted); }
table.dataTable > tbody > tr.child span.dtr-data{ color:var(--text); }
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before{
    background:var(--primary) !important; border:2px solid var(--surface) !important; box-shadow:none;
}
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label{ color:var(--text-muted); }
.dataTables_wrapper .dataTables_processing{ background:var(--surface) !important; color:var(--text) !important; }

/* Select2 múltiple + botón de limpiar (el simple ya estaba cubierto) */
.select2-container--default .select2-selection--multiple{
    background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:10px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background:var(--primary-soft) !important; color:var(--primary) !important; border:1px solid var(--border) !important;
}
.select2-container--default .select2-selection__clear{ color:var(--text-muted) !important; }
.select2-results__option{ color:var(--text); }
.select2-container--default .select2-results__option[aria-selected=true]{ background:var(--surface-2) !important; color:var(--text) !important; }

/* Overlays de carga de AdminLTE (spinner sobre cajas) */
.overlay, .box > .overlay, .overlay-wrapper > .overlay{
    background:rgba(0,0,0,.35) !important; color:var(--text) !important; border-radius:var(--radius);
}
.box > .overlay > .fa{ color:var(--text); }

/* Texto del pie de los small-box del dashboard (quedaba ilegible) */
.small-box .small-box-footer{ background:rgba(0,0,0,.15) !important; color:rgba(255,255,255,.9) !important; font-weight:600; }
.small-box h3, .small-box p{ color:#fff !important; }
.small-box .icon{ color:rgba(255,255,255,.18) !important; }

/* Modales anidados de DataTables/Bootstrap con cuerpo claro */
.modal .table > thead > tr > th{ background:transparent; }
.modal-body .well{ background:var(--surface-2) !important; }

/* ================== SIDEBAR FORMAL (azul marino) ======================== */
/* Etiquetas de sección (PRINCIPAL, OPERACIÓN, …) */
.sidebar-menu > li.header{
    color:#8ea4c9 !important;
    background:transparent !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:16px 20px 7px !important;
    border-top:1px solid rgba(255,255,255,.06);
    margin-top:4px;
}
.sidebar-menu > li.header:first-child{ border-top:0; margin-top:0; }
/* Sub-encabezados dentro de un treeview (Cierres, DGT, Análisis…) */
.sidebar-menu .treeview-menu > li.header{
    color:#7f93b8 !important; border-top:0; padding:9px 14px 4px !important;
    font-size:9.5px !important; letter-spacing:.1em;
}

/* Ítem activo: barra de acento marino + fondo suave */
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a{
    box-shadow:inset 3px 0 0 var(--sidebar-accent) !important;
}
.sidebar-menu > li > a{ letter-spacing:.1px; }
/* íconos de los ítems: tono marino claro */
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > [class*="fa-"],
.sidebar-menu > li > a > .glyphicon{ color:#8aa0c8; }
.sidebar-menu > li:hover > a > [class*="fa-"],
.sidebar-menu > li.active > a > [class*="fa-"]{ color:#bcd2f7; }

/* Acentos especiales (antes iban con style inline) */
.sidebar-menu > li > a.nav-highlight{ color:#ffd98a !important; }
.sidebar-menu > li > a.nav-highlight > [class*="fa-"]{ color:#ffcf6b !important; }
.sidebar-menu .nav-dev, .sidebar-menu .nav-dev > span{ color:#c9b6f7 !important; }
.sidebar-menu .nav-dev > [class*="fa-"]{ color:#b79bf3 !important; }

/* Scrollbar del sidebar acorde al marino */
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); }

/* ================== DROPDOWN DE CUENTA (header) ========================= */
.main-header .hdr-acct > a.dropdown-toggle{
    display:flex; align-items:center; gap:8px;
}
.hdr-acct .user-image{ width:30px; height:30px; border-radius:50%; object-fit:cover; }
.hdr-acct-caret{ font-size:11px; color:var(--text-soft); }
.hdr-acct-menu{
    padding:0 !important; min-width:260px; overflow:hidden;
    border:1px solid var(--border) !important; border-radius:12px !important;
}
.hdr-acct-menu .hdr-acct-head{
    display:flex; align-items:center; gap:12px;
    padding:16px; color:#fff;
    background:linear-gradient(120deg, #0f2f5c, #1d4e89);
}
.hdr-acct-menu .hdr-acct-head .img-circle{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.35); }
.hdr-acct-menu .hdr-acct-info strong{ display:block; font-size:14px; line-height:1.2; }
.hdr-acct-menu .hdr-acct-info span{ font-size:12px; opacity:.85; }
.hdr-acct-menu .hdr-acct-section{ padding:6px; border-bottom:1px solid var(--border-soft); }
.hdr-acct-menu .hdr-acct-section a{
    display:flex; align-items:center; gap:10px;
    padding:9px 12px; border-radius:8px;
    color:var(--text) !important; font-size:13.5px; font-weight:500;
}
.hdr-acct-menu .hdr-acct-section a > [class*="fa-"]{ width:18px; text-align:center; color:var(--text-muted); }
.hdr-acct-menu .hdr-acct-section a:hover{ background:var(--primary-soft) !important; color:var(--primary) !important; }
.hdr-acct-menu .hdr-acct-section a:hover > [class*="fa-"]{ color:var(--primary); }
.hdr-acct-menu .hdr-acct-foot{ padding:10px 12px; }
.hdr-acct-menu .hdr-acct-foot .btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--surface-2) !important; color:var(--danger) !important;
    border:1px solid var(--border) !important; font-weight:600;
}
.hdr-acct-menu .hdr-acct-foot .btn:hover{ background:rgba(239,68,68,.10) !important; border-color:var(--danger) !important; }

/* Impresión: siempre en claro, independientemente del tema activo */
@media print{
    :root, :root[data-theme="dark"]{
        --bg:#ffffff; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f4f6fb;
        --border:#d7dbe6; --border-soft:#e7eaf3;
        --text:#0f172a; --text-muted:#334155; --text-soft:#64748b;
    }
    body, .content-wrapper, .wrapper{ background:#fff !important; color:#0f172a !important; }
    .main-sidebar, .main-header, .main-footer, .cu-theme-toggle{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
}