:root { --primary: #CCFF33; --text-main: #ffffff; --text-dim: #a0a0a0; --apple-gray: rgba(255, 255, 255, 0.2); } * { -webkit-tap-highlight-color: transparent; outline: none; box-sizing: border-box; } body { margin: 0; padding: 0; background-color: #000; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .radio-card { background: radial-gradient(circle at center, #1b5e54 0%, #121212 70%, #000000 100%); width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 25px; text-align: center; color: var(--text-main); } .radio-cover { position: relative; width: 80%; max-width: 280px; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; margin: 0 auto 25px auto; box-shadow: 0 20px 50px rgba(0,0,0,0.8); } .radio-cover img { width: 100%; height: 100%; object-fit: cover; } .status-container { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; } .radio-status { background: var(--primary); color: #000; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 800; text-transform: uppercase; } .dot { width: 7px; height: 7px; background: #ff0000; border-radius: 50%; animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } } .radio-info h2 { margin: 0; font-size: 26px; font-weight: 700; } .radio-info p { margin: 6px 0 30px 0; color: var(--text-dim); font-size: 18px; } .radio-controls { display: flex; align-items: center; justify-content: space-evenly; max-width: 350px; margin: 0 auto; width: 100%; } .icon-btn { background: rgba(255,255,255,0.1); border: none; color: white; padding: 14px; border-radius: 14px; cursor: pointer; } .play-main { background: var(--primary); border: none; width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 25px rgba(204, 255, 51, 0.4); } .play-main svg { width: 34px; height: 34px; fill: black; color: black; } /* ============================================ VOLUME CONTROL — ESTILO APPLE MUSIC Visible solo en Android, oculto en iOS ============================================ */ .apple-volume-container { display: none; /* Oculto por defecto — JS lo muestra solo en Android */ align-items: center; justify-content: center; gap: 12px; margin: 32px auto 0; width: 85%; max-width: 300px; } /* JS añade .is-android al — solo entonces se muestra */ body.is-android .apple-volume-container { display: flex; } .vol-icon { color: rgba(255, 255, 255, 0.45); flex-shrink: 0; } .vol-icon svg { width: 16px; height: 16px; display: block; } /* Wrapper de la barra — altura generosa para fácil touch */ .volume-slider-wrapper { position: relative; flex-grow: 1; height: 32px; /* área de toque amplia */ display: flex; align-items: center; cursor: pointer; } /* Pista visible — 4px como Apple Music */ .volume-track { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); overflow: hidden; pointer-events: none; } /* Fill de la pista */ #volume-progress { height: 100%; background: #ffffff; border-radius: 2px; width: 100%; /* se actualiza vía JS */ transition: width 0.05s linear; } /* Input range invisible encima — maneja los eventos */ #volume-slider { -webkit-appearance: none; appearance: none; position: absolute; left: 0; width: 100%; height: 100%; background: transparent; margin: 0; padding: 0; z-index: 5; cursor: pointer; } /* Sin thumb visible — Apple Music no lo muestra */ #volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; } #volume-slider::-moz-range-thumb { width: 0; height: 0; border: none; background: transparent; } /* Feedback táctil: la pista crece ligeramente al tocar */ .volume-slider-wrapper:active .volume-track { height: 6px; transition: height 0.15s ease; } .volume-track { transition: height 0.15s ease; } /* ============================================ SPLASH SCREEN ============================================ */ #splash-screen { position: fixed; inset: 0; background: #000; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease; } .splash-content { display: flex; flex-direction: column; align-items: center; text-align: center; } .splash-logo { width: 100px; height: 100px; border-radius: 20px; margin: 0 auto 20px auto; display: block; } .splash-content h1 { font-size: 20px; font-weight: 300; letter-spacing: 2px; color: white; margin-bottom: 20px; } .spinner { width: 35px; height: 35px; border: 2px solid rgba(255,255,255,0.1); border-top: 2px solid var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #splash-screen.hidden { opacity: 0; pointer-events: none; } .install-tip { font-size: 12px; color: #aaa; margin-top: 30px; } .social-links { display: flex; justify-content: center; gap: 20px; margin-top: 25px; } .social-links svg { width: 22px; height: 22px; color: var(--text-dim); } @media (min-width: 768px) { .radio-card { width: 400px; height: 85vh; border-radius: 35px; } }