/* ============================================================================ dale-oscuro.css — Modo oscuro con los colores de la marca ---------------------------------------------------------------------------- Hermano de dale-claro.css. Se activa poniendo la clase "skin-dale-oscuro" en el en vez de "skin-dale-claro"; lo hace el interruptor de la cabecera y se recuerda en el navegador de cada persona. Los colores de estado (verde, celeste, naranja, rojo) NO se tocan aqui tampoco: sobre fondo oscuro conservan toda su fuerza, que es justo lo que hace falta en un tablero que se mira de reojo. ========================================================================== */ .skin-dale-oscuro { --dx-azul: #6B7BD6; /* aclarado: el #2E3B8E sobre negro no se lee */ --dx-azul-hondo: #8E9AE8; --dx-azul-suave: #1D2444; --dx-naranja: #EB6B14; --dx-tinta: #E7EAF4; --dx-tinta-2: #A8AFC8; --dx-tinta-3: #767E96; --dx-linea: #232941; --dx-fondo: #0E1120; --dx-panel: #161B2E; --dx-barra: #131728; --dx-panel-2: #1C2238; --dx-fila-alterna:#1A2035; /* Mismo significado que en la piel clara, pero oscurecidos: el amarillo y el rojo originales sobre fondo oscuro deslumbran y dejan de leerse. */ --dx-aviso-fondo: #2A2312; --dx-aviso-borde: #4A3D18; --dx-aviso-tinta: #E8D9A8; --dx-alerta-fondo:#2E1614; } /* ── Cabecera ─────────────────────────────────────────────────────────── */ .skin-dale-oscuro .main-header .navbar { background-color: #171C31; border-bottom: 1px solid var(--dx-linea); } .skin-dale-oscuro .main-header .logo { background-color: var(--dx-barra); color: #fff; border-bottom: 1px solid var(--dx-linea); border-right: 1px solid var(--dx-linea); font-weight: 700; } .skin-dale-oscuro .main-header .logo:hover { background-color: #171C31; } .skin-dale-oscuro .main-header .navbar .sidebar-toggle, .skin-dale-oscuro .main-header .navbar .nav > li > a { color: var(--dx-tinta-2); } .skin-dale-oscuro .main-header .navbar .sidebar-toggle:hover, .skin-dale-oscuro .main-header .navbar .nav > li > a:hover, .skin-dale-oscuro .main-header .navbar .nav > .active > a, .skin-dale-oscuro .main-header .navbar .nav .open > a, .skin-dale-oscuro .main-header .navbar .nav .open > a:focus { background-color: var(--dx-azul-suave); color: #fff; } .skin-dale-oscuro .main-header .navbar .navbar-custom-menu .user-menu > a > span { color: var(--dx-tinta); } /* Desplegables de la cabecera */ .skin-dale-oscuro .main-header .navbar .dropdown-menu { background-color: var(--dx-panel); border: 1px solid var(--dx-linea); } .skin-dale-oscuro .main-header .navbar .dropdown-menu li a { color: var(--dx-tinta-2); } .skin-dale-oscuro .main-header .navbar .dropdown-menu li a:hover { background-color: var(--dx-azul-suave); color: #fff; } .skin-dale-oscuro .main-header .navbar .dropdown-menu li.divider { background-color: var(--dx-linea); } .skin-dale-oscuro .main-header li.user-header { background-color: #232B52; color: #fff; } /* ── Barra lateral ────────────────────────────────────────────────────── */ .skin-dale-oscuro .main-sidebar, .skin-dale-oscuro .left-side, .skin-dale-oscuro .wrapper { background-color: var(--dx-barra); } .skin-dale-oscuro .main-sidebar { border-right: 1px solid var(--dx-linea); } .skin-dale-oscuro .sidebar a { color: var(--dx-tinta-2); } .skin-dale-oscuro .sidebar a:hover { color: #fff; } .skin-dale-oscuro .sidebar-menu > li > a { border-left: 3px solid transparent; font-weight: 500; } .skin-dale-oscuro .sidebar-menu > li:hover > a, .skin-dale-oscuro .sidebar-menu > li.active > a, .skin-dale-oscuro .sidebar-menu > li.menu-open > a { background-color: var(--dx-azul-suave); color: #fff; } .skin-dale-oscuro .sidebar-menu > li.active > a { border-left-color: var(--dx-naranja); font-weight: 600; } .skin-dale-oscuro .sidebar-menu > li.header { color: var(--dx-tinta-3); background-color: var(--dx-barra); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .skin-dale-oscuro .sidebar-menu li > .treeview-menu { background-color: #0F1322; } .skin-dale-oscuro .sidebar-menu .treeview-menu > li > a { color: var(--dx-tinta-2); } .skin-dale-oscuro .sidebar-menu .treeview-menu > li.active > a, .skin-dale-oscuro .sidebar-menu .treeview-menu > li > a:hover { color: #fff; } .skin-dale-oscuro .sidebar-form { border: 1px solid var(--dx-linea); border-radius: 6px; background: #0F1322; } .skin-dale-oscuro .sidebar-form input[type="text"], .skin-dale-oscuro .sidebar-form .btn { background-color: transparent; border: 0; color: var(--dx-tinta-2); box-shadow: none; } .skin-dale-oscuro .user-panel > .info, .skin-dale-oscuro .user-panel > .info > a { color: var(--dx-tinta); } /* Menu plegado */ .skin-dale-oscuro.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span:not(.pull-right-container), .skin-dale-oscuro.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { background-color: #232B52; color: #fff; border-radius: 0 10px 10px 0; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .72), 0 3px 8px -3px rgba(0, 0, 0, .4); } .skin-dale-oscuro.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { border-radius: 0 0 10px 0; } .skin-dale-oscuro.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right-container > .label { box-shadow: 0 0 0 2px var(--dx-barra); } /* ── Lienzo ───────────────────────────────────────────────────────────── */ .skin-dale-oscuro .content-wrapper { background-color: var(--dx-fondo); } .skin-dale-oscuro .main-footer { background-color: var(--dx-barra); border-top: 1px solid var(--dx-linea); color: var(--dx-tinta-2); } .skin-dale-oscuro .content-header > h1 { color: var(--dx-tinta); font-weight: 600; } .skin-dale-oscuro .content-header > .breadcrumb { background: transparent; } .skin-dale-oscuro .content-header > .breadcrumb > li > a { color: var(--dx-azul); } .skin-dale-oscuro .content-header > .breadcrumb > .active { color: var(--dx-tinta-3); } /* ── Superficies ──────────────────────────────────────────────────────── */ .skin-dale-oscuro .box, .skin-dale-oscuro .modal-content, .skin-dale-oscuro .panel, .skin-dale-oscuro .well { background-color: var(--dx-panel); border-color: var(--dx-linea); border-radius: 8px; color: var(--dx-tinta); } .skin-dale-oscuro .box { border-top-width: 3px; } .skin-dale-oscuro .box.box-primary { border-top-color: var(--dx-azul); } .skin-dale-oscuro .box-header, .skin-dale-oscuro .box-footer, .skin-dale-oscuro .modal-header, .skin-dale-oscuro .modal-footer { border-color: var(--dx-linea); background-color: transparent; } .skin-dale-oscuro .box-header .box-title, .skin-dale-oscuro .modal-title { color: var(--dx-tinta); font-weight: 600; } /* Tablas */ .skin-dale-oscuro .table > thead > tr > th { color: var(--dx-tinta); border-bottom-color: var(--dx-linea); } .skin-dale-oscuro .table > tbody > tr > td, .skin-dale-oscuro .table > tbody > tr > th { border-top-color: var(--dx-linea); color: var(--dx-tinta-2); } .skin-dale-oscuro .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .022); } .skin-dale-oscuro .table-hover > tbody > tr:hover { background-color: rgba(107, 123, 214, .10); } .skin-dale-oscuro .table-bordered, .skin-dale-oscuro .table-bordered > thead > tr > th, .skin-dale-oscuro .table-bordered > tbody > tr > td { border-color: var(--dx-linea); } /* Formularios */ .skin-dale-oscuro .form-control, .skin-dale-oscuro .input-group-addon, .skin-dale-oscuro select.form-control, .skin-dale-oscuro textarea.form-control { background-color: #0F1322; border-color: var(--dx-linea); color: var(--dx-tinta); } .skin-dale-oscuro .form-control:focus { border-color: var(--dx-azul); box-shadow: none; } .skin-dale-oscuro .form-control::placeholder { color: var(--dx-tinta-3); } .skin-dale-oscuro label { color: var(--dx-tinta-2); } /* Enlaces y botones */ /* El :not(.btn) es obligatorio. Sin el, esta regla pesa mas que el .btn-primary de Bootstrap y le pinta el texto a TODOS los botones que son enlaces: 63 en el panel. En el boton azul quedaba azul sobre azul, invisible; en los verdes y rojos, ilegible. Los botones se quedan con el color que les pone Bootstrap. */ .skin-dale-oscuro a:not(.btn) { color: var(--dx-azul); } .skin-dale-oscuro a:not(.btn):hover, .skin-dale-oscuro a:not(.btn):focus { color: var(--dx-azul-hondo); } .skin-dale-oscuro .btn-default { background-color: #1D2237; border-color: var(--dx-linea); color: var(--dx-tinta); } .skin-dale-oscuro .btn-default:hover { background-color: #252C46; color: #fff; } .skin-dale-oscuro .btn-primary { background-color: #3A48A8; border-color: #3A48A8; } .skin-dale-oscuro .btn-primary:hover { background-color: #4655C4; border-color: #4655C4; } .skin-dale-oscuro a:focus-visible, .skin-dale-oscuro button:focus-visible, .skin-dale-oscuro .btn:focus-visible { outline: 2px solid var(--dx-naranja); outline-offset: 2px; } /* DataTables y paginacion */ .skin-dale-oscuro .dataTables_wrapper .dataTables_length, .skin-dale-oscuro .dataTables_wrapper .dataTables_filter, .skin-dale-oscuro .dataTables_wrapper .dataTables_info { color: var(--dx-tinta-2); } .skin-dale-oscuro .pagination > li > a, .skin-dale-oscuro .pagination > li > span { background-color: #1D2237; border-color: var(--dx-linea); color: var(--dx-tinta-2); } .skin-dale-oscuro .pagination > .active > a, .skin-dale-oscuro .pagination > .active > span { background-color: #3A48A8; border-color: #3A48A8; color: #fff; } /* Texto generico que Bootstrap deja en negro */ .skin-dale-oscuro .text-muted { color: var(--dx-tinta-3); } .skin-dale-oscuro hr { border-top-color: var(--dx-linea); } .skin-dale-oscuro .close { color: var(--dx-tinta); opacity: .7; text-shadow: none; } /* ── Lo que NO se toca ────────────────────────────────────────────────── */ /* small-box, info-box, bg-green / bg-aqua / bg-yellow / bg-red y las etiquetas de estado se quedan como estan: son informacion. */ /* ── La marca en oscuro ─────────────────────────────────────────────────── El azul aclarado (#6B7BD6) sobre la barra oscura se queda en 4,47:1, justo por debajo del minimo legible para texto de este tamano. La marca va en tinta clara y el naranja del ala es el que lleva la identidad. */ .skin-dale-oscuro .main-header .logo .dx-marca { color: var(--dx-tinta); } /* ── Panel de alertas de la cabecera ────────────────────────────────────── El panel trae sus colores en su propio atributo style=, que gana a cualquier hoja; por eso aqui hace falta !important. Solo se corrigen fondo y tinta: la franja roja del titulo se queda como esta, porque ahi el color es el aviso. */ .skin-dale-oscuro #mnPanel { background: var(--dx-panel) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .6) !important; } .skin-dale-oscuro .mn-card { border-bottom-color: var(--dx-linea); } .skin-dale-oscuro .mn-card:hover { background: #1D2237; } .skin-dale-oscuro .mn-nom { color: var(--dx-tinta); } .skin-dale-oscuro .mn-tel { color: var(--dx-tinta-2); } .skin-dale-oscuro .mn-vend, .skin-dale-oscuro .mn-foot, .skin-dale-oscuro .mn-empty { color: var(--dx-tinta-3); } .skin-dale-oscuro .mn-msg { color: #FF8A80; } .skin-dale-oscuro .mn-x { border-color: var(--dx-linea); color: var(--dx-tinta-2); } /* ── Modal de plantillas del CRM ────────────────────────────────────────── Sus estilos viven en un