/* ============================================================================= MegaCity Platform — dark-mode.css Modo oscuro completo. Activar con data-dark="1" en el elemento . Los bordes y acentos conservan el color del tema (--primary) para que el look sea elegante incluso en dark mode. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. VARIABLES DE SUPERFICIE — Dark ----------------------------------------------------------------------------- */ [data-dark="1"] { --bg-body: #0f172a; --bg-card: #1e293b; --bg-sidebar: #0a0f1e; --bg-navbar: rgba(15, 23, 42, 0.95); --bg-input: #1e293b; --bg-input-hover: #253347; --bg-hover: rgba(255, 255, 255, .04); --bg-surface: #253347; --bg-table-head: #162032; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #64748b; --text-sidebar: #94a3b8; --text-sidebar-muted: #475569; --text-input: #e2e8f0; --border-color: #334155; --border-subtle: #1e293b; } /* ----------------------------------------------------------------------------- 2. BODY Y FONDO GENERAL ----------------------------------------------------------------------------- */ [data-dark="1"] body { background-color: var(--bg-body); color: var(--text-primary); } /* Override de Bootstrap si se usa */ [data-dark="1"] .bg-white { background-color: var(--bg-card) !important; } [data-dark="1"] .bg-light { background-color: var(--bg-surface) !important; } /* ----------------------------------------------------------------------------- 3. SIDEBAR ----------------------------------------------------------------------------- */ [data-dark="1"] .sidebar { background: var(--bg-sidebar); box-shadow: 4px 0 24px rgba(0, 0, 0, .4); } [data-dark="1"] .sidebar-brand { border-bottom-color: rgba(255, 255, 255, .05); } [data-dark="1"] .sidebar-brand-name { color: #f1f5f9; } [data-dark="1"] .sidebar-section-label { color: var(--text-sidebar-muted); } [data-dark="1"] .sidebar-nav .nav-link { color: var(--text-sidebar); } [data-dark="1"] .sidebar-nav .nav-link:hover { background: rgba(var(--primary-rgb), .12); color: #f1f5f9; border-left-color: rgba(var(--primary-rgb), .5); } [data-dark="1"] .sidebar-nav .nav-link:hover .nav-icon { color: var(--primary); opacity: 1; } [data-dark="1"] .sidebar-nav .nav-link.active { background: rgba(var(--primary-rgb), .2); color: var(--primary); border-left-color: var(--primary); } [data-dark="1"] .sidebar-nav .nav-link.active .nav-icon { color: var(--primary); opacity: 1; } [data-dark="1"] .sidebar-nav .nav-link .nav-badge { background: rgba(var(--primary-rgb), .2); color: var(--primary); } [data-dark="1"] .sidebar-divider { background: rgba(255, 255, 255, .05); } [data-dark="1"] .sidebar-footer { border-top-color: rgba(255, 255, 255, .05); } [data-dark="1"] .sidebar-user-name { color: #e2e8f0; } [data-dark="1"] .sidebar-user-role { color: var(--text-sidebar-muted); } /* ----------------------------------------------------------------------------- 4. NAVBAR TOP ----------------------------------------------------------------------------- */ [data-dark="1"] .navbar-top { background: var(--bg-navbar) !important; border-bottom: 1px solid var(--border-color) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .04) !important; } [data-dark="1"] .navbar-scrolled { background: rgba(15, 23, 42, 0.6) !important; backdrop-filter: saturate(200%) blur(20px) !important; -webkit-backdrop-filter: saturate(200%) blur(20px) !important; box-shadow: 0 2px 24px rgba(0, 0, 0, .35) !important; border-bottom-color: rgba(255, 255, 255, .05) !important; } [data-dark="1"] .navbar-toggler-btn { color: var(--text-secondary); } [data-dark="1"] .navbar-toggler-btn:hover { background: rgba(var(--primary-rgb), .12); color: var(--primary); } [data-dark="1"] .navbar-search input { background: var(--bg-surface); border-color: var(--border-color); color: var(--text-primary); } [data-dark="1"] .navbar-search input:focus { background: var(--bg-input); border-color: rgba(var(--primary-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); } [data-dark="1"] .navbar-search input::placeholder { color: var(--text-muted); } [data-dark="1"] .navbar-search .search-icon { color: var(--text-muted); } [data-dark="1"] .navbar-action-btn { color: var(--text-secondary); } [data-dark="1"] .navbar-action-btn:hover { background: rgba(var(--primary-rgb), .12); color: var(--primary); } [data-dark="1"] .action-badge { border-color: var(--bg-navbar) !important; } [data-dark="1"] .navbar-avatar { border-color: rgba(var(--primary-rgb), .4); } /* Navbar temática en dark mode */ [data-dark="1"] .navbar-themed { background: linear-gradient(135deg, color-mix(in srgb, var(--navbar-bg) 70%, #0f172a), color-mix(in srgb, var(--navbar-bg-end) 70%, #0f172a) ) !important; } /* ----------------------------------------------------------------------------- 5. CARDS ----------------------------------------------------------------------------- */ [data-dark="1"] .card { background: var(--bg-card); border-color: var(--border-color); border-left-color: var(--primary); /* acento del tema conservado */ box-shadow: 0 4px 6px rgba(0, 0, 0, .3); } [data-dark="1"] .card:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, .4); } [data-dark="1"] .card-header { border-bottom-color: var(--border-color); } [data-dark="1"] .card-footer { border-top-color: var(--border-color); } [data-dark="1"] .card-title { color: var(--text-primary); } [data-dark="1"] .card-subtitle { color: var(--text-muted); } [data-dark="1"] .card-border-top { border-left-color: var(--border-color); border-top-color: var(--primary); } /* ----------------------------------------------------------------------------- 6. STAT CARDS ----------------------------------------------------------------------------- */ [data-dark="1"] .stat-card { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); } [data-dark="1"] .stat-card:hover { box-shadow: 0 16px 32px rgba(0, 0, 0, .4); } [data-dark="1"] .stat-card::before { background: var(--primary-gradient); } [data-dark="1"] .stat-card-icon { background: rgba(var(--primary-rgb), .15); color: var(--primary); } [data-dark="1"] .stat-card:hover .stat-card-icon { background: var(--primary); color: #fff; } [data-dark="1"] .stat-card-value { color: var(--text-primary); } [data-dark="1"] .stat-card-label { color: var(--text-muted); } /* ----------------------------------------------------------------------------- 7. TABLAS ----------------------------------------------------------------------------- */ [data-dark="1"] .table-wrapper { border-color: var(--border-color); } [data-dark="1"] .table { color: var(--text-secondary); } [data-dark="1"] .table th { background: var(--bg-table-head); color: var(--text-muted); border-bottom-color: var(--border-color); } [data-dark="1"] .table td { border-bottom-color: var(--border-color); color: var(--text-secondary); } [data-dark="1"] .table tbody tr:hover { background: rgba(var(--primary-rgb), .06); } [data-dark="1"] .table tbody tr:hover td { color: var(--text-primary); } [data-dark="1"] .table th.sortable:hover { background: rgba(var(--primary-rgb), .08); color: var(--primary); } /* Bootstrap table override */ [data-dark="1"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, .025); color: var(--text-secondary); } [data-dark="1"] .table-hover > tbody > tr:hover > * { background-color: rgba(var(--primary-rgb), .06); color: var(--text-primary); } /* ----------------------------------------------------------------------------- 8. FORMULARIOS ----------------------------------------------------------------------------- */ [data-dark="1"] .form-label { color: var(--text-secondary); } [data-dark="1"] .form-control, [data-dark="1"] .form-select, [data-dark="1"] .form-textarea { background: var(--bg-input); border-color: var(--border-color); color: var(--text-input); } [data-dark="1"] .form-control:hover, [data-dark="1"] .form-select:hover { border-color: rgba(var(--primary-rgb), .4); background: var(--bg-input-hover); } [data-dark="1"] .form-control:focus, [data-dark="1"] .form-select:focus, [data-dark="1"] .form-textarea:focus { background: var(--bg-input-hover); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); } [data-dark="1"] .form-control::placeholder, [data-dark="1"] .form-textarea::placeholder { color: var(--text-muted); } [data-dark="1"] .form-hint { color: var(--text-muted); } [data-dark="1"] .input-group-text { background: var(--bg-surface); border-color: var(--border-color); color: var(--text-muted); } [data-dark="1"] .form-check-modern:hover { background: rgba(var(--primary-rgb), .08); } [data-dark="1"] .toggle-switch-track { background: #334155; } [data-dark="1"] .toggle-switch input:checked + .toggle-switch-track { background: var(--primary); } /* Select de Bootstrap */ [data-dark="1"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } /* ----------------------------------------------------------------------------- 9. BOTONES ----------------------------------------------------------------------------- */ [data-dark="1"] .btn-secondary { background: var(--bg-surface); border-color: var(--border-color); color: var(--text-secondary); } [data-dark="1"] .btn-secondary:hover { background: rgba(255, 255, 255, .08); color: var(--text-primary); } [data-dark="1"] .btn-ghost { color: var(--text-secondary); } [data-dark="1"] .btn-ghost:hover { background: rgba(var(--primary-rgb), .1); color: var(--primary); } /* Primary / Outline heredan del tema — no necesitan override */ /* ----------------------------------------------------------------------------- 10. BADGES ----------------------------------------------------------------------------- */ [data-dark="1"] .badge-muted { background: rgba(255, 255, 255, .08); color: var(--text-muted); } [data-dark="1"] .badge-success { background: rgba(16, 185, 129, .2); color: #34d399; } [data-dark="1"] .badge-danger { background: rgba(239, 68, 68, .2); color: #f87171; } [data-dark="1"] .badge-warning { background: rgba(245, 158, 11, .2); color: #fbbf24; } [data-dark="1"] .badge-info { background: rgba(59, 130, 246, .2); color: #60a5fa; } /* ----------------------------------------------------------------------------- 11. ALERTS ----------------------------------------------------------------------------- */ [data-dark="1"] .alert-primary { background: rgba(var(--primary-rgb), .12); color: rgba(var(--primary-rgb), 1); } [data-dark="1"] .alert-success { background: rgba(16, 185, 129, .12); color: #34d399; } [data-dark="1"] .alert-danger { background: rgba(239, 68, 68, .12); color: #f87171; } [data-dark="1"] .alert-warning { background: rgba(245, 158, 11, .12); color: #fbbf24; } [data-dark="1"] .alert-info { background: rgba(59, 130, 246, .12); color: #60a5fa; } /* ----------------------------------------------------------------------------- 12. MODAL ----------------------------------------------------------------------------- */ [data-dark="1"] .modal-content { background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 25px 50px rgba(0, 0, 0, .6); } [data-dark="1"] .modal-header { border-bottom-color: var(--border-color); } [data-dark="1"] .modal-title { color: var(--text-primary); } [data-dark="1"] .modal-footer { border-top-color: var(--border-color); } [data-dark="1"] .modal-backdrop { background-color: rgba(0, 0, 0, .7); } /* Confirm dialog */ [data-dark="1"] .confirm-dialog-icon { background: rgba(239, 68, 68, .15); } /* ----------------------------------------------------------------------------- 13. DROPDOWN ----------------------------------------------------------------------------- */ [data-dark="1"] .dropdown-menu { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 16px 32px rgba(0, 0, 0, .4); } [data-dark="1"] .dropdown-item { color: var(--text-secondary); } [data-dark="1"] .dropdown-item:hover { background: rgba(var(--primary-rgb), .1); color: var(--primary); } [data-dark="1"] .dropdown-item.active { background: rgba(var(--primary-rgb), .15); color: var(--primary); } [data-dark="1"] .dropdown-item.danger:hover { background: rgba(239, 68, 68, .1); color: #f87171; } [data-dark="1"] .dropdown-divider { background: var(--border-color); } /* ----------------------------------------------------------------------------- 14. TOASTS ----------------------------------------------------------------------------- */ [data-dark="1"] .toast-item { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 16px 32px rgba(0, 0, 0, .5); } [data-dark="1"] .toast-title { color: var(--text-primary); } [data-dark="1"] .toast-message { color: var(--text-muted); } [data-dark="1"] .toast-close { color: var(--text-muted); } [data-dark="1"] .toast-close:hover { color: var(--text-primary); } /* ----------------------------------------------------------------------------- 15. PROGRESS BARS ----------------------------------------------------------------------------- */ [data-dark="1"] .progress { background: var(--bg-surface); } /* El bar conserva var(--primary-gradient) — OK */ /* ----------------------------------------------------------------------------- 16. TABS ----------------------------------------------------------------------------- */ [data-dark="1"] .tabs-modern { border-bottom-color: var(--border-color); } [data-dark="1"] .tabs-modern .tab-link { color: var(--text-muted); } [data-dark="1"] .tabs-modern .tab-link:hover { color: var(--primary); background: rgba(var(--primary-rgb), .08); } [data-dark="1"] .tabs-modern .tab-link.active { color: var(--primary); border-bottom-color: var(--primary); background: rgba(var(--primary-rgb), .08); } /* ----------------------------------------------------------------------------- 17. PAGINATION ----------------------------------------------------------------------------- */ [data-dark="1"] .page-link { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); } [data-dark="1"] .page-link:hover { background: rgba(var(--primary-rgb), .1); border-color: rgba(var(--primary-rgb), .4); color: var(--primary); } [data-dark="1"] .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; } [data-dark="1"] .page-item.disabled .page-link { background: var(--bg-surface); border-color: var(--border-color); color: var(--text-muted); } /* ----------------------------------------------------------------------------- 18. FOOTER ----------------------------------------------------------------------------- */ [data-dark="1"] .app-footer { background: rgba(10, 15, 30, .8); border-top: 1px solid var(--border-color); color: var(--text-muted); } /* ----------------------------------------------------------------------------- 19. CÓDIGO ----------------------------------------------------------------------------- */ [data-dark="1"] code { background: rgba(var(--primary-rgb), .12); color: rgba(var(--primary-rgb), 1); } [data-dark="1"] pre { background: #020817; border: 1px solid var(--border-color); } /* ----------------------------------------------------------------------------- 20. SURFACE / HIGHLIGHT ----------------------------------------------------------------------------- */ [data-dark="1"] .surface { background: var(--bg-surface); border-color: var(--border-color); } [data-dark="1"] .highlight-box { background: rgba(var(--primary-rgb), .1); border-color: rgba(var(--primary-rgb), .25); } [data-dark="1"] .divider { background: var(--border-color); } [data-dark="1"] .dot-sep { background: var(--text-muted); } /* ----------------------------------------------------------------------------- 21. BREADCRUMB ----------------------------------------------------------------------------- */ [data-dark="1"] .breadcrumb-item { color: var(--text-muted); } [data-dark="1"] .breadcrumb-item a { color: var(--text-muted); } [data-dark="1"] .breadcrumb-item a:hover { color: var(--primary); } [data-dark="1"] .breadcrumb-item.active { color: var(--text-secondary); } [data-dark="1"] .breadcrumb-item + .breadcrumb-item::before { color: var(--border-color); } /* ----------------------------------------------------------------------------- 22. PAGE HEADER ----------------------------------------------------------------------------- */ [data-dark="1"] .page-title { color: var(--text-primary); } [data-dark="1"] .page-subtitle { color: var(--text-muted); } /* ----------------------------------------------------------------------------- 23. HEADINGS Y TEXTO GENERAL ----------------------------------------------------------------------------- */ [data-dark="1"] h1, [data-dark="1"] h2, [data-dark="1"] h3, [data-dark="1"] h4, [data-dark="1"] h5, [data-dark="1"] h6 { color: var(--text-primary); } [data-dark="1"] p { color: var(--text-secondary); } [data-dark="1"] small, [data-dark="1"] .text-muted { color: var(--text-muted) !important; } /* ----------------------------------------------------------------------------- 24. SCROLLBAR EN DARK MODE ----------------------------------------------------------------------------- */ [data-dark="1"] ::-webkit-scrollbar-track { background: var(--bg-body); } [data-dark="1"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); } [data-dark="1"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .2); } [data-dark="1"] .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .08); } [data-dark="1"] .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .15); } /* ----------------------------------------------------------------------------- 25. LOADING / SKELETON EN DARK MODE ----------------------------------------------------------------------------- */ [data-dark="1"] .skeleton { background: linear-gradient(90deg, #1e293b 25%, #253347 50%, #1e293b 75%); background-size: 200% 100%; } [data-dark="1"] .loading-overlay { background: rgba(15, 23, 42, .75); } /* ----------------------------------------------------------------------------- 26. SIDEBAR OVERLAY EN DARK MODE ----------------------------------------------------------------------------- */ [data-dark="1"] .sidebar-overlay { background: rgba(0, 0, 0, .65); } /* ----------------------------------------------------------------------------- 27. TEMA PANEL (selector de temas) ----------------------------------------------------------------------------- */ [data-dark="1"] .theme-panel { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 20px 40px rgba(0, 0, 0, .5); } [data-dark="1"] .theme-panel-title { color: var(--text-muted); } [data-dark="1"] .dark-toggle-btn { background: var(--bg-surface); border-color: var(--border-color); color: var(--text-secondary); } [data-dark="1"] .dark-toggle-btn:hover { background: rgba(var(--primary-rgb), .1); border-color: rgba(var(--primary-rgb), .3); color: var(--primary); } [data-dark="1"] .dark-toggle-btn.active { background: rgba(var(--primary-rgb), .15); border-color: rgba(var(--primary-rgb), .4); color: var(--primary); } /* ----------------------------------------------------------------------------- 28. EMPTY STATE EN DARK MODE ----------------------------------------------------------------------------- */ [data-dark="1"] .empty-state-title { color: var(--text-primary); } [data-dark="1"] .empty-state-desc { color: var(--text-muted); } /* ----------------------------------------------------------------------------- 29. SELECTION EN DARK MODE ----------------------------------------------------------------------------- */ [data-dark="1"] ::selection { background: rgba(var(--primary-rgb), .3); color: #fff; } /* ----------------------------------------------------------------------------- 30. BOOTSTRAP OVERRIDES ESPECÍFICOS PARA DARK MODE ----------------------------------------------------------------------------- */ /* Si se usa Bootstrap 5 via CDN, algunos componentes necesitan override */ [data-dark="1"] .list-group-item { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); } [data-dark="1"] .list-group-item:hover, [data-dark="1"] .list-group-item:focus { background: rgba(var(--primary-rgb), .06); color: var(--text-primary); } [data-dark="1"] .list-group-item.active { background: rgba(var(--primary-rgb), .15); border-color: rgba(var(--primary-rgb), .3); color: var(--primary); } [data-dark="1"] .accordion-item { background: var(--bg-card); border-color: var(--border-color); } [data-dark="1"] .accordion-button { background: var(--bg-card); color: var(--text-primary); } [data-dark="1"] .accordion-button:not(.collapsed) { background: rgba(var(--primary-rgb), .08); color: var(--primary); } [data-dark="1"] .accordion-body { color: var(--text-secondary); } [data-dark="1"] .popover { background: var(--bg-card); border-color: var(--border-color); } [data-dark="1"] .popover-header { background: rgba(255, 255, 255, .04); border-bottom-color: var(--border-color); color: var(--text-primary); } [data-dark="1"] .popover-body { color: var(--text-secondary); } [data-dark="1"] .tooltip-inner { background: #1e293b; color: #e2e8f0; border: 1px solid var(--border-color); } [data-dark="1"] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before, [data-dark="1"] .bs-tooltip-top .tooltip-arrow::before { border-top-color: #1e293b; } /* Offcanvas */ [data-dark="1"] .offcanvas { background: var(--bg-card); color: var(--text-primary); } /* Nav Bootstrap */ [data-dark="1"] .nav-pills .nav-link { color: var(--text-secondary); } [data-dark="1"] .nav-pills .nav-link:hover { background: rgba(var(--primary-rgb), .08); color: var(--primary); } [data-dark="1"] .nav-pills .nav-link.active { background: var(--primary); color: #fff; } /* Card de Bootstrap */ [data-dark="1"] .card .card-body p, [data-dark="1"] .card .card-text { color: var(--text-secondary); } /* Inputs de Bootstrap */ [data-dark="1"] .form-check-input { background-color: var(--bg-input); border-color: var(--border-color); } [data-dark="1"] .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } /* ----------------------------------------------------------------------------- 31. TRANSICIÓN ENTRE LIGHT/DARK — SMOOTH ----------------------------------------------------------------------------- */ body, .sidebar, .navbar-top, .card, .stat-card, .modal-content, .dropdown-menu, .toast-item, .form-control, .form-select, .btn, .table, .table th, .table td, .app-footer { transition: background-color .3s ease, border-color .3s ease, color .2s ease, box-shadow .3s ease; }