:root{
    --pd8e-teal:#178b8b;
    --pd8e-ink:#172029;
    --pd8e-muted:#66727b;
    --pd8e-line:#e2e7e9;
    --pd8e-bg:#f7f3ec;
}
.pd8e-page{min-height:100vh;padding:26px 0 70px;background:var(--pd8e-bg);color:var(--pd8e-ink)}
.pd8e-shell{width:min(1450px,calc(100% - 36px));margin:0 auto}
.pd8e-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px}
.pd8e-header a{color:#315e68;text-decoration:none;font-weight:800}
.pd8e-header>div:first-child>span{display:block;margin-top:12px;color:var(--pd8e-teal);font-size:.75rem;font-weight:900;text-transform:uppercase}
.pd8e-header h1{margin:6px 0;font-size:clamp(1.8rem,3vw,2.7rem)}
.pd8e-header p{margin:0;color:var(--pd8e-muted)}
.pd8e-status,.pd8e-panel{background:#fff;border:1px solid var(--pd8e-line);border-radius:15px}
.pd8e-status{padding:12px 15px}.pd8e-status small,.pd8e-status strong,.pd8e-status span{display:block}.pd8e-status span{margin-top:4px;color:var(--pd8e-muted);font-size:.75rem}
.pd8-mode-switch{display:inline-flex;margin-bottom:16px;padding:4px;border:1px solid var(--pd8e-line);border-radius:11px;background:#fff}
.pd8-mode-switch button{border:0;background:transparent;padding:10px 15px;border-radius:8px;font-weight:800;cursor:pointer}
.pd8-mode-switch button.is-active{background:var(--pd8e-teal);color:#fff}
.pd8e-workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.pd8e-stage{min-height:720px;display:grid;place-items:center;padding:35px;border-radius:16px;background:linear-gradient(135deg,#ddd7cd,#f1eee8);overflow:auto}
.pd8e-canvas-wrap{position:relative;width:min(780px,100%)}
.pd8-canvas{position:relative;width:100%;overflow:hidden;box-shadow:0 18px 42px rgba(23,32,41,.24)}
.pd8-photo-slot,.pd8-text-slot{position:absolute;box-sizing:border-box;overflow:hidden}
.pd8-photo-slot{display:grid;place-items:center;border:2px dashed rgba(23,139,139,.85);background:rgba(255,255,255,.65);color:#315f67;font-size:.75rem;font-weight:800;cursor:pointer;touch-action:none}
.pd8-photo-slot.is-active{outline:4px solid rgba(23,139,139,.24);border-style:solid}
.pd8-photo-slot.is-loaded{border:0;background:#dfe6e8}
.pd8-photo-slot img{position:absolute;left:50%;top:50%;width:100%;height:100%;object-fit:cover;transform-origin:center center;pointer-events:none;user-select:none}
.pd8-photo-slot.is-layout-editable{overflow:visible;cursor:move;outline:2px solid #0e8e8f}
.pd8-photo-slot.is-layout-editable::after{content:"";position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;border-radius:3px;background:#0e8e8f;border:2px solid #fff;box-shadow:0 0 0 1px #0e8e8f;cursor:nwse-resize;z-index:5}
.pd8-photo-slot.is-layout-editable img{overflow:hidden}
.pd8-shape-circle{border-radius:50%}.pd8-shape-rounded{border-radius:14px}
.pd8-text-slot{display:flex;align-items:center;justify-content:center;padding:5px;pointer-events:none}
.pd8e-floating-toolbar,.pd8-layout-toolbar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:7px;background:#fff;border:1px solid var(--pd8e-line);border-radius:11px;box-shadow:0 10px 28px rgba(23,32,41,.18);z-index:10}
.pd8e-floating-toolbar button,.pd8e-floating-toolbar span,.pd8-layout-toolbar button,.pd8-layout-toolbar span,.pd8-layout-toolbar strong{min-height:36px;border:0;background:#fff;padding:0 10px;display:flex;align-items:center}
.pd8-layout-toolbar button{cursor:pointer;border-radius:7px;font-weight:800}
.pd8e-panel{padding:20px}.pd8e-panel h2{margin-top:0}
.pd8e-progress{display:flex;justify-content:space-between;padding:12px;border-radius:10px;background:#f2f7f7;margin-bottom:15px}
.pd8e-selected-info{padding:13px;margin-bottom:15px;border:1px solid #b9dada;border-radius:10px;background:#f2fbfb}
.pd8e-selected-info strong,.pd8e-selected-info>span{display:block}.pd8e-selected-info label{display:block;margin-top:12px}.pd8e-selected-info input{width:100%;accent-color:var(--pd8e-teal)}
.pd8e-slot-list{display:grid;gap:9px;max-height:430px;overflow:auto}
.pd8e-slot-card{border:1px solid var(--pd8e-line);border-radius:10px}.pd8e-slot-card.is-loaded{border-color:#84bfa8;background:#f0faf6}.pd8e-slot-card.is-active{box-shadow:0 0 0 2px rgba(23,139,139,.2)}
.pd8e-slot-select{width:100%;display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:center;border:0;background:transparent;padding:11px;text-align:left;cursor:pointer}
.pd8e-slot-select>span:first-child{width:27px;height:27px;display:grid;place-items:center;border-radius:7px;background:var(--pd8e-teal);color:#fff;font-size:.75rem;font-weight:900}
.pd8e-slot-select strong,.pd8e-slot-select small{display:block}.pd8e-slot-select small{color:var(--pd8e-muted)}
.pd8e-message{margin-top:15px;padding:12px;border-radius:9px;background:#edf8f8;color:#245b61}.pd8e-message.is-error{background:#fff0f0;color:#992b2b}
@media(max-width:900px){.pd8e-workspace{grid-template-columns:1fr}.pd8e-stage{min-height:540px;padding:20px}.pd8e-panel{order:-1}}
@media(max-width:620px){.pd8e-shell{width:min(100% - 20px,100%)}.pd8e-header{align-items:flex-start;flex-direction:column}.pd8e-stage{min-height:390px;padding:10px}.pd8-mode-switch{display:flex;width:100%}.pd8-mode-switch button{flex:1}}
/* Hotfix 2.3.3.1 */
.pd8-photo-slot.is-layout-editable{overflow:visible!important;cursor:move}
.pd8-photo-slot.is-layout-editable::after{
 content:"";position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;
 border-radius:3px;background:#0e8e8f;border:2px solid #fff;
 box-shadow:0 0 0 1px #0e8e8f;cursor:nwse-resize;z-index:10
}
.pd8-photo-slot img{pointer-events:none;user-select:none}
/* Hotfix 2.3.3.2 */
.pd8-layout-visibility-mode .pd8-photo-slot{overflow:visible!important}
.pd8-layout-visibility-mode .pd8-photo-slot img{
 left:50%!important;top:50%!important;width:100%!important;height:100%!important;
 transform:translate(-50%,-50%) scale(1) rotate(0deg)!important;
 object-fit:cover!important;opacity:.72;filter:saturate(.82) brightness(1.06)
}
.pd8-layout-visibility-mode .pd8-photo-slot.is-layout-editable{
 outline:3px solid #078f91!important;outline-offset:2px;
 box-shadow:0 0 0 1px #fff,0 0 0 5px rgba(7,143,145,.20)
}
.pd8-layout-visibility-mode .pd8-photo-slot.is-layout-editable::before{
 content:"Mover marco";position:absolute;left:50%;top:8px;transform:translateX(-50%);
 z-index:20;padding:4px 8px;border-radius:6px;background:rgba(7,111,113,.88);
 color:#fff;font-size:10px;font-weight:800;white-space:nowrap;pointer-events:none
}
.pd8-layout-visibility-mode .pd8-photo-slot.is-layout-editable::after{
 width:18px!important;height:18px!important;right:-10px!important;bottom:-10px!important;
 background:#078f91!important;border:3px solid #fff!important;box-shadow:0 0 0 2px #078f91!important
}
/* Hotfix 2.3.5.1 - reemplazo de fotografías */
.pd8e-slot-card {
    position: relative;
}

.pd8-replace-photo {
    width: calc(100% - 20px);
    margin: 0 10px 10px;
    padding: 8px 10px;
    border: 1px solid #178b8b;
    border-radius: 8px;
    background: #ffffff;
    color: #176f70;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.pd8-replace-photo:hover {
    background: #edf8f8;
}

.pd8e-slot-card:not(.is-loaded) .pd8-replace-photo {
    display: none;
}

.pd8-photo-slot.is-loaded::before {
    content: "Doble clic para cambiar foto";
    position: absolute;
    left: 50%;
    bottom: 7px;
    transform: translateX(-50%);
    z-index: 30;
    padding: 4px 7px;
    border-radius: 6px;
    background: rgba(23, 32, 41, .72);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .16s ease;
    pointer-events: none;
}

.pd8-photo-slot.is-loaded:hover::before {
    opacity: 1;
}

.pd8-layout-visibility-mode
.pd8-photo-slot.is-loaded::before,
.pd8-text-edit-mode
.pd8-photo-slot.is-loaded::before {
    display: none;
}

/* Product Designer 8.0 - Motor de Render V2 */

/*
 * La imagen mantiene sus dimensiones naturales.
 * El marco continúa siendo el viewport mediante overflow:hidden.
 */
.pd8-photo-slot {
    overflow: hidden;
    background:
        linear-gradient(45deg, #f1f3f4 25%, transparent 25%),
        linear-gradient(-45deg, #f1f3f4 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f1f3f4 75%),
        linear-gradient(-45deg, transparent 75%, #f1f3f4 75%);
    background-size: 14px 14px;
    background-position:
        0 0,
        0 7px,
        7px -7px,
        -7px 0;
}

.pd8-photo-slot img[data-pd8-render-v2="1"] {
    position: absolute !important;
    left: var(--pd8-render-left, 50%) !important;
    top: var(--pd8-render-top, 50%) !important;

    width: var(--pd8-natural-width) !important;
    height: var(--pd8-natural-height) !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: fill !important;
    transform:
        var(
            --pd8-render-transform,
            translate3d(-50%, -50%, 0) scale(1) rotate(0deg)
        ) !important;
    transform-origin: center center !important;

    image-rendering: auto;
    backface-visibility: hidden;
    will-change: transform, left, top;
}

/*
 * En modo marco se normaliza solamente la presentación.
 * No se alteran position_x, position_y, zoom ni rotation guardados.
 */
.pd8-layout-visibility-mode
.pd8-photo-slot img[data-pd8-render-v2="1"] {
    left: var(--pd8-render-left, 50%) !important;
    top: var(--pd8-render-top, 50%) !important;
    width: var(--pd8-natural-width) !important;
    height: var(--pd8-natural-height) !important;
    transform: var(--pd8-render-transform) !important;
    object-fit: fill !important;
    opacity: .72;
}

/* Indicador informativo durante la edición fotográfica. */
.pd8-photo-slot.is-active
img[data-pd8-render-v2="1"] {
    filter: none;
}

/*
 * Evita que reglas antiguas width:100%; height:100%; object-fit:cover
 * vuelvan a recortar la imagen.
 */
.pd8-photo-slot.is-loaded
img[data-pd8-render-v2="1"] {
    width: var(--pd8-natural-width) !important;
    height: var(--pd8-natural-height) !important;
    object-fit: fill !important;
}

/* Product Designer 8.0 - Hotfix 2.4.2 */

/* El panel ya no debe flotar sobre el lienzo. */
.pd8-layout-toolbar.is-sidebar-layout-toolbar {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;

    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;

    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    z-index: auto;
}

.pd8-layout-sidebar-panel {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #b8d8d9;
    border-radius: 10px;
    background: #f3fbfb;
}

.pd8-layout-sidebar-panel h3 {
    margin: 0 0 5px;
    color: #245b61;
    font-size: .95rem;
}

.pd8-layout-sidebar-panel > p {
    margin: 0 0 11px;
    color: #66727b;
    font-size: .78rem;
    line-height: 1.4;
}

.pd8-layout-toolbar.is-sidebar-layout-toolbar strong,
.pd8-layout-toolbar.is-sidebar-layout-toolbar span {
    min-height: auto;
    padding: 0;
    background: transparent;
}

.pd8-layout-toolbar.is-sidebar-layout-toolbar strong {
    display: block;
    color: #172029;
    font-size: .88rem;
}

.pd8-layout-toolbar.is-sidebar-layout-toolbar span {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    background: #ffffff;
    color: #52616a;
    font-size: .78rem;
    line-height: 1.35;
}

.pd8-layout-toolbar.is-sidebar-layout-toolbar button {
    width: 100%;
    min-height: 38px;
    padding: 9px 11px;
    border: 1px solid #178b8b;
    border-radius: 8px;
    background: #ffffff;
    color: #176f70;
    font-weight: 800;
    cursor: pointer;
}

.pd8-layout-toolbar.is-sidebar-layout-toolbar button:hover {
    background: #eaf7f7;
}

/* Aunque el atributo hidden cambie, la ubicación permanece en la columna. */
.pd8-layout-sidebar-panel:has(
    .pd8-layout-toolbar.is-sidebar-layout-toolbar[hidden]
) {
    display: none;
}

/* Hotfix 2.4.3 */
.pd8e-floating-toolbar.is-sidebar-photo-toolbar{
 position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
 transform:none!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;
 width:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;
 box-shadow:none;z-index:auto
}
.pd8-photo-sidebar-panel{margin-top:12px;padding:14px;border:1px solid #c9d8dc;border-radius:10px;background:#f7fafb}
.pd8-photo-sidebar-panel h3{margin:0 0 5px;color:#264f59;font-size:.95rem}
.pd8-photo-sidebar-panel>p{margin:0 0 11px;color:#66727b;font-size:.78rem;line-height:1.4}
.pd8e-floating-toolbar.is-sidebar-photo-toolbar button,
.pd8e-floating-toolbar.is-sidebar-photo-toolbar span{
 min-width:0;min-height:38px;padding:8px 7px;border:1px solid #c7d8dc;border-radius:8px;
 background:#fff;color:#245b61;display:flex;align-items:center;justify-content:center
}
.pd8e-floating-toolbar.is-sidebar-photo-toolbar button{cursor:pointer;font-weight:800}
.pd8e-floating-toolbar.is-sidebar-photo-toolbar button:hover{border-color:#178b8b;background:#eaf7f7}
.pd8e-floating-toolbar.is-sidebar-photo-toolbar [data-photo-action="reset"]{grid-column:1/-1}
.pd8-photo-sidebar-panel[hidden]{display:none!important}
.pd8e-canvas-wrap>.pd8e-floating-toolbar{pointer-events:none;visibility:hidden}

/* Product Designer 8.0 - Hotfix 2.4.3.2 */

.pd8-designer-topbar {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.pd8-designer-topbar .pd8-mode-switch {
    margin: 0;
    flex: 0 1 auto;
}

.pd8-design-state-box {
    position: relative;
    flex: 0 1 420px;
    min-width: 270px;
}

.pd8-design-state-toggle {
    width: 100%;
    min-height: 48px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;

    padding: 8px 12px;
    border: 1px solid #c9d8dc;
    border-radius: 11px;
    background: #fff;
    color: #172029;
    text-align: left;
    cursor: pointer;
}

.pd8-design-state-toggle:hover {
    border-color: #178b8b;
    background: #f5fbfb;
}

.pd8-design-state-title {
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
}

.pd8-design-state-summary {
    min-width: 0;
    overflow: hidden;
    color: #66727b;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd8-design-state-summary.is-ready {
    color: #176447;
    font-weight: 800;
}

.pd8-design-state-arrow {
    color: #52616a;
    transition: transform .18s ease;
}

.pd8-design-state-box.is-open
.pd8-design-state-arrow {
    transform: rotate(180deg);
}

.pd8-design-state-details {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 80;
    width: min(420px, calc(100vw - 32px));
}

.pd8-design-state-details[hidden] {
    display: none !important;
}

.pd8-design-state-details
.pd8-progress-panel {
    margin: 0;
    padding: 15px;
    border: 1px solid #c9d8dc;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(23, 32, 41, .16);
}

/*
 * El panel deja de ocupar espacio permanente en la columna lateral.
 * Mantiene intactos sus botones y métricas.
 */
.pd8e-panel > .pd8-progress-panel {
    display: none;
}

@media (max-width: 900px) {
    .pd8-designer-topbar {
        flex-direction: column;
    }

    .pd8-designer-topbar .pd8-mode-switch {
        width: 100%;
    }

    .pd8-design-state-box {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .pd8-design-state-details {
        left: 0;
        right: auto;
        width: 100%;
    }
}

@media (max-width: 620px) {
    .pd8-design-state-toggle {
        grid-template-columns: 1fr auto;
    }

    .pd8-design-state-title {
        grid-column: 1;
    }

    .pd8-design-state-summary {
        grid-column: 1 / -1;
        grid-row: 2;
        white-space: normal;
    }

    .pd8-design-state-arrow {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Product Designer 8.0 - Hotfix 2.4.3.3 */

.pd8-view-mode-button::before {
    content: "◉";
    margin-right: 6px;
}

/*
 * En modo Ver, el lienzo queda completamente protegido.
 * Se mantiene visible, pero no recibe eventos de edición.
 */
.pd8-view-mode .pd8-canvas {
    cursor: default !important;
}

.pd8-view-mode .pd8-photo-slot,
.pd8-view-mode .pd8-text-slot,
.pd8-view-mode [data-photo-slot-id],
.pd8-view-mode [data-text-slot-id] {
    pointer-events: none !important;
    cursor: default !important;
    outline: none !important;
    box-shadow: none !important;
}

.pd8-view-mode .pd8-photo-slot::before,
.pd8-view-mode .pd8-photo-slot::after,
.pd8-view-mode .pd8-text-slot::before,
.pd8-view-mode .pd8-text-slot::after {
    display: none !important;
}

.pd8-view-mode .pd8-photo-slot {
    border-color: transparent !important;
}

.pd8-view-mode .pd8-photo-slot img {
    pointer-events: none !important;
}

.pd8-view-mode .pd8e-slot-card,
.pd8-view-mode .pd8-replace-photo {
    pointer-events: none !important;
}

.pd8-view-mode .pd8e-slot-card {
    opacity: .72;
}

/* Aviso discreto de protección del diseño. */
.pd8-view-mode .pd8e-canvas-wrap::before {
    content: "Vista protegida";
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 50;
    padding: 5px 9px;
    border-radius: 7px;
    background: rgba(23, 32, 41, .76);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    pointer-events: none;
}

/* Los paneles específicos de edición nunca deben aparecer en modo Ver. */
.pd8-view-mode [data-photo-sidebar-panel],
.pd8-view-mode [data-layout-sidebar-panel],
.pd8-view-mode .pd8-text-panel,
.pd8-view-mode [data-photo-toolbar],
.pd8-view-mode [data-layout-toolbar],
.pd8-view-mode [data-selected-info] {
    display: none !important;
}

/* Product Designer 8.0 - Hotfix 2.4.3.4 */

.pd8-hide-photo-column [data-photo-column-content] {
    display: none !important;
}

/*
 * La columna lateral sigue disponible para los paneles propios de Marco
 * y Texto, pero el catálogo/listado de fotografías queda apagado.
 */
.pd8-hide-photo-column .pd8e-panel {
    min-height: 0;
}

.pd8-hide-photo-column
.pd8e-panel
[data-photo-sidebar-panel] {
    display: none !important;
}

/* Evita acciones accidentales sobre tarjetas de fotos fuera de su modo. */
.pd8-hide-photo-column .pd8e-slot-list,
.pd8-hide-photo-column .pd8e-slot-card,
.pd8-hide-photo-column [data-photo-input],
.pd8-hide-photo-column [data-select-slot] {
    pointer-events: none !important;
}

/*
 * En modo fotografía se restablece la presentación normal sin modificar
 * ninguna posición, zoom, rotación o archivo.
 */
[data-pd8-editor]:not(.pd8-hide-photo-column)
[data-photo-column-content] {
    visibility: visible;
}

/* Product Designer 8.0 - Paquete 2.4.4 */

/* Barra principal consolidada */
.pd8-mode-switch-final {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #d4dde0;
    border-radius: 12px;
    background: #fff;
}

.pd8-mode-switch-final button {
    min-height: 40px;
    padding: 9px 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #52616a;
    font-weight: 800;
    cursor: pointer;
}

.pd8-mode-switch-final button:hover {
    background: #eef6f6;
    color: #245b61;
}

.pd8-mode-switch-final button.is-active {
    background: #178b8b;
    color: #fff;
}

/* Ayuda contextual */
.pd8-final-mode-help {
    margin: -5px 0 14px;
    padding: 10px 13px;
    border: 1px solid #d8e2e4;
    border-radius: 10px;
    background: #fff;
    color: #66727b;
    font-size: .82rem;
}

.pd8-final-mode-help[data-mode="view"] {
    border-color: #d5d9dc;
    background: #f7f8f8;
}

.pd8-final-mode-help[data-mode="photo"] {
    border-color: #b8d8d9;
    background: #f2fbfb;
}

.pd8-final-mode-help[data-mode="layout"] {
    border-color: #c5d5e3;
    background: #f4f8fb;
}

.pd8-final-mode-help[data-mode="text"] {
    border-color: #d7bce0;
    background: #fbf5fd;
}

/* Una sola columna contextual */
.pd8e-panel [data-context-panel][hidden] {
    display: none !important;
}

.pd8e-panel.is-view-mode {
    display: none !important;
}

/* Elimina definitivamente la barra duplicada del lienzo */
[data-legacy-floating-toolbar="1"] {
    display: none !important;
}

/* Protecciones del modo Ver */
[data-active-designer-mode="view"] .pd8-photo-slot,
[data-active-designer-mode="view"] .pd8-text-slot {
    pointer-events: none !important;
    cursor: default !important;
    outline: none !important;
    box-shadow: none !important;
}

[data-active-designer-mode="view"] .pd8-photo-slot::before,
[data-active-designer-mode="view"] .pd8-photo-slot::after,
[data-active-designer-mode="view"] .pd8-text-slot::before,
[data-active-designer-mode="view"] .pd8-text-slot::after {
    display: none !important;
}

/* En fotografía solo se ve lo fotográfico */
[data-active-designer-mode="photo"]
[data-context-panel="layout"],
[data-active-designer-mode="photo"]
[data-context-panel="text"] {
    display: none !important;
}

/* En marcos solo se ve lo relacionado con marcos */
[data-active-designer-mode="layout"]
[data-context-panel="photo"],
[data-active-designer-mode="layout"]
[data-context-panel="text"] {
    display: none !important;
}

/* En textos solo se ve lo relacionado con textos */
[data-active-designer-mode="text"]
[data-context-panel="photo"],
[data-active-designer-mode="text"]
[data-context-panel="layout"] {
    display: none !important;
}

/* Estado del diseño compacto */
.pd8-design-state-final {
    min-width: 280px;
}

/* Responsive */
@media (max-width: 900px) {
    .pd8-mode-switch-final {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pd8-mode-switch-final button {
        padding: 9px 6px;
        font-size: .78rem;
    }

    .pd8-design-state-final {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .pd8-mode-switch-final {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Product Designer 8.0 - Hotfix 2.4.4.1 */

.pd8-mode-switch-icons {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(112px, 1fr));
    align-items: stretch;
    gap: 5px;
    width: 100%;
    padding: 5px !important;
}

.pd8-mode-switch-icons .pd8-mode-icon-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 13px;
    white-space: nowrap;
}

.pd8-mode-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pd8-mode-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pd8-mode-label {
    line-height: 1;
}

/* Evita que sobrevivan botones duplicados de versiones anteriores. */
.pd8-mode-switch-icons
button:not([data-editor-mode="view"]):not(
    [data-editor-mode="photo"]
):not(
    [data-editor-mode="layout"]
):not(
    [data-editor-mode="text"]
) {
    display: none !important;
}

@media (max-width: 760px) {
    .pd8-mode-switch-icons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .pd8-mode-switch-icons .pd8-mode-icon-button {
        padding: 9px 7px;
        gap: 6px;
        font-size: .78rem;
    }

    .pd8-mode-icon {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }
}

/* Product Designer 8.0 - Hotfix 2.4.4.4 */

/*
 * Ajuste de fotografía vuelve a ser un panel normal de la columna lateral.
 * Nunca debe aparecer dentro del desplegable Estado del diseño.
 */
.pd8-photo-panel-normal-column {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 14px !important;
    z-index: auto !important;
}

.pd8-design-state-details
[data-photo-sidebar-panel],
[data-design-state-box]
[data-photo-sidebar-panel] {
    display: none !important;
}

/*
 * El desplegable Estado del diseño contiene exclusivamente:
 * métricas, guardar, continuar a revisión y restaurar composición.
 */
.pd8-design-state-details
.pd8-progress-panel {
    max-height: min(70vh, 620px);
    overflow-y: auto;
}

/* Cierre visual consistente al quedar contraído. */
.pd8-design-state-box:not(.is-open)
.pd8-design-state-details {
    display: none !important;
}

/*
 * Respeta el comportamiento contextual final:
 * Ajuste de fotografía solo visible en modo photo.
 */
[data-active-designer-mode="view"]
.pd8-photo-panel-normal-column,
[data-active-designer-mode="layout"]
.pd8-photo-panel-normal-column,
[data-active-designer-mode="text"]
.pd8-photo-panel-normal-column {
    display: none !important;
}

/* Product Designer 8.0 - State Manager 2.5.4 */

/*
 * Estas reglas reflejan el estado único administrado por
 * product-designer-v8-state-manager.js.
 */

[data-pd8-editor][data-active-designer-mode="view"]
.pd8e-panel {
    display: none !important;
}

[data-pd8-editor][data-active-designer-mode="photo"]
[data-context-panel]:not([data-context-panel="photo"]),
[data-pd8-editor][data-active-designer-mode="layout"]
[data-context-panel]:not([data-context-panel="layout"]),
[data-pd8-editor][data-active-designer-mode="text"]
[data-context-panel]:not([data-context-panel="text"]) {
    display: none !important;
}

[data-pd8-editor][data-active-designer-mode="photo"]
[data-photo-column-content] {
    display: revert;
}

[data-pd8-editor]:not([data-active-designer-mode="photo"])
[data-photo-column-content] {
    display: none !important;
}

[data-pd8-editor][data-active-designer-mode="view"]
[data-photo-sidebar-panel],
[data-pd8-editor][data-active-designer-mode="view"]
[data-layout-sidebar-panel],
[data-pd8-editor][data-active-designer-mode="view"]
.pd8-text-panel {
    display: none !important;
}

/* La barra de modos debe permanecer visible en todos los modos. */
[data-pd8-editor] .pd8-mode-switch {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Protección visual del modo Ver. */
[data-pd8-editor][data-active-designer-mode="view"]
.pd8-photo-slot,
[data-pd8-editor][data-active-designer-mode="view"]
.pd8-text-slot,
[data-pd8-editor][data-active-designer-mode="view"]
[data-photo-slot-id],
[data-pd8-editor][data-active-designer-mode="view"]
[data-text-slot-id] {
    pointer-events: none !important;
}

/* En modo fotografía la lista lateral debe volver a mostrarse. */
[data-pd8-editor][data-active-designer-mode="photo"]
.pd8e-panel {
    display: block !important;
}

/* En Marcos y Textos la columna sigue disponible para sus propiedades. */
[data-pd8-editor][data-active-designer-mode="layout"]
.pd8e-panel,
[data-pd8-editor][data-active-designer-mode="text"]
.pd8e-panel {
    display: block !important;
}

/* Product Designer 8.0 - Hotfix 2.5.4.1 */

[data-pd8-editor] .pd8-mode-switch-restored {
    position: relative !important;
    z-index: 120 !important;
    width: min(100%, 760px) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
    gap: 5px !important;
    margin: 14px 0 18px !important;
    padding: 5px !important;
    border: 1px solid #d6dfe1 !important;
    border-radius: 13px !important;
    background: #fff !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: 0 8px 24px rgba(23, 32, 41, .06) !important;
}

[data-pd8-editor] .pd8-mode-switch-restored button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #40545c !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

[data-pd8-editor] .pd8-mode-switch-restored button:hover {
    background: #eef7f7 !important;
    color: #176f70 !important;
}

[data-pd8-editor] .pd8-mode-switch-restored button.is-active {
    background: #168b8b !important;
    color: #fff !important;
}

[data-pd8-editor] .pd8-mode-switch-restored .pd8-mode-icon {
    width: 19px !important;
    height: 19px !important;
    display: inline-flex !important;
    flex: 0 0 19px !important;
}

[data-pd8-editor] .pd8-mode-switch-restored svg {
    width: 100% !important;
    height: 100% !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

@media (max-width: 700px) {
    [data-pd8-editor] .pd8-mode-switch-restored {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }
}