/* |-------------------------------------------------------------------------- | unomas.App Admin Themes |-------------------------------------------------------------------------- | Cargar este archivo DESPUÉS del CSS actual del panel. | Cambia el tema agregando una clase al : | theme-dark | theme-light | theme-gray */ :root { --ev-navy: #061426; --ev-navy-2: #0b2038; --ev-gold: #d6a84f; --ev-gold-2: #f3c96b; --ev-white: #ffffff; --ev-muted: #b8c2d1; --ev-border: rgba(214, 168, 79, .35); --theme-primary: var(--ev-gold); --theme-primary-hover: var(--ev-gold-2); } :root, body.theme-dark { --theme-primary: #005aa4; --theme-primary-hover: #0c76cd; --theme-accent: #17B6A4; --theme-body-bg: #1f2329; --theme-page-bg: #1f2329; --theme-sidebar-bg: #2c333d; --theme-sidebar-sub-bg: #202a2f; --theme-navbar-brand-bg: #0c0c0c; --theme-card-bg: #2c333d; --theme-card-header-bg: #2d3540; --theme-card-border: #252c34; --theme-panel-bg: #262e38; --theme-list-bg: #303742; --theme-modal-header-bg: #414954; --theme-modal-body-bg: #2d3540; --theme-text: #f2f2f2; --theme-text-soft: #ccc; --theme-text-muted: #999; --theme-sidebar-text: #abb1b7; --theme-link: #1d7fcf; --theme-link-hover: #72afd2; --theme-input-border: #7a7676; --theme-table-border: #252c34; --theme-shadow: rgba(0,0,0,0.18); } body.theme-light { --theme-primary: #005aa4; --theme-primary-hover: #0c76cd; --theme-accent: #17B6A4; --theme-body-bg: #f4f7fb; --theme-page-bg: #f4f7fb; --theme-sidebar-bg: #ffffff; --theme-sidebar-sub-bg: #edf3f8; --theme-navbar-brand-bg: #ffffff; --theme-card-bg: #ffffff; --theme-card-header-bg: #f8fafc; --theme-card-border: #dfe7ef; --theme-panel-bg: #f8fafc; --theme-list-bg: #ffffff; --theme-modal-header-bg: #f8fafc; --theme-modal-body-bg: #ffffff; --theme-text: #1f2937; --theme-text-soft: #334155; --theme-text-muted: #64748b; --theme-sidebar-text: #334155; --theme-link: #005aa4; --theme-link-hover: #003f73; --theme-input-border: #cbd5e1; --theme-table-border: #e2e8f0; --theme-shadow: rgba(15, 23, 42, 0.10); } body.theme-gray { --theme-primary: #455a64; --theme-primary-hover: #263238; --theme-accent: #607d8b; --theme-body-bg: #e7eaee; --theme-page-bg: #e7eaee; --theme-sidebar-bg: #374151; --theme-sidebar-sub-bg: #2f3845; --theme-navbar-brand-bg: #263238; --theme-card-bg: #f5f6f8; --theme-card-header-bg: #eceff3; --theme-card-border: #cfd6de; --theme-panel-bg: #eef1f5; --theme-list-bg: #f8fafc; --theme-modal-header-bg: #eceff3; --theme-modal-body-bg: #f8fafc; --theme-text: #263238; --theme-text-soft: #374151; --theme-text-muted: #6b7280; --theme-sidebar-text: #d1d5db; --theme-link: #37474f; --theme-link-hover: #111827; --theme-input-border: #b0bac5; --theme-table-border: #d6dce3; --theme-shadow: rgba(31, 41, 55, 0.12); } body.theme-gold { /* PRINCIPALES */ --theme-primary: #d6a84f; --theme-primary-hover: #c2953f; --theme-accent: #f3c96b; /* FONDOS */ --theme-body-bg: #071426; --theme-page-bg: #0b1c31; --theme-sidebar-bg: #06101d; --theme-sidebar-sub-bg: #0b1728; --theme-navbar-brand-bg: #040c16; --theme-card-bg: #10233b; --theme-card-header-bg: #132943; --theme-card-border: rgba(214, 168, 79, 0.14); --theme-panel-bg: #112742; --theme-list-bg: #142c49; --theme-modal-header-bg: #132943; --theme-modal-body-bg: #10233b; /* TEXTOS */ --theme-text: #f8fafc; --theme-text-soft: #d7dee8; --theme-text-muted: #9fb0c3; --theme-sidebar-text: #d9e2f2; --theme-link: #f3c96b; --theme-link-hover: #ffe08f; /* INPUTS */ --theme-input-border: rgba(214, 168, 79, 0.22); /* TABLAS */ --theme-table-border: rgba(255,255,255,0.06); /* EFECTOS */ --theme-shadow: rgba(0, 0, 0, 0.35); /* EXTRA */ --theme-success: #3fb27f; --theme-danger: #e05a5a; --theme-warning: #f3c96b; --theme-info: #5aa9e0; } /* SIDEBAR */ body.theme-gold .sidebar, body.theme-gold .left-sidebar { border-right: 1px solid rgba(214,168,79,.08); box-shadow: 4px 0 30px rgba(0,0,0,.18); } /* CARDS */ body.theme-gold .card { border: 1px solid rgba(214,168,79,.08); border-radius: 18px; overflow: hidden; backdrop-filter: blur(10px); } /* HEADER CARD */ body.theme-gold .card-header { border-bottom: 1px solid rgba(255,255,255,.04); } /* BOTONES */ body.theme-gold .btn-primary { background: linear-gradient(135deg, #d6a84f, #f3c96b); border-color: #d6a84f; color: #061426; font-weight: 700; } body.theme-gold .btn-primary:hover { background: linear-gradient(135deg, #c2953f, #eec15a); border-color: #c2953f; color: #061426; } body.theme-gold .navbar-inverse{ background-color: #323b47; } body.theme-gold .dropdown-menu{ background: #bec5cd; } /* INPUTS */ body.theme-gold .form-control, body.theme-gold .form-select { background: #0d2138; border: 1px solid rgba(214,168,79,.14); color: #ffffff; border-radius: 12px; } body.theme-gold .form-control:focus, body.theme-gold .form-select:focus { border-color: #d6a84f; box-shadow: 0 0 0 3px rgba(214,168,79,.15); } /* TABLAS */ body.theme-gold table { color: #e8edf5; } body.theme-gold .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.015); } /* SIDEBAR LINKS */ body.theme-gold .sidebar a, body.theme-gold .left-sidebar a { transition: all .2s ease; } body.theme-gold .sidebar a:hover, body.theme-gold .left-sidebar a:hover { background: rgba(214,168,79,.08); color: #f3c96b; } /* ACTIVE MENU */ body.theme-gold .sidebar .active, body.theme-gold .left-sidebar .active { background: linear-gradient(90deg, rgba(214,168,79,.18), transparent); border-left: 3px solid #d6a84f; } /* MODALES */ body.theme-gold .modal-content { background: #10233b; border: 1px solid rgba(214,168,79,.12); border-radius: 18px; } /* DROPDOWNS */ body.theme-gold .dropdown-menu { background: #10233b; border: 1px solid rgba(214,168,79,.12); border-radius: 14px; } body.theme-gold .dropdown-item { color: #d7dee8; } body.theme-gold .dropdown-item:hover { background: rgba(214,168,79,.08); color: #f3c96b; } /* Layout */ body.theme-dark, body.theme-light, body.theme-gray { color: var(--theme-text-soft); background-color: var(--theme-body-bg); } body.theme-dark #page-content-wrapper, body.theme-light #page-content-wrapper, body.theme-gray #page-content-wrapper { background: var(--theme-page-bg); } body.theme-dark #sidebar-wrapper, body.theme-light #sidebar-wrapper, body.theme-gray #sidebar-wrapper { background: var(--theme-sidebar-bg); border-right: 1px solid var(--theme-card-border); } body.theme-dark .navbar-header, body.theme-light .navbar-header, body.theme-gray .navbar-header { background: var(--theme-navbar-brand-bg); } body.theme-light .navbar-brand > img, body.theme-gray .navbar-brand > img { filter: none; } body.theme-dark .navbar-inverse, body.theme-light .navbar-inverse, body.theme-gray .navbar-inverse { background-color: var(--theme-primary); } /* Typography */ body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6, body.theme-light h1, body.theme-light h2, body.theme-light h3, body.theme-light h4, body.theme-light h5, body.theme-light h6, body.theme-gray h1, body.theme-gray h2, body.theme-gray h3, body.theme-gray h4, body.theme-gray h5, body.theme-gray h6 { color: var(--theme-text); } body.theme-dark a, body.theme-light a, body.theme-gray a { color: var(--theme-link); } body.theme-dark a:hover, body.theme-dark a:focus, body.theme-light a:hover, body.theme-light a:focus, body.theme-gray a:hover, body.theme-gray a:focus { color: var(--theme-link-hover); } /* Sidebar */ body.theme-dark .sidebar ul .list-header, body.theme-light .sidebar ul .list-header, body.theme-gray .sidebar ul .list-header { color: var(--theme-text-muted); } body.theme-dark .sidebar ul li a, body.theme-light .sidebar ul li a, body.theme-gray .sidebar ul li a { color: var(--theme-sidebar-text); } body.theme-dark .sidebar ul li a:hover, body.theme-light .sidebar ul li a:hover, body.theme-gray .sidebar ul li a:hover, body.theme-dark .sidebar ul li.active-link a, body.theme-light .sidebar ul li.active-link a, body.theme-gray .sidebar ul li.active-link a { color: var(--theme-text); } body.theme-dark .sidebar .nav-second-level, body.theme-light .sidebar .nav-second-level, body.theme-gray .sidebar .nav-second-level, body.theme-dark .sidebar ul li.active, body.theme-light .sidebar ul li.active, body.theme-gray .sidebar ul li.active { background-color: var(--theme-sidebar-sub-bg); border-color: var(--theme-card-border); } body.theme-dark .sidebar ul li.active-link a, body.theme-light .sidebar ul li.active-link a, body.theme-gray .sidebar ul li.active-link a { box-shadow: inset 2px 0 0 0 var(--theme-accent); } body.theme-light .sidebar ul li.active-link a, body.theme-light .sidebar ul li a:hover { color: var(--theme-primary); } /* Headers/cards */ body.theme-dark .content-header, body.theme-light .content-header, body.theme-gray .content-header { background-color: var(--theme-card-bg); border-bottom-color: var(--theme-card-border); } body.theme-dark .content-header .header-icon, body.theme-light .content-header .header-icon, body.theme-gray .content-header .header-icon, body.theme-dark .card-title h2, body.theme-light .card-title h2, body.theme-gray .card-title h2 { color: var(--theme-primary-hover); } body.theme-dark .content-header .header-title small, body.theme-light .content-header .header-title small, body.theme-gray .content-header .header-title small, body.theme-dark .card .card-content p, body.theme-light .card .card-content p, body.theme-gray .card .card-content p { color: var(--theme-text-muted); } body.theme-dark .card, body.theme-light .card, body.theme-gray .card, body.theme-dark .panel, body.theme-light .panel, body.theme-gray .panel { background-color: var(--theme-card-bg) !important; color: var(--theme-text-soft); box-shadow: 0 2px 5px 0 var(--theme-shadow), 0 2px 10px 0 var(--theme-shadow); } body.theme-dark .card-header, body.theme-light .card-header, body.theme-gray .card-header, body.theme-dark .panel-heading, body.theme-light .panel-heading, body.theme-gray .panel-heading { background: var(--theme-card-header-bg); border-bottom-color: var(--theme-card-border); color: var(--theme-text); } body.theme-dark .card-header > h2, body.theme-light .card-header > h2, body.theme-gray .card-header > h2, body.theme-dark .card .card-content, body.theme-light .card .card-content, body.theme-gray .card .card-content { color: var(--theme-text-soft); } body.theme-dark .card-header i.fa, body.theme-light .card-header i.fa, body.theme-gray .card-header i.fa, body.theme-dark .material-button, body.theme-light .material-button, body.theme-gray .material-button, body.theme-dark .timeline-badge, body.theme-light .timeline-badge, body.theme-gray .timeline-badge, body.theme-dark span.badge, body.theme-light span.badge, body.theme-gray span.badge { background-color: var(--theme-primary); color: #fff; } body.theme-dark .card .card-content .well, body.theme-light .card .card-content .well, body.theme-gray .card .card-content .well { background: var(--theme-panel-bg); border-color: var(--theme-card-border); color: var(--theme-text-soft); } body.theme-dark .card .card-content .list-group-item, body.theme-light .card .card-content .list-group-item, body.theme-gray .card .card-content .list-group-item { background-color: var(--theme-list-bg); border: 1px solid var(--theme-card-border); color: var(--theme-text-soft); } /* Forms */ body.theme-dark input:not([type]), body.theme-dark input[type="text"], body.theme-dark input[type="password"], body.theme-dark input[type="email"], body.theme-dark input[type="url"], body.theme-dark input[type="time"], body.theme-dark input[type="date"], body.theme-dark input[type="datetime"], body.theme-dark input[type="datetime-local"], body.theme-dark input[type="tel"], body.theme-dark input[type="number"], body.theme-dark input[type="search"], body.theme-dark textarea.materialize-textarea, body.theme-light input:not([type]), body.theme-light input[type="text"], body.theme-light input[type="password"], body.theme-light input[type="email"], body.theme-light input[type="url"], body.theme-light input[type="time"], body.theme-light input[type="date"], body.theme-light input[type="datetime"], body.theme-light input[type="datetime-local"], body.theme-light input[type="tel"], body.theme-light input[type="number"], body.theme-light input[type="search"], body.theme-light textarea.materialize-textarea, body.theme-gray input:not([type]), body.theme-gray input[type="text"], body.theme-gray input[type="password"], body.theme-gray input[type="email"], body.theme-gray input[type="url"], body.theme-gray input[type="time"], body.theme-gray input[type="date"], body.theme-gray input[type="datetime"], body.theme-gray input[type="datetime-local"], body.theme-gray input[type="tel"], body.theme-gray input[type="number"], body.theme-gray input[type="search"], body.theme-gray textarea.materialize-textarea, body.theme-dark .form-control, body.theme-light .form-control, body.theme-gray .form-control, body.theme-dark select, body.theme-light select, body.theme-gray select { color: var(--theme-text-soft); border-bottom-color: var(--theme-input-border); background-color: transparent; } body.theme-light .form-control, body.theme-gray .form-control, body.theme-light select, body.theme-gray select { background-color: #fff; border-color: var(--theme-input-border); } body.theme-dark label, body.theme-light label, body.theme-gray label, body.theme-dark [type="checkbox"] + label, body.theme-light [type="checkbox"] + label, body.theme-gray [type="checkbox"] + label, body.theme-dark [type="radio"]:not(:checked) + label, body.theme-light [type="radio"]:not(:checked) + label, body.theme-gray [type="radio"]:not(:checked) + label, body.theme-dark [type="radio"]:checked + label, body.theme-light [type="radio"]:checked + label, body.theme-gray [type="radio"]:checked + label { color: var(--theme-text-muted); } /* Tables */ body.theme-dark .table, body.theme-light .table, body.theme-gray .table { color: var(--theme-text-soft); } body.theme-dark .table > tbody > tr > td, body.theme-dark .table > tbody > tr > th, body.theme-dark .table > tfoot > tr > td, body.theme-dark .table > tfoot > tr > th, body.theme-dark .table > thead > tr > td, body.theme-dark .table > thead > tr > th, body.theme-light .table > tbody > tr > td, body.theme-light .table > tbody > tr > th, body.theme-light .table > tfoot > tr > td, body.theme-light .table > tfoot > tr > th, body.theme-light .table > thead > tr > td, body.theme-light .table > thead > tr > th, body.theme-gray .table > tbody > tr > td, body.theme-gray .table > tbody > tr > th, body.theme-gray .table > tfoot > tr > td, body.theme-gray .table > tfoot > tr > th, body.theme-gray .table > thead > tr > td, body.theme-gray .table > thead > tr > th { border-top-color: var(--theme-table-border); } body.theme-light .table-striped > tbody > tr:nth-of-type(odd), body.theme-gray .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(0,0,0,.025); } /* Dropdowns */ body.theme-dark .dropdown-menu, body.theme-light .dropdown-menu, body.theme-gray .dropdown-menu, body.theme-dark .dropdown-menu .list-details, body.theme-light .dropdown-menu .list-details, body.theme-gray .dropdown-menu .list-details { background: var(--theme-card-bg); color: var(--theme-text-soft); border-color: var(--theme-card-border); } body.theme-dark .dropdown-menu > li > a, body.theme-light .dropdown-menu > li > a, body.theme-gray .dropdown-menu > li > a, body.theme-dark .list-details > a > p, body.theme-light .list-details > a > p, body.theme-gray .list-details > a > p { color: var(--theme-text-soft); } body.theme-dark .dropdown-menu > li > a:hover, body.theme-dark .dropdown-menu > li > a:focus, body.theme-light .dropdown-menu > li > a:hover, body.theme-light .dropdown-menu > li > a:focus, body.theme-gray .dropdown-menu > li > a:hover, body.theme-gray .dropdown-menu > li > a:focus { background-color: color-mix(in srgb, var(--theme-primary) 18%, transparent); box-shadow: none; } /* Modal */ body.theme-dark .modal-content, body.theme-light .modal-content, body.theme-gray .modal-content, body.theme-dark .modal-dialog .modal-header, body.theme-light .modal-dialog .modal-header, body.theme-gray .modal-dialog .modal-header, body.theme-dark .modal-dialog .modal-footer, body.theme-light .modal-dialog .modal-footer, body.theme-gray .modal-dialog .modal-footer { background: var(--theme-modal-header-bg); color: var(--theme-text-soft); border-color: var(--theme-card-border); } body.theme-dark .modal-dialog .modal-body, body.theme-light .modal-dialog .modal-body, body.theme-gray .modal-dialog .modal-body { background: var(--theme-modal-body-bg); color: var(--theme-text-soft); } body.theme-light .md-content form p, body.theme-gray .md-content form p, body.theme-light .modal-dialog .modal-footer .btn, body.theme-gray .modal-dialog .modal-footer .btn, body.theme-light .modal-dialog .modal-footer .btn-large, body.theme-gray .modal-dialog .modal-footer .btn-large, body.theme-light .modal-dialog .modal-footer .btn-flat, body.theme-gray .modal-dialog .modal-footer .btn-flat { color: var(--theme-text-soft); } /* Utilities */ body.theme-dark .text-muted, body.theme-light .text-muted, body.theme-gray .text-muted, body.theme-dark .icons-name, body.theme-light .icons-name, body.theme-gray .icons-name, body.theme-dark .icon-container [class^="ti-"], body.theme-light .icon-container [class^="ti-"], body.theme-gray .icon-container [class^="ti-"], body.theme-dark .icon-container [class*=" ti-"], body.theme-light .icon-container [class*=" ti-"], body.theme-gray .icon-container [class*=" ti-"] { color: var(--theme-text-muted); } body.theme-light .tree li, body.theme-light .tree li a, body.theme-light .tree li button, body.theme-gray .tree li, body.theme-gray .tree li a, body.theme-gray .tree li button { color: var(--theme-text-soft); } /* Botones para selector de tema */ .theme-switcher { display: inline-flex; gap: 6px; align-items: center; } .theme-switcher .theme-btn { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; padding: 5px 8px; border-radius: 4px; font-size: 12px; line-height: 1; cursor: pointer; } .theme-switcher .theme-btn.active, .theme-switcher .theme-btn:hover { background: #fff; color: var(--theme-primary); } .table-striped>tbody>tr:nth-of-type(odd){ background: rgba(255, 255, 255, .015) !important; } table.dataTable tbody tr{ background-color: #272d37 !important; } table.dataTable tbody th, table.dataTable tbody td{ border-top: 1px solid #1a212b !important; } .table-hover>tbody>tr:hover{ background-color: #343c47 !important; } .content-header .header-icon, .card-title h2{ color: var(--ev-gold); } .card-header i.fa{ background-color: var(--ev-border); } thead, .table > tbody > tr > td{ border-top: 1px solid #1c232d !important; } .table>thead>tr>th { vertical-align: bottom; border-bottom: 2px solid #1c232d !important; } .dataTables_wrapper .dataTables_processing{ background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(44 51 61) 25%, rgb(44 51 61) 75%, rgba(255, 255, 255, 0) 100%) !important; color: white !important; }