/* ============================================== REPRODUCTOR RETRO GADGET - VERSION BLOGGER ============================================== */ #retro-player-gadget { position: fixed; bottom: 20px; right: 20px; width: 360px; max-width: calc(100% - 40px); background: linear-gradient(145deg, #0f0f0f 0%, #080808 100%); color: #fff; z-index: 999999; border-radius: 20px; overflow: hidden; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); transition: all 0.3s ease; } #retro-player-gadget:hover { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8); transform: translateY(-2px); } /* Playlist */ .gadget-playlist { background: rgba(5, 5, 5, 0.98); max-height: 420px; overflow-y: auto; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .gadget-playlist.hidden { max-height: 0; overflow: hidden; } .playlist-header-gadget { padding: 14px; text-align: center; background: linear-gradient(135deg, #e60000, #b30000); color: white; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-family: monospace; position: sticky; top: 0; z-index: 10; } /* G茅neros */ .genre-gadget { border-bottom: 1px solid #1a1a1a; } .genre-title-gadget { padding: 12px 16px; background: #0c0c0c; color: #e0e0e0; cursor: pointer; font-size: 12px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; transition: all 0.25s; } .genre-title-gadget:hover { background: #181818; color: #ff4444; padding-left: 22px; } .genre-title-gadget span { font-size: 14px; transition: transform 0.3s; } .genre-gadget.open .genre-title-gadget span { transform: rotate(180deg); } .genre-gadget.open .genre-title-gadget { color: #ff3333; background: #0f0f0f; border-left: 3px solid #ff3333; } /* Submen煤 */ .submenu-gadget { display: none; background: #050505; padding: 0; margin: 0; list-style: none; } .genre-gadget.open .submenu-gadget { display: block; animation: slideDown 0.25s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Pistas */ .track-gadget { padding: 10px 16px 10px 40px; border-bottom: 1px solid #111; cursor: pointer; font-size: 11px; color: #aaa; transition: all 0.2s; position: relative; display: flex; align-items: center; gap: 8px; } .track-gadget::before { content: "馃幍"; position: absolute; left: 12px; font-size: 11px; opacity: 0.6; } .track-gadget:hover { background: #e60000; color: white; padding-left: 48px; } .track-gadget:hover::before { opacity: 1; content: "▶"; } .track-gadget.active { background: linear-gradient(90deg, #1a1a1a, #111); color: #ff6666; font-weight: bold; border-left: 3px solid #ff3333; } .track-gadget.active::before { content: "馃帶"; opacity: 1; color: #ff6666; } /* Scrollbar */ .gadget-playlist::-webkit-scrollbar { width: 5px; } .gadget-playlist::-webkit-scrollbar-track { background: #0a0a0a; } .gadget-playlist::-webkit-scrollbar-thumb { background: #e60000; border-radius: 10px; } /* Player content */ .player-content-gadget { padding: 14px 16px; background: rgba(8, 8, 8, 0.95); border-top: 1px solid #222; } /* Info */ .info-area-gadget { margin-bottom: 10px; background: #00000055; padding: 6px 10px; border-radius: 40px; border: 1px solid #222; } #track-title-gadget { color: #ff4444; font-size: 12px; font-weight: 700; font-family: monospace; white-space: nowrap; background: transparent; } /* Progress */ .progress-container-gadget { width: 100%; height: 4px; background: #2a2a2a; border-radius: 10px; overflow: hidden; cursor: pointer; } .progress-container-gadget:hover { height: 6px; } .progress-bar-gadget { width: 0%; height: 100%; background: linear-gradient(90deg, #e60000, #ff4d4d); border-radius: 10px; } /* Tiempos */ .time-container-gadget { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9px; color: #888; font-family: monospace; } /* Controles */ .controls-gadget { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; } .controls-gadget button { background: #1c1c1c; border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 16px; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; } .controls-gadget button:hover { background: #e60000; transform: scale(1.05); } .play-btn-gadget { width: 52px !important; height: 52px !important; background: #e60000 !important; font-size: 24px !important; box-shadow: 0 0 12px rgba(230,0,0,0.5) !important; } /* Volumen */ .volume-gadget { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: #aaa; background: #111; padding: 6px 10px; border-radius: 40px; } #volume-slider-gadget { flex: 1; cursor: pointer; height: 3px; border-radius: 5px; background: #333; -webkit-appearance: none; } #volume-slider-gadget::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #e60000; cursor: pointer; } /* Mobile */ @media (max-width: 768px) { #retro-player-gadget { width: calc(100% - 20px); right: 10px; bottom: 10px; left: 10px; } .controls-gadget button { width: 36px; height: 36px; font-size: 14px; } .play-btn-gadget { width: 48px !important; height: 48px !important; font-size: 22px !important; } .track-gadget { padding: 8px 12px 8px 36px; font-size: 10px; } }
馃幍 Selecciona un track...
00:00 00:00
馃攭 馃攰
]]>

Essential Software Pro

Cat谩logo de Software Propietario y Esencial

Directorio Esencial

Generador de Gu铆as

Exportar Documentaci贸n


PDF

DOC

ZIP
Soporte T茅cnico IA
Consultas sobre licencias y software propietario.