/* Modo oscuro del sistema tradicional. Se activa con [data-theme="dark"] en (ver el script anti-parpadeo en template.tpl justo después de , y dark-mode.js para el interruptor). Mismo enfoque que v3 (v3/public/assets/dark-mode.css): no se reescribe global.css, se añaden overrides puntuales por encima usando los nombres de clase reales de este sistema. Regla sobre el azul oscuro de marca de Colpay (#21214F / .bg-primary / .border-primary): se conserva en botones, badges y acentos pequeños (.btn-primary, el badge "Perfil: ..." de la tarjeta de Balance, el borde de "Registrarse", etc.) porque ahí SÍ lee como una elección de marca. En bloques grandes de fondo (el hero de home, la tarjeta de Balance, la barra de navegación) se oscurece igual que el resto de la página, tal como muestran los mockups de modo oscuro - ver los selectores `.home-hero.bg-primary` y `.account-balance-card .bg-primary` más abajo, que son las excepciones explícitas. `.text-primary` es solo texto (nunca fondo), así que se aclara siempre para mantener contraste. */ /* Valores por defecto (modo claro) de un par de grises que el propio HTML fija inline con !important en la topbar de cuenta (ID/ubicación/último inicio de sesión) - un CSS externo nunca puede pisar un color inline !important, así que esos dos atributos style="" ahora usan var(--cp-topbar-muted)/var(--cp-session-meta) en vez del hex fijo, y es ESTA variable la que cambia según el tema. */ :root { --cp-topbar-muted: #777b8d; --cp-session-meta: #555b6e; } :root[data-theme="dark"] { --cp-bg: #0a0a12; --cp-surface: #12121c; --cp-surface-alt: #20202e; --cp-border: #34344a; --cp-text: #f2f3f8; --cp-text-muted: #9a9ab2; --cp-link: #2ec4f1; --cp-success: #00f5a6; --cp-topbar-muted: #9a9ab2; --cp-session-meta: #9a9ab2; color-scheme: dark; } :root[data-theme="dark"] body { background: var(--cp-bg) !important; color: var(--cp-text); } :root[data-theme="dark"] a { color: var(--cp-link); } :root[data-theme="dark"] .text-muted { color: var(--cp-text-muted) !important; } :root[data-theme="dark"] .text-muted-light { color: var(--cp-text-muted) !important; } :root[data-theme="dark"] .text-secondary { color: var(--cp-text-muted) !important; } :root[data-theme="dark"] hr { border-color: var(--cp-border); } /* Utilidad .border (border-color:#dee2e6 !important en el CSS base): nunca se había cubierto de forma genérica, solo en casos puntuales ya más específicos (ej. #myTab .nav-btn). Es el borde gris claro que rodea tarjetas como .card.shadow.border.border-2 (el wrapper de "Mi Cuenta" en el dashboard) - se ve como un borde blanco/desteñido sobre fondo oscuro. .border solo define color de borde, nunca fondo/texto, así que oscurecerlo en todo el sitio es seguro. */ :root[data-theme="dark"] .border { border-color: var(--cp-border) !important; } /* Texto que usa el azul de marca (enlaces, títulos de sección como "Nuestros servicios"/"Publicidad en Colpay", el nombre del usuario en la topbar) se aclara para que se lea bien sobre fondo oscuro. Los FONDOS de marca (.bg-primary, botones, badges) no se tocan - ver más abajo. .text-primary solo se usa para texto, nunca para fondo, así que ampliar esto a toda la clase (no solo ) es seguro. */ :root[data-theme="dark"] .text-primary { color: var(--cp-link) !important; } /* Texto casi negro pensado para fondo claro (ej. checkboxes de registro sobre un panel bg-light ya oscurecido, badge "Perfil: Comercios" de Configuración) - queda ilegible si no se aclara. */ :root[data-theme="dark"] .text-dark { color: var(--cp-text) !important; } :root[data-theme="dark"] .text-success { color: var(--cp-success) !important; } /* Hero de home: aunque usa .bg-primary (azul de marca), en el mockup de modo oscuro pasa a ser tan oscuro como el resto de la página (igual que la barra de navegación y la tarjeta de Balance) - la regla de "conservar el azul de marca" es para botones/badges pequeños, no para bloques grandes de fondo. */ :root[data-theme="dark"] .home-hero.bg-primary { background-color: var(--cp-surface) !important; } /* Enlaces del menú superior (Anunciar, Noticias, Juegos, Ayuda, Foro, etc): el color base (#848484, un gris pensado para navbar blanco) nunca se tocaba, quedando casi invisible sobre el navbar ya oscurecido - esta es la causa de que "no se vean" los botones del menú. */ :root[data-theme="dark"] .nav-link { color: var(--cp-text) !important; } :root[data-theme="dark"] .nav-link:hover, :root[data-theme="dark"] .nav-link:focus { color: var(--cp-link) !important; } :root[data-theme="dark"] #navbarSupportedContent ul li:hover { background: var(--cp-surface-alt) !important; } /* Barra de navegación principal (sitewide) y secciones claras genéricas de contenido (home, login, etc). Solo contenedores de bloque, nunca - varios íconos usan bg-white/bg-light como fondo de recorte y perderían su ícono si el fondo se oscurece. */ :root[data-theme="dark"] nav.navbar-default { background-color: var(--cp-surface) !important; } /* Logo del topbar: en modo oscuro se usa el mismo logo de letras blancas del footer (colpay_white.webp). Las dos están en template.tpl y aquí se alterna cuál se ve. El blanco está recortado al ras (226x76) y el de color trae margen (300x117), así que se muestra a 132px de ancho (~44px de alto) para que el ícono quede del mismo tamaño que en modo claro. */ /* Íconos de menú en modo oscuro -> blanco. La hamburguesa de la barra superior es una imagen SVG de Bootstrap con trazo negro (.navbar-light .navbar-toggler-icon, rgba(0,0,0,.55)) y el "×" que la reemplaza al abrirse (.close-menu) es azul marino fijo: ambos desaparecían sobre la barra oscura. Se reemplaza el SVG por el mismo dibujo con trazo blanco. El botón lateral del dashboard (.bg-primary con ícono feather) también se fuerza a blanco por si el color heredado no llegara. */ :root[data-theme="dark"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } :root[data-theme="dark"] .close-menu { color: #fff !important; } :root[data-theme="dark"] .navbar-toggler { border-color: var(--cp-border); } :root[data-theme="dark"] .navbar-toggler [data-feather], :root[data-theme="dark"] .navbar-toggler svg { color: #fff !important; stroke: #fff !important; } /* "X" de cierre del sidebar: no es el ícono