/* === AztecaDJ - CSS Compartido (Desktop + Mobile) === */

:root {
    --primary: #8b5cf6;
    --primary-hover: #7c3aed;
    --glow-rgb: 139, 92, 246;
    --bg: #191a23;
    --card: #1f202b;
    --text: #ffffff;
    --subtext: #9ca3af;
    --green: #10b981;
}

/* === Switch / Toggle === */
.switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #3f3f46; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(24px); }

/* === Toast Notification === */
#toast { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 8px; padding: 16px; position: fixed; z-index: 3000; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 17px; border-left: 5px solid var(--primary); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
#toast.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
@keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } }
@keyframes fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } }

/* === Modal (Changelog) === */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 2000; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-content { background: var(--card); padding: 35px; border-radius: 18px; max-width: 550px; width: 90%; border: 1px solid var(--primary); box-shadow: 0 0 40px rgba(var(--glow-rgb), 0.25); position: relative; animation: modalPop 0.3s ease-out; }
@keyframes modalPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-close { position: absolute; top: 15px; right: 20px; cursor: pointer; font-size: 1.8em; color: var(--subtext); transition: 0.2s; }
.modal-close:hover { color: white; }
.modal-body { max-height: 450px; overflow-y: auto; padding-right: 10px; margin-top: 10px; }
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 10px; }

/* === Semáforo de Favoritos (Corazón) === */
.btn-icon.color-none { }
.btn-icon.color-gris { color: #808080 !important; filter: grayscale(100%); opacity: 0.5; }
.btn-icon.color-violet-smooth { filter: brightness(0.3) saturate(100%) invert(58%) sepia(61%) saturate(4775%) hue-rotate(218deg) brightness(98%) contrast(87%); }
.btn-icon.color-azul { filter: brightness(0.3) saturate(100%) invert(70%) sepia(61%) saturate(4775%) hue-rotate(-550deg) brightness(98%) contrast(87%); }
.btn-icon.color-rojo { filter: brightness(0) saturate(100%) invert(49%) sepia(59%) saturate(5170%) hue-rotate(334deg) brightness(100%) contrast(98%); }

/* === Requester (quién agregó la canción) === */
.track-requester { font-size: 0.78em; color: #6b7280; margin-top: 2px; font-style: italic; }
.track-requester span { color: #8b8fa3; font-weight: 500; }

/* === Footer === */
.footer { margin-top: 50px; padding: 20px; text-align: center; color: var(--subtext); font-size: 0.85em; border-top: 1px solid #27272a; }
.footer b { color: var(--primary); }
.version-link { cursor: pointer; text-decoration: underline; transition: 0.2s; }
.version-link:hover { color: var(--primary); }