/* ============================================================ Refresco visual — Panel de Administracion (AdminLTE) Capa aditiva cargada DESPUÉS de AdminLTE.css y _all-skins.css. Solo redefine color, tipografía y espaciado del "chrome" (header, sidebar, tarjetas, botones neutros). Los colores semanticos (verde=activar, rojo=borrar, amarillo=aviso) se respetan tal cual para no perder legibilidad funcional. ============================================================ */ :root { --ink: #16324a; --ink-deep: #0c1f30; --paper: #faf6ee; --paper-card: #fffdf9; --accent: #c1673a; --accent-deep: #9c4f2a; --text: #2c2620; --text-muted: #6d6255; --heading: var(--ink); --border: #e8dfcd; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Karla', 'Segoe UI', sans-serif; color-scheme: light; } /* ---------- Modo oscuro ---------- Se activa con data-theme="dark" en (boton en el header + localStorage, ver includes/menu.php e includes/javascript.php). */ :root[data-theme="dark"] { --paper: #14171c; --paper-card: #1e2229; --accent: #d98a5f; --accent-deep: #e8a578; --text: #dcd8d0; --text-muted: #a39c8f; --heading: #f2efe8; --border: #33383f; color-scheme: dark; } body, .wrapper { font-family: var(--font-body); background: var(--paper); color: var(--text); } h1, h2, h3, h4, h5, h6, .box-title, .content-header h1 { color: var(--heading); } h1, h2, h3, h4, h5, h6, .box-title, .content-header h1, .login-box-msg b { font-family: var(--font-display); } /* ---------- Header ---------- */ .skin-blue .main-header { box-shadow: 0 2px 12px -6px rgba(12,31,48,0.35); } .skin-blue .main-header .logo, .skin-blue .main-header .navbar { background: var(--ink) !important; } .skin-blue .main-header .logo { font-family: var(--font-display); letter-spacing: .01em; } .skin-blue .main-header .logo:hover, .skin-blue .main-header .navbar .sidebar-toggle:hover { background: var(--ink-deep) !important; } .skin-blue .main-header .navbar .nav > li > a { color: rgba(255,255,255,0.85); } .skin-blue .main-header li.user-header { background: var(--ink) !important; } /* ---------- Sidebar ---------- */ .skin-blue .main-sidebar, .skin-blue .left-side { background: var(--ink-deep) !important; } .skin-blue .sidebar-menu > li.header { background: var(--ink-deep) !important; color: rgba(255,255,255,0.45); font-family: var(--font-body); letter-spacing: .04em; } .sidebar-menu > li > a { font-family: var(--font-body); border-left: 3px solid transparent; transition: background .12s ease, border-color .12s ease; } .skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.active > a, .skin-blue .sidebar-menu > li.menu-open > a { background: rgba(255,255,255,0.08) !important; border-left-color: var(--accent); color: #fff !important; } .sidebar-menu > li > a > .fa { width: 22px; } .user-panel .info, .user-panel .info a { color: #fff; } /* ---------- Content ---------- */ .content-wrapper, .right-side { background: var(--paper); } .box { background: var(--paper-card); border-top: 3px solid var(--ink); border-radius: 6px; box-shadow: 0 2px 10px -6px rgba(22,50,74,0.18); } .box.box-info { border-top-color: var(--ink); } .box-header.with-border { border-bottom: 1px solid var(--border); } .breadcrumb { background: transparent; } .breadcrumb > li + li:before { color: var(--text-muted); } .info-box { border-radius: 6px; box-shadow: 0 2px 10px -6px rgba(22,50,74,0.18); } /* ---------- Botones neutros (no semánticos) ---------- */ .btn.btn-info, .btn-info { background: var(--ink) !important; border-color: var(--ink) !important; font-family: var(--font-body); font-weight: 600; } .btn.btn-info:hover, .btn-info:hover { background: var(--ink-deep) !important; } .btn-flat { border-radius: 4px; } .login-box-body .btn-primary, .form-bottom form button.btn { background: var(--accent) !important; border-color: var(--accent) !important; } .login-box-body .btn-primary:hover { background: var(--accent-deep) !important; } /* ---------- Tablas / DataTables ---------- */ table.dataTable thead th { font-family: var(--font-body); color: var(--heading); } .table > thead > tr > th { border-bottom: 2px solid var(--border); } /* ---------- Login del admin ---------- */ .login-page, .login-box-body { background: var(--paper); } .login-logo { font-family: var(--font-display); color: var(--heading); } /* ---------- Boton de tema en el header ---------- */ .theme-toggle { background: transparent; border: none; color: rgba(255,255,255,0.85); font-size: 16px; cursor: pointer; padding: 15px; height: 50px; } .theme-toggle:hover { color: #fff; } /* ---------- Modo oscuro: elementos de Bootstrap/AdminLTE con fondo/color propios que no usan las variables de arriba ---------- */ [data-theme="dark"] .box, [data-theme="dark"] .modal-content, [data-theme="dark"] .panel { background: var(--paper-card); color: var(--text); } [data-theme="dark"] .form-control, [data-theme="dark"] select.form-control, [data-theme="dark"] textarea { background: var(--paper-card); color: var(--text); border-color: var(--border); } [data-theme="dark"] .form-control::placeholder { color: var(--text-muted); opacity: 1; } [data-theme="dark"] .table, [data-theme="dark"] table.dataTable { background: var(--paper-card); color: var(--text); } [data-theme="dark"] .table > tbody > tr > td, [data-theme="dark"] .table > tbody > tr > th, [data-theme="dark"] .table > thead > tr > th { border-color: var(--border); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,0.03); } [data-theme="dark"] .box-footer, [data-theme="dark"] .box-header { border-color: var(--border); } [data-theme="dark"] .modal-footer { border-top-color: var(--border); } [data-theme="dark"] .close { color: var(--text); text-shadow: none; opacity: .7; } [data-theme="dark"] .close:hover { opacity: 1; } [data-theme="dark"] .content-header .breadcrumb { color: var(--text-muted); } [data-theme="dark"] a { color: var(--accent); } [data-theme="dark"] .dataTables_wrapper .dataTables_info, [data-theme="dark"] .dataTables_wrapper .dataTables_length, [data-theme="dark"] .dataTables_wrapper .dataTables_filter { color: var(--text); } [data-theme="dark"] .pagination > li > a, [data-theme="dark"] .pagination > li > span { background: var(--paper-card); border-color: var(--border); color: var(--text); }