/* ===================================================================== CONET — TEMA OSCURO GLOBAL (panel de administración / cajero) --------------------------------------------------------------------- Un solo archivo para que TODO el sistema tenga el mismo tema oscuro que las pantallas Suspendidos y Bajas, con una paleta semántica y disciplinada (nada de carnaval de colores): VERDE (neón CONET) = al día · activo · pagado · cobrar · éxito NARANJA (ámbar) = suspendido · atención ROJO (coral) = baja · deuda · gasto · peligro CIAN (info) = dato neutro / resaltados (uso moderado) NAVY (marca) = fondo y chrome Todo está acotado a `.sidebar-mini` (el del staff). Las pantallas del CLIENTE traen su propio y NO se ven afectadas. Se carga DESPUÉS de conet-branding.css (header/sidebar ya venían oscuros de ahí; acá se oscurece el ÁREA DE CONTENIDO, que era blanca). ===================================================================== */ .sidebar-mini { /* Chrome / superficies (escala navy) */ --bg: #02111b; /* fondo de la app */ --surface: #0a1a28; /* cajas / paneles */ --surface-2: #0e2336; /* elevado / hover */ --brand: #00204a; /* navy de marca (headers de caja y tabla) */ --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.14); /* Texto */ --text: #e7eef3; --text-soft: #cdd8e0; --muted: #b4c2cc; /* Acentos semánticos */ --verde: #c3f53b; /* positivo / marca */ --verde-2: #9fd826; --naranja: #ffa94d; /* atención / suspendido */ --rojo: #ff5c5c; /* peligro / baja / deuda */ --cian: #45c8f0; /* info neutro */ /* Resplandor (glow) de los botones/acentos */ --glow-verde: 0 0 12px rgba(195,245,59,0.35); --glow-rojo: 0 0 12px rgba(255,92,92,0.35); --glow-naranja:0 0 12px rgba(255,169,77,0.35); --glow-cian: 0 0 12px rgba(69,200,240,0.30); } /* ===================================================================== 1) FONDO Y ENCABEZADO DE CONTENIDO ===================================================================== */ .sidebar-mini .content-wrapper, .sidebar-mini .right-side { background: var(--bg) !important; color: var(--text); } .sidebar-mini .content-header > h1 { color: #fff !important; font-weight: 700; } .sidebar-mini .content-header > h1 > small { color: var(--muted) !important; } .sidebar-mini .content-header > .breadcrumb { background: var(--surface) !important; border: 1px solid var(--border); border-radius: 6px; } .sidebar-mini .content-header > .breadcrumb > li > a { color: var(--verde) !important; } .sidebar-mini .content-header > .breadcrumb > .active { color: var(--muted) !important; } .sidebar-mini .content-header > .breadcrumb > li + li:before { color: var(--muted); } /* Texto general dentro del contenido. NO forzar color en div/span/p/etc: `.content-wrapper` ya define color:var(--text) y los hijos lo heredan solos. Forzarlo acá pisaba (por especificidad) los grises propios de cada pantalla (labels de KPI, notas, textos "muted") y los volvía blancos. */ .sidebar-mini .content-wrapper h1, .sidebar-mini .content-wrapper h2, .sidebar-mini .content-wrapper h3, .sidebar-mini .content-wrapper h4, .sidebar-mini .content-wrapper h5 { color: #fff; } .sidebar-mini .content-wrapper a { color: var(--verde); } .sidebar-mini .content-wrapper a:hover { color: #fff; } .sidebar-mini .content-wrapper hr { border-top-color: var(--border); } .sidebar-mini .text-muted { color: var(--muted) !important; } /* ===================================================================== 2) SIDEBAR — resplandor en el ítem activo (complementa branding.css) ===================================================================== */ .sidebar-menu > li.active > a { box-shadow: inset 3px 0 0 #fff, 0 0 14px rgba(195,245,59,0.30); font-weight: 700; } .sidebar-menu > li > a > .fa { width: 22px; text-align: center; } .user-panel .info > p { color: #fff !important; } /* ===================================================================== 3) CAJAS (.box) — panel oscuro con acento superior por tipo ===================================================================== */ .sidebar-mini .box { background: var(--surface) !important; border: 1px solid var(--border); border-top: 3px solid var(--brand); border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.35); color: var(--text); } .sidebar-mini .box.box-solid { background: var(--surface) !important; } .sidebar-mini .box > .box-header, .sidebar-mini .box.box-solid > .box-header { color: var(--verde) !important; background: transparent !important; border-bottom: 1px solid var(--border); } .sidebar-mini .box > .box-header .box-title { font-weight: 600; } .sidebar-mini .box-body, .sidebar-mini .box-footer { color: var(--text); background: transparent !important; } .sidebar-mini .box-footer { border-top: 1px solid var(--border); } /* Acentos superiores por tipo (semántica) */ .sidebar-mini .box.box-success { border-top-color: var(--verde); } .sidebar-mini .box.box-danger { border-top-color: var(--rojo); } .sidebar-mini .box.box-warning { border-top-color: var(--naranja); } .sidebar-mini .box.box-info { border-top-color: var(--cian); } .sidebar-mini .box.box-primary { border-top-color: var(--brand); } .sidebar-mini .box.box-success > .box-header { color: var(--verde) !important; } .sidebar-mini .box.box-danger > .box-header { color: var(--rojo) !important; } .sidebar-mini .box.box-warning > .box-header { color: var(--naranja) !important; } .sidebar-mini .box.box-info > .box-header { color: var(--cian) !important; } /* Cabecera "solid" con color pleno (algunas pantallas la usan): la pasamos a navy de marca para que no grite. */ .sidebar-mini .box.box-solid.box-primary > .box-header, .sidebar-mini .box.box-solid.box-success > .box-header, .sidebar-mini .box.box-solid.box-info > .box-header, .sidebar-mini .box.box-solid.box-danger > .box-header, .sidebar-mini .box.box-solid.box-warning > .box-header { background: var(--brand) !important; color: #fff !important; } /* ===================================================================== 4) FICHAS KPI (info-box / small-box) — el toque "Suspendidos" Superficie navy uniforme + ACENTO de color (número, ícono, borde). Así los tableros dejan de ser bloques saturados y quedan coherentes. ===================================================================== */ /* --- info-box --- */ .sidebar-mini .info-box { background: linear-gradient(135deg, #0c2d48 0%, #00204a 100%) !important; border: 1px solid var(--border); border-left: 4px solid var(--cian); border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.35); color: var(--text) !important; min-height: 92px; } .sidebar-mini .info-box-icon { background: transparent !important; color: rgba(255,255,255,0.85) !important; border-radius: 10px 0 0 10px; } .sidebar-mini .info-box-text, .sidebar-mini .info-box-content { color: var(--text) !important; } .sidebar-mini .info-box-text { color: var(--muted) !important; text-transform: uppercase; letter-spacing: .3px; font-size: 12px; } .sidebar-mini .info-box-number { color: #fff !important; font-size: 22px; font-weight: 700; } .sidebar-mini .info-box .progress { background: rgba(255,255,255,0.10) !important; } .sidebar-mini .info-box .progress-bar { background: var(--cian) !important; } .sidebar-mini .info-box .progress-description { color: var(--muted) !important; } /* --- small-box --- */ .sidebar-mini .small-box { background: linear-gradient(135deg, #0c2d48 0%, #00204a 100%) !important; border: 1px solid var(--border); border-left: 4px solid var(--cian); border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.35); overflow: hidden; } .sidebar-mini .small-box > .inner { color: var(--text) !important; } .sidebar-mini .small-box h3 { color: #fff !important; font-weight: 700; text-shadow: none; } .sidebar-mini .small-box p { color: var(--muted) !important; } .sidebar-mini .small-box > .icon { color: rgba(255,255,255,0.14) !important; top: 6px; } .sidebar-mini .small-box:hover { transform: translateY(-2px); transition: transform .15s ease; } .sidebar-mini .small-box > .small-box-footer { background: rgba(0,0,0,0.25) !important; color: rgba(255,255,255,0.75) !important; border-top: 1px solid var(--border); } .sidebar-mini .small-box > .small-box-footer:hover { background: rgba(0,0,0,0.4) !important; color: #fff !important; } /* --- Acento por color (aplica el bg-* que ya trae cada ficha) --- */ /* VERDE = positivo */ .sidebar-mini .info-box.bg-green, .sidebar-mini .info-box .info-box-icon.bg-green, .sidebar-mini .small-box.bg-green { border-left-color: var(--verde) !important; } .sidebar-mini .info-box.bg-green .info-box-number, .sidebar-mini .small-box.bg-green h3, .sidebar-mini .info-box.bg-green .info-box-icon, .sidebar-mini .small-box.bg-green .icon { color: var(--verde) !important; } .sidebar-mini .small-box.bg-green .icon { color: rgba(195,245,59,0.25) !important; } .sidebar-mini .info-box.bg-green .progress-bar { background: var(--verde) !important; } /* ROJO = deuda / gasto */ .sidebar-mini .info-box.bg-red, .sidebar-mini .info-box .info-box-icon.bg-red, .sidebar-mini .small-box.bg-red, .sidebar-mini .small-box.bg-maroon, .sidebar-mini .info-box.bg-maroon { border-left-color: var(--rojo) !important; } .sidebar-mini .info-box.bg-red .info-box-number, .sidebar-mini .small-box.bg-red h3, .sidebar-mini .small-box.bg-maroon h3, .sidebar-mini .info-box.bg-red .info-box-icon { color: var(--rojo) !important; } .sidebar-mini .small-box.bg-red .icon, .sidebar-mini .small-box.bg-maroon .icon { color: rgba(255,92,92,0.22) !important; } .sidebar-mini .info-box.bg-red .progress-bar { background: var(--rojo) !important; } /* NARANJA = atención / suspendido */ .sidebar-mini .info-box.bg-yellow, .sidebar-mini .info-box.bg-orange, .sidebar-mini .small-box.bg-yellow, .sidebar-mini .small-box.bg-orange { border-left-color: var(--naranja) !important; } .sidebar-mini .info-box.bg-yellow .info-box-number, .sidebar-mini .info-box.bg-orange .info-box-number, .sidebar-mini .small-box.bg-yellow h3, .sidebar-mini .small-box.bg-orange h3 { color: var(--naranja) !important; } .sidebar-mini .small-box.bg-yellow .icon, .sidebar-mini .small-box.bg-orange .icon { color: rgba(255,169,77,0.22) !important; } /* CIAN/NAVY = neutro (aqua, blue, navy, light-blue, purple, teal, olive) */ .sidebar-mini .small-box.bg-purple h3, .sidebar-mini .small-box.bg-navy h3, .sidebar-mini .small-box.bg-blue h3, .sidebar-mini .info-box.bg-aqua .info-box-number, .sidebar-mini .info-box.bg-blue .info-box-number { color: #fff !important; } /* ===================================================================== 5) TABLAS ===================================================================== */ .sidebar-mini .table { color: var(--text); } .sidebar-mini .table > thead > tr > th { background: var(--brand) !important; color: var(--verde) !important; border-bottom: none !important; border-color: var(--border) !important; text-transform: uppercase; font-size: 12px; letter-spacing: .3px; } .sidebar-mini .table > tbody > tr > td, .sidebar-mini .table > tbody > tr > th, .sidebar-mini .table > tfoot > tr > td { border-color: var(--border) !important; color: var(--text-soft); } .sidebar-mini .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,0.02); } .sidebar-mini .table-hover > tbody > tr:hover { background: rgba(195,245,59,0.06) !important; } .sidebar-mini .table-bordered, .sidebar-mini .table-bordered > tbody > tr > td, .sidebar-mini .table-bordered > thead > tr > th { border-color: var(--border) !important; } .sidebar-mini .box-body.no-padding .table { margin-bottom: 0; } /* DataTables (CDN) */ .sidebar-mini .dataTables_wrapper, .sidebar-mini .dataTables_wrapper .dataTables_info, .sidebar-mini .dataTables_wrapper .dataTables_length, .sidebar-mini .dataTables_wrapper .dataTables_filter { color: var(--muted) !important; } .sidebar-mini .dataTables_wrapper .dataTables_filter input, .sidebar-mini .dataTables_wrapper .dataTables_length select { background: var(--bg) !important; border: 1px solid var(--border-2) !important; color: #fff !important; border-radius: 6px; } .sidebar-mini .dataTables_wrapper .paginate_button { color: var(--text-soft) !important; background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; } .sidebar-mini .dataTables_wrapper .paginate_button.current, .sidebar-mini .dataTables_wrapper .paginate_button:hover { background: var(--verde) !important; color: #06202e !important; border-color: var(--verde) !important; } /* ===================================================================== 6) FORMULARIOS ===================================================================== */ .sidebar-mini .form-control, .sidebar-mini textarea.form-control, .sidebar-mini select.form-control { background: var(--bg) !important; border: 1px solid var(--border-2) !important; color: #fff !important; box-shadow: none !important; border-radius: 6px; } .sidebar-mini .form-control::placeholder { color: #6b8494 !important; } .sidebar-mini .form-control:focus { border-color: var(--verde) !important; box-shadow: 0 0 0 2px rgba(195,245,59,0.15) !important; } .sidebar-mini .content-wrapper label, .sidebar-mini .control-label { color: var(--text-soft) !important; } .sidebar-mini .help-block { color: var(--muted) !important; } .sidebar-mini .input-group-addon { background: var(--surface-2) !important; border: 1px solid var(--border-2) !important; color: var(--muted) !important; } .sidebar-mini .form-group { color: var(--text-soft); } .sidebar-mini .nav-tabs-custom { background: var(--surface) !important; border-radius: 10px; } .sidebar-mini .nav-tabs-custom > .nav-tabs { border-bottom: 1px solid var(--border); } .sidebar-mini .nav-tabs-custom > .nav-tabs > li > a { color: var(--muted) !important; } .sidebar-mini .nav-tabs-custom > .nav-tabs > li.active > a { color: var(--verde) !important; background: transparent !important; } .sidebar-mini .nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--verde) !important; } /* Contenido de las pestañas (Bootstrap/AdminLTE lo dejaban BLANCO). Afecta Gestión Comercial, Finanzas, Reportes. */ .sidebar-mini .tab-content, .sidebar-mini .nav-tabs-custom > .tab-content { background: transparent !important; color: var(--text); } .sidebar-mini .tab-pane { background: transparent !important; color: var(--text); } /* Pestañas Bootstrap "planas" (fuera de nav-tabs-custom) */ .sidebar-mini .nav-tabs { border-bottom: 1px solid var(--border); } .sidebar-mini .nav-tabs > li > a { color: var(--muted) !important; background: transparent !important; border-color: transparent !important; } .sidebar-mini .nav-tabs > li.active > a, .sidebar-mini .nav-tabs > li.active > a:hover, .sidebar-mini .nav-tabs > li.active > a:focus { color: var(--verde) !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-bottom-color: transparent !important; } .sidebar-mini .nav-tabs > li > a:hover { border-color: transparent !important; background: rgba(255,255,255,0.04) !important; } /* Paneles Bootstrap (blancos por defecto) */ .sidebar-mini .panel { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 10px; box-shadow: none; } .sidebar-mini .panel-body { background: transparent !important; color: var(--text); } .sidebar-mini .panel-heading { background: var(--surface-2) !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; } .sidebar-mini .panel-default > .panel-heading { color: var(--text) !important; } /* Filas de DataTables: DataTables les pone fondo BLANCO propio (afecta Deudores) */ .sidebar-mini table.dataTable tbody tr, .sidebar-mini table.dataTable tbody tr.odd, .sidebar-mini table.dataTable tbody tr.even, .sidebar-mini table.dataTable tbody tr.odd > td, .sidebar-mini table.dataTable tbody tr.even > td { background-color: transparent !important; } .sidebar-mini table.dataTable tbody tr:hover, .sidebar-mini table.dataTable tbody tr:hover > td { background-color: rgba(195,245,59,0.06) !important; } .sidebar-mini table.dataTable { border-color: var(--border) !important; } /* Select2 (la caja cerrada vive dentro del contenido) */ .sidebar-mini .select2-container--default .select2-selection--single, .sidebar-mini .select2-container--default .select2-selection--multiple { background: var(--bg) !important; border: 1px solid var(--border-2) !important; color: #fff !important; border-radius: 6px; } .sidebar-mini .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff !important; } .sidebar-mini .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--muted) transparent transparent transparent; } /* El desplegable de select2 se agrega al (fuera del contenido): se le da un dark neutro que se ve bien en cualquier pantalla. */ .select2-dropdown { background: #0a1a28 !important; border: 1px solid rgba(255,255,255,0.14) !important; color: #e7eef3 !important; } .select2-results__option { color: #e7eef3 !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #00204a !important; color: #c3f53b !important; } .select2-search--dropdown .select2-search__field { background: #02111b !important; border: 1px solid rgba(255,255,255,0.14) !important; color: #fff !important; } /* iCheck (checkbox azul) sobre oscuro */ .sidebar-mini .icheckbox_square-blue, .sidebar-mini .iradio_square-blue { opacity: .95; } /* ===================================================================== 7) BOTONES — con resplandor (glow) ===================================================================== */ .sidebar-mini .btn { border-radius: 6px; font-weight: 600; transition: box-shadow .18s ease, transform .12s ease, background-color .18s ease; } .sidebar-mini .btn:active { transform: translateY(1px); } /* Primario = navy de marca */ .sidebar-mini .btn-primary { background: var(--brand) !important; border-color: #001835 !important; color: #fff !important; } .sidebar-mini .btn-primary:hover { background: #002a63 !important; box-shadow: 0 0 12px rgba(0,32,74,0.8); } /* Éxito / cobrar / al día = VERDE neón con glow */ .sidebar-mini .btn-success { background: var(--verde) !important; border-color: var(--verde-2) !important; color: #06202e !important; box-shadow: var(--glow-verde); } .sidebar-mini .btn-success:hover { background: #d2ff55 !important; box-shadow: 0 0 18px rgba(195,245,59,0.65); transform: translateY(-1px); } /* Peligro / baja / eliminar = ROJO con glow */ .sidebar-mini .btn-danger { background: var(--rojo) !important; border-color: #e04545 !important; color: #fff !important; box-shadow: var(--glow-rojo); } .sidebar-mini .btn-danger:hover { background: #ff6f6f !important; box-shadow: 0 0 18px rgba(255,92,92,0.6); transform: translateY(-1px); } /* Atención / suspender = NARANJA con glow */ .sidebar-mini .btn-warning { background: var(--naranja) !important; border-color: #f59530 !important; color: #2a1600 !important; box-shadow: var(--glow-naranja); } .sidebar-mini .btn-warning:hover { background: #ffb96a !important; box-shadow: 0 0 18px rgba(255,169,77,0.6); transform: translateY(-1px); } /* Info = CIAN */ .sidebar-mini .btn-info { background: transparent !important; border: 1px solid var(--cian) !important; color: var(--cian) !important; } .sidebar-mini .btn-info:hover { background: var(--cian) !important; color: #04212b !important; box-shadow: var(--glow-cian); } /* Neutro */ .sidebar-mini .btn-default { background: var(--surface-2) !important; border: 1px solid var(--border-2) !important; color: var(--text-soft) !important; } .sidebar-mini .btn-default:hover { background: #16324a !important; color: #fff !important; } .sidebar-mini .btn-flat { border-radius: 6px; } /* Botones de filtro (Instalaciones, Reclamos, etc.): SIEMPRE texto negro sobre fondo claro, legibles en el celular sin depender del hover. Activo/hover = verde neón, también con texto negro. Global para que aplique en toda pantalla. */ .sidebar-mini .filtro-btn { background: #e3eaef !important; color: #02111b !important; border: 1px solid rgba(0,0,0,0.18) !important; font-weight: 600 !important; margin: 0 3px 5px 0; } .sidebar-mini .filtro-btn:hover, .sidebar-mini .filtro-btn.activo { background: #c3f53b !important; color: #02111b !important; border-color: #c3f53b !important; } /* Botones neón de las pantallas propias (Suspendidos / Bajas / Deudores): se les suma el mismo resplandor para que "prendan" al pasar el mouse. */ .sidebar-mini .btn-neon { transition: box-shadow .18s ease, transform .12s ease, filter .18s ease; } .sidebar-mini .btn-neon.cobrar { box-shadow: 0 0 10px rgba(195,245,59,0.35); } .sidebar-mini .btn-neon.cobrar:hover { box-shadow: 0 0 20px rgba(195,245,59,0.65); transform: translateY(-1px); } .sidebar-mini .btn-neon.wa:hover { box-shadow: 0 0 16px rgba(75,229,133,0.5); transform: translateY(-1px); } .sidebar-mini .btn-neon.baja:hover { box-shadow: 0 0 18px rgba(221,75,57,0.6); transform: translateY(-1px); } .sidebar-mini .btn-neon.equipo:hover { box-shadow: 0 0 18px rgba(195,245,59,0.55); transform: translateY(-1px); } .sidebar-mini .btn-neon.alta:hover { box-shadow: 0 0 16px rgba(0,192,239,0.5); transform: translateY(-1px); } .sidebar-mini .btn-neon.ficha:hover { box-shadow: 0 0 12px rgba(255,255,255,0.18); transform: translateY(-1px); } /* btn-app (accesos rápidos del Inicio) */ .sidebar-mini .btn-app { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-soft) !important; border-radius: 10px; } .sidebar-mini .btn-app:hover { border-color: var(--verde); box-shadow: var(--glow-verde); color: #fff !important; } .sidebar-mini .btn-app.bg-green { border-color: rgba(195,245,59,0.4) !important; } .sidebar-mini .btn-app.bg-green:hover { box-shadow: var(--glow-verde); } .sidebar-mini .btn-app.bg-red { border-color: rgba(255,92,92,0.4) !important; } .sidebar-mini .btn-app.bg-red:hover { box-shadow: var(--glow-rojo); } .sidebar-mini .btn-app.bg-aqua, .sidebar-mini .btn-app.bg-blue { border-color: rgba(69,200,240,0.4) !important; } .sidebar-mini .btn-app > .badge { box-shadow: none; } /* ===================================================================== 8) BADGES / LABELS (bg-* usados como etiquetas chicas) ===================================================================== */ .sidebar-mini .label-success, .sidebar-mini .badge.bg-green { background: rgba(195,245,59,0.16) !important; color: var(--verde) !important; border: 1px solid rgba(195,245,59,0.45); } .sidebar-mini .label-danger, .sidebar-mini .badge.bg-red { background: rgba(255,92,92,0.16) !important; color: #ff8a8a !important; border: 1px solid rgba(255,92,92,0.45); } .sidebar-mini .label-warning, .sidebar-mini .badge.bg-yellow { background: rgba(255,169,77,0.16) !important; color: var(--naranja) !important; border: 1px solid rgba(255,169,77,0.45); } .sidebar-mini .label-info, .sidebar-mini .badge.bg-aqua { background: rgba(69,200,240,0.14) !important; color: var(--cian) !important; border: 1px solid rgba(69,200,240,0.4); } .sidebar-mini .label-primary, .sidebar-mini .badge.bg-blue, .sidebar-mini .badge.bg-navy { background: rgba(0,32,74,0.6) !important; color: #cfe0ff !important; border: 1px solid var(--border-2); } .sidebar-mini .label { border-radius: 20px; padding: .3em .8em; font-weight: 600; } /* Texto de color coherente */ .sidebar-mini .text-green { color: var(--verde) !important; } .sidebar-mini .text-red { color: #ff8a8a !important; } .sidebar-mini .text-yellow{ color: var(--naranja) !important; } .sidebar-mini .text-aqua { color: var(--cian) !important; } /* ===================================================================== 9) MODALES ===================================================================== */ .sidebar-mini .modal-content { background: var(--surface) !important; border: 1px solid var(--border-2) !important; border-radius: 12px; color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,0.6); } .sidebar-mini .modal-header, .sidebar-mini .modal-footer { border-color: var(--border) !important; } .sidebar-mini .modal-header { color: #fff; } .sidebar-mini .modal-title { color: #fff; font-weight: 700; } .sidebar-mini .modal-header .close { color: #fff; opacity: .7; text-shadow: none; } .sidebar-mini .modal-header.bg-green { background: var(--brand) !important; color: #fff !important; border-bottom: 2px solid var(--verde) !important; } .sidebar-mini .modal-header.bg-red { background: var(--brand) !important; color: #fff !important; border-bottom: 2px solid var(--rojo) !important; } .sidebar-mini .modal-header.bg-aqua, .sidebar-mini .modal-header.bg-blue { background: var(--brand) !important; color: #fff !important; border-bottom: 2px solid var(--cian) !important; } /* ===================================================================== 10) ALERTAS / CALLOUTS / PROGRESO ===================================================================== */ .sidebar-mini .callout { border-radius: 8px; color: #fff; } .sidebar-mini .alert-success, .sidebar-mini .callout.callout-success { background: rgba(195,245,59,0.10) !important; border: 1px solid rgba(195,245,59,0.4) !important; color: var(--verde) !important; } .sidebar-mini .alert-danger, .sidebar-mini .callout.callout-danger { background: rgba(255,92,92,0.10) !important; border: 1px solid rgba(255,92,92,0.4) !important; color: #ff8a8a !important; } .sidebar-mini .alert-warning, .sidebar-mini .callout.callout-warning { background: rgba(255,169,77,0.10) !important; border: 1px solid rgba(255,169,77,0.4) !important; color: var(--naranja) !important; } .sidebar-mini .alert-info, .sidebar-mini .callout.callout-info { background: rgba(69,200,240,0.10) !important; border: 1px solid rgba(69,200,240,0.4) !important; color: var(--cian) !important; } .sidebar-mini .progress { background: rgba(255,255,255,0.08) !important; border-radius: 20px; } .sidebar-mini .progress-bar { background: var(--verde); } /* ===================================================================== 11) VARIOS: paginación, list-group, well, footer, scrollbar ===================================================================== */ .sidebar-mini .pagination > li > a, .sidebar-mini .pagination > li > span { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-soft) !important; } .sidebar-mini .pagination > .active > a, .sidebar-mini .pagination > li > a:hover { background: var(--verde) !important; color: #06202e !important; border-color: var(--verde) !important; } .sidebar-mini .list-group-item { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-soft); } .sidebar-mini .well { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: none; color: var(--text-soft); } .sidebar-mini .main-footer { background: #001220 !important; border-top: 1px solid var(--border) !important; color: var(--muted) !important; } .sidebar-mini .main-footer strong, .sidebar-mini .main-footer b { color: var(--text-soft) !important; } .sidebar-mini ::-webkit-scrollbar { width: 10px; height: 10px; } .sidebar-mini ::-webkit-scrollbar-thumb { background: #16324a; border-radius: 6px; } .sidebar-mini ::-webkit-scrollbar-track { background: #02111b; } /* SweetAlert2 (se agrega al body; dark neutro que va en cualquier lado) */ .swal2-popup { background: #0a1a28 !important; color: #e7eef3 !important; border: 1px solid rgba(255,255,255,0.12); } .swal2-title, .swal2-html-container { color: #e7eef3 !important; } /* ===================================================================== 13) FILAS/PANELES CON FONDO PASTEL INLINE (totales, avisos) Algunas vistas traen fondos claros en el atributo style="" (ganan al CSS normal). Se neutralizan por su color exacto -> tinte oscuro del tema, sin tocar las vistas ni pisar los colores propios del tema. ===================================================================== */ .sidebar-mini [style*="#dff0d8"] { /* verde pastel (fila TOTAL) */ background: rgba(195,245,59,0.10) !important; color: var(--verde) !important; } .sidebar-mini [style*="#dff0d8"] * { color: var(--verde) !important; } .sidebar-mini [style*="#fff3cd"] { /* amarillo pastel (aviso) */ background: rgba(255,169,77,0.12) !important; color: var(--naranja) !important; } .sidebar-mini [style*="#d9edf7"] { /* celeste pastel (info) */ background: rgba(69,200,240,0.10) !important; color: var(--cian) !important; } .sidebar-mini [style*="#d2d6de"], /* gris claro */ .sidebar-mini [style*="#f9f9f9"] { background: var(--surface-2) !important; color: var(--text-soft) !important; } .sidebar-mini [style*="#f0f0f0"] { /* fila TOTAL de corte diario (era gris casi blanco) */ background: var(--brand) !important; } .sidebar-mini [style*="#f0f0f0"] td, .sidebar-mini [style*="#f0f0f0"] strong, .sidebar-mini [style*="#f0f0f0"] * { color: #fff !important; } /* ===================================================================== 12) IMPRESIÓN — al imprimir, contenido en blanco/negro (papel) ===================================================================== */ @media print { .sidebar-mini .content-wrapper { background: #fff !important; color: #000 !important; } .sidebar-mini .box { background: #fff !important; color: #000 !important; border-color: #ccc; } .sidebar-mini .table > thead > tr > th { background: #eee !important; color: #000 !important; } .sidebar-mini .table > tbody > tr > td { color: #000 !important; } }