/* =========================================================
   GoyaLabs Mobile Player - Apple / CarPlay style
   CSS limpio optimizado para celular.
   PC no cambia.
   ========================================================= */

.gl-mobile-player,
.gl-mobile-full-player,
.gl-mobile-full-backdrop,
.gl-mobile-bubble {
    display: none;
}

@media (max-width: 780px) {
    body.gl-mobile-player-active {
        padding-bottom: 132px !important;
    }

    body.gl-mobile-player-active.gl-mobile-player-open {
        overflow: hidden;
    }

    .player:not(.gl-mobile-player):not(.gl-mobile-full-player),
    [data-player-bar],
    [data-player-shell],
    #playlistPlayer {
        display: none !important;
    }

    .gl-mobile-player {
        position: fixed;
        left: 50%;
        bottom: calc(74px + env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: 5000;
        width: min(358px, calc(100% - 24px));
        min-height: 94px;
        padding: 13px 16px 15px;
        border: 0;
        border-radius: 38px;
        background: rgba(255,255,255,.96);
        color: #7c3aed;
        box-shadow: 0 16px 42px rgba(76,29,149,.18);
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: center;
        will-change: transform, opacity;
    }

    .gl-mobile-player.is-visible {
        display: grid;
    }

    .gl-mobile-player__progress {
        width: 100%;
        padding: 0 8px;
    }

    .gl-mobile-player__controls {
        display: grid;
        grid-template-columns: 46px 46px 62px 46px 46px;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }

    .gl-mobile-btn,
    .gl-mobile-close {
        width: 46px;
        height: 46px;
        border: 0;
        border-radius: 999px;
        padding: 0;
        margin: 0;
        background: transparent;
        color: #7c3aed;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        box-shadow: none;
    }

    .gl-mobile-close {
        font-size: 0;
    }

    .gl-mobile-close::before {
        content: "×";
        font-size: 34px;
        font-weight: 800;
        line-height: 1;
        color: #7c3aed;
    }

    .gl-mobile-btn svg,
    .gl-mobile-close svg,
    .gl-mobile-full-player svg {
        width: 24px;
        height: 24px;
        display: block;
        fill: currentColor;
        stroke: currentColor;
        pointer-events: none;
    }

    .gl-mobile-btn--play {
        width: 62px;
        height: 62px;
        background: #7c3aed;
        color: #ffffff;
        box-shadow: 0 10px 24px rgba(124,58,237,.26);
    }

    .gl-mobile-btn--play svg {
        width: 31px;
        height: 31px;
    }

    .gl-mobile-btn.is-active {
        color: #ff4fa3;
    }

    .gl-mobile-range {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        height: 20px;
        background: transparent;
        cursor: pointer;
        accent-color: #7c3aed;
        display: block;
    }

    .gl-mobile-range::-webkit-slider-runnable-track {
        height: 4px;
        border-radius: 999px;
        background: linear-gradient(
            to right,
            #7c3aed 0%,
            #7c3aed var(--gl-progress, 0%),
            rgba(124,58,237,.18) var(--gl-progress, 0%),
            rgba(124,58,237,.18) 100%
        );
    }

    .gl-mobile-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        margin-top: -6px;
        border-radius: 999px;
        border: 0;
        background: #7c3aed;
        box-shadow: 0 2px 8px rgba(124,58,237,.22);
    }

    .gl-mobile-range::-moz-range-track {
        height: 4px;
        border-radius: 999px;
        background: rgba(124,58,237,.18);
    }

    .gl-mobile-range::-moz-range-progress {
        height: 4px;
        border-radius: 999px;
        background: #7c3aed;
    }

    .gl-mobile-range::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 999px;
        border: 0;
        background: #7c3aed;
        box-shadow: 0 2px 8px rgba(124,58,237,.22);
    }

    .gl-mobile-full-backdrop {
        position: fixed;
        inset: 0;
        z-index: 5001;
        background: rgba(0,0,0,.46);
        backdrop-filter: blur(12px);
        opacity: 0;
    }

    .gl-mobile-full-backdrop.is-visible {
        display: block;
        animation: glBackdropIn .48s ease both;
    }

    .gl-mobile-full-backdrop.is-closing {
        animation: glBackdropOut .42s ease both;
    }

    .gl-mobile-full-player {
        position: fixed;
        left: 50%;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 5002;
        width: min(392px, calc(100% - 18px));
        height: min(720px, calc(100dvh - 24px));
        max-height: calc(100dvh - 24px);
        padding: 18px 20px 22px;
        border-radius: 30px;
        background:
            radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 32%),
            linear-gradient(180deg, #252525 0%, #121212 100%);
        color: #ffffff;
        box-shadow: 0 24px 70px rgba(0,0,0,.42);
        opacity: 0;
        pointer-events: none;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        transform: translateX(-50%) translateY(46px) scale(.94);
        will-change: transform, opacity;
    }

    .gl-mobile-full-player.is-visible {
        display: flex;
        opacity: 1;
        pointer-events: auto;
        animation: glFullRiseGrow .68s cubic-bezier(.19,.88,.22,1) both;
    }

    .gl-mobile-full-player.is-closing {
        animation: glFullDownShrink .56s cubic-bezier(.22,.86,.24,1) both;
    }

    .gl-mobile-full-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
    }

    .gl-mobile-full-small-btn {
        width: 34px;
        height: 34px;
        border: 0;
        background: transparent;
        color: rgba(255,255,255,.78);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
    }

    .gl-mobile-full-small-btn svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .gl-mobile-full-cover {
        width: min(310px, calc(100vw - 74px));
        height: min(310px, calc(100vw - 74px));
        margin: 6px auto 24px;
        border-radius: 22px;
        background: linear-gradient(135deg,#404040,#8f8f8f);
        display: grid;
        place-items: center;
        overflow: hidden;
        box-shadow: 0 22px 54px rgba(0,0,0,.36);
        color: rgba(255,255,255,.72);
        transform: translateY(12px) scale(.94);
        opacity: .55;
        transition: opacity .32s ease .05s, transform .32s cubic-bezier(.2,.9,.2,1) .05s;
    }

    .gl-mobile-full-player.is-visible .gl-mobile-full-cover {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    .gl-mobile-full-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .gl-mobile-full-cover svg {
        width: 94px;
        height: 94px;
        fill: currentColor;
    }

    .gl-mobile-full-info {
        width: 100%;
        text-align: center;
        margin: 0 auto 20px;
    }

    .gl-mobile-full-title {
        max-width: 100%;
        margin: 0 auto 5px;
        color: #ffffff;
        font-size: 18px;
        line-height: 1.18;
        font-weight: 950;
        text-align: center;
        letter-spacing: .01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gl-mobile-full-subtitle {
        margin: 0;
        color: rgba(255,255,255,.48);
        font-size: 12px;
        line-height: 1.3;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gl-mobile-full-progress {
        width: 100%;
        margin: auto 0 18px;
    }

    .gl-mobile-full-time {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-top: -1px;
        color: rgba(255,255,255,.48);
        font-size: 10px;
        font-weight: 800;
    }

    .gl-mobile-full-progress .gl-mobile-range {
        accent-color: #ffffff;
    }

    .gl-mobile-full-progress .gl-mobile-range::-webkit-slider-runnable-track {
        background: linear-gradient(
            to right,
            #ffffff 0%,
            #ffffff var(--gl-progress, 0%),
            rgba(255,255,255,.35) var(--gl-progress, 0%),
            rgba(255,255,255,.35) 100%
        );
    }

    .gl-mobile-full-progress .gl-mobile-range::-webkit-slider-thumb,
    .gl-mobile-full-progress .gl-mobile-range::-moz-range-thumb {
        background: #ffffff;
    }

    .gl-mobile-full-controls {
        width: 100%;
        display: grid;
        grid-template-columns: 48px 54px 72px 54px 48px;
        gap: 6px;
        justify-content: center;
        justify-items: center;
        align-items: center;
    }

    .gl-mobile-full-controls .gl-mobile-btn {
        width: 48px;
        height: 48px;
        color: #ffffff;
    }

    .gl-mobile-full-controls .gl-mobile-btn svg {
        width: 23px;
        height: 23px;
    }

    .gl-mobile-full-controls .gl-mobile-btn--play {
        width: 72px;
        height: 72px;
        background: rgba(255,255,255,.20);
        color: #ffffff;
        box-shadow: none;
    }

    .gl-mobile-full-controls .gl-mobile-btn--play svg {
        width: 36px;
        height: 36px;
    }

    .gl-mobile-full-controls .gl-mobile-btn.is-active {
        color: #ff4fa3;
    }

    .gl-mobile-bubble {
        position: fixed;
        left: 50%;
        top: auto;
        bottom: calc(126px + env(safe-area-inset-bottom));
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background:
            radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(255,255,255,.45) 34%, transparent 56%),
            linear-gradient(135deg, #ffffff, #7c3aed);
        box-shadow: 0 14px 34px rgba(124,58,237,.26);
        transform: translateX(-50%) scale(.22);
        opacity: 0;
        pointer-events: none;
        z-index: 6005;
        will-change: transform, opacity;
    }

    .gl-mobile-bubble.is-opening {
        display: block;
        animation: glBubbleOpen .96s cubic-bezier(.19,.88,.22,1) forwards;
    }

    .gl-mobile-bubble.is-closing {
        display: block;
        animation: glBubbleClose .88s cubic-bezier(.22,.86,.24,1) forwards;
    }

    .gl-mobile-player.is-entering {
        animation: glMiniFromBubble .92s cubic-bezier(.19,.88,.22,1) both;
    }

    .gl-mobile-player.is-exiting {
        animation: glMiniToBubble .76s cubic-bezier(.22,.86,.24,1) both;
    }

    @keyframes glBubbleOpen {
        0% { opacity: 0; transform: translateX(-50%) scale(.18); filter: blur(.6px); }
        35% { opacity: .88; transform: translateX(-50%) scale(1.35); filter: blur(0); }
        72% { opacity: .58; transform: translateX(-50%) scale(2.15); }
        100% { opacity: 0; transform: translateX(-50%) scale(2.65); }
    }

    @keyframes glBubbleClose {
        0% { opacity: 0; transform: translateX(-50%) scale(2.55); }
        42% { opacity: .82; transform: translateX(-50%) scale(1.2); }
        100% { opacity: 0; transform: translateX(-50%) scale(.18); }
    }

    @keyframes glMiniFromBubble {
        0% { opacity: 0; transform: translateX(-50%) scale(.78); border-radius: 999px; filter: blur(.6px); }
        55% { opacity: 1; transform: translateX(-50%) scale(1.015); border-radius: 42px; filter: blur(0); }
        100% { opacity: 1; transform: translateX(-50%) scale(1); border-radius: 38px; }
    }

    @keyframes glMiniToBubble {
        0% { opacity: 1; transform: translateX(-50%) scale(1); border-radius: 38px; }
        100% { opacity: 0; transform: translateX(-50%) scale(.28); border-radius: 999px; }
    }

    @keyframes glFullRiseGrow {
        0% { opacity: 0; transform: translateX(-50%) translateY(46px) scale(.94); filter: blur(1.2px); }
        68% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.006); filter: blur(0); }
        100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); filter: blur(0); }
    }

    @keyframes glFullDownShrink {
        0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
        100% { opacity: 0; transform: translateX(-50%) translateY(44px) scale(.94); }
    }

    @keyframes glBackdropIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes glBackdropOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
        .gl-mobile-bubble.is-opening,
        .gl-mobile-bubble.is-closing,
        .gl-mobile-player.is-entering,
        .gl-mobile-player.is-exiting,
        .gl-mobile-full-player.is-visible,
        .gl-mobile-full-player.is-closing,
        .gl-mobile-full-backdrop.is-visible,
        .gl-mobile-full-backdrop.is-closing {
            animation: none !important;
        }
    }
}