/* * Modo oscuro Quantum — overrides centralizados. * Se activa con la clase .q-dark en (persistida en localStorage 'q-theme'). * Reutiliza la paleta dark del diseño original (App.jsx rama darkMode): * tarjetas #14003F · inputs #0b1552 · bordes #2b1b6e/#31518f · texto claro. * Aprovecha que todas las páginas comparten las mismas clases utilitarias. */ /* --- Superficies (tarjetas, tiles de menú, cabeceras blancas) --- */ /* Se fija también un color de texto claro por defecto: así cualquier texto SIN * clase de color explícita (que heredaría el negro del navegador) se vuelve legible * en modo oscuro. Los elementos con text-[...] propio conservan su color (remapeado). */ html.q-dark .bg-white { background-color: #14003F; color: rgba(255,255,255,0.9); } /* Fondos claros auxiliares */ html.q-dark .bg-\[\#ededed\], html.q-dark .bg-\[\#eef1f6\], html.q-dark .bg-\[\#f8f9fa\], html.q-dark .bg-\[\#f7f9fc\], html.q-dark .bg-\[\#f0f4f8\], html.q-dark .bg-\[\#eef2ff\] { background-color: #0b1552; } html.q-dark .bg-red-50 { background-color: rgba(220,53,69,0.12); } html.q-dark .bg-\[\#eafff1\] { background-color: rgba(32,166,90,0.14); } /* --- Texto principal --- */ html.q-dark .text-\[\#2b3553\], html.q-dark .text-\[\#201757\], html.q-dark .text-\[\#211858\], html.q-dark .text-\[\#252046\], html.q-dark .text-\[\#0c0f5f\], html.q-dark .text-\[\#0b0d55\], html.q-dark .text-\[\#1b1a54\], html.q-dark .text-\[\#21456c\], html.q-dark .text-\[\#171943\] { color: rgba(255,255,255,0.9); } /* --- Texto atenuado --- */ html.q-dark .text-\[\#545073\], html.q-dark .text-\[\#646464\], html.q-dark .text-\[\#888\], html.q-dark .text-\[\#9aa0b8\], html.q-dark .text-\[\#9aa3b5\], html.q-dark .text-\[\#8c98a5\], html.q-dark .text-\[\#515151\], html.q-dark .text-\[\#111827\], html.q-dark .text-slate-400, html.q-dark .text-muted { color: rgba(255,255,255,0.6); } /* --- Bordes --- */ html.q-dark .border-\[\#e5e5ea\], html.q-dark .border-\[\#e2e5ef\], html.q-dark .border-\[\#d6d6d6\], html.q-dark .border-\[\#eee\], html.q-dark .border-\[\#dfdfdf\], html.q-dark .border-\[\#b7d7f5\], html.q-dark .border-\[\#21456c\] { border-color: #2b1b6e; } /* --- Campos de formulario --- */ html.q-dark input, html.q-dark select, html.q-dark textarea { background-color: #0b1552; border-color: #31518f; color: #ffffff; } html.q-dark input::placeholder, html.q-dark textarea::placeholder { color: rgba(255,255,255,0.45); } /* Botones "elección de monedero" (borde grueso) del gold-club */ html.q-dark .border-2.border-\[\#21456c\] { color: rgba(255,255,255,0.9); } /* Filas divisorias de tablas/listas */ html.q-dark .divide-\[\#e5e5ea\] > * { border-color: #2b1b6e; } /* ============================================================ * Ajuste fino de contraste (revisión página por página). * Cubre superficies/textos que quedaban con contraste bajo * sobre las tarjetas oscuras. NO se toca #07164b (va sobre * botones con gradiente cian, que se mantienen claros). * ============================================================ */ /* Fondos claros auxiliares que quedaban como parches blancos */ html.q-dark .bg-\[\#f6f7fb\], html.q-dark .bg-\[\#eefefe\], html.q-dark .bg-\[\#e9e9e9\], html.q-dark .bg-\[\#ebecef\], html.q-dark .bg-\[\#fafafa\], html.q-dark .bg-\[\#eeeeee\]\/95 { background-color: #0b1552; color: rgba(255,255,255,0.9); } /* Hover claro de los items del dropdown de perfil */ html.q-dark .hover\:bg-\[\#fafafa\]:hover { background-color: #1e0a52; } /* Líneas divisorias/tracks grises claros */ html.q-dark .bg-\[\#dbdbdb\] { border-color: #2b1b6e; background-color: #2b1b6e; } /* Texto oscuro extra sobre tarjetas -> claro */ html.q-dark .text-\[\#0c094f\], html.q-dark .text-\[\#11184e\], html.q-dark .text-\[\#42424d\] { color: rgba(255,255,255,0.9); } /* Texto atenuado extra -> claro suave */ html.q-dark .text-\[\#8a8fa8\], html.q-dark .text-\[\#7e879b\], html.q-dark .text-\[\#707a90\], html.q-dark .text-\[\#8b8b8b\], html.q-dark .text-\[\#898694\], html.q-dark .text-\[\#8794a3\], html.q-dark .text-\[\#555\], html.q-dark .text-\[\#57506f\], html.q-dark .text-\[\#b6bacb\] { color: rgba(255,255,255,0.6); } /* Verde medio de acento sobre tarjetas -> verde legible en oscuro */ html.q-dark .text-\[\#20a65a\] { color: #34d977; } /* Rojo 500 (alertas) -> rojo claro */ html.q-dark .text-red-500 { color: #f87171; } /* --- Cajas de alerta: oscurecer fondo + aclarar el texto de acento --- */ /* Éxito (verde) */ html.q-dark .bg-\[\#e6f7ee\] { background-color: rgba(32,166,90,0.14); } html.q-dark .text-\[\#0b7a3e\], html.q-dark .text-\[\#1e8449\] { color: #4ade80; } /* Error (rojo) */ html.q-dark .bg-\[\#fde8e8\] { background-color: rgba(220,53,69,0.14); } html.q-dark .text-\[\#c0392b\], html.q-dark .text-red-600 { color: #f87171; } /* Aviso (ámbar) */ html.q-dark .bg-\[\#fff8e8\] { background-color: rgba(240,169,20,0.14); } html.q-dark .text-\[\#8a6a00\] { color: #f5c451; } /* --- Banda inferior de la página (.tech-grid:after) --- */ /* En claro es un degradado casi blanco (23% inferior); en oscuro debe ser oscura * o el copyright (remapeado a blanco) desaparece sobre ella. */ html.q-dark .tech-grid:after { background: linear-gradient(0deg, rgba(10,5,46,0.97), rgba(10,5,46,0.97)), linear-gradient(100deg, rgba(29,247,247,0.25), transparent 26%), linear-gradient(82deg, transparent 28%, rgba(233,29,255,0.25), transparent 68%); } /* --- Dropdowns del header (perfil y campana) --- */ /* Tiles del modal de perfil: como el JSX original dark (#22106b + borde), * y círculos de icono oscuros con icono cian (antes quedaban blancos: bg-slate-100 * no estaba remapeado y el conjunto era ilegible). */ html.q-dark #q-profile-menu .bg-white { background-color: #22106b; border: 1px solid #2b1b6e; } html.q-dark #q-profile-menu .bg-slate-100 { background-color: #14003F; color: #67e8f9; } /* Campana: fila no leída resaltada, hover oscuro (la clase hover:bg-white * volvía la fila blanca en dark) y círculo del icono oscuro. */ html.q-dark #q-notif-menu .bg-white { background-color: #22106b; } html.q-dark #q-notif-menu .hover\:bg-white:hover { background-color: #2e198a; } html.q-dark #q-notif-menu .bg-slate-100 { background-color: #14003F; color: #67e8f9; }