/* * MegaCityPlus — Modo oscuro * Activo con .dark-mode en (flash-free) o */ html.dark-mode, body.dark-mode { --mc-bg: #0f172a; --mc-surface: #1e293b; --mc-surface-2: #162032; --mc-text: #f1f5f9; --mc-text-muted: #94a3b8; --mc-border: #334155; --mc-shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2); --mc-shadow-md: 0 4px 6px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2); --mc-shadow-lg: 0 10px 15px rgba(0,0,0,.4), 0 4px 6px rgba(0,0,0,.2); } /* Inputs y selects en dark */ html.dark-mode .mc-input, html.dark-mode .mc-select, html.dark-mode .mc-textarea, body.dark-mode .mc-input, body.dark-mode .mc-select, body.dark-mode .mc-textarea { background: #0f172a; border-color: #334155; color: #f1f5f9; } html.dark-mode .mc-input::placeholder, html.dark-mode .mc-textarea::placeholder, body.dark-mode .mc-input::placeholder, body.dark-mode .mc-textarea::placeholder { color: #475569; } html.dark-mode .mc-input:focus, html.dark-mode .mc-select:focus, html.dark-mode .mc-textarea:focus, body.dark-mode .mc-input:focus, body.dark-mode .mc-select:focus, body.dark-mode .mc-textarea:focus { border-color: var(--mc-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); } /* Alerts en dark */ html.dark-mode .mc-alert--success, body.dark-mode .mc-alert--success { background: rgba(21, 128, 61, .15); border-color: rgba(21, 128, 61, .3); color: #4ade80; } html.dark-mode .mc-alert--error, body.dark-mode .mc-alert--error { background: rgba(220, 38, 38, .15); border-color: rgba(220, 38, 38, .3); color: #f87171; } html.dark-mode .mc-alert--warning, body.dark-mode .mc-alert--warning { background: rgba(217, 119, 6, .15); border-color: rgba(217, 119, 6, .3); color: #fbbf24; } html.dark-mode .mc-alert--info, body.dark-mode .mc-alert--info { background: rgba(37, 99, 235, .15); border-color: rgba(37, 99, 235, .3); color: #60a5fa; } /* Badges en dark */ html.dark-mode .mc-badge--success, body.dark-mode .mc-badge--success { background: rgba(21, 128, 61, .2); color: #4ade80; } html.dark-mode .mc-badge--danger, body.dark-mode .mc-badge--danger { background: rgba(220, 38, 38, .2); color: #f87171; } html.dark-mode .mc-badge--warning, body.dark-mode .mc-badge--warning { background: rgba(217, 119, 6, .2); color: #fbbf24; } html.dark-mode .mc-badge--info, body.dark-mode .mc-badge--info { background: rgba(37, 99, 235, .2); color: #60a5fa; } html.dark-mode .mc-badge--gray, body.dark-mode .mc-badge--gray { background: #1e293b; color: #94a3b8; } /* Input group append en dark */ html.dark-mode .mc-input-group__append, body.dark-mode .mc-input-group__append { background: #162032; border-color: #334155; color: #94a3b8; } /* Tabla en dark */ html.dark-mode .mc-table th, body.dark-mode .mc-table th { background: #162032; color: #94a3b8; border-color: #334155; } html.dark-mode .mc-table td, body.dark-mode .mc-table td { border-color: #334155; color: #f1f5f9; } html.dark-mode .mc-table tbody tr:hover, body.dark-mode .mc-table tbody tr:hover { background: #162032; } /* Scrollbar personalizado en dark */ html.dark-mode ::-webkit-scrollbar, body.dark-mode ::-webkit-scrollbar { width: 6px; height: 6px; } html.dark-mode ::-webkit-scrollbar-track, body.dark-mode ::-webkit-scrollbar-track { background: #0f172a; } html.dark-mode ::-webkit-scrollbar-thumb, body.dark-mode ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; } html.dark-mode ::-webkit-scrollbar-thumb:hover, body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #475569; } /* Login en dark */ html.dark-mode .mc-login-card, body.dark-mode .mc-login-card { background: #1e293b; } /* Dropdown en dark */ html.dark-mode .mc-dropdown__menu, body.dark-mode .mc-dropdown__menu { background: #1e293b; border-color: #334155; } html.dark-mode .mc-dropdown__divider, body.dark-mode .mc-dropdown__divider { background: #334155; } html.dark-mode .mc-dropdown__item:hover, body.dark-mode .mc-dropdown__item:hover { background: #0f172a; } /* Sidebar en dark */ html.dark-mode .mc-sidebar, body.dark-mode .mc-sidebar { background: #0f172a; border-right-color: #1e293b; } html.dark-mode .mc-sidebar__link, body.dark-mode .mc-sidebar__link { color: #94a3b8; } html.dark-mode .mc-sidebar__link:hover, body.dark-mode .mc-sidebar__link:hover { background: rgba(255,255,255,.05); color: #f1f5f9; } html.dark-mode .mc-sidebar__link.active, body.dark-mode .mc-sidebar__link.active { background: rgba(99, 102, 241, .15); color: #818cf8; } /* Navbar en dark */ html.dark-mode .mc-navbar, body.dark-mode .mc-navbar { background: #1e293b; border-bottom-color: #334155; } /* Cards en dark */ html.dark-mode .mc-card, body.dark-mode .mc-card { background: #1e293b; border-color: #334155; } html.dark-mode .mc-card__header, body.dark-mode .mc-card__header { border-bottom-color: #334155; } /* Stat cards en dark */ html.dark-mode .mc-stat, body.dark-mode .mc-stat { background: #1e293b; border-color: #334155; } /* Modals en dark */ html.dark-mode .mc-modal__content, body.dark-mode .mc-modal__content { background: #1e293b; } html.dark-mode .mc-modal__header, body.dark-mode .mc-modal__header { border-bottom-color: #334155; } html.dark-mode .mc-modal__footer, body.dark-mode .mc-modal__footer { border-top-color: #334155; } /* Toast en dark */ html.dark-mode .mc-toast, body.dark-mode .mc-toast { background: #1e293b; border-color: #334155; color: #f1f5f9; } /* Paginación en dark */ html.dark-mode .mc-pagination__btn, body.dark-mode .mc-pagination__btn { background: #1e293b; border-color: #334155; color: #94a3b8; } html.dark-mode .mc-pagination__btn:hover, body.dark-mode .mc-pagination__btn:hover { background: #162032; color: #f1f5f9; } html.dark-mode .mc-pagination__btn.active, body.dark-mode .mc-pagination__btn.active { background: var(--mc-primary); color: #fff; } /* Bootstrap overrides en dark */ html.dark-mode .table, body.dark-mode .table { color: #f1f5f9; } html.dark-mode .table-striped > tbody > tr:nth-of-type(odd), body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,.03); } html.dark-mode .form-control, html.dark-mode .form-select, body.dark-mode .form-control, body.dark-mode .form-select { background-color: #0f172a; border-color: #334155; color: #f1f5f9; } html.dark-mode .form-control::placeholder, body.dark-mode .form-control::placeholder { color: #475569; } html.dark-mode .modal-content, body.dark-mode .modal-content { background: #1e293b; border-color: #334155; color: #f1f5f9; } html.dark-mode .modal-header, html.dark-mode .modal-footer, body.dark-mode .modal-header, body.dark-mode .modal-footer { border-color: #334155; }