/* ============================================================
   GioStreaming Player Pro · Estilos personalizados
   ============================================================ */

.glass-container {
    background: rgba(10, 14, 23, 0.85);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.56);
}
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.glass-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Dock de redes — versión GRANDE */
.dock-icon {
    width: 3.25rem; height: 3.25rem;
    font-size: 1.15rem;
    border-radius: 0.9rem;
    display: flex; align-items: center; justify-content: center;
    color: #d1d5db;
    transition: all .2s;
}
.dock-icon:hover { color: #fff; background: rgba(255,255,255,.1); transform: scale(1.06); }

/* Ecualizador mini (portada) */
.eq-bar { animation: eqBounce 1.2s ease-in-out infinite alternate; }
.eq-bar:nth-child(1){ animation-delay:.1s }
.eq-bar:nth-child(2){ animation-delay:.3s }
.eq-bar:nth-child(3){ animation-delay:.2s }
.eq-bar:nth-child(4){ animation-delay:.4s }
@keyframes eqBounce { 0%{height:4px} 100%{height:22px} }

/* Barras del visualizador central */
.viz-bar {
    width: 4px;
    border-radius: 9999px;
    background: rgba(245, 197, 24, 0.85);
    height: 6px;
    transition: height 0.15s ease-in-out;
}

/* Slider de volumen con thumb dorado */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px; width: 14px;
    border-radius: 50%;
    background: #F5C518;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(245, 197, 24, 0.8);
}
input[type=range]::-moz-range-thumb {
    height: 14px; width: 14px;
    border: 0; border-radius: 50%;
    background: #F5C518;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(245, 197, 24, 0.8);
}

/* Botón PLAY siempre redondo */
#main-play-btn {
    width: 4rem !important;
    height: 4rem !important;
    min-width: 4rem;
    max-width: 4rem;
    aspect-ratio: 1 / 1;
    border-radius: 9999px !important;
    flex: 0 0 auto;
    padding: 0;
}

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

.bubble-enter { animation: bubbleIn .25s ease-out; }
@keyframes bubbleIn {
    from { opacity:0; transform:translateY(8px) }
    to   { opacity:1; transform:translateY(0) }
}

/* Badges de apps — más grandes y visibles */
#app-badges img,
#app-badges-mm img {
    height: 48px !important;
    width: auto !important;
    min-width: 130px;
}
#app-badges { gap: 16px; }
#app-badges-mm { gap: 12px; }
/* Badges de apps — grandes y separados del historial */
#app-badges img,
#app-badges-mm img {
    height: 80px !important;
    width: auto !important;
}
#app-badges { margin-top: 2rem !important; gap: 20px; }
/* ═══════════════════════════════════════════════════════════
   AJUSTES v5.1 · pedido del cliente
   ═══════════════════════════════════════════════════════════
   1) El botón rojo "TV en Vivo" del header (junto a "Pedir
      Canción") SOLO en teléfono: en desktop/tablet ya está el
      switch "Radio | TV en Vivo" de la página y no se repite.
   2) Sin ✕ roja sobre el video de TV embebida (tapaba la imagen
      del canal). Para volver a la radio: el switch "Radio" de la
      página o el mismo botón del header, que cambia a
      "Radio en Vivo" mientras la TV está abierta. */
@media (min-width: 768px) {
    #header-tv-btn { display: none !important; }
}
/*    2-b) AQUÍ ESTABA LA PIEZA QUE FALTABA · v5.2
      La ✕ roja la crea el player.js de la página (#tv-close-btn:
      círculo rojo de 38px en la esquina superior derecha del
      video, justo donde la televisora quema su logo). Ese
      archivo está congelado, así que se oculta desde aquí.
      El switch "Radio" hace lo mismo que hacía la ✕: apaga el
      video y reanuda la radio. Vale para PC y teléfono. */
#tv-close-btn { display: none !important; }