/* * ============================================================ * Mi Favorito — assets/css/dark-mode.css * Variables y sobreescrituras para el modo oscuro * * Se activa añadiendo la clase 'dark' al elemento * desde JavaScript (app.js) o PHP según el ajuste del admin. * ============================================================ */ /* Modo oscuro: se activa con clase 'dark' en el body */ body.dark { /* Paleta de colores en oscuro */ --color-fondo: #0F0F1A; /* Fondo muy oscuro, casi negro con toque azul */ --color-superficie: #1A1A2E; /* Superficie de tarjetas */ --color-superficie-2: #252540; /* Segunda superficie (inputs, hover) */ /* Textos en oscuro */ --color-texto: #F0F0F8; /* Texto principal: casi blanco */ --color-texto-2: #9CA3AF; /* Texto secundario: gris medio */ --color-texto-3: #6B7280; /* Texto terciario: gris oscuro */ /* Bordes en oscuro */ --color-borde: rgba(255, 255, 255, 0.07); /* Acento claro en oscuro: más oscuro para no deslumbrar */ --color-acento-claro: rgba(91, 80, 240, 0.15); /* Sombras en oscuro: más sutiles */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.3); --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); } /* ---- Ajustes específicos de componentes en modo oscuro ---- */ body.dark .header { background: rgba(26, 26, 46, 0.95); border-bottom-color: rgba(255,255,255,0.06); } body.dark .navbar { background: rgba(26, 26, 46, 0.98); border-top-color: rgba(255,255,255,0.06); } body.dark .buscador { background: var(--color-superficie); box-shadow: none; } body.dark .card { background: var(--color-superficie); border-color: rgba(255,255,255,0.06); } body.dark .fila-ranking { background: var(--color-superficie); border-color: rgba(255,255,255,0.06); } body.dark .card-categoria { background: var(--color-superficie); border-color: rgba(255,255,255,0.06); } body.dark .form-input, body.dark .form-select, body.dark .form-textarea { background: var(--color-superficie-2); border-color: rgba(255,255,255,0.08); color: var(--color-texto); } body.dark .btn-secundario { border-color: rgba(255,255,255,0.12); color: var(--color-texto-2); } body.dark .btn-secundario:hover { border-color: var(--color-acento); color: var(--color-acento); } body.dark .filtro-btn { background: var(--color-superficie); border-color: rgba(255,255,255,0.08); color: var(--color-texto-2); } body.dark .portada { background: var(--color-fondo); } body.dark .portada-trofeo { background: rgba(91, 80, 240, 0.15); } body.dark .perfil-card { background: var(--color-superficie); } /* Skeleton en modo oscuro */ body.dark .skeleton { background: linear-gradient(90deg, #252540 25%, #2a2a50 50%, #252540 75% ); background-size: 200% 100%; } /* Toast en modo oscuro */ body.dark .toast { background: #F0F0F8; color: #0F0F1A; } body.dark .toast.exito { background: var(--color-exito); color: white; } body.dark .toast.error { background: var(--color-error); color: white; } /* Posiciones del ranking en modo oscuro */ body.dark .fila-ranking-pos.pos-2 { background: #374151; color: var(--color-texto-2); } body.dark .fila-ranking-pos.pos-n { background: var(--color-superficie-2); color: var(--color-texto-3); } /* Transición suave al activar/desactivar modo oscuro */ body.dark, body.dark *:not(.banner-campania):not(.portada):not(.btn-primario):not(.btn-votar) { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }