/* ============================================================ Radio MUY - Reproductor Los colores y el tema (claro/oscuro) se aplican desde JS mediante el atributo data-theme en ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } /* ---------- Variables de acento (se pisan desde JS) ---------- */ :root { --accent: #e30613; --accent-dark: #b3040f; --accent-glow: rgba(227, 6, 19, 0.4); --accent-soft: rgba(227, 6, 19, 0.18); } /* ---------- TEMA OSCURO ---------- */ body[data-theme="dark"] { --card-bg: rgba(0, 0, 0, 0.75); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7); --text-tertiary: rgba(255, 255, 255, 0.6); --controls-bg: rgba(255, 255, 255, 0.08); --controls-border: rgba(255, 255, 255, 0.12); --slider-bg: rgba(255, 255, 255, 0.2); --error-color: #ff6b6b; --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); --overlay: rgba(13, 14, 18, 0.75); --bg-fallback: #0d0e12; } /* ---------- TEMA CLARO ---------- */ body[data-theme="light"] { --card-bg: rgba(255, 255, 255, 0.95); --text-primary: #1a1a1a; --text-secondary: #4a4a4a; --text-tertiary: #757575; --controls-bg: #f4f5f8; --controls-border: #e1e4eb; --slider-bg: #d1d5db; --error-color: #c53030; --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); --overlay: rgba(255, 255, 255, 0.4); --bg-fallback: #e5e7eb; } body { font-family: 'Inter', sans-serif; color: var(--text-primary); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 1.5rem; position: relative; overflow: hidden; background-color: var(--bg-fallback); } /* ---------- FONDO: imagen ---------- */ body[data-bg="image"] { background-image: linear-gradient(var(--overlay), var(--overlay)), var(--bg-source); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* ---------- FONDO: gradiente ---------- */ body[data-bg="gradient"] { background-image: var(--bg-source); background-attachment: fixed; } /* Glow suave detrás de la card */ body::before { content: ''; position: absolute; width: 350px; height: 350px; background: var(--accent-soft); filter: blur(100px); border-radius: 50%; top: 20%; left: 30%; z-index: 0; pointer-events: none; } .player-card { position: relative; z-index: 1; background: var(--card-bg); border-radius: 24px; padding: 2.5rem 2rem 2rem; text-align: center; width: 100%; max-width: 380px; box-shadow: var(--card-shadow), 0 0 40px var(--accent-soft); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .logo-container { margin-bottom: 1.5rem; display: flex; justify-content: center; align-items: center; } .logo-container img { max-width: 190px; height: auto; } .radio-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.3rem; color: var(--text-primary); letter-spacing: -0.01em; } /* Ocultar título si data-show-title="false" */ body[data-show-title="false"] .radio-title { display: none; } .radio-dial-container { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 1.75rem; } .radio-dial { font-size: 0.95rem; color: var(--accent); font-weight: 700; letter-spacing: 0.05em; } /* Ocultar frecuencia si data-show-frequency="false" */ body[data-show-frequency="false"] .radio-dial { display: none; } .equalizer { display: flex; align-items: flex-end; gap: 2.5px; height: 12px; } .equalizer span { width: 3px; background: var(--accent); border-radius: 2px; height: 20%; opacity: 0.3; } .equalizer-left.active span { opacity: 1; animation: bounce 0.55s infinite ease-in-out alternate; } .equalizer-left.active span:nth-child(1) { animation-delay: 0.0s; } .equalizer-left.active span:nth-child(2) { animation-delay: 0.25s; } .equalizer-left.active span:nth-child(3) { animation-delay: 0.1s; } .equalizer-left.active span:nth-child(4) { animation-delay: 0.35s; } .equalizer-right.active span { opacity: 1; animation: bounce 0.7s infinite ease-in-out alternate; } .equalizer-right.active span:nth-child(1) { animation-delay: 0.3s; } .equalizer-right.active span:nth-child(2) { animation-delay: 0.05s; } .equalizer-right.active span:nth-child(3) { animation-delay: 0.4s; } .equalizer-right.active span:nth-child(4) { animation-delay: 0.15s; } @keyframes bounce { 0% { height: 15%; } 100% { height: 100%; } } .controls-container { background: var(--controls-bg); border-radius: 16px; padding: 0.8rem 1.2rem; display: flex; align-items: center; gap: 12px; border: 1px solid var(--controls-border); margin-bottom: 1.2rem; } .play-btn { background: var(--accent); border: none; width: 42px; height: 42px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; box-shadow: 0 4px 12px var(--accent-glow); flex-shrink: 0; /* Pulso mientras NO está reproduciendo */ animation: pulsePlay 2s ease-out infinite; } .play-btn:hover { transform: scale(1.05); background: var(--accent-dark); } .play-btn.playing { animation: none; } .play-btn svg { fill: #ffffff; width: 18px; height: 18px; margin-left: 2px; } .play-btn.playing svg { margin-left: 0; } @keyframes pulsePlay { 0% { box-shadow: 0 4px 12px var(--accent-glow), 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 4px 12px var(--accent-glow), 0 0 0 16px transparent; } 100% { box-shadow: 0 4px 12px var(--accent-glow), 0 0 0 0 transparent; } } .volume-container { display: flex; align-items: center; gap: 8px; flex-grow: 1; } .volume-icon { fill: var(--text-tertiary); width: 18px; height: 18px; } input[type="range"] { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--slider-bg); outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 6px var(--accent-glow); } input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; box-shadow: 0 0 6px var(--accent-glow); } .player-footer { min-height: 20px; display: flex; justify-content: center; align-items: center; } .subtitle { font-size: 0.85rem; font-style: italic; color: var(--text-secondary); font-weight: 300; display: none; text-align: center; padding: 0 0.5rem; } .subtitle.active { display: inline; } .subtitle.status-error { color: var(--error-color); font-style: normal; font-weight: 600; } .subtitle.status-connecting { color: var(--text-tertiary); } /* Respetar preferencias de reducción de movimiento */ @media (prefers-reduced-motion: reduce) { .play-btn, .equalizer span { animation: none !important; } .equalizer.active span { height: 60%; } }