/* ============================================================================
   Monteber Blazor — apariencia de los componentes del ecosistema.

   UN archivo para la cuadrícula, los editores, las pantallas de captura, los
   dos diseñadores y las barras. Se declara en la página principal del proyecto
   anfitrión; NUNCA se inyecta desde JavaScript.

       <link rel="stylesheet"
             href="_content/Monteber.Blazor.Theme/monteber-blazor.css" />

   ── Dos espacios de nombres, y la diferencia importa ───────────────────────

   ·  Clases  «mbx-*»      Son de los componentes y de nadie más. Ninguna
                           aplicación las declara, así que el portal no puede
                           repintar por accidente un pedazo de la cuadrícula ni
                           al revés. Si algún día una aplicación necesita
                           ajustar algo, que lo haga contra estas clases a
                           propósito, no por coincidencia de nombres.

   ·  Tokens  «--mb-t1-*»  Son el CONTRATO con el proyecto padre: de ahí salen
                           los colores, para que la cuadrícula se vea de la casa
                           en MonteberWeb, en MonteberOne y en MonteberApp sin
                           tocar una línea. Conservan su nombre original a
                           propósito: renombrarlos habría roto la herencia.

   Por eso esta hoja no define ni un color literal: todo sale de un token con
   respaldo, «var(--mb-t1-bg, #fff)», y funciona igual si el anfitrión no
   declara ninguno.

   ── Por qué cada clase aparece DOS veces ────────────────────────────────────

   «.mbx-grid-toolbar.mbx-grid-toolbar» casa exactamente los mismos elementos
   que «.mbx-grid-toolbar»: lo único que cambia es que cuenta como dos clases
   en vez de una.

   Hace falta. El tema del portal MonteberWeb trae este reset:

       .mb-t1-shell *, .mb-t1-shell *::before, .mb-t1-shell *::after {
           box-sizing: border-box; margin: 0; padding: 0;
       }

   Una clase más el universal: especificidad 0,1,0, la MISMA que una regla
   nuestra de una sola clase. En un empate gana la que se cargue después, y el
   tema se declara tres veces y una de ellas va después de esta hoja. Resultado:
   la cuadrícula perdía TODOS sus márgenes y rellenos dentro del portal, y sólo
   ahí. Costó una tarde encontrarlo, porque cualquier prueba hecha fuera de
   «.mb-t1-shell» se veía perfecta.

   El prefijo «mbx» evita que alguien nos pise por coincidencia de NOMBRE; esto
   evita que nos pise un reset por «*», que es otra cosa. Con 0,2,0 ninguna
   regla de una sola clase del anfitrión nos alcanza, y una que de verdad quiera
   ajustar algo sigue pudiendo: le basta ser igual de específica y ir después.

   Lo verifica una prueba, «Ninguna_regla_pierde_contra_un_reset_del_anfitrion»,
   para que un selector nuevo no entre sin la duplicación.

   ── Orden de carga ──────────────────────────────────────────────────────────

   Va DESPUÉS del tema de la aplicación. Esta hoja no declara «:root», así que
   no puede pisar la paleta; ponerla al final sólo asegura que sus propias
   clases ganen si algo más las toca.

   ── Mantenimiento ───────────────────────────────────────────────────────────

   Este archivo se edita a mano. Está dividido en seis secciones que
   corresponden a las bibliotecas del ecosistema; respeta la sección al agregar
   reglas.
   ============================================================================ */



/* ══════════════════════════════════════════════════════════════════════════
   BASE DEFENSIVA · los elementos NATIVOS de dentro de un componente
   ══════════════════════════════════════════════════════════════════════════

   La especificidad sólo protege lo que UNO DECLARA. Lo que dejas sin declarar
   lo rellena el anfitrión, por muy alta que sea tu especificidad, porque no hay
   nada con qué ganar la puja.

   El caso real: MudBlazor trae «button { justify-content: center }». Nuestras
   reglas del menú contextual nunca declaraban «justify-content», así que los
   renglones salían centrados dentro del portal y alineados a la izquierda
   fuera de él. Ninguna cantidad de clases duplicadas lo habría arreglado.

   Esta base fija esos huecos para los elementos nativos que usan los
   componentes. La especificidad es de UNA clase más un elemento (0,1,1) a
   propósito: le gana a un «.host *» del anfitrión (0,1,0) y pierde contra
   nuestras propias clases duplicadas (0,2,0), que es exactamente el orden que
   se quiere —protege por debajo, sin estorbar por arriba—.
   ══════════════════════════════════════════════════════════════════════════ */

.mbx-ed button,   .mbx-cal button,  .mbx-grid button,  .mbx-gd button,  .mbx-bar button,  .mbx-tabs button,
.mbx-dl button,   .mbx-ld button,
.mbx-ed input,    .mbx-cal input,   .mbx-grid input,   .mbx-gd input,   .mbx-bar input,
.mbx-dl input,    .mbx-ld input,
.mbx-ed select,   .mbx-grid select, .mbx-gd select,   .mbx-dl select,   .mbx-ld select,
.mbx-ed textarea, .mbx-grid textarea, .mbx-gd textarea, .mbx-dl textarea, .mbx-ld textarea {
    box-sizing: border-box;
    margin: 0;
    font-family: inherit;
}

/* Un botón centra su contenido; los que son renglón de lista lo dicen aparte
   (ver .mbx-grid-menu-item). */
.mbx-ed button, .mbx-cal button, .mbx-grid button, .mbx-gd button, .mbx-bar button, .mbx-tabs button,
.mbx-dl button, .mbx-ld button {
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN 1 · EDITORES  (Monteber.Editors)  clases mbx-ed-*, mbx-cal-*, mbx-tab-*
   ══════════════════════════════════════════════════════════════════════════ */

/* ================================================================
   Monteber.Editors — hoja de estilos de los editores de captura.

   Prefijo mbx-ed- (convención MonteberThemeV1).

   REGLA DE COLOR: aquí no se inventa ni un color. Todo sale de los
   tokens --mb-t1-* que declara MonteberThemeV1.Colores.css, y el
   respaldo de cada var() es EXACTAMENTE el valor que ese archivo le
   da. Así los editores se ven igual con el tema cargado que sin él, y
   si una empresa personaliza su paleta (MonteberWebColors.css en
   PaginasDinamicas) los editores la siguen sin tocar este archivo.

   Los tokens usados existen tanto en MonteberOne como en el portal
   MonteberWeb; los exclusivos de una de las dos apps (--mb-t1-sb-*,
   --mb-t1-blue-*, --mb-t1-pl-*) no se usan a propósito.

   Densidad: se toma de los tokens de formulario del tema
   (--mb-t1-field-font, --mb-t1-field-pad-*, --mb-t1-label-font,
   --mb-t1-field-gap), para que los editores respiren igual que el
   resto de los formularios de la aplicación.

   NO redefine :root, para no pisar la paleta de la aplicación.

   Se enlaza una sola vez en el host:
       <link rel="stylesheet" href="_content/Monteber.Blazor.Theme/monteber-blazor.css" />
   ================================================================ */

/* ── Contenedor del editor ──────────────────────────────────── */

.mbx-ed.mbx-ed {
    display: flex;
    flex-direction: column;
    gap: var(--mb-t1-field-gap, .15rem);
    font-size: var(--mb-t1-field-font, .8rem);
    color: var(--mb-t1-text, #1F2937);
    min-width: 0;
}

.mbx-ed.mbx-ed *, .mbx-ed.mbx-ed *::before, .mbx-ed.mbx-ed *::after { box-sizing: border-box; }

/* Etiqueta a la izquierda: rejilla de dos columnas. Los mensajes se
   alinean bajo el control, no bajo la etiqueta. */
.mbx-ed--label-left.mbx-ed--label-left {
    display: grid;
    grid-template-columns: var(--mb-t1-ed-label-width, 9rem) minmax(0, 1fr);
    align-items: center;
    column-gap: .6rem;
    row-gap: .2rem;
}

.mbx-ed--label-left.mbx-ed--label-left > .mbx-ed-message { grid-column: 2; }

/* ── Etiqueta ───────────────────────────────────────────────── */

.mbx-ed-label.mbx-ed-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--mb-t1-label-font, .72rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--mb-t1-text-muted, #64748B);
}

/* Mismo rojo que .mbx-required del tema, para que el asterisco de un
   editor y el de un formulario escrito a mano no se vean distintos. */
.mbx-ed-required.mbx-ed-required {
    color: #ef4444;
    margin-left: .15rem;
}

.mbx-ed--disabled.mbx-ed--disabled .mbx-ed-label { color: var(--mb-t1-text-faint, #94A3B8); }

/* ── Caja del control ───────────────────────────────────────── */

.mbx-ed-field.mbx-ed-field {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    /* Ancla de los desplegables (MbLookUpEdit) que se dibujan bajo el campo. */
    position: relative;
    padding: var(--mb-t1-field-pad-y, .28rem) var(--mb-t1-field-pad-x, .5rem);
    border: 1.5px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: var(--mb-t1-surface, #FFFFFF);
    transition: border-color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                box-shadow var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-ed-field.mbx-ed-field:focus-within {
    border-color: var(--mb-t1-primary, #2563EB);
    box-shadow: 0 0 0 3px var(--mb-t1-primary-ring, #BFDBFE);
}

/* Los editores que traen su propio recuadro (casillas, grupos,
   deslizador) no llevan caja. */
.mbx-ed-plain.mbx-ed-plain {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

/* ── Control nativo ─────────────────────────────────────────── */

.mbx-ed-input.mbx-ed-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.45;
    padding: 0;
}

.mbx-ed-input.mbx-ed-input::placeholder { color: var(--mb-t1-text-faint, #94A3B8); }

.mbx-ed-input.mbx-ed-input:disabled { color: var(--mb-t1-text-faint, #94A3B8); cursor: not-allowed; }

textarea.mbx-ed-input.mbx-ed-input {
    resize: vertical;
    line-height: 1.35;
}

select.mbx-ed-input.mbx-ed-input {
    cursor: pointer;
    /* Sin esto, Safari y Chrome le ponen su propio fondo y bordes. */
    appearance: none;
    /* La flecha va en un data URI, que no admite var(): es el gris de
       --mb-t1-text-muted (#64748B) escrito a mano. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748B' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .1rem center;
    padding-right: 1rem;
}

.mbx-ed-input--number.mbx-ed-input--number { text-align: right; }

/* Quita las flechitas del campo numérico cuando así se pidió. */
.mbx-ed-input--no-spin.mbx-ed-input--no-spin { appearance: textfield; -moz-appearance: textfield; }
.mbx-ed-input--no-spin.mbx-ed-input--no-spin::-webkit-outer-spin-button,
.mbx-ed-input--no-spin.mbx-ed-input--no-spin::-webkit-inner-spin-button { appearance: none; margin: 0; }

.mbx-ed-input--color.mbx-ed-input--color {
    flex: 0 0 auto;
    width: 34px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: 5px;
    cursor: pointer;
    background: none;
}

.mbx-ed-colorhex.mbx-ed-colorhex {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .76rem;
    color: var(--mb-t1-text-muted, #64748B);
}

/* Lista siempre abierta. */
.mbx-ed-listbox.mbx-ed-listbox {
    height: auto;
    padding: .2rem;
    border: 1.5px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: var(--mb-t1-surface, #FFFFFF);
    background-image: none;
    appearance: auto;
    width: 100%;
}

.mbx-ed-listbox.mbx-ed-listbox:focus {
    outline: none;
    border-color: var(--mb-t1-primary, #2563EB);
    box-shadow: 0 0 0 3px var(--mb-t1-primary-ring, #BFDBFE);
}

/* ── Adornos y botones de la caja ───────────────────────────── */

.mbx-ed-affix.mbx-ed-affix {
    flex: 0 0 auto;
    color: var(--mb-t1-text-muted, #64748B);
    white-space: nowrap;
}

.mbx-ed-clear.mbx-ed-clear,
.mbx-ed-icon-btn.mbx-ed-icon-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mb-t1-text-faint, #94A3B8);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-ed-clear.mbx-ed-clear:hover,
.mbx-ed-icon-btn.mbx-ed-icon-btn:hover {
    background: var(--mb-t1-border-faint, #F4F7FB);
    color: var(--mb-t1-text, #1F2937);
}

/* Botón de acción del MbButtonEdit: pegado al borde derecho de la caja. */
.mbx-ed-action.mbx-ed-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    align-self: stretch;
    margin: calc(var(--mb-t1-field-pad-y, .28rem) * -1) calc(var(--mb-t1-field-pad-x, .5rem) * -1)
            calc(var(--mb-t1-field-pad-y, .28rem) * -1) 0;
    padding: 0 .6rem;
    border: 0;
    border-left: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: 0 calc(var(--mb-t1-radius-sm, 10px) - 2px) calc(var(--mb-t1-radius-sm, 10px) - 2px) 0;
    background: transparent;
    color: var(--mb-t1-primary, #2563EB);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-ed-action.mbx-ed-action:hover:not(:disabled) { background: var(--mb-t1-primary-light, #EFF6FF); }
.mbx-ed-action.mbx-ed-action:active:not(:disabled) { color: var(--mb-t1-primary-dark, #1D4ED8); }
.mbx-ed-action.mbx-ed-action:disabled { opacity: .45; cursor: default; }

.mbx-ed-counter.mbx-ed-counter {
    flex: 0 0 auto;
    align-self: flex-end;
    font-size: .72rem;
    color: var(--mb-t1-text-faint, #94A3B8);
}

/* Lupa de la caja de búsqueda. */
.mbx-ed-field--search.mbx-ed-field--search::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: var(--mb-t1-text-faint, #94A3B8);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Mensajes ───────────────────────────────────────────────── */

.mbx-ed-message.mbx-ed-message {
    font-size: .72rem;
    line-height: 1.3;
}

.mbx-ed-message--hint.mbx-ed-message--hint { color: var(--mb-t1-text-faint, #94A3B8); }
.mbx-ed-message--error.mbx-ed-message--error { color: var(--mb-t1-danger, #DC2626); }

/* ── Estados ────────────────────────────────────────────────── */

.mbx-ed--invalid.mbx-ed--invalid .mbx-ed-field,
.mbx-ed--invalid.mbx-ed--invalid .mbx-ed-listbox {
    border-color: var(--mb-t1-danger, #DC2626);
}

.mbx-ed--invalid.mbx-ed--invalid .mbx-ed-field:focus-within,
.mbx-ed--invalid.mbx-ed--invalid .mbx-ed-listbox:focus {
    box-shadow: 0 0 0 3px var(--mb-t1-danger-border, #FECACA);
}

/* Deshabilitado y sólo lectura se distinguen a propósito: el primero
   dice "no se puede tocar" y el segundo "se ve, pero no se cambia". */
.mbx-ed--disabled.mbx-ed--disabled .mbx-ed-field,
.mbx-ed--disabled.mbx-ed--disabled .mbx-ed-listbox {
    background: var(--mb-t1-border-faint, #F4F7FB);
    color: var(--mb-t1-text-faint, #94A3B8);
    cursor: not-allowed;
}

.mbx-ed--readonly.mbx-ed--readonly .mbx-ed-field { background: var(--mb-t1-bg, #F4F8FD); }

/* ── Tamaños ────────────────────────────────────────────────── */

.mbx-ed--sm.mbx-ed--sm { font-size: .74rem; }
.mbx-ed--sm.mbx-ed--sm .mbx-ed-field { padding: .15rem .4rem; }
.mbx-ed--sm.mbx-ed--sm .mbx-ed-label { font-size: .68rem; }

.mbx-ed--lg.mbx-ed--lg { font-size: .9rem; }
.mbx-ed--lg.mbx-ed--lg .mbx-ed-field { padding: .45rem .7rem; }
.mbx-ed--lg.mbx-ed--lg .mbx-ed-label { font-size: .8rem; }

/* ── Opciones: casillas, radios y grupos ────────────────────── */

.mbx-ed-group.mbx-ed-group {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.mbx-ed-group--inline.mbx-ed-group--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .25rem 1rem;
}

.mbx-ed-option.mbx-ed-option {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    line-height: 1.3;
}

.mbx-ed-option.mbx-ed-option.is-disabled { color: var(--mb-t1-text-faint, #94A3B8); cursor: default; }

.mbx-ed-option-text.mbx-ed-option-text { user-select: none; }

.mbx-ed-check.mbx-ed-check,
.mbx-ed-radio.mbx-ed-radio {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--mb-t1-primary, #2563EB);
    cursor: inherit;
}

.mbx-ed-check.mbx-ed-check:focus-visible,
.mbx-ed-radio.mbx-ed-radio:focus-visible {
    outline: 2px solid var(--mb-t1-primary, #2563EB);
    outline-offset: 2px;
}

/* ── Interruptor ────────────────────────────────────────────── */

.mbx-ed-option--switch.mbx-ed-option--switch { gap: .5rem; }

/* La casilla real se conserva (teclado y lectores de pantalla la
   necesitan) y se esconde debajo del dibujo del interruptor. */
.mbx-ed-switch-input.mbx-ed-switch-input {
    position: absolute;
    width: 34px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.mbx-ed-switch.mbx-ed-switch {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--mb-t1-border, #E2E8F0);
    transition: background var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-ed-switch.mbx-ed-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mb-t1-surface, #FFFFFF);
    box-shadow: var(--mb-t1-shadow, 0 2px 8px rgba(15,23,42,.05));
    transition: transform var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-ed-switch-input.mbx-ed-switch-input:checked + .mbx-ed-switch { background: var(--mb-t1-primary, #2563EB); }
.mbx-ed-switch-input.mbx-ed-switch-input:checked + .mbx-ed-switch::after { transform: translateX(14px); }
.mbx-ed-switch-input.mbx-ed-switch-input:focus-visible + .mbx-ed-switch {
    box-shadow: 0 0 0 3px var(--mb-t1-primary-ring, #BFDBFE);
}

/* ── Deslizador ─────────────────────────────────────────────── */

.mbx-ed-slider.mbx-ed-slider {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
}

.mbx-ed-slider-input.mbx-ed-slider-input {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: var(--mb-t1-primary, #2563EB);
}

.mbx-ed-slider-value.mbx-ed-slider-value {
    flex: 0 0 auto;
    min-width: 2.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--mb-t1-text-muted, #64748B);
}

/* ── Calificación ───────────────────────────────────────────── */

.mbx-ed-rating.mbx-ed-rating { display: flex; align-items: center; gap: .1rem; }

.mbx-ed-star.mbx-ed-star {
    display: inline-flex;
    padding: .1rem;
    border: 0;
    background: transparent;
    color: var(--mb-t1-border, #E2E8F0);
    cursor: pointer;
    transition: color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)), transform .1s;
}

.mbx-ed-star.mbx-ed-star:hover:not(:disabled) { transform: scale(1.12); }
/* El ámbar de los avisos del tema: es el que ya se usa para destacar. */
.mbx-ed-star.mbx-ed-star.is-on { color: var(--mb-t1-warning-dot, #F59E0B); }
.mbx-ed-star.mbx-ed-star:disabled { cursor: default; }

/* ── Etiquetas (tags) ───────────────────────────────────────── */

.mbx-ed-field--tags.mbx-ed-field--tags {
    flex-wrap: wrap;
    gap: .25rem;
}

.mbx-ed-tag.mbx-ed-tag {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    max-width: 100%;
    padding: .1rem .2rem .1rem .45rem;
    border-radius: 999px;
    background: var(--mb-t1-primary-light, #EFF6FF);
    color: var(--mb-t1-primary, #2563EB);
    font-size: .75rem;
    font-weight: 600;
}

.mbx-ed-tag-text.mbx-ed-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mbx-ed-tag-remove.mbx-ed-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
}

.mbx-ed-tag-remove.mbx-ed-tag-remove:hover { background: var(--mb-t1-primary-ring, #BFDBFE); }

.mbx-ed-tag-input.mbx-ed-tag-input {
    flex: 1 1 6rem;
    min-width: 4rem;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.45;
}

/* ── Archivos ───────────────────────────────────────────────── */

.mbx-ed-file.mbx-ed-file { display: flex; align-items: center; gap: .5rem; min-width: 0; }

.mbx-ed-file-btn.mbx-ed-file-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: var(--mb-t1-field-pad-y, .28rem) var(--mb-t1-field-pad-x, .5rem);
    border: 1.5px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: var(--mb-t1-surface, #FFFFFF);
    color: var(--mb-t1-text-muted, #64748B);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                border-color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-ed-file-btn.mbx-ed-file-btn:hover:not(.is-disabled) {
    background: var(--mb-t1-primary-light, #EFF6FF);
    border-color: var(--mb-t1-primary-ring, #BFDBFE);
    color: var(--mb-t1-primary, #2563EB);
}

.mbx-ed-file-btn.mbx-ed-file-btn.is-disabled {
    background: var(--mb-t1-border-faint, #F4F7FB);
    color: var(--mb-t1-text-faint, #94A3B8);
    cursor: not-allowed;
}

/* El campo de archivo nativo no se puede peinar; se esconde y se usa la
   etiqueta como botón. Sigue siendo enfocable con teclado. */
.mbx-ed-file-input.mbx-ed-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.mbx-ed-file-input.mbx-ed-file-input:focus-visible + .mbx-ed-file-name,
.mbx-ed-file-btn.mbx-ed-file-btn:focus-within {
    outline: 2px solid var(--mb-t1-primary, #2563EB);
    outline-offset: 2px;
}

.mbx-ed-file-name.mbx-ed-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mb-t1-text-muted, #64748B);
}

/* ── Rango de fechas ────────────────────────────────────────── */

.mbx-ed-range.mbx-ed-range {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.mbx-ed-range.mbx-ed-range > .mbx-ed { flex: 1 1 0; min-width: 0; }



.mbx-ed--invalid.mbx-ed--invalid .mbx-ed-range .mbx-ed-field { border-color: var(--mb-t1-danger, #DC2626); }

.mbx-ed-range-sep.mbx-ed-range-sep {
    flex: 0 0 auto;
    color: var(--mb-t1-text-faint, #94A3B8);
}

/* ── Desplegable multicolumna (MbLookUpEdit) ────────────────── */

.mbx-ed-lookup.mbx-ed-lookup {
    position: absolute;
    top: calc(100% + 5px);
    left: -1.5px;
    z-index: 60;
    min-width: 100%;
    min-height: 5rem;
    max-width: 90vw;
    background: var(--mb-t1-surface, #FFFFFF);
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius-sm, 10px);
    box-shadow: var(--mb-t1-shadow-md, 0 10px 28px rgba(15,23,42,.08));
    /* overflow:auto es requisito de resize; juntos dan el desplegable que se
       estira arrastrando la esquina, sin una línea de JavaScript. */
    overflow: auto;
    resize: both;
}

.mbx-ed-lookup-table.mbx-ed-lookup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}

.mbx-ed-lookup-table.mbx-ed-lookup-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .3rem .5rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mb-t1-text-muted, #64748B);
    background: var(--mb-t1-border-faint, #F4F7FB);
    border-bottom: 1px solid var(--mb-t1-border, #E2E8F0);
}

.mbx-ed-lookup-table.mbx-ed-lookup-table td {
    padding: .28rem .5rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--mb-t1-border-faint, #F4F7FB);
}

.mbx-ed-lookup-table.mbx-ed-lookup-table tbody tr { cursor: pointer; }

.mbx-ed-lookup-table.mbx-ed-lookup-table tbody tr:hover td {
    background: var(--mb-t1-border-faint, #F4F7FB);
}

/* La fila resaltada con el teclado se ve distinta de la que está bajo el
   ratón: si no, no se sabe cuál elegiría Enter. */
.mbx-ed-lookup-table.mbx-ed-lookup-table tbody tr.is-active td {
    background: var(--mb-t1-primary-light, #EFF6FF);
    box-shadow: inset 2px 0 0 var(--mb-t1-primary, #2563EB);
}

.mbx-ed-lookup-empty.mbx-ed-lookup-empty {
    padding: .7rem .8rem;
    color: var(--mb-t1-text-faint, #94A3B8);
    font-size: .78rem;
    white-space: nowrap;
}

/* ── Calendario de Monteber ─────────────────────────────────── */

/* Contenedor flotante del calendario. A diferencia del desplegable de
   búsqueda no se redimensiona: el calendario tiene su tamaño natural. */
.mbx-ed-popup.mbx-ed-popup {
    position: absolute;
    top: calc(100% + 5px);
    left: -1.5px;
    z-index: 60;
    background: var(--mb-t1-surface, #FFFFFF);
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius, 14px);
    box-shadow: var(--mb-t1-shadow-md, 0 10px 28px rgba(15,23,42,.08));
}

.mbx-cal.mbx-cal {
    width: 17.5rem;
    padding: .6rem;
    font-size: .8rem;
    color: var(--mb-t1-text, #1F2937);
    user-select: none;
}

.mbx-cal--compact.mbx-cal--compact { width: 15rem; padding: .4rem; }

/* ── Encabezado ─────────────────────────────────────────────── */

.mbx-cal-head.mbx-cal-head {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .35rem;
}

.mbx-cal-title.mbx-cal-title {
    flex: 1 1 auto;
    height: 30px;
    border: 0;
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: transparent;
    color: var(--mb-t1-text, #1F2937);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-cal-nav.mbx-cal-nav {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mb-t1-text-muted, #64748B);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-cal-title.mbx-cal-title:hover,
.mbx-cal-nav.mbx-cal-nav:hover {
    background: var(--mb-t1-border-faint, #F4F7FB);
    color: var(--mb-t1-primary, #2563EB);
}

/* ── Rejilla de días ────────────────────────────────────────── */

.mbx-cal-week.mbx-cal-week,
.mbx-cal-days.mbx-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.mbx-cal-week.mbx-cal-week span {
    padding: .2rem 0;
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mb-t1-text-faint, #94A3B8);
}

.mbx-cal-day.mbx-cal-day {
    height: 2rem;
    border: 0;
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: transparent;
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-cal-day.mbx-cal-day:hover:not(:disabled) { background: var(--mb-t1-primary-light, #EFF6FF); }

/* Los días del mes vecino se ven, pero apagados: dan contexto sin
   competir con el mes que se está mirando. */
.mbx-cal-day.mbx-cal-day.is-out { color: var(--mb-t1-text-faint, #94A3B8); }

.mbx-cal-day.mbx-cal-day.is-weekend { color: var(--mb-t1-danger, #DC2626); }
.mbx-cal-day.mbx-cal-day.is-weekend.is-out { opacity: .5; }

/* Hoy se marca con un punto y no con relleno, para no confundirlo con
   el día elegido. */
.mbx-cal-day.mbx-cal-day.is-today { font-weight: 700; position: relative; }

.mbx-cal-day.mbx-cal-day.is-today::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--mb-t1-primary, #2563EB);
}

/* El resaltado del teclado es un contorno; el elegido es el relleno.
   Se distinguen porque conviven mientras se navega con las flechas. */
.mbx-cal-day.mbx-cal-day.is-cursor { box-shadow: inset 0 0 0 2px var(--mb-t1-primary-ring, #BFDBFE); }

.mbx-cal-day.mbx-cal-day.is-selected,
.mbx-cal-cell.mbx-cal-cell.is-selected {
    background: var(--mb-t1-primary, #2563EB);
    color: var(--mb-t1-surface, #FFFFFF);
    font-weight: 700;
}

.mbx-cal-day.mbx-cal-day.is-selected.is-today::after { background: var(--mb-t1-surface, #FFFFFF); }

.mbx-cal-day.mbx-cal-day:disabled {
    color: var(--mb-t1-text-faint, #94A3B8);
    opacity: .4;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* ── Meses y años ───────────────────────────────────────────── */

.mbx-cal-grid3.mbx-cal-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: .2rem 0;
}

.mbx-cal-cell.mbx-cal-cell {
    height: 2.4rem;
    border: 0;
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-cal-cell.mbx-cal-cell:hover:not(:disabled) { background: var(--mb-t1-primary-light, #EFF6FF); }
.mbx-cal-cell.mbx-cal-cell.is-today { font-weight: 700; color: var(--mb-t1-primary, #2563EB); }
.mbx-cal-cell.mbx-cal-cell.is-selected.is-today { color: var(--mb-t1-surface, #FFFFFF); }
.mbx-cal-cell.mbx-cal-cell:disabled { opacity: .4; cursor: not-allowed; }

/* ── Hora y pie ─────────────────────────────────────────────── */

.mbx-cal-time.mbx-cal-time {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--mb-t1-border-faint, #F4F7FB);
}

.mbx-cal-time-label.mbx-cal-time-label {
    flex: 1 1 auto;
    font-size: .72rem;
    font-weight: 600;
    color: var(--mb-t1-text-muted, #64748B);
}

.mbx-cal-time-input.mbx-cal-time-input {
    width: 3.2rem;
    height: 30px;
    padding: 0 .3rem;
    border: 1.5px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: var(--mb-t1-surface, #FFFFFF);
    color: inherit;
    font: inherit;
    text-align: center;
}

.mbx-cal-time-input.mbx-cal-time-input:focus {
    outline: none;
    border-color: var(--mb-t1-primary, #2563EB);
}

.mbx-cal-time-sep.mbx-cal-time-sep { font-weight: 700; color: var(--mb-t1-text-muted, #64748B); }

.mbx-cal-foot.mbx-cal-foot {
    display: flex;
    gap: .35rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--mb-t1-border-faint, #F4F7FB);
}

.mbx-cal-btn.mbx-cal-btn {
    flex: 1 1 auto;
    height: 30px;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: var(--mb-t1-surface, #FFFFFF);
    color: var(--mb-t1-primary, #2563EB);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-cal-btn.mbx-cal-btn:hover { background: var(--mb-t1-primary-light, #EFF6FF); }

.mbx-cal-btn--ghost.mbx-cal-btn--ghost { color: var(--mb-t1-text-muted, #64748B); }
.mbx-cal-btn--ghost.mbx-cal-btn--ghost:hover { background: var(--mb-t1-border-faint, #F4F7FB); }

/* El importe se lee mejor con cifras de ancho fijo: la columna de
   centavos no baila mientras se teclea. */
.mbx-ed-input--money.mbx-ed-input--money { font-variant-numeric: tabular-nums; }

/* ================================================================
   TELÉFONO Y TABLETA

   Regla que se paga cara si se ignora: un campo con letra menor a
   16 px hace que iOS haga zoom al tocarlo y deje la pantalla
   descuadrada. Por eso en pantallas táctiles la letra del control sube
   a 16 px, aunque el resto de la aplicación siga compacta.

   Se usa (pointer: coarse) y no sólo el ancho: una tableta grande
   también se toca con el dedo y necesita blancos grandes.
   ================================================================ */

@media (pointer: coarse) {

    .mbx-ed-field.mbx-ed-field,
    .mbx-ed-file-btn.mbx-ed-file-btn { padding: .5rem .65rem; }

    .mbx-ed-input.mbx-ed-input,
    .mbx-ed-tag-input.mbx-ed-tag-input {
        font-size: 16px;
        line-height: 1.4;
    }

    .mbx-ed-label.mbx-ed-label { font-size: .8rem; }

    /* La casilla de 16 px es imposible de atinar con el dedo. */
    .mbx-ed-check.mbx-ed-check,
    .mbx-ed-radio.mbx-ed-radio { width: 20px; height: 20px; }

    .mbx-ed-option.mbx-ed-option { min-height: 2.25rem; }

    .mbx-ed-clear.mbx-ed-clear,
    .mbx-ed-icon-btn.mbx-ed-icon-btn { width: 30px; height: 30px; }

    .mbx-ed-action.mbx-ed-action { padding: 0 .85rem; }

    .mbx-ed-switch.mbx-ed-switch,
    .mbx-ed-switch-input.mbx-ed-switch-input { width: 42px; height: 24px; }
    .mbx-ed-switch.mbx-ed-switch::after { width: 20px; height: 20px; }
    .mbx-ed-switch-input.mbx-ed-switch-input:checked + .mbx-ed-switch::after { transform: translateX(18px); }

    .mbx-ed-star.mbx-ed-star svg { width: 26px; height: 26px; }

    .mbx-cal-day.mbx-cal-day { height: 2.4rem; }
    .mbx-cal-cell.mbx-cal-cell { height: 2.8rem; }
    .mbx-cal-btn.mbx-cal-btn,
    .mbx-cal-title.mbx-cal-title { height: 2.5rem; }
    .mbx-cal-nav.mbx-cal-nav { width: 2.5rem; height: 2.5rem; }

    .mbx-ed-lookup-table.mbx-ed-lookup-table td { padding: .55rem .5rem; }
    .mbx-ed-lookup-table.mbx-ed-lookup-table th { padding: .45rem .5rem; }
}

@media (max-width: 640px) {

    /* La etiqueta a la izquierda no cabe en un teléfono: se pasa arriba
       y el campo aprovecha todo el ancho. */
    .mbx-ed--label-left.mbx-ed--label-left {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* Los flotantes dejan de colgar del campo y se vuelven una hoja
       pegada abajo, que es donde llega el pulgar. */
    .mbx-ed-lookup.mbx-ed-lookup,
    .mbx-ed-popup.mbx-ed-popup {
        position: fixed;
        left: .5rem !important;
        right: .5rem !important;
        top: auto !important;
        bottom: .5rem !important;
        width: auto !important;
        max-width: none;
        height: auto !important;
        max-height: 70vh;
        overflow: auto;
        resize: none;
        border-radius: var(--mb-t1-radius, 14px);
        box-shadow: var(--mb-t1-shadow-lg, 0 20px 50px rgba(15,23,42,.12));
    }

    .mbx-cal.mbx-cal { width: 100%; }

    /* El rango de fechas en dos renglones: dos campos de fecha lado a
       lado en 360 px no se pueden ni tocar. */
    .mbx-ed-range.mbx-ed-range { flex-wrap: wrap; }
    .mbx-ed-range.mbx-ed-range > .mbx-ed { flex: 1 1 100%; }
    .mbx-ed-range-sep.mbx-ed-range-sep { width: 100%; text-align: center; }

    .mbx-ed-group--inline.mbx-ed-group--inline { gap: .35rem .75rem; }
}

/* ── Lista del combo ────────────────────────────────────────── */

/* El campo no se teclea: se elige. Se ve como los demás pero con el
   cursor de "esto se abre". */
.mbx-ed-input--combo.mbx-ed-input--combo { cursor: pointer; user-select: none; }

.mbx-ed-list.mbx-ed-list {
    min-width: 100%;
    max-width: 90vw;
    padding: .25rem;
    overflow-y: auto;
}

.mbx-ed-list-item.mbx-ed-list-item {
    display: block;
    width: 100%;
    padding: .35rem .5rem;
    border: 0;
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .8rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.mbx-ed-list-item.mbx-ed-list-item:hover:not(:disabled) { background: var(--mb-t1-border-faint, #F4F7FB); }

/* El resaltado del teclado se distingue del elegido: mientras se
   recorre la lista con las flechas conviven los dos. */
.mbx-ed-list-item.mbx-ed-list-item.is-active {
    background: var(--mb-t1-primary-light, #EFF6FF);
    box-shadow: inset 2px 0 0 var(--mb-t1-primary, #2563EB);
}

.mbx-ed-list-item.mbx-ed-list-item.is-selected {
    color: var(--mb-t1-primary, #2563EB);
    font-weight: 600;
}

.mbx-ed-list-item.mbx-ed-list-item.is-selected.is-active {
    background: var(--mb-t1-primary, #2563EB);
    color: var(--mb-t1-surface, #FFFFFF);
}

.mbx-ed-list-item.mbx-ed-list-item:disabled { opacity: .45; cursor: not-allowed; }

.mbx-ed-list-empty.mbx-ed-list-empty { color: var(--mb-t1-text-faint, #94A3B8); }

.mbx-ed-list-group.mbx-ed-list-group {
    padding: .4rem .5rem .2rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mb-t1-text-faint, #94A3B8);
}

@media (pointer: coarse) {
    .mbx-ed-list-item.mbx-ed-list-item { padding: .6rem .55rem; font-size: 16px; }
}

/* ── Desplegables en la capa superior ───────────────────────── */

/* Los paneles flotantes (calendario, búsqueda, lista del combo) se
   muestran con la API de popover, que los saca de la pila de capas de
   la página: así ninguna tarjeta ni barra los tapa. El navegador les
   pone sus propios márgenes y bordes, y aquí se le quitan para que
   sigan viéndose como nuestros paneles.

   El z-index alto sigue puesto como respaldo para el navegador que no
   admita la capa superior. */
.mbx-ed-popup.mbx-ed-popup:popover-open,
.mbx-ed-lookup.mbx-ed-lookup:popover-open {
    inset: auto;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    overflow: visible;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    background: var(--mb-t1-surface, #FFFFFF);
    color: var(--mb-t1-text, #1F2937);
}

/* La lista y la búsqueda sí necesitan su propia barra de desplazamiento. */
.mbx-ed-lookup.mbx-ed-lookup:popover-open,
.mbx-ed-list.mbx-ed-list:popover-open { overflow: auto; }

.mbx-ed-list.mbx-ed-list:popover-open { padding: .25rem; }

/* Con el puntero encima, la rueda se queda en el panel y no arrastra la
   página (lo remata el propio módulo, que corta el evento). */
.mbx-ed-popup.mbx-ed-popup,
.mbx-ed-lookup.mbx-ed-lookup {
    overscroll-behavior: contain;
    z-index: 1200;
}


/* ================================================================
   Pestañas (MbTabControl) — clases mbx-tab-*

   Cejas de folder, no botones. La diferencia no es de gusto: en una
   fila de botones nada dice cuál está encima ni que lo de abajo sea
   una hoja; en un folder sí, porque la ceja elegida se PEGA al
   contenido y tapa la repisa, y las demás se quedan atrás. Eso es lo
   que se dibuja aquí, y se dibuja con borde y fondo del tema —ni una
   imagen, ni un color propio—.

   Las cuatro posiciones (arriba, abajo, izquierda, derecha) son el
   mismo dibujo girado. Para no repetirlo cuatro veces, las tres
   piezas que cambian están sueltas:

     · de qué lado va la repisa (la raya sobre la que se apoyan las
       cejas), que se pinta con ::after de la propia repisa;
     · qué esquinas se redondean;
     · qué orilla de la ceja elegida se borra para que se una con el
       contenido (se tapa la raya con el fondo del cuerpo, no se quita
       el borde: así la ceja no cambia de tamaño al elegirla y la fila
       no brinca).

   ORDEN: los bloques de posición van AL FINAL a propósito. Pintan las
   mismas propiedades que los de aspecto (bordes y márgenes) con la
   misma especificidad, así que tienen que ir después para ganar.
   ================================================================ */

/* ── Contenedor ─────────────────────────────────────────────── */

.mbx-tabs.mbx-tabs {
    /* Medidas propias del control (no del tema). El grueso de la raya es
       el mismo 1.5px del borde de los editores, para que una pestaña y un
       campo no se vean dibujados con distinto pulso. */
    --mbx-tab-line: 1.5px;
    --mbx-tab-radius: 11px;
    --mbx-tab-pad-y: .42rem;
    --mbx-tab-pad-x: .9rem;
    --mbx-tab-font: .78rem;
    --mbx-tab-gap: .15rem;
    --mbx-tab-shelf: .3rem;
    --mbx-tab-lean: 180deg;
    --mbx-tab-frame: calc(var(--mb-t1-radius, 14px) - var(--mbx-tab-line));

    /* La marca de color de la pestaña elegida. Son dos porque cada aspecto
       la quiere de un lado distinto: el folder en la orilla de AFUERA —la
       ceja levantada, como la pestaña de color de un archivero— y la raya
       en la orilla que toca el contenido, que es donde todo mundo la busca
       cuando no hay recuadro. Las dos las define cada posición. */
    --mbx-tab-accent-out: inset 0 2px 0 0 var(--mb-t1-primary, #2563EB);
    --mbx-tab-accent-in: inset 0 -2px 0 0 var(--mb-t1-primary, #2563EB);

    display: flex;
    min-width: 0;
    font-size: var(--mbx-tab-font);
    color: var(--mb-t1-text, #1F2937);
}

.mbx-tabs.mbx-tabs *, .mbx-tabs.mbx-tabs *::before, .mbx-tabs.mbx-tabs *::after { box-sizing: border-box; }

.mbx-tabs--sm.mbx-tabs--sm {
    --mbx-tab-radius: 9px;
    --mbx-tab-pad-y: .26rem;
    --mbx-tab-pad-x: .65rem;
    --mbx-tab-font: .72rem;
}

.mbx-tabs--lg.mbx-tabs--lg {
    --mbx-tab-radius: 13px;
    --mbx-tab-pad-y: .6rem;
    --mbx-tab-pad-x: 1.15rem;
    --mbx-tab-font: .88rem;
}

/* Marco de todo el control. Los radios de la repisa y del cuerpo se
   calculan restando el borde, para que no se vea una luz entre el marco
   y el fondo en las esquinas. */
.mbx-tabs.mbx-tabs.is-framed {
    border: var(--mbx-tab-line) solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius, 14px);
    background: var(--mb-t1-surface, #FFFFFF);
    box-shadow: var(--mb-t1-shadow, 0 2px 8px rgba(15,23,42,.05));
}

/* ── La repisa ──────────────────────────────────────────────── */

.mbx-tab-strip.mbx-tab-strip {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    gap: var(--mbx-tab-gap);
    min-width: 0;
    padding: var(--mbx-tab-shelf);
    background: var(--mb-t1-bg, #F4F8FD);
}

/* La raya sobre la que se apoyan las cejas. Va como ::after y no como
   borde porque tiene que quedar DEBAJO de la ceja elegida, que es la
   que la tapa; un borde siempre se pinta encima de lo de adentro. */
.mbx-tab-strip.mbx-tab-strip::after {
    content: '';
    position: absolute;
    z-index: 0;
    background: var(--mb-t1-border, #E2E8F0);
}

.mbx-tab-list.mbx-tab-list {
    display: flex;
    gap: var(--mbx-tab-gap);
    min-width: 0;
    min-height: 0;
    /* La fila se recorre con las flechas, con la rueda o con el dedo; una
       barra de desplazamiento bajo las cejas se ve como un defecto. */
    scrollbar-width: none;
}

.mbx-tab-list.mbx-tab-list::-webkit-scrollbar { display: none; }

/* Lo que se pega al final de la repisa: botones, contadores. */
.mbx-tab-extra.mbx-tab-extra {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    padding: 0 .2rem;
}

/* ── La ceja ────────────────────────────────────────────────── */

.mbx-tab.mbx-tab {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    flex: 0 0 auto;
    max-width: 15rem;
    padding: var(--mbx-tab-pad-y) var(--mbx-tab-pad-x);
    border: var(--mbx-tab-line) solid transparent;
    background: transparent;
    color: var(--mb-t1-text-muted, #64748B);
    font: inherit;
    font-size: var(--mbx-tab-font);
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                border-color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-tab.mbx-tab.is-active { z-index: 1; }

/* La orilla del foco va HACIA ADENTRO: la fila de cejas recorta lo que
   se sale, y una orilla por fuera se vería cortada justo en la ceja
   que el teclado acaba de alcanzar. */
.mbx-tab.mbx-tab:focus-visible {
    outline: 2px solid var(--mb-t1-primary, #2563EB);
    outline-offset: calc(-2px - var(--mbx-tab-line));
}

.mbx-tab.mbx-tab:disabled, .mbx-tab.mbx-tab.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

.mbx-tab-text.mbx-tab-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mbx-tab-glyph.mbx-tab-glyph {
    flex: 0 0 auto;
    font-size: 1em;
    line-height: 1;
}

.mbx-tab-badge.mbx-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--mb-t1-primary-light, #EFF6FF);
    color: var(--mb-t1-primary-dark, #1D4ED8);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.5;
}

.mbx-tab.mbx-tab.is-active .mbx-tab-badge {
    background: var(--mb-t1-primary, #2563EB);
    color: var(--mb-t1-surface, #FFFFFF);
}

.mbx-tab-close.mbx-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: -.35rem;
    border-radius: 50%;
    color: var(--mb-t1-text-faint, #94A3B8);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}

.mbx-tab-close.mbx-tab-close:hover {
    background: var(--mb-t1-danger-bg, #FEE2E2);
    color: var(--mb-t1-danger, #DC2626);
}

/* ── Flechas de recorrido ───────────────────────────────────── */

/* No se ven mientras las cejas caigan dentro. Quien decide es el módulo
   del navegador, que escribe data-mb-scroll en la repisa: sin JavaScript
   —o antes de que corra— no se ven, que es el caso normal. */
.mbx-tab-arrow.mbx-tab-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mb-t1-text-muted, #64748B);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}

.mbx-tab-strip.mbx-tab-strip[data-mb-scroll] .mbx-tab-arrow { display: inline-flex; }

.mbx-tab-strip.mbx-tab-strip[data-mb-scroll="none"] .mbx-tab-arrow { display: none; }

.mbx-tab-strip.mbx-tab-strip[data-mb-scroll="start"] .mbx-tab-arrow--prev,
.mbx-tab-strip.mbx-tab-strip[data-mb-scroll="end"] .mbx-tab-arrow--next {
    opacity: .3;
    pointer-events: none;
}

.mbx-tab-arrow.mbx-tab-arrow:hover {
    background: var(--mb-t1-primary-light, #EFF6FF);
    color: var(--mb-t1-primary-dark, #1D4ED8);
}

/* ── El cuerpo ──────────────────────────────────────────────── */

.mbx-tab-body.mbx-tab-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    background: var(--mb-t1-surface, #FFFFFF);
}

.mbx-tabs.mbx-tabs.is-padded > .mbx-tab-body { padding: .75rem; }

.mbx-tab-panel.mbx-tab-panel {
    min-width: 0;
    min-height: 0;
    outline: none;
}

/* Con KeepAlive las pestañas ya visitadas siguen en el documento; el
   atributo hidden es lo único que las guarda. Se dice aquí porque
   cualquier display de los de arriba le ganaría. */
.mbx-tab-panel.mbx-tab-panel[hidden] { display: none; }

/* ── Aspecto: cejas de folder ───────────────────────────────── */

/* El degradado va del blanco de la orilla de afuera al tinte de la
   repisa: es lo que hace que la ceja se lea como una hoja levantada y
   no como un rectángulo pintado. La dirección la pone --mbx-tab-lean,
   que cambia con la posición. */
.mbx-tabs--folder.mbx-tabs--folder .mbx-tab {
    border-color: var(--mb-t1-border, #E2E8F0);
    background: linear-gradient(var(--mbx-tab-lean),
                                var(--mb-t1-surface, #FFFFFF),
                                var(--mb-t1-bg, #F4F8FD));
}

.mbx-tabs--folder.mbx-tabs--folder .mbx-tab:hover:not(.is-active):not(:disabled) {
    background: linear-gradient(var(--mbx-tab-lean),
                                var(--mb-t1-surface, #FFFFFF),
                                var(--mb-t1-primary-light, #EFF6FF));
    color: var(--mb-t1-primary-dark, #1D4ED8);
}

.mbx-tabs--folder.mbx-tabs--folder .mbx-tab.is-active {
    background: var(--mb-t1-surface, #FFFFFF);
    color: var(--mb-t1-primary-dark, #1D4ED8);
    box-shadow: var(--mbx-tab-accent-out);
}

/* ── Aspecto: sólo la raya ──────────────────────────────────── */

.mbx-tabs--line.mbx-tabs--line .mbx-tab-strip { background: transparent; }

.mbx-tabs--line.mbx-tabs--line .mbx-tab { border-radius: var(--mb-t1-radius-sm, 10px); }

.mbx-tabs--line.mbx-tabs--line .mbx-tab:hover:not(.is-active):not(:disabled) {
    background: var(--mb-t1-primary-light, #EFF6FF);
    color: var(--mb-t1-primary-dark, #1D4ED8);
}

/* Sin recuadro la marca va del lado del contenido: es la raya que se
   entiende como «esto de aquí abajo es lo que estás viendo». */
.mbx-tabs--line.mbx-tabs--line .mbx-tab.is-active {
    color: var(--mb-t1-primary-dark, #1D4ED8);
    box-shadow: var(--mbx-tab-accent-in);
}

/* ── Se reparten el ancho ───────────────────────────────────── */

.mbx-tabs.mbx-tabs.is-stretch .mbx-tab-list { flex: 1 1 auto; }

.mbx-tabs.mbx-tabs.is-stretch .mbx-tab {
    flex: 1 1 0;
    max-width: none;
}

/* ══ POSICIÓN ══ (va al final: gana los empates con lo de arriba) ══ */

/* ── Cejas arriba ───────────────────────────────────────────── */

/* Arriba es la posición de fábrica: --mbx-tab-lean y las dos marcas de
   color ya vienen puestas para ella en el contenedor. */
.mbx-tabs--top.mbx-tabs--top { flex-direction: column; }

.mbx-tabs--top.mbx-tabs--top .mbx-tab-strip {
    align-items: flex-end;
    padding-bottom: 0;
}

.mbx-tabs--top.mbx-tabs--top .mbx-tab-strip::after {
    inset: auto 0 0 0;
    height: var(--mbx-tab-line);
}

.mbx-tabs--top.mbx-tabs--top .mbx-tab-list {
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
}

/* La ceja que no está elegida se queda un pelo arriba de la raya; la
   elegida baja hasta taparla y se une con el cuerpo. */
.mbx-tabs--top.mbx-tabs--top .mbx-tab {
    border-radius: var(--mbx-tab-radius) var(--mbx-tab-radius) 0 0;
    margin-bottom: var(--mbx-tab-line);
}

.mbx-tabs--top.mbx-tabs--top .mbx-tab.is-active {
    margin-bottom: 0;
    border-bottom-color: var(--mb-t1-surface, #FFFFFF);
}

.mbx-tabs--top.mbx-tabs--top .mbx-tab-extra { margin-left: auto; }

.mbx-tabs--top.mbx-tabs--top.is-framed .mbx-tab-strip {
    border-radius: var(--mbx-tab-frame) var(--mbx-tab-frame) 0 0;
}

.mbx-tabs--top.mbx-tabs--top.is-framed .mbx-tab-body {
    border-radius: 0 0 var(--mbx-tab-frame) var(--mbx-tab-frame);
}

/* ── Cejas abajo (las hojas de una hoja de cálculo) ─────────── */

.mbx-tabs--bottom.mbx-tabs--bottom {
    flex-direction: column-reverse;
    --mbx-tab-accent-out: inset 0 -2px 0 0 var(--mb-t1-primary, #2563EB);
    --mbx-tab-accent-in: inset 0 2px 0 0 var(--mb-t1-primary, #2563EB);
    --mbx-tab-lean: 0deg;
}

.mbx-tabs--bottom.mbx-tabs--bottom .mbx-tab-strip {
    align-items: flex-start;
    padding-top: 0;
}

.mbx-tabs--bottom.mbx-tabs--bottom .mbx-tab-strip::after {
    inset: 0 0 auto 0;
    height: var(--mbx-tab-line);
}

.mbx-tabs--bottom.mbx-tabs--bottom .mbx-tab-list {
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
}

.mbx-tabs--bottom.mbx-tabs--bottom .mbx-tab {
    border-radius: 0 0 var(--mbx-tab-radius) var(--mbx-tab-radius);
    margin-top: var(--mbx-tab-line);
}

.mbx-tabs--bottom.mbx-tabs--bottom .mbx-tab.is-active {
    margin-top: 0;
    border-top-color: var(--mb-t1-surface, #FFFFFF);
}

.mbx-tabs--bottom.mbx-tabs--bottom .mbx-tab-extra { margin-left: auto; }

.mbx-tabs--bottom.mbx-tabs--bottom.is-framed .mbx-tab-strip {
    border-radius: 0 0 var(--mbx-tab-frame) var(--mbx-tab-frame);
}

.mbx-tabs--bottom.mbx-tabs--bottom.is-framed .mbx-tab-body {
    border-radius: var(--mbx-tab-frame) var(--mbx-tab-frame) 0 0;
}

/* ── Cejas de canto: izquierda y derecha ────────────────────── */

/* De canto el texto NO se voltea: una ceja con el título acostado se lee
   girando la cabeza, y en una pantalla de captura eso no se hace. Se
   apilan, cada una del ancho de la más larga, que además es la razón de
   ponerlas de lado —caben títulos completos—. */
.mbx-tabs--left.mbx-tabs--left, .mbx-tabs--right.mbx-tabs--right { flex-direction: row; }

.mbx-tabs--right.mbx-tabs--right { flex-direction: row-reverse; }

.mbx-tabs--left.mbx-tabs--left .mbx-tab-strip,
.mbx-tabs--right.mbx-tabs--right .mbx-tab-strip { flex-direction: column; }

.mbx-tabs--left.mbx-tabs--left .mbx-tab-list,
.mbx-tabs--right.mbx-tabs--right .mbx-tab-list {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

.mbx-tabs--left.mbx-tabs--left .mbx-tab,
.mbx-tabs--right.mbx-tabs--right .mbx-tab {
    justify-content: flex-start;
    text-align: left;
    max-width: 18rem;
}

.mbx-tabs--left.mbx-tabs--left .mbx-tab-extra,
.mbx-tabs--right.mbx-tabs--right .mbx-tab-extra { margin-top: auto; }

.mbx-tabs--left.mbx-tabs--left.is-stretch .mbx-tab,
.mbx-tabs--right.mbx-tabs--right.is-stretch .mbx-tab { flex: 1 1 auto; }

/* Izquierda */

.mbx-tabs--left.mbx-tabs--left {
    --mbx-tab-lean: 90deg;
    --mbx-tab-accent-out: inset 2px 0 0 0 var(--mb-t1-primary, #2563EB);
    --mbx-tab-accent-in: inset -2px 0 0 0 var(--mb-t1-primary, #2563EB);
}

.mbx-tabs--left.mbx-tabs--left .mbx-tab-strip {
    align-items: stretch;
    padding-right: 0;
}

.mbx-tabs--left.mbx-tabs--left .mbx-tab-strip::after {
    inset: 0 0 0 auto;
    width: var(--mbx-tab-line);
}

.mbx-tabs--left.mbx-tabs--left .mbx-tab {
    border-radius: var(--mbx-tab-radius) 0 0 var(--mbx-tab-radius);
    margin-right: var(--mbx-tab-line);
}

.mbx-tabs--left.mbx-tabs--left .mbx-tab.is-active {
    margin-right: 0;
    border-right-color: var(--mb-t1-surface, #FFFFFF);
}

.mbx-tabs--left.mbx-tabs--left.is-framed .mbx-tab-strip {
    border-radius: var(--mbx-tab-frame) 0 0 var(--mbx-tab-frame);
}

.mbx-tabs--left.mbx-tabs--left.is-framed .mbx-tab-body {
    border-radius: 0 var(--mbx-tab-frame) var(--mbx-tab-frame) 0;
}

/* Derecha */

.mbx-tabs--right.mbx-tabs--right {
    --mbx-tab-lean: 270deg;
    --mbx-tab-accent-out: inset -2px 0 0 0 var(--mb-t1-primary, #2563EB);
    --mbx-tab-accent-in: inset 2px 0 0 0 var(--mb-t1-primary, #2563EB);
}

.mbx-tabs--right.mbx-tabs--right .mbx-tab-strip {
    align-items: stretch;
    padding-left: 0;
}

.mbx-tabs--right.mbx-tabs--right .mbx-tab-strip::after {
    inset: 0 auto 0 0;
    width: var(--mbx-tab-line);
}

.mbx-tabs--right.mbx-tabs--right .mbx-tab {
    border-radius: 0 var(--mbx-tab-radius) var(--mbx-tab-radius) 0;
    margin-left: var(--mbx-tab-line);
}

.mbx-tabs--right.mbx-tabs--right .mbx-tab.is-active {
    margin-left: 0;
    border-left-color: var(--mb-t1-surface, #FFFFFF);
}

.mbx-tabs--right.mbx-tabs--right.is-framed .mbx-tab-strip {
    border-radius: 0 var(--mbx-tab-frame) var(--mbx-tab-frame) 0;
}

.mbx-tabs--right.mbx-tabs--right.is-framed .mbx-tab-body {
    border-radius: var(--mbx-tab-frame) 0 0 var(--mbx-tab-frame);
}

/* ── Teléfono y tableta ─────────────────────────────────────── */

/* Con el dedo, una ceja de 26 píxeles de alto se falla. Se sube al
   mínimo que se puede tocar sin apuntar. */
@media (pointer: coarse) {
    .mbx-tab.mbx-tab {
        min-height: 2.6rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .mbx-tab-close.mbx-tab-close { width: 1.4rem; height: 1.4rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN 2 · CUADRÍCULA (Monteber.Grid)            clases mbx-grid-*
   ══════════════════════════════════════════════════════════════════════════ */

/* ================================================================
   Monteber.Grid — hoja de estilos del control de cuadrícula.

   Prefijo mbx-grid- (convención MonteberThemeV1).

   Autocontenida: consume los tokens --mb-t1-* del tema cuando existen
   y trae un valor de respaldo en cada var(), de modo que el control se
   ve correcto aunque se use fuera de MonteberOne. NO redefine :root,
   justamente para no pisar la paleta de la aplicación anfitriona.
   ================================================================ */

/* ── Contenedor ─────────────────────────────────────────────── */

.mbx-grid.mbx-grid {
    display: flex;

    /* Sangría horizontal común de las BARRAS: herramientas, agrupar y
       acciones. Una sola variable para que no se separen entre ellas al
       ajustarla. */
    --mbx-bar-pad-x: .7rem;
    flex-direction: column;
    width: 100%;
    background: var(--mb-t1-surface, #FFFFFF);
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: var(--mb-t1-radius, 14px);
    box-shadow: var(--mb-t1-shadow-md, 0 10px 28px rgba(15,23,42,.08));
    overflow: hidden;
    font-size: .82rem;
    color: var(--mb-t1-text, #1f2937);
    /* Evita que el navegador convierta el arrastre de columnas en scroll. */
    -webkit-tap-highlight-color: transparent;
}

.mbx-grid.mbx-grid *, .mbx-grid.mbx-grid *::before, .mbx-grid.mbx-grid *::after { box-sizing: border-box; }

/* El contenedor es enfocable para poder navegar con las flechas, pero el
   recuadro del navegador alrededor de toda la cuadrícula se ve como un error.
   Se conserva sólo para quien navega con teclado (:focus-visible). */
.mbx-grid.mbx-grid:focus { outline: none; }
.mbx-grid.mbx-grid:focus-visible {
    outline: 2px solid var(--mb-t1-primary-ring, #bfdbfe);
    outline-offset: -2px;
}

/* ── Barra de herramientas ──────────────────────────────────── */

.mbx-grid-toolbar.mbx-grid-toolbar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem var(--mbx-bar-pad-x, 1rem);
    border-bottom: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    flex-wrap: wrap;
    background: var(--mb-t1-surface, #FFFFFF);
}

.mbx-grid-title.mbx-grid-title {
    font-weight: 700;
    font-size: .86rem;
    color: var(--mb-t1-text, #1f2937);
    margin-right: .25rem;
}

.mbx-grid-search.mbx-grid-search {
    position: relative;
    flex: 1 1 180px;
    max-width: 320px;
}

.mbx-grid-search.mbx-grid-search input {
    width: 100%;
    height: 30px;
    padding: 0 .55rem 0 1.7rem;
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 7px;
    font-size: .8rem;
    color: inherit;
    background: var(--mb-t1-surface, #FFFFFF);
    outline: none;
}

.mbx-grid-search.mbx-grid-search input:focus {
    border-color: var(--mb-t1-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--mb-t1-primary-ring, #bfdbfe);
}

.mbx-grid-search.mbx-grid-search svg {
    position: absolute;
    left: .45rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: .45;
    pointer-events: none;
}

.mbx-grid-btn.mbx-grid-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 30px;
    padding: 0 .6rem;
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 7px;
    background: var(--mb-t1-surface, #FFFFFF);
    color: var(--mb-t1-text-muted, #64748b);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}

.mbx-grid-btn.mbx-grid-btn:hover:not(:disabled) {
    background: var(--mb-t1-primary-light, #eff6ff);
    border-color: var(--mb-t1-primary-ring, #bfdbfe);
    color: var(--mb-t1-primary, #2563eb);
}

.mbx-grid-btn.mbx-grid-btn:disabled { opacity: .45; cursor: default; }
.mbx-grid-btn.mbx-grid-btn.is-active {
    background: var(--mb-t1-primary-light, #eff6ff);
    border-color: var(--mb-t1-primary, #2563eb);
    color: var(--mb-t1-primary, #2563eb);
}

.mbx-grid-count.mbx-grid-count {
    margin-left: auto;
    font-size: .74rem;
    color: var(--mb-t1-text-faint, #94a3b8);
    white-space: nowrap;
}

/* ── Panel de agrupación ────────────────────────────────────── */

.mbx-grid-grouppanel.mbx-grid-grouppanel {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    min-height: 38px;
    padding: .4rem var(--mbx-bar-pad-x, 1rem);
    background: var(--mb-t1-bg, #F4F8FD);
    border-bottom: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    font-size: .76rem;
    color: var(--mb-t1-text-faint, #94a3b8);
}

.mbx-grid-grouppanel.mbx-grid-grouppanel.is-drop-target {
    background: var(--mb-t1-primary-light, #eff6ff);
    box-shadow: inset 0 0 0 2px var(--mb-t1-primary, #2563eb);
}

.mbx-grid-groupchip.mbx-grid-groupchip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 26px;
    padding: 0 .3rem 0 .55rem;
    border-radius: 13px;
    background: var(--mb-t1-primary, #2563eb);
    color: var(--mb-t1-surface, #ffffff);
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.mbx-grid-groupchip.mbx-grid-groupchip .mbx-grid-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    font-size: .7rem;
    line-height: 1;
}

.mbx-grid-groupchip.mbx-grid-groupchip .mbx-grid-chip-x:hover { background: rgba(255,255,255,.4); }

/* ── Área de desplazamiento ─────────────────────────────────── */

.mbx-grid-scroll.mbx-grid-scroll {
    overflow: auto;
    position: relative;
    /* Necesario para que la virtualización mida bien la ventana visible. */
    contain: paint;
}

.mbx-grid-table.mbx-grid-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: .8rem;
}

/* ── Encabezado ─────────────────────────────────────────────── */

.mbx-grid-table.mbx-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--mb-t1-bg, #F4F8FD);
    border-bottom: 1px solid var(--mb-t1-border, #e2e8f0);
    border-right: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    padding: 0;
    text-align: left;
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mb-t1-text-muted, #64748b);
    user-select: none;
}

.mbx-grid-table.mbx-grid-table thead tr.mbx-grid-filter-row th {
    top: var(--mb-t1-grid-head-h, 34px);
    z-index: 2;
    background: var(--mb-t1-surface, #FFFFFF);
    text-transform: none;
}

.mbx-grid-th-inner.mbx-grid-th-inner {
    display: flex;
    align-items: center;
    gap: .25rem;
    height: var(--mb-t1-grid-head-h, 34px);
    padding: 0 .5rem;
    overflow: hidden;
    white-space: nowrap;
    cursor: default;
}

.mbx-grid-th-caption.mbx-grid-th-caption { overflow: hidden; text-overflow: ellipsis; }

.mbx-grid-th-sortable.mbx-grid-th-sortable { cursor: pointer; }
.mbx-grid-th-sortable.mbx-grid-th-sortable:hover { color: var(--mb-t1-primary, #2563eb); }

.mbx-grid-sort-icon.mbx-grid-sort-icon { font-size: .7rem; opacity: .35; }
.mbx-grid-sort-icon.mbx-grid-sort-icon.is-active { opacity: 1; color: var(--mb-t1-primary, #2563eb); }
.mbx-grid-sort-order.mbx-grid-sort-order {
    font-size: .6rem;
    font-weight: 700;
    color: var(--mb-t1-primary, #2563eb);
}

.mbx-grid-th-num.mbx-grid-th-num .mbx-grid-th-inner { justify-content: flex-end; }
.mbx-grid-th-center.mbx-grid-th-center .mbx-grid-th-inner { justify-content: center; }

.mbx-grid-filter-icon.mbx-grid-filter-icon {
    margin-left: auto;
    font-size: .68rem;
    color: var(--mb-t1-primary, #2563eb);
}

/* Manija de redimensionado: zona ancha para el dedo, línea fina a la vista. */
.mbx-grid-resizer.mbx-grid-resizer {
    position: absolute;
    top: 0;
    right: -5px;
    width: 11px;
    height: 100%;
    cursor: col-resize;
    z-index: 4;
    touch-action: none;
}

.mbx-grid-resizer.mbx-grid-resizer::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 20%;
    width: 1px;
    height: 60%;
    background: transparent;
}

.mbx-grid-resizer.mbx-grid-resizer:hover::after,
.mbx-grid-resizer.mbx-grid-resizer.is-active::after { background: var(--mb-t1-primary, #2563eb); }

.mbx-grid-th-wrap.mbx-grid-th-wrap { position: relative; }

/* Sin touch-action:none el navegador se queda el gesto para desplazar y el
   arrastre de columnas nunca llega a JavaScript en pantallas táctiles. */
.mbx-grid-th-draggable.mbx-grid-th-draggable { touch-action: none; cursor: grab; }
.mbx-grid-th-draggable.mbx-grid-th-draggable:active { cursor: grabbing; }

/* ── Fila de filtros ────────────────────────────────────────── */

.mbx-grid-filter-cell.mbx-grid-filter-cell {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px;
    height: var(--mb-t1-grid-filter-h, 32px);
}

.mbx-grid-filter-cell.mbx-grid-filter-cell input {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    padding: 0 .35rem;
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 5px;
    font-size: .74rem;
    color: inherit;
    background: var(--mb-t1-surface, #FFFFFF);
    outline: none;
}

.mbx-grid-filter-cell.mbx-grid-filter-cell input:focus {
    border-color: var(--mb-t1-primary, #2563eb);
    box-shadow: 0 0 0 2px var(--mb-t1-primary-ring, #bfdbfe);
}

.mbx-grid-filter-op.mbx-grid-filter-op {
    flex: 0 0 auto;
    width: 22px;
    height: 24px;
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 5px;
    background: var(--mb-t1-bg, #F4F8FD);
    color: var(--mb-t1-text-muted, #64748b);
    font-size: .7rem;
    cursor: pointer;
    padding: 0;
}

.mbx-grid-filter-op.mbx-grid-filter-op:hover { color: var(--mb-t1-primary, #2563eb); }
.mbx-grid-filter-op.mbx-grid-filter-op.is-set {
    border-color: var(--mb-t1-primary, #2563eb);
    color: var(--mb-t1-primary, #2563eb);
    background: var(--mb-t1-primary-light, #eff6ff);
}

/* ── Cuerpo ─────────────────────────────────────────────────── */

.mbx-grid-table.mbx-grid-table tbody tr { background: var(--mb-t1-surface, #FFFFFF); }

.mbx-grid-table.mbx-grid-table tbody tr.mbx-grid-row-alt { background: var(--mb-t1-bg, #F4F8FD); }
.mbx-grid-table.mbx-grid-table tbody tr.mbx-grid-row:hover { background: var(--mb-t1-primary-light, #eff6ff); }

.mbx-grid-table.mbx-grid-table tbody tr.mbx-grid-row-selected,
.mbx-grid-table.mbx-grid-table tbody tr.mbx-grid-row-selected:hover {
    background: var(--mb-t1-primary-light, #eff6ff);
    box-shadow: inset 3px 0 0 var(--mb-t1-primary, #2563eb);
}

.mbx-grid-cell.mbx-grid-cell {
    padding: 0 .5rem;
    height: var(--mb-t1-grid-row-h, 34px);
    border-bottom: 1px solid var(--mb-t1-border-faint, #f4f7fb);
    border-right: 1px solid transparent;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
}

.mbx-grid-cell-trunc.mbx-grid-cell-trunc { text-overflow: ellipsis; }
.mbx-grid-cell-num.mbx-grid-cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.mbx-grid-cell-center.mbx-grid-cell-center { text-align: center; }

.mbx-grid-cell-editable.mbx-grid-cell-editable { cursor: text; }
.mbx-grid-cell-editable.mbx-grid-cell-editable:hover { box-shadow: inset 0 0 0 1px var(--mb-t1-primary-ring, #bfdbfe); }

.mbx-grid-cell-editing.mbx-grid-cell-editing {
    padding: 0 2px;
    box-shadow: inset 0 0 0 2px var(--mb-t1-primary, #2563eb);
    background: var(--mb-t1-surface, #FFFFFF);
}

.mbx-grid-cell-focused.mbx-grid-cell-focused { box-shadow: inset 0 0 0 2px var(--mb-t1-primary-ring, #bfdbfe); }

.mbx-grid-cell-error.mbx-grid-cell-error {
    box-shadow: inset 0 0 0 2px var(--mb-t1-danger, #dc2626);
    background: var(--mb-t1-danger-bg, #fee2e2);
}

/* Barra de estado de 4 px al inicio de la fila. */
.mbx-grid-status.mbx-grid-status {
    width: 4px;
    padding: 0 !important;
    background: var(--mb-t1-primary, #2563eb);
}

.mbx-grid-status-primary.mbx-grid-status-primary { background: var(--mb-t1-primary, #2563eb); }
.mbx-grid-status-info.mbx-grid-status-info { background: var(--mb-t1-info, #2563eb); }
.mbx-grid-status-success.mbx-grid-status-success { background: var(--mb-t1-success, #16a34a); }
.mbx-grid-status-warning.mbx-grid-status-warning { background: var(--mb-t1-warning, #d97706); }
.mbx-grid-status-error.mbx-grid-status-error { background: var(--mb-t1-danger, #dc2626); }
.mbx-grid-status-tertiary.mbx-grid-status-tertiary { background: var(--mb-t1-purple, #8b5cf6); }

.mbx-grid-rownum.mbx-grid-rownum {
    text-align: right;
    color: var(--mb-t1-text-faint, #94a3b8);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}

/* ── Fila enfocada ──────────────────────────────────────────────
   El foco (dónde está el cursor) y el marcado (qué se va a procesar)
   son cosas distintas, así que se ven distinto: el foco es un contorno,
   el marcado es un relleno. Una fila puede tener las dos. */

.mbx-grid-table.mbx-grid-table tbody tr.mbx-grid-row-focused td {
    border-top: 1px solid var(--mb-t1-primary, #2563eb);
    border-bottom: 1px solid var(--mb-t1-primary, #2563eb);
}

.mbx-grid-table.mbx-grid-table tbody tr.mbx-grid-row-focused td:first-child {
    border-left: 1px solid var(--mb-t1-primary, #2563eb);
}

.mbx-grid-table.mbx-grid-table tbody tr.mbx-grid-row-focused td:last-child {
    border-right: 1px solid var(--mb-t1-primary, #2563eb);
}

/* ── Columna de marcado ─────────────────────────────────────── */

.mbx-grid-check-cell.mbx-grid-check-cell { text-align: center; padding: 0 !important; }

.mbx-grid-check-input.mbx-grid-check-input {
    width: 15px;
    height: 15px;
    accent-color: var(--mb-t1-primary, #2563eb);
    cursor: pointer;
    vertical-align: middle;
}

/* Selección parcial: hay marcados, pero no todos. */
.mbx-grid-check-input.mbx-grid-check-input.is-partial {
    outline: 2px solid var(--mb-t1-primary, #2563eb);
    outline-offset: 1px;
    opacity: .75;
}

/* ── Fila de alta ───────────────────────────────────────────── */

.mbx-grid-newrow.mbx-grid-newrow td {
    background: var(--mb-t1-success-bg, #DCFCE7);
    border-bottom: 1px solid var(--mb-t1-border, #e2e8f0);
    height: var(--mb-t1-grid-row-h, 34px);
    padding: 0 2px;
    vertical-align: middle;
}

.mbx-grid-newrow.mbx-grid-newrow.is-sticky td {
    position: sticky;
    z-index: 2;
}

.mbx-grid-newrow.mbx-grid-newrow.is-top td { box-shadow: inset 0 2px 0 var(--mb-t1-success, #16a34a); }
.mbx-grid-newrow.mbx-grid-newrow.is-bottom td { box-shadow: inset 0 -2px 0 var(--mb-t1-success, #16a34a); }

.mbx-grid-newrow-mark.mbx-grid-newrow-mark {
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    color: var(--mb-t1-success, #16a34a);
    white-space: nowrap;
}

.mbx-grid-newrow-cell.mbx-grid-newrow-cell .mbx-grid-editor {
    background: var(--mb-t1-surface, #FFFFFF);
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 5px;
    height: calc(var(--mb-t1-grid-row-h, 34px) - 8px);
}

.mbx-grid-newrow-cell.mbx-grid-newrow-cell .mbx-grid-editor:focus {
    border-color: var(--mb-t1-success, #16a34a);
    box-shadow: 0 0 0 2px var(--mb-t1-success-border, #bbf7d0);
}

.mbx-grid-newrow-error-row.mbx-grid-newrow-error-row td {
    position: sticky;
    z-index: 2;
    background: var(--mb-t1-danger-bg, #fee2e2);
    color: #991b1b;
    font-size: .74rem;
    font-weight: 600;
    padding: .25rem .6rem;
}

/* ── Barra inferior de acciones ─────────────────────────────── */

.mbx-grid-actionbar.mbx-grid-actionbar {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    padding: .45rem var(--mbx-bar-pad-x, 1rem);
    border-top: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    background: var(--mb-t1-bg, #F4F8FD);
    font-size: .76rem;
}

.mbx-grid-btn-add.mbx-grid-btn-add {
    border-color: var(--mb-t1-success-border, #bbf7d0);
    color: var(--mb-t1-success, #16a34a);
}

.mbx-grid-btn-add.mbx-grid-btn-add:hover:not(:disabled) {
    background: var(--mb-t1-success-bg, #dcfce7);
    border-color: var(--mb-t1-success, #16a34a);
    color: var(--mb-t1-success, #16a34a);
}

.mbx-grid-btn-danger.mbx-grid-btn-danger {
    border-color: var(--mb-t1-danger-border, #fecaca);
    color: var(--mb-t1-danger, #dc2626);
}

.mbx-grid-btn-danger.mbx-grid-btn-danger:hover:not(:disabled) {
    background: var(--mb-t1-danger-bg, #fee2e2);
    border-color: var(--mb-t1-danger, #dc2626);
    color: var(--mb-t1-danger, #dc2626);
}

.mbx-grid-confirm.mbx-grid-confirm {
    font-weight: 700;
    color: var(--mb-t1-danger, #dc2626);
}

.mbx-grid-selcount.mbx-grid-selcount {
    font-weight: 700;
    color: var(--mb-t1-primary, #2563eb);
}

.mbx-grid-rowsmsg.mbx-grid-rowsmsg {
    margin-left: auto;
    padding: .2rem .5rem;
    border-radius: 6px;
    background: var(--mb-t1-success-bg, #dcfce7);
    color: #166534;
    cursor: pointer;
}

.mbx-grid-rowsmsg.mbx-grid-rowsmsg.is-error {
    background: var(--mb-t1-danger-bg, #fee2e2);
    color: #991b1b;
}

/* ── Editores en línea ──────────────────────────────────────── */

.mbx-grid-editor.mbx-grid-editor {
    width: 100%;
    height: calc(var(--mb-t1-grid-row-h, 34px) - 6px);
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0 .35rem;
}

.mbx-grid-editor.mbx-grid-editor.is-num { text-align: right; }
.mbx-grid-editor-select.mbx-grid-editor-select { width: 100%; }
.mbx-grid-editor-check.mbx-grid-editor-check { width: 16px; height: 16px; accent-color: var(--mb-t1-primary, #2563eb); }

.mbx-grid-editor-error.mbx-grid-editor-error {
    position: absolute;
    z-index: 40;
    margin-top: 2px;
    padding: .25rem .5rem;
    background: var(--mb-t1-danger, #dc2626);
    color: var(--mb-t1-surface, #ffffff);
    border-radius: 6px;
    font-size: .72rem;
    box-shadow: 0 6px 18px rgba(15,23,42,.22);
    max-width: 280px;
    white-space: normal;
}

/* ── Grupos ─────────────────────────────────────────────────── */

.mbx-grid-group-row.mbx-grid-group-row td {
    background: var(--mb-t1-bg, #F4F8FD);
    border-bottom: 1px solid var(--mb-t1-border, #e2e8f0);
    height: var(--mb-t1-grid-row-h, 34px);
    padding: 0 .5rem;
    font-weight: 700;
    font-size: .78rem;
    color: var(--mb-t1-text, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}

.mbx-grid-group-row.mbx-grid-group-row:hover td { background: var(--mb-t1-primary-light, #eff6ff); }

.mbx-grid-group-toggle.mbx-grid-group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: .35rem;
    border-radius: 4px;
    background: var(--mb-t1-surface, #FFFFFF);
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    font-size: .62rem;
    line-height: 1;
    color: var(--mb-t1-text-muted, #64748b);
}

.mbx-grid-group-field.mbx-grid-group-field { color: var(--mb-t1-text-muted, #64748b); font-weight: 600; }
.mbx-grid-group-count.mbx-grid-group-count { color: var(--mb-t1-text-faint, #94a3b8); font-weight: 500; margin-left: .3rem; }
.mbx-grid-group-summary.mbx-grid-group-summary { margin-left: .75rem; font-weight: 600; color: var(--mb-t1-primary, #2563eb); }

.mbx-grid-groupfoot.mbx-grid-groupfoot td {
    background: #fbfdff;
    border-bottom: 1px solid var(--mb-t1-border, #e2e8f0);
    height: var(--mb-t1-grid-row-h, 34px);
    padding: 0 .5rem;
    font-size: .76rem;
    font-weight: 700;
    color: var(--mb-t1-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
}

.mbx-grid-groupfoot.mbx-grid-groupfoot .mbx-grid-cell-num { text-align: right; }

/* ── Pie de totales ─────────────────────────────────────────── */

.mbx-grid-table.mbx-grid-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--mb-t1-bg, #F4F8FD);
    border-top: 2px solid var(--mb-t1-border, #e2e8f0);
    height: var(--mb-t1-grid-row-h, 34px);
    padding: 0 .5rem;
    font-weight: 700;
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
}

/* ── Estados vacíos ─────────────────────────────────────────── */

.mbx-grid-empty.mbx-grid-empty {
    padding: 2.2rem 1rem;
    text-align: center;
    color: var(--mb-t1-text-faint, #94a3b8);
    font-size: .82rem;
}

.mbx-grid-progress.mbx-grid-progress {
    height: 3px;
    background: var(--mb-t1-border-faint, #F4F7FB);
    overflow: hidden;
}

.mbx-grid-progress-bar.mbx-grid-progress-bar {
    height: 100%;
    width: 35%;
    background: var(--mb-t1-primary, #2563eb);
    animation: mbx-grid-slide 1.1s ease-in-out infinite;
}

@keyframes mbx-grid-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

/* ── Paginador ──────────────────────────────────────────────── */

.mbx-grid-pager.mbx-grid-pager {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    padding: .45rem var(--mbx-bar-pad-x, 1rem);
    border-top: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    background: var(--mb-t1-surface, #FFFFFF);
    font-size: .75rem;
    color: var(--mb-t1-text-muted, #64748b);
}

.mbx-grid-pager-info.mbx-grid-pager-info { margin-right: auto; }

.mbx-grid-page-btn.mbx-grid-page-btn {
    min-width: 26px;
    height: 26px;
    padding: 0 .35rem;
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 6px;
    background: var(--mb-t1-surface, #FFFFFF);
    color: var(--mb-t1-text-muted, #64748b);
    font-size: .74rem;
    cursor: pointer;
}

.mbx-grid-page-btn.mbx-grid-page-btn:hover:not(:disabled) {
    border-color: var(--mb-t1-primary, #2563eb);
    color: var(--mb-t1-primary, #2563eb);
}

.mbx-grid-page-btn.mbx-grid-page-btn.active {
    background: var(--mb-t1-primary, #2563eb);
    border-color: var(--mb-t1-primary, #2563eb);
    color: var(--mb-t1-surface, #ffffff);
    font-weight: 700;
}

.mbx-grid-page-btn.mbx-grid-page-btn:disabled { opacity: .4; cursor: default; }

.mbx-grid-pagesize.mbx-grid-pagesize {
    height: 26px;
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 6px;
    background: var(--mb-t1-surface, #FFFFFF);
    color: inherit;
    font-size: .74rem;
}

/* ── Menú contextual ────────────────────────────────────────── */

.mbx-grid-menu.mbx-grid-menu {
    position: fixed;
    z-index: 1200;
    min-width: 210px;
    max-width: 300px;
    max-height: 70vh;
    overflow-y: auto;
    padding: .3rem;
    background: var(--mb-t1-surface, #FFFFFF);
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 9px;
    box-shadow: 0 12px 34px rgba(15,23,42,.18);
    font-size: .78rem;
}

.mbx-grid-menu-item.mbx-grid-menu-item {
    display: flex;
    align-items: center;
    /* Renglón de lista, no botón centrado: lo declara EXPRESAMENTE porque si
       no, lo rellena el «button { justify-content: center }» de MudBlazor. */
    justify-content: flex-start;
    gap: .45rem;
    width: 100%;
    padding: .38rem .5rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mb-t1-text, #1f2937);
    text-align: left;
    font-size: .78rem;
    cursor: pointer;
}

.mbx-grid-menu-item.mbx-grid-menu-item:hover:not(:disabled) { background: var(--mb-t1-primary-light, #eff6ff); }
.mbx-grid-menu-item.mbx-grid-menu-item:disabled { opacity: .4; cursor: default; }
.mbx-grid-menu-item.mbx-grid-menu-item .mbx-grid-menu-icon { width: 16px; text-align: center; opacity: .6; }
.mbx-grid-menu-sep.mbx-grid-menu-sep { height: 1px; margin: .25rem .3rem; background: var(--mb-t1-border-faint, #F4F7FB); }
.mbx-grid-menu-title.mbx-grid-menu-title {
    padding: .3rem .5rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mb-t1-text-faint, #94a3b8);
}

.mbx-grid-backdrop.mbx-grid-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

/* ── Selector de columnas ───────────────────────────────────── */

.mbx-grid-chooser.mbx-grid-chooser {
    position: fixed;
    z-index: 1200;
    width: 290px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    background: var(--mb-t1-surface, #FFFFFF);
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(15,23,42,.2);
    overflow: hidden;
}

.mbx-grid-chooser-head.mbx-grid-chooser-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .65rem;
    border-bottom: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    font-weight: 700;
    font-size: .8rem;
}

.mbx-grid-chooser-body.mbx-grid-chooser-body { overflow-y: auto; padding: .3rem; }

.mbx-grid-chooser-item.mbx-grid-chooser-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .45rem;
    border-radius: 6px;
    font-size: .78rem;
    cursor: pointer;
}

.mbx-grid-chooser-item.mbx-grid-chooser-item:hover { background: var(--mb-t1-primary-light, #eff6ff); }
.mbx-grid-chooser-item.mbx-grid-chooser-item input { accent-color: var(--mb-t1-primary, #2563eb); }
.mbx-grid-chooser-item.mbx-grid-chooser-item .mbx-grid-chooser-type {
    margin-left: auto;
    font-size: .66rem;
    color: var(--mb-t1-text-faint, #94a3b8);
    text-transform: uppercase;
}

.mbx-grid-chooser-foot.mbx-grid-chooser-foot {
    display: flex;
    gap: .35rem;
    padding: .45rem .55rem;
    border-top: 1px solid var(--mb-t1-border-faint, #F4F7FB);
}

/* ── Arrastre de columnas (lo dibuja mb-grid.js) ────────────── */

.mbx-grid-ghost.mbx-grid-ghost {
    position: fixed;
    z-index: 1400;
    pointer-events: none;
    padding: .3rem .6rem;
    background: var(--mb-t1-primary, #2563eb);
    color: var(--mb-t1-surface, #ffffff);
    font-size: .74rem;
    font-weight: 700;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(37,99,235,.35);
    opacity: .92;
    transform: translate(-50%, -140%);
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mbx-grid-dropmark.mbx-grid-dropmark {
    position: fixed;
    z-index: 1399;
    width: 3px;
    background: var(--mb-t1-primary, #2563eb);
    pointer-events: none;
    border-radius: 2px;
}

.mbx-grid-dragging.mbx-grid-dragging { opacity: .45; }

/* ── Etiquetas y barras dentro de la celda ──────────────────── */

.mbx-grid-badge.mbx-grid-badge {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 700;
    background: var(--mb-t1-primary-light, #eff6ff);
    color: var(--mb-t1-primary, #2563eb);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mbx-grid-progress-wrap.mbx-grid-progress-wrap {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.mbx-grid-progress-cell.mbx-grid-progress-cell {
    flex: 1 1 auto;
    min-width: 24px;
    height: 8px;
    border-radius: 4px;
    background: var(--mb-t1-border-faint, #F4F7FB);
    overflow: hidden;
}

.mbx-grid-progress-fill.mbx-grid-progress-fill {
    height: 100%;
    background: var(--mb-t1-primary, #2563eb);
    border-radius: 4px;
}

/* La cifra va al lado de la barra, no encima: así se lee igual con la barra
   llena que vacía. */
.mbx-grid-progress-label.mbx-grid-progress-label {
    flex: 0 0 auto;
    min-width: 34px;
    text-align: right;
    font-size: .7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mb-t1-text-muted, #64748b);
}

.mbx-grid-check.mbx-grid-check {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--mb-t1-border, #E2E8F0);
    border-radius: 4px;
    text-align: center;
    line-height: 12px;
    font-size: .66rem;
    color: var(--mb-t1-surface, #ffffff);
}

.mbx-grid-check.mbx-grid-check.is-on {
    background: var(--mb-t1-primary, #2563eb);
    border-color: var(--mb-t1-primary, #2563eb);
}

/* ── Cuadro de diálogo de reglas y layout ───────────────────── */

.mbx-grid-dialog-back.mbx-grid-dialog-back {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15,23,42,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.mbx-grid-dialog.mbx-grid-dialog {
    width: min(720px, 100%);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--mb-t1-surface, #FFFFFF);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(15,23,42,.3);
    overflow: hidden;
}

.mbx-grid-dialog-head.mbx-grid-dialog-head {
    display: flex;
    align-items: center;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    font-weight: 700;
}

.mbx-grid-dialog-body.mbx-grid-dialog-body { padding: .8rem .9rem; overflow: auto; }
.mbx-grid-dialog-foot.mbx-grid-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .6rem .9rem;
    border-top: 1px solid var(--mb-t1-border-faint, #F4F7FB);
}

.mbx-grid-xml.mbx-grid-xml {
    width: 100%;
    min-height: 320px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    line-height: 1.45;
    padding: .6rem;
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 8px;
    resize: vertical;
    color: inherit;
    background: var(--mb-t1-bg, #F4F8FD);
}

.mbx-grid-warn.mbx-grid-warn {
    margin-top: .5rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    background: var(--mb-t1-warning-bg, #fef3c7);
    color: #92400e;
    font-size: .74rem;
}

.mbx-grid-warn.mbx-grid-warn ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* ── Pantallas chicas ───────────────────────────────────────── */

@media (max-width: 640px) {
    .mbx-grid.mbx-grid { --mbx-bar-pad-x: .6rem; }
    .mbx-grid-toolbar.mbx-grid-toolbar { gap: .3rem; padding-top: .45rem; padding-bottom: .45rem; }
    .mbx-grid-btn.mbx-grid-btn span.mbx-grid-btn-text { display: none; }
    .mbx-grid-count.mbx-grid-count { width: 100%; margin-left: 0; }
}

/* Quien pida menos movimiento, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
    .mbx-grid-progress-bar.mbx-grid-progress-bar { animation: none; width: 100%; }
    .mbx-grid-btn.mbx-grid-btn { transition: none; }
}

/* ── Editores de Monteber dentro de la celda ────────────────────

   El grid usa por omisión los controles de Monteber.Editors. Vienen
   pensados para un formulario —con su etiqueta, su ayuda y su aire—,
   así que dentro de una celda hay que quitarles el margen y ajustarlos
   al alto de la fila. Los colores y el foco los pone su propia hoja
   (sección 1 de esta hoja); aquí sólo se acomodan.
   ================================================================ */

.mbx-grid-mbedit.mbx-grid-mbedit { width: 100%; }

.mbx-grid-mbedit.mbx-grid-mbedit .mbx-ed { gap: 0; }

.mbx-grid-mbedit.mbx-grid-mbedit .mbx-ed-field {
    padding: 0 .3rem;
    border-radius: 5px;
    min-height: calc(var(--mb-t1-grid-row-h, 34px) - 8px);
}

.mbx-grid-mbedit.mbx-grid-mbedit .mbx-ed-input {
    height: calc(var(--mb-t1-grid-row-h, 34px) - 10px);
    line-height: 1.2;
}

.mbx-grid-mbedit.mbx-grid-mbedit textarea.mbx-ed-input { height: auto; }

/* El mensaje del editor no cabe en la celda; el grid ya muestra el
   error en su propio globo (.mbx-grid-editor-error). */
.mbx-grid-mbedit.mbx-grid-mbedit .mbx-ed-message { display: none; }

/* La casilla se centra en la celda, como la de sólo lectura. */
.mbx-grid-mbedit.mbx-grid-mbedit .mbx-ed-plain { justify-content: center; }

/* En la fila de alta el foco es verde, igual que en los editores
   nativos: es la señal de "esto todavía no existe en la tabla". */
.mbx-grid-newrow-cell.mbx-grid-newrow-cell .mbx-grid-mbedit .mbx-ed-field:focus-within {
    border-color: var(--mb-t1-success, #16A34A);
    box-shadow: 0 0 0 2px var(--mb-t1-success-border, #BBF7D0);
}


/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN 3 · DISEÑADOR (Monteber.Grid.Designer)    clases mbx-gd-*
   ══════════════════════════════════════════════════════════════════════════ */

/* ================================================================
   Monteber.Grid.Designer — diseñador visual de cuadrículas.

   Prefijo mbx-gd- (convención MonteberThemeV1).

   Distribución: tres zonas fijas y una que crece.
     · barra superior     acciones y origen del diseño
     · panel izquierdo    lista de columnas
     · panel derecho      propiedades de lo seleccionado
     · centro             vista previa real, con el grid de verdad
   ================================================================ */

.mbx-gd.mbx-gd {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 520px;
    background: var(--mb-t1-bg, #f4f8fd);
    color: var(--mb-t1-text, #1f2937);
    font-size: .82rem;
}

.mbx-gd.mbx-gd *, .mbx-gd.mbx-gd *::before, .mbx-gd.mbx-gd *::after { box-sizing: border-box; }

/* ── Barra superior ─────────────────────────────────────────── */

.mbx-gd-bar.mbx-gd-bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    padding: .5rem .7rem;
    background: var(--mb-t1-surface, #ffffff);
    border-bottom: 1px solid var(--mb-t1-border, #e2e8f0);
}

.mbx-gd-title.mbx-gd-title {
    font-weight: 700;
    font-size: .9rem;
    margin-right: .4rem;
}

.mbx-gd-source.mbx-gd-source {
    font-size: .72rem;
    padding: .12rem .45rem;
    border-radius: 10px;
    background: var(--mb-t1-primary-light, #eff6ff);
    color: var(--mb-t1-primary, #2563eb);
    font-weight: 700;
}

.mbx-gd-dirty.mbx-gd-dirty {
    font-size: .72rem;
    color: var(--mb-t1-warning, #d97706);
    font-weight: 700;
}

.mbx-gd-spacer.mbx-gd-spacer { flex: 1 1 auto; }

.mbx-gd-btn.mbx-gd-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 30px;
    padding: 0 .6rem;
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 7px;
    background: var(--mb-t1-surface, #ffffff);
    color: var(--mb-t1-text-muted, #64748b);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.mbx-gd-btn.mbx-gd-btn:hover:not(:disabled) {
    background: var(--mb-t1-primary-light, #eff6ff);
    border-color: var(--mb-t1-primary-ring, #bfdbfe);
    color: var(--mb-t1-primary, #2563eb);
}

.mbx-gd-btn.mbx-gd-btn:disabled { opacity: .4; cursor: default; }

.mbx-gd-btn.mbx-gd-btn.is-primary {
    background: var(--mb-t1-primary, #2563eb);
    border-color: var(--mb-t1-primary, #2563eb);
    color: var(--mb-t1-surface, #ffffff);
}

.mbx-gd-btn.mbx-gd-btn.is-primary:hover:not(:disabled) {
    background: var(--mb-t1-primary-dark, #1d4ed8);
    color: var(--mb-t1-surface, #ffffff);
}

.mbx-gd-btn.mbx-gd-btn.is-danger { color: var(--mb-t1-danger, #dc2626); }

/* ── Cuerpo de tres zonas ───────────────────────────────────── */

.mbx-gd-body.mbx-gd-body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 330px;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
}

.mbx-gd-panel.mbx-gd-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--mb-t1-surface, #ffffff);
    border-right: 1px solid var(--mb-t1-border, #e2e8f0);
}

.mbx-gd-panel.mbx-gd-panel.is-right {
    border-right: none;
    border-left: 1px solid var(--mb-t1-border, #e2e8f0);
}

.mbx-gd-panel-head.mbx-gd-panel-head {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--mb-t1-border-faint, #f4f7fb);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mb-t1-text-faint, #94a3b8);
}

.mbx-gd-panel-body.mbx-gd-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .4rem;
}

.mbx-gd-center.mbx-gd-center {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: .6rem;
    gap: .5rem;
    overflow: auto;
}

/* ── Lista de columnas ──────────────────────────────────────── */

.mbx-gd-col.mbx-gd-col {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .4rem;
    border-radius: 7px;
    cursor: pointer;
    border: 1px solid transparent;
    user-select: none;
}

.mbx-gd-col.mbx-gd-col:hover { background: var(--mb-t1-bg, #f4f8fd); }

.mbx-gd-col.mbx-gd-col.is-selected {
    background: var(--mb-t1-primary-light, #eff6ff);
    border-color: var(--mb-t1-primary-ring, #bfdbfe);
}

.mbx-gd-col.mbx-gd-col.is-hidden .mbx-gd-col-name { opacity: .45; text-decoration: line-through; }

.mbx-gd-col-grip.mbx-gd-col-grip {
    cursor: grab;
    color: var(--mb-t1-text-faint, #94a3b8);
    font-size: .8rem;
    line-height: 1;
    touch-action: none;
}

.mbx-gd-col-name.mbx-gd-col-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.mbx-gd-col-type.mbx-gd-col-type {
    font-size: .64rem;
    text-transform: uppercase;
    color: var(--mb-t1-text-faint, #94a3b8);
    font-weight: 700;
}

.mbx-gd-col-badges.mbx-gd-col-badges { display: flex; gap: .15rem; }

.mbx-gd-tag.mbx-gd-tag {
    font-size: .6rem;
    font-weight: 800;
    padding: .05rem .25rem;
    border-radius: 4px;
    background: var(--mb-t1-border-faint, #f4f7fb);
    color: var(--mb-t1-text-muted, #64748b);
}

.mbx-gd-tag.mbx-gd-tag.is-editor { background: var(--mb-t1-primary-light, #eff6ff); color: var(--mb-t1-primary, #2563eb); }
.mbx-gd-tag.mbx-gd-tag.is-format { background: #f5f3ff; color: var(--mb-t1-purple, #8b5cf6); }
.mbx-gd-tag.mbx-gd-tag.is-group  { background: var(--mb-t1-success-bg, #dcfce7); color: var(--mb-t1-success, #16a34a); }

.mbx-gd-drop.mbx-gd-drop {
    height: 3px;
    margin: -2px 0;
    border-radius: 2px;
    background: var(--mb-t1-primary, #2563eb);
}

/* ── Campos del panel de propiedades ────────────────────────── */

.mbx-gd-group.mbx-gd-group {
    border-top: 1px solid var(--mb-t1-border-faint, #f4f7fb);
    padding: .5rem .1rem .2rem;
}

.mbx-gd-group.mbx-gd-group:first-child { border-top: none; }

.mbx-gd-group-title.mbx-gd-group-title {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mb-t1-text-faint, #94a3b8);
    margin-bottom: .35rem;
}

.mbx-gd-field.mbx-gd-field { margin-bottom: .45rem; }

.mbx-gd-field.mbx-gd-field > label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    color: var(--mb-t1-text-muted, #64748b);
    margin-bottom: .12rem;
}

.mbx-gd-field.mbx-gd-field input[type=text],
.mbx-gd-field.mbx-gd-field input[type=number],
.mbx-gd-field.mbx-gd-field select,
.mbx-gd-field.mbx-gd-field textarea {
    width: 100%;
    height: 28px;
    padding: 0 .4rem;
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 6px;
    font-size: .78rem;
    color: inherit;
    background: var(--mb-t1-surface, #ffffff);
    outline: none;
    font-family: inherit;
}

.mbx-gd-field.mbx-gd-field textarea { height: auto; padding: .3rem .4rem; resize: vertical; }

.mbx-gd-field.mbx-gd-field input:focus,
.mbx-gd-field.mbx-gd-field select:focus,
.mbx-gd-field.mbx-gd-field textarea:focus {
    border-color: var(--mb-t1-primary, #2563eb);
    box-shadow: 0 0 0 2px var(--mb-t1-primary-ring, #bfdbfe);
}

.mbx-gd-field.mbx-gd-field.is-invalid input,
.mbx-gd-field.mbx-gd-field.is-invalid textarea {
    border-color: var(--mb-t1-danger, #dc2626);
    box-shadow: 0 0 0 2px var(--mb-t1-danger-bg, #fee2e2);
}

.mbx-gd-error.mbx-gd-error {
    font-size: .68rem;
    color: var(--mb-t1-danger, #dc2626);
    margin-top: .1rem;
}

.mbx-gd-hint.mbx-gd-hint {
    font-size: .67rem;
    color: var(--mb-t1-text-faint, #94a3b8);
    margin-top: .1rem;
}

.mbx-gd-check.mbx-gd-check {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    padding: .12rem 0;
    cursor: pointer;
}

.mbx-gd-check.mbx-gd-check input { accent-color: var(--mb-t1-primary, #2563eb); }

.mbx-gd-checks.mbx-gd-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 .5rem;
}

.mbx-gd-row.mbx-gd-row { display: flex; gap: .4rem; }
.mbx-gd-row.mbx-gd-row > * { flex: 1 1 0; min-width: 0; }

/* ── Muestra del formato ────────────────────────────────────── */

.mbx-gd-sample.mbx-gd-sample {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    margin-top: .2rem;
    padding: .3rem .45rem;
    border-radius: 6px;
    background: var(--mb-t1-bg, #f4f8fd);
    border: 1px dashed var(--mb-t1-border, #e2e8f0);
    font-size: .76rem;
}

.mbx-gd-sample-label.mbx-gd-sample-label {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mb-t1-text-faint, #94a3b8);
    font-weight: 800;
}

.mbx-gd-sample-value.mbx-gd-sample-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Reglas de formato condicional ──────────────────────────── */

.mbx-gd-rule.mbx-gd-rule {
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 8px;
    margin-bottom: .4rem;
    overflow: hidden;
}

.mbx-gd-rule-head.mbx-gd-rule-head {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .45rem;
    background: var(--mb-t1-bg, #f4f8fd);
    cursor: pointer;
}

.mbx-gd-rule-name.mbx-gd-rule-name {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mbx-gd-rule.mbx-gd-rule.is-off .mbx-gd-rule-name { opacity: .5; text-decoration: line-through; }

.mbx-gd-rule-body.mbx-gd-rule-body { padding: .45rem; }

.mbx-gd-swatch.mbx-gd-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    vertical-align: middle;
}

.mbx-gd-preview-chip.mbx-gd-preview-chip {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 5px;
    font-size: .74rem;
    border: 1px solid var(--mb-t1-border-faint, #f4f7fb);
}

/* ── Vista previa ───────────────────────────────────────────── */

.mbx-gd-preview-head.mbx-gd-preview-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mb-t1-text-faint, #94a3b8);
}

.mbx-gd-empty.mbx-gd-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--mb-t1-text-faint, #94a3b8);
    background: var(--mb-t1-surface, #ffffff);
    border: 1px dashed var(--mb-t1-border, #e2e8f0);
    border-radius: 10px;
}

/* ── Diálogos (abrir archivo, XML, columna nueva) ───────────── */

.mbx-gd-modal-back.mbx-gd-modal-back {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15,23,42,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.mbx-gd-modal.mbx-gd-modal {
    width: min(760px, 100%);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--mb-t1-surface, #ffffff);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(15,23,42,.3);
    overflow: hidden;
}

.mbx-gd-modal-head.mbx-gd-modal-head {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--mb-t1-border-faint, #f4f7fb);
    font-weight: 700;
}

.mbx-gd-modal-body.mbx-gd-modal-body { padding: .8rem .9rem; overflow: auto; }

.mbx-gd-modal-foot.mbx-gd-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .6rem .9rem;
    border-top: 1px solid var(--mb-t1-border-faint, #f4f7fb);
}

.mbx-gd-xml.mbx-gd-xml {
    width: 100%;
    min-height: 340px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    line-height: 1.45;
    padding: .6rem;
    border: 1px solid var(--mb-t1-border, #e2e8f0);
    border-radius: 8px;
    resize: vertical;
    color: inherit;
    background: var(--mb-t1-bg, #f4f8fd);
}

.mbx-gd-warn.mbx-gd-warn {
    margin-top: .5rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    background: var(--mb-t1-warning-bg, #fef3c7);
    color: #92400e;
    font-size: .74rem;
}

.mbx-gd-warn.mbx-gd-warn ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* ── Pantallas angostas: los paneles se apilan ──────────────── */

@media (max-width: 1100px) {
    .mbx-gd-body.mbx-gd-body { grid-template-columns: 220px minmax(0, 1fr); }
    .mbx-gd-panel.mbx-gd-panel.is-right {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--mb-t1-border, #e2e8f0);
        max-height: 340px;
    }
}

@media (max-width: 760px) {
    .mbx-gd-body.mbx-gd-body { grid-template-columns: minmax(0, 1fr); }
    .mbx-gd-panel.mbx-gd-panel { border-right: none; border-bottom: 1px solid var(--mb-t1-border, #e2e8f0); max-height: 260px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN 4 · BARRAS (Monteber.Bars)   clases mbx-bar-*, mbx-rbn-*,
                                                mbx-float-*, mbx-dock-*
   ══════════════════════════════════════════════════════════════════════════ */

/* ================================================================
   Monteber.Bars — cinta, barras, menús, menús contextuales, barras
   flotantes y acomodo de paneles.

   MISMA REGLA DE COLOR que el resto del archivo: aquí no se inventa
   ni un color; todo sale de los tokens --mb-t1-* del tema de la
   aplicación, con el respaldo exacto que ese tema les da. Una empresa
   que personaliza su paleta cambia también sus barras sin tocar nada.

   La densidad está pensada para pantallas de captura: alturas de
   32-34px, como la cuadrícula, para que una pantalla con cinta arriba
   y cuadrícula abajo no se vea de dos tamaños distintos.
   ================================================================ */

/* ── Barra: el contenedor ───────────────────────────────────────── */

.mbx-bar.mbx-bar {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    padding: .25rem .35rem;
    background: var(--mb-t1-surface, #FFFFFF);
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius-sm, 10px);
    color: var(--mb-t1-text, #1F2937);
    font-size: var(--mb-t1-field-font, .8rem);
}

.mbx-bar.mbx-bar *, .mbx-bar.mbx-bar *::before, .mbx-bar.mbx-bar *::after { box-sizing: border-box; }

/* Sin marco: para meter la barra dentro de otra cosa (una tarjeta, el
   encabezado de un panel) sin que se vean dos recuadros encimados. */
.mbx-bar--bare.mbx-bar--bare {
    background: transparent;
    border-color: transparent;
    padding: 0;
}

.mbx-bar--dense.mbx-bar--dense { padding: .1rem .2rem; }

.mbx-bar--vertical.mbx-bar--vertical { flex-direction: column; align-items: stretch; }

.mbx-bar--vertical.mbx-bar--vertical .mbx-bar-items { flex-direction: column; align-items: stretch; }

/* La caja de los comandos se queda con el lugar sobrante y NO se
   desborda: es lo que permite medir cuántos caben. */
.mbx-bar-items.mbx-bar-items {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

/* Los comandos no se encogen: si se encogieran, medir cuántos caben no
   tendría sentido porque siempre cabrían todos, apachurrados. */
.mbx-bar-items.mbx-bar-items > * { flex: 0 0 auto; }

.mbx-bar-of.mbx-bar-of { flex: 0 0 auto; }

.mbx-bar-right.mbx-bar-right { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: .25rem; }

.mbx-bar-caption.mbx-bar-caption {
    flex: 0 0 auto;
    padding: 0 .4rem 0 .2rem;
    font-weight: 600;
    font-size: .74rem;
    color: var(--mb-t1-text-muted, #64748B);
    white-space: nowrap;
}

/* ── Comandos dentro de una barra ───────────────────────────────── */

.mbx-bar-itemwrap.mbx-bar-itemwrap { position: relative; display: inline-flex; }

.mbx-bar-itembox.mbx-bar-itembox { display: inline-flex; align-items: stretch; }

.mbx-bar-item.mbx-bar-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 28px;
    padding: .25rem .5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                border-color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-bar-item.mbx-bar-item:hover:not(:disabled) {
    background: var(--mb-t1-primary-light, #EFF6FF);
    border-color: var(--mb-t1-primary-ring, #BFDBFE);
}

.mbx-bar-item.mbx-bar-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--mb-t1-primary-ring, #BFDBFE);
}

.mbx-bar-item.mbx-bar-item:disabled { opacity: .45; cursor: default; }

/* Hundido: la casilla prendida y la opción elegida se ven igual, que es
   lo que espera quien viene del escritorio. */
.mbx-bar-item.mbx-bar-item.is-checked,
.mbx-bar-item.mbx-bar-item.is-open {
    background: var(--mb-t1-primary-light, #EFF6FF);
    border-color: var(--mb-t1-primary-ring, #BFDBFE);
    color: var(--mb-t1-primary-dark, #1D4ED8);
}

.mbx-bar-item--icon.mbx-bar-item--icon { padding: .25rem .4rem; }

.mbx-bar-glyph.mbx-bar-glyph { font-size: .95rem; line-height: 1; display: inline-flex; }

.mbx-bar-text.mbx-bar-text { min-width: 0; }

.mbx-bar-arrow.mbx-bar-arrow { font-size: .6rem; opacity: .6; }

.mbx-bar-badge.mbx-bar-badge {
    display: inline-flex;
    align-items: center;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: var(--mb-t1-primary, #2563EB);
    color: var(--mb-t1-surface, #FFFFFF);
    font-size: .62rem;
    font-weight: 700;
    justify-content: center;
}

/* Comando partido: el cuerpo y la flecha son dos botones pegados, con
   una raya en medio para que se vea que hacen cosas distintas. */
.mbx-bar-itembox--split.mbx-bar-itembox--split .mbx-bar-item { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.mbx-bar-splitarrow.mbx-bar-splitarrow {
    display: inline-flex;
    align-items: center;
    padding: 0 .25rem;
    border: 1px solid transparent;
    border-left: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: 0 8px 8px 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.mbx-bar-splitarrow.mbx-bar-splitarrow:hover:not(:disabled),
.mbx-bar-splitarrow.mbx-bar-splitarrow.is-open {
    background: var(--mb-t1-primary-light, #EFF6FF);
    border-color: var(--mb-t1-primary-ring, #BFDBFE);
}

.mbx-bar-splitarrow.mbx-bar-splitarrow:disabled { opacity: .45; cursor: default; }

.mbx-bar-sep.mbx-bar-sep {
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    margin: .2rem .3rem;
    background: var(--mb-t1-border, #E2E8F0);
}

.mbx-bar--vertical.mbx-bar--vertical .mbx-bar-sep { width: auto; height: 1px; margin: .3rem .2rem; }

.mbx-bar-static.mbx-bar-static {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .45rem;
    color: var(--mb-t1-text-muted, #64748B);
    white-space: nowrap;
}

.mbx-bar-custom.mbx-bar-custom { display: inline-flex; align-items: center; padding: 0 .2rem; }

/* ── Barra de menús ─────────────────────────────────────────────── */

.mbx-bar--menubar.mbx-bar--menubar {
    gap: 0;
    padding: 0 .35rem;
    border-radius: 0;
    border-width: 0 0 1px 0;
    background: var(--mb-t1-bg, #F4F8FD);
}

.mbx-bar-item--menubar.mbx-bar-item--menubar {
    border-radius: 6px;
    padding: .3rem .55rem;
    min-height: 30px;
}

/* ── Menú desplegable ───────────────────────────────────────────── */

.mbx-bar-menu.mbx-bar-menu {
    position: absolute;
    z-index: 1200;
    min-width: 12rem;
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .25rem;
    background: var(--mb-t1-surface, #FFFFFF);
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius-sm, 10px);
    box-shadow: var(--mb-t1-shadow-md, 0 10px 28px rgba(15,23,42,.08));
    color: var(--mb-t1-text, #1F2937);
    font-size: var(--mb-t1-field-font, .8rem);
}

/* En la capa superior del navegador el menú trae sus propios márgenes y
   bordes; aquí se le quitan para que siga viéndose como nuestro panel. */
.mbx-bar-menu.mbx-bar-menu:popover-open {
    inset: auto;
    margin: 0;
    padding: .25rem;
    width: auto;
    height: auto;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    background: var(--mb-t1-surface, #FFFFFF);
    color: var(--mb-t1-text, #1F2937);
}

.mbx-bar-menu-row.mbx-bar-menu-row { position: relative; }

.mbx-bar-menu-item.mbx-bar-menu-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 28px;
    padding: .3rem .5rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mbx-bar-menu-item.mbx-bar-menu-item:hover:not(:disabled),
.mbx-bar-menu-item.mbx-bar-menu-item:focus-visible,
.mbx-bar-menu-item.mbx-bar-menu-item.is-open {
    outline: none;
    background: var(--mb-t1-primary-light, #EFF6FF);
}

.mbx-bar-menu-item.mbx-bar-menu-item:disabled { opacity: .45; cursor: default; }

.mbx-bar-menu-item.mbx-bar-menu-item.is-checked { color: var(--mb-t1-primary-dark, #1D4ED8); font-weight: 600; }

/* La columna de la izquierda es fija aunque el comando no traiga icono:
   sin ella los textos bailan de renglón en renglón. */
.mbx-bar-menu-mark.mbx-bar-menu-mark {
    flex: 0 0 auto;
    width: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .75;
}

.mbx-bar-check.mbx-bar-check { color: var(--mb-t1-primary, #2563EB); font-weight: 700; }

.mbx-bar-menu-text.mbx-bar-menu-text { flex: 1 1 auto; min-width: 0; }

.mbx-bar-menu-shortcut.mbx-bar-menu-shortcut {
    flex: 0 0 auto;
    padding-left: 1.5rem;
    color: var(--mb-t1-text-faint, #94A3B8);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}

.mbx-bar-menu-arrow.mbx-bar-menu-arrow { flex: 0 0 auto; font-size: .7rem; opacity: .6; }

.mbx-bar-menu-sep.mbx-bar-menu-sep {
    height: 1px;
    margin: .25rem .3rem;
    background: var(--mb-t1-border-faint, #F4F7FB);
}

.mbx-bar-menu-static.mbx-bar-menu-static {
    padding: .35rem .5rem .2rem;
    color: var(--mb-t1-text-faint, #94A3B8);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.mbx-bar-menu-custom.mbx-bar-menu-custom { padding: .25rem .5rem; }

.mbx-bar-menu-empty.mbx-bar-menu-empty {
    padding: .5rem .6rem;
    color: var(--mb-t1-text-faint, #94A3B8);
    white-space: nowrap;
}

/* ── Cinta ──────────────────────────────────────────────────────── */

/* La cinta es lo primero que se ve al abrir una pantalla, y la única
   barra que ocupa el ancho completo: aquí sí se justifica trabajar la
   apariencia más que en una barra suelta. Tres cosas hacen el efecto, y
   ninguna es adorno:

     · el ENCABEZADO es una banda con degradado y el cuerpo es blanco,
       así que la pestaña elegida se ve montada sobre el cuerpo —como en
       el escritorio— en vez de flotando en un rectángulo plano;
     · cada comando grande trae su PLACA de icono con relieve, que es lo
       que deja alcanzarlo sin leer, y lo que rompe la fila de iconos
       sueltos que se veía antes;
     · las rayas entre grupos se DESVANECEN en las puntas; una línea de
       borde a borde parte la cinta en casillas y la vuelve una tabla.

   Todo sale de los tokens del tema: si una empresa cambia su color, la
   cinta cambia con ella, degradados incluidos. Los pocos valores que no
   son de la paleta —las sombras— son negros transparentes, que
   funcionan sobre cualquier color. */

.mbx-rbn.mbx-rbn {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--mb-t1-surface, #FFFFFF);
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius, 14px);
    box-shadow: var(--mb-t1-shadow, 0 2px 8px rgba(15,23,42,.05));
    color: var(--mb-t1-text, #1F2937);
    font-size: var(--mb-t1-field-font, .8rem);
}

.mbx-rbn.mbx-rbn *, .mbx-rbn.mbx-rbn *::before, .mbx-rbn.mbx-rbn *::after { box-sizing: border-box; }

/* ── Encabezado ─────────────────────────────────────────────────── */

.mbx-rbn-head.mbx-rbn-head {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    padding: .35rem .5rem 0;
    border-bottom: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius, 14px) var(--mb-t1-radius, 14px) 0 0;
    background: linear-gradient(180deg, var(--mb-t1-surface, #FFFFFF) 0%, var(--mb-t1-bg, #F4F8FD) 100%);
}

.mbx-rbn-appwrap.mbx-rbn-appwrap { position: relative; display: flex; }

/* El botón de la aplicación es el único elemento de color sólido de la
   cinta, y es a propósito: marca dónde empieza todo. */
.mbx-rbn-app.mbx-rbn-app {
    align-self: center;
    margin-bottom: .35rem;
    padding: .42rem .95rem;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(160deg, var(--mb-t1-primary, #2563EB), var(--mb-t1-primary-dark, #1D4ED8));
    color: var(--mb-t1-surface, #FFFFFF);
    font: inherit;
    font-weight: 600;
    letter-spacing: .015em;
    box-shadow: 0 1px 2px rgba(15,23,42,.2), inset 0 1px 0 rgba(255,255,255,.2);
    cursor: pointer;
    transition: box-shadow var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                transform var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                filter var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-rbn-app.mbx-rbn-app:hover {
    filter: brightness(1.07);
    box-shadow: 0 4px 12px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.2);
}

/* Abierto se hunde: el menú ya está desplegado abajo y el botón tiene
   que verse oprimido, no resaltado. */
.mbx-rbn-app.mbx-rbn-app.is-open {
    transform: translateY(1px);
    filter: brightness(.96);
    box-shadow: inset 0 2px 5px rgba(15,23,42,.3);
}

.mbx-rbn-app.mbx-rbn-app:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--mb-t1-primary-ring, #BFDBFE);
}

/* ── Pestañas ───────────────────────────────────────────────────── */

/* La pestaña elegida sobresale un píxel hacia abajo para pegarse al
   cuerpo; sin «overflow-y: hidden» ese píxel le saca al navegador una
   barra de desplazamiento vertical en una tira de 32px de alto. */
.mbx-rbn-tabs.mbx-rbn-tabs {
    display: flex;
    align-items: flex-end;
    gap: .15rem;
    flex: 1 1 auto;
    min-width: 0;
    padding-top: .15rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.mbx-rbn-tab.mbx-rbn-tab {
    position: relative;
    padding: .45rem .95rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: transparent;
    color: var(--mb-t1-text-muted, #64748B);
    font: inherit;
    font-weight: 500;
    letter-spacing: .015em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-rbn-tab.mbx-rbn-tab:hover:not(.is-active) {
    background: var(--mb-t1-primary-light, #EFF6FF);
    color: var(--mb-t1-primary-dark, #1D4ED8);
}

.mbx-rbn-tab.mbx-rbn-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--mb-t1-primary-ring, #BFDBFE);
}

/* La pestaña elegida se pega al cuerpo: el borde de abajo se corre un
   píxel sobre la raya del encabezado, y una sombra hacia arriba la
   levanta del resto. */
.mbx-rbn-tab.mbx-rbn-tab.is-active {
    background: var(--mb-t1-surface, #FFFFFF);
    border-color: var(--mb-t1-border, #E2E8F0);
    color: var(--mb-t1-primary-dark, #1D4ED8);
    font-weight: 600;
    margin-bottom: -1px;
    padding-bottom: calc(.45rem + 1px);
    box-shadow: 0 -3px 8px rgba(15,23,42,.05);
}

/* La rayita de color de arriba: es lo que hace que la pestaña elegida se
   vea elegida de reojo, sin tener que leer cuál está en blanco. */
.mbx-rbn-tab.mbx-rbn-tab.is-active::before {
    content: "";
    position: absolute;
    top: -1px;
    left: .5rem;
    right: .5rem;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, var(--mb-t1-primary, #2563EB), var(--mb-t1-primary-dark, #1D4ED8));
}

/* Pestañas de contexto: las que sólo salen cuando hay algo
   seleccionado. Van bajo su título, con su propio color y sobre un
   tinte, para que se note de lejos que pertenecen a otra cosa y que se
   van a ir. */
.mbx-rbn-category.mbx-rbn-category {
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    margin: 0 .4rem;
    border-radius: 9px 9px 0 0;
    background: var(--mb-t1-border-faint, #F4F7FB);
    background: color-mix(in srgb, var(--mb-t1-purple, #8b5cf6) 9%, transparent);
}

.mbx-rbn-category-title.mbx-rbn-category-title {
    text-align: center;
    padding: .16rem .6rem .06rem;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mb-t1-purple, #8b5cf6);
    border-top: 2px solid var(--mb-t1-purple, #8b5cf6);
    border-radius: 9px 9px 0 0;
}

.mbx-rbn-category-tabs.mbx-rbn-category-tabs { display: flex; gap: .15rem; padding: 0 .15rem; }

.mbx-rbn-category.mbx-rbn-category .mbx-rbn-tab.is-active { color: var(--mb-t1-purple, #8b5cf6); }

.mbx-rbn-category.mbx-rbn-category .mbx-rbn-tab.is-active::before {
    background: var(--mb-t1-purple, #8b5cf6);
}

/* ── Acceso rápido y minimizar ──────────────────────────────────── */

/* Los comandos de todo el día viven en su propia pastilla, despegados
   de las pestañas: son de la aplicación entera, no de la pestaña que
   esté abierta, y conviene que se vea. */
.mbx-rbn-qat.mbx-rbn-qat {
    display: flex;
    align-items: center;
    gap: .1rem;
    flex: 0 0 auto;
    align-self: center;
    margin-bottom: .35rem;
    padding: .12rem .2rem;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: 999px;
    background: var(--mb-t1-surface, #FFFFFF);
    box-shadow: var(--mb-t1-shadow, 0 2px 8px rgba(15,23,42,.05));
}

.mbx-rbn-qat.mbx-rbn-qat .mbx-bar-item {
    min-height: 24px;
    padding: .2rem .4rem;
    border-radius: 999px;
}

.mbx-rbn-min.mbx-rbn-min {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: .1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mb-t1-text-muted, #64748B);
    font-size: .7rem;
    cursor: pointer;
    transition: background-color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-rbn-min.mbx-rbn-min:hover {
    background: var(--mb-t1-primary-light, #EFF6FF);
    color: var(--mb-t1-primary-dark, #1D4ED8);
}

.mbx-rbn-min.mbx-rbn-min:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--mb-t1-primary-ring, #BFDBFE);
}

/* ── Cuerpo ─────────────────────────────────────────────────────── */

/* El degradado hacia el final no es decoración: apoya la fila de
   títulos de grupo, que si no queda flotando sobre el blanco. */
.mbx-rbn-body.mbx-rbn-body {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: .55rem .5rem .3rem;
    overflow-x: auto;
    scrollbar-width: thin;
    background: linear-gradient(180deg, var(--mb-t1-surface, #FFFFFF) 60%, var(--mb-t1-bg, #F4F8FD) 100%);
    border-radius: 0 0 var(--mb-t1-radius, 14px) var(--mb-t1-radius, 14px);
}

/* Cinta minimizada asomada: se dibuja ENCIMA de la pantalla, no le
   quita lugar. Se recoge sola al elegir un comando o al hacer clic
   afuera; por eso lleva sombra de panel flotante y no de tarjeta. */
.mbx-rbn-body.mbx-rbn-body.is-peek {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-top: 0;
    box-shadow: var(--mb-t1-shadow-lg, 0 20px 50px rgba(15,23,42,.12));
}

/* ── Grupo de la cinta ──────────────────────────────────────────── */

.mbx-rbn-group.mbx-rbn-group {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    padding: 0 .55rem;
}

/* La raya entre grupos se desvanece en las puntas. Una línea entera de
   borde a borde parte la cinta en casillas y la hace ver como una
   tabla; así sólo separa. */
.mbx-rbn-group.mbx-rbn-group::after {
    content: "";
    position: absolute;
    top: .3rem;
    bottom: .95rem;
    right: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--mb-t1-border, #E2E8F0) 20%, var(--mb-t1-border, #E2E8F0) 80%, transparent);
}

.mbx-rbn-group.mbx-rbn-group:last-child::after { display: none; }

.mbx-rbn-group-body.mbx-rbn-group-body {
    display: flex;
    align-items: stretch;
    gap: .15rem;
    flex: 1 1 auto;
    min-height: 4.9rem;
}

.mbx-rbn-group-free.mbx-rbn-group-free {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .35rem;
}

/* La columna de comandos chicos: hasta tres, y empieza otra. Se estiran
   al ancho de la columna para que los textos queden alineados y no
   escalonados. */
.mbx-rbn-stack.mbx-rbn-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: .1rem;
}

.mbx-rbn-stack.mbx-rbn-stack .mbx-bar-item { justify-content: flex-start; }

/* Columna fija para el icono: sin ella, un comando con icono ancho
   recorre su texto y la columna se ve chueca. */
.mbx-rbn-stack.mbx-rbn-stack .mbx-bar-glyph {
    width: 1.15rem;
    justify-content: center;
    flex: 0 0 auto;
}

.mbx-rbn-group-sep.mbx-rbn-group-sep {
    width: 1px;
    margin: .3rem .3rem .9rem;
    background: linear-gradient(180deg, transparent, var(--mb-t1-border-faint, #F4F7FB) 20%, var(--mb-t1-border-faint, #F4F7FB) 80%, transparent);
}

.mbx-rbn-group-caption.mbx-rbn-group-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding-top: .3rem;
    color: var(--mb-t1-text-faint, #94A3B8);
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

/* El lanzador del grupo sólo se asoma cuando el puntero está encima: en
   reposo, ocho flechitas repetidas al pie de la cinta son ruido. Con el
   teclado se asoma al recibir el foco, que si no, no habría manera de
   llegar a él. */
.mbx-rbn-launcher.mbx-rbn-launcher {
    opacity: 0;
    border: 0;
    border-radius: 5px;
    padding: 0 .2rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    transition: opacity var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                background-color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-rbn-group.mbx-rbn-group:hover .mbx-rbn-launcher,
.mbx-rbn-launcher.mbx-rbn-launcher:focus-visible { opacity: 1; }

.mbx-rbn-launcher.mbx-rbn-launcher:hover {
    background: var(--mb-t1-primary-light, #EFF6FF);
    color: var(--mb-t1-primary, #2563EB);
}

.mbx-rbn-launcher.mbx-rbn-launcher:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--mb-t1-primary-ring, #BFDBFE);
}

/* Donde no hay puntero no hay «encima»: en la tableta el lanzador se
   queda siempre a la vista, que si no, no habría manera de abrirlo. */
@media (hover: none) {
    .mbx-rbn-launcher.mbx-rbn-launcher { opacity: 1; }
}

/* ── Comandos de la cinta ───────────────────────────────────────── */

/* El comando grande: placa de icono arriba, texto abajo, del alto
   completo del grupo. Es el que se alcanza sin ver. */
.mbx-bar-item--large.mbx-bar-item--large {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
    min-width: 4.2rem;
    max-width: 6.5rem;
    height: 100%;
    padding: .35rem .45rem;
    border-radius: 10px;
    text-align: center;
    white-space: normal;
    line-height: 1.15;
    transition: transform var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                background-color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

/* En el comando grande el realce lo lleva la placa, no el botón: teñir
   los dos deja un recuadro dentro de otro. */
.mbx-bar-item--large.mbx-bar-item--large:hover:not(:disabled) {
    background: transparent;
    border-color: transparent;
    transform: translateY(-1px);
}

/* La placa del icono. Es lo que le da relieve a la cinta: sin ella, doce
   iconos sueltos sobre blanco se leen como una lista, no como comandos. */
.mbx-bar-item--large.mbx-bar-item--large .mbx-bar-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: 10px;
    background: linear-gradient(180deg, var(--mb-t1-surface, #FFFFFF), var(--mb-t1-bg, #F4F8FD));
    box-shadow: 0 1px 2px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.9);
    font-size: 1.35rem;
    transition: border-color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                box-shadow var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1)),
                background var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-bar-item--large.mbx-bar-item--large:hover:not(:disabled) .mbx-bar-glyph {
    border-color: var(--mb-t1-primary-ring, #BFDBFE);
    background: linear-gradient(180deg, var(--mb-t1-surface, #FFFFFF), var(--mb-t1-primary-light, #EFF6FF));
    box-shadow: 0 4px 10px rgba(15,23,42,.1);
}

.mbx-bar-item--large.mbx-bar-item--large.is-checked .mbx-bar-glyph,
.mbx-bar-item--large.mbx-bar-item--large.is-open .mbx-bar-glyph {
    border-color: var(--mb-t1-primary-ring, #BFDBFE);
    background: var(--mb-t1-primary-light, #EFF6FF);
}

.mbx-bar-item--large.mbx-bar-item--large.is-checked,
.mbx-bar-item--large.mbx-bar-item--large.is-open {
    background: transparent;
    border-color: transparent;
}

.mbx-bar-item--large.mbx-bar-item--large .mbx-bar-text {
    font-size: .71rem;
    color: var(--mb-t1-text, #1F2937);
}

.mbx-bar-item--large.mbx-bar-item--large.is-checked .mbx-bar-text,
.mbx-bar-item--large.mbx-bar-item--large.is-open .mbx-bar-text {
    color: var(--mb-t1-primary-dark, #1D4ED8);
    font-weight: 600;
}

/* El contador va en la esquina de la placa, como en el escritorio: al
   final del texto se pierde entre dos renglones. */
.mbx-bar-item--large.mbx-bar-item--large .mbx-bar-badge {
    position: absolute;
    top: .2rem;
    right: .35rem;
    box-shadow: 0 0 0 2px var(--mb-t1-surface, #FFFFFF);
}

/* El comando chico de la cinta. */
.mbx-bar-item--rbn.mbx-bar-item--rbn {
    min-height: 26px;
    padding: .2rem .45rem;
    border-radius: 7px;
}

/* En un comando grande partido, la flecha es una columna del alto
   completo pegada a la placa, con su raya en medio: es lo que avisa que
   el cuerpo y la flecha hacen cosas distintas. */
.mbx-rbn-group.mbx-rbn-group .mbx-bar-itembox--split .mbx-bar-item { border-radius: 10px 0 0 10px; }

.mbx-rbn-group.mbx-rbn-group .mbx-bar-splitarrow {
    padding: 0 .32rem;
    border-radius: 0 10px 10px 0;
}

.mbx-rbn-group.mbx-rbn-group .mbx-bar-splitarrow .mbx-bar-arrow { font-size: .75rem; opacity: .85; }

/* ── Menos movimiento ───────────────────────────────────────────── */

/* Quien pidió menos animación en su sistema no tiene por qué ver la
   cinta brincar: se quedan los colores, se va el movimiento. */
@media (prefers-reduced-motion: reduce) {

    .mbx-rbn.mbx-rbn *,
    .mbx-rbn-body.mbx-rbn-body * {
        transition-duration: .01ms;
    }

    .mbx-bar-item--large.mbx-bar-item--large:hover:not(:disabled) { transform: none; }
    .mbx-rbn-app.mbx-rbn-app.is-open { transform: none; }
}

/* ── Barra flotante ─────────────────────────────────────────────── */

.mbx-float.mbx-float {
    position: fixed;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    min-width: 8rem;
    background: var(--mb-t1-surface, #FFFFFF);
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius-sm, 10px);
    box-shadow: var(--mb-t1-shadow-lg, 0 20px 50px rgba(15,23,42,.12));
    color: var(--mb-t1-text, #1F2937);
    font-size: var(--mb-t1-field-font, .8rem);
}

.mbx-float.mbx-float *, .mbx-float.mbx-float *::before, .mbx-float.mbx-float *::after { box-sizing: border-box; }

.mbx-float-head.mbx-float-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .2rem .3rem .2rem .5rem;
    border-bottom: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    background: var(--mb-t1-bg, #F4F8FD);
    border-radius: var(--mb-t1-radius-sm, 10px) var(--mb-t1-radius-sm, 10px) 0 0;
    cursor: move;
    user-select: none;
}

.mbx-float-title.mbx-float-title { font-size: .7rem; font-weight: 600; color: var(--mb-t1-text-muted, #64748B); }

.mbx-float-close.mbx-float-close {
    border: 0;
    border-radius: 5px;
    padding: 0 .25rem;
    background: transparent;
    color: var(--mb-t1-text-muted, #64748B);
    cursor: pointer;
    line-height: 1.4;
}

.mbx-float-close.mbx-float-close:hover { background: var(--mb-t1-danger-bg, #fee2e2); color: var(--mb-t1-danger, #DC2626); }

.mbx-float-body.mbx-float-body { display: flex; align-items: center; gap: .15rem; padding: .3rem; }

.mbx-float--vertical.mbx-float--vertical .mbx-float-body { flex-direction: column; align-items: stretch; }

/* ── Acomodo de paneles ─────────────────────────────────────────── */

.mbx-dock.mbx-dock {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 20rem;
    background: var(--mb-t1-bg, #F4F8FD);
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius, 14px);
    overflow: hidden;
    color: var(--mb-t1-text, #1F2937);
    font-size: var(--mb-t1-field-font, .8rem);
}

.mbx-dock.mbx-dock *, .mbx-dock.mbx-dock *::before, .mbx-dock.mbx-dock *::after { box-sizing: border-box; }

.mbx-dock-mid.mbx-dock-mid { display: flex; flex: 1 1 auto; min-height: 0; }

.mbx-dock-center.mbx-dock-center {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: var(--mb-t1-surface, #FFFFFF);
}

/* La orilla: ancho o alto propio, y el divisor pegado a su borde
   interior. */
.mbx-dock-zone.mbx-dock-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    background: var(--mb-t1-bg, #F4F8FD);
}

.mbx-dock-zone.mbx-dock-zone.is-left { border-right: 1px solid var(--mb-t1-border, #E2E8F0); }
.mbx-dock-zone.mbx-dock-zone.is-right { border-left: 1px solid var(--mb-t1-border, #E2E8F0); }
.mbx-dock-zone.mbx-dock-zone.is-top { border-bottom: 1px solid var(--mb-t1-border, #E2E8F0); }
.mbx-dock-zone.mbx-dock-zone.is-bottom { border-top: 1px solid var(--mb-t1-border, #E2E8F0); }

/* Los paneles de una orilla se turnan: se dibujan todos —para que
   ninguno pierda lo que tenía escrito— y sólo se ve el elegido. */
.mbx-dock-slot.mbx-dock-slot { display: none; flex: 1 1 auto; min-height: 0; }
.mbx-dock-slot.mbx-dock-slot.is-active { display: flex; }

.mbx-dock-splitter.mbx-dock-splitter {
    position: absolute;
    z-index: 5;
    background: transparent;
    transition: background-color var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-dock-splitter.mbx-dock-splitter:hover { background: var(--mb-t1-primary-ring, #BFDBFE); }

.mbx-dock-zone.mbx-dock-zone.is-left .mbx-dock-splitter { top: 0; bottom: 0; right: -3px; width: 6px; cursor: col-resize; }
.mbx-dock-zone.mbx-dock-zone.is-right .mbx-dock-splitter { top: 0; bottom: 0; left: -3px; width: 6px; cursor: col-resize; }
.mbx-dock-zone.mbx-dock-zone.is-top .mbx-dock-splitter { left: 0; right: 0; bottom: -3px; height: 6px; cursor: row-resize; }
.mbx-dock-zone.mbx-dock-zone.is-bottom .mbx-dock-splitter { left: 0; right: 0; top: -3px; height: 6px; cursor: row-resize; }

/* Pestañas de los paneles que comparten orilla. */
.mbx-dock-tabs.mbx-dock-tabs {
    display: flex;
    gap: .1rem;
    padding: .2rem;
    border-top: 1px solid var(--mb-t1-border, #E2E8F0);
    overflow-x: auto;
    scrollbar-width: thin;
}

.mbx-dock-tab.mbx-dock-tab {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .45rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--mb-t1-text-muted, #64748B);
    font: inherit;
    font-size: .72rem;
    white-space: nowrap;
    cursor: pointer;
}

.mbx-dock-tab.mbx-dock-tab:hover { background: var(--mb-t1-primary-light, #EFF6FF); }

.mbx-dock-tab.mbx-dock-tab.is-active {
    background: var(--mb-t1-surface, #FFFFFF);
    border-color: var(--mb-t1-border, #E2E8F0);
    color: var(--mb-t1-primary-dark, #1D4ED8);
    font-weight: 600;
}

/* La tira de la orilla con los paneles recogidos. */
.mbx-dock-rail.mbx-dock-rail {
    display: flex;
    gap: .2rem;
    padding: .2rem;
    background: var(--mb-t1-bg, #F4F8FD);
    border: 0 solid var(--mb-t1-border, #E2E8F0);
}

.mbx-dock-rail.mbx-dock-rail.is-left, .mbx-dock-rail.mbx-dock-rail.is-right { flex-direction: column; }
.mbx-dock-rail.mbx-dock-rail.is-left { border-right-width: 1px; }
.mbx-dock-rail.mbx-dock-rail.is-right { border-left-width: 1px; }
.mbx-dock-rail.mbx-dock-rail.is-top { border-bottom-width: 1px; }
.mbx-dock-rail.mbx-dock-rail.is-bottom { border-top-width: 1px; }

.mbx-dock-railtab.mbx-dock-railtab {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .4rem;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: 6px;
    background: var(--mb-t1-surface, #FFFFFF);
    color: var(--mb-t1-text-muted, #64748B);
    font: inherit;
    font-size: .72rem;
    white-space: nowrap;
    cursor: pointer;
}

.mbx-dock-railtab.mbx-dock-railtab:hover, .mbx-dock-railtab.mbx-dock-railtab.is-active {
    background: var(--mb-t1-primary-light, #EFF6FF);
    color: var(--mb-t1-primary-dark, #1D4ED8);
}

/* En las orillas verticales el texto de la pestaña va de canto, como en
   el escritorio: así la tira ocupa el ancho de un icono. */
.mbx-dock-rail.mbx-dock-rail.is-left .mbx-dock-railtab,
.mbx-dock-rail.mbx-dock-rail.is-right .mbx-dock-railtab {
    writing-mode: vertical-rl;
    padding: .4rem .3rem;
}

.mbx-dock-rail.mbx-dock-rail.is-right .mbx-dock-railtab { transform: rotate(180deg); }

/* El panel. */
.mbx-dock-panel.mbx-dock-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    background: var(--mb-t1-surface, #FFFFFF);
}

.mbx-dock-head.mbx-dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    padding: .25rem .3rem .25rem .5rem;
    background: var(--mb-t1-bg, #F4F8FD);
    border-bottom: 1px solid var(--mb-t1-border, #E2E8F0);
    cursor: move;
    user-select: none;
}

.mbx-dock-title.mbx-dock-title {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--mb-t1-text-muted, #64748B);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mbx-dock-actions.mbx-dock-actions { display: inline-flex; align-items: center; gap: .1rem; flex: 0 0 auto; }

.mbx-dock-btn.mbx-dock-btn {
    border: 0;
    border-radius: 5px;
    padding: .1rem .25rem;
    background: transparent;
    color: var(--mb-t1-text-muted, #64748B);
    font-size: .75rem;
    line-height: 1.3;
    cursor: pointer;
}

.mbx-dock-btn.mbx-dock-btn:hover { background: var(--mb-t1-primary-light, #EFF6FF); color: var(--mb-t1-primary-dark, #1D4ED8); }

.mbx-dock-content.mbx-dock-content { flex: 1 1 auto; min-height: 0; overflow: auto; padding: .5rem; }

/* El panel asomado: encima del documento, pegado a su orilla. */
.mbx-dock-flyout.mbx-dock-flyout {
    position: absolute;
    z-index: 40;
    display: flex;
    box-shadow: var(--mb-t1-shadow-lg, 0 20px 50px rgba(15,23,42,.12));
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    background: var(--mb-t1-surface, #FFFFFF);
}

.mbx-dock-flyout.mbx-dock-flyout.is-left { left: 0; top: 0; bottom: 0; }
.mbx-dock-flyout.mbx-dock-flyout.is-right { right: 0; top: 0; bottom: 0; }
.mbx-dock-flyout.mbx-dock-flyout.is-top { top: 0; left: 0; right: 0; }
.mbx-dock-flyout.mbx-dock-flyout.is-bottom { bottom: 0; left: 0; right: 0; }

/* El panel suelto. */
.mbx-dock-window.mbx-dock-window {
    position: fixed;
    z-index: 1100;
    display: flex;
    min-width: 12rem;
    min-height: 8rem;
    max-height: 70vh;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: var(--mb-t1-surface, #FFFFFF);
    box-shadow: var(--mb-t1-shadow-lg, 0 20px 50px rgba(15,23,42,.12));
    overflow: hidden;
    resize: both;
}

/* Contra qué orilla va a caer el panel que se está arrastrando. */
.mbx-dock-hint.mbx-dock-hint {
    position: absolute;
    z-index: 50;
    background: var(--mb-t1-primary-ring, #BFDBFE);
    opacity: .55;
    pointer-events: none;
}

.mbx-dock-hint.mbx-dock-hint.is-left { left: 0; top: 0; bottom: 0; width: 30%; }
.mbx-dock-hint.mbx-dock-hint.is-right { right: 0; top: 0; bottom: 0; width: 30%; }
.mbx-dock-hint.mbx-dock-hint.is-top { top: 0; left: 0; right: 0; height: 30%; }
.mbx-dock-hint.mbx-dock-hint.is-bottom { bottom: 0; left: 0; right: 0; height: 30%; }

/* ── Pantallas angostas ─────────────────────────────────────────── */

@media (max-width: 760px) {

    /* En el teléfono la cinta se queda en una fila de comandos: los
       grupos se apilan, y con ellos apilados la raya de separación
       —pensada para grupos lado a lado— sólo estorba. */
    .mbx-rbn-body.mbx-rbn-body { flex-wrap: wrap; }
    .mbx-rbn-group.mbx-rbn-group::after { display: none; }
    .mbx-bar-item--large.mbx-bar-item--large { max-width: 4.5rem; }
    .mbx-bar-item--large.mbx-bar-item--large .mbx-bar-glyph { width: 2rem; height: 2rem; font-size: 1.2rem; }

    /* Y el acomodo deja de repartir orillas: no hay ancho que repartir. */
    .mbx-dock-mid.mbx-dock-mid { flex-direction: column; }
    .mbx-dock-zone.mbx-dock-zone { width: auto !important; height: auto !important; max-height: 40vh; }
    .mbx-dock-splitter.mbx-dock-splitter { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN 5 · PANTALLA DE CAPTURA (Monteber.DataLayout)   clases mbx-dl-*
   ══════════════════════════════════════════════════════════════════════════

   Prefijo mbx-dl- (convención MonteberThemeV1).

   Distribución: una rejilla de TARJETAS, y dentro de cada tarjeta otra
   rejilla de campos. Las dos se declaran con atributos (data-cols,
   data-span) y no con un style en línea: un style en línea le gana a esta
   hoja, y entonces el acomodo no podría reacomodarse en el teléfono, que
   es justo lo que se necesita que haga.

   Por qué @media y no @container: un contenedor de consultas implica
   «contain: layout», y eso convierte a la tarjeta en el bloque contenedor
   de los desplegables (calendario, lista, búsqueda) en los navegadores que
   todavía no tienen la capa superior. El resultado sería una hoja inferior
   pegada a la tarjeta en vez de a la pantalla, en un teléfono. Para el caso
   en que el ancho de la ventana NO es el del layout —el lienzo del
   diseñador— está la clase .mbx-dl--narrow, que impone el acomodo de
   teléfono sin preguntarle a la ventana.
   ══════════════════════════════════════════════════════════════════════════ */

.mbx-dl.mbx-dl {
    --mbx-dl-gap: .7rem;
    --mbx-dl-pad: .75rem;
    --mbx-dl-col-gap: .8rem;

    display: flex;
    flex-direction: column;
    gap: var(--mbx-dl-gap);
    min-width: 0;
    color: var(--mb-t1-text, #1F2937);
    font-size: var(--mb-t1-field-font, .8rem);
}

.mbx-dl.mbx-dl *, .mbx-dl.mbx-dl *::before, .mbx-dl.mbx-dl *::after { box-sizing: border-box; }

.mbx-dl--sm.mbx-dl--sm { --mbx-dl-gap: .5rem; --mbx-dl-pad: .55rem; --mbx-dl-col-gap: .6rem; }
.mbx-dl--lg.mbx-dl--lg { --mbx-dl-gap: 1rem; --mbx-dl-pad: 1.05rem; --mbx-dl-col-gap: 1.1rem; }

/* ── Encabezado y pie ───────────────────────────────────────── */

.mbx-dl-head.mbx-dl-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.mbx-dl-title.mbx-dl-title {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    color: var(--mb-t1-text, #1F2937);
}

.mbx-dl-spacer.mbx-dl-spacer { flex: 1 1 auto; }

.mbx-dl-foot.mbx-dl-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    flex-wrap: wrap;
}

/* Lo que se descartó al abrir el layout. Se ve a propósito: un diseño que
   perdió campos tiene que notarse. */
.mbx-dl-warn.mbx-dl-warn {
    padding: .5rem .6rem;
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: var(--mb-t1-warning-bg, #FEF3C7);
    color: #92400e;
    font-size: .74rem;
}

/* ── Rejilla de tarjetas ────────────────────────────────────── */

.mbx-dl-grid.mbx-dl-grid {
    display: grid;
    gap: var(--mbx-dl-gap);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-width: 0;
}

.mbx-dl-grid.mbx-dl-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mbx-dl-grid.mbx-dl-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mbx-dl-grid.mbx-dl-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── La tarjeta ─────────────────────────────────────────────── */

.mbx-dl-card.mbx-dl-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    grid-column: span 1;
    background: var(--mb-t1-surface, #FFFFFF);
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius, 14px);
    box-shadow: var(--mb-t1-shadow, 0 2px 8px rgba(15,23,42,.05));
    overflow: hidden;
}

.mbx-dl-card.mbx-dl-card[data-span="2"] { grid-column: span 2; }
.mbx-dl-card.mbx-dl-card[data-span="3"] { grid-column: span 3; }
.mbx-dl-card.mbx-dl-card[data-span="4"] { grid-column: span 4; }

.mbx-dl-card-head.mbx-dl-card-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: .45rem var(--mbx-dl-pad);
    border: 0;
    border-bottom: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    background: var(--mb-t1-bg, #F4F8FD);
    color: var(--mb-t1-text, #1F2937);
    font-size: .78rem;
    font-weight: 700;
    text-align: left;
    justify-content: flex-start;
}

/* El encabezado que pliega es un botón de verdad (teclado y lector de
   pantalla), pero no tiene por qué verse como un botón. */
.mbx-dl-card-head.mbx-dl-card-head.is-toggle { cursor: pointer; font-family: inherit; }

.mbx-dl-card-head.mbx-dl-card-head.is-toggle:hover {
    background: var(--mb-t1-primary-light, #EFF6FF);
    color: var(--mb-t1-primary, #2563EB);
}

.mbx-dl-card-title.mbx-dl-card-title {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 1 1 auto;
    min-width: 0;
}

.mbx-dl-card-icon.mbx-dl-card-icon { font-size: .9rem; line-height: 1; }

.mbx-dl-chevron.mbx-dl-chevron {
    color: var(--mb-t1-text-faint, #94A3B8);
    font-size: .7rem;
}

.mbx-dl-card-hint.mbx-dl-card-hint {
    padding: 0 var(--mbx-dl-pad) .55rem;
    font-size: .68rem;
    color: var(--mb-t1-text-faint, #94A3B8);
}

/* ── Rejilla de campos ──────────────────────────────────────── */

.mbx-dl-card-body.mbx-dl-card-body {
    display: grid;
    gap: 0 var(--mbx-dl-col-gap);
    padding: var(--mbx-dl-pad);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.mbx-dl-card-body.mbx-dl-card-body[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mbx-dl-card-body.mbx-dl-card-body[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mbx-dl-card-body.mbx-dl-card-body[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mbx-dl-cell.mbx-dl-cell {
    position: relative;
    min-width: 0;
    grid-column: span 1;
    padding-bottom: .35rem;
}

.mbx-dl-cell.mbx-dl-cell[data-span="2"] { grid-column: span 2; }
.mbx-dl-cell.mbx-dl-cell[data-span="3"] { grid-column: span 3; }
.mbx-dl-cell.mbx-dl-cell[data-span="4"] { grid-column: span 4; }

/* El número de paso del tabulador. Es una ayuda de diseño, no adorno: sin
   verlo, el orden de captura sólo se descubre tecleando. */
.mbx-dl-step.mbx-dl-step {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 0 .22rem;
    border-radius: 4px;
    background: var(--mb-t1-primary-light, #EFF6FF);
    color: var(--mb-t1-primary, #2563EB);
    font-size: .6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* La pantalla en consulta: se ve, no se captura. Los editores ya se pintan
   apagados solos; aquí sólo se le quita el relieve al conjunto. */
.mbx-dl--locked.mbx-dl--locked .mbx-dl-card { box-shadow: none; }

/* ── Pantallas angostas ─────────────────────────────────────── */

/* Dos columnas de tarjetas no caben en una tableta en vertical; tres no
   caben en un portátil. Se baja de a poco, y en el teléfono todo va en una
   sola columna: un campo de captura a media pantalla no se puede llenar. */

@media (max-width: 1100px) {
    .mbx-dl-grid.mbx-dl-grid[data-cols="3"],
    .mbx-dl-grid.mbx-dl-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .mbx-dl-card.mbx-dl-card[data-span="3"],
    .mbx-dl-card.mbx-dl-card[data-span="4"] { grid-column: span 2; }

    .mbx-dl-card-body.mbx-dl-card-body[data-cols="3"],
    .mbx-dl-card-body.mbx-dl-card-body[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .mbx-dl-cell.mbx-dl-cell[data-span="3"],
    .mbx-dl-cell.mbx-dl-cell[data-span="4"] { grid-column: span 2; }
}

@media (max-width: 820px) {
    .mbx-dl-grid.mbx-dl-grid[data-cols="2"],
    .mbx-dl-grid.mbx-dl-grid[data-cols="3"],
    .mbx-dl-grid.mbx-dl-grid[data-cols="4"] { grid-template-columns: minmax(0, 1fr); }

    .mbx-dl-card.mbx-dl-card[data-span="2"],
    .mbx-dl-card.mbx-dl-card[data-span="3"],
    .mbx-dl-card.mbx-dl-card[data-span="4"] { grid-column: span 1; }
}

@media (max-width: 640px) {
    .mbx-dl-card-body.mbx-dl-card-body[data-cols="2"],
    .mbx-dl-card-body.mbx-dl-card-body[data-cols="3"],
    .mbx-dl-card-body.mbx-dl-card-body[data-cols="4"] { grid-template-columns: minmax(0, 1fr); }

    .mbx-dl-cell.mbx-dl-cell[data-span="2"],
    .mbx-dl-cell.mbx-dl-cell[data-span="3"],
    .mbx-dl-cell.mbx-dl-cell[data-span="4"] { grid-column: span 1; }

    /* En el teléfono la tarjeta pierde el redondeo grande: el ancho se
       aprovecha para el campo, no para el marco. */
    .mbx-dl-card.mbx-dl-card { border-radius: var(--mb-t1-radius-sm, 10px); }
    .mbx-dl.mbx-dl { --mbx-dl-pad: .6rem; }
}

/* El acomodo de teléfono impuesto, sin preguntarle a la ventana. Lo usa el
   lienzo del diseñador, donde el ancho que manda es el del panel. */
.mbx-dl--narrow.mbx-dl--narrow .mbx-dl-grid,
.mbx-dl--narrow.mbx-dl--narrow .mbx-dl-card-body { grid-template-columns: minmax(0, 1fr); }

.mbx-dl--narrow.mbx-dl--narrow .mbx-dl-card,
.mbx-dl--narrow.mbx-dl--narrow .mbx-dl-cell { grid-column: span 1; }


/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN 6 · DISEÑADOR DE CAPTURA (Monteber.DataLayout.Designer)
                                                       clases mbx-ld-*
   ══════════════════════════════════════════════════════════════════════════

   Prefijo mbx-ld- (convención MonteberThemeV1).

   Distribución: tres zonas fijas y una que crece.
     · barra superior     puntos de partida, deshacer, guardar
     · panel izquierdo    los campos del DataSet que faltan por acomodar
     · panel derecho      propiedades de lo seleccionado
     · centro             el lienzo, con los editores de verdad

   El lienzo REUTILIZA las clases mbx-dl-* de la pantalla real y agrega
   las de aquí encima de los mismos elementos. Es a propósito: si el
   lienzo tuviera su propio aspecto, lo que se diseña y lo que se ve al
   final acabarían distintos, y eso es exactamente lo que el diseñador
   existe para evitar.
   ══════════════════════════════════════════════════════════════════════════ */

.mbx-ld.mbx-ld {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 520px;
    background: var(--mb-t1-bg, #F4F8FD);
    color: var(--mb-t1-text, #1F2937);
    font-size: .82rem;
}

.mbx-ld.mbx-ld *, .mbx-ld.mbx-ld *::before, .mbx-ld.mbx-ld *::after { box-sizing: border-box; }

/* ── Barra superior ─────────────────────────────────────────── */

.mbx-ld-bar.mbx-ld-bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    padding: .5rem .7rem;
    background: var(--mb-t1-surface, #FFFFFF);
    border-bottom: 1px solid var(--mb-t1-border, #E2E8F0);
}

.mbx-ld-title.mbx-ld-title {
    font-weight: 700;
    font-size: .9rem;
    margin-right: .4rem;
}

.mbx-ld-source.mbx-ld-source {
    font-size: .72rem;
    padding: .12rem .45rem;
    border-radius: 10px;
    background: var(--mb-t1-primary-light, #EFF6FF);
    color: var(--mb-t1-primary, #2563EB);
    font-weight: 700;
}

.mbx-ld-dirty.mbx-ld-dirty {
    font-size: .72rem;
    color: var(--mb-t1-warning, #D97706);
    font-weight: 700;
}

.mbx-ld-spacer.mbx-ld-spacer { flex: 1 1 auto; }

.mbx-ld-sep.mbx-ld-sep {
    width: 1px;
    height: 22px;
    background: var(--mb-t1-border, #E2E8F0);
}

.mbx-ld-btn.mbx-ld-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 30px;
    padding: 0 .6rem;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: 7px;
    background: var(--mb-t1-surface, #FFFFFF);
    color: var(--mb-t1-text-muted, #64748B);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.mbx-ld-btn.mbx-ld-btn:hover:not(:disabled) {
    background: var(--mb-t1-primary-light, #EFF6FF);
    border-color: var(--mb-t1-primary-ring, #BFDBFE);
    color: var(--mb-t1-primary, #2563EB);
}

.mbx-ld-btn.mbx-ld-btn:disabled { opacity: .4; cursor: default; }

.mbx-ld-btn.mbx-ld-btn.is-primary {
    background: var(--mb-t1-primary, #2563EB);
    border-color: var(--mb-t1-primary, #2563EB);
    color: var(--mb-t1-surface, #FFFFFF);
}

.mbx-ld-btn.mbx-ld-btn.is-primary:hover:not(:disabled) {
    background: var(--mb-t1-primary-dark, #1D4ED8);
    color: var(--mb-t1-surface, #FFFFFF);
}

.mbx-ld-icon.mbx-ld-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--mb-t1-text-faint, #94A3B8);
    font-size: .72rem;
    cursor: pointer;
}

.mbx-ld-icon.mbx-ld-icon:hover {
    background: var(--mb-t1-primary-light, #EFF6FF);
    color: var(--mb-t1-primary, #2563EB);
}

.mbx-ld-icon.mbx-ld-icon.is-danger:hover {
    background: var(--mb-t1-danger-bg, #FEE2E2);
    color: var(--mb-t1-danger, #DC2626);
}

/* ── Avisos ─────────────────────────────────────────────────── */

.mbx-ld-warn.mbx-ld-warn {
    margin: .4rem .7rem 0;
    padding: .5rem .6rem;
    border-radius: 8px;
    background: var(--mb-t1-warning-bg, #FEF3C7);
    color: #92400e;
    font-size: .74rem;
}

.mbx-ld-warn.mbx-ld-warn ul { margin: .3rem 0 0; padding-left: 1.1rem; }

.mbx-ld-warn.mbx-ld-warn.is-ok {
    background: var(--mb-t1-success-bg, #DCFCE7);
    color: #166534;
}

/* ── Cuerpo de tres zonas ───────────────────────────────────── */

.mbx-ld-body.mbx-ld-body {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 340px;
    flex: 1 1 auto;
    min-height: 0;
}

.mbx-ld-panel.mbx-ld-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--mb-t1-surface, #FFFFFF);
    border-right: 1px solid var(--mb-t1-border, #E2E8F0);
}

.mbx-ld-panel.mbx-ld-panel.is-right {
    border-right: none;
    border-left: 1px solid var(--mb-t1-border, #E2E8F0);
}

.mbx-ld-panel-head.mbx-ld-panel-head {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mb-t1-text-faint, #94A3B8);
}

.mbx-ld-panel-head.mbx-ld-panel-head .mbx-ld-btn { height: 24px; text-transform: none; letter-spacing: 0; }

.mbx-ld-panel-body.mbx-ld-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .4rem;
}

.mbx-ld-panel-foot.mbx-ld-panel-foot {
    border-top: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    padding: .45rem .5rem;
}

.mbx-ld-count.mbx-ld-count {
    font-size: .66rem;
    font-weight: 800;
    color: var(--mb-t1-text-faint, #94A3B8);
    text-transform: none;
    letter-spacing: 0;
}

/* ── Lista de campos por acomodar ───────────────────────────── */

.mbx-ld-newfield.mbx-ld-newfield {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .35rem;
    margin-bottom: .15rem;
    border: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    border-radius: 7px;
    background: var(--mb-t1-surface, #FFFFFF);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.mbx-ld-newfield.mbx-ld-newfield:hover {
    background: var(--mb-t1-primary-light, #EFF6FF);
    border-color: var(--mb-t1-primary-ring, #BFDBFE);
}

.mbx-ld-newfield.mbx-ld-newfield.is-dragging { opacity: .4; }

.mbx-ld-grip.mbx-ld-grip {
    color: var(--mb-t1-text-faint, #94A3B8);
    font-size: .8rem;
    line-height: 1;
    cursor: grab;
    touch-action: none;
}

.mbx-ld-listrow-name.mbx-ld-listrow-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: .76rem;
}

.mbx-ld-type.mbx-ld-type {
    font-size: .62rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mb-t1-text-faint, #94A3B8);
}

/* Renglón de campo dentro del panel de la tarjeta. */
.mbx-ld-listrow.mbx-ld-listrow {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .3rem;
    border-radius: 6px;
    cursor: pointer;
}

.mbx-ld-listrow.mbx-ld-listrow:hover { background: var(--mb-t1-bg, #F4F8FD); }

.mbx-ld-listrow.mbx-ld-listrow.is-selected {
    background: var(--mb-t1-primary-light, #EFF6FF);
}

.mbx-ld-step-tag.mbx-ld-step-tag {
    min-width: 18px;
    text-align: center;
    font-size: .62rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--mb-t1-primary, #2563EB);
    background: var(--mb-t1-primary-light, #EFF6FF);
    border-radius: 4px;
    padding: 0 .15rem;
}

/* ── Centro y lienzo ────────────────────────────────────────── */

.mbx-ld-center.mbx-ld-center {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: .5rem;
    padding: .6rem;
    overflow: auto;
}

.mbx-ld-center-head.mbx-ld-center-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mb-t1-text-faint, #94A3B8);
}

.mbx-ld-canvas.mbx-ld-canvas { min-width: 0; }

/* La tarjeta y la celda, en modo diseño: se pueden tomar y se ven
   seleccionadas. El aspecto lo sigue poniendo mbx-dl-*. */

.mbx-ld-card.mbx-ld-card.is-selected {
    border-color: var(--mb-t1-primary, #2563EB);
    box-shadow: 0 0 0 2px var(--mb-t1-primary-ring, #BFDBFE);
}

.mbx-ld-card.mbx-ld-card.is-drop-target {
    border-color: var(--mb-t1-primary, #2563EB);
    background: var(--mb-t1-primary-light, #EFF6FF);
}

.mbx-ld-card.mbx-ld-card.is-hidden { opacity: .55; }

.mbx-ld-card-head.mbx-ld-card-head {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.mbx-ld-card-head.mbx-ld-card-head.is-dragging { opacity: .5; }

.mbx-ld-card-meta.mbx-ld-card-meta {
    font-size: .64rem;
    font-weight: 700;
    color: var(--mb-t1-text-faint, #94A3B8);
    white-space: nowrap;
}

.mbx-ld-card-tools.mbx-ld-card-tools {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
}

.mbx-ld-cell.mbx-ld-cell {
    cursor: grab;
    touch-action: none;
    border-radius: 8px;
    outline: 1px dashed transparent;
    outline-offset: 2px;
}

.mbx-ld-cell.mbx-ld-cell:hover { outline-color: var(--mb-t1-primary-ring, #BFDBFE); }

.mbx-ld-cell.mbx-ld-cell.is-selected {
    outline: 2px solid var(--mb-t1-primary, #2563EB);
    outline-offset: 2px;
}

.mbx-ld-cell.mbx-ld-cell.is-dragging { opacity: .4; }

.mbx-ld-cell.mbx-ld-cell.is-hidden { opacity: .5; }

/* La capa que se traga los clics del editor: en el lienzo se selecciona y se
   arrastra, no se captura. Sin ella, tocar un campo abriría su calendario. */
.mbx-ld-pick.mbx-ld-pick {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
}

.mbx-ld-badge.mbx-ld-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    padding: 0 .22rem;
    border-radius: 4px;
    background: var(--mb-t1-border-faint, #F4F7FB);
    color: var(--mb-t1-text-muted, #64748B);
    font-size: .58rem;
    font-weight: 800;
    text-transform: uppercase;
    pointer-events: none;
}

.mbx-ld-empty-card.mbx-ld-empty-card {
    grid-column: 1 / -1;
    padding: .9rem .6rem;
    text-align: center;
    font-size: .72rem;
    color: var(--mb-t1-text-faint, #94A3B8);
    border: 1px dashed var(--mb-t1-border, #E2E8F0);
    border-radius: 8px;
}

.mbx-ld-newgroup.mbx-ld-newgroup {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border: 1px dashed var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: var(--mb-t1-surface, #FFFFFF);
    font-size: .72rem;
    color: var(--mb-t1-text-faint, #94A3B8);
}

.mbx-ld-newgroup.mbx-ld-newgroup.is-drop-target {
    border-color: var(--mb-t1-primary, #2563EB);
    background: var(--mb-t1-primary-light, #EFF6FF);
    color: var(--mb-t1-primary, #2563EB);
}

/* ── El arrastre ────────────────────────────────────────────── */

/* El fantasma y la marca los crea el guion y los cuelga del <body>, así que
   NO pueden heredar nada del diseñador: se declaran completos. Los dos
   ignoran el puntero, o el propio arrastre no encontraría lo que hay debajo. */
.mbx-ld-ghost.mbx-ld-ghost {
    position: fixed;
    z-index: 1400;
    transform: translate(8px, 8px);
    padding: .2rem .45rem;
    border-radius: 6px;
    background: var(--mb-t1-primary, #2563EB);
    color: var(--mb-t1-surface, #FFFFFF);
    font-size: .74rem;
    font-weight: 700;
    box-shadow: var(--mb-t1-shadow-md, 0 10px 28px rgba(15,23,42,.08));
    pointer-events: none;
    white-space: nowrap;
}

.mbx-ld-dropmark.mbx-ld-dropmark {
    position: fixed;
    z-index: 1400;
    border-radius: 2px;
    background: var(--mb-t1-primary, #2563EB);
    pointer-events: none;
}

/* ── Campos del panel de propiedades ────────────────────────── */

.mbx-ld-group.mbx-ld-group {
    border-top: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    padding: .5rem .1rem .2rem;
}

.mbx-ld-group.mbx-ld-group:first-child { border-top: none; }

.mbx-ld-group-title.mbx-ld-group-title {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mb-t1-text-faint, #94A3B8);
    margin-bottom: .35rem;
}

.mbx-ld-field.mbx-ld-field { margin-bottom: .45rem; }

.mbx-ld-field.mbx-ld-field > label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    color: var(--mb-t1-text-muted, #64748B);
    margin-bottom: .12rem;
}

.mbx-ld-field.mbx-ld-field input[type=text],
.mbx-ld-field.mbx-ld-field input[type=number],
.mbx-ld-field.mbx-ld-field select,
.mbx-ld-field.mbx-ld-field textarea,
.mbx-ld-row.mbx-ld-row select {
    width: 100%;
    height: 28px;
    padding: 0 .4rem;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: 6px;
    font-size: .78rem;
    color: inherit;
    background: var(--mb-t1-surface, #FFFFFF);
    outline: none;
    font-family: inherit;
}

.mbx-ld-field.mbx-ld-field textarea { height: auto; padding: .3rem .4rem; resize: vertical; }

.mbx-ld-field.mbx-ld-field input:focus,
.mbx-ld-field.mbx-ld-field select:focus,
.mbx-ld-field.mbx-ld-field textarea:focus {
    border-color: var(--mb-t1-primary, #2563EB);
    box-shadow: 0 0 0 2px var(--mb-t1-primary-ring, #BFDBFE);
}

.mbx-ld-field.mbx-ld-field.is-invalid input,
.mbx-ld-field.mbx-ld-field.is-invalid textarea {
    border-color: var(--mb-t1-danger, #DC2626);
    box-shadow: 0 0 0 2px var(--mb-t1-danger-bg, #FEE2E2);
}

.mbx-ld-error.mbx-ld-error {
    font-size: .68rem;
    color: var(--mb-t1-danger, #DC2626);
    margin-top: .1rem;
}

.mbx-ld-hint.mbx-ld-hint {
    font-size: .67rem;
    color: var(--mb-t1-text-faint, #94A3B8);
    margin-top: .1rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.mbx-ld-hint.mbx-ld-hint code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--mb-t1-border-faint, #F4F7FB);
    border-radius: 3px;
    padding: 0 .15rem;
}

.mbx-ld-check.mbx-ld-check {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    padding: .12rem 0;
    cursor: pointer;
    font-weight: 400;
}

.mbx-ld-check.mbx-ld-check input { accent-color: var(--mb-t1-primary, #2563EB); }

.mbx-ld-checks.mbx-ld-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 .5rem;
}

.mbx-ld-row.mbx-ld-row { display: flex; gap: .4rem; align-items: flex-end; }
.mbx-ld-row.mbx-ld-row > * { flex: 1 1 0; min-width: 0; }

.mbx-ld-sample.mbx-ld-sample {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .2rem;
    padding: .3rem .45rem;
    border-radius: 6px;
    background: var(--mb-t1-bg, #F4F8FD);
    border: 1px dashed var(--mb-t1-border, #E2E8F0);
    font-size: .74rem;
}

.mbx-ld-sample-label.mbx-ld-sample-label {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mb-t1-text-faint, #94A3B8);
    font-weight: 800;
    white-space: nowrap;
}

.mbx-ld-sample-value.mbx-ld-sample-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mbx-ld-empty.mbx-ld-empty {
    padding: 1.4rem .6rem;
    text-align: center;
    font-size: .76rem;
    color: var(--mb-t1-text-faint, #94A3B8);
    border: 1px dashed var(--mb-t1-border, #E2E8F0);
    border-radius: 10px;
}

/* ── El XML a la vista ──────────────────────────────────────── */

.mbx-ld-modal-back.mbx-ld-modal-back {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15,23,42,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.mbx-ld-modal.mbx-ld-modal {
    width: min(760px, 100%);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--mb-t1-surface, #FFFFFF);
    border-radius: 12px;
    box-shadow: var(--mb-t1-shadow-lg, 0 20px 50px rgba(15,23,42,.12));
    overflow: hidden;
}

.mbx-ld-modal-head.mbx-ld-modal-head {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--mb-t1-border-faint, #F4F7FB);
    font-weight: 700;
}

.mbx-ld-modal-body.mbx-ld-modal-body { padding: .8rem .9rem; overflow: auto; }

.mbx-ld-modal-foot.mbx-ld-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .6rem .9rem;
    border-top: 1px solid var(--mb-t1-border-faint, #F4F7FB);
}

.mbx-ld-xml.mbx-ld-xml {
    width: 100%;
    min-height: 340px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    line-height: 1.45;
    padding: .6rem;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: 8px;
    resize: vertical;
    color: inherit;
    background: var(--mb-t1-bg, #F4F8FD);
}

/* ── Pantallas angostas: los paneles se apilan ──────────────── */

@media (max-width: 1200px) {
    .mbx-ld-body.mbx-ld-body { grid-template-columns: 210px minmax(0, 1fr); }

    .mbx-ld-panel.mbx-ld-panel.is-right {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--mb-t1-border, #E2E8F0);
        max-height: 360px;
    }
}

@media (max-width: 820px) {
    .mbx-ld-body.mbx-ld-body { grid-template-columns: minmax(0, 1fr); }

    .mbx-ld-panel.mbx-ld-panel {
        border-right: none;
        border-bottom: 1px solid var(--mb-t1-border, #E2E8F0);
        max-height: 260px;
    }
}


/* ================================================================
   SECCIÓN 7 · CONTENEDOR DE DOCUMENTOS (Monteber.Mdi)  clases mbx-mdi-*

   Una pantalla que se comporta como un formulario MDI: la cinta
   arriba, la fila de pestañas debajo y el documento al frente
   llenando lo que sobra. Las pestañas de atrás SIGUEN EN EL ÁRBOL,
   escondidas con display:none; por eso el cuerpo tiene que estar
   preparado para tener muchos hijos y enseñar uno.

   La altura se reparte con flex y no con alturas fijas: el
   contenedor ocupa lo que le den —una pantalla completa o media— y
   el documento se queda con lo que sobra después de la cinta y de
   las pestañas, sin que nadie tenga que calcular píxeles.
   ================================================================ */

.mbx-mdi.mbx-mdi {
    --mbx-mdi-tab-h: 2.1rem;
    --mbx-mdi-pad: .45rem;

    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--mb-t1-bg, #F4F8FD);
    color: var(--mb-t1-text, #1F2937);
    font-size: .82rem;
}

.mbx-mdi.mbx-mdi *, .mbx-mdi.mbx-mdi *::before, .mbx-mdi.mbx-mdi *::after { box-sizing: border-box; }

.mbx-mdi-head.mbx-mdi-head {
    flex: 0 0 auto;
    background: var(--mb-t1-surface, #FFFFFF);
    border-bottom: 1px solid var(--mb-t1-border, #E2E8F0);
}

/* ── La fila de pestañas ─────────────────────────────────────── */

.mbx-mdi-tabs.mbx-mdi-tabs {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: .12rem;
    padding: .2rem var(--mbx-mdi-pad) 0 var(--mbx-mdi-pad);
    background: var(--mb-t1-surface, #FFFFFF);
    border-bottom: 1px solid var(--mb-t1-border, #E2E8F0);
    overflow-x: auto;
    scrollbar-width: thin;
}

.mbx-mdi-tabs.mbx-mdi-tabs.is-bottom {
    border-bottom: 0;
    border-top: 1px solid var(--mb-t1-border, #E2E8F0);
    padding: 0 var(--mbx-mdi-pad) .2rem var(--mbx-mdi-pad);
}

.mbx-mdi-tabs-relleno.mbx-mdi-tabs-relleno { flex: 1 1 auto; min-width: .5rem; }

.mbx-mdi-tab.mbx-mdi-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 0 1 auto;
    min-width: 5rem;
    max-width: 15rem;
    height: var(--mbx-mdi-tab-h);
    padding: 0 .5rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--mb-t1-radius-sm, 10px) var(--mb-t1-radius-sm, 10px) 0 0;
    background: transparent;
    color: var(--mb-t1-text-muted, #64748B);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background var(--mb-t1-transition, .20s cubic-bezier(.4,0,.2,1));
}

.mbx-mdi-tab.mbx-mdi-tab:hover { background: var(--mb-t1-primary-light, #EFF6FF); }

.mbx-mdi-tab.mbx-mdi-tab.is-active {
    background: var(--mb-t1-bg, #F4F8FD);
    border-color: var(--mb-t1-border, #E2E8F0);
    color: var(--mb-t1-text, #1F2937);
    font-weight: 600;
}

/* La pestaña activa se come el borde de abajo de la fila: así se ve
   pegada al documento, como una carpeta de archivero. */
.mbx-mdi-tab.mbx-mdi-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--mb-t1-bg, #F4F8FD);
}

.mbx-mdi-tabs.mbx-mdi-tabs.is-bottom .mbx-mdi-tab {
    border-radius: 0 0 var(--mb-t1-radius-sm, 10px) var(--mb-t1-radius-sm, 10px);
    border-bottom: 1px solid transparent;
    border-top: 0;
}

.mbx-mdi-tab.mbx-mdi-tab.is-over {
    background: var(--mb-t1-primary-light, #EFF6FF);
    box-shadow: inset 2px 0 0 0 var(--mb-t1-primary, #2563EB);
}

.mbx-mdi-tab.mbx-mdi-tab.is-home { min-width: 0; }

.mbx-mdi-tab-texto.mbx-mdi-tab-texto { overflow: hidden; text-overflow: ellipsis; }

.mbx-mdi-tab-icono.mbx-mdi-tab-icono { flex: 0 0 auto; font-size: .9em; line-height: 1; }

.mbx-mdi-tab-pin.mbx-mdi-tab-pin { flex: 0 0 auto; font-size: .75em; }

/* El punto de «sin guardar». Es lo único que avisa que cerrar cuesta algo. */
.mbx-mdi-tab-punto.mbx-mdi-tab-punto {
    flex: 0 0 auto;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--mb-t1-warning-dot, #F59E0B);
}

.mbx-mdi-tab-cerrar.mbx-mdi-tab-cerrar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: .55;
    cursor: pointer;
}

.mbx-mdi-tab-cerrar.mbx-mdi-tab-cerrar:hover {
    opacity: 1;
    background: var(--mb-t1-danger-bg, #FEE2E2);
    color: var(--mb-t1-danger, #DC2626);
}

/* ── El menú del botón derecho y la lista de abiertas ────────── */

.mbx-mdi-lista.mbx-mdi-lista { position: relative; display: flex; align-items: center; }

.mbx-mdi-lista-boton.mbx-mdi-lista-boton {
    display: flex;
    align-items: center;
    gap: .2rem;
    height: 1.5rem;
    padding: 0 .35rem;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: var(--mb-t1-surface, #FFFFFF);
    color: var(--mb-t1-text-muted, #64748B);
    cursor: pointer;
}

.mbx-mdi-lista-boton.mbx-mdi-lista-boton:hover {
    border-color: var(--mb-t1-primary-ring, #BFDBFE);
    color: var(--mb-t1-primary, #2563EB);
}

.mbx-mdi-lista-cuenta.mbx-mdi-lista-cuenta { font-size: .72rem; font-weight: 600; }

.mbx-mdi-menu.mbx-mdi-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 40;
    min-width: 11rem;
    padding: .2rem;
    border: 1px solid var(--mb-t1-border, #E2E8F0);
    border-radius: var(--mb-t1-radius-sm, 10px);
    background: var(--mb-t1-surface, #FFFFFF);
    box-shadow: var(--mb-t1-shadow-md, 0 10px 28px rgba(15,23,42,.08));
}

.mbx-mdi-menu.mbx-mdi-menu.is-list { left: auto; right: 0; max-height: 16rem; overflow-y: auto; }

.mbx-mdi-menu.mbx-mdi-menu button {
    display: block;
    width: 100%;
    padding: .3rem .5rem;
    border: 0;
    border-radius: calc(var(--mb-t1-radius-sm, 10px) - 4px);
    background: transparent;
    color: var(--mb-t1-text, #1F2937);
    font-size: .78rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.mbx-mdi-menu.mbx-mdi-menu button:hover { background: var(--mb-t1-primary-light, #EFF6FF); }

.mbx-mdi-menu.mbx-mdi-menu button.is-active { color: var(--mb-t1-primary, #2563EB); font-weight: 600; }

.mbx-mdi-menu-sep.mbx-mdi-menu-sep {
    height: 1px;
    margin: .2rem .3rem;
    background: var(--mb-t1-border-faint, #F4F7FB);
}

/* ── La barra de la pantalla activa ──────────────────────────── */

.mbx-mdi-tools.mbx-mdi-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem var(--mbx-mdi-pad);
    background: var(--mb-t1-surface, #FFFFFF);
    border-bottom: 1px solid var(--mb-t1-border, #E2E8F0);
}

/* ── El cuerpo: muchos documentos, uno visible ───────────────── */

.mbx-mdi-body.mbx-mdi-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Escondido, no desmontado: la pantalla de atrás conserva su captura,
   su desplazamiento y sus suscripciones. Ésa es la promesa del MDI. */
.mbx-mdi-doc.mbx-mdi-doc { display: none; }

.mbx-mdi-doc.mbx-mdi-doc.is-active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.mbx-mdi-vacio.mbx-mdi-vacio {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mb-t1-text-faint, #94A3B8);
    font-size: .85rem;
}

/* ── Pantallas angostas ──────────────────────────────────────── */

@media (max-width: 820px) {
    .mbx-mdi-tab.mbx-mdi-tab { max-width: 9rem; min-width: 4rem; }
    .mbx-mdi-tab.mbx-mdi-tab:not(.is-active) .mbx-mdi-tab-cerrar { display: none; }
}