/* ============================================
   Desarrollo – Proyecto de Etiqueta: Label Surface
   White print surface — the label itself.
   Variant: Base (Cápsulas / Suplemento)
   Depends on: marbete_shell.css (tokens)
   ============================================ */

/* ── The Label Itself ── */
.mb-label {
    display: flex;
    flex-direction: row;
    width: 1100px;
    min-height: 440px;
    background: white;
    color: black;
    font-family: 'Arial', 'Helvetica Neue', sans-serif;
    font-size: var(--mb-fs-base);
    line-height: 1.35;
    border: 1px solid var(--mb-lbl-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    position: relative;
}

/* Lot strip (vertical left edge) */
.mb-lot-strip {
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 22px;
    background: white;
    border-right: 1px solid var(--mb-lbl-border);
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 7px;
    letter-spacing: 0.08em;
    color: var(--mb-lbl-subtle);
    font-weight: 600;
    text-transform: uppercase;
}

/* ── Panels ── */
.mb-panels {
    display: flex;
    flex: 1;
    margin-left: 22px;
}

.mb-panel {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.mb-panel--left {
    width: 28%;
    border-right: 1px dashed var(--mb-lbl-border);
    justify-content: space-between;
}

.mb-panel--center {
    width: 38%;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    padding: 24px 28px;
}

.mb-panel--right {
    width: 34%;
    border-left: 1px dashed var(--mb-lbl-border);
    justify-content: flex-start;
}

/* ── Variante POLVO: mockup de bolsa blanco/neutro; el color final lo aporta cada producto ── */
.mb-label--polvo {
    --mb-polvo-bg: #fff;
    --mb-polvo-ink: #0a0d12;
    --mb-polvo-muted: #333a45;
    --mb-polvo-rule: #111827;
    --mb-polvo-shadow: rgba(15, 23, 42, 0.18);

    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1040px;
    min-height: 0;
    margin: 0 auto;
    background: transparent;
    border: none;
    box-shadow: none;
}

.mb-label--polvo .mb-panels {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    width: 100%;
    margin-left: 0;
    gap: 26px;
}

.mb-label--polvo .mb-panel--front,
.mb-label--polvo .mb-panel--back {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 20 / 26;
    overflow: hidden;
    color: var(--mb-polvo-ink);
    background:
        linear-gradient(102deg, rgba(15, 23, 42, 0.07) 0%, rgba(15, 23, 42, 0) 18%),
        linear-gradient(78deg, rgba(255, 255, 255, 0.90) 0 8%, rgba(255, 255, 255, 0) 20% 100%),
        linear-gradient(115deg, #f7f8fa 0%, var(--mb-polvo-bg) 42%, #f1f4f7 100%);
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 34px 34px 28px 28px;
    box-shadow: 0 18px 42px var(--mb-polvo-shadow), 0 6px 14px rgba(15, 23, 42, 0.10);
}

.mb-label--polvo .mb-panel--front::before,
.mb-label--polvo .mb-panel--back::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 7%;
    right: 7%;
    height: 74px;
    border-radius: 0 0 26px 26px;
    background:
        repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.12) 0 2px, rgba(255, 255, 255, 0.72) 2px 5px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(203, 213, 225, 0.30));
    box-shadow: inset 0 -12px 18px rgba(15, 23, 42, 0.08);
}

.mb-label--polvo .mb-panel--front::after,
.mb-label--polvo .mb-panel--back::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(76deg, rgba(15, 23, 42, 0) 0 17%, rgba(15, 23, 42, 0.06) 22%, rgba(255, 255, 255, 0.50) 29%, rgba(15, 23, 42, 0) 36%),
        linear-gradient(102deg, rgba(255, 255, 255, 0) 0 58%, rgba(255, 255, 255, 0.68) 64%, rgba(15, 23, 42, 0.05) 75%, rgba(255, 255, 255, 0) 84%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(15, 23, 42, 0.05) 100%);
}

.mb-label--polvo .mb-panel--front > *,
.mb-label--polvo .mb-panel--back > * {
    position: relative;
    z-index: 1;
}

.mb-label--polvo .mb-panel--front {
    align-items: center;
    text-align: center;
    justify-content: space-between;
    gap: 16px;
    padding: 92px 48px 36px;
}

.mb-front-top,
.mb-front-mid,
.mb-front-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.mb-front-top { gap: 14px; }
.mb-front-mid { gap: 18px; }

.mb-label--polvo .mb-panel--front .mb-brand {
    margin: 0 0 8px;
}

.mb-label--polvo .mb-panel--front .mb-brand-logo {
    max-width: 190px;
}

.mb-label--polvo .mb-panel--front .mb-product-name {
    max-width: 330px;
    margin: 0;
    color: var(--mb-polvo-ink);
    font-size: 31px;
    line-height: 0.98;
    letter-spacing: 0;
}

.mb-label--polvo .mb-panel--front .mb-product-subtitulo {
    margin: 0;
    color: var(--mb-polvo-muted);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.mb-label--polvo .mb-panel--front .mb-product-claim {
    max-width: 330px;
    margin: 0;
    color: var(--mb-polvo-muted);
    font-size: 12px;
    line-height: 1.25;
}

.mb-label--polvo .mb-panel--front .mb-suplemento-banner {
    margin: 0;
}

.mb-label--polvo .mb-panel--front .mb-suplemento-banner span {
    color: var(--mb-polvo-ink);
    border-top-color: var(--mb-polvo-rule);
    border-bottom-color: var(--mb-polvo-rule);
    font-size: 15px;
}

.mb-porciones-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2px 0;
}

.mb-porciones-num {
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 0.92;
    color: var(--mb-polvo-ink);
}

.mb-porciones-word {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--mb-polvo-ink);
}

.mb-label--polvo .mb-panel--front .mb-contenido,
.mb-label--polvo .mb-panel--front .mb-contenido-value {
    color: var(--mb-polvo-ink);
}

.mb-label--polvo .mb-panel--back {
    justify-content: flex-start;
    padding: 88px 44px 34px;
    gap: 6px;
    --mb-fs-xs: 6.5px;
    --mb-fs-sm: 7px;
    --mb-fs-base: 7.4px;
    --mb-fs-md: 8.4px;
    --mb-fs-lg: 9px;
}

.mb-label--polvo .mb-product-name--back {
    max-width: 300px;
    margin: 0;
    color: var(--mb-polvo-ink);
    font-size: 26px;
    text-align: center;
    line-height: 0.96;
    letter-spacing: 0;
}

.mb-label--polvo .mb-back-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

.mb-label--polvo .mb-back-head .mb-product-subtitulo {
    margin: 0;
    color: var(--mb-polvo-muted);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.mb-label--polvo .mb-back-legal {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
}

.mb-label--polvo .mb-atencion,
.mb-label--polvo .mb-warning-legal {
    margin: 0;
    color: var(--mb-polvo-ink);
    font-weight: 800;
    line-height: 1.18;
    text-align: center;
    text-transform: uppercase;
}

.mb-label--polvo .mb-claims-block {
    margin: 0;
    color: var(--mb-polvo-muted);
    font-style: normal;
    line-height: 1.2;
    text-align: center;
}

.mb-label--polvo .mb-claims-block:empty {
    display: none;
}

.mb-label--polvo .mb-nutri-box {
    margin: 4px 0 0;
    padding: 7px 8px 8px;
    border-color: var(--mb-polvo-rule);
    background: rgba(255, 255, 255, 0.42);
}

.mb-label--polvo .mb-nutri-title {
    margin-bottom: 5px;
    padding-bottom: 2px;
    color: var(--mb-polvo-ink);
    font-size: 14px;
}

.mb-label--polvo .mb-nutri-row--border-b {
    border-bottom-width: 4px;
}

.mb-label--polvo .mb-nutri-colheads {
    border-bottom-width: 2px;
}

.mb-label--polvo .mb-nutri-data-row {
    padding: 1px 0;
}

.mb-label--polvo .mb-nutri-colheads,
.mb-label--polvo .mb-nutri-data-row {
    grid-template-columns: minmax(0, 1fr) 58px 58px;
    gap: 5px;
}

.mb-label--polvo .mb-nutri-divider {
    border-top-width: 2px;
    margin-top: 3px;
    padding-top: 3px;
}

.mb-label--polvo .mb-bottom-text {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 2px solid var(--mb-polvo-rule);
    font-size: var(--mb-fs-sm);
    line-height: 1.18;
}

.mb-label--polvo .mb-text-block {
    margin: 0 0 3px;
    text-align: left;
}

.mb-label--polvo .mb-legal-hecho {
    margin-top: 8px;
    text-align: center;
}

.mb-label--polvo .mb-legal-labeled {
    margin-bottom: 5px;
    line-height: 1.18;
}

.mb-label--polvo .mb-legal-labeled strong {
    font-size: var(--mb-fs-sm);
}

.mb-label--polvo .mb-back-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-top: auto;
}

.mb-label--polvo .mb-caducidad {
    margin: 0;
    color: var(--mb-polvo-muted);
    font-size: var(--mb-fs-xs);
    font-style: normal;
    line-height: 1.2;
    text-align: center;
}

.mb-label--polvo .mb-back-code-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin: 0;
}

.mb-label--polvo .mb-product-code {
    color: var(--mb-polvo-ink);
    font-size: 9px;
    font-weight: 800;
    justify-content: flex-end;
}

/* ═══════════════════════════════════════════════
   RIGHT PANEL — Nutrimental
   ═══════════════════════════════════════════════ */
.mb-nutri-box {
    border: 2px solid black;
    padding: 8px 10px;
    margin-bottom: 10px;
}

/* Aviso de contenido recortado (el panel tiene alto fijo y oculta el excedente).
   No se imprime: es solo una alerta para quien revisa el proyecto de etiqueta. */
.mb-overflow-warn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 5px 8px;
    background: #b91c1c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

@media print {
    .mb-overflow-warn {
        display: none;
    }
}

/* ── Reverso de polvos: aminoácidos y nutrimental lado a lado ──
   Como la etiqueta real: dos columnas para que abajo quepan la dirección,
   el lote y el código de barras (antes el panel los recortaba en silencio).
   Si el producto NO tiene perfil de aminoácidos, su caja va oculta y la
   nutrimental ocupa el ancho completo (flex lo resuelve solo). */
.mb-label--polvo .mb-polvo-back-cols {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mb-label--polvo .mb-polvo-back-cols > * {
    flex: 1 1 0;
    min-width: 0;
}

/* En columna angosta, los aminoácidos van en lista simple (como la etiqueta real) */
.mb-label--polvo .mb-amino-rows {
    column-count: 1;
}

/* ── Perfil de aminoácidos (como otras marcas: mg por porción) ── */
.mb-amino-box {
    border: 2px solid black;
    padding: 8px 10px;
    margin-bottom: 10px;
}

.mb-amino-title {
    font-size: var(--mb-fs-lg, 14px);
    font-weight: 900;
    text-align: center;
    padding: 2px 0 3px;
    margin-bottom: 4px;
    background: black;
    color: white;
}

.mb-amino-subtitle {
    font-size: calc(var(--mb-fs-base) * 0.9);
    text-align: center;
    margin-bottom: 5px;
}

.mb-amino-rows {
    column-count: 2;
    column-gap: 18px;
}

.mb-amino-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--mb-fs-base);
    padding: 0.5px 0;
    break-inside: avoid;
}

.mb-amino-name {
    padding-right: 8px;
}

.mb-amino-val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.mb-amino-unit {
    font-weight: 400;
}

.mb-amino-bcaa {
    margin-top: 5px;
    border-top: 1.5px solid black;
    padding-top: 3px;
}

.mb-amino-bcaa-title {
    font-size: var(--mb-fs-base);
    font-weight: 800;
    margin-bottom: 2px;
}

.mb-amino-footnote {
    margin-top: 4px;
    font-size: calc(var(--mb-fs-base) * 0.82);
    border-top: 1px solid black;
    padding-top: 2px;
}

/* Utility: consistent bold weight for inline spans */
.mb-bold {
    font-weight: 700;
}

.mb-nutri-title {
    font-size: var(--mb-fs-xl, 18px);
    font-weight: 900;
    text-align: center;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.mb-nutri-serving {
    margin-bottom: 4px;
}

/* Serving rows: inline text, not flex space-between */
.mb-nutri-serving-row {
    font-size: var(--mb-fs-base);
    padding: 1px 0;
}

.mb-nutri-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--mb-fs-base);
    padding: 1px 0;
}

.mb-nutri-row--bold {
    font-weight: 700;
}

.mb-nutri-row--border-b {
    border-bottom: 5px solid black;
    padding-bottom: 4px;
    margin-bottom: 4px;
}

/* Shared grid layout for nutrimental column headers + data rows */
.mb-nutri-colheads,
.mb-nutri-data-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
}

.mb-nutri-colheads {
    font-size: var(--mb-fs-sm);
    font-weight: 700;
    border-bottom: 3px solid black;
    padding-bottom: 2px;
    margin-bottom: 2px;
}

.mb-nutri-colhead {
    text-align: right;
    min-width: 55px;
}

.mb-nutri-data-row {
    padding: 2px 0;
    border-bottom: 1px solid var(--mb-lbl-border-lt);
    font-size: var(--mb-fs-base);
}

.mb-nutri-data-row--ingredient {
    border-bottom-color: var(--mb-lbl-border);
}

.mb-nutri-data-label {
    font-weight: 700;
}

/* Labels with mixed bold/normal formatting (e.g., <b>Grasas</b> (lípidos)) */
.mb-nutri-data-label--mixed {
    font-weight: 400;
}

/* Sub-breakdown labels (fat/carb indented rows) — normal weight + indentation */
.mb-nutri-data-row--sub .mb-nutri-data-label {
    font-weight: 400;
    padding-left: 12px;
}

/* Exception: "Azúcares añadidos" is a sub-row but must be bold */
.mb-nutri-data-row--sub-bold .mb-nutri-data-label {
    font-weight: 700;
}

/* Thick black divider line after Sodio, before ingredients */
.mb-nutri-divider {
    border-top: 3px solid black;
    margin-top: 4px;
    padding-top: 4px;
}

/* Ingredient rows — normal weight */
.mb-nutri-data-row--ingredient .mb-nutri-data-label {
    font-weight: 400;
}



.mb-nutri-data-val {
    text-align: right;
    min-width: 55px;
    font-variant-numeric: tabular-nums;
}

.mb-nutri-ingredients {
    margin-top: 2px;
}

/* Bottom text (ingredients, modo empleo) */
.mb-bottom-text {
    font-size: var(--mb-fs-sm);
    line-height: 1.3;
}

.mb-text-block {
    margin-bottom: 4px;
    text-align: justify;
}

.mb-text-tiny {
    font-size: var(--mb-fs-xs);
    color: var(--mb-lbl-muted);
}

.mb-text-italic {
    font-style: italic;
}

/* ═══════════════════════════════════════════════
   CENTER PANEL — Front
   ═══════════════════════════════════════════════ */
.mb-brand {
    margin-top: 8px;
    margin-bottom: 12px;
}

.mb-brand-logo {
    max-width: 200px;
    height: auto;
}

.mb-product-name {
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--mb-lbl-text);
    margin: 0 0 14px 0;
    word-break: break-word;
}

.mb-product-subtitulo {
    font-size: var(--mb-fs-md);
    color: var(--mb-lbl-muted);
    margin-bottom: 8px;
    font-weight: 500;
}

.mb-art-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid var(--mb-lbl-border-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 12px;
    color: #9ca3af;
    font-size: var(--mb-fs-md);
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.mb-product-claim {
    font-size: var(--mb-fs-md);
    color: var(--mb-lbl-muted);
    margin-bottom: 14px;
    font-weight: 500;
}

.mb-suplemento-banner {
    width: 100%;
    margin-bottom: 10px;
}

.mb-suplemento-banner span {
    display: block;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mb-lbl-text);
    border-top: 2px solid var(--mb-lbl-text);
    border-bottom: 2px solid var(--mb-lbl-text);
    padding: 5px 0;
}

.mb-contenido {
    font-size: var(--mb-fs-md);
    color: var(--mb-lbl-muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mb-contenido-value {
    font-weight: 700;
    font-size: 11px;
    color: var(--mb-lbl-text);
}

/* ═══════════════════════════════════════════════
   LEFT PANEL — Legal
   ═══════════════════════════════════════════════ */
.mb-legal-top {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mb-atencion {
    font-size: var(--mb-fs-base);
    font-weight: 400;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 6px;
}

.mb-warning-legal {
    font-size: var(--mb-fs-base);
    font-weight: 400;
    line-height: 1.3;
    text-align: justify;
    margin-bottom: 8px;
    white-space: pre-line;
}

.mb-claims-block {
    font-size: var(--mb-fs-sm);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 8px;
    color: var(--mb-lbl-muted);
}

.mb-legal-hecho {
    margin-top: 4px;
}

.mb-legal-labeled {
    font-size: var(--mb-fs-sm);
    line-height: 1.35;
    color: var(--mb-lbl-text);
    margin-bottom: 6px;
}

.mb-legal-labeled strong {
    font-size: var(--mb-fs-sm);
    display: block;
    margin-bottom: 1px;
}

.mb-legal-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mb-product-code {
    font-size: var(--mb-fs-base);
    display: flex;
    gap: 6px;
}

.mb-product-code span:last-child {
    font-weight: 700;
}

.mb-caducidad {
    font-size: var(--mb-fs-xs);
    font-style: italic;
    color: var(--mb-lbl-subtle);
}

.mb-barcode-placeholder {
    font-size: var(--mb-fs-base);
    color: var(--mb-lbl-subtle);
    font-style: italic;
    padding: 6px 0;
    border: 1px dashed var(--mb-lbl-border);
    text-align: center;
    border-radius: 3px;
}
/* Cuando hay código de barras dibujado: sin marco punteado ni cursiva. */
.mb-barcode-placeholder:not(.mb-barcode--missing) {
    border: none;
    padding: 0;
    font-style: normal;
}
.mb-barcode-placeholder svg { display: block; width: 140px; height: auto; }

.mb-label--polvo .mb-barcode-placeholder:not(.mb-barcode--missing) {
    padding: 0;
    background: white;
    border-radius: 2px;
}

.mb-label--polvo .mb-barcode-placeholder svg {
    width: 132px;
}

/* ═══════════════════════════════════════════════
   MODO DISEÑO (marbete_designer.js)
   ═══════════════════════════════════════════════ */

/* Los textos libres y la caja de selección se posicionan respecto al panel */
.mb-panel {
    position: relative;
}

.mbe-area {
    position: relative;
}

/* Texto libre agregado por el usuario (se imprime; forma parte de la etiqueta) */
.mb-free-text {
    position: absolute;
    z-index: 3;
    color: #000;
    line-height: 1.3;
    min-width: 24px;
    min-height: 14px;
    font-family: 'Arial', 'Helvetica Neue', sans-serif;
    outline: none;
}

.mbe-on .mb-free-text {
    cursor: move;
}

.mbe-on .mb-free-text[contenteditable="true"] {
    cursor: text;
    outline: 1.5px solid #10b981;
    background: rgba(16, 185, 129, 0.06);
}

/* Bloques editables: pista visual al pasar el mouse */
.mbe-on [data-mbe]:hover {
    outline: 1px dashed rgba(59, 130, 246, 0.85);
    outline-offset: 1px;
    cursor: move;
}

/* Bloques ocultos por el usuario */
.mbe-hidden {
    display: none !important;
}

/* Caja de selección con asas */
#mbe-selbox {
    position: absolute;
    z-index: 50;
    pointer-events: none;
    border: 1.5px solid #3b82f6;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.mbe-handle {
    position: absolute;
    width: 9px;
    height: 9px;
    background: #fff;
    border: 1.5px solid #3b82f6;
    border-radius: 2px;
    pointer-events: auto;
}

.mbe-handle--nw { left: -5px; top: -5px; cursor: nwse-resize; }
.mbe-handle--n  { left: calc(50% - 4.5px); top: -5px; cursor: ns-resize; }
.mbe-handle--ne { right: -5px; top: -5px; cursor: nesw-resize; }
.mbe-handle--e  { right: -5px; top: calc(50% - 4.5px); cursor: ew-resize; }
.mbe-handle--se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.mbe-handle--s  { left: calc(50% - 4.5px); bottom: -5px; cursor: ns-resize; }
.mbe-handle--sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.mbe-handle--w  { left: -5px; top: calc(50% - 4.5px); cursor: ew-resize; }

/* Toolbar flotante del modo diseño */
.mbe-toolbar {
    position: sticky;
    top: 8px;
    z-index: 60;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid #334155;
    color: #e2e8f0;
    font-size: 12.5px;
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.mbe-tb-title {
    font-weight: 700;
    color: #c4b5fd;
}

.mbe-name {
    font-weight: 600;
    color: #93c5fd;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mbe-sep {
    width: 1px;
    height: 18px;
    background: #334155;
}

.mbe-btn {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #475569;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.mbe-btn:hover {
    background: #334155;
}

.mbe-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.mbe-btn--primary {
    background: #2563eb;
    border-color: #2563eb;
}

.mbe-btn--primary:hover {
    background: #1d4ed8;
}

.mbe-btn--danger {
    color: #fca5a5;
    border-color: #7f1d1d;
}

.mbe-btn--danger:hover {
    background: #450a0a;
}

/* Botón "Modo diseño" activo en la barra del marbete */
.mb-btn--design-on {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #fff !important;
}

/* Menú de bloques ocultos */
.mbe-menu {
    position: absolute;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 6px;
    z-index: 70;
    min-width: 240px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.mbe-menu-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 8px;
    color: #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

.mbe-menu-item:hover {
    background: #1e293b;
}

.mbe-menu-show {
    color: #34d399;
    font-weight: 600;
}

/* Nada del editor sale en la impresión */
@media print {
    .mbe-toolbar,
    #mbe-selbox,
    .mbe-menu {
        display: none !important;
    }

    .mbe-on [data-mbe]:hover {
        outline: none;
    }
}

/* ═══════════════════════════════════════════════
   MODO DISEÑO v2: toolbar en dos filas (arriba de la etiqueta),
   elementos libres línea/caja, zoom de edición
   ═══════════════════════════════════════════════ */

/* La toolbar vive FUERA del área flex de la etiqueta y apila sus dos filas */
.mbe-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.mbe-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.mbe-row--ctx {
    padding-top: 8px;
    border-top: 1px solid #334155;
}

#mbe-ctx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.mbe-btn--on {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

.mbe-zoom-label {
    min-width: 42px;
    text-align: center;
    color: #cbd5e1;
    font-size: 12px;
}

.mbe-color {
    width: 28px;
    height: 26px;
    padding: 1px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #1e293b;
    cursor: pointer;
}

.mbe-select {
    height: 27px;
    max-width: 132px;
    padding: 0 7px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 12px;
    cursor: pointer;
}

/* Elementos libres (texto / línea / caja): parte de la etiqueta, sí se imprimen */
.mb-free-el {
    position: absolute;
    z-index: 3;
}

.mb-free-line {
    background: #000;
    height: 2px;
    min-width: 10px;
}

.mb-free-box {
    border: 1.5px solid #000;
    border-style: solid;
    background: transparent;
    min-width: 14px;
    min-height: 14px;
}

.mbe-on .mb-free-el {
    cursor: move;
}

.mbe-on .mbe-multi-selected {
    outline: 1.5px dashed var(--pv-accent-cyan, #22d3ee);
    outline-offset: 3px;
}

/* Sin selección accidental de texto mientras se arrastra */
.mbe-on {
    user-select: none;
    -webkit-user-select: none;
}

.mbe-on .mb-free-text[contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
}

/* El menú de ocultos ahora es fijo (se ancla al botón, no al contenedor) */
.mbe-menu {
    position: fixed;
}

/* ═══════════════════════════════════════════════
   MODO DISEÑO v3: barra flotante FIJA (fuera del flujo de la página:
   seleccionar/deseleccionar ya no mueve la etiqueta) + guías inteligentes
   ═══════════════════════════════════════════════ */

.mbe-toolbar {
    position: fixed;
    top: auto;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    margin-bottom: 0;
    width: max-content;
    max-width: min(1200px, 96vw);
    z-index: 1200;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* Guías inteligentes (líneas de alineación al arrastrar) */
.mbe-guide {
    position: absolute;
    z-index: 55;
    pointer-events: none;
    display: none;
    background: #f43f5e;
}

.mbe-guide--v {
    width: 1px;
}

.mbe-guide--h {
    height: 1px;
}

/* Guía de CENTRO (del panel o de otro bloque): morada, para distinguirla */
.mbe-guide--center {
    background: #8b5cf6;
    box-shadow: 0 0 0 0.5px rgba(139, 92, 246, 0.6);
}

.mbe-guide--safe {
    background: var(--pv-green, #10b981);
    box-shadow: 0 0 0 0.5px rgba(16, 185, 129, 0.55);
}

.mbe-guide--object {
    background: var(--pv-accent-cyan, #22d3ee);
    box-shadow: 0 0 0 0.5px rgba(34, 211, 238, 0.5);
}

.mbe-guide-label,
.mbe-size-badge {
    position: absolute;
    z-index: 70;
    display: none;
    pointer-events: none;
    padding: 4px 7px;
    border: 1px solid var(--pv-card-border, rgba(56, 73, 107, 0.35));
    border-radius: 6px;
    background: var(--pv-card-surface-solid, #121828);
    color: var(--pv-text-primary, #f8fafc);
    font: 700 10px/1.2 Inter, sans-serif;
    white-space: nowrap;
    box-shadow: var(--pv-elevation, 0 6px 18px rgba(0, 0, 0, 0.35));
}

.mbe-size-badge {
    transform: translateX(-50%);
    color: var(--pv-accent-cyan, #22d3ee);
}

@media print {
    .mbe-guide,
    .mbe-guide-label,
    .mbe-size-badge {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════
   MODO DISEÑO v4: edición directa de texto + estado de guardado
   ═══════════════════════════════════════════════ */

.mbe-on [data-mbe-text-editable="true"] {
    cursor: text;
}

.mbe-on [data-mbe-text-editable="true"]:hover {
    outline-color: var(--pv-green, #10b981);
}

.mbe-on [data-mbe-text-editable="true"]:hover::after {
    content: "Doble clic para editar";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    padding: 4px 7px;
    border-radius: 6px;
    background: var(--pv-card-surface-solid, #121828);
    color: var(--pv-text-primary, #f8fafc);
    font: 600 10px/1.2 Inter, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    z-index: 80;
    box-shadow: var(--pv-elevation, 0 8px 24px rgba(0, 0, 0, 0.35));
}

.mbe-on .mbe-text-editing,
.mbe-on [contenteditable="true"] {
    cursor: text !important;
    user-select: text;
    -webkit-user-select: text;
    outline: 2px solid var(--pv-green, #10b981) !important;
    outline-offset: 2px;
    background: rgba(16, 185, 129, 0.08);
}

.mbe-text-overridden::before {
    content: "✎";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pv-accent, #3b82f6);
    color: #fff;
    font: 700 10px/1 sans-serif;
    pointer-events: none;
}

.mbe-save-state {
    color: var(--pv-green, #34d399);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.mbe-save-state--dirty {
    color: var(--pv-amber, #fbbf24);
}

.mbe-btn--dirty {
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35);
}

.mbe-toolbar {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.mbe-row {
    flex-wrap: nowrap;
    min-width: max-content;
}

@media (max-width: 900px) {
    .mbe-toolbar {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        max-width: none;
        transform: none;
    }

    .mbe-name {
        max-width: 180px;
    }
}

@media print {
    .mbe-text-overridden::before,
    .mbe-on [data-mbe-text-editable="true"]:hover::after {
        display: none !important;
    }
}

/* MODO DISEÑO v5: herramienta vertical + inspector de propiedades */
.mbe-toolbar {
    left: 16px;
    right: auto;
    top: 96px;
    bottom: auto;
    width: 122px;
    max-width: 122px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overflow-x: hidden;
    transform: none;
    padding: 8px;
    overflow: visible;
}

.mbe-toolbar > .mbe-row:first-child {
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

/* Paleta compacta: nunca requiere scroll; aprovecha el eje más largo. */
.mbe-toolbar > .mbe-row:first-child {
    display: grid;
    grid-template-columns: repeat(2, 46px);
    gap: 6px;
    min-width: 0;
}

.mbe-toolbar > .mbe-row:first-child .mbe-tb-title,
.mbe-toolbar > .mbe-row:first-child .mbe-sep,
.mbe-toolbar > .mbe-row:first-child span[style] {
    display: none;
}

.mbe-toolbar > .mbe-row:first-child .mbe-btn,
.mbe-toolbar > .mbe-row:first-child .mbe-tool-drag,
.mbe-toolbar > .mbe-row:first-child .mbe-save-state,
.mbe-toolbar > .mbe-row:first-child .mbe-zoom-label {
    width: 46px;
    min-width: 46px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    text-align: center !important;
}

.mbe-toolbar > .mbe-row:first-child .mbe-save-state {
    grid-column: span 2;
    width: 98px;
    font-size: 10px;
    line-height: 1.1;
}

@media (min-aspect-ratio: 1/1) {
    .mbe-toolbar {
        width: auto;
        max-width: calc(100vw - 16px);
        max-height: none;
    }

    .mbe-toolbar > .mbe-row:first-child {
        grid-template-columns: repeat(10, 42px);
    }

    .mbe-toolbar > .mbe-row:first-child .mbe-btn,
    .mbe-toolbar > .mbe-row:first-child .mbe-tool-drag,
    .mbe-toolbar > .mbe-row:first-child .mbe-zoom-label {
        width: 42px;
        min-width: 42px;
        height: 38px;
        min-height: 38px;
    }

    .mbe-toolbar > .mbe-row:first-child .mbe-save-state {
        grid-column: span 2;
        width: 90px;
    }
}

.mbe-toolbar > .mbe-row:first-child .mbe-sep,
.mbe-toolbar > .mbe-row:first-child span[style] {
    width: 100%;
    height: 1px;
    min-height: 1px;
}

.mbe-toolbar > .mbe-row:first-child .mbe-btn,
.mbe-toolbar > .mbe-row:first-child .mbe-save-state {
    width: 100%;
    text-align: left;
}

.mbe-tool-drag {
    display: grid;
    place-items: center;
    width: 100%;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--pv-text-muted, #94a3b8);
    cursor: grab;
}

.mbe-tool-drag:active { cursor: grabbing; }

.mbe-tool-icon {
    display: grid;
    place-items: center;
    min-height: 34px;
    text-align: center !important;
}

.mbe-tool-icon .material-symbols-outlined,
.mbe-tool-drag .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
}

.mbe-toolbar > .mbe-row--ctx {
    position: fixed;
    top: 96px;
    right: 16px;
    left: auto;
    width: min(330px, calc(100vw - 170px));
    max-height: calc(100vh - 112px);
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--pv-card-border, #334155);
    border-radius: 12px;
    background: var(--pv-card-surface-solid, #121828);
    box-shadow: var(--pv-elevation, 0 12px 40px rgba(0, 0, 0, .5));
    z-index: 1400;
    flex-wrap: wrap;
    min-width: 0;
}

/* El inspector no es hijo de la barra: evita que se recorte al arrastrarla. */
.mbe-props-panel {
    position: fixed;
    top: 96px;
    right: 16px;
    z-index: 1400;
    width: min(330px, calc(100vw - 170px));
    max-height: none !important;
    overflow: visible;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--pv-card-border, #334155);
    border-radius: 12px;
    background: var(--pv-card-surface-solid, #121828);
    box-shadow: var(--pv-elevation, 0 12px 40px rgba(0, 0, 0, .5));
}

.mbe-props-panel .mbe-name,
.mbe-props-panel #mbe-ctx {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.mbe-props-panel .mbe-sep { width: 100%; height: 1px; }

/* Inspector compacto: las propiedades aprovechan el ancho antes de crear filas. */
.mbe-props-panel {
    padding: 8px 12px;
}

.mbe-props-panel .mbe-name {
    margin: 0;
}

.mbe-props-panel #mbe-ctx {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 5px;
    overflow: visible;
    padding-bottom: 2px;
}

.mbe-props-panel .mbe-sep {
    display: none;
}

.mbe-props-panel .mbe-btn {
    min-height: 34px;
    width: 100%;
    text-align: left;
    white-space: nowrap;
}

.mbe-props-panel .mbe-select,
.mbe-props-panel .mbe-color {
    width: 100%;
    max-width: none;
}

.mbe-props-drag {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--pv-text-muted, #94a3b8);
    cursor: grab;
}

.mbe-props-drag:active { cursor: grabbing; }

.mbe-props-title {
    flex: 1;
    color: var(--pv-text-primary, #f8fafc);
    font-size: 12px;
    font-weight: 700;
}

.mbe-props-resize {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 45%, var(--pv-text-muted, #94a3b8) 46% 54%, transparent 55%);
}

.mbe-toolbar > .mbe-row--ctx .mbe-name {
    width: 100%;
    max-width: none;
    margin-bottom: 4px;
}

.mbe-toolbar > .mbe-row--ctx #mbe-ctx {
    width: 100%;
    min-width: 0;
}

.mbe-toolbar > .mbe-row--ctx .mbe-sep {
    width: 100%;
    height: 1px;
}

@media (max-width: 900px) {
    .mbe-toolbar { left: 8px; top: auto; bottom: 8px; width: auto; max-width: calc(100vw - 16px); }
    .mbe-toolbar > .mbe-row:first-child { flex-direction: row; }
    .mbe-toolbar > .mbe-row--ctx { top: auto; bottom: 76px; right: 8px; width: min(330px, calc(100vw - 16px)); }
    .mbe-props-panel { top: auto; bottom: 76px; right: 8px; width: min(330px, calc(100vw - 16px)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODO DISEÑO v6 — espacio de trabajo aislado tipo Photoshop/Illustrator.
   Las clases nuevas no reutilizan la antigua `.mbe-toolbar`; así las reglas
   históricas no pueden volver a convertir botones en filas de ancho completo.
   ═══════════════════════════════════════════════════════════════════════════ */

.mbe-workspace {
    position: fixed;
    inset: 0;
    z-index: 1200;
    color: var(--pv-text-primary, #f8fafc);
    font-family: Inter, "DM Sans", Arial, sans-serif;
    pointer-events: none;
}

.mbe-workspace[hidden] {
    display: none !important;
}

.mbe-workspace > * {
    pointer-events: auto;
}

.mbe-workspace .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

/* Paleta: siempre estrecha, iconográfica y vertical. */
.mbe-toolbox {
    position: fixed;
    z-index: 120;
    box-sizing: border-box;
    width: 48px;
    padding: 4px;
    border: 1px solid var(--pv-card-border, rgba(56, 73, 107, .58));
    border-radius: 9px;
    background: var(--pv-card-surface-solid, #121828);
    box-shadow: var(--pv-elevation, 0 10px 28px rgba(0, 0, 0, .38));
    backdrop-filter: var(--pv-glass-blur, blur(12px));
    -webkit-backdrop-filter: var(--pv-glass-blur, blur(12px));
    user-select: none;
}

.mbe-toolbox-head,
.mbe-toolbox-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
}

.mbe-toolbox-head {
    margin-bottom: 3px;
}

.mbe-chrome-grip,
.mbe-tool-button,
.mbe-chrome-button,
.mbe-context-button,
.mbe-panel-tab,
.mbe-panel-head-button,
.mbe-layer-icon {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid transparent;
    color: var(--pv-text-secondary, #cbd5e1);
    background: transparent;
    cursor: pointer;
    transition: color var(--pv-duration-fast, .12s) ease, background var(--pv-duration-fast, .12s) ease, border-color var(--pv-duration-fast, .12s) ease;
}

.mbe-chrome-grip {
    width: 38px;
    height: 18px;
    border-radius: 5px;
    color: var(--pv-text-muted, #94a3b8);
    cursor: grab;
}

.mbe-chrome-grip:active,
.mbe-toolbox.is-dragging .mbe-chrome-grip,
.mbe-sidepanel.is-dragging .mbe-chrome-grip {
    cursor: grabbing;
}

.mbe-tool-button {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 6px;
}

.mbe-tool-button:hover,
.mbe-chrome-button:hover,
.mbe-context-button:hover,
.mbe-panel-tab:hover,
.mbe-panel-head-button:hover,
.mbe-layer-icon:hover,
.mbe-chrome-grip:hover {
    border-color: var(--pv-card-border, rgba(56, 73, 107, .65));
    color: var(--pv-text-primary, #f8fafc);
    background: rgba(59, 130, 246, .12);
}

.mbe-tool-button:focus-visible,
.mbe-chrome-button:focus-visible,
.mbe-context-button:focus-visible,
.mbe-panel-tab:focus-visible,
.mbe-panel-head-button:focus-visible,
.mbe-layer-icon:focus-visible {
    outline: 2px solid var(--pv-accent-cyan, #22d3ee);
    outline-offset: 1px;
}

.mbe-tool-button:disabled,
.mbe-chrome-button:disabled {
    opacity: .35;
    cursor: default;
}

.mbe-tool-divider {
    width: 24px;
    height: 1px;
    margin: 3px auto;
    background: var(--pv-card-border, rgba(56, 73, 107, .58));
}

.mbe-tool-count {
    position: absolute;
    right: -3px;
    top: -4px;
    min-width: 13px;
    height: 13px;
    padding: 0 2px;
    border-radius: 7px;
    color: #fff;
    background: var(--pv-accent, #3b82f6);
    font: 700 9px/13px Inter, sans-serif;
}

/* Barra superior: sólo contexto y comandos compactos; no hay filas apiladas. */
.mbe-optionsbar {
    position: fixed;
    z-index: 110;
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 112px);
    min-height: 38px;
    padding: 3px 5px;
    transform: translateX(-50%);
    border: 1px solid var(--pv-card-border, rgba(56, 73, 107, .58));
    border-radius: 9px;
    background: var(--pv-card-surface-solid, #121828);
    box-shadow: var(--pv-elevation, 0 8px 24px rgba(0, 0, 0, .34));
    backdrop-filter: var(--pv-glass-blur, blur(12px));
    -webkit-backdrop-filter: var(--pv-glass-blur, blur(12px));
    white-space: nowrap;
}

.mbe-options-selection {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 180px;
    padding: 0 5px;
    color: var(--pv-text-secondary, #cbd5e1);
    font-size: 11px;
    font-weight: 700;
}

.mbe-options-selection > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mbe-options-context,
.mbe-options-global {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.mbe-options-context:empty {
    display: none;
}

.mbe-chrome-button,
.mbe-context-button {
    width: 30px;
    height: 30px;
    border-radius: 6px;
}

.mbe-options-divider {
    width: 1px;
    height: 18px;
    margin: 0 2px;
    background: var(--pv-card-border, rgba(56, 73, 107, .65));
}

.mbe-zoom-label {
    min-width: 35px;
    color: var(--pv-text-secondary, #cbd5e1);
    font: 700 10px/1 Inter, sans-serif;
    text-align: center;
}

.mbe-save-state {
    display: grid;
    place-items: center;
    width: 18px;
    height: 24px;
    color: var(--pv-green, #34d399);
    font: 800 13px/1 Inter, sans-serif;
}

.mbe-save-state--dirty {
    color: var(--pv-amber, #fbbf24);
}

.mbe-chrome-button--primary {
    color: #fff;
    border-color: var(--pv-accent, #3b82f6);
    background: var(--pv-accent, #3b82f6);
}

.mbe-chrome-button--primary:hover {
    border-color: var(--pv-accent-hover, #2563eb);
    background: var(--pv-accent-hover, #2563eb);
}

.mbe-chrome-button--danger,
.mbe-context-button--danger {
    color: var(--pv-red, #f87171);
}

/* Panel derecho: Capas y ajustes son pestañas del mismo contenedor. */
.mbe-sidepanel {
    position: fixed;
    z-index: 115;
    display: flex;
    min-height: 220px;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid var(--pv-card-border, rgba(56, 73, 107, .58));
    border-radius: 10px;
    color: var(--pv-text-primary, #f8fafc);
    background: var(--pv-card-surface-solid, #121828);
    box-shadow: var(--pv-elevation, 0 10px 30px rgba(0, 0, 0, .4));
    backdrop-filter: var(--pv-glass-blur, blur(12px));
    -webkit-backdrop-filter: var(--pv-glass-blur, blur(12px));
    overflow: hidden;
}

.mbe-sidepanel-head {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 3px 5px;
    border-bottom: 1px solid var(--pv-card-border, rgba(56, 73, 107, .45));
}

.mbe-sidepanel-head .mbe-chrome-grip,
.mbe-panel-tab,
.mbe-panel-head-button {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    border-radius: 6px;
}

.mbe-panel-tab.is-active {
    color: #fff;
    border-color: var(--pv-accent, #3b82f6);
    background: rgba(59, 130, 246, .25);
}

.mbe-panel-head-spacer {
    flex: 1 1 auto;
    min-width: 0;
}

.mbe-sidepanel-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.mbe-layers-panel,
.mbe-properties-panel {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    padding: 7px;
    overflow: auto;
    scrollbar-color: var(--pv-card-border, #475569) transparent;
    scrollbar-width: thin;
}

.mbe-layers-panel[hidden],
.mbe-properties-panel[hidden] {
    display: none !important;
}

.mbe-sidepanel-resize {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 13px;
    height: 13px;
    cursor: ew-resize;
    background: linear-gradient(135deg, transparent 38%, var(--pv-text-muted, #94a3b8) 40% 48%, transparent 50%);
}

.mbe-sidepanel[data-dock="left"] .mbe-sidepanel-resize {
    right: 0;
    left: auto;
}

.mbe-sidepanel.is-collapsed {
    min-height: 38px;
}

.mbe-sidepanel.is-collapsed .mbe-sidepanel-body,
.mbe-sidepanel.is-collapsed .mbe-sidepanel-head .mbe-chrome-grip,
.mbe-sidepanel.is-collapsed .mbe-panel-tab,
.mbe-sidepanel.is-collapsed [data-mbe-action="workspace-reset"],
.mbe-sidepanel.is-collapsed .mbe-panel-head-spacer,
.mbe-sidepanel.is-collapsed .mbe-sidepanel-resize {
    display: none;
}

.mbe-sidepanel.is-collapsed .mbe-sidepanel-head {
    justify-content: center;
    border-bottom: 0;
}

.mbe-selection-heading {
    min-width: 0;
    margin: 1px 2px 7px;
    overflow: hidden;
    color: var(--pv-accent-cyan, #60a5fa);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mbe-ctx {
    display: grid;
    gap: 7px;
}

.mbe-property-group {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 6px;
    border: 1px solid var(--pv-card-border, rgba(56, 73, 107, .38));
    border-radius: 7px;
    background: rgba(15, 23, 42, .26);
}

.mbe-property-label {
    color: var(--pv-text-muted, #94a3b8);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.mbe-property-controls {
    display: grid;
    grid-template-columns: repeat(6, minmax(28px, 1fr));
    gap: 4px;
    align-items: center;
}

.mbe-property-controls .mbe-context-button {
    width: 100%;
    min-width: 28px;
    height: 29px;
}

.mbe-context-button.mbe-btn--on {
    color: #fff;
    border-color: var(--pv-accent, #3b82f6);
    background: var(--pv-accent, #3b82f6);
}

.mbe-context-button--wide {
    display: inline-flex !important;
    grid-column: span 3;
    width: auto !important;
    gap: 4px;
    padding: 0 7px;
    font: 700 10px/1 Inter, sans-serif;
}

.mbe-workspace .mbe-select,
.mbe-workspace .mbe-color {
    box-sizing: border-box;
    height: 29px;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--pv-card-border, #475569);
    border-radius: 6px;
    color: var(--pv-text-primary, #e2e8f0);
    background: rgba(30, 41, 59, .9);
}

.mbe-font-select {
    grid-column: span 3;
    width: 100%;
    padding: 0 5px;
    font-size: 10px;
}

.mbe-workspace .mbe-color {
    grid-column: span 1;
    width: 100%;
    padding: 2px;
}

.mbe-panel-empty {
    display: grid;
    place-items: center;
    min-height: 100px;
    gap: 7px;
    padding: 16px;
    color: var(--pv-text-muted, #94a3b8);
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
}

.mbe-panel-empty .material-symbols-outlined {
    color: var(--pv-accent-cyan, #60a5fa);
    font-size: 23px;
}

/* Capas */
.mbe-layers-summary {
    margin: 1px 3px 6px;
    color: var(--pv-text-muted, #94a3b8);
    font-size: 10px;
    font-weight: 700;
}

.mbe-layer-row,
.mbe-layer-group-head {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 30px;
    border-radius: 6px;
}

.mbe-layer-row:hover,
.mbe-layer-group-head:hover {
    background: rgba(59, 130, 246, .10);
}

.mbe-layer-row.is-selected {
    background: rgba(59, 130, 246, .22);
}

.mbe-layer-row.is-hidden {
    opacity: .55;
}

.mbe-layer-row.is-nested {
    margin-left: 12px;
}

.mbe-layer-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 5px;
}

.mbe-layer-icon .material-symbols-outlined,
.mbe-layer-name .material-symbols-outlined {
    font-size: 16px;
}

.mbe-layer-name {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    gap: 5px;
    padding: 0 3px;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font: 600 10px/1 Inter, sans-serif;
    text-align: left;
}

.mbe-layer-name > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mbe-layer-group {
    margin: 4px 0;
    padding: 2px;
    border: 1px solid var(--pv-card-border, rgba(56, 73, 107, .35));
    border-radius: 7px;
}

.mbe-layer-group-head {
    gap: 5px;
    padding-left: 4px;
    color: var(--pv-text-secondary, #cbd5e1);
    font-size: 10px;
    font-weight: 700;
}

.mbe-layer-group-head > .mbe-layer-icon {
    margin-left: auto;
}

/* Lienzo: conserva controles existentes, pero añade estado bloqueado. */
.mbe-on .mbe-locked {
    cursor: not-allowed !important;
}

.mbe-on .mbe-locked:hover {
    outline-color: var(--pv-amber, #fbbf24);
}

.mbe-menu {
    z-index: 1300;
    max-width: min(300px, calc(100vw - 16px));
    color: var(--pv-text-primary, #f8fafc);
    background: var(--pv-card-surface-solid, #121828);
    border-color: var(--pv-card-border, #334155);
}

/* Un panel acoplado reserva lienzo: no tapa el marbete mientras se edita. */
#mb-content.mbe-workspace-active .mb-preview-area {
    padding-left: calc(24px + var(--mbe-workspace-left, 0px));
    padding-right: calc(24px + var(--mbe-workspace-right, 0px));
}

@media (max-height: 650px) and (min-width: 700px) {
    .mbe-toolbox {
        width: 92px;
    }

    .mbe-toolbox-head {
        grid-template-columns: repeat(2, 38px);
    }

    .mbe-toolbox-stack {
        grid-template-columns: repeat(2, 38px);
    }

    .mbe-tool-divider {
        grid-column: span 2;
    }
}

@media (max-width: 840px) {
    .mbe-optionsbar {
        max-width: calc(100vw - 24px);
    }

    .mbe-options-selection {
        display: none;
    }

    .mbe-options-context {
        display: none;
    }

    .mbe-sidepanel {
        max-width: min(330px, calc(100vw - 76px));
    }
}

@media (max-width: 560px) {
    .mbe-optionsbar {
        gap: 1px;
        padding: 2px 3px;
    }

    .mbe-options-global .mbe-chrome-button--danger,
    .mbe-options-global #mbe-hidden-btn,
    .mbe-options-global .mbe-save-state {
        display: none !important;
    }

    .mbe-sidepanel {
        max-width: calc(100vw - 68px);
    }
}

@media print {
    .mbe-workspace,
    #mbe-selbox,
    .mbe-guide,
    .mbe-guide-label,
    .mbe-size-badge,
    .mbe-menu {
        display: none !important;
    }
}