/* --- VARIABLES Y CONFIGURACIÓN --- */
:root {
  --amoled: #000000;
  --text: #ffffff;
  --muted: #9a9a9a;
  --accent: #00fbff; 
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    background-color: var(--amoled) !important; 
    color: var(--text); 
    font-family: system-ui, -apple-system, sans-serif; 
    overflow-x: hidden;

    /* ESTO ES LO ÚNICO QUE NECESITAS PARA EL ALTO RESPONSIVE */
    min-height: 100vh; 
    display: block; 
}

body { 
    background-color: var(--amoled) !important; 
    color: var(--text); 
    font-family: system-ui, -apple-system, sans-serif; 
    overflow-x: hidden;
    
    /* Configuración para anclar el footer */
    min-height: 100%;
    position: relative;
    padding-bottom: 150px; /* Ajusta este valor según el alto de tu footer + reproductor */
}


/* --- HEADER Y LOGO --- */
.header { 
    padding: 7px 15px; 
    border-bottom: 1px solid #111; 
    background: var(--amoled); 
    position: sticky; 
    top: 0; 
    z-index: 100; 
}

.header-inner { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    max-width: 600px; 
    margin: 0 auto; 
}

.header-left { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.contenedor-logo {
    position: relative;
    /* El contenedor ahora es el que mide 38px */
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

.contenedor-logo::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    /* Efecto cometa degradado */
    background: conic-gradient(
        #ffd700 0%, 
        rgba(255, 215, 0, 0.4) 30%, 
        transparent 70%
    );
    animation: rotarLogo 5s linear infinite reverse;
}

.logo-fino {
    position: relative;
    /* El logo ocupa casi todo el espacio para que el anillo sea fino */
    width: 36px !important; 
    height: 36px !important;
    border-radius: 50%;
    object-fit: cover;
    z-index: 2;
    /* Esto asegura que el fondo negro del contenedor no se coma al logo */
    background: #000;
}

@keyframes rotarLogo {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- MENÚ BURGER --- */
.menu-burger { 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    padding: 5px; 
}

.menu-burger span { 
    display: block; 
    width: 22px; 
    height: 2px; 
    background: var(--accent) !important; 
    transition: 0.3s; 
    box-shadow: 0 0 8px var(--accent); 
}

/* --- MENÚ LATERAL --- */
.side-menu { 
    position: fixed; 
    top: 0; 
    right: -100%; 
    width: 260px; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.98); 
    backdrop-filter: blur(10px); 
    z-index: 2000; 
    transition: 0.4s; 
    border-left: 1px solid var(--accent); 
    padding-top: 60px; 
}

.side-menu.active { right: 0; }

.close-menu { 
    position: absolute; 
    top: 15px; 
    right: 20px; 
    font-size: 30px; 
    color: var(--muted); 
    cursor: pointer; 
}

.menu-links { display: flex; flex-direction: column; padding: 20px; }
.menu-links a { 
    color: #fff; 
    text-decoration: none; 
    padding: 15px 0; 
    border-bottom: 1px solid #111; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}

.menu-links a i { color: var(--accent); width: 20px; }

/* ===================================================
   SECCIÓN REPRODUCTOR Y PROYECCIÓN 3D (EDITADO)
   =================================================== */

.player { 
    width: 100%;
    max-width: 100%;
    padding: 20px 14px; 
    background: var(--amoled); 
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.05);
    transition: border-color 0.5s ease;
    box-sizing: border-box;
}

/* 1. ENTORNO DE PROYECCIÓN 3D (CENTRADOR) */
.cover-wrap { 
    display: flex; 
    justify-content: center; 
    align-items: center;
    width: 100%;
    perspective: 1200px; /* Aumentado para mejor efecto 3D */
    margin: 0 auto;
    overflow: visible !important; /* IMPORTANTE: Para que el 3D "salga" de la pantalla */
}

/* 2. EL OBJETO COVER 3D */
.cover { 
    position: relative;
    border-radius: 14px; 
    /* overflow: hidden; */ <-- SE COMENTA: Si está 'hidden', el brillo 3D se corta en los bordes
    border: 1px solid #222;
    background: #000;
    
    /* Mantenemos tu tamaño para Celular */
    width: 240px; 
    height: 240px;
    margin: 0 auto;
    
    /* Preparamos para el JS */
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
    /* Quitamos la animación 'float' de aquí porque el JS ahora controla el movimiento */
}

/* 3. TAMAÑO PARA COMPUTADORA */
@media (min-width: 1024px) {
    .cover {
        width: 450px;
        height: 450px;
    }
}

/* 4. LA IMAGEN INTERNA */
#coverImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px; /* Para que la imagen siga la forma del cover */
    transition: opacity 0.8s ease-in-out; 
    opacity: 1;
    backface-visibility: hidden;
}

.fade-out {
    opacity: 0 !important;
}

/* --- ELEMENTOS SOBRE EL COVER (REGALO) --- */

.reaction-btn {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    z-index: 999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid var(--accent) !important;
    box-shadow: 0 0 20px var(--accent) !important;
    cursor: pointer !important;
    animation: moverRegalo 2s infinite ease-in-out !important;
    /* Este botón ahora también se moverá en 3D porque está dentro del cover */
}

@keyframes moverRegalo {
    0%, 100% { transform: scale(1) rotate(0deg); }
    15% { transform: scale(1.2) rotate(-15deg); }
    30% { transform: scale(1.2) rotate(15deg); }
    45% { transform: scale(1.2) rotate(-15deg); }
    60% { transform: scale(1.2) rotate(15deg); }
    80% { transform: scale(1) rotate(0deg); }
}

/* Resto de tus animaciones originales se mantienen igual */
@keyframes latidoBrillo {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.5); opacity: 0.6; }
}

.regalo-pista {
    position: absolute;
    bottom: 75px;
    right: 10px;
    font-size: 10px;
    background: var(--accent);
    color: #000;
    padding: 3px 10px;
    border-radius: 8px;
    font-weight: bold;
    text-transform: uppercase;
    animation: flotarPista 3s infinite ease-in-out;
}

@keyframes flotarPista {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(-5px); opacity: 1; }
}

/* --- PARTÍCULAS SUPERNOVA --- */
.particle {
    position: fixed;
    pointer-events: none;
    font-size: 28px;
    z-index: 9999;
    animation: flyOut 1.2s forwards ease-out;
}

/* ===================================================
   MODAL DE MENSAJES MOTIVACIONALES (ESTILO 3D)
   =================================================== */

.modal-futurista {
    display: none; /* Se activa con JS */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Fondo oscuro transparente */
    backdrop-filter: blur(10px); /* Efecto cristal empañado */
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-content-3d {
    background: linear-gradient(135deg, rgba(20,20,20,0.95), rgba(40,40,40,0.95));
    border: 2px solid var(--accent);
    padding: 35px 25px;
    border-radius: 20px;
    width: 100%;
    max-width: 380px;
    text-align: center;
    position: relative;
    /* Efecto Proyección 3D */
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(10deg);
    box-shadow: 0 0 40px var(--accent), 
                inset 0 0 20px rgba(255, 255, 255, 0.05);
    animation: aparecer3D 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.modal-header h3 {
    color: var(--accent);
    font-size: 0.8rem;
    letter-spacing: 4px;
    margin-bottom: 20px;
    text-shadow: 0 0 10px var(--accent);
}

#frase-texto {
    color: #ffffff;
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 30px;
    font-weight: 500;
    text-shadow: 0 0 5px rgba(255,255,255,0.3);
}

.btn-cerrar-cyber {
    background: var(--amoled);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 12px 40px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.btn-cerrar-cyber:hover {
    background: var(--accent);
    color: #000;
    transform: scale(1.05);
    box-shadow: 0 0 25px var(--accent);
}

/* Animación de entrada */
@keyframes aparecer3D {
    from { 
        opacity: 0; 
        transform: perspective(1000px) rotateX(40deg) translateY(100px) scale(0.8); 
    }
    to { 
        opacity: 1; 
        transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1); 
    }
}


@keyframes flyOut {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--x), var(--y)) scale(0) rotate(360deg); opacity: 0; }
}

/* --- META DATOS Y CONTROLES --- */
.meta { text-align: center; margin-top: 15px; }
.meta strong { font-size: 1.1rem; display: block; margin-bottom: 4px; }
.meta span { font-size: 0.9rem; color: var(--muted); }

/* REEMPLAZADO: Ahora es una ventana para el ticker */
.now-playing-box { 
    background: rgba(255,255,255,0.02); 
    border-radius: 10px; 
    /* Quitamos el padding para que el ticker ajuste perfecto */
    padding: 0; 
    margin: 15px auto; 
    max-width: 280px; 
    border: 1px solid #222; 
    text-align: center;
    /* NUEVO: Altura fija y esconder lo que sobra */
    height: 50px;
    overflow: hidden;
    position: relative;
}

/* NUEVO: El contenedor que se mueve */
.ticker-wrapper {
    display: flex;
    flex-direction: column;
    animation: deslizarProg 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

/* NUEVO: Cada item del mensaje */
.ticker-item {
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.now-title { font-size: 0.65rem; color: var(--accent) !important; letter-spacing: 1px; text-transform: uppercase; }
.now-program { font-size: 0.95rem; margin-top: 3px; color: var(--accent) !important; font-weight: bold; }

/* NUEVA ANIMACIÓN: El elevador */
@keyframes deslizarProg {
    0%, 25% { transform: translateY(0); }             /* Para en AHORA */
    33%, 58% { transform: translateY(-50px); }        /* Para en DESPUÉS */
    66%, 91% { transform: translateY(-100px); }       /* Para en LUEGO */
    100% { transform: translateY(0); }                /* Regresa al inicio */
}

#playBtn { 
    width: 65px; 
    height: 65px; 
    border-radius: 50%; 
    border: 2px solid var(--accent) !important; 
    font-size: 24px; 
    color: var(--accent) !important; 
    background: var(--amoled); 
    cursor: pointer; 
    display: block; 
    margin: 10px auto; 
    transition: 0.3s; 
    box-shadow: 0 0 15px var(--accent);
}
/* El resto de tu código (Visualizador, live-bar, etc.) se queda igual abajo */

/* --- VISUALIZADOR --- */
#visualizer { 
    width: 100%; 
    height: 40px; 
    display: block; 
    background: transparent;
}

/* BARRA DELGADA TIPO PANEL CON NEÓN */
.live-bar { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 15px; 
    padding: 0 15px; 
    height: 28px; 
    max-width: 520px; 
    margin: 10px auto;
    background: rgba(0, 0, 0, 0.85); 
    /* Corregido el blur a 10px */
    backdrop-filter: blur(10px); 
    border-radius: 50px; 

    /* ESTO CREA EL NEÓN: Se integra dentro de la misma clase */
    border: 1px solid var(--accent) !important; 
    box-shadow: 0 0 10px var(--accent), 
                inset 0 0 5px var(--accent);
}

/* RELOJ */
.time-left { 
    font-size: 0.65rem; 
    color: var(--accent); 
    font-weight: bold;
    min-width: 45px; 
}

/* GRUPO SOCIAL CENTRADO */
.social-mini { 
    display: flex; 
    gap: 6px; 
    align-items: center;
    padding: 0 10px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(255,255,255,0.1);
}

/* 1. ESTILO BASE NEÓN (PERMANENTE) */
.soc-btn { 
    width: 22px; 
    height: 22px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 10px; 
    text-decoration: none; 
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    /* El borde tendrá un toque del color de la red */
}

/* 2. COLORES FIJOS POR RED SOCIAL */

/* Facebook - Azul Neón */
.soc-btn.fb { 
    color: #1877F2 !important; 
    border: 1px solid rgba(24, 119, 242, 0.5) !important;
    box-shadow: 0 0 8px rgba(24, 119, 242, 0.3);
}

/* Instagram - Rosa Neón */
.soc-btn.ig { 
    color: #E4405F !important; 
    border: 1px solid rgba(228, 64, 95, 0.5) !important;
    box-shadow: 0 0 8px rgba(228, 64, 95, 0.3);
}

/* WhatsApp - Verde Neón */
.soc-btn.wa { 
    color: #25D366 !important; 
    border: 1px solid rgba(37, 211, 102, 0.5) !important;
    box-shadow: 0 0 8px rgba(37, 211, 102, 0.3);
}

/* YouTube - Rojo Neón */
.soc-btn.yt { 
    color: #FF0000 !important; 
    border: 1px solid rgba(255, 0, 0, 0.5) !important;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
}

/* TikTok - Cyan Neón */
.soc-btn.tk { 
    color: #00f2ea !important; 
    border: 1px solid rgba(0, 242, 234, 0.5) !important;
    box-shadow: 0 0 8px rgba(0, 242, 234, 0.3);
}

/* 3. EFECTO AL PASAR EL MOUSE (Intensifica el brillo) */
.soc-btn:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 0 15px currentColor; /* El brillo toma el color del icono automáticamente */
    background: rgba(255, 255, 255, 0.1);
}

/* VIVO Y OYENTES */
.listeners.live { 
    font-size: 0.65rem; 
    color: #ff4d4d !important; 
    font-weight: 800;
}
.listeners { 
    font-size: 0.65rem; 
    color: #fff; 
}
#listenersCount {
    color: var(--accent);
    font-weight: bold;
}

/* VIVO Y OYENTES */
.listeners.live { 
    font-size: 0.65rem; 
    color: #ff4d4d !important; 
    font-weight: 800;
    white-space: nowrap;
}

.listeners { 
    font-size: 0.65rem; 
    color: #fff; 
    white-space: nowrap;
}

#listenersCount {
    color: var(--accent);
    font-weight: bold;
}

/* --- TICKER PROFESIONAL RADIO TOTAL --- */
.ticker {
    background: #000;
    height: 45px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    border-top: 2px solid #222;
    z-index: 10;
}

#typewriter {
    position: absolute;
    white-space: nowrap;
    font-size: 1.1rem;
    font-weight: 700;
    color: #00fbff;
    text-transform: uppercase;
    animation: marquee 20s linear infinite;
    padding-left: 20px;
    left: 100%;              /* 🔑 clave */
    will-change: transform; /* mejora rendimiento */
}

/* Animación de Derecha a Izquierda */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Estilo Urgente (Fondo Rojo) */
.ticker.urgente-bg {
    background: #770000 !important;
}

.ticker.urgente-bg #typewriter {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* --- MODAL (EFECTO CRISTAL NEÓN) --- */
.modal { 
    display: none; 
    position: fixed; 
    z-index: 3000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.6); 
    backdrop-filter: blur(8px); 
    transition: all 0.3s;
}

.modal-content { 
    background: rgba(10, 10, 10, 0.85); 
    margin: 15% auto; 
    padding: 30px; 
    border: 1px solid var(--accent); 
    width: 85%; 
    max-width: 400px; 
    border-radius: 20px; 
    box-shadow: 0 0 30px var(--accent); 
    text-align: center;
    transform: scale(0.8);
    animation: modalPop 0.3s forwards;
}

@keyframes modalPop {
    to { transform: scale(1); }
}

.close-modal { 
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px; 
    cursor: pointer; 
    color: #fff;
    transition: 0.3s;
}
.close-modal:hover { color: var(--accent); text-shadow: 0 0 10px var(--accent); }

/* FLASH DE IMPACTO (REACCIÓN) */
.flash-impact { animation: flashEffect 0.5s ease-out; }
@keyframes flashEffect {
    0% { filter: brightness(1); }
    50% { filter: brightness(2.5) saturate(1.5); transform: scale(1.02); }
    100% { filter: brightness(1); }
}

/* --- LA NUBE DE COLORES FLOTANTE (VERSIÓN CENTRADA TOTAL) --- */
.popup-motivador {
    position: fixed !important; /* FIJO a la pantalla, no al documento */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.5) !important; /* Centrado matemático */
    
    background: rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important; /* Para iPhone */
    
    padding: 30px 20px !important;
    border-radius: 35px !important;
    border: 3px solid var(--accent) !important;
    box-shadow: 0 0 60px rgba(0, 251, 255, 0.5) !important;
    
    z-index: 999999 !important; /* Por encima de todo lo imaginable */
    text-align: center !important;
    width: 85% !important;
    max-width: 320px !important;
    
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Estado Activo */
.popup-motivador.activo {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.popup-content p {
    font-size: 1.2rem !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.emoji-grande {
    font-size: 45px !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* --- COMPONENTE: FICHA TÉCNICA INTELIGENTE --- */
.info-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Fondo oscuro elegante */
    backdrop-filter: blur(12px); /* Efecto de desenfoque premium */
    -webkit-backdrop-filter: blur(12px); /* Soporte para iPhone/Safari */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    color: #ffffff;
    opacity: 0; /* Empieza invisible */
    transition: opacity 0.8s ease-in-out;
    z-index: 500; /* Por encima de la foto, por debajo del regalo */
    pointer-events: none;
    border-radius: 14px;
}

/* Clase que activa el JavaScript */
.info-card.visible {
    opacity: 1;
    pointer-events: auto;
}

.info-card h4 {
    color: var(--accent); /* Usará el color que cambie con la música */
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-transform: uppercase;
    font-weight: 800;
}

.info-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
}

.info-card .dato-extra {
    margin-top: 15px;
    font-size: 0.7rem;
    color: var(--accent);
    font-style: italic;
}

/* ============================================
   CONSOLA HD - VERSIÓN FINAL REPARADA
   ============================================ */
.sound-console {
    position: fixed; 
    bottom: 100px; 
    right: 20px;
    background: rgba(10, 10, 10, 0.98); 
    border: 2px solid var(--accent);
    padding: 20px; 
    border-radius: 15px; 
    z-index: 100000; 
    width: 280px; 
    color: white;
    box-shadow: 0 0 40px rgba(0, 251, 255, 0.2);
    backdrop-filter: blur(15px);
    
    /* Configuración de visibilidad para evitar fallos */
    display: none; 
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
}

/* LA CLAVE: Cuando el JS pone 'active', se activa esto */
.sound-console.active { 
    display: block !important; 
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.preset-group { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 8px; 
    margin: 15px 0; 
}

.preset-group button { 
    background: #1a1a1a; 
    border: 1px solid #333; 
    color: white; 
    font-size: 10px; 
    padding: 10px 5px; 
    cursor: pointer; 
    border-radius: 8px;
    transition: 0.3s;
    font-weight: bold;
    text-transform: uppercase;
}

.preset-group button:hover { 
    border-color: var(--accent); 
    background: #222;
    box-shadow: 0 0 10px var(--accent);
}

.slider-group label { 
    display: block; 
    font-size: 11px; 
    margin-top: 15px; 
    color: var(--accent); 
    font-weight: bold;
    text-transform: uppercase;
}

.slider-group input { 
    width: 100%; 
    accent-color: var(--accent); 
    cursor: pointer; 
    margin-top: 5px;
}

.btn-config { 
    position: fixed;
    bottom: 90px;
    right: 20px;
    background: #000; 
    border: 2px solid var(--accent); 
    color: white; 
    padding: 10px 20px; 
    border-radius: 50px; 
    cursor: pointer;
    z-index: 99999;
    font-weight: bold;
    box-shadow: 0 0 15px var(--accent);
    transition: 0.3s;
}

.btn-config:hover {
    background: var(--accent);
    color: black;
    transform: scale(1.05);
}

.close-console {
    margin-top: 20px;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid #444;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 11px;
    transition: 0.3s;
}

.close-console:hover {
    background: #c0392b; /* Rojo solo al pasar el mouse */
    border-color: #c0392b;
}

/* 1. ESTILOS PARA EL VÚMETRO DE LA CONSOLA (Horizontal) */
.vu-meter-container { margin: 15px 0; }
.vu-label { font-size: 9px; color: #888; margin-bottom: 4px; letter-spacing: 1px; }
.vu-bg { 
    width: 100%; height: 8px; background: #111; 
    border-radius: 4px; overflow: hidden; border: 1px solid #333;
}
.vu-bar { 
    width: 0%; height: 100%; 
    background: linear-gradient(to right, #2ecc71 60%, #f1c40f 80%, #e74c3c 100%);
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
    transition: width 0.1s ease;
}

/* 2. ESTILOS PARA LOS VÚMETROS EXTERNOS (Verticales a los lados) */
.player-container-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 20px auto;
}

.vu-vertical {
    width: 10px;      /* Grosor de la torre */
    height: 250px;    /* Altura que enmarca tu foto */
    background: rgba(0,0,0,0.5);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.vu-bar-vertical {
    width: 100%;
    height: 0%; 
    position: absolute;
    bottom: 0;
    /* Efecto LED: Verde abajo, Amarillo medio, Rojo arriba */
    background: linear-gradient(to top, #00ff88 60%, #ffff00 85%, #ff0000 100%);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    transition: height 0.1s ease;
}
#listenersCount {
    color: var(--accent);
    font-weight: bold;
    text-shadow: 0 0 8px var(--accent); /* Esto le da el aura neón a los números */
}

/* --- ESTILO DEL FOOTER (PIE DE PÁGINA) --- */
.footer-simple {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #000000;
    color: #666;
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #111;
}

.footer-links {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 0.8rem;
}

.footer-links a {
    color: var(--accent);
    text-decoration: none;
}

/* --- BANNER DE COOKIES --- */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: #111;
    border: 1px solid #333;
    padding: 15px;
    display: none; /* Se activa con el JavaScript que te pasé */
    justify-content: space-between;
    align-items: center;
    z-index: 10000;
    border-radius: 10px;
}

/* --- CONTENIDO PRINCIPAL (ACTUALIZADO) --- */
.contenedor-principal {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ESTO ES LO QUE ARREGLA TU IMAGEN GIGANTE */
.bloque-banner {
    width: 100%;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
}

.bloque-banner img {
    width: 100%;
    max-height: 350px; /* Limita la altura para que no sea inmenso */
    object-fit: cover; /* Recorta la imagen para que encaje perfecto */
    border-radius: 15px;
    border: 2px solid var(--accent);
    box-shadow: 0 0 20px rgba(0, 251, 255, 0.3);
}

/* RESTO DE LOS BLOQUES */
.bloque-contenido {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 80px;
}

.bloque-contenido.inverso { flex-direction: row-reverse; }

.imagen-box, .texto-box { flex: 1; min-width: 300px; }

.imagen-box img {
    width: 100%;
    border-radius: 15px;
    border: 2px solid var(--accent);
}

.bloque-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.tarjeta {
    background: #111;
    padding: 30px;
    text-align: center;
    border-radius: 15px;
}

.bloque-frase {
    text-align: center;
    font-size: 1.8rem;
    color: var(--muted);
    margin: 100px 0;
}

/* RESPONSIVE PARA CELULARES */
@media (max-width: 768px) {
    .bloque-contenido, .bloque-contenido.inverso { flex-direction: column; }
    .bloque-banner img { max-height: 200px; } /* Más pequeño en celular */
}

.noticias-gadget-total {
    display: grid;
    /* Esto crea columnas de al menos 280px. Si cabe más de una, las pone a la par */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}

.noticia-item {
    background: #111; /* Fondo sólido oscuro como tus otras secciones */
    border-radius: 12px;
    padding: 20px;
    border-top: 4px solid var(--accent); /* Línea de color arriba para que parezca una tarjeta */
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    transition: 0.3s;
}

.noticia-item:hover {
    transform: translateY(-5px);
    background: #161616;
}

/* Título de la noticia en Blanco */
.noticia-titulo a {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
    display: block;
    margin-bottom: 10px;
}

/* La descripción en gris suave */
.noticia-desc {
    color: #999;
    font-size: 0.9rem;
    line-height: 1.5;
    flex-grow: 1;
}

/* Etiqueta pequeña de fuente (opcional, puedes borrarla si quieres que sea secreto) */
.noticia-fuente {
    font-size: 10px;
    color: #555;
    text-transform: uppercase;
    margin-top: 15px;
    text-align: right;
    font-weight: bold;
}


/* Sección de Videos Mejorada */
.bloque-videos {
    margin-bottom: 80px;
    padding: 20px 10px; /* Un poco de aire a los lados */
}

.grid-videos {
    display: grid;
    /* Cambio: minmax de 280px para que los videos no se compriman demasiado */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    width: 100%;
    box-sizing: border-box;
}

.tarjeta-video {
    width: 100%;
    background: #111; /* Fondo para que se distinga la tarjeta */
    border-radius: 10px;
    border: 1px solid #222;
    transition: 0.3s ease;
    overflow: hidden;
}

.tarjeta-video:hover {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(0, 251, 255, 0.2);
    transform: translateY(-5px);
}

/* Scroll ajustado para Videos y Cine (Para que el Header no los tape) */
#videos, #cine {
    scroll-margin-top: 100px !important; 
}

/* Footer Limpio y sin desbordamiento */
.footer-simple {
    width: 100%;
    box-sizing: border-box;
    background: #000;
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid #111;
}

.footer-simple .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-simple .footer-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap; /* Si el móvil es pequeño, los links saltan abajo */
}

.footer-simple .footer-links a {
    color: #888;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}

.footer-simple .footer-links a:hover {
    color: var(--accent);
}
/* ============================================
   MODO CINE TOTAL - REPARACIÓN DE PANTALLA
   ============================================ */

/* 1. El fondo negro que cubre todo */
.cine-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 100000; /* Por encima de todo */
    display: none; /* Se activa con JS */
    justify-content: center;
    align-items: center;
}

/* 2. El contenedor del video */
.cine-contenido {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

/* 3. El video estirado a toda la pantalla */
#video-pelicula {
    width: 100vw;   /* Ancho total de la ventana */
    height: 100vh;  /* Alto total de la ventana */
    border: none;
}

/* 4. El botón de cerrar (Para que no se pierda) */
.cerrar-cine {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100001;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

/* 5. AJUSTE PARA CELULAR VERTICAL (Mantiene forma de cine) */
@media screen and (orientation: portrait) {
    #video-pelicula {
        width: 100vw;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}
/* ============================================
   SECCIÓN CINE TOTAL (AUTO-RESPONSIVE)
   ============================================ */

.flyer-container {
    max-width: 350px; /* Tamaño elegante en PC */
    width: 80%;       /* Un poco más delgado en móvil para que no sea eterno */
    margin: 30px auto;
    background: #000;
    border: 2px solid var(--accent);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 25px rgba(0, 251, 255, 0.3);
    
    /* Quitamos aspect-ratio para que no fuerce la forma */
    height: auto; 
}

.flyer-img {
    width: 100%;
    height: auto;    /* La imagen se dibujará completa según su forma original */
    display: block;
    object-fit: contain; 
}

.flyer-info {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px 5px;
    /* Degradado más corto para que no tape a Jennifer Lopez */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    text-align: center;
}

.btn-cine {
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- REPARACIÓN DEL MODO CINE (OVERLAY) --- */
.cine-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; 
    height: 100vh;
    background: #000;
    z-index: 999999;
    display: none;
    justify-content: center;
    align-items: center;
}

#video-pelicula {
    width: 100vw;
    height: 100vh;
    border: none;
}

@media screen and (orientation: portrait) {
    #video-pelicula {
        width: 100vw;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}
/* 1. EVITAR QUE EL CONTENIDO EMPUJE LA PANTALLA */
html, body {
    overflow-x: hidden; /* Corta cualquier desborde lateral */
    width: 100%;
    position: relative;
}

/* 2. CORREGIR EL FOOTER PARA MÓVIL */
.footer-simple {
    width: 100%;
    padding: 20px 15px;
    box-sizing: border-box; /* Crucial para que el padding no sume ancho */
    background: #050505;
    text-align: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap; /* Hace que los links bajen si no caben */
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

/* 3. CORREGIR LA SECCIÓN SEO (Que suele ser la que más estorba) */
.seo-radio {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-wrap: break-word; /* Rompe palabras largas si es necesario */
    text-align: center;
    background: #000;
    color: #444; /* Color discreto para SEO */
}

.seo-radio h2 {
    font-size: 1.2rem;
    line-height: 1.4;
}

/* 4. AJUSTE PARA EL BLOQUE DE CONTACTO */
.bloque-contacto {
    width: 90%; 
    max-width: 600px;
    margin: 20px auto; /* Centra el bloque */
    box-sizing: border-box;
}

.seccion-shorts {
    width: 100%;
    max-width: 400px; /* Tamaño máximo para que no se vea gigante en PC */
    margin: 30px auto;
    padding: 10px;
    background: #111;
    border-radius: 20px;
    border: 2px solid var(--accent); /* El color neón de tu radio */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.short-wrapper {
    position: relative;
    padding-bottom: 177.77%; /* Relación de aspecto 9:16 (Vertical) */
    height: 0;
    overflow: hidden;
    border-radius: 15px;
}

.short-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* El punto rojo que late (mantenemos tu favorito) */
.punto-pulso {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ff0000;
    border-radius: 50%;
    margin-right: 10px;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
    animation: pulso-rojo 1.5s infinite;
}

@keyframes pulso-rojo {
    0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
    100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

/* Contenedor de noticias */
.grid-noticias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

/* Estilo de Tarjeta Oscura Pro */
.noticia-card {
    padding: 20px;
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05); /* Borde casi invisible */
    display: flex;
    flex-direction: column;
}

/* Variedad de fondos oscuros para las tarjetas (Amoled Friendly) */
.noticia-card:nth-child(4n+1) { background-color: #1a1a1a; } /* Gris Carbón */
.noticia-card:nth-child(4n+2) { background-color: #121a21; } /* Azul Petróleo */
.noticia-card:nth-child(4n+3) { background-color: #1a1221; } /* Berenjena Oscuro */
.noticia-card:nth-child(4n+4) { background-color: #12211a; } /* Verde Bosque Oscuro */

.noticia-card:hover {
    transform: translateY(-8px);
    border-color: #ff0000; /* Resalta en rojo al pasar el mouse */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* Tipografía Blanca y Roja */
.noticia-card h4 {
    color: #ffffff; /* Letras blancas para el resumen/titulo */
    font-size: 1.05rem;
    margin: 12px 0;
    line-height: 1.4;
    font-weight: 500;
}

.noticia-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
    margin-bottom: 5px;
}

.fuente { 
    color: #ff3333; /* El nombre del medio en rojo para que destaque */
    font-weight: bold;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.hora { 
    color: #888; 
    font-size: 0.7rem; 
}

.noticia-card a {
    text-decoration: none;
}

/* --- ESTILO SECCIÓN DORADA --- */
.contacto-publicidad-dorado {
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    background: #000;
}

.marco-dorado-animado {
    position: relative;
    width: 100%;
    max-width: 600px;
    padding: 3px;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
}

.marco-dorado-animado::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(transparent, #ffd700, transparent 30%);
    animation: rotar 4s linear infinite;
}

@keyframes rotar { 100% { transform: rotate(360deg); } }

.contenido-interno {
    position: relative;
    background: #050505;
    padding: 30px;
    border-radius: 18px;
    z-index: 1;
    text-align: center;
}

.badge-publicidad { background: #ffd700; color: #000; padding: 4px 10px; border-radius: 5px; font-weight: bold; font-size: 10px; }
.resaltado-rojo { color: #ff3333; font-weight: bold; }
.btn-correo { display: inline-block; margin-top: 15px; padding: 10px 25px; background: #fff; color: #000; text-decoration: none; border-radius: 50px; font-weight: bold; }

.seccion-banners-vip { 
    background: #000; 
    padding: 20px 0 50px 0; 
}

.contenedor-vallas { 
    max-width: 1000px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    gap: 40px; 
    padding: 0 15px; 
}

.valla-item {
    background: #0a0a0a;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #222;
    transition: transform 0.3s ease;
}

.valla-item:hover {
    transform: translateY(-5px);
    border-color: #ff3333;
}

.img-valla { 
    width: 100%; 
    height: auto; 
    display: block; 
}

.resena-valla {
    padding: 20px;
    text-align: left;
    border-top: 1px solid #222;
}

.resena-valla h4 { 
    color: #ffd700; 
    margin: 0 0 5px 0; 
    font-size: 1.2rem; 
}

.resena-valla p { 
    color: #aaa; 
    margin: 0; 
    font-size: 0.95rem; 
    line-height: 1.4; 
}

/* SECCIÓN TOTAL TV 505 - DISEÑO PREMIUM */
.seccion-tv-vivo {
    background: #000;
    padding: 40px 20px;
}

.tv-branding {
    text-align: center;
    margin-bottom: 25px;
}

.logo-tv {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -1px;
    margin: 0;
}

.tv-rojo {
    color: #ff0000;
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
}

.tv-505 {
    color: #ffd700;
    font-style: italic;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.slogan-tv {
    color: #666;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 5px;
}

.contenedor-tv {
    max-width: 900px;
    margin: 0 auto;
    background: #0a0a0a;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #222;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}

.encabezado-tv {
    padding: 15px;
    background: #111;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.on-air-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #000;
    padding: 5px 12px;
    border-radius: 5px;
    border: 1px solid #333;
}

.punto-rojo {
    width: 10px;
    height: 10px;
    background: #ff0000;
    border-radius: 50%;
    animation: parpadeo-tv 1s infinite;
}

@keyframes parpadeo-tv { 
    0%, 100% { opacity: 1; } 
    50% { opacity: 0.2; } 
}

.texto-vivo { color: #ff0000; font-weight: bold; font-size: 0.8rem; }
.programa-actual { color: #eee; font-size: 0.8rem; }

.marco-video-tv {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

.player-tv {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

.info-tv { padding: 15px; background: #050505; }
.botones-tv { display: flex; justify-content: space-between; align-items: center; }

.btn-tv-web {
    color: #ffd700;
    text-decoration: none;
    font-size: 0.8rem;
    border: 1px solid #ffd700;
    padding: 6px 15px;
    border-radius: 5px;
    transition: 0.3s;
}

.btn-tv-web:hover { background: #ffd700; color: #000; }

.calidad-hd { font-size: 10px; color: #444; border: 1px solid #444; padding: 2px 6px; border-radius: 3px; }

@media (max-width: 600px) {
    .logo-tv { font-size: 1.8rem; }
    .seccion-tv-vivo { padding: 20px 10px; }
}
.bloque-completo-prog {
    padding: 60px 20px;
    background: #050505;
    text-align: center;
}
.header-seccion h2 {
    color: var(--accent);
    letter-spacing: 2px;
    margin-bottom: 10px;
}
#nombre-dia-hoy {
    color: #888;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 30px;
}
.grid-personalizado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
.card-show {
    background: #111;
    padding: 25px;
    border-radius: 15px;
    border: 1px solid #222;
    transition: 0.3s;
}
.card-show.actual {
    border-color: var(--accent);
    background: rgba(0, 212, 255, 0.05);
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.card-show .time {
    color: var(--accent);
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}
.card-show .name {
    color: #fff;
    font-size: 1.1rem;
}

/* Esto le da cuerpo a la tarjeta */
.noticia-card {
    background: #111 !important; /* Fondo oscuro sólido */
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 15px;
    border-left: 4px solid #333; /* Borde base */
    transition: 0.3s;
}

/* --- COLORES DINÁMICOS PARA NOTICIAS GLOBALES --- */

/* Estilo de la etiqueta y la hora */
.noticia-meta {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.fuente {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Colores por Categoría usando el DATA-TAG del JS */
.noticia-card[data-tag="📡 EFE"] { border-left: 3px solid #f1c40f; }
.noticia-card[data-tag="🌍 BBC Mundo"] { border-left: 3px solid #ff3333; }
.noticia-card[data-tag="🌎 France 24"] { border-left: 3px solid #3498db; }
.noticia-card[data-tag="💻 Tech"] { border-left: 3px solid #00fbff; }
.noticia-card[data-tag="⚽ Deportes"] { border-left: 3px solid #2ecc71; }

/* Color del texto de la etiqueta para que combine con el borde */
.noticia-card[data-tag="📡 EFE"] .fuente { color: #f1c40f; }
.noticia-card[data-tag="🌍 BBC Mundo"] .fuente { color: #ff3333; }
.noticia-card[data-tag="🌎 France 24"] .fuente { color: #3498db; }
.noticia-card[data-tag="💻 Tech"] .fuente { color: #00fbff; }
.noticia-card[data-tag="⚽ Deportes"] .fuente { color: #2ecc71; }

/* Estilo general de la tarjeta */
.noticia-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 12px;
    transition: transform 0.2s ease;
}

.noticia-card:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.08);
}
/* ============================================
   GRILLA: EFECTO BORDE NEÓN VIAJERO (ORO)
   ============================================ */
.grid-personalizado {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 30px auto;
}

.tarjeta-programa {
    position: relative;
    background: #0a0a0a; /* Fondo sólido para que no se vea el giro atrás */
    border-radius: 12px;
    padding: 20px;
    z-index: 1;
    overflow: hidden; /* Corta el aro para que solo se vea en el borde */
    border: 1px solid #1a1a1a; /* Borde base discreto */
}

/* El Aro Viajero (Luz de Oro) */
.tarjeta-programa::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* Gradiente cónico: crea un "rayo" de luz delgadito */
    background: conic-gradient(
        transparent, 
        #ffd700 5%, 
        transparent 10%
    );
    animation: rotacionAro 4s linear infinite;
    z-index: -2; /* Se va al fondo */
}

/* Capa de "Limpieza": Crea el efecto de borde delgado */
.tarjeta-programa::after {
    content: "";
    position: absolute;
    inset: 2px; /* Este número define el grosor del borde (2px) */
    background: #0a0a0a; /* Debe ser igual al fondo de la tarjeta */
    border-radius: 10px;
    z-index: -1; /* Se queda entre el aro y el texto */
}

/* Animación del giro */
@keyframes rotacionAro {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Estilos de Texto (Sin cambios para no romper nada) */
.prog-hora {
    font-size: 0.75rem;
    color: #ffd700;
    font-weight: 800;
    margin-bottom: 8px;
    display: block;
}

.prog-nombre {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
}

/* Cuando la tarjeta está ACTIVA: El aro brilla más y es más rápido */
.tarjeta-programa.activa::before {
    background: conic-gradient(
        transparent, 
        #ffd700, 
        var(--accent), 
        transparent 20%
    );
    animation-duration: 2s;
}

.tarjeta-programa.activa {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}