/* ========================================================= * MODO OSCURO — se activa con * ========================================================= */ [data-theme="dark"] { --primary-color: #ff7a33; --primary-hover: #ff6622; --primary-light: #2d1500; --secondary-color: #94a3b8; --success-color: #34d399; --danger-color: #f87171; --warning-color: #fbbf24; --info-color: #60a5fa; --bg-color: #0f172a; --surface-color: #1e293b; --border-color: #334155; --text-color: #e2e8f0; --text-muted: #94a3b8; --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4); } [data-theme="dark"] body { background-color: var(--bg-color); } [data-theme="dark"] .app-container { background-color: #0f172a; } [data-theme="dark"] .sidebar, [data-theme="dark"] .mobile-header { background-color: var(--surface-color); border-color: var(--border-color); } [data-theme="dark"] .sidebar-footer { background-color: #172032; } [data-theme="dark"] .main-content { background-color: var(--bg-color); } [data-theme="dark"] .module-card { background-color: var(--surface-color); border-color: var(--border-color); } [data-theme="dark"] .card { background-color: var(--surface-color); border-color: var(--border-color); } [data-theme="dark"] .table th { background-color: #172032; color: var(--text-muted); } [data-theme="dark"] .table tbody tr:hover { background-color: #172032; } [data-theme="dark"] .badge { background-color: #334155; color: var(--text-color); } [data-theme="dark"] .badge-success { background-color: #064e3b; color: #6ee7b7; } /* Botones: en oscuro las variables de color se aclaran (pensadas para texto sobre fondo oscuro) y el texto blanco de los botones rellenos no se leía. */ [data-theme="dark"] .btn-secondary { background-color: #475569; } [data-theme="dark"] .btn-secondary:hover { background-color: #64748b; } [data-theme="dark"] .btn-danger { background-color: #dc2626; } [data-theme="dark"] .btn-danger:hover { background-color: #b91c1c; } [data-theme="dark"] .btn-success { background-color: #059669; } [data-theme="dark"] .btn-success:hover { background-color: #047857; } [data-theme="dark"] .badge-secondary { background-color: #334155; color: var(--text-muted); } [data-theme="dark"] .badge-info { background-color: #1e3a5f; color: #93c5fd; } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea { background-color: #172032; border-color: var(--border-color); color: var(--text-color); } [data-theme="dark"] .modal-perfil-box, [data-theme="dark"] .modal-content, [data-theme="dark"] .custom-modal .modal-content { background-color: var(--surface-color); border-color: var(--border-color); } [data-theme="dark"] .modal-perfil-header, [data-theme="dark"] .modal-perfil-footer { border-color: var(--border-color); } [data-theme="dark"] .modal-ajustes-box { background: var(--surface-color); border-color: var(--border-color); } [data-theme="dark"] .modal-ajustes-header { border-color: var(--border-color); } [data-theme="dark"] .ajustes-sidenav { background: #172032; border-color: var(--border-color); } [data-theme="dark"] .ajustes-sidenav-item:hover { background: var(--surface-color); } [data-theme="dark"] .ajustes-sidenav-item.active { background: var(--primary-light); } [data-theme="dark"] .ajustes-panel-title { border-color: var(--border-color); } [data-theme="dark"] .ajustes-cuenta-card { background: #172032; border-color: var(--border-color); } [data-theme="dark"] .ajustes-form-footer { border-color: var(--border-color); } [data-theme="dark"] .btn-logout-link { border-color: var(--border-color); color: #fca5a5; } [data-theme="dark"] .btn-logout-link:hover { background: #450a0a; border-color: #fca5a5; } [data-theme="dark"] .ajustes-row { border-color: var(--border-color); } [data-theme="dark"] .ajustes-switch-slider { background: #334155; } [data-theme="dark"] .ajustes-sesion { background: #172032; border-color: var(--border-color); } [data-theme="dark"] .ajustes-sesion.es-actual { background: var(--primary-light); border-color: var(--primary-color); } [data-theme="dark"] .ajustes-sesiones-footer { border-color: var(--border-color); } [data-theme="dark"] .ajustes-msg--success { background: #064e3b; color: #6ee7b7; } [data-theme="dark"] .ajustes-msg--error { background: #450a0a; color: #fca5a5; } [data-theme="dark"] .btn-ajustes:hover { background: var(--primary-light); } [data-theme="dark"] .perfil-section-title { border-color: var(--border-color); } [data-theme="dark"] .perfil-2fa-secret-box { background-color: #172032; border-color: var(--border-color); } [data-theme="dark"] .toast { background-color: var(--surface-color); border-color: var(--border-color); } [data-theme="dark"] .error-message { background-color: #4c0519; color: #fca5a5; } [data-theme="dark"] .perfil-error { background-color: #4c0519; color: #fca5a5; } [data-theme="dark"] .login-page { background: linear-gradient(135deg, #1a0a00 0%, #0f172a 50%, #0f172a 100%); } [data-theme="dark"] .login-box { background-color: var(--surface-color); border-color: var(--border-color); } [data-theme="dark"] .icon-grid-wrap { background: #172032; border-color: var(--border-color); } [data-theme="dark"] .icon-grid-header { background: linear-gradient(#172032 60%, transparent); } [data-theme="dark"] .icon-grid-item { background: var(--surface-color); } [data-theme="dark"] .module-card-action { background: var(--surface-color); border-color: var(--border-color); } [data-theme="dark"] .import-card { background: var(--surface-color); border-color: var(--border-color); } [data-theme="dark"] .import-dropzone { background: #172032; border-color: var(--border-color); } /* ── Botón toggle de tema ── */ .btn-theme-toggle { background: none; border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 0.375rem 0.625rem; cursor: pointer; color: var(--text-muted); font-size: 1rem; line-height: 1; transition: all 0.2s; display: flex; align-items: center; gap: 0.375rem; } .btn-theme-toggle:hover { background: var(--primary-light); border-color: var(--primary-color); color: var(--primary-color); } .btn-theme-toggle .theme-label { font-size: 0.75rem; font-weight: 500; } [data-theme="dark"] .perfil-2fa-active { background: #064e3b; border-color: #047857; } [data-theme="dark"] .perfil-2fa-active-text { color: #6ee7b7; } [data-theme="dark"] .perfil-2fa-active-text small { color: #a7f3d0; }