/* ============================================================ SPORTIKO · THEME OVERRIDE Capa de color global sobre Dason + Bootstrap 5. Incluir DESPUÉS de bootstrap.min.css y app.min.css de Dason. Multi-tenant: para cambiar el color de un tenant, sobrescribe solo el bloque ":root { --sk-* }" (o inyéctalo inline por tenant en el ). Todo lo demás referencia estos tokens. ============================================================ */ /* ---------- 1. TOKENS DE MARCA (única fuente de verdad) ---------- */ :root { /* Violeta Centauri */ --sk-indigo: #26215C; /* profundo: sidebar, cabeceras */ --sk-primary: #534AB7; /* primario: botones, activos */ --sk-primary-600: #443BA3; --sk-accent: #7F77DD; /* acentos, íconos */ --sk-accent-soft: #AFA9EC; --sk-accent-100: #CECBF6; --sk-tint: #EEEDF6; /* fondo de página (ya no blanco) */ --sk-tint-strong: #E6E4F4; /* Superficies y texto */ --sk-surface: #FFFFFF; --sk-text: #26215C; --sk-text-muted: #6B6786; --sk-border: rgba(38, 33, 92, 0.10); --sk-border-strong: rgba(38, 33, 92, 0.16); /* Estados */ --sk-ok: #1D9E75; --sk-ok-bg: #E1F5EE; --sk-ok-text: #0F6E56; --sk-pending: #EF9F27; --sk-pending-bg: #FAEEDA; --sk-pending-text: #854F0B; --sk-danger: #E24B4A; --sk-danger-bg: #FCEBEB; --sk-danger-text: #A32D2D; /* Radios */ --sk-radius: 10px; --sk-radius-lg: 14px; } /* ---------- 2. MAPEO A VARIABLES DE BOOTSTRAP ---------- */ :root { --bs-primary: var(--sk-primary); --bs-primary-rgb: 83, 74, 183; --bs-link-color: var(--sk-primary); --bs-link-hover-color: var(--sk-primary-600); --bs-body-color: var(--sk-text); --bs-body-bg: var(--sk-tint); --bs-border-color: var(--sk-border); --bs-success: var(--sk-ok); --bs-warning: var(--sk-pending); --bs-danger: var(--sk-danger); } /* ---------- 3. BASE / FONDO ---------- */ body { background-color: var(--sk-tint) !important; color: var(--sk-text); } .page-content, .main-content { background-color: var(--sk-tint) !important; } /* ---------- 4. SIDEBAR (Dason .vertical-menu) ---------- */ .vertical-menu, .navbar-brand-box { background: var(--sk-indigo) !important; } #sidebar-menu ul li a { color: #FFFFFF !important; } #sidebar-menu ul li a i { color: var(--sk-accent-soft) !important; } #sidebar-menu ul li ul.sub-menu li a { color: #FFFFFF !important; opacity: 0.92; } #sidebar-menu ul li a:hover, #sidebar-menu ul li a:hover i { color: #fff !important; opacity: 1; } #sidebar-menu ul li a.active, #sidebar-menu ul li.mm-active > a { color: #fff !important; background: var(--sk-primary) !important; border-radius: var(--sk-radius); } #sidebar-menu ul li a.active i, #sidebar-menu ul li.mm-active > a i { color: #fff !important; } .menu-title { color: var(--sk-accent-soft) !important; opacity: 0.7; } /* ---------- 5. TOPBAR ---------- */ #page-topbar, .navbar-header { background: var(--sk-surface) !important; border-bottom: 1px solid var(--sk-border); box-shadow: none !important; } .app-search .form-control { background: var(--sk-tint) !important; border: 1px solid var(--sk-border) !important; border-radius: 999px; color: var(--sk-text); } .header-item { color: var(--sk-text-muted) !important; } /* ---------- 6. CARDS ---------- */ .card { background: var(--sk-surface); border: 1px solid var(--sk-border) !important; border-radius: var(--sk-radius-lg) !important; box-shadow: none !important; } .card-title, .card-header { color: var(--sk-text); } /* ---------- 7. BOTONES ---------- */ .btn-primary { --bs-btn-bg: var(--sk-primary); --bs-btn-border-color: var(--sk-primary); --bs-btn-hover-bg: var(--sk-primary-600); --bs-btn-hover-border-color: var(--sk-primary-600); --bs-btn-active-bg: var(--sk-primary-600); --bs-btn-active-border-color: var(--sk-primary-600); } .btn-outline-primary { --bs-btn-color: var(--sk-primary); --bs-btn-border-color: var(--sk-primary); --bs-btn-hover-bg: var(--sk-primary); --bs-btn-hover-border-color: var(--sk-primary); } .btn-soft { background: var(--sk-tint); color: var(--sk-primary); border: none; } .btn-soft:hover { background: var(--sk-tint-strong); } /* ---------- 8. BADGES / PÍLDORAS DE ESTADO ---------- */ .sk-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; } .sk-badge--ok { background: var(--sk-ok-bg); color: var(--sk-ok-text); } .sk-badge--pending { background: var(--sk-pending-bg); color: var(--sk-pending-text); } .sk-badge--danger { background: var(--sk-danger-bg); color: var(--sk-danger-text); } .sk-badge--info { background: var(--sk-tint); color: var(--sk-primary); } /* ---------- 9. TARJETAS KPI ---------- */ .sk-kpi { border-radius: var(--sk-radius-lg); padding: 14px 16px; } .sk-kpi__label { display:flex; align-items:center; gap:6px; font-size:12px; } .sk-kpi__value { margin:6px 0 0; font-size:24px; font-weight:500; line-height:1; } .sk-kpi--ok { background: var(--sk-ok-bg); } .sk-kpi--ok .sk-kpi__label { color: var(--sk-ok-text); } .sk-kpi--ok .sk-kpi__value { color: #04342C; } .sk-kpi--pending { background: var(--sk-pending-bg); } .sk-kpi--pending .sk-kpi__label { color: var(--sk-pending-text); } .sk-kpi--pending .sk-kpi__value { color: #412402; } .sk-kpi--plain { background: var(--sk-surface); border: 1px solid var(--sk-border); } .sk-kpi--plain .sk-kpi__label { color: var(--sk-primary); } .sk-kpi--plain .sk-kpi__value { color: var(--sk-text); } /* ---------- 10. TARJETA HERO (próximo partido) ---------- */ .sk-match { background: var(--sk-indigo); color: #fff; border-radius: var(--sk-radius-lg); padding: 18px; } .sk-match__meta { color: var(--sk-accent-100); font-size: 13px; } .sk-match__vs { color: var(--sk-accent-soft); font-weight: 500; } .sk-crest { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; background: var(--sk-indigo); border: 2px solid var(--sk-accent); } .sk-crest--empty { background: transparent; border: 2px dashed var(--sk-accent); color: var(--sk-accent-soft); } /* ---------- 11. BARRA DE PROGRESO ---------- */ .sk-progress { height: 6px; border-radius: 999px; background: var(--sk-tint); overflow: hidden; } .sk-progress__bar { height: 100%; background: var(--sk-ok); } /* ---------- 12. AVATARES (iniciales) ---------- */ .sk-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; background: var(--sk-accent-100); color: var(--sk-indigo); } /* ---------- 13. MODO OSCURO (cubre los atributos comunes de Dason) ---------- Dason segun version usa data-layout, data-bs-theme o data-layout-mode. Cubrimos todos para que enganche sea cual sea tu toggle. */ [data-layout="dark"], [data-bs-theme="dark"], [data-layout-mode="dark"], html.dark-mode, body.dark-mode { --sk-indigo: #1C1838; --sk-surface: #241F45; --sk-tint: #16132E; --sk-tint-strong: #221D40; --sk-text: #EEEDFE; --sk-text-muted: #AFA9EC; --sk-border: rgba(255,255,255,0.08); } /* Aplicacion del fondo/superficies en oscuro (mismos selectores) */ [data-layout="dark"] body, [data-bs-theme="dark"] body, [data-layout-mode="dark"] body, .dark-mode body, [data-layout="dark"] .page-content, [data-bs-theme="dark"] .page-content, [data-layout-mode="dark"] .page-content, .dark-mode .page-content, [data-layout="dark"] .main-content, [data-bs-theme="dark"] .main-content, [data-layout-mode="dark"] .main-content, .dark-mode .main-content { background-color: var(--sk-tint) !important; color: var(--sk-text); } [data-layout="dark"] .card, [data-bs-theme="dark"] .card, [data-layout-mode="dark"] .card, .dark-mode .card { background: var(--sk-surface) !important; color: var(--sk-text); } [data-layout="dark"] #page-topbar, [data-bs-theme="dark"] #page-topbar, [data-layout-mode="dark"] #page-topbar, .dark-mode #page-topbar, [data-layout="dark"] .navbar-header, [data-bs-theme="dark"] .navbar-header, [data-layout-mode="dark"] .navbar-header, .dark-mode .navbar-header { background: var(--sk-surface) !important; } /* ---------- 14. TABLAS EN OSCURO (causa raiz: tu head-style usaba [data-layout="dark"] que nunca aplica; el atributo real es data-layout-mode / data-bs-theme). Lo cubrimos aqui. */ [data-bs-theme="dark"] .table, [data-layout-mode="dark"] .table, [data-bs-theme="dark"] table.dataTable, [data-layout-mode="dark"] table.dataTable { --bs-table-bg: var(--sk-surface); --bs-table-color: var(--sk-text); background-color: var(--sk-surface) !important; color: var(--sk-text) !important; } [data-bs-theme="dark"] .table > thead th, [data-layout-mode="dark"] .table > thead th, [data-bs-theme="dark"] table.dataTable thead th, [data-layout-mode="dark"] table.dataTable thead th { background-color: var(--sk-indigo) !important; color: #FFFFFF !important; border-color: var(--sk-border) !important; } [data-bs-theme="dark"] .table > tbody td, [data-layout-mode="dark"] .table > tbody td, [data-bs-theme="dark"] table.dataTable tbody td, [data-layout-mode="dark"] table.dataTable tbody td { background-color: var(--sk-surface) !important; color: var(--sk-text) !important; border-color: var(--sk-border) !important; } [data-bs-theme="dark"] .table tbody tr:hover td, [data-layout-mode="dark"] .table tbody tr:hover td, [data-bs-theme="dark"] table.dataTable tbody tr:hover td, [data-layout-mode="dark"] table.dataTable tbody tr:hover td { background-color: var(--sk-tint-strong) !important; } /* ---------- 15. CAJA DE MARCA / sidebar colapsado (evita franja blanca) ---------- */ .navbar-brand-box, .vertical-menu .navbar-brand-box { background: var(--sk-indigo) !important; } /* ---------- 16. ENCABEZADO DE SECCION (reutilizable en todas las vistas) ---------- */ .sk-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; } .sk-sec-chip { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--sk-tint); color: var(--sk-primary); font-size: 18px; } .sk-sec-head h6, .sk-sec-head .sk-sec-title { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--sk-text-muted); font-weight: 500; } /* ---------- 17. UTILIDADES DE FONDO FIJAS EN OSCURO ---------- Bootstrap .bg-white / .bg-light / .table-light NO cambian con el tema: en modo oscuro quedan como bloques claros (las cabeceras que "se ven mal"). Las remapeamos a la paleta --sk-* del sistema para mantener coherencia claro/oscuro sin tener que editar cada vista. */ [data-bs-theme="dark"] .bg-white, [data-layout-mode="dark"] .bg-white, [data-bs-theme="dark"] .card-header.bg-white, [data-layout-mode="dark"] .card-header.bg-white, [data-bs-theme="dark"] .card-header, [data-layout-mode="dark"] .card-header { background-color: var(--sk-surface) !important; color: var(--sk-text) !important; } [data-bs-theme="dark"] .bg-light, [data-layout-mode="dark"] .bg-light, [data-bs-theme="dark"] .bg-light-subtle, [data-layout-mode="dark"] .bg-light-subtle { background-color: var(--sk-tint-strong) !important; color: var(--sk-text) !important; } /* Bordes utilitarios -> borde de la paleta */ [data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-start, [data-bs-theme="dark"] .border-end, [data-layout-mode="dark"] .border, [data-layout-mode="dark"] .border-top, [data-layout-mode="dark"] .border-bottom, [data-layout-mode="dark"] .border-start, [data-layout-mode="dark"] .border-end { border-color: var(--sk-border) !important; } /* Encabezados de tabla "table-light" */ [data-bs-theme="dark"] .table-light, [data-layout-mode="dark"] .table-light, [data-bs-theme="dark"] .table-light th, [data-bs-theme="dark"] .table-light td, [data-layout-mode="dark"] .table-light th, [data-layout-mode="dark"] .table-light td { --bs-table-bg: var(--sk-indigo); --bs-table-color: #ffffff; background-color: var(--sk-indigo) !important; color: #ffffff !important; border-color: var(--sk-border) !important; } /* Texto "oscuro" forzado -> texto de la paleta; modales y dropdowns */ [data-bs-theme="dark"] .text-dark, [data-layout-mode="dark"] .text-dark { color: var(--sk-text) !important; } [data-bs-theme="dark"] .modal-content, [data-layout-mode="dark"] .modal-content, [data-bs-theme="dark"] .dropdown-menu, [data-layout-mode="dark"] .dropdown-menu { background-color: var(--sk-surface) !important; color: var(--sk-text) !important; border-color: var(--sk-border) !important; } [data-bs-theme="dark"] .modal-header, [data-layout-mode="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer, [data-layout-mode="dark"] .modal-footer { border-color: var(--sk-border) !important; }