/* ========================================================================= ValueStats · Dark Mode (infra GLOBAL, activación LOCAL) ------------------------------------------------------------------------- Este archivo se carga en TODA la web, pero CADA regla está scopeada bajo [data-theme="dark"]. Si ningún elemento tiene ese atributo, no hace nada. De momento el atributo SOLO se pone en el wrapper de la sección LIVE (templates/v2/live/show.html.twig), así que solo afecta a /directo. Estrategia: sobreescribir las utilidades Tailwind que ya usa el HTML ([data-theme="dark"] .bg-white, etc.) -> con specificidad (0,2,0) ganan a las utilidades de un solo nivel sin necesidad de !important. Para ampliar a otra sección en el futuro: basta con poner data-theme="dark" en el wrapper de esa sección y, si usa clases nuevas, añadirlas aquí. ========================================================================= */ /* Paleta dark (slate). Centralizada por si queremos afinar. No las usamos como var en las reglas de abajo para mantenerlas explícitas y fáciles de leer/editar, pero quedan documentadas aquí: */ /* --d-app #0f172a fondo de página (el más oscuro) --d-surface #1e293b tarjetas / superficies --d-raised #334155 chips, barras, recesos --d-border #334155 / #475569 --d-text-hi #f1f5f9 texto principal --d-text-mid #cbd5e1 --d-text-low #94a3b8 */ /* Hint al navegador: scrollbars, inputs, etc. en modo oscuro */ [data-theme="dark"] { color-scheme: dark; } /* ------------------------------------------------------------------------- Fondo de página (canvas). El tema es GLOBAL (data-theme en ): oscurecemos el body en toda la web y apagamos el resplandor radial claro. Las secciones con fondo propio opaco (bg-gray-100/50) se igualan al canvas con la clase marcadora .theme-canvas (ver "HOSTS DE SECCIÓN" más abajo). ------------------------------------------------------------------------- */ html[data-theme="dark"] body { background: #0f172a; } html[data-theme="dark"] body::before { opacity: 0; } /* ------------------------------------------------------------------------- Superficies (backgrounds) ------------------------------------------------------------------------- */ [data-theme="dark"] .bg-white { background-color: #1e293b; } [data-theme="dark"] .bg-gray-50 { background-color: #15202e; } /* hundido: algo más oscuro que la card para que filas/paneles internos se distingan */ [data-theme="dark"] .bg-gray-100 { background-color: #243044; } [data-theme="dark"] .bg-gray-200 { background-color: #334155; } /* Overlays translúcidos: en dark un velo blanco (p.ej. el de carga al cambiar de día) da un fogonazo claro -> lo cambiamos por un velo oscuro. */ [data-theme="dark"] .bg-white\/50 { background-color: rgba(15, 23, 42, 0.6); } /* Tintes/acentos suaves -> versiones translúcidas para que respiren */ [data-theme="dark"] .bg-green-100 { background-color: rgba(16, 185, 129, 0.16); } [data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12); } [data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.18); } [data-theme="dark"] .bg-red-50 { background-color: rgba(248, 113, 113, 0.14); } [data-theme="dark"] .bg-red-100 { background-color: rgba(248, 113, 113, 0.18); } [data-theme="dark"] .bg-amber-50 { background-color: rgba(251, 191, 36, 0.12); } /* Sólidos de acento (badges, puntos, avatares de indicadores) se dejan tal cual: bg-green-500/600/700, bg-emerald-400/500, bg-red-400/500, bg-yellow-400, bg-gray-400/500 leen bien sobre fondo oscuro. */ /* ------------------------------------------------------------------------- Texto (grises). Los acentos de color (green/emerald/red/yellow) se ajustan solo donde hace falta legibilidad. ------------------------------------------------------------------------- */ [data-theme="dark"] .text-gray-900 { color: #f1f5f9; } [data-theme="dark"] .text-gray-800 { color: #e2e8f0; } [data-theme="dark"] .text-gray-700 { color: #cbd5e1; } [data-theme="dark"] .text-gray-600 { color: #9aa7ba; } [data-theme="dark"] .text-gray-500 { color: #94a3b8; } [data-theme="dark"] .text-gray-400 { color: #7c8aa0; } [data-theme="dark"] .text-gray-300 { color: #64748b; } /* Verdes oscuros (headings/acentos) -> aclarar para que destaquen en dark */ [data-theme="dark"] .text-emerald-800 { color: #6ee7b7; } [data-theme="dark"] .text-emerald-600 { color: #34d399; } [data-theme="dark"] .text-green-800 { color: #6ee7b7; } [data-theme="dark"] .text-green-700 { color: #4ade80; } [data-theme="dark"] .text-green-600 { color: #4ade80; } /* ------------------------------------------------------------------------- Bordes y divisores ------------------------------------------------------------------------- */ [data-theme="dark"] .border-gray-100 { border-color: #334155; } [data-theme="dark"] .border-gray-200 { border-color: #334155; } [data-theme="dark"] .border-gray-300 { border-color: #475569; } [data-theme="dark"] .border-gray-400 { border-color: #475569; } [data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #334155; } /* ------------------------------------------------------------------------- Sombras y tarjetas: en dark las sombras claras desaparecen -> reforzamos con sombra negra suave + un borde sutil en las cards. ------------------------------------------------------------------------- */ [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-md, [data-theme="dark"] .shadow-lg, [data-theme="dark"] .shadow-soft { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .card-match { border: 1px solid #243044; } /* LIVE · cabecera de la tarjeta de partido. El HTML base usa una cabecera clara; aquí la llevamos al tono oscuro de la vista live sin afectar light. */ [data-theme="dark"] .live-match-header { background: #0b1220; border-color: rgba(16, 185, 129, 0.35); color: #f8fafc; } [data-theme="dark"] .live-match-league-name, [data-theme="dark"] .live-match-team-name, [data-theme="dark"] .live-match-score { color: #f8fafc; } [data-theme="dark"] .live-match-score-separator, [data-theme="dark"] .live-match-action { color: #94a3b8; } [data-theme="dark"] .live-match-action:hover { background-color: rgba(255, 255, 255, 0.08); color: #6ee7b7; } [data-theme="dark"] .live-match-crest { background-color: #f8fafc; } /* ------------------------------------------------------------------------- Estados :hover -> hay que re-declararlos porque comparten especificidad con las utilidades hover de Tailwind y, al cargar después, las pisarían dejando el hover "muerto". Aquí ganamos por specificidad ([data-theme]). ------------------------------------------------------------------------- */ [data-theme="dark"] .hover\:bg-emerald-50:hover { background-color: #1e3a32; } [data-theme="dark"] .hover\:bg-emerald-50\/50:hover { background-color: #1e3a32; } /* Hover de fila en tablas con 1ª columna FIJA (sticky): esa celda usa group-hover:bg-emerald-50 y debe quedar OPACA y del mismo tono que el resto de la fila (si no, se veía verde claro mientras la fila iba en verde oscuro). */ [data-theme="dark"] .group:hover .group-hover\:bg-emerald-50 { background-color: #1e3a32; } [data-theme="dark"] .hover\:bg-green-100:hover { background-color: rgba(16, 185, 129, 0.22); } [data-theme="dark"] .hover\:bg-gray-50:hover { background-color: #273349; } [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #2f3d52; } [data-theme="dark"] .hover\:bg-gray-200:hover { background-color: #3a4a63; } [data-theme="dark"] .hover\:text-gray-700:hover { color: #e2e8f0; } [data-theme="dark"] .hover\:text-emerald-600:hover { color: #34d399; } [data-theme="dark"] .hover\:text-green-600:hover { color: #4ade80; } [data-theme="dark"] .hover\:text-green-700:hover { color: #4ade80; } [data-theme="dark"] .hover\:border-gray-300:hover { border-color: #475569; } [data-theme="dark"] .hover\:border-emerald-200:hover { border-color: rgba(52, 211, 153, 0.42); } /* ------------------------------------------------------------------------- Transición suave al alternar tema (solo superficies/texto/borde clave para no meter jank en todo el árbol). ------------------------------------------------------------------------- */ [data-theme="dark"], [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-100, [data-theme="dark"] .bg-gray-200, [data-theme="dark"] .card-match { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* ========================================================================= HOSTS DE SECCIÓN (canvas) Wrappers de sección con fondo propio opaco en claro (bg-gray-100/50). En dark los igualamos al canvas oscuro. Va DESPUÉS de las superficies para ganar por orden de fuente a .bg-gray-50/.bg-gray-100 en el mismo nodo. Añadir la clase .theme-canvas a la raíz de cada sección con fondo propio. ------------------------------------------------------------------------- */ [data-theme="dark"] .theme-canvas { background-color: #0f172a; } /* ========================================================================= UTILIDADES ADICIONALES (introducidas por TENDENCIAS, pero comunes/reusables) ========================================================================= */ /* Superficies extra */ [data-theme="dark"] .bg-gray-300 { background-color: #475569; } [data-theme="dark"] .bg-emerald-200 { background-color: rgba(16, 185, 129, 0.22); } [data-theme="dark"] .bg-green-50 { background-color: rgba(16, 185, 129, 0.10); } [data-theme="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.16); } [data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18); } [data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12); } [data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.18); } /* Texto de acento oscuro -> aclarar para contraste sobre fondo dark */ [data-theme="dark"] .text-emerald-700 { color: #34d399; } [data-theme="dark"] .text-green-700 { color: #4ade80; } [data-theme="dark"] .text-yellow-700 { color: #facc15; } [data-theme="dark"] .text-red-700 { color: #f87171; } [data-theme="dark"] .text-blue-900 { color: #dbeafe; } [data-theme="dark"] .text-blue-800 { color: #93c5fd; } [data-theme="dark"] .text-blue-700 { color: #60a5fa; } [data-theme="dark"] .text-blue-600 { color: #60a5fa; } [data-theme="dark"] .text-purple-700 { color: #c084fc; } /* Bordes de acento suave */ [data-theme="dark"] .border-blue-100 { border-color: rgba(59, 130, 246, 0.35); } [data-theme="dark"] .border-blue-200 { border-color: rgba(96, 165, 250, 0.45); } [data-theme="dark"] .border-green-200 { border-color: rgba(16, 185, 129, 0.30); } [data-theme="dark"] .border-emerald-200 { border-color: rgba(52, 211, 153, 0.32); } [data-theme="dark"] .border-emerald-300 { border-color: rgba(52, 211, 153, 0.48); } [data-theme="dark"] .border-emerald-400 { border-color: rgba(52, 211, 153, 0.68); } /* Extras del listado de ligas */ [data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155; } [data-theme="dark"] .hover\:bg-green-50:hover { background-color: rgba(16, 185, 129, 0.12); } /* Hover extra */ [data-theme="dark"] .hover\:bg-gray-300:hover { background-color: #475569; } /* Gradientes claros (p.ej. banners from-gray-50 to-emerald-50) -> oscurecer sobreescribiendo las custom properties que genera Tailwind. */ [data-theme="dark"] .from-gray-50 { --tw-gradient-from: #1e293b var(--tw-gradient-from-position); --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .to-emerald-50 { --tw-gradient-to: rgba(16, 185, 129, 0.12) var(--tw-gradient-to-position); } /* ========================================================================= FORMULARIOS · inputs/selects/textarea legibles en dark (común a todo) Solo campos de texto: no tocamos checkbox/radio/range. ========================================================================= */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input:not([type]), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: #1e293b; color: #e2e8f0; border-color: #334155; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #64748b; } /* ========================================================================= HOME / portada (y utilidades comunes que introduce) ========================================================================= */ /* Superficies/elementos medios */ [data-theme="dark"] .bg-gray-400 { background-color: #475569; } [data-theme="dark"] .bg-gray-500 { background-color: #64748b; } /* Texto de acento adicional */ [data-theme="dark"] .text-red-600 { color: #f87171; } [data-theme="dark"] .text-purple-600 { color: #c084fc; } [data-theme="dark"] .text-amber-700 { color: #fbbf24; } /* Bordes / anillos (focus rings) */ [data-theme="dark"] .border-emerald-100 { border-color: rgba(16, 185, 129, 0.25); } [data-theme="dark"] .ring-gray-200 { --tw-ring-color: #334155; } [data-theme="dark"] .ring-gray-300 { --tw-ring-color: #475569; } /* Hover extra */ [data-theme="dark"] .hover\:bg-red-100:hover { background-color: rgba(248, 113, 113, 0.18); } [data-theme="dark"] .hover\:bg-white:hover { background-color: #243044; } [data-theme="dark"] .hover\:bg-emerald-200:hover { background-color: rgba(16, 185, 129, 0.25); } [data-theme="dark"] .hover\:text-gray-600:hover { color: #cbd5e1; } [data-theme="dark"] .hover\:text-gray-500:hover { color: #cbd5e1; } /* Hover unificado de fila de partido (lo pone JS por grupo de partido; el