/**
 * Studio — personalización en móvil (≤900px).
 * Solo afecta pantallas con .datos-studio--branding; escritorio sin cambios.
 */

@media (max-width: 900px) {
    /* ── Tema Granada: ancho completo (sin columna estrecha a la derecha) ── */
    body.ds-studio-branding-page {
        --side-width: 0px !important;
        --ds-branding-mobile-chrome-bottom: 72px;
        --ds-branding-mobile-actions-h: 52px;
        --ds-branding-mobile-actions-gap: 12px;
        --ds-branding-mobile-top-trim: 18px;
        --ds-branding-mobile-shell-pad-top: 8px;
    }

    body.admin-bar.ds-studio-branding-page {
        --ds-branding-mobile-top-trim: 8px;
        --ds-branding-mobile-shell-pad-top: 6px;
    }

  /* No ocultar .site-sidebar: en Granada el botón + y su menú dependen de él */
    body.ds-studio-branding-page #secondary,
    body.ds-studio-branding-page aside.sidebar:not(.site-sidebar),
    body.ds-studio-branding-page .widget-area {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.ds-studio-branding-page .site-sidebar,
    body.ds-studio-branding-page aside.site-sidebar,
    body.ds-studio-branding-page .icon-add,
    body.ds-studio-branding-page nav.icon-add {
        pointer-events: auto !important;
    }

    body.ds-studio-branding-page #page,
    body.ds-studio-branding-page .site,
    body.ds-studio-branding-page .site-inner,
    body.ds-studio-branding-page .site-content,
    body.ds-studio-branding-page #content,
    body.ds-studio-branding-page .content-area,
    body.ds-studio-branding-page main,
    body.ds-studio-branding-page #primary,
    body.ds-studio-branding-page .site-main,
    body.ds-studio-branding-page .entry-content,
    body.ds-studio-branding-page .post-entry,
    body.ds-studio-branding-page article {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        left: auto !important;
        right: auto !important;
        float: none !important;
        transform: none !important;
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    html:has(.datos-studio--branding),
    body.ds-studio-branding-page,
    body:has(.datos-studio--branding) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100%;
    }

    /* ── Contenedor Studio: flujo vertical natural ── */
    .datos-studio.datos-studio--branding,
    .datos-studio--branding.datos-studio {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .datos-studio .ds-branding-shell {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding:
            calc(
                max(0px, var(--ds-branding-mobile-chrome-top, 0px) - var(--ds-branding-mobile-top-trim, 18px))
                + var(--ds-branding-mobile-shell-pad-top, 8px)
            )
            16px
            0;
        box-sizing: border-box;
    }

    .datos-studio .ds-branding-layout {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Solo controles de dispositivo/zoom ocultos en móvil — el mockup se abre con el toggle */
    .datos-studio .ds-branding-preview-section {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    .datos-studio .ds-branding-layout:has([data-ds-preview-mockup]) {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .datos-studio .ds-branding-mobile-preview-toggle {
        display: none;
    }

    .datos-studio .ds-branding-layout--preview-collapsed .ds-branding-preview-col,
    .datos-studio .ds-branding-layout:not(.ds-branding-layout--preview-open) .ds-branding-preview-col {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    /* Overlay a pantalla completa: no empuja el formulario ni recorta el mockup */
    body.ds-mobile-preview-open {
        overflow: hidden !important;
    }

    .datos-studio .ds-branding-layout--preview-open .ds-branding-preview-col {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 9995;
        order: unset;
        flex: none !important;
        flex-basis: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0;
        overflow: visible !important;
        margin: 0 !important;
        padding:
            calc(max(12px, env(safe-area-inset-top, 0px)) + 44px)
            12px
            calc(var(--ds-mobile-preview-bottom-reserve, 148px) + env(safe-area-inset-bottom, 0px));
        pointer-events: auto !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(4, 5, 8, 0.96);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-sizing: border-box;
    }

    .datos-studio .ds-branding-layout--preview-open .ds-branding-preview-col .ds-phone-mockup {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 auto !important;
    }

    .datos-studio .ds-branding-layout--preview-open .ds-branding-preview-col .ds-phone-frame-scale {
        max-height: none !important;
        max-width: 100% !important;
        overflow: hidden !important;
        margin-inline: auto !important;
        flex-shrink: 0;
    }

    .datos-studio .ds-branding-layout--preview-open .ds-branding-preview-col .ds-phone-frame {
        max-height: none !important;
        overflow: visible !important;
        transform-origin: top left !important;
    }

    .datos-studio .ds-branding-layout--preview-open .ds-branding-preview-col .ds-brand-preview-status {
        display: none !important;
    }

    .datos-studio .ds-branding-preview-col__close {
        display: none;
    }

    .datos-studio .ds-branding-layout--preview-open .ds-branding-preview-col__close {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: calc(max(10px, env(safe-area-inset-top, 0px)) + 4px);
        right: 12px;
        z-index: 9996;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.78);
        color: #fff;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }

    .datos-studio .ds-branding-layout--preview-open .ds-branding-preview-col__close:hover {
        background: rgba(0, 0, 0, 0.92);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .datos-studio .ds-branding-form > .ds-branding-divider:not(.ds-branding-divider--actions) {
        display: none !important;
    }

    /* ── Formulario: sin altura fija ni scroll interno ── */
    .datos-studio .ds-branding-form-col {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .datos-studio .ds-branding-form-col > .ds-branding-form {
        display: flex !important;
        flex-direction: column !important;
        flex: none !important;
        gap: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        padding-bottom: calc(
            var(--ds-branding-mobile-actions-h, 52px)
            + var(--ds-branding-mobile-chrome-bottom, 72px)
            - var(--ds-branding-mobile-actions-gap, 12px)
            + 12px
            + env(safe-area-inset-bottom, 0px)
        );
    }

    .datos-studio .ds-branding-page-head {
        margin-bottom: 12px;
        margin-top: 0;
        padding-top: 0;
    }

    .datos-studio .ds-branding-page-title {
        font-size: 22px;
        line-height: 1.2;
    }

    .datos-studio .ds-branding-form .ds-branding-personalize {
        flex: none !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        gap: 12px;
    }

    .datos-studio .ds-branding-personalize .ds-languages-switch-list,
    .datos-studio .ds-branding-personalize .ds-branding-personalize-body {
        flex: none !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    .datos-studio .ds-languages-switch-list {
        grid-template-columns: 1fr;
        gap: 6px;
        padding-right: 0;
        padding-bottom: 4px;
    }

    .datos-studio .ds-language-switch-row {
        min-height: 44px;
        padding: 2px 0;
    }

    .datos-studio .ds-language-switch-row .ds-branding-row-label {
        white-space: normal;
        font-size: 14px;
    }

    .datos-studio .ds-branding-personalize > .ds-branding-intro--section .ds-branding-intro-title {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .datos-studio .ds-branding-personalize > .ds-branding-intro--section .ds-branding-intro-desc {
        font-size: 12px;
        line-height: 1.45;
    }

    .datos-studio .ds-branding-row {
        min-height: 44px;
    }

    /* ── Barra de acciones fija (por encima del menú inferior del tema) ── */
    .datos-studio .ds-branding-divider--actions {
        display: none !important;
    }

    /* Por debajo del menú inferior del tema para no bloquear el botón + */
    body.ds-studio-branding-page nav,
    body.ds-studio-branding-page .icon-add,
    body.ds-studio-branding-page .site-sidebar {
        z-index: 10100 !important;
        pointer-events: auto !important;
    }

    body.ds-studio-branding-page:not(.ds-config-wizard-active) .datos-studio .ds-branding-form-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(
            var(--ds-branding-mobile-chrome-bottom, 72px)
            - var(--ds-branding-mobile-actions-gap, 12px)
            + env(safe-area-inset-bottom, 0px)
        );
        z-index: 1000;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: stretch;
        gap: 6px;
        margin: 0;
        padding: 8px 10px 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        background: #000000;
        box-shadow: none;
        box-sizing: border-box;
    }

    .datos-studio .ds-branding-reset-btn,
    .datos-studio .ds-branding-save-btn,
    .datos-studio .ds-branding-form-actions .ds-branding-mobile-preview-toggle {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        text-align: center;
        padding: 8px 6px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        min-height: 36px;
        border-radius: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .datos-studio .ds-branding-form-actions .ds-branding-mobile-preview-toggle {
        display: inline-flex;
        align-items: center;
        margin: 0;
        border: 1px solid rgba(255, 255, 255, 0.24);
        background: transparent;
        color: rgba(255, 255, 255, 0.92);
        cursor: pointer;
    }

    .datos-studio .ds-branding-form-actions .ds-branding-mobile-preview-toggle:hover {
        border-color: rgba(255, 255, 255, 0.38);
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
    }

    .datos-studio .ds-branding-form-actions .ds-branding-mobile-preview-toggle[aria-expanded="true"] {
        border-color: rgba(255, 255, 255, 0.42);
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .datos-studio .ds-branding-save-btn {
        flex: 1 1 0;
        padding: 8px 8px;
        border: none;
    }

    .datos-studio .ds-branding-save-status {
        display: none;
    }
}

@media (max-width: 480px) {
    .datos-studio .ds-branding-shell {
        padding-inline: 14px;
    }

    .datos-studio .ds-branding-form-actions {
        padding-inline: 14px;
    }
}