/* =====================================================================
   MiBachillerato — Sistema de diseño del lado estudiante.

   Portado del lenguaje visual de MargaritaMaza (registro.css). No se copia
   la hoja original tal cual: aquella son 12 mil líneas con los colores
   escritos a mano. Aquí los mismos patrones se reconstruyen como tokens +
   componentes.

   El sistema corre sobre la Gráfica Base de gob.mx v3 (Bootstrap 5) más el
   menú dinámico del BNMM. El encabezado y el pie los inyectan menu-bnmm.js
   y gobmx.js; por eso aquí no hay markup de chrome.

   Se carga DESPUÉS de estilos.css: las variables de :root alimentan a
   la hoja antigua (que fue retokenizada) y los componentes nuevos ganan
   la cascada donde hace falta.

   Orden del archivo:
     1. Tokens
     2. Base y accesibilidad
     3. Layout de página
     4. Componentes
     5. Gráfica Base de gob.mx v3 y menú BNMM
     6. Responsive
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ===================================================================== */

:root {
    /* Los controles y scrollbars nativos siguen el esquema declarado, en
       lugar de que el navegador lo adivine. */
    color-scheme: light;

    /* ----- Paleta institucional gob.mx ----- */
    --mb-primary: #611232;
    --mb-primary-dark: #4a0e26;
    --mb-primary-light: #7d2447;
    --mb-primary-soft: #f8eef2;
    --mb-primary-border: #e3cdd6;

    --mb-secondary: #235b4e;
    --mb-secondary-dark: #184038;
    --mb-secondary-soft: #eef5f2;
    --mb-secondary-border: #cfe3db;

    --mb-gold: #a57f2c;
    --mb-gold-soft: #f9f3e6;

    /* ----- Semánticos ----- */
    --mb-success: #1d6f5d;
    --mb-success-text: #155146;
    --mb-success-soft: #e6f3ee;
    --mb-success-border: #bfded3;

    --mb-danger: #9c1c1c;
    --mb-danger-strong: #b10f2e;
    --mb-danger-text: #6f2532;
    --mb-danger-soft: #fff5f5;
    --mb-danger-border: #edcaca;
    /* Mismo peso visual que --mb-border-strong, pero con matiz rojo: para
       bordes que deben notarse tanto como uno neutro, no menos. */
    --mb-danger-border-strong: #d3babe;

    --mb-warning: #a05d00;
    --mb-warning-soft: #fff4e0;
    --mb-warning-border: #edd6ac;

    --mb-info: #235b4e;
    --mb-info-soft: #eef5f2;
    --mb-info-border: #cfe3db;

    /* ----- Neutrales ----- */
    --mb-ink: #1f2937;
    --mb-ink-strong: #303030;
    --mb-text: #303b37;
    --mb-muted: #59635f;
    --mb-muted-2: #6b7280;
    --mb-muted-3: #98989a;

    --mb-surface: #ffffff;
    --mb-surface-2: #fbfcfc;
    --mb-surface-3: #f4f7f9;
    --mb-surface-4: #f7f9fa;

    --mb-border: #e0e6e4;
    --mb-border-strong: #d6dbdf;
    --mb-border-soft: #edf1f0;

    /* ----- Radios ----- */
    --mb-radius-xs: 4px;
    --mb-radius-sm: 6px;
    --mb-radius: 11px;
    --mb-radius-lg: 13px;
    --mb-radius-pill: 999px;

    /* ----- Sombras ----- */
    --mb-shadow-card: 0 5px 18px rgb(28 56 49 / 5%);
    --mb-shadow-raised: 0 8px 24px rgb(22 52 44 / 10%);
    --mb-shadow-pop: 0 12px 32px rgb(22 52 44 / 14%);
    --mb-shadow-focus: 0 0 0 3px rgb(97 18 50 / 18%);

    /* ----- Espaciado ----- */
    --mb-space-1: 4px;
    --mb-space-2: 8px;
    --mb-space-3: 12px;
    --mb-space-4: 16px;
    --mb-space-5: 20px;
    --mb-space-6: 24px;
    --mb-space-7: 32px;
    --mb-space-8: 40px;

    /* ----- Tipografía ----- */
    --mb-font: "Noto Sans", "Open Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mb-fs-xs: 12px;
    --mb-fs-sm: 13px;
    --mb-fs-base: 15px;
    --mb-fs-md: 16px;
    --mb-fs-lg: 17px;
    --mb-fs-xl: 20px;

    /* ----- Movimiento ----- */
    --mb-transition: 0.15s ease;
    --mb-transition-slow: 0.28s ease;

    /* ----- Compatibilidad con estilos.css retokenizado -----
       La hoja antigua usaba lima #B2C344 como primario; se remapea al
       guinda institucional para que todo el sistema quede armónico. */
    --mb-legacy-primary: var(--mb-primary);
    --mb-legacy-primary-hover: var(--mb-primary-light);
    --mb-legacy-primary-soft: var(--mb-primary-soft);
}

/* =====================================================================
   2. BASE Y ACCESIBILIDAD
   ===================================================================== */

html,
body {
    min-height: 100%;
}

/* El encabezado de la Gráfica Base queda fijo al desplazar y tapaba el inicio
   de la sección a la que se salta (anclas, autofocus, scrollIntoView). El
   colchón lo compensa; el valor sigue a la altura del stack de encabezados,
   la misma referencia que usa `.sidebar { top: 130px }`. */
html {
    scroll-padding-top: 130px;
}

@media (max-width: 991px) {
    html {
        scroll-padding-top: 96px;
    }
}

body {
    background-color: var(--mb-surface);
    color: var(--mb-text);
    display: flex;
    flex-direction: column;
    font-family: var(--mb-font);
    min-height: 100vh;
    /* Corrige la cascada previa, que tenía un typo ("Noso Sans") y un
       `serif` intermedio: el fallback real terminaba siendo serif.
       El flex en columna mantiene el pie abajo en páginas cortas. */
}

*,
*::before,
*::after {
    font-family: inherit;
}

/* El contenido es lo que crece para empujar el pie hasta abajo. Se apunta a
   `body > main` y no a una clase concreta: el layout general usa
   .main-container y el login .servicios-section, y si solo crece uno de los
   dos el pie queda flotando a media pantalla en las páginas cortas.

   `width: 100%` es necesario porque el `margin: 0 auto` que ya traía el main
   cancela el estirado del eje cruzado y lo encogería al ancho de su
   contenido; su propio max-width sigue limitándolo y los márgenes lo centran. */
body > main {
    flex: 1 0 auto;
    width: 100%;
}

/* Sin el retardo de 300 ms por doble tap en los controles. */
a,
button,
input,
label,
select,
summary,
textarea,
[role="button"],
[role="tab"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgb(97 18 50 / 15%);
}

/* Anillo de foco de respaldo: cualquier control sin regla propia queda
   visible al navegar con teclado. */
:focus-visible {
    outline: 2px solid var(--mb-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Evita viudas en títulos y mejora el reparto de líneas en párrafos. */
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/* El color se excluye del encabezado y el pie de gob.mx: ese chrome trae
   fondo guinda y texto claro propios, y teñirlo lo dejaba ilegible.

   La familia se reafirma aquí porque main.css de la Gráfica Base declara
   `.h1,.h2,.h3,h1,h2,h3 { font-family: Patria, ... }`, y ese selector de
   elemento le gana al `* { font-family: inherit }` de más arriba. El
   resultado era que h1–h3 salían en la display con serifas de gob.mx
   mientras h4–h6 y el cuerpo salían en Noto Sans: los títulos de tarjeta
   («Documentos del kit») no casaban con sus propios subtítulos. Patria se
   queda donde le toca, en el chrome institucional que excluyen los :not(). */
:is(h1, h2, h3, h4, h5, h6):not(.main-footer *):not(.navbar *):not(#footerMM *) {
    color: var(--mb-ink-strong);
    font-family: var(--mb-font);
    font-weight: 600;
}

p,
.mb-page-header__intro,
.mb-callout,
.mb-field__help {
    text-wrap: pretty;
}

/* Las anclas de encabezado no quedan tapadas por el header sticky. */
:target {
    scroll-margin-top: 96px;
}

/* El atributo `hidden` debe ganarle a cualquier `display` de autor. Varias
   vistas alternan visibilidad con `hidden` en lugar de estilos inline. */
[hidden] {
    display: none !important;
}

/* Texto solo para lectores de pantalla. */
.mb-sr-only,
.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Salto al contenido principal. */
.mb-skip-link {
    background: var(--mb-primary);
    border-radius: 0 0 var(--mb-radius-sm) 0;
    color: #fff;
    font-size: var(--mb-fs-base);
    font-weight: 600;
    left: 0;
    padding: 10px 18px;
    position: absolute;
    text-decoration: none;
    top: -100px;
    transition: top var(--mb-transition);
    z-index: 2000;
}

.mb-skip-link:focus {
    color: #fff;
    top: 0;
}

/* Los <select> nativos necesitan color explícito: en modo oscuro de
   Windows heredan texto blanco sobre el fondo blanco del tema. */
select,
select.form-control,
select.form-select {
    background-color: #fff;
    color: #333;
}

a:where(:not(.main-footer *):not(.navbar *):not(#footerMM *)) {
    color: var(--mb-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:where(:not(.main-footer *):not(.navbar *):not(#footerMM *)):hover {
    color: var(--mb-primary-light);
}

img {
    max-width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================================
   3. LAYOUT DE PÁGINA
   ===================================================================== */

.mb-shell {
    padding-bottom: max(var(--mb-space-8), env(safe-area-inset-bottom));
    padding-left: max(var(--mb-space-4), env(safe-area-inset-left));
    padding-right: max(var(--mb-space-4), env(safe-area-inset-right));
}

/* Neutraliza el gutter negativo de Bootstrap en vistas que usan el patrón
   container/row/col dentro del área principal. Evita recortes laterales y
   desplazamiento horizontal en pantallas angostas. */
.mb-view-container {
    padding-left: 0;
    padding-right: 0;
}

.mb-view-container > .row {
    margin-left: 0;
    margin-right: 0;
}

.mb-view-container > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Escala de lectura para las pantallas renovables. Se aplica de forma
   explícita para no alterar Credencial ni las familias documentales. */
.mb-readable-page {
    --mb-fs-xs: 13px;
    --mb-fs-sm: 14px;
    --mb-fs-base: 16px;
    --mb-fs-md: 17px;
    --mb-fs-lg: 18px;
    --mb-fs-xl: 21px;
    font-size: 16px;
}

.mb-readable-page .mb-alert,
.mb-readable-page .mb-table tbody th,
.mb-readable-page .mb-table td {
    font-size: 15px;
}

.mb-readable-page .mb-alert strong {
    font-size: 16px;
}

/* Encabezado de página: h2 fluido + intro, igual que .mmz-step-header. */
.mb-page-header {
    margin-bottom: var(--mb-space-5);
}

.mb-page-header__title {
    align-items: center;
    color: var(--mb-ink-strong);
    display: flex;
    font-size: clamp(28px, 3.2vw, 40px);
    gap: var(--mb-space-3);
    line-height: 1.15;
    margin: 0 0 var(--mb-space-2);
}

.mb-page-header__title i,
.mb-page-header__title svg {
    color: var(--mb-primary);
    flex: 0 0 auto;
    font-size: 0.72em;
}

.mb-page-header__intro {
    color: var(--mb-muted);
    font-size: var(--mb-fs-lg);
    line-height: 1.55;
    margin: 0;
    max-width: 1080px;
}

/* Regla de acento bajo el título, equivalente a <hr class="red">. */
.mb-rule {
    background: var(--mb-primary);
    border: 0;
    border-radius: var(--mb-radius-pill);
    height: 4px;
    margin: var(--mb-space-4) 0 var(--mb-space-6);
    opacity: 1;
    width: 72px;
}

/* =====================================================================
   4. COMPONENTES
   ===================================================================== */

/* ----- 4.1 Tarjeta base (equivale a .mmz-step-card) ----- */

.mb-card {
    background: var(--mb-surface);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius-lg);
    box-shadow: var(--mb-shadow-card);
    margin-bottom: var(--mb-space-5);
    overflow: hidden;
}

.mb-card__header {
    align-items: center;
    background: var(--mb-surface-2);
    border-bottom: 1px solid var(--mb-border-soft);
    color: #25312e;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--mb-fs-md);
    gap: var(--mb-space-3);
    justify-content: space-between;
    line-height: 1.35;
    padding: 15px 18px;
}

.mb-card__header h2,
.mb-card__header h3 {
    align-items: center;
    display: flex;
    font-size: var(--mb-fs-xl);
    gap: 10px;
    margin: 0;
}

.mb-card__header i {
    color: var(--mb-primary);
}

.mb-card__body {
    color: var(--mb-text);
    font-size: var(--mb-fs-base);
    line-height: 1.5;
    padding: var(--mb-space-5);
}

.mb-card__body > *:last-child {
    margin-bottom: 0;
}

/* ----- 4.2 Título de sección con badge (equivale a __step) ----- */

.mb-section-title {
    align-items: center;
    display: flex;
    gap: 10px;
    margin: var(--mb-space-6) 0 var(--mb-space-4);
}

.mb-section-title:first-child {
    margin-top: 0;
}

.mb-section-title h3,
.mb-section-title h4,
.mb-section-title h5 {
    font-size: var(--mb-fs-md);
    font-weight: 700;
    margin: 0;
}

.mb-badge-step {
    align-items: center;
    background-color: var(--mb-secondary);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 28px;
    font-size: 14px;
    font-weight: 700;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.mb-badge-step--primary {
    background-color: var(--mb-primary);
}

/* Icono cuadrado de sección, reemplaza los `style` inline de las vistas. */
.mb-section-icon {
    align-items: center;
    background: var(--mb-secondary-soft);
    border-radius: var(--mb-radius-sm);
    color: var(--mb-secondary);
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.mb-section-icon--primary {
    background: var(--mb-primary-soft);
    color: var(--mb-primary);
}

.mb-section-icon--gold {
    background: var(--mb-gold-soft);
    color: var(--mb-gold);
}

.mb-section-icon--success {
    background: var(--mb-success-soft);
    color: var(--mb-success-text);
}

/* ----- 4.3 Lista de datos (equivale a .mmz-datos-resumen__lista) ----- */

.mb-datalist {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: 0;
}

.mb-datalist > div,
.mb-datalist__item {
    background-color: var(--mb-surface);
    border: 1px solid var(--mb-border-strong);
    border-radius: var(--mb-radius-sm);
    min-width: 0;
    padding: 10px 14px;
}

.mb-datalist dt,
.mb-datalist__label {
    align-items: center;
    color: var(--mb-muted-2);
    display: flex;
    font-size: var(--mb-fs-xs);
    font-weight: 600;
    gap: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mb-datalist dt i,
.mb-datalist__label i {
    color: var(--mb-secondary);
}

.mb-datalist dd,
.mb-datalist__value {
    color: var(--mb-ink);
    font-size: var(--mb-fs-md);
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

.mb-datalist dd small,
.mb-datalist__value small {
    color: var(--mb-muted-2);
    display: block;
    font-size: var(--mb-fs-sm);
    font-weight: 400;
    margin-top: 2px;
}

/* ----- 4.4 Chips / pills de estado ----- */

.mb-chip {
    align-items: center;
    background-color: var(--mb-surface-3);
    border-radius: var(--mb-radius-pill);
    color: var(--mb-text);
    display: inline-flex;
    font-size: var(--mb-fs-xs);
    font-weight: 600;
    gap: 6px;
    line-height: 1.4;
    padding: 4px 12px;
    white-space: nowrap;
}

.mb-chip--success {
    background-color: var(--mb-success-soft);
    color: var(--mb-success-text);
}

.mb-chip--warning {
    background-color: var(--mb-warning-soft);
    color: var(--mb-warning);
}

.mb-chip--danger {
    background-color: var(--mb-danger-soft);
    color: var(--mb-danger);
}

.mb-chip--info {
    background-color: var(--mb-info-soft);
    color: var(--mb-info);
}

.mb-chip--neutral {
    background-color: #eef0f2;
    color: var(--mb-muted-2);
}

.mb-chip--primary {
    background-color: var(--mb-primary-soft);
    color: var(--mb-primary);
}

/* Fila de chips resumen. */
.mb-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mb-space-2);
    margin-bottom: var(--mb-space-4);
}

/* ----- 4.5 Callout (equivale a .mmz-datos-help) ----- */

.mb-callout {
    background-color: var(--mb-surface-3);
    border-left: 3px solid var(--mb-secondary);
    border-radius: var(--mb-radius-xs);
    color: var(--mb-muted);
    display: flex;
    font-size: 14.5px;
    gap: 10px;
    line-height: 1.5;
    margin: 0 0 var(--mb-space-4);
    padding: 12px 14px;
}

.mb-callout i {
    color: var(--mb-secondary);
    flex: 0 0 auto;
    margin-top: 2px;
}

.mb-callout p {
    margin: 0;
}

.mb-callout--primary {
    border-left-color: var(--mb-primary);
}

.mb-callout--primary i {
    color: var(--mb-primary);
}

/* ----- 4.6 Alertas (equivale a .mmz-global-alert) ----- */

.mb-alert {
    align-items: flex-start;
    border-radius: 9px;
    display: flex;
    font-size: 14px;
    gap: 12px;
    line-height: 1.5;
    margin: 0 0 var(--mb-space-5);
    padding: 13px 16px;
}

.mb-alert i {
    flex: 0 0 auto;
    font-size: 18px;
    margin-top: 1px;
}

.mb-alert strong {
    display: block;
    font-size: 14.5px;
}

.mb-alert--error {
    background: var(--mb-danger-soft);
    border: 1px solid var(--mb-danger-border);
    border-left: 4px solid var(--mb-danger-strong);
    color: var(--mb-danger-text);
}

.mb-alert--error i,
.mb-alert--error strong {
    color: #8d1730;
}

.mb-alert--success {
    background: var(--mb-success-soft);
    border: 1px solid var(--mb-success-border);
    border-left: 4px solid var(--mb-success);
    color: var(--mb-success-text);
}

.mb-alert--success i,
.mb-alert--success strong {
    color: var(--mb-success);
}

.mb-alert--warning {
    background: var(--mb-warning-soft);
    border: 1px solid var(--mb-warning-border);
    border-left: 4px solid var(--mb-warning);
    color: #6b4300;
}

.mb-alert--warning i,
.mb-alert--warning strong {
    color: var(--mb-warning);
}

.mb-alert--info {
    background: var(--mb-info-soft);
    border: 1px solid var(--mb-info-border);
    border-left: 4px solid var(--mb-info);
    color: #1c4a41;
}

.mb-alert--info i,
.mb-alert--info strong {
    color: var(--mb-info);
}

/* ----- 4.7 Toasts (portados del layout público de MargaritaMaza) ----- */

.mb-toasts {
    bottom: max(var(--mb-space-5), env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    right: max(var(--mb-space-5), env(safe-area-inset-right));
    width: min(380px, calc(100vw - 32px));
    z-index: 1080;
}

.mb-toast {
    align-items: flex-start;
    background: var(--mb-surface);
    border: 1px solid var(--mb-border);
    border-left: 4px solid var(--mb-secondary);
    border-radius: var(--mb-radius);
    box-shadow: var(--mb-shadow-pop);
    display: flex;
    gap: 10px;
    opacity: 0;
    padding: 13px 14px;
    transform: translateY(12px);
    transition: opacity var(--mb-transition-slow), transform var(--mb-transition-slow);
}

.mb-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.mb-toast--saliendo {
    opacity: 0;
    transform: translateY(12px);
}

.mb-toast--success {
    border-left-color: var(--mb-success);
}

.mb-toast--error {
    border-left-color: var(--mb-danger-strong);
}

.mb-toast__icono {
    flex: 0 0 auto;
    line-height: 0;
    margin-top: 1px;
}

.mb-toast--success .mb-toast__icono {
    color: var(--mb-success);
}

.mb-toast--error .mb-toast__icono {
    color: var(--mb-danger-strong);
}

.mb-toast__texto {
    color: var(--mb-text);
    flex: 1;
    font-size: 14px;
    line-height: 1.45;
    min-width: 0;
}

.mb-toast__cerrar {
    background: none;
    border: 0;
    color: var(--mb-muted-2);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    padding: 0 2px;
}

.mb-toast__cerrar:hover {
    color: var(--mb-ink);
}

/* ----- 4.8 Barra de acciones (equivale a .mmz-step-actions) ----- */

.mb-actions {
    align-items: center;
    background: var(--mb-surface);
    border: 1px solid var(--mb-border-strong);
    border-radius: var(--mb-radius);
    box-shadow: var(--mb-shadow-raised);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 22px;
    padding: 12px 14px;
}

.mb-actions > a.mb-btn:first-of-type,
.mb-actions > .mb-btn--back {
    margin-right: auto;
}

.mb-actions__estado {
    color: #687570;
    flex: 1;
    font-size: var(--mb-fs-sm);
    line-height: 1.4;
    text-align: right;
}

/* ----- 4.9 Botones ----- */

.mb-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--mb-radius-sm);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--mb-fs-base);
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    line-height: 1.3;
    min-height: 42px;
    padding: 9px 18px;
    text-decoration: none;
    transition: background-color var(--mb-transition), border-color var(--mb-transition),
        box-shadow var(--mb-transition), color var(--mb-transition);
}

.mb-btn:disabled,
.mb-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.mb-btn--primary {
    background: var(--mb-primary);
    border-color: var(--mb-primary);
    color: #fff;
}

.mb-btn--primary:hover:not(:disabled) {
    background: var(--mb-primary-light);
    border-color: var(--mb-primary-light);
    box-shadow: var(--mb-shadow-focus);
    color: #fff;
}

.mb-btn--secondary {
    background: var(--mb-secondary);
    border-color: var(--mb-secondary);
    color: #fff;
}

.mb-btn--secondary:hover:not(:disabled) {
    background: var(--mb-secondary-dark);
    border-color: var(--mb-secondary-dark);
    color: #fff;
}

.mb-btn--outline {
    background: var(--mb-surface);
    border-color: var(--mb-border-strong);
    color: var(--mb-primary);
}

.mb-btn--outline:hover:not(:disabled) {
    background: var(--mb-primary-soft);
    border-color: var(--mb-primary);
    color: var(--mb-primary);
}

.mb-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--mb-muted);
}

.mb-btn--ghost:hover:not(:disabled) {
    background: var(--mb-surface-3);
    color: var(--mb-ink);
}

.mb-btn--sm {
    font-size: var(--mb-fs-sm);
    min-height: 34px;
    padding: 6px 12px;
}

.mb-btn--block {
    width: 100%;
}

/* ----- 4.10 Campos de formulario ----- */

.mb-field {
    margin-bottom: var(--mb-space-4);
}

.mb-field > label,
.mb-field__label {
    color: var(--mb-ink);
    display: block;
    font-size: var(--mb-fs-base);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
}

.mb-required {
    color: var(--mb-danger);
    font-weight: 700;
}

.mb-field__help {
    color: var(--mb-muted-2);
    display: block;
    font-size: var(--mb-fs-sm);
    line-height: 1.45;
    margin-top: 6px;
}

.mb-field__error {
    color: var(--mb-danger);
    display: block;
    font-size: var(--mb-fs-xs);
    margin-top: 6px;
    min-height: 16px;
}

/* Input con icono adosado (equivale a .mmz-input-icon). */
.mb-input-icon {
    align-items: stretch;
    display: flex;
    position: relative;
}

.mb-input-icon__icon {
    align-items: center;
    background-color: var(--mb-surface-3);
    border: 1px solid var(--mb-border-strong);
    border-radius: var(--mb-radius-xs) 0 0 var(--mb-radius-xs);
    border-right: none;
    color: var(--mb-secondary);
    display: inline-flex;
    flex: 0 0 42px;
    font-weight: 700;
    justify-content: center;
}

.mb-input-icon input,
.mb-input-icon .form-control {
    border-radius: 0 var(--mb-radius-xs) var(--mb-radius-xs) 0;
    flex: 1;
    min-width: 0;
}

.mb-input-icon input:focus,
.mb-input-icon .form-control:focus {
    z-index: 1;
}

.mb-input-icon input.is-valid,
.mb-input-icon .form-control.is-valid {
    border-color: var(--mb-success);
    box-shadow: 0 0 0 1px var(--mb-success) inset;
}

.mb-input-icon input.is-invalid,
.mb-input-icon .form-control.is-invalid {
    border-color: var(--mb-danger);
    box-shadow: 0 0 0 1px var(--mb-danger) inset;
}

/* ----- 4.11 Estado vacío (equivale a .mmz-planteles-empty) ----- */

.mb-empty {
    align-items: center;
    background-color: var(--mb-surface-4);
    border: 1px dashed #c4cdd5;
    border-radius: var(--mb-radius-sm);
    color: var(--mb-muted);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px 20px;
    text-align: center;
}

.mb-empty p {
    margin: 0;
    max-width: 46ch;
}

.mb-empty__icon {
    align-items: center;
    background-color: var(--mb-secondary-soft);
    border-radius: 50%;
    color: var(--mb-secondary);
    display: inline-flex;
    font-size: var(--mb-fs-xl);
    height: 48px;
    justify-content: center;
    width: 48px;
}

.mb-empty__title {
    color: var(--mb-ink);
    font-size: var(--mb-fs-md);
    font-weight: 700;
}

/* ----- 4.12 Tarjeta seleccionable (equivale a .mmz-plantel-card) ----- */

.mb-option-card {
    background-color: var(--mb-surface);
    border: 1px solid var(--mb-border-strong);
    border-radius: var(--mb-radius-sm);
    cursor: pointer;
    display: grid;
    gap: var(--mb-space-3);
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0;
    padding: 14px;
    transition: border-color var(--mb-transition), box-shadow var(--mb-transition);
}

.mb-option-card:hover:not(.is-disabled) {
    border-color: var(--mb-primary);
    box-shadow: 0 1px 6px rgb(97 18 50 / 10%);
}

.mb-option-card.is-selected {
    border-color: var(--mb-primary);
    box-shadow: 0 0 0 3px rgb(97 18 50 / 18%);
}

.mb-option-card.is-disabled {
    background-color: var(--mb-surface-4);
    cursor: not-allowed;
    opacity: 0.65;
}

/* ----- 4.13 Tabla de datos ----- */

.mb-table-wrap {
    background: var(--mb-surface);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius-lg);
    box-shadow: var(--mb-shadow-card);
    overflow-x: auto;
}

.mb-table {
    border-collapse: collapse;
    margin: 0;
    width: 100%;
}

.mb-table thead {
    background: var(--mb-surface-2);
}

.mb-table thead th {
    border-bottom: 2px solid var(--mb-border);
    color: var(--mb-muted-2);
    font-size: var(--mb-fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 12px 14px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Encabezado de fila: es una celda de datos con énfasis, no una cabecera. */
.mb-table tbody th {
    border-bottom: 1px solid var(--mb-border-soft);
    color: var(--mb-ink);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px;
    text-align: left;
    vertical-align: middle;
}

.mb-table td {
    border-bottom: 1px solid var(--mb-border-soft);
    color: var(--mb-text);
    font-size: 14px;
    padding: 12px 14px;
    vertical-align: middle;
}

.mb-table tbody tr:hover {
    background: var(--mb-surface-2);
}

.mb-table tbody tr:last-child td {
    border-bottom: none;
}

/* ----- 4.14 Barra de progreso ----- */

.mb-progress {
    background: var(--mb-border-soft);
    border-radius: var(--mb-radius-pill);
    height: 8px;
    overflow: hidden;
    width: 100%;
}

.mb-progress__bar {
    background: var(--mb-primary);
    border-radius: var(--mb-radius-pill);
    height: 100%;
    transition: width var(--mb-transition-slow);
}

.mb-progress__bar--success {
    background: var(--mb-success);
}

.mb-progress__bar--warning {
    background: var(--mb-warning);
}

/* =====================================================================
   5. GRÁFICA BASE DE GOB.MX v3 Y MENÚ BNMM
   ===================================================================== */

/* main.css de la v3 trae Bootstrap 5 completo, así que ya no hace falta la
   capa de utilidades que suplía a Bootstrap 3 (d-flex, la escala de
   espaciado, .card, los .row en flex). Aquí solo quedan el ajuste de las
   barras fijas y el tema de los componentes nativos.

   Dos barras se fijan arriba: la de gob.mx y la del BNMM (.navmm.fixed-top).
   Su altura combinada cambia con el breakpoint, así que mibach.js la mide y
   publica --mb-gobmx-offset. El valor de respaldo cubre que el CDN no
   responda. */
body {
    padding-top: var(--mb-gobmx-offset, 70px);
}

/* Los pies inyectados van al final del body, que es flex en columna. */
body > footer,
body > .main-footer,
#footerMM {
    flex: 0 0 auto;
}

#footerMM {
    margin-top: var(--mb-space-8);
}

/* Bootstrap 5 lee su tema de las --bs-*: se remapean al guinda institucional
   para que los componentes nativos queden alineados con el sistema. */
:root {
    --bs-primary: #611232;
    --bs-primary-rgb: 97, 18, 50;
    --bs-link-color: #611232;
    --bs-link-color-rgb: 97, 18, 50;
    --bs-link-hover-color: #7d2447;
    --bs-focus-ring-color: rgb(97 18 50 / 25%);
}

.btn-primary {
    --bs-btn-bg: var(--mb-primary);
    --bs-btn-border-color: var(--mb-primary);
    --bs-btn-hover-bg: var(--mb-primary-light);
    --bs-btn-hover-border-color: var(--mb-primary-light);
    --bs-btn-active-bg: var(--mb-primary-dark);
    --bs-btn-active-border-color: var(--mb-primary-dark);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mb-primary-light);
    box-shadow: var(--mb-shadow-focus);
}

.modal-content {
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius-lg);
}

.modal-header {
    border-bottom: 1px solid var(--mb-border-soft);
}

.modal-footer {
    border-top: 1px solid var(--mb-border-soft);
}

/* ----- Sidebar: los disparadores pasaron de <div onclick> a <button> -----
   Se neutralizan los estilos nativos del botón para conservar exactamente
   la apariencia previa, ganando semántica y foco por teclado. */
.sidebar-toggle,
.sidebar-block-header,
.nested-header {
    appearance: none;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    width: 100%;
}

.sidebar-toggle,
.sidebar-block-header {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.sidebar-toggle:focus-visible,
.sidebar-block-header:focus-visible,
.nested-header:focus-visible {
    outline: 2px solid var(--mb-primary);
    outline-offset: -2px;
}

/* Los enlaces del menú ya no llevan estilo inline. */
.sidebar-item a,
.nested-link a {
    color: inherit;
    text-decoration: none;
}

.sidebar-item a:hover,
.nested-link a:hover {
    color: var(--mb-primary);
    text-decoration: underline;
}

/* ----- Saludo de usuario: el disparador del menú es un <button> ----- */
.user-greeting-title {
    margin: 0;
}

/* "Mesa de servicio" es un enlace, no un <button> dentro de un <a>. */
a.btn-sigaprep {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
}

a.btn-sigaprep:hover {
    color: #fff;
}

.cuenta-accion:focus-visible {
    outline: 2px solid var(--mb-primary);
    outline-offset: 2px;
}

/* =====================================================================
   6. RESPONSIVE
   ===================================================================== */

@media (max-width: 767px) {
    .mb-page-header__title {
        font-size: clamp(24px, 8vw, 32px);
    }

    .mb-page-header__intro {
        font-size: var(--mb-fs-md);
    }

    .mb-card__header,
    .mb-card__body {
        padding-left: var(--mb-space-4);
        padding-right: var(--mb-space-4);
    }

    .mb-card__body {
        padding-bottom: var(--mb-space-4);
        padding-top: var(--mb-space-4);
    }

    .mb-actions {
        align-items: stretch;
        flex-direction: column;
        padding: var(--mb-space-3);
    }

    .mb-actions > a.mb-btn:first-of-type,
    .mb-actions > .mb-btn--back {
        margin-right: 0;
    }

    .mb-actions .mb-btn {
        width: 100%;
    }

    .mb-actions__estado {
        order: -1;
        text-align: center;
        width: 100%;
    }

    .mb-datalist {
        grid-template-columns: 1fr;
    }

    .mb-toasts {
        left: var(--mb-space-3);
        right: var(--mb-space-3);
        width: auto;
    }

    .mb-section-title {
        margin-top: var(--mb-space-5);
    }

}

@media (max-width: 480px) {
    .mb-card__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .mb-chip {
        font-size: 11.5px;
    }
}

/* =====================================================================
   7. MARCO RENOVADO DEL PORTAL

   Esta capa conserva los contratos históricos de las vistas y moderniza el
   marco común: saludo, contenido y menú derecho. Los módulos pueden migrarse
   gradualmente a los componentes mb-* sin perder compatibilidad.
   ===================================================================== */

.mb-portal-body {
    background:
        linear-gradient(180deg, #fff 0, #fff 180px, #f6f8f7 460px, #f6f8f7 100%);
}

.mb-portal-body .user-greeting-wrapper {
    background:
        radial-gradient(circle at 85% 10%, rgb(35 91 78 / 8%), transparent 24rem),
        linear-gradient(135deg, #fff 0%, #fbfcfc 100%);
    border-bottom: 1px solid var(--mb-border);
    margin: 0;
    padding: 34px 0 30px;
}

.mb-portal-body .user-greeting-container {
    max-width: 1280px;
    padding-left: 24px;
    padding-right: 24px;
}

.mb-portal-body .greeting-header {
    align-items: center;
    margin: 0;
}

.mb-portal-body .greeting-left {
    min-width: 0;
}

/* El encabezado centra verticalmente sus dos lados, lo que daba igual cuando
   el derecho estaba vacio. Con las acciones de cuenta dentro, centrarlas las
   dejaba a media altura, junto al texto de bienvenida; van arriba. */
.mb-portal-body .greeting-right {
    align-self: flex-start;
}

.user-context {
    align-items: center;
    color: var(--mb-secondary);
    display: flex;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: 0.1em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.user-context i {
    align-items: center;
    background: var(--mb-secondary-soft);
    border-radius: 50%;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.mb-portal-body .user-greeting-title {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    font-size: clamp(29px, 4vw, 43px);
    gap: 0.24em;
    letter-spacing: -0.025em;
    line-height: 1.14;
}

.user-greeting-prefix {
    color: var(--mb-ink-strong);
    font-weight: 400;
}

.mb-portal-body .user-greeting {
    color: var(--mb-primary);
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
}

/* ----- Acciones de cuenta, sin desplegable -----
   Son una o dos y viven a la vista, en el hueco derecho que .greeting-header
   ya reservaba. Antes se escondian tras un menu cuyo disparador era el propio
   nombre, dentro del <h1>: nadie hace clic en un titulo. */
.cuenta-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cuenta-accion {
    align-items: center;
    background: #fff;
    border: 1px solid var(--mb-border-strong);
    border-radius: 8px;
    color: var(--mb-ink);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    padding: 9px 16px;
    text-decoration: none;
    transition: background-color var(--mb-transition), border-color var(--mb-transition);
    white-space: nowrap;
}

.cuenta-accion i {
    color: var(--mb-muted-2);
    font-size: 13px;
}

.cuenta-accion:hover {
    background: var(--mb-surface-2);
    border-color: var(--mb-muted-2);
    color: var(--mb-ink-strong);
}

.cuenta-accion:hover i {
    color: var(--mb-primary);
}

/* Cerrar sesion termina lo que estas haciendo, asi que se distingue por color,
   no por peso: pesa igual que su vecino. Sin borde propio se veia mas flojo
   que el boton neutro de al lado, que es justo la jerarquia contraria. */
.cuenta-accion--salir,
.cuenta-accion--salir i {
    color: var(--mb-danger-text);
}

.cuenta-accion--salir {
    background: var(--mb-danger-soft);
    border-color: var(--mb-danger-border-strong);
}

.cuenta-accion--salir:hover {
    background: #fdeaea;
    border-color: var(--mb-danger-text);
    color: var(--mb-danger-text);
}

.cuenta-accion--salir:hover i {
    color: var(--mb-danger-text);
}

.mb-portal-body .welcome-message {
    color: var(--mb-muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 10px 0 0;
    max-width: 720px;
    text-align: left;
}

.user-role {
    align-items: center;
    background: var(--mb-secondary-soft);
    border: 1px solid var(--mb-secondary-border);
    border-radius: var(--mb-radius-pill);
    color: var(--mb-secondary-dark);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    margin: 12px 0 0;
    padding: 4px 10px;
}

.mb-portal-layout {
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) 304px;
    max-width: 1280px;
    padding-bottom: max(56px, env(safe-area-inset-bottom));
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 28px;
    width: 100%;
}

.mb-portal-content {
    min-width: 0;
    text-align: left;
}

.mb-portal-content > .mb-page-header,
.mb-portal-content > .container-fluid > .row > [class*="col-"] > .mb-page-header {
    margin-bottom: 22px;
}

.mb-portal-content .mb-page-header__title {
    font-size: clamp(27px, 3vw, 38px);
    letter-spacing: -0.02em;
}

.mb-portal-content .mb-page-header__title::after {
    background: linear-gradient(90deg, var(--mb-primary) 0 75%, var(--mb-gold) 75% 100%);
    bottom: 0;
    border-radius: var(--mb-radius-pill);
    content: "";
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    width: 74px;
}

.mb-portal-content .mb-page-header__title {
    padding-bottom: 14px;
    position: relative;
}

.mb-portal-content .mb-card,
.mb-portal-content .content-box {
    border: 1px solid var(--mb-border);
    border-radius: 12px;
    box-shadow: 0 8px 26px rgb(27 55 48 / 7%);
}

.mb-portal-content .content-box {
    padding: clamp(20px, 3vw, 30px);
}

.mb-portal-content .mb-card__header {
    background: linear-gradient(180deg, #fff, #fbfcfc);
}

.mb-portal-content .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Menú derecho ------------------------------------------------------- */

.mb-portal-body .sidebar {
    max-height: calc(100vh - var(--mb-gobmx-offset, 96px) - 24px);
    overflow: auto;
    position: sticky;
    top: calc(var(--mb-gobmx-offset, 96px) + 18px);
}

.mb-portal-body .sidebar-toggle {
    display: none;
}

.mb-portal-body .sidebar-content {
    background: #fff;
    border: 1px solid var(--mb-border);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgb(27 55 48 / 7%);
    overflow: hidden;
}

.sidebar-intro {
    align-items: center;
    background:
        radial-gradient(circle at 90% 15%, rgb(165 127 44 / 16%), transparent 9rem),
        var(--mb-primary);
    color: #fff;
    display: grid;
    gap: 12px;
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 18px;
}

.sidebar-intro__icon {
    align-items: center;
    background: rgb(255 255 255 / 13%);
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 10px;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.sidebar-intro strong,
.sidebar-intro small {
    display: block;
}

.sidebar-intro strong {
    color: #fff;
    font-size: 16px;
}

.sidebar-intro small {
    color: rgb(255 255 255 / 78%);
    font-size: 11.5px;
    line-height: 1.35;
    margin-top: 2px;
}

.mb-portal-body .sidebar-block {
    border: 0;
    border-bottom: 1px solid var(--mb-border-soft);
    border-radius: 0;
    margin: 0;
    overflow: visible;
}

.mb-portal-body .sidebar-block:last-child {
    border-bottom: 0;
}

.mb-portal-body .sidebar-block-header {
    background: #fff;
    border: 0;
    color: var(--mb-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.07em;
    min-height: 44px;
    padding: 12px 16px 9px;
    text-transform: uppercase;
}

.mb-portal-body .sidebar-block-header:hover {
    background: var(--mb-surface-2);
}

.mb-portal-body .sidebar-block-header--link {
    text-decoration: none;
}

.mb-portal-body .sidebar-block-header--link > span {
    align-items: center;
    display: flex;
    gap: 9px;
}

.mb-portal-body .sidebar-block-header--link > span > i {
    color: var(--mb-secondary);
    flex: 0 0 18px;
    text-align: center;
}

.mb-portal-body .sidebar-block-header--link.is-active {
    background: linear-gradient(90deg, var(--mb-primary-soft), #fff);
    box-shadow: inset 4px 0 0 var(--mb-primary);
    color: var(--mb-primary-dark);
}

.mb-portal-body .sidebar-block-link-icon {
    color: var(--mb-muted-2);
    font-size: 12px;
    transition: transform var(--mb-transition);
}

.mb-portal-body .sidebar-block-header--link:hover .sidebar-block-link-icon {
    transform: translateX(2px);
}

.mb-portal-body .toggle-icon {
    color: var(--mb-muted-2);
    font-size: 14px;
}

.mb-portal-body .sidebar-block-content {
    padding: 0 9px 10px;
}

.mb-portal-body .sidebar-item {
    align-items: stretch;
    color: var(--mb-text);
    gap: 0;
    margin: 2px 0;
    padding: 0;
}

.mb-portal-body .item-dot {
    display: none;
}

.mb-portal-body .sidebar-item > a,
.mb-portal-body .nested-header {
    align-items: center;
    border-radius: 8px;
    display: flex;
    font-size: 14px;
    gap: 10px;
    min-height: 42px;
    padding: 9px 11px;
    width: 100%;
}

.mb-portal-body .sidebar-item > a > i,
.mb-portal-body .nested-header span > i {
    color: var(--mb-secondary);
    flex: 0 0 18px;
    text-align: center;
}

.mb-portal-body .sidebar-item > a:hover,
.mb-portal-body .nested-header:hover {
    background: var(--mb-surface-3);
    color: var(--mb-primary);
    text-decoration: none;
}

.mb-portal-body .sidebar-item.is-active > a,
.mb-portal-body .sidebar-item.is-active > .item-content > .nested-header {
    background: var(--mb-primary-soft);
    box-shadow: inset 3px 0 0 var(--mb-primary);
    color: var(--mb-primary-dark);
    font-weight: 700;
}

.mb-portal-body .sidebar-item.is-active > a > i,
.mb-portal-body .sidebar-item.is-active > .item-content > .nested-header span > i {
    color: var(--mb-primary);
}

.mb-portal-body .sidebar-item-nested .item-content {
    width: 100%;
}

.mb-portal-body .nested-toggle {
    color: var(--mb-muted-2);
    font-size: 11px;
    margin-left: auto;
    transition: transform var(--mb-transition);
}

.mb-portal-body .nested-header.collapsed .nested-toggle {
    transform: rotate(-90deg);
}

.mb-portal-body .nested-details {
    border-left: 1px solid var(--mb-border);
    margin: 3px 0 5px 18px;
    padding-left: 9px;
}

.mb-portal-body .nested-details.collapsed {
    display: none;
}

.mb-portal-body .nested-link {
    border: 0;
    margin: 1px 0;
    padding: 0;
}

.mb-portal-body .nested-link > i {
    display: none;
}

.mb-portal-body .nested-link a {
    border-radius: 7px;
    color: var(--mb-muted);
    display: block;
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 10px;
}

.mb-portal-body .nested-link a:hover,
.mb-portal-body .nested-link.is-active a {
    background: var(--mb-surface-3);
    color: var(--mb-primary);
    text-decoration: none;
}

.mb-portal-body .nested-link.is-active a {
    font-weight: 700;
}

.sidebar-empty {
    align-items: flex-start;
    color: var(--mb-muted);
    display: flex;
    font-size: 13px;
    gap: 9px;
    line-height: 1.45;
    padding: 18px;
}

.sidebar-empty i {
    color: var(--mb-secondary);
    margin-top: 2px;
}

@media (max-width: 1024px) {
    .mb-portal-layout {
        gap: 18px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
    }

    .mb-portal-body .sidebar {
        max-height: none;
        overflow: visible;
        position: relative;
        top: 0;
    }

    .mb-portal-body .sidebar-toggle {
        background: var(--mb-primary);
        border: 1px solid var(--mb-primary);
        border-radius: 10px;
        box-shadow: 0 7px 18px rgb(97 18 50 / 15%);
        color: #fff;
        display: flex;
        font-size: 15px;
        margin: 0;
        min-height: 50px;
        padding: 12px 16px;
    }

    .mb-portal-body .sidebar-toggle:hover {
        box-shadow: 0 9px 22px rgb(97 18 50 / 20%);
        transform: none;
        color: #fff;
    }

    .mb-portal-body .sidebar-content {
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    .mb-portal-body .user-greeting-wrapper {
        padding: 26px 0 23px;
    }

    .mb-portal-body .user-greeting-container,
    .mb-portal-layout {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mb-portal-body .user-greeting-title {
        font-size: clamp(26px, 8vw, 32px);
    }

    .mb-portal-body .user-greeting {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Con el relleno de escritorio, los dos botones se pasaban por dos pixeles
       y caian en renglones distintos a 375px. */
    .mb-portal-body .cuenta-acciones {
        gap: 8px;
    }

    .mb-portal-body .cuenta-accion {
        padding: 9px 13px;
    }

    .mb-portal-body .welcome-message {
        font-size: 14px;
    }

    .mb-portal-layout {
        padding-bottom: 42px;
        padding-top: 16px;
    }

    .mb-portal-content .content-box {
        padding: 20px 16px;
    }

    .mb-portal-content .content-box-header {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .mb-portal-content .content-box-header h2 {
        font-size: 24px;
        line-height: 1.2;
    }

    .mb-portal-content .content-box-header > :is(a, button) {
        justify-content: center;
        width: 100%;
    }
}

/* Los enlaces con apariencia de botón deben conservar contraste pese a la
   regla global de enlaces institucionales. */
a.btn-primary,
a.btn-secondary,
a.btn-danger,
a.mb-btn--primary,
a.mb-btn--secondary {
    color: #fff;
    text-decoration: none;
}

a.btn-primary:hover,
a.btn-secondary:hover,
a.btn-danger:hover,
a.mb-btn--primary:hover,
a.mb-btn--secondary:hover {
    color: #fff;
    text-decoration: none;
}

/* =====================================================================
   8. COMPOSICIÓN MMZ DEL PORTAL

   La primera renovación homologó colores y componentes. Esta capa termina
   de trasladar la composición del Registro Margarita Maza: fondo operativo
   gris, superficies blancas nítidas, acentos verde/guinda, jerarquía visible
   y controles cómodos. Las cabeceras de contenido se limitan a las vistas
   renovables mediante .mb-readable-page; Credencial y documentos conservan
   su presentación propia.
   ===================================================================== */

.mb-portal-body {
    background: #f3f5f5;
}

.mb-portal-body .user-greeting-wrapper {
    background:
        radial-gradient(circle at 88% 5%, rgb(165 127 44 / 10%), transparent 20rem),
        linear-gradient(135deg, #fdfefe 0%, #f6faf8 100%);
    border-bottom: 1px solid #dbe4e1;
    box-shadow: inset 0 -1px 0 rgb(35 91 78 / 4%);
    padding-bottom: 26px;
    padding-top: 28px;
}

.mb-portal-body .user-greeting-container,
.mb-portal-layout {
    max-width: 1320px;
}

.mb-portal-body .user-greeting-title {
    font-size: clamp(28px, 3.25vw, 40px);
}

.mb-portal-body .welcome-message {
    font-size: 16px;
}

.mb-portal-layout {
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) 310px;
    padding-top: 30px;
}

/* Cabecera de las pantallas estudiantiles renovables. */
.mb-portal-content .mb-readable-page > .mb-page-header,
.mb-portal-content .mb-readable-page > .container-fluid > .row > [class*="col-"] > .mb-page-header,
.mb-portal-content .mb-view-container.mb-readable-page > .row > [class*="col-"] > .mb-page-header {
    background:
        radial-gradient(circle at 96% 8%, rgb(35 91 78 / 8%), transparent 15rem),
        #fff;
    border: 1px solid #dfe7e4;
    border-left: 4px solid var(--mb-secondary);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgb(15 63 55 / 6%);
    margin-bottom: 20px;
    overflow: hidden;
    padding: 21px 24px 22px;
    position: relative;
}

.mb-portal-content .mb-readable-page > .mb-page-header::before,
.mb-portal-content .mb-readable-page > .container-fluid > .row > [class*="col-"] > .mb-page-header::before,
.mb-portal-content .mb-view-container.mb-readable-page > .row > [class*="col-"] > .mb-page-header::before {
    color: var(--mb-secondary);
    content: "MI BACHILLERATO";
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
    margin-bottom: 7px;
}

.mb-portal-content .mb-readable-page .mb-page-header__title {
    font-size: clamp(26px, 3vw, 34px);
    padding-bottom: 0;
}

.mb-portal-content .mb-readable-page .mb-page-header__title::after {
    display: none;
}

.mb-portal-content .mb-readable-page .mb-page-header__intro {
    font-size: 16px;
    max-width: 78ch;
}

.mb-portal-content .mb-readable-page .mb-card {
    border-color: #dfe7e4;
    box-shadow: 0 8px 24px rgb(15 63 55 / 6%);
}

.mb-portal-content .mb-readable-page .mb-card__header {
    border-left: 4px solid var(--mb-primary);
    padding-left: 20px;
}

/* Menú derecho: conserva su ubicación y contrato, pero adopta la barra verde
   y los estados de navegación del panel administrativo MMZ. */
.mb-portal-body .sidebar-content {
    border-color: #dce5e2;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgb(15 63 55 / 8%);
}

.sidebar-intro {
    background:
        radial-gradient(circle at 92% 12%, rgb(165 127 44 / 22%), transparent 9rem),
        linear-gradient(135deg, #153f37 0%, #235b4e 100%);
    border-bottom: 3px solid var(--mb-gold);
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 18px 17px 17px;
}

.sidebar-intro__icon {
    border-radius: 9px;
    height: 42px;
    width: 42px;
}

.sidebar-intro strong {
    font-size: 17px;
    letter-spacing: -0.01em;
}

.sidebar-intro small {
    font-size: 13px;
    line-height: 1.35;
}

.mb-portal-body .sidebar-block-header {
    color: #59635f;
    font-size: 13px;
    min-height: 47px;
    padding: 13px 15px 10px;
}

.mb-portal-body .sidebar-block-content {
    padding: 0 8px 11px;
}

.mb-portal-body .sidebar-item > a,
.mb-portal-body .nested-header {
    border: 1px solid transparent;
    font-size: 15px;
    min-height: 44px;
    padding: 9px 11px;
}

.mb-portal-body .sidebar-item > a:hover,
.mb-portal-body .nested-header:hover {
    background: var(--mb-secondary-soft);
    border-color: var(--mb-secondary-border);
    color: var(--mb-secondary-dark);
}

.mb-portal-body .sidebar-item.is-active > a,
.mb-portal-body .sidebar-item.is-active > .item-content > .nested-header {
    background: linear-gradient(90deg, var(--mb-primary-soft), #fff);
    border-color: var(--mb-primary-border);
    box-shadow: inset 4px 0 0 var(--mb-primary);
}

.mb-portal-body .nested-link a {
    font-size: 14px;
    min-height: 38px;
    padding: 8px 10px;
}

.sidebar-empty {
    font-size: 14px;
}

@media (max-width: 1024px) {
    .mb-portal-layout {
        gap: 18px;
        grid-template-columns: 1fr;
    }

    .mb-portal-body .sidebar {
        grid-row: 1;
    }

    .mb-portal-body .sidebar-toggle {
        background: linear-gradient(135deg, #153f37, var(--mb-secondary));
        border-color: #153f37;
        border-bottom: 3px solid var(--mb-gold);
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .mb-portal-body .user-greeting-wrapper {
        padding-bottom: 21px;
        padding-top: 23px;
    }

    .mb-portal-content .mb-readable-page > .mb-page-header,
    .mb-portal-content .mb-readable-page > .container-fluid > .row > [class*="col-"] > .mb-page-header,
    .mb-portal-content .mb-view-container.mb-readable-page > .row > [class*="col-"] > .mb-page-header {
        border-left-width: 3px;
        padding: 18px;
    }

    .mb-portal-content .mb-readable-page .mb-page-header__title {
        font-size: 26px;
    }
}