@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-image: url('https://www.contacto913fm.com/radio/assets/background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

.glass-panel {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.btn-primary { background-color: #2A90B8; transition: all 0.3s ease; }
.btn-primary:hover, .btn-primary:active { background-color: #1e6b8a; transform: scale(0.96); }

.play-btn-wrapper { position: relative; width: 80px; height: 80px; margin: 0 auto; }
.play-btn { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; position: relative; cursor: pointer; }

.pulse-ring { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background-color: #2A90B8; z-index: 1; opacity: 0; }
.is-playing .pulse-ring { animation: pulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } }

.loader { border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top: 3px solid white; width: 24px; height: 24px; animation: spin 1s linear infinite; display: none; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.status-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #ef4444; display: inline-block; margin-right: 6px; animation: blink 1.5s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }