/* ==========================================================
   responsive.css — Ajustes responsivos (Mobile First)
   ========================================================== */

/* ── Base (móvil): centrar el wrapper y limitar ancho ─────── */
.vs-wrapper {
    max-width: 420px;
    margin-inline: auto;
}

/* ── Tablet (Portrait y Landscape) ───────────────────────── */
@media screen and (min-width: 600px) {
    .vs-text-area {
        padding: 40px 40px 0;
    }

    .vs-controls {
        gap: 20px;
        padding: 12px 24px;
    }

    .vs-ctrl-btn svg {
        width: 32px;
        height: 32px;
    }

    .vs-btn-play svg {
        width: 64px;
        height: 64px;
    }

    .vs-progress-area {
        padding: 8px 24px;
    }

    .vs-waveform-area {
        height: 50px;
        padding: 0 24px 20px;
    }
}

/* ── Desktop ─────────────────────────────────────────────── */
@media screen and (min-width: 1024px) {
    .vs-wrapper {
        max-width: 450px;
        margin: 24px auto;
    }

    .vs-player {
        border-radius: 16px;
    }

    /* Ajustar las posiciones absolutas si hay border-radius */
    .vs-backgrounds,
    .vs-overlay,
    .vs-end-screen {
        border-radius: 16px;
    }
}

/* ── Cuando está dentro del wrapper de Elementor ─────────── */
/* Elementor controla ancho/alto desde sus propios controles.
   Deshabilitamos todas las restricciones standalone.        */
.vs-elementor-wrapper .vs-wrapper {
    max-width: none;
    margin: 0;
    container-type: inline-size;
    width: 100%;
    height: 100%;
}

.vs-elementor-wrapper .vs-player {
    aspect-ratio: unset;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
    margin: 0;
}

/* ── Pantallas pequeñas (muy cortas) ─────────────────────── */
@media screen and (max-height: 600px) {
    .vs-player:not(.vs-elementor-wrapper .vs-player) {
        max-height: 95vh;
    }

    .vs-text-area {
        padding: 10px 16px 0;
    }

    .vs-action-btn {
        width: 36px;
        height: 36px;
    }

    .vs-action-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* ── Modo Horizontal en Móvil (Landscape) ────────────────── */
@media screen and (max-width: 900px) and (orientation: landscape) {
    .vs-player:not(.vs-elementor-wrapper .vs-player) {
        aspect-ratio: unset;
        height: 100svh;
    }

    .vs-text-area {
        padding: 10px 40px 0;
    }

    .vs-text-block {
        line-height: 1.4;
    }

    .vs-controls {
        padding: 4px 40px;
    }

    .vs-btn-play svg {
        width: 40px;
        height: 40px;
    }

    .vs-progress-area {
        padding: 2px 40px;
    }

    .vs-waveform-area {
        height: 30px;
        padding: 0 40px 4px;
    }
}