/** * Módulo: Videos de Noticias — Override Visual Template Radiocanal * * Override del estilo base del módulo para el template Radiocanal. * Diseño: fondo rojo oscuro con gradiente radial (luz en el centro), * texto blanco, imágenes sin tinte de color. * * TÉCNICA: Todos los selectores usan el prefijo `body` para obtener * especificidad (0,1,1,1) > base del módulo (0,1,1,0), permitiendo * que este archivo cargue en y gane a los estilos del módulo * inyectados en el body. NO requiere modificar el módulo PHP. * * PATRÓN ESCALABLE: Para aplicar a otro módulo, crear: * /templates/radiocanal/assets/css/modulo-{nombre}.css * Usar `body #modulo-{nombre}` como contexto en todos los selectores. * Registrar el archivo en template.php → assets.css. * * Carga vía: template.php → assets.css[] → TemplateManager → * Depende de variables en: template.css (:root) * * @version 2.0.0 * @date 2026-05-06 */ /* ============================================ MÓDULO — Fondo rojo oscuro con gradiente radial circular, tono más claro en el centro como fuente de luz. ============================================ */ body #modulo-videos-noticias { background: radial-gradient( ellipse at 50% 35%, #b52a2a 0%, #7a0a0a 52%, #3e0505 100% ); border-bottom: none; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35); } /* ============================================ CABECERA — Transparente sobre el gradiente, separador blanco sutil ============================================ */ body #modulo-videos-noticias .vn-cabecera { background: transparent; border-bottom-color: rgba(255, 255, 255, 0.12); padding: 0.8rem 0.4rem; margin-bottom: 1.4rem; } body #modulo-videos-noticias .vn-titulo { color: var(--rc-blanco); border-left-color: rgba(255, 255, 255, 0.4); } body #modulo-videos-noticias .vn-titulo i { background: rgba(255, 255, 255, 0.15); color: var(--rc-blanco); } /* ============================================ PLAYER PRINCIPAL — Título e info en blanco ============================================ */ body #modulo-videos-noticias .vn-principal-info { border-top-color: rgba(255, 255, 255, 0.2); padding-left: 0.7rem; } body #modulo-videos-noticias .vn-principal-titulo:link, body #modulo-videos-noticias .vn-principal-titulo:visited { color: var(--rc-blanco); } body #modulo-videos-noticias .vn-principal-titulo:hover { color: rgba(255, 255, 255, 0.75); } body #modulo-videos-noticias .vn-principal-titulo:focus { outline-color: rgba(255, 255, 255, 0.5); } body #modulo-videos-noticias .vn-principal-titulo:active { color: rgba(255, 255, 255, 0.6); } /* ============================================ LISTA LATERAL — Sin fondo propio (hereda gradiente del módulo), sin tinte en imágenes ============================================ */ body #modulo-videos-noticias .vn-lista { background: rgba(0, 0, 0, 0.30); border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06); scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } body #modulo-videos-noticias .vn-lista::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); } /* ============================================ ÍTEM — Texto blanco, sin color sobre imágenes ============================================ */ body #modulo-videos-noticias .vn-item-titulo { color: rgba(255, 255, 255, 0.88); } body #modulo-videos-noticias .vn-item:hover { background: rgba(255, 255, 255, 0.08); } body #modulo-videos-noticias .vn-item:hover .vn-item-titulo { color: var(--rc-blanco); } /* Activo: borde blanco + transparencia sutil. Sin fondo rojo para no teñir la miniatura. */ body #modulo-videos-noticias .vn-item--activo { background: rgba(255, 255, 255, 0.13); border-left-color: var(--rc-blanco); } body #modulo-videos-noticias .vn-item--activo .vn-item-titulo { color: var(--rc-blanco); font-weight: 600; } body #modulo-videos-noticias .vn-item--activo:hover { background: rgba(255, 255, 255, 0.2); } /* Overlay de miniaturas: oscuro estándar, sin tinte rojo */ body #modulo-videos-noticias .vn-item-overlay, body #modulo-videos-noticias .vn-item--activo .vn-item-overlay { background: rgba(0, 0, 0, 0.30); } /* ============================================ RESPONSIVE — Mobile ============================================ */ @media (max-width: 767px) { body #modulo-videos-noticias .vn-item--activo { border-left-color: transparent; border-bottom-color: var(--rc-blanco); } }