/*
 * PAGE BUILDER PRO — geometría canónica
 *
 * Esta hoja se carga después de los estilos visuales y es la única responsable
 * del tamaño del shell. Mantiene las mismas dimensiones antes y después de que
 * JavaScript hidrate el editor o cambie entre Page Builder y Block Editor.
 */

:root {
    --builder-shell-top: 60px;
    --builder-shell-left: clamp(228px, 18vw, 260px);
    --builder-shell-rail: 52px;
    --builder-shell-inspector: min(340px, calc(100vw - 16px));
    --pro-topbar-height: var(--builder-shell-top);
}

html,
body.page-builder-shell {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}

body.page-builder-shell {
    position: fixed;
    inset: 0;
}

body.page-builder-shell .pro-topbar {
    position: fixed;
    z-index: 100;
    inset: 0 0 auto;
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    height: var(--builder-shell-top);
    grid-template-areas: "brand switcher context actions";
    grid-template-columns: 46px minmax(190px, 220px) minmax(240px, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
    gap: 8px;
    padding: 7px 10px;
    overflow: hidden;
}

body.page-builder-shell .pro-brand,
body.page-builder-shell .pro-workspace-switch,
body.page-builder-shell .pro-context-control,
body.page-builder-shell .pro-actions {
    min-width: 0;
    max-width: 100%;
}

body.page-builder-shell .pro-brand > span:last-child,
body.page-builder-shell .pro-workspace-switch small,
body.page-builder-shell .pro-page-control label,
body.page-builder-shell #builder-save-state {
    display: none !important;
}

body.page-builder-shell .pro-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 12px;
}

body.page-builder-shell .pro-workspace-switch {
    gap: 3px;
    padding: 3px;
    border-radius: 11px;
}

body.page-builder-shell .pro-workspace-switch button {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 5px;
    min-width: 0;
    min-height: 36px;
    padding: 4px 6px;
}

body.page-builder-shell .pro-workspace-switch svg {
    width: 19px;
    height: 19px;
}

body.page-builder-shell .pro-workspace-switch strong {
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-builder-shell .pro-page-control {
    grid-template-columns: minmax(130px, 1fr) auto;
    gap: 5px;
}

body.page-builder-shell .pro-page-control select,
body.page-builder-shell .pro-page-control button,
body.page-builder-shell .pro-actions button {
    min-width: 0;
    min-height: 34px;
    padding-inline: 8px;
    border-radius: 8px;
    font-size: 9px;
}

body.page-builder-shell .pro-page-control select {
    width: 100%;
}

body.page-builder-shell .pro-actions {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-end;
    scrollbar-width: none;
}

body.page-builder-shell .pro-actions::-webkit-scrollbar,
body.page-builder-shell .stage-tools::-webkit-scrollbar {
    display: none;
}

body.page-builder-shell .pro-actions button {
    flex: 0 0 auto;
    white-space: nowrap;
}

body.page-builder-shell .pro-workspace,
body.page-builder-shell[data-builder-workspace="pages"] .pro-workspace,
body.page-builder-shell[data-builder-workspace="templates"] .pro-workspace {
    position: fixed;
    inset: var(--builder-shell-top) 0 0;
    display: grid;
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    height: auto;
    min-height: 0;
    grid-template-columns: var(--builder-shell-left) minmax(0, 1fr);
    overflow: hidden;
}

body.page-builder-shell .pro-workspace > *,
body.page-builder-shell .pro-sidebar,
body.page-builder-shell .pro-panel-stack,
body.page-builder-shell .pro-stage,
body.page-builder-shell .stage-toolbar,
body.page-builder-shell .stage-tools,
body.page-builder-shell .stage-view,
body.page-builder-shell #builder-design-view,
body.page-builder-shell #builder-live-view,
body.page-builder-shell #gjs,
body.page-builder-shell #builder-public-frame,
body.page-builder-shell #builder-live-frame {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
}

body.page-builder-shell .pro-sidebar,
body.page-builder-shell[data-builder-workspace="pages"] .pro-sidebar,
body.page-builder-shell[data-builder-workspace="templates"] .pro-sidebar {
    width: 100%;
    grid-template-columns: var(--builder-shell-rail) minmax(0, 1fr);
    overflow: hidden;
}

body.page-builder-shell .pro-nav {
    min-width: 0;
    gap: 4px;
    padding: 7px 4px;
    overflow-x: hidden;
    overflow-y: auto;
}

body.page-builder-shell .pro-nav button,
body.page-builder-shell[data-builder-workspace="pages"] .pro-nav button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 4px 2px;
    border-radius: 10px;
}

body.page-builder-shell .pro-nav button span svg {
    width: 19px;
    height: 19px;
}

body.page-builder-shell .pro-nav button small {
    max-width: 100%;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-builder-shell .pro-panel-stack {
    width: 100%;
    overflow: hidden;
}

body.page-builder-shell .builder-side-panel {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
}

body.page-builder-shell .pro-stage {
    contain: layout paint;
    width: 100%;
    max-width: 100%;
    grid-template-rows: 46px minmax(0, 1fr);
    overflow: hidden;
}

body.page-builder-shell .stage-toolbar {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(80px, 150px) minmax(0, 1fr);
    gap: 7px;
    padding: 5px 8px;
    overflow: hidden;
}

body.page-builder-shell .stage-context {
    min-width: 0;
    overflow: hidden;
}

body.page-builder-shell .stage-tools {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

body.page-builder-shell .stage-tools > *,
body.page-builder-shell .stage-tools > button,
body.page-builder-shell .device-switch,
body.page-builder-shell .device-switch button {
    flex: 0 0 auto;
}

body.page-builder-shell .stage-tools .pro-view-switch {
    width: 176px;
    min-width: 176px;
}

body.page-builder-shell .stage-tools .pro-view-switch button {
    min-width: 0;
    min-height: 30px;
    padding-inline: 6px;
    white-space: nowrap;
}

body.page-builder-shell .stage-tools > button,
body.page-builder-shell .device-switch button {
    min-height: 30px;
    padding-inline: 7px;
    font-size: 8px;
    white-space: nowrap;
}

body.page-builder-shell .stage-tools .device-switch {
    display: flex;
}

body.page-builder-shell #builder-design-view,
body.page-builder-shell #builder-live-view {
    width: 100%;
    height: 100%;
    padding: 8px;
    overflow: hidden;
}

body.page-builder-shell #gjs,
body.page-builder-shell #builder-public-frame,
body.page-builder-shell #builder-live-frame {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
}

body.page-builder-shell[data-builder-workspace="pages"]:not(.builder-block-focus) #gjs {
    display: none;
}

body.page-builder-shell[data-builder-workspace="pages"].builder-block-focus #builder-public-frame,
body.page-builder-shell[data-builder-workspace="templates"] #builder-public-frame {
    display: none;
}

body.page-builder-shell .pro-inspector,
body.page-builder-shell[data-builder-workspace="pages"] .pro-inspector,
body.page-builder-shell[data-builder-workspace="templates"] .pro-inspector {
    position: fixed;
    z-index: 130;
    top: var(--builder-shell-top);
    right: 0;
    bottom: 0;
    left: auto;
    display: grid;
    width: var(--builder-shell-inspector);
    min-width: 0;
    max-width: calc(100vw - 16px);
    height: auto;
    overflow: hidden;
    transform: translate3d(105%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    will-change: transform;
    transition: transform .18s ease, visibility 0s linear .18s;
}

body.page-builder-shell.builder-inspector-open .pro-inspector,
body.page-builder-shell[data-builder-workspace="pages"].builder-inspector-open .pro-inspector,
body.page-builder-shell[data-builder-workspace="templates"].builder-inspector-open .pro-inspector {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition: transform .18s ease, visibility 0s;
}

@media (max-width: 1180px) {
    :root {
        --builder-shell-top: 94px;
        --builder-shell-left: 228px;
        --builder-shell-rail: 48px;
    }

    body.page-builder-shell .pro-topbar {
        grid-template-areas:
            "brand switcher actions"
            "context context context";
        grid-template-columns: 44px minmax(190px, 220px) minmax(0, 1fr);
        grid-template-rows: 42px 34px;
        gap: 4px 7px;
        padding: 7px 9px;
    }

    body.page-builder-shell .pro-page-control {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.page-builder-shell .stage-toolbar {
        grid-template-columns: 72px minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    :root {
        --builder-shell-top: 132px;
        --builder-shell-left: 52px;
        --builder-shell-rail: 52px;
    }

    body.page-builder-shell .pro-topbar {
        grid-template-areas:
            "brand switcher"
            "context context"
            "actions actions";
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: 42px 34px 36px;
        gap: 4px 7px;
    }

    body.page-builder-shell .pro-actions {
        justify-content: flex-start;
    }

    body.page-builder-shell .pro-panel-stack {
        position: fixed;
        z-index: 120;
        top: var(--builder-shell-top);
        bottom: 0;
        left: var(--builder-shell-rail);
        width: min(286px, calc(100vw - var(--builder-shell-rail)));
        max-width: calc(100vw - var(--builder-shell-rail));
        border-right: 1px solid var(--pro-line);
        background: #f8f9fc;
        box-shadow: 18px 0 45px rgba(15, 23, 42, .16);
        transform: translate3d(-110%, 0, 0);
        transition: transform .18s ease;
    }

    body.page-builder-shell .pro-sidebar:focus-within .pro-panel-stack,
    body.page-builder-shell .pro-sidebar:hover .pro-panel-stack {
        transform: translate3d(0, 0, 0);
    }

    body.page-builder-shell .pro-stage {
        grid-template-rows: 78px minmax(0, 1fr);
    }

    body.page-builder-shell .stage-toolbar {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 24px 36px;
        align-content: center;
    }

    body.page-builder-shell .stage-context {
        display: grid;
    }

    body.page-builder-shell .stage-tools {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    :root {
        --builder-shell-top: 128px;
    }

    body.page-builder-shell .pro-workspace-switch strong {
        font-size: 7px;
    }

    body.page-builder-shell .pro-page-control button {
        max-width: 132px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-builder-shell #builder-design-view,
    body.page-builder-shell #builder-live-view {
        padding: 5px;
    }
}