/*
* ================================================================
* GESTIONE — Override CSS v5.0 (estable)
* Light por defecto | Dark con body.theme-dark
*
* header.phtml — solo cuando logueado:
* Vendor->Session->get(PREFIX_SESI.'app_isLogin')): ?>
*
*
* ================================================================
*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');
/* ================================================================
VARIABLES — Light (default)
================================================================ */
:root {
--g-bg: #eaecf2; /* fondo general */
--g-bg2: #f4f5f9; /* tarjetas/paneles — blanco suavizado */
--g-bg3: #eef0f5; /* filas alternas, inputs */
--g-bg4: #e2e5ef; /* hover */
--g-bg5: #d5d9e8;
--g-border: rgba(0,0,0,.06);
--g-border2: rgba(0,0,0,.11);
--g-accent: #4f7ef8;
--g-accent-h: #3a6df0;
--g-accent-soft: rgba(79,126,248,.10);
--g-green: #0ab889;
--g-green-soft: rgba(10,184,137,.10);
--g-amber: #d97706;
--g-amber-soft: rgba(217,119,6,.10);
--g-red: #e53e3e;
--g-red-soft: rgba(229,62,62,.10);
--g-orange: #dd6b20;
--g-text: #1a202c;
--g-text2: #4a5568;
--g-text3: #a0aec0;
--g-font: 'Plus Jakarta Sans','Segoe UI','Helvetica Neue',Arial,sans-serif;
--g-t: all .15s ease;
}
/* ================================================================
VARIABLES — Dark
================================================================ */
body.theme-dark {
--g-bg: #0f1117;
--g-bg2: #161b27;
--g-bg3: #1e2535;
--g-bg4: #242c3d;
--g-bg5: #2e3850;
--g-border: rgba(255,255,255,.07);
--g-border2: rgba(255,255,255,.14);
--g-accent: #3b63c7;
--g-accent-h: #6b95fa;
--g-accent-soft: rgba(79,126,248,.13);
--g-green: #0a8f6a;
--g-green-soft: rgba(6,214,160,.12);
--g-amber: #b07d20;
--g-amber-soft: rgba(255,209,102,.12);
--g-red: #b83232;
--g-red-soft: rgba(255,107,107,.12);
--g-orange: #b8560a;
--g-text: #e8eaf6;
--g-text2: #8892b0;
--g-text3: #4a5568;
}
/* ================================================================
1. FUENTE GLOBAL
================================================================ */
body, input, select, textarea, button, label, td, th,
h1,h2,h3,h4,h5,h6, p, a, li, legend {
font-family: var(--g-font) !important;
}
/* Excluir span para no romper FontAwesome (fa fa-*) */
span:not([class*="fa"]):not([class*="glyphicon"]):not([class*="fal"]):not([class*="far"]):not([class*="fas"]):not([class*="fad"]) {
font-family: var(--g-font) !important;
}
/* ================================================================
2. HEADER
================================================================ */
#header {
background: var(--g-bg2) !important;
border-bottom: 1px solid var(--g-border) !important;
box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
-webkit-font-smoothing: antialiased !important;
}
#header #logo-group {
background: transparent !important;
border-right: 1px solid var(--g-border) !important;
}
#header .btn-header>span>a,
#header .btn-header span a {
background: var(--g-bg3) !important;
border: 1px solid var(--g-border) !important;
color: var(--g-text2) !important;
box-shadow: none !important;
}
#header .btn-header>span>a:hover,
#header .btn-header span a:hover { background: var(--g-bg4) !important; color: var(--g-text) !important; }
#header .header-search input[type="text"] { background: var(--g-bg3) !important; border: 1px solid var(--g-border2) !important; color: var(--g-text) !important; }
#header .header-search input::placeholder { color: var(--g-text3) !important; }
#header .header-search button { background: var(--g-accent) !important; border: none !important; color: #fff !important; }
#header .dropdown-menu,
#header ul.dropdown-menu { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; }
#header .dropdown-menu>li>a { color: var(--g-text2) !important; }
#header .dropdown-menu>li>a:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
#activity_cont { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; }
#activity_cont .notification-body li { border-bottom: 1px solid var(--g-border) !important; }
#activity_cont .notification-body li>a { background: transparent !important; color: var(--g-text2) !important; }
#activity_cont .notification-body li>a:hover { background: var(--g-bg3) !important; }
/* ================================================================
3. SIDEBAR
================================================================ */
#left-panel {
background: var(--g-bg2) !important;
border-right: 1px solid var(--g-border) !important;
box-shadow: none !important;
}
#left-panel .login-info { background: var(--g-bg2) !important; border-bottom: 1px solid var(--g-border) !important; }
#left-panel .login-info a { color: var(--g-text) !important; }
#left-panel nav ul li>a { color: var(--g-text2) !important; border: none !important; transition: var(--g-t) !important; text-shadow: none !important; -webkit-font-smoothing: antialiased !important; }
#left-panel nav ul li>a:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
#left-panel nav ul li.active>a,
#left-panel nav ul li.open>a { background: var(--g-accent-soft) !important; color: var(--g-accent) !important; box-shadow: none !important; }
#left-panel nav ul li>a i,
#left-panel nav ul li>a .fa,
#left-panel nav ul li>a .fas { color: inherit !important; }
#left-panel nav ul li.active>a .fa,
#left-panel nav ul li.active>a .fas { color: var(--g-accent) !important; }
#left-panel nav ul li>a .badge,
#left-panel nav ul li>a b.badge { background: var(--g-red) !important; color: #fff !important; }
#left-panel nav ul ul { background: var(--g-bg4) !important; border-left: 2px solid var(--g-accent-soft) !important; }
#left-panel nav ul ul li>a { color: var(--g-text2) !important; }
#left-panel nav ul ul li>a:hover { background: var(--g-bg4) !important; color: var(--g-text) !important; }
#left-panel nav ul ul li.active>a { background: var(--g-accent-soft) !important; color: var(--g-accent) !important; }
#left-panel nav ul li.nav-title { color: var(--g-text3) !important; }
#left-panel .minifyme { background: var(--g-bg3) !important; border: 1px solid var(--g-border) !important; }
/* ================================================================
4. MAIN / RIBBON
================================================================ */
#main { background: var(--g-bg) !important; }
#ribbon { background: var(--g-bg2) !important; border-bottom: 1px solid var(--g-border) !important; box-shadow: none !important; }
#ribbon .breadcrumb { background: transparent !important; }
#ribbon .breadcrumb li { color: var(--g-text3) !important; }
#ribbon .breadcrumb li a { color: var(--g-text2) !important; }
#ribbon .breadcrumb li a:hover { color: var(--g-accent) !important; }
#ribbon .breadcrumb>li+li::before { color: var(--g-text3) !important; }
#ribbon .breadcrumb .active { color: var(--g-text) !important; }
#cont-general-tabs-sys { background: var(--g-bg) !important; border: none !important; }
#cont-main-sys { background: var(--g-bg2) !important; border-top: 1px solid var(--g-border) !important; }
#cont-tabs-sys { background: var(--g-bg2) !important; border: 1px solid var(--g-border) !important; border-bottom: none !important; }
#cont-tabs-sys li { background: transparent !important; border: none !important; }
#cont-tabs-sys li a { background: transparent !important; color: var(--g-text2) !important; border: none !important; text-decoration: none !important; }
#cont-tabs-sys li a:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
#cont-tabs-sys li.ui-state-active a,
#cont-tabs-sys li.active a { background: var(--g-bg2) !important; color: var(--g-accent) !important; border-top: 2px solid var(--g-accent) !important; }
#cont-tabs-sys .ui-icon-close:hover { color: var(--g-red) !important; }
/* ================================================================
5. JARVISWIDGETS
================================================================ */
.jarviswidget,
.lv-container {
background: var(--g-bg2) !important;
border: 1px solid var(--g-border) !important;
box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}
.jarviswidget>header,
.lv-container>header,
.jarviswidget header[role="heading"] { background: var(--g-bg3) !important; border-bottom: 1px solid var(--g-border) !important; }
.jarviswidget>header h2,
.lv-container header h2 { color: var(--g-text) !important; }
.jarviswidget .widget-icon i,
.jarviswidget .widget-icon .fa { color: var(--g-accent) !important; }
.jarviswidget .widget-body,
.lv-container .widget-body { background: var(--g-bg2) !important; color: var(--g-text) !important; }
.jarviswidget > div,
.lv-container > div { background-color: var(--g-bg2) !important; border: 1px solid var(--g-border) !important; }
.lv-container header,
.lv-container > header {
border-color: var(--g-border) !important;
background: var(--g-bg3) !important;
color: var(--g-text) !important;
}
/* ================================================================
6. TABLAS
================================================================ */
.table { color: var(--g-text) !important; }
.table>thead>tr>th { background: var(--g-bg3) !important; border-color: var(--g-border) !important; color: var(--g-text2) !important; border-bottom: 2px solid var(--g-border) !important; }
.table>tbody>tr>td { border-color: var(--g-border) !important; color: var(--g-text) !important; }
.table-hover>tbody>tr:hover>td { background: var(--g-bg3) !important; }
.table-striped>tbody>tr:nth-of-type(odd)>td { background: rgba(0,0,0,.02) !important; }
.table>tbody>tr.active>td,
.table>tbody>tr.selected>td { background: var(--g-accent-soft) !important; }
.table-bordered,
.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>td { border-color: var(--g-border) !important; }
/* ================================================================
7. FULLGRID
================================================================ */
.fullgrid-dt-toolbar { background: var(--g-bg3) !important; border: 1px solid var(--g-border) !important; border-bottom: none !important; box-shadow: none !important; }
.fullgrid-dt-toolbar-footer { background: var(--g-bg3) !important; border: 1px solid var(--g-border) !important; border-top: none !important; color: var(--g-text3) !important; box-shadow: none !important; }
.fullgrid ul.ColVis_collection { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; }
.fullgrid ul.ColVis_collection li { background: var(--g-bg3) !important; border: 1px solid var(--g-border) !important; color: var(--g-text2) !important; box-shadow: none !important; filter: none !important; }
.fullgrid ul.ColVis_collection li:hover { background: var(--g-bg4) !important; color: var(--g-text) !important; }
table.fullgrid thead>tr>th,
.fullgrid thead th { background: var(--g-bg3) !important; border-color: var(--g-border) !important; color: var(--g-text2) !important; }
table.fullgrid thead .sorting_asc,
table.fullgrid thead .sorting_desc { background-color: var(--g-bg4) !important; }
table.fullgrid tbody>tr>td { background: var(--g-bg2) !important; border-color: var(--g-border) !important; color: var(--g-text) !important; }
table.fullgrid tbody>tr:hover>td { background: var(--g-bg3) !important; }
table.fullgrid tr td.sorting_1 { background: var(--g-bg3) !important; }
table.fullgrid tr td.sorting_2 { background: var(--g-bg4) !important; }
div.fullgrids_info,.fullgrid_info { color: var(--g-text3) !important; font-style: normal !important; }
/* ================================================================
8. FORMULARIOS
================================================================ */
.form-control,
input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="date"],input[type="time"],
input[type="tel"],input[type="url"],input[type="search"],
select,textarea {
background: var(--g-bg2) !important;
border: 1px solid var(--g-border2) !important;
color: var(--g-text) !important;
box-shadow: none !important;
}
.form-control:focus,
input[type="text"]:focus,input[type="email"]:focus,
input[type="password"]:focus,input[type="number"]:focus,
input[type="date"]:focus,input[type="time"]:focus,
input[type="tel"]:focus,select:focus,textarea:focus {
background: var(--g-bg2) !important;
border-color: var(--g-accent) !important;
box-shadow: 0 0 0 3px var(--g-accent-soft) !important;
outline: none !important;
}
.form-control::placeholder,input::placeholder,textarea::placeholder { color: var(--g-text3) !important; }
.form-control[disabled],.form-control[readonly],
input[disabled],input[readonly] { background: var(--g-bg3) !important; color: var(--g-text3) !important; }
label,.control-label { color: var(--g-text2) !important; font-weight: 500 !important; }
.form-actions { background: var(--g-bg3) !important; border-top: 1px solid var(--g-border) !important; }
fieldset { border: 1px solid var(--g-border) !important; }
legend { color: var(--g-text2) !important; border: none !important; }
.input-group-addon { background: var(--g-bg3) !important; border: 1px solid var(--g-border2) !important; color: var(--g-text2) !important; }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--g-accent) !important; }
/* ================================================================
9. BOTONES
================================================================ */
.btn { font-family: var(--g-font) !important; font-weight: 500 !important; box-shadow: none !important; transition: var(--g-t) !important; }
.btn:active { transform: scale(.97) !important; }
.btn-default { background: var(--g-bg3) !important; border-color: var(--g-border2) !important; color: var(--g-text2) !important; }
.btn-default:hover { background: var(--g-bg4) !important; color: var(--g-text) !important; }
.btn-primary { background: var(--g-accent) !important; border-color: var(--g-accent) !important; color: #fff !important; }
.btn-primary:hover { background: var(--g-accent-h) !important; border-color: var(--g-accent-h) !important; }
.btn-success { background: var(--g-green) !important; border-color: var(--g-green) !important; color: #fff !important; }
.btn-warning { background: var(--g-amber) !important; border-color: var(--g-amber) !important; color: #fff !important; }
.btn-danger { background: var(--g-red) !important; border-color: var(--g-red) !important; color: #fff !important; }
.btn-info { background: #38b2e0 !important; border-color: #38b2e0 !important; color: #fff !important; }
.btn-link { background: transparent !important; border-color: transparent !important; color: var(--g-accent) !important; }
.btn-orange { background: transparent !important; border-color: var(--g-orange) !important; color: var(--g-orange) !important; }
.btn-orange:hover { background: var(--g-orange) !important; color: #fff !important; }
/* ================================================================
10. MODALES
================================================================ */
.modal-content { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; color: var(--g-text) !important; }
.modal-header { background: var(--g-bg3) !important; border-bottom: 1px solid var(--g-border) !important; }
.modal-header .modal-title,
.modal-header h4 { color: var(--g-text) !important; font-weight: 600 !important; }
.modal-header .close { color: var(--g-text2) !important; opacity: 1 !important; text-shadow: none !important; }
.modal-header .close:hover { color: var(--g-red) !important; }
.modal-body { background: var(--g-bg2) !important; color: var(--g-text) !important; }
.modal-footer { background: var(--g-bg3) !important; border-top: 1px solid var(--g-border) !important; }
.modal-backdrop.in { opacity: .5 !important; }
/* ================================================================
11. ALERTS / BADGES / PANELS / MISC
================================================================ */
.alert-success { background: var(--g-green-soft) !important; border-color: var(--g-green) !important; color: var(--g-green) !important; }
.alert-warning { background: var(--g-amber-soft) !important; border-color: var(--g-amber) !important; color: var(--g-amber) !important; }
.alert-danger { background: var(--g-red-soft) !important; border-color: var(--g-red) !important; color: var(--g-red) !important; }
.alert-info { background: var(--g-accent-soft) !important; border-color: var(--g-accent) !important; color: var(--g-accent) !important; }
.label-default,.badge-default { background: var(--g-bg4) !important; color: var(--g-text2) !important; }
.label-primary,.badge-primary { background: var(--g-accent-soft) !important; color: var(--g-accent) !important; }
.label-success,.badge-success { background: var(--g-green-soft) !important; color: var(--g-green) !important; }
.label-warning,.badge-warning { background: var(--g-amber-soft) !important; color: var(--g-amber) !important; }
.label-danger,.badge-danger { background: var(--g-red-soft) !important; color: var(--g-red) !important; }
.label-info,.badge-info { background: var(--g-accent-soft) !important; color: var(--g-accent) !important; }
.panel { background: var(--g-bg2) !important; border: 1px solid var(--g-border) !important; box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; }
.panel-default .panel-heading { background: var(--g-bg3) !important; border-bottom: 1px solid var(--g-border) !important; color: var(--g-text) !important; }
.panel-default .panel-body { background: var(--g-bg2) !important; color: var(--g-text) !important; }
.panel-default .panel-footer { background: var(--g-bg3) !important; border-top: 1px solid var(--g-border) !important; color: var(--g-text2) !important; }
/* panel-danger/success/warning/info/primary: NO se pisan */
.well { background: var(--g-bg3) !important; border: 1px solid var(--g-border) !important; box-shadow: none !important; color: var(--g-text2) !important; }
.list-group-item { background: var(--g-bg2) !important; border-color: var(--g-border) !important; color: var(--g-text) !important; }
.list-group-item:hover { background: var(--g-bg3) !important; }
.list-group-item.active { background: var(--g-accent-soft) !important; border-color: var(--g-accent) !important; color: var(--g-accent) !important; }
.progress { background: var(--g-bg4) !important; box-shadow: none !important; }
.progress-bar { background: var(--g-accent) !important; box-shadow: none !important; }
.progress-bar-success { background: var(--g-green) !important; }
.progress-bar-warning { background: var(--g-amber) !important; }
.progress-bar-danger { background: var(--g-red) !important; }
.pagination>li>a,.pagination>li>span { background: var(--g-bg2) !important; border: 1px solid var(--g-border) !important; color: var(--g-text2) !important; }
.pagination>li>a:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
.pagination>.active>a,.pagination>.active>span { background: var(--g-accent) !important; border-color: var(--g-accent) !important; color: #fff !important; }
.pagination>.disabled>a { background: var(--g-bg3) !important; color: var(--g-text3) !important; }
.dropdown-menu { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; }
.dropdown-menu>li>a { color: var(--g-text2) !important; }
.dropdown-menu>li>a:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
.dropdown-menu>.active>a { background: var(--g-accent-soft) !important; color: var(--g-accent) !important; }
.divider { background: var(--g-border) !important; }
body.theme-dark .nav-tabs { border-bottom: 1px solid var(--g-border) !important; }
body.theme-dark .nav-tabs>li>a { background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; color: var(--g-text3) !important; }
body.theme-dark .nav-tabs>li>a:hover { background: transparent !important; border-color: transparent transparent var(--g-border2) !important; color: var(--g-text2) !important; }
body.theme-dark .nav-tabs>li.active>a { background: transparent !important; border-color: transparent transparent var(--g-accent) !important; color: var(--g-accent) !important; }
.tooltip-inner { background: var(--g-bg4) !important; border: 1px solid var(--g-border2) !important; color: var(--g-text) !important; }
.popover { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; }
.popover-title { background: var(--g-bg3) !important; border-bottom: 1px solid var(--g-border) !important; color: var(--g-text) !important; }
.popover-content { color: var(--g-text2) !important; }
/* ================================================================
12. CHOSEN / TREELST / tAutoComplete / TECLADO
================================================================ */
.chosen-container .chosen-single,
.chosen-container-single .chosen-single { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; color: var(--g-text) !important; box-shadow: none !important; height: 34px !important; line-height: 32px !important; padding: 0 0 0 10px !important; }
.chosen-container .chosen-drop { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; }
.chosen-container .chosen-search input[type="text"] { background: var(--g-bg3) !important; border: 1px solid var(--g-border2) !important; color: var(--g-text) !important; }
.chosen-container .chosen-results li { color: var(--g-text2) !important; }
.chosen-container .chosen-results li:hover,
.chosen-container .chosen-results li.highlighted { background: var(--g-bg3) !important; color: var(--g-text) !important; }
.chosen-container .chosen-results li.result-selected { background: var(--g-accent-soft) !important; color: var(--g-accent) !important; }
.chosen-container-multi .chosen-choices { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; box-shadow: none !important; }
.chosen-container-multi .chosen-choices li.search-choice { background: var(--g-accent-soft) !important; border: 1px solid var(--g-accent) !important; color: var(--g-accent) !important; box-shadow: none !important; }
.chosen-container-active .chosen-single,
.chosen-container-active .chosen-choices { border-color: var(--g-accent) !important; box-shadow: 0 0 0 3px var(--g-accent-soft) !important; }
.treelst-container .chosen-single,
.treelst-container-single .chosen-single,
.treelst .chosen-single {
background: var(--g-bg2) !important;
border: 1px solid var(--g-border2) !important;
color: var(--g-text) !important;
box-shadow: none !important;
height: 34px !important;
line-height: 32px !important;
padding: 0 0 0 10px !important;
}
.treelst-container-active .chosen-single {
border-color: var(--g-accent) !important;
box-shadow: 0 0 0 3px var(--g-accent-soft) !important;
}
.treelst-container .chosen-single div b,
.treelst .chosen-single div b { filter: none !important; }
.treelst-container .chosen-drop,
.treelst .chosen-drop { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; }
.treelst-container .chosen-search input[type="text"],
.treelst .chosen-search input[type="text"] { background: var(--g-bg3) !important; border: 1px solid var(--g-border2) !important; color: var(--g-text) !important; }
.treelst-container .chosen-results li,
.treelst .chosen-results li { color: var(--g-text2) !important; }
.treelst-container .chosen-results li:hover,
.treelst-container .chosen-results li.highlighted,
.treelst .chosen-results li:hover,
.treelst .chosen-results li.highlighted { background: var(--g-bg3) !important; color: var(--g-text) !important; }
.treelst-container .chosen-results li.result-selected,
.treelst .chosen-results li.result-selected { background: var(--g-accent-soft) !important; color: var(--g-accent) !important; }
.treelst-container .chosen-results li.disabled-result,
.treelst .chosen-results li.disabled-result { color: var(--g-text3) !important; }
body.theme-dark .treelst-container .chosen-single,
body.theme-dark .treelst-container-single .chosen-single,
body.theme-dark .treelst .chosen-single { background: var(--g-bg3) !important; border-color: var(--g-border2) !important; color: var(--g-text) !important; }
body.theme-dark .treelst-container .chosen-single div b,
body.theme-dark .treelst .chosen-single div b { filter: brightness(3) !important; }
body.theme-dark .treelst-container .chosen-drop,
body.theme-dark .treelst .chosen-drop { background: var(--g-bg2) !important; border-color: var(--g-border2) !important; }
body.theme-dark .treelst-container .chosen-results li,
body.theme-dark .treelst .chosen-results li { color: var(--g-text2) !important; }
body.theme-dark .treelst-container .chosen-results li:hover,
body.theme-dark .treelst .chosen-results li:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
.adropdown { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; }
.adropdown th { background: var(--g-bg3) !important; color: var(--g-text2) !important; }
.adropdown tr td { color: var(--g-text2) !important; border-bottom: 1px solid var(--g-border) !important; }
.adropdown tr:hover td { background: var(--g-bg3) !important; color: var(--g-text) !important; }
.adropdown .selectedxx td { background: var(--g-accent-soft) !important; color: var(--g-accent) !important; }
.lv-teclado button,.lv-teclado a.button { background: var(--g-bg3) !important; border: 1px solid var(--g-border2) !important; color: var(--g-text) !important; box-shadow: none !important; }
.lv-teclado .numpad button { background: var(--g-bg3) !important; border-right: 1px solid var(--g-border) !important; border-bottom: 1px solid var(--g-border) !important; color: var(--g-text) !important; }
.lv-teclado .numpad button:hover { background: var(--g-bg4) !important; }
.lv-teclado .numpad button:active { background: var(--g-accent) !important; color: #fff !important; }
/* ================================================================
13. DROPZONE / TAGSINPUT / CLOCKPICKER / JQUERY UI
================================================================ */
.dropzone { background: var(--g-bg3) !important; border: 2px dashed var(--g-border2) !important; color: var(--g-text2) !important; }
.dropzone:hover { background: var(--g-bg4) !important; border-color: var(--g-accent) !important; }
.bootstrap-tagsinput { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; box-shadow: none !important; color: var(--g-text) !important; }
.bootstrap-tagsinput input { background: transparent !important; color: var(--g-text) !important; }
.bootstrap-tagsinput .tag { background: var(--g-accent-soft) !important; border: 1px solid var(--g-accent) !important; color: var(--g-accent) !important; }
.bootstrap-tagsinput.focus { border-color: var(--g-accent) !important; box-shadow: 0 0 0 3px var(--g-accent-soft) !important; }
.clockpicker-plate { background: var(--g-bg3) !important; border: 1px solid var(--g-border2) !important; }
.clockpicker-tick:hover { background: var(--g-accent-soft) !important; color: var(--g-accent) !important; }
.clockpicker-canvas-fg,
.clockpicker-canvas-bg { fill: var(--g-accent) !important; }
.clockpicker-canvas-bearing { fill: var(--g-accent) !important; }
.clockpicker-canvas line { stroke: var(--g-accent) !important; }
.ui-widget { font-family: var(--g-font) !important; }
.ui-widget-content { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; color: var(--g-text) !important; }
.ui-widget-header { background: var(--g-bg3) !important; border: 1px solid var(--g-border) !important; color: var(--g-text) !important; }
.ui-state-default,
.ui-widget-content .ui-state-default { background: var(--g-bg3) !important; border: 1px solid var(--g-border) !important; color: var(--g-text2) !important; }
.ui-state-hover,
.ui-widget-content .ui-state-hover { background: var(--g-bg4) !important; color: var(--g-text) !important; }
.ui-state-active,
.ui-widget-content .ui-state-active { background: var(--g-accent) !important; border-color: var(--g-accent) !important; color: #fff !important; }
.ui-datepicker { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; }
.ui-datepicker .ui-datepicker-header { background: var(--g-bg3) !important; border: none !important; color: var(--g-text) !important; }
.ui-datepicker td a { background: transparent !important; border: none !important; color: var(--g-text2) !important; }
.ui-datepicker td a:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
.ui-datepicker td.ui-datepicker-current-day a { background: var(--g-accent) !important; color: #fff !important; }
.ui-autocomplete { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; }
.ui-menu-item,.ui-menu .ui-menu-item-wrapper { color: var(--g-text2) !important; }
.ui-menu-item:hover,.ui-menu .ui-state-focus { background: var(--g-bg3) !important; color: var(--g-text) !important; }
/* ================================================================
14. SMART NOTIFICATION / CHAT
================================================================ */
.divMessageBox { background: rgba(0,0,0,.5) !important; }
.MessageBoxContainer { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; color: var(--g-text) !important; }
.MessageBoxButtonSection button { background: var(--g-accent) !important; border: none !important; color: #fff !important; }
.SmallBox { border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,.25) !important; font-family: var(--g-font) !important; }
.SmallBox:hover { border: 1px solid rgba(255,255,255,.4) !important; }
.SmallBox span { font-family: var(--g-font) !important; font-weight: 500 !important; }
.SmallBox p { font-family: var(--g-font) !important; }
.bigBox { border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,.25) !important; font-family: var(--g-font) !important; }
.bigBox span { font-family: var(--g-font) !important; font-weight: 500 !important; }
.bigBox p { font-family: var(--g-font) !important; }
.chat-flotante-window { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; }
.chat-flotante-btn { background: var(--g-accent) !important; }
.chat-flotante-header { background: var(--g-bg3) !important; border-bottom: 1px solid var(--g-border) !important; }
.chat-flotante-messages { background: var(--g-bg) !important; }
.chat-message.assistant .message-bubble { background: var(--g-bg3) !important; color: var(--g-text) !important; }
.chat-message.user-chat .message-bubble { background: var(--g-accent) !important; color: #fff !important; }
.chat-flotante-input-container { background: var(--g-bg3) !important; border-top: 1px solid var(--g-border) !important; }
.chat-flotante-input { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; color: var(--g-text) !important; }
.chat-send-btn { background: var(--g-accent) !important; color: #fff !important; border: none !important; }
.chat-quick-btn { background: var(--g-bg4) !important; border: 1px solid var(--g-border) !important; color: var(--g-text2) !important; }
.chat-quick-btn:hover { background: var(--g-bg5) !important; color: var(--g-text) !important; }
.disambiguation-option { background: var(--g-bg3) !important; border: 1px solid var(--g-border) !important; }
.disambiguation-option:hover { background: var(--g-bg4) !important; border-color: var(--g-accent) !important; }
/* ================================================================
15. DARK MODE
================================================================ */
body.theme-dark { background-color: var(--g-bg) !important; color: var(--g-text) !important; }
html:has(body.theme-dark) { background-color: #0f1117 !important; }
body.theme-dark #header { background: var(--g-bg2) !important; }
body.theme-dark #left-panel { background: var(--g-bg2) !important; }
body.theme-dark #main { background: var(--g-bg) !important; }
body.theme-dark #ribbon { background: var(--g-bg2) !important; }
body.theme-dark #cont-general-tabs-sys { background: var(--g-bg) !important; }
body.theme-dark #cont-main-sys { background: var(--g-bg2) !important; }
body.theme-dark #cont-tabs-sys { background: var(--g-bg2) !important; }
body.theme-dark .jarviswidget { background: var(--g-bg2) !important; border-color: var(--g-border) !important; }
body.theme-dark .lv-container { background: var(--g-bg2) !important; border-color: var(--g-border) !important; }
body.theme-dark .widget-body { background: var(--g-bg2) !important; color: var(--g-text) !important; }
body.theme-dark .jarviswidget > div,
body.theme-dark .lv-container > div { background-color: var(--g-bg2) !important; border: 1px solid var(--g-border) !important; }
body.theme-dark .jarviswidget>header,
body.theme-dark .lv-container>header,
body.theme-dark .jarviswidget header[role="heading"] { background: var(--g-bg3) !important; border-color: var(--g-border) !important; }
body.theme-dark .jarviswidget>header h2,
body.theme-dark .lv-container header h2 { color: var(--g-text) !important; }
body.theme-dark .lv-container header,
body.theme-dark .lv-container > header { border-color: var(--g-border) !important; background: var(--g-bg3) !important; color: var(--g-text) !important; }
body.theme-dark h1,body.theme-dark h2,body.theme-dark h3,
body.theme-dark h4,body.theme-dark h5,body.theme-dark h6 { color: var(--g-text) !important; }
body.theme-dark .widget-body td,body.theme-dark .widget-body th,
body.theme-dark .widget-body p,body.theme-dark .widget-body span,
body.theme-dark .widget-body label { color: var(--g-text) !important; }
body.theme-dark .table>thead>tr>th { background: var(--g-bg3) !important; color: var(--g-text2) !important; border-color: var(--g-border) !important; }
body.theme-dark .table>tbody>tr>td { background: var(--g-bg2) !important; color: var(--g-text) !important; border-color: var(--g-border) !important; }
body.theme-dark .table-hover>tbody>tr:hover>td { background: var(--g-bg3) !important; }
body.theme-dark table.fullgrid tbody>tr>td { background: var(--g-bg2) !important; color: var(--g-text) !important; border-color: var(--g-border) !important; }
body.theme-dark table.fullgrid tbody>tr:hover>td { background: var(--g-bg3) !important; }
body.theme-dark table.fullgrid thead>tr>th { background: var(--g-bg3) !important; color: var(--g-text2) !important; border-color: var(--g-border) !important; }
body.theme-dark .fullgrid-dt-toolbar,
body.theme-dark .fullgrid-dt-toolbar-footer { background: var(--g-bg3) !important; border-color: var(--g-border) !important; }
body.theme-dark [style*="background: #F4F6FA"],
body.theme-dark [style*="background:#F4F6FA"],
body.theme-dark [style*="background: #f4f6fa"],
body.theme-dark [style*="background:#f4f6fa"] { background: var(--g-bg) !important; }
body.theme-dark [style*="background: #fff"],
body.theme-dark [style*="background:#fff"],
body.theme-dark [style*="background-color: #fff"],
body.theme-dark [style*="background-color:#fff"],
body.theme-dark [style*="background: white"],
body.theme-dark [style*="background-color: white"],
body.theme-dark [style*="background: rgb(255, 255, 255)"] { background: var(--g-bg2) !important; }
body.theme-dark .form-control,
body.theme-dark input[type="text"],body.theme-dark input[type="email"],
body.theme-dark input[type="password"],body.theme-dark input[type="number"],
body.theme-dark input[type="date"],body.theme-dark input[type="time"],
body.theme-dark input[type="tel"],body.theme-dark select,
body.theme-dark textarea { background: var(--g-bg3) !important; border-color: var(--g-border2) !important; color: var(--g-text) !important; }
body.theme-dark label,body.theme-dark .control-label { color: var(--g-text2) !important; }
body.theme-dark .form-actions { background: var(--g-bg3) !important; border-color: var(--g-border) !important; }
body.theme-dark fieldset { border-color: var(--g-border) !important; }
body.theme-dark legend { color: var(--g-text2) !important; }
body.theme-dark .chosen-container .chosen-single,
body.theme-dark .chosen-container-single .chosen-single { background: var(--g-bg3) !important; border-color: var(--g-border2) !important; color: var(--g-text) !important; }
body.theme-dark .chosen-container .chosen-single div b { filter: brightness(3) !important; }
body.theme-dark .chosen-container .chosen-drop { background: var(--g-bg2) !important; border-color: var(--g-border2) !important; }
body.theme-dark .chosen-container .chosen-results li { color: var(--g-text2) !important; }
body.theme-dark .chosen-container .chosen-results li:hover,
body.theme-dark .chosen-container .chosen-results li.highlighted { background: var(--g-bg3) !important; color: var(--g-text) !important; }
body.theme-dark .chosen-container-multi .chosen-choices { background: var(--g-bg3) !important; border-color: var(--g-border2) !important; }
body.theme-dark .btn-default { background: var(--g-bg3) !important; border-color: var(--g-border2) !important; color: var(--g-text2) !important; }
body.theme-dark .btn-default:hover { background: var(--g-bg4) !important; color: var(--g-text) !important; }
body.theme-dark .btn-dark { background-color: #2d3748 !important; border-color: #2d3748 !important; color: #e2e8f0 !important; }
body.theme-dark .btn-lime { background-color: #2d6e2d !important; border-color: #2d6e2d !important; color: #fff !important; }
body.theme-dark #left-panel nav ul li>a { color: var(--g-text2) !important; }
body.theme-dark #left-panel nav ul li>a:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
body.theme-dark #left-panel nav ul li.active>a { background: var(--g-accent-soft) !important; color: var(--g-accent) !important; }
body.theme-dark #left-panel nav ul ul { background: var(--g-bg) !important; }
body.theme-dark #left-panel .login-info { background: var(--g-bg2) !important; border-color: var(--g-border) !important; }
body.theme-dark #left-panel .login-info a { color: var(--g-text) !important; }
body.theme-dark #header .btn-header>span>a,
body.theme-dark #header .btn-header span a { background: var(--g-bg3) !important; border-color: var(--g-border) !important; color: var(--g-text2) !important; }
body.theme-dark #header .header-search input[type="text"] { background: var(--g-bg3) !important; color: var(--g-text) !important; }
body.theme-dark #header .dropdown-menu { background: var(--g-bg2) !important; border-color: var(--g-border2) !important; }
body.theme-dark #header .dropdown-menu>li>a { color: var(--g-text2) !important; }
body.theme-dark #header .dropdown-menu>li>a:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
body.theme-dark .dropdown-menu { background: var(--g-bg2) !important; border-color: var(--g-border2) !important; }
body.theme-dark .dropdown-menu>li>a { color: var(--g-text2) !important; }
body.theme-dark .dropdown-menu>li>a:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
body.theme-dark #cont-tabs-sys li a { color: var(--g-text2) !important; }
body.theme-dark #cont-tabs-sys li a:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
body.theme-dark #cont-tabs-sys li.ui-state-active a,
body.theme-dark #cont-tabs-sys li.active a { background: var(--g-bg) !important; color: var(--g-accent) !important; }
body.theme-dark .modal-content { background: var(--g-bg2) !important; border-color: var(--g-border2) !important; color: var(--g-text) !important; }
body.theme-dark .modal-header { background: var(--g-bg3) !important; border-color: var(--g-border) !important; }
body.theme-dark .modal-header .modal-title,
body.theme-dark .modal-header h4 { color: var(--g-text) !important; }
body.theme-dark .modal-body { background: var(--g-bg2) !important; color: var(--g-text) !important; }
body.theme-dark .modal-footer { background: var(--g-bg3) !important; border-color: var(--g-border) !important; }
body.theme-dark .panel { background: var(--g-bg2) !important; border-color: var(--g-border) !important; }
body.theme-dark .panel-default .panel-heading { background: var(--g-bg3) !important; color: var(--g-text) !important; }
body.theme-dark .panel-default .panel-body { background: var(--g-bg2) !important; color: var(--g-text) !important; }
body.theme-dark .well { background: var(--g-bg3) !important; border-color: var(--g-border) !important; color: var(--g-text2) !important; }
body.theme-dark.smart-style-0,body.theme-dark.smart-style-1,
body.theme-dark.smart-style-2,body.theme-dark.smart-style-3,
body.theme-dark.smart-style-4,body.theme-dark.smart-style-5,
body.theme-dark.smart-style-6 { background: var(--g-bg) !important; }
body.theme-dark.smart-style-0 #header,body.theme-dark.smart-style-1 #header,
body.theme-dark.smart-style-2 #header,body.theme-dark.smart-style-3 #header,
body.theme-dark.smart-style-4 #header,body.theme-dark.smart-style-5 #header,
body.theme-dark.smart-style-6 #header { background: var(--g-bg2) !important; }
body.theme-dark.smart-style-0 #left-panel,body.theme-dark.smart-style-1 #left-panel,
body.theme-dark.smart-style-2 #left-panel,body.theme-dark.smart-style-3 #left-panel,
body.theme-dark.smart-style-4 #left-panel,body.theme-dark.smart-style-5 #left-panel,
body.theme-dark.smart-style-6 #left-panel { background: var(--g-bg2) !important; }
/* ================================================================
16. MISC
================================================================ */
.lv-tr-bgcolor { background: var(--g-bg3) !important; background-image: none !important; }
#shortcut { background: var(--g-bg) !important; border-bottom: 1px solid var(--g-border) !important; }
#preloader { background: var(--g-bg) !important; }
#status { background: none !important; border-top-color: var(--g-accent) !important; }
#process-general { background: rgba(240,242,247,.85) !important; }
body.theme-dark #process-general { background: rgba(15,17,23,.85) !important; }
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next { background: var(--g-bg3) !important; border: 1px solid var(--g-border2) !important; color: var(--g-text2) !important; }
.owl-carousel .owl-dot.active span { background: var(--g-accent) !important; }
/* ================================================================
17. bg-color-* LIGHT
================================================================ */
.bg-color-purple,[class*="bg-color-purple"] { background-color: #6d28d9 !important; color: #fff !important; }
.bg-color-magenta,[class*="bg-color-magenta"] { background-color: #be185d !important; color: #fff !important; }
.bg-color-blue,[class*="bg-color-blue"] { background-color: #2563eb !important; color: #fff !important; }
.bg-color-blueDark,[class*="bg-color-blueDark"] { background-color: #1e40af !important; color: #fff !important; }
.bg-color-green,[class*="bg-color-green"] { background-color: #15803d !important; color: #fff !important; }
.bg-color-greenDark,[class*="bg-color-greenDark"] { background-color: #14532d !important; color: #fff !important; }
.bg-color-red,[class*="bg-color-red"] { background-color: #b91c1c !important; color: #fff !important; }
.bg-color-orange,[class*="bg-color-orange"] { background-color: #c2410c !important; color: #fff !important; }
.bg-color-yellow,[class*="bg-color-yellow"] { background-color: #a16207 !important; color: #fff !important; }
.bg-color-teal,[class*="bg-color-teal"] { background-color: #0f766e !important; color: #fff !important; }
.bg-color-pink,[class*="bg-color-pink"] { background-color: #db2777 !important; color: #fff !important; }
.bg-color-darken,[class*="bg-color-darken"] { background-color: #2d3748 !important; color: #fff !important; }
.well.bg-color-darken { background-color: #334155 !important; border: none !important; color: #fff !important; box-shadow: none !important; }
.bg-color-darken *,.well.bg-color-darken * { color: #fff !important; }
[class*="bg-color-"] { color: #fff !important; }
label[class*="bg-color-"],.label[class*="bg-color-"] { border-radius: 6px !important; font-size: 11px !important; font-weight: 600 !important; padding: 3px 8px !important; letter-spacing: .3px !important; }
.txt-color-white { color: #fff !important; }
.txt-color-black { color: #1a202c !important; }
.no-border,.well.no-border { border: none !important; box-shadow: none !important; }
/* ================================================================
18. bg-color-* DARK
================================================================ */
body.theme-dark .bg-color-red { background-color: #c0392b !important; }
body.theme-dark .bg-color-magenta { background-color: #a0295a !important; }
body.theme-dark .bg-color-pink { background-color: #a0295a !important; }
body.theme-dark .bg-color-blue { background-color: #2c5f8a !important; }
body.theme-dark .bg-color-blueDark { background-color: #2c4a6e !important; }
body.theme-dark .bg-color-green { background-color: #1e7a3e !important; }
body.theme-dark .bg-color-greenLight { background-color: #2d7a28 !important; }
body.theme-dark .bg-color-greenDark { background-color: #1a5c2a !important; }
body.theme-dark .bg-color-teal { background-color: #0f766e !important; }
body.theme-dark .bg-color-orange { background-color: #b84e0a !important; }
body.theme-dark .bg-color-yellow { background-color: #9a6c10 !important; }
body.theme-dark .bg-color-purple { background-color: #5b3a9e !important; }
body.theme-dark .bg-color-darken,.well.bg-color-darken { background-color: #1e293b !important; color: #e2e8f0 !important; }
body.theme-dark .bg-color-blueGrey { background-color: #2a3a4a !important; }
body.theme-dark .panel-danger { border-color: #7f1d1d !important; }
body.theme-dark .panel-danger .panel-heading { background-color: #7f1d1d !important; color: #fecaca !important; }
body.theme-dark .panel-success { border-color: #14532d !important; }
body.theme-dark .panel-success .panel-heading { background-color: #14532d !important; color: #bbf7d0 !important; }
body.theme-dark .panel-warning { border-color: #713f12 !important; }
body.theme-dark .panel-warning .panel-heading { background-color: #713f12 !important; color: #fef08a !important; }
body.theme-dark .panel-info { border-color: #1e3a5f !important; }
body.theme-dark .panel-info .panel-heading { background-color: #1e3a5f !important; color: #bfdbfe !important; }
/* ================================================================
19. HEADER TEXTS / ACTIVITY
================================================================ */
#header a,#header span,
#header .header-dropdown-list > li > a,
#header #ulRol > li > a,
#header #ulLang > li > a { color: var(--g-text) !important; -webkit-font-smoothing: antialiased !important; }
#header .sp-defaut-rol,#header #sp-defaut-local,
#header span.sp-defaut-rol,#header span#sp-defaut-local { color: var(--g-text) !important; font-weight: 500 !important; font-size: 13px !important; }
#header #ulRol li a { color: var(--g-text) !important; font-weight: 500 !important; }
#header .ul-rols,#header #ul-locales { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; }
#header .ul-rols > li > a,#header #ul-locales > li > a { color: var(--g-text) !important; font-size: 13px !important; }
#header .ul-rols > li > a:hover,#header #ul-locales > li > a:hover { background: var(--g-bg3) !important; color: var(--g-accent) !important; }
body.theme-dark #header a,body.theme-dark #header span,
body.theme-dark #header .sp-defaut-rol,body.theme-dark #header #sp-defaut-local,
body.theme-dark #header #ulRol li a { color: var(--g-text) !important; }
body.theme-dark #header .ul-rols,body.theme-dark #header #ul-locales { background: var(--g-bg2) !important; border-color: var(--g-border2) !important; }
body.theme-dark #header .ul-rols > li > a,body.theme-dark #header #ul-locales > li > a { color: var(--g-text2) !important; }
body.theme-dark #header .ul-rols > li > a:hover,body.theme-dark #header #ul-locales > li > a:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
#activity,#header #activity,#logo-group span#activity {
background-color: var(--g-bg3) !important; background-image: none !important;
border: 1px solid var(--g-border2) !important; color: var(--g-text2) !important; box-shadow: none !important;
}
#activity:hover,#header #activity:hover { background-color: var(--g-bg4) !important; cursor: pointer !important; }
#activity i,#activity .fa,#header #activity i { color: var(--g-text2) !important; font-size: 16px !important; }
#activity b.badge,#header #b_nots { background: var(--g-accent) !important; color: #fff !important; }
body.theme-dark #activity,body.theme-dark #header #activity,body.theme-dark #logo-group span#activity {
background-color: var(--g-bg3) !important; background-image: none !important; border-color: var(--g-border) !important; color: var(--g-text2) !important;
}
body.theme-dark #activity i,body.theme-dark #activity .fa { color: var(--g-text2) !important; }
/* ================================================================
20. NAV-TABS COMPLETO
================================================================ */
body.theme-dark .nav-tabs { border-bottom: 1px solid var(--g-border2) !important; background: transparent !important; }
body.theme-dark .nav-tabs > li > a { color: var(--g-text2) !important; border-radius: 0 !important; border-color: transparent !important; background: transparent !important; -webkit-font-smoothing: antialiased !important; }
body.theme-dark .nav-tabs > li > a:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus { background: var(--g-bg2) !important; color: var(--g-accent) !important; border-color: var(--g-border) var(--g-border) transparent !important; box-shadow: 0 -2px 0 var(--g-accent) !important; font-weight: 600 !important; }
body.theme-dark .tab-content { background: transparent !important; }
body.theme-dark .nav-tabs.bordered { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; }
body.theme-dark .nav-tabs.bordered + .tab-content { background: var(--g-bg2) !important; border: 1px solid var(--g-border2) !important; border-top: none !important; }
body.theme-dark .tabs-left > .nav-tabs { float: left !important; margin-right: 16px !important; border-right: 1px solid var(--g-border2) !important; border-bottom: 0 !important; }
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus { border-color: var(--g-border2) transparent var(--g-border2) var(--g-border) !important; box-shadow: -2px 0 0 var(--g-accent) !important; }
body.theme-dark .tabs-right > .nav-tabs { float: right !important; margin-left: 16px !important; border-left: 1px solid var(--g-border2) !important; border-bottom: 0 !important; }
.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover { border-color: var(--g-border2) var(--g-border) var(--g-border2) transparent !important; box-shadow: 2px 0 0 var(--g-accent) !important; }
body.theme-dark .tabs-below > .nav-tabs { border-top: 1px solid var(--g-border2) !important; border-bottom: 0 !important; }
body.theme-dark .tabs-below > .nav-tabs > .active > a { border-color: transparent var(--g-border2) var(--g-border2) !important; box-shadow: 0 2px 0 var(--g-accent) !important; }
body.theme-dark .tabs-pull-right.nav-tabs > li { float: right !important; }
.nav-pills > li > a { color: var(--g-text2) !important; background: var(--g-bg3) !important; border: 1px solid var(--g-border2) !important; }
.nav-pills > li > a:hover { background: var(--g-bg4) !important; color: var(--g-text) !important; }
.nav-pills > li.active > a { background: var(--g-accent) !important; border-color: var(--g-accent) !important; color: #fff !important; }
body.theme-dark .nav-tabs { border-bottom-color: var(--g-border2) !important; }
body.theme-dark .nav-tabs > li > a { color: var(--g-text2) !important; }
body.theme-dark .nav-tabs > li > a:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
body.theme-dark .nav-tabs > li.active > a,
body.theme-dark .nav-tabs > li.active > a:hover,
body.theme-dark .nav-tabs > li.active > a:focus { background: var(--g-bg2) !important; color: var(--g-accent) !important; box-shadow: 0 -2px 0 var(--g-accent) !important; }
body.theme-dark .nav-tabs.bordered { background: var(--g-bg2) !important; border-color: var(--g-border2) !important; }
body.theme-dark .nav-tabs.bordered + .tab-content { background: var(--g-bg2) !important; border-color: var(--g-border2) !important; }
body.theme-dark .nav-pills > li > a { color: var(--g-text2) !important; background: var(--g-bg3) !important; border-color: var(--g-border2) !important; }
body.theme-dark .nav-pills > li.active > a { background: var(--g-accent) !important; color: #fff !important; }
/* ================================================================
21. RESPONSIVE
================================================================ */
@media (max-width: 768px) {
#cont-tabs-sys { overflow-x: auto !important; flex-wrap: nowrap !important; }
.table-responsive { overflow-x: auto !important; }
.modal-body { max-height: 65vh !important; overflow-y: auto !important; }
}
/* ================================================================
DARK MODE — amCharts texto blanco en gráficos
amCharts usa SVG con elementos y etiquetas
================================================================ */
body.theme-dark [id*="chart"] text,
body.theme-dark [id*="Chart"] text,
body.theme-dark [class*="chart"] text,
body.theme-dark [class*="Chart"] text,
body.theme-dark div[id*="chart"] svg text,
body.theme-dark div[id*="Chart"] svg text { fill: #e8eaf6 !important; }
/* amCharts crea divs con prefijo "chartdiv" o similares */
body.theme-dark svg text { fill: #e8eaf6 !important; }
body.theme-dark svg tspan { fill: #e8eaf6 !important; }
/* Ejes y grid lines más suaves */
body.theme-dark svg line,
body.theme-dark svg path.amcharts-grid-line { stroke: rgba(255,255,255,.1) !important; }
/* FIX DARK: inputs de filtro en fullgrid — borde sutil */
body.theme-dark table.fullgrid input[type="text"],
body.theme-dark table.fullgrid input[type="search"],
body.theme-dark table.fullgrid input,
body.theme-dark .fullgrid-dt-toolbar input[type="text"],
body.theme-dark .fullgrid-dt-toolbar input {
background: var(--g-bg3) !important;
border: 1px solid var(--g-border) !important;
color: var(--g-text) !important;
box-shadow: none !important;
}
/* FIX DARK: bordes de th/td en fullgrid — eliminar líneas blancas */
body.theme-dark table.fullgrid th,
body.theme-dark table.fullgrid td,
body.theme-dark table.fullgrid thead > tr > th,
body.theme-dark table.fullgrid tbody > tr > td {
border-color: var(--g-border) !important;
}
body.theme-dark table.fullgrid,
body.theme-dark table.fullgrid > thead,
body.theme-dark table.fullgrid > tbody {
border-color: var(--g-border) !important;
}
/* FIX DARK: th con position:relative en fullgrid — borde blanco de SmartAdmin */
body.theme-dark th[style*="position: relative"],
body.theme-dark th[style*="position:relative"] {
border-color: var(--g-border) !important;
box-shadow: none !important;
outline: none !important;
}
/* FIX DARK: pseudo-elementos en th con position:relative causan borde blanco */
body.theme-dark th[style*="position"]::after,
body.theme-dark th[style*="position"]::before { display: none !important; }
body.theme-dark table.fullgrid th::after,
body.theme-dark table.fullgrid th::before { display: none !important; }
/* FIX DARK: th con position:relative del fullgrid/DataTables
El resize handle de columnas expone border #CCC de jarviswidget>div */
body.theme-dark table.fullgrid thead tr th[style],
body.theme-dark table.fullgrid thead tr th {
border-color: var(--g-border) !important;
border-right-color: var(--g-border) !important;
border-left-color: var(--g-border) !important;
border-bottom-color: var(--g-border2) !important;
}
body.theme-dark .jarviswidget > div,
body.theme-dark .lv-container > div {
border-right-color: var(--g-border) !important;
border-bottom-color: var(--g-border) !important;
border-left-color: var(--g-border) !important;
}
/* FIX DARK: th de fila de filtros del fullgrid
fullgrid.jquery.js asigna position:relative via JS en addTrSearchCols
Eso expone el border #CCC de jarviswidget>div como línea blanca */
body.theme-dark table.fullgrid thead tr:nth-child(2) th,
body.theme-dark table.fullgrid thead tr:last-child th,
body.theme-dark table.fullgrid thead tr th[style*="position"] {
border-color: var(--g-border) !important;
border-top-color: var(--g-border) !important;
border-bottom-color: var(--g-border) !important;
border-left-color: var(--g-border) !important;
border-right-color: var(--g-border) !important;
background-color: var(--g-bg3) !important;
}
/* FIX DARK: th con position:relative del fullgrid — borde blanco
El stacking context del th expone el borde de jarviswidget>div (#CCC)
Se pisa con outline:none y box-shadow:none + border del tema */
body.theme-dark table.fullgrid thead tr th[style*="position: relative"],
body.theme-dark table.fullgrid thead tr th.hasinput {
border: 1px solid var(--g-border) !important;
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
/* Pisar también el pseudo-elemento que genera el borde */
body.theme-dark table.fullgrid thead tr th[style*="position: relative"]::before,
body.theme-dark table.fullgrid thead tr th[style*="position: relative"]::after,
body.theme-dark table.fullgrid thead tr th.hasinput::before,
body.theme-dark table.fullgrid thead tr th.hasinput::after {
border-color: var(--g-border) !important;
background: transparent !important;
}
/* FIX: quitar border-bottom 2px en th del fullgrid en dark */
body.theme-dark .table>thead>tr>th {
border-bottom: 1px solid var(--g-border) !important;
}
/* FIX: Bootstrap table-bordered border #ddd en dark */
body.theme-dark .table-bordered,
body.theme-dark .table-bordered > thead > tr > th,
body.theme-dark .table-bordered > thead > tr > td,
body.theme-dark .table-bordered > tbody > tr > th,
body.theme-dark .table-bordered > tbody > tr > td,
body.theme-dark .table-bordered > tfoot > tr > th,
body.theme-dark .table-bordered > tfoot > tr > td {
border: 1px solid var(--g-border) !important;
}
body.theme-dark .table-bordered > thead > tr > th {
border-bottom: 1px solid var(--g-border) !important;
}
/* FIX: bordes derecho e inferior del jarviswidget>div en dark */
body.theme-dark .jarviswidget > div,
body.theme-dark .lv-container > div {
border-right-color: var(--g-border) !important;
border-bottom-color: var(--g-border) !important;
border-left-color: var(--g-border) !important;
border-top-color: var(--g-border) !important;
}
/* FIX: jarviswidget>div tiene border-width:1px 1px 2px y colores #CCC hardcodeados */
body.theme-dark .jarviswidget > div {
border-width: 1px !important;
border-style: solid !important;
border-color: var(--g-border) !important;
border-top: none !important;
border-right-color: var(--g-border) !important;
border-bottom-color: var(--g-border) !important;
border-left-color: var(--g-border) !important;
}
/* FIX DARK: lv-container-green y variantes de color custom */
body.theme-dark .lv-container-green {
background: #1a2e1a !important;
border-color: #2d4a2d !important;
color: var(--g-text) !important;
}
body.theme-dark .lv-container-green input,
body.theme-dark .lv-container-green select,
body.theme-dark .lv-container-green .form-control {
background: var(--g-bg3) !important;
border-color: var(--g-border2) !important;
color: var(--g-text) !important;
}
/* FIX DARK: fondo blanco debajo del contenido cuando es corto */
body.theme-dark #cont-main-sys,
body.theme-dark #cont-main-sys > div,
body.theme-dark #cont-main-sys > .tab-pane,
body.theme-dark #cont-main-sys > .tab-content,
body.theme-dark .tab-content,
body.theme-dark .tab-pane { background-color: var(--g-bg2) !important; }
body.theme-dark #content-sys,
body.theme-dark #cont-general-tabs-sys { background-color: var(--g-bg) !important; }
/* FIX DARK: jQuery UI agrega ui-widget-content con background:#fff
al #cont-general-tabs-sys */
body.theme-dark #cont-general-tabs-sys.ui-widget-content,
body.theme-dark #cont-general-tabs-sys.ui-widget,
body.theme-dark #cont-general-tabs-sys.ui-tabs { background-color: var(--g-bg) !important; }
/* FIX DARK: lv-breadcrumb — flechas de navegación */
body.theme-dark .lv-breadcrumb a {
background: #2d3a4a !important;
color: var(--g-text2) !important;
text-shadow: none !important;
}
body.theme-dark .lv-breadcrumb a:hover {
background: #3a4a5c !important;
color: var(--g-text) !important;
}
body.theme-dark .lv-breadcrumb a::before {
border-color: #2d3a4a transparent !important;
}
body.theme-dark .lv-breadcrumb a:hover::before {
border-color: #3a4a5c transparent !important;
}
body.theme-dark .lv-breadcrumb a::after {
border-left-color: #2d3a4a !important;
}
body.theme-dark .lv-breadcrumb a:hover::after {
border-left-color: #3a4a5c !important;
}
/* Último item (activo) */
body.theme-dark .lv-breadcrumb li:nth-last-child(1) a {
background: var(--g-bg4) !important;
color: var(--g-text) !important;
}
body.theme-dark .lv-breadcrumb li:nth-last-child(1) a::after {
border-left-color: var(--g-bg4) !important;
}
body.theme-dark .lv-breadcrumb li:nth-last-child(1) a::before {
border-color: var(--g-bg4) transparent !important;
}
/* Primer item (home icon) mantiene el amarillo pero apagado */
body.theme-dark .lv-breadcrumb li:first-child a {
background: #8a6a10 !important;
}
body.theme-dark .lv-breadcrumb li:first-child a::before {
border-color: #8a6a10 transparent !important;
}
body.theme-dark .lv-breadcrumb li:first-child a::after {
border-left-color: #8a6a10 !important;
}
/* ================================================================
DARK MODE — SweetAlert2 (swal2-*)
================================================================ */
body.theme-dark .swal2-popup {
background: var(--g-bg2) !important;
color: var(--g-text) !important;
border: 1px solid var(--g-border2) !important;
box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
body.theme-dark .swal2-title { color: var(--g-text) !important; }
body.theme-dark .swal2-content,
body.theme-dark .swal2-html-container { color: var(--g-text2) !important; }
body.theme-dark .swal2-footer { border-top-color: var(--g-border) !important; color: var(--g-text3) !important; }
body.theme-dark .swal2-close { color: var(--g-text3) !important; }
body.theme-dark .swal2-close:hover { color: var(--g-red) !important; }
/* Botones SweetAlert2 */
body.theme-dark .swal2-styled.swal2-confirm { background-color: var(--g-btn-success) !important; }
body.theme-dark .swal2-styled.swal2-cancel { background-color: var(--g-bg4) !important; color: var(--g-text) !important; }
body.theme-dark .swal2-styled.swal2-deny { background-color: var(--g-btn-danger) !important; }
/* Iconos */
body.theme-dark .swal2-icon.swal2-warning { border-color: var(--g-amber) !important; color: var(--g-amber) !important; }
body.theme-dark .swal2-icon.swal2-error { border-color: var(--g-red) !important; color: var(--g-red) !important; }
body.theme-dark .swal2-icon.swal2-success { border-color: var(--g-green) !important; color: var(--g-green) !important; }
body.theme-dark .swal2-icon.swal2-info { border-color: #38b2e0 !important; color: #38b2e0 !important; }
body.theme-dark .swal2-icon.swal2-question { border-color: var(--g-text3) !important; color: var(--g-text3) !important; }
/* Input dentro del popup */
body.theme-dark .swal2-input,
body.theme-dark .swal2-textarea,
body.theme-dark .swal2-select { background: var(--g-bg3) !important; border-color: var(--g-border2) !important; color: var(--g-text) !important; }
/* Fondo oscuro del backdrop */
body.theme-dark .swal2-container.swal2-backdrop-show { background: rgba(0,0,0,.7) !important; }
/* ================================================================
DARK MODE — POS / Pantalla de pago
================================================================ */
/* Modal body con background:#FAFAFA inline */
body.theme-dark [style*="background: #FAFAFA"],
body.theme-dark [style*="background:#FAFAFA"],
body.theme-dark [style*="background: #fafafa"],
body.theme-dark [style*="background:#fafafa"] { background-color: var(--g-bg2) !important; }
/* Contenedor de métodos de pago y líneas */
body.theme-dark .paymentmethods-container { background: var(--g-bg2) !important; }
body.theme-dark .paymentlines { background: var(--g-bg3) !important; border-color: var(--g-border) !important; }
body.theme-dark #d_fpago_add { background: var(--g-bg3) !important; }
/* Bordes inline #e9e9e9 */
body.theme-dark [style*="border-right: 1px solid #e9e9e9"],
body.theme-dark [style*="border-bottom: 1px solid #e9e9e9"],
body.theme-dark [style*="border-top: 1px solid #e9e9e9"] { border-color: var(--g-border) !important; }
/* nav-pills de métodos de pago (DEPOSITO, EFECTIVO, PLIN...) */
body.theme-dark #d_forma_pago .nav-pills > li > a,
body.theme-dark .nav-pills > li > a {
background: var(--g-bg3) !important;
border: 1px solid var(--g-border2) !important;
color: var(--g-text2) !important;
}
body.theme-dark #d_forma_pago .nav-pills > li.active > a,
body.theme-dark .nav-pills > li.active > a {
background: var(--g-accent) !important;
border-color: var(--g-accent) !important;
color: #fff !important;
}
/* Items de pago agregados (TARJETA DE... 2.00, EFECTIVO 122.60) */
body.theme-dark .paymentlines .row,
body.theme-dark #d_fpago_add .row,
body.theme-dark #d_fpago_add > div { background: var(--g-bg3) !important; color: var(--g-text) !important; }
/* Teclado numérico */
body.theme-dark .lv-teclado,
body.theme-dark [id*="teclado"],
body.theme-dark [class*="teclado"] { background: var(--g-bg2) !important; border-color: var(--g-border) !important; }
/* ================================================================
DARK MODE — Módulo Habitaciones (Bootstrap Cards + Accordion)
================================================================ */
body.theme-dark .card {
background: var(--g-bg2) !important;
border-color: var(--g-border) !important;
color: var(--g-text) !important;
}
body.theme-dark .card-header {
background: var(--g-bg3) !important;
border-color: var(--g-border) !important;
color: var(--g-text) !important;
}
body.theme-dark .card-header a,
body.theme-dark .card-header .card-title { color: var(--g-text) !important; }
body.theme-dark .card-body {
background: var(--g-bg2) !important;
color: var(--g-text) !important;
}
/* card-title con color:#000;background:#fff hardcodeado */
body.theme-dark .card-title[style*="background:#fff"],
body.theme-dark .card-title[style*="background: #fff"],
body.theme-dark h5.card-title {
background: #1a202c !important;
color: var(--g-text) !important;
}
body.theme-dark .card-text { color: var(--g-text2) !important; }
body.theme-dark .collapse { background: var(--g-bg2) !important; }
/* Accordion pisos — header púrpura (bg-color-purple via SmartAdmin) */
body.theme-dark .card > .card-header[class*="bg-color-purple"],
body.theme-dark .card-header._piso_acco {
background: #3b1a6e !important;
color: #e9d5ff !important;
}
/* badge en el header del piso */
body.theme-dark .badge-dark { background: var(--g-bg4) !important; color: var(--g-text) !important; }
body.theme-dark .badge-secondary { background: var(--g-bg5) !important; color: var(--g-text2) !important; }
/* FIX DARK: paymentline (líneas de pago en POS) */
body.theme-dark .paymentline,
body.theme-dark .paymentline.selected {
background: var(--g-bg3) !important;
border-color: var(--g-border) !important;
color: var(--g-text) !important;
}
body.theme-dark .paymentline.selected {
background: var(--g-bg4) !important;
border-left: 3px solid var(--g-accent) !important;
}
body.theme-dark .payment-name { color: var(--g-text) !important; }
body.theme-dark .payment-amount { color: var(--g-text2) !important; }
body.theme-dark .paymentlines { background: var(--g-bg2) !important; }
/* ================================================================
DARK MODE — Recepcion/Ingreso: cards habitaciones + leyenda
================================================================ */
/* Cards de habitaciones con color_estado inline */
body.theme-dark .d_dormitorio_,
body.theme-dark .card.d_dormitorio_ { filter: brightness(0.6) saturate(0.8) !important; }
body.theme-dark .card.d_dormitorio_ .card-title,
body.theme-dark .card.d_dormitorio_ h5 { filter: brightness(1.6) !important; color: #fff !important; }
body.theme-dark .card.d_dormitorio_ .card-text { filter: brightness(1.6) !important; color: #fff !important; }
/* Dropdown items dentro de habitaciones */
body.theme-dark .dropdown-item { background: var(--g-bg2) !important; color: var(--g-text2) !important; }
body.theme-dark .dropdown-item:hover { background: var(--g-bg3) !important; color: var(--g-text) !important; }
body.theme-dark .dropdown-menu { background: var(--g-bg2) !important; border-color: var(--g-border2) !important; }
/* Tabla Estado y Tipo (leyenda inferior) */
body.theme-dark #tb_estado,
body.theme-dark #tb_tipo { background: var(--g-bg2) !important; color: var(--g-text) !important; }
body.theme-dark #tb_estado tr,
body.theme-dark #tb_tipo tr { background: var(--g-bg2) !important; color: var(--g-text) !important; }
body.theme-dark #tb_estado td,
body.theme-dark #tb_tipo td { color: var(--g-text) !important; border-color: var(--g-border) !important; }
body.theme-dark .todo-group-title { color: var(--g-text2) !important; }
/* tr_estado selected background naranja — dejar intacto (es funcional) */
body.theme-dark .tr_estado { cursor: pointer !important; }
/* Tab pisos (Piso:1, Piso:2...) */
body.theme-dark #INGA__d_piso .nav-tabs > li > a,
body.theme-dark [id*="d_piso"] .nav-tabs > li > a { color: var(--g-text2) !important; }
body.theme-dark [id*="d_piso"] .nav-tabs > li.active > a { color: var(--g-accent) !important; }
/* FIX DARK: teclado.css define paymentline con background:#e2e2e2
y paymentline.selected con background:white */
body.theme-dark .paymentline {
background: var(--g-bg3) !important;
border-color: var(--g-border) !important;
color: var(--g-text) !important;
}
body.theme-dark .paymentline.selected {
background: var(--g-bg4) !important;
border-color: var(--g-accent) !important;
color: var(--g-text) !important;
}
body.theme-dark .paymentlines-container {
background: var(--g-bg2) !important;
border-color: var(--g-border) !important;
}
/* FIX DARK: cards de habitaciones con background inline (color_estado) */
body.theme-dark .card.d_dormitorio_,
body.theme-dark .card.d_servicio_ {
background: var(--g-bg3) !important;
border-color: var(--g-border) !important;
}
body.theme-dark .card.d_dormitorio_ .card-title,
body.theme-dark .card.d_servicio_ .card-title {
background: var(--g-bg3) !important;
color: var(--g-text) !important;
}
body.theme-dark .card.d_dormitorio_ .card-text,
body.theme-dark .card.d_servicio_ .card-text { color: var(--g-text2) !important; }
/* tr_estado con background:#fff via JS */
body.theme-dark .tr_estado { background: var(--g-bg3) !important; }
/* FIX DARK: tr_estado_h y todo-group-title en recepcion/ingreso */
body.theme-dark .tr_estado_h td,
body.theme-dark .tr_estado_h,
body.theme-dark .todo-group-title {
background: var(--g-bg3) !important;
color: var(--g-text2) !important;
border-color: var(--g-border) !important;
}
/* FIX DARK: todo-group-title dentro de table-bordered */
body.theme-dark table .tr_estado_h > td,
body.theme-dark table .tr_estado_h > td > h5,
body.theme-dark table .tr_estado_h > td > .todo-group-title,
body.theme-dark h5.todo-group-title,
body.theme-dark .todo-group-title {
background-color: var(--g-bg3) !important;
color: var(--g-text2) !important;
border-color: var(--g-border) !important;
}
/* FIX DARK: inputs readonly con color:#000 hardcodeado inline */
body.theme-dark input[style*="color: #000"],
body.theme-dark input[style*="color:#000"] {
color: var(--g-text) !important;
}
/* FIX: lv-disabled — color azul negrita (Bootstrap .form-control tiene color:#555) */
.form-control.lv-disabled,
input.lv-disabled,
input.lv-disabled[readonly],
select.lv-disabled {
color: #1d4ed8 !important;
font-weight: 700 !important;
opacity: 1 !important;
}
body.theme-dark .form-control.lv-disabled,
body.theme-dark input.lv-disabled,
body.theme-dark input.lv-disabled[readonly],
body.theme-dark select.lv-disabled {
color: #93c5fd !important;
font-weight: 700 !important;
opacity: 1 !important;
}
/* FIX DARK: .todo-group-title tiene background:#fafafa en SmartAdmin */
body.theme-dark .todo-group-title,
body.theme-dark table .todo-group-title,
body.theme-dark .tr_estado_h td .todo-group-title {
background: var(--g-bg3) !important;
border-color: var(--g-border) !important;
color: var(--g-text2) !important;
}
/* FIX: inputs readonly sin lv-disabled — texto azul negrita */
.form-control[readonly],
input.form-control[readonly] {
color: #1d4ed8 !important;
font-weight: 700 !important;
opacity: 1 !important;
}
body.theme-dark .form-control[readonly],
body.theme-dark input.form-control[readonly] {
color: #93c5fd !important;
font-weight: 700 !important;
opacity: 1 !important;
}
/* FIX DARK: h1.page-title con txt-color-blueDark — texto oscuro invisible */
body.theme-dark .page-title,
body.theme-dark .page-title span,
body.theme-dark h1.txt-color-blueDark,
body.theme-dark .txt-color-blueDark { color: var(--g-text2) !important; }
/* LIGHT MODE: suavizar solo el fondo general, sin tocar paneles ni colores */
body:not(.theme-dark) { background-color: #e8eaef !important; }
body:not(.theme-dark) #main,
body:not(.theme-dark) #content,
body:not(.theme-dark) #content-sys { background-color: #e8eaef !important; }
/* FIX LIGHT: texto en jarviswidget header visible */
.jarviswidget > header span,
.jarviswidget > header .widget-toolbar span,
.jarviswidget-ctrls span { color: var(--g-text2) !important; }
/* FIX LIGHT: labels con mejor contraste */
.label-success { background-color: #1a7a3c !important; color: #fff !important; font-weight: 600 !important; }
.label-warning { background-color: #b45309 !important; color: #fff !important; font-weight: 600 !important; }
.label-danger { background-color: #b91c1c !important; color: #fff !important; font-weight: 600 !important; }
.label-info { background-color: #0e6fa0 !important; color: #fff !important; font-weight: 600 !important; }
.label-default { background-color: #4b5563 !important; color: #fff !important; font-weight: 600 !important; }