/* Capa administrativa compartida. Solo actúa dentro de .mb-admin-page. */
.mb-admin-page {
    --admin-control-height: 42px;
    --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;
    min-width: 0;
}

.mb-admin-page.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.mb-admin-page > .row {
    margin-left: 0;
    margin-right: 0;
}

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

.mb-admin-page .content-box,
.mb-admin-page.form-container {
    background: var(--mb-surface);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius-lg);
    box-shadow: var(--mb-shadow-card);
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.mb-admin-page .admin-header {
    border: 1px solid #dfe7e4;
    border-left: 4px solid var(--mb-secondary);
    border-radius: 13px;
    box-shadow: 0 8px 24px rgb(15 63 55 / 6%);
    margin-bottom: 20px;
    overflow: hidden;
}

.mb-admin-page .content-box-header,
.mb-admin-page .admin-header {
    align-items: center;
    background: linear-gradient(135deg, var(--mb-surface-2), #fff);
    border-bottom: 1px solid var(--mb-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--mb-space-4);
    justify-content: space-between;
    margin: 0;
    padding: 20px 24px;
}

.mb-admin-page .content-box-header > div,
.mb-admin-page .admin-header > div {
    min-width: 0;
}

.mb-admin-page .content-box-header h2,
.mb-admin-page .admin-title {
    align-items: center;
    color: var(--mb-ink);
    display: flex;
    font-size: clamp(1.25rem, 2.3vw, 1.6rem);
    font-weight: 750;
    gap: 10px;
    line-height: 1.25;
    margin: 0;
}

/* La Gráfica Base fija `html { font-size: 10px }`: un `rem` vale 10px, así que
   este glifo se dibujaba a menos de un cuarto de su caja. Referencia sana:
   `.admin-stat__icon`, 16px en una caja de 42 (38%). */
.mb-admin-page .content-box-header h2 > i,
.mb-admin-page .admin-title > i {
    align-items: center;
    background: var(--mb-primary-soft);
    border-radius: var(--mb-radius-sm);
    color: var(--mb-primary);
    display: inline-flex;
    flex: 0 0 36px;
    font-size: 15px;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.mb-admin-page .admin-header-intro {
    color: var(--mb-muted);
    font-size: 15px;
    line-height: 1.45;
    margin: 5px 0 0 46px;
    max-width: 72ch;
}

.mb-admin-page .content-box-body {
    padding: 24px;
}

.mb-admin-page .admin-history {
    margin-top: var(--mb-space-5);
}

.mb-admin-page .btn-primary,
.mb-admin-page .btn-secondary,
.mb-admin-page .btn-danger {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--mb-radius-sm);
    display: inline-flex;
    font-size: 15px;
    font-weight: 650;
    gap: 8px;
    justify-content: center;
    line-height: 1.3;
    min-height: var(--admin-control-height);
    padding: 9px 16px;
    text-decoration: none;
}

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

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

.mb-admin-page .btn-secondary:hover {
    background: var(--mb-primary-soft);
    border-color: var(--mb-primary);
    color: var(--mb-primary);
}

.mb-admin-page .btn-danger {
    background: var(--mb-danger-strong);
    border-color: var(--mb-danger-strong);
    color: #fff;
}

.mb-admin-page .btn-primary:focus-visible,
.mb-admin-page .btn-secondary:focus-visible,
.mb-admin-page .btn-danger:focus-visible,
.mb-admin-page .btn-icon:focus-visible,
.mb-admin-page .role-tab:focus-visible,
.mb-admin-page .module-title:focus-visible {
    box-shadow: 0 0 0 4px rgb(97 18 50 / 18%);
    outline: 2px solid var(--mb-primary);
    outline-offset: 2px;
}

.mb-admin-page .admin-stats {
    display: grid;
    gap: var(--mb-space-3);
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin-bottom: var(--mb-space-5);
}

.mb-admin-page .admin-stat {
    align-items: center;
    background: var(--mb-surface-2);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius);
    display: flex;
    gap: var(--mb-space-3);
    min-width: 0;
    padding: var(--mb-space-4);
}

.mb-admin-page .admin-stat__icon {
    align-items: center;
    background: var(--mb-primary-soft);
    border-radius: var(--mb-radius-sm);
    color: var(--mb-primary);
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.mb-admin-page .admin-stat strong {
    color: var(--mb-ink);
    display: block;
    font-size: 1.35rem;
    line-height: 1.1;
}

.mb-admin-page .admin-stat small {
    color: var(--mb-muted-2);
    display: block;
    font-size: 14px;
    margin-top: 3px;
}

.mb-admin-page .admin-stat--success .admin-stat__icon {
    background: var(--mb-success-soft);
    color: var(--mb-success);
}

.mb-admin-page .admin-stat--danger .admin-stat__icon {
    background: var(--mb-danger-soft);
    color: var(--mb-danger);
}

.mb-admin-page .search-bar {
    margin-bottom: var(--mb-space-4);
    position: relative;
}

.mb-admin-page .search-bar::before {
    color: var(--mb-muted-2);
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    left: 14px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.mb-admin-page .search-input {
    background: var(--mb-surface);
    border: 1px solid var(--mb-border-strong);
    border-radius: var(--mb-radius-sm);
    font-size: 15px;
    min-height: var(--admin-control-height);
    max-width: 520px;
    padding: 9px 14px 9px 40px;
    width: 100%;
}

.mb-admin-page .admin-filters {
    align-items: end;
    background: var(--mb-surface-2);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius);
    display: grid;
    gap: var(--mb-space-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: var(--mb-space-5);
    padding: var(--mb-space-4);
}

.mb-admin-page .admin-filter label {
    color: var(--mb-ink);
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

.mb-admin-page .admin-filter .form-input,
.mb-admin-page .admin-filter .form-select {
    min-height: var(--admin-control-height);
}

.mb-admin-page .admin-filter-actions {
    display: flex;
    gap: var(--mb-space-2);
}

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

/* Sin `width: 100%` la tabla crece hasta max-content y desborda su contenedor
   en cuanto hay una columna más; el `min-width` sigue marcando el piso a partir
   del cual toca desplazarse. */
.mb-admin-page .data-table table {
    margin: 0;
    min-width: 720px;
    width: 100%;
}

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

.mb-admin-page .data-table th {
    border-bottom: 2px solid var(--mb-border);
    color: var(--mb-muted-2);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0.05em;
    padding: 12px 14px;
    text-transform: uppercase;
}

.mb-admin-page .data-table td {
    color: var(--mb-text);
    font-size: 15px;
    padding: 13px 14px;
}

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

.mb-admin-page .btn-icon {
    align-items: center;
    border-radius: var(--mb-radius-sm);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.mb-admin-page .admin-badge-compact {
    font-size: 13px;
}

.mb-admin-page .admin-badge-count {
    margin-left: 4px;
}

.mb-admin-page .form-container {
    max-width: 820px;
    padding: clamp(20px, 4vw, 32px);
}

.mb-admin-page .form-container.form-wide {
    max-width: 1180px;
}

.mb-admin-page .form-group {
    margin-bottom: var(--mb-space-5);
}

.mb-admin-page .form-label {
    color: var(--mb-ink);
    font-size: 15px;
    margin-bottom: 7px;
}

.mb-admin-page .form-input,
.mb-admin-page .form-select,
.mb-admin-page .form-textarea {
    background-color: var(--mb-surface);
    border-color: var(--mb-border-strong);
    border-radius: var(--mb-radius-sm);
    font-size: 15px;
    min-height: var(--admin-control-height);
}

.mb-admin-page .form-help {
    font-size: 14px;
    line-height: 1.45;
    margin-top: 7px;
}

.mb-admin-page .form-actions {
    align-items: center;
    border-top: 1px solid var(--mb-border-soft);
    display: flex;
    flex-wrap: wrap;
    gap: var(--mb-space-3);
    justify-content: flex-end;
    margin-top: var(--mb-space-6);
    padding-top: var(--mb-space-5);
}

.mb-admin-page .info-card,
.mb-admin-page .info-box {
    border-radius: var(--mb-radius);
    font-size: 15px;
    line-height: 1.55;
}

.mb-admin-page .info-card p {
    text-align: left;
}

.mb-admin-page .permissions-grid {
    gap: var(--mb-space-3);
}

.mb-admin-page .permission-module {
    border-color: var(--mb-border);
    border-radius: var(--mb-radius-lg);
    box-shadow: var(--mb-shadow-card);
    padding: 0;
    overflow: hidden;
}

.mb-admin-page .module-title {
    appearance: none;
    background: var(--mb-surface-2);
    border: 0;
    border-bottom: 1px solid var(--mb-border-soft);
    color: var(--mb-ink);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    padding: 13px 16px;
    text-align: left;
    width: 100%;
}

.mb-admin-page .permission-submodule > .module-title {
    background: var(--mb-surface-3);
    font-size: 14px;
}

.mb-admin-page .permission-list {
    padding: var(--mb-space-3);
}

.mb-admin-page .permission-list[style*="display: none"] {
    padding-bottom: 0;
    padding-top: 0;
}

.mb-admin-page .admin-empty,
.mb-admin-page .admin-loading {
    align-items: center;
    color: var(--mb-muted);
    display: flex;
    flex-direction: column;
    gap: var(--mb-space-2);
    justify-content: center;
    padding: 42px 20px;
    text-align: center;
}

.mb-admin-page .admin-empty i,
.mb-admin-page .admin-loading i {
    align-items: center;
    background: var(--mb-secondary-soft);
    border-radius: 50%;
    color: var(--mb-secondary);
    display: inline-flex;
    font-size: 20px;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.mb-admin-page .admin-empty p,
.mb-admin-page .admin-loading p {
    margin: 0;
}

.mb-admin-page .admin-profile {
    background: var(--mb-surface-2);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius-lg);
    margin-bottom: var(--mb-space-5);
    padding: var(--mb-space-5);
}

.mb-admin-page .admin-form-narrow {
    margin-left: auto;
    margin-right: auto;
    max-width: 680px;
}

/* La Gráfica Base fija `html { font-size: 10px }`, así que un `rem` vale 10px
   y no 16. Las medidas tipográficas van en px, como el resto de esta hoja. */
.mb-admin-page .admin-profile__meta {
    margin: 8px 0 0;
    color: #6b7480;
    font-size: 12px;
}

/* Zona sensible: genera una clave nueva e invalida las sesiones activas de la
   cuenta, sin vuelta atrás. El verde informativo del sistema contradecía esa
   consecuencia, así que va en ámbar y separada del formulario por su borde
   superior. */
.mb-admin-page .mb-password-reset {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin: 28px 0 0;
    padding: 16px 18px;
    border: 1px solid #e6cf9a;
    border-top: 3px solid #c9a227;
    border-radius: 12px;
    background: #fdf9ef;
}

.mb-admin-page .mb-password-reset > div:first-child {
    min-width: 0;
}

.mb-admin-page .mb-password-reset strong {
    color: #6b4e05;
}

.mb-admin-page .mb-password-reset p {
    margin: 4px 0 0;
    color: #59636e;
    font-size: 13px;
}

/* El botón repartía ancho con el texto descriptivo y partía su etiqueta en dos
   renglones a 1440px. */
.mb-admin-page .mb-password-reset form {
    flex: none;
}

.mb-admin-page .mb-password-reset .btn-secondary {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .mb-admin-page .mb-password-reset {
        align-items: stretch;
        flex-direction: column;
    }

    .mb-admin-page .mb-password-reset .btn-secondary {
        width: 100%;
    }
}

/* Modal de contraseña temporal --------------------------------------- */

.mb-password-modal__subject {
    margin: 0 0 6px;
    color: #59636e;
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* Monoespaciada y espaciada: se dicta por teléfono y se transcribe a mano.
   Sin agrupar en bloques — un espacio literal viajaría en la selección y
   produciría una contraseña inválida. */
.mb-password-modal__value {
    display: block;
    margin: 14px auto 16px;
    padding: 15px 14px;
    border: 2px solid #611232;
    border-radius: 10px;
    background: #fff;
    color: #1f2933;
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.35;
    overflow-wrap: anywhere;
    user-select: all;
}

.mb-password-modal__actions {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.mb-password-modal__status {
    min-height: 18px;
    margin: 0 0 6px;
    color: #2f6b3c;
    font-size: 13px;
}

.mb-password-modal__notice {
    margin: 0;
    color: #59636e;
    font-size: 13px;
}

/* El ancho por defecto del diálogo parte la clave en dos renglones, y una
   contraseña cortada a la mitad es más difícil de transcribir. */
.swal2-popup.mb-password-modal {
    width: 460px;
    max-width: calc(100vw - 32px);
}

/* Único diálogo del sistema con el contenido centrado: la clave es el objeto
   de la pantalla, no un párrafo que se lee de izquierda a derecha. */
.mb-password-modal .mb-confirm__html {
    padding: 4px 26px 0;
    text-align: center;
}

/* `.btn-primary` del panel sólo aplica bajo `.mb-admin-page`, y SweetAlert
   monta el diálogo al final del body. */
.mb-password-modal .mb-password-modal__copy {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    background: #611232;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.mb-password-modal .mb-password-modal__copy:hover {
    background: #7a1740;
}

.mb-password-modal .swal2-confirm:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .mb-password-modal__value {
        font-size: 19px;
        letter-spacing: 0.1em;
    }
}

.mb-admin-page .admin-profile__identity {
    align-items: center;
    display: flex;
    gap: var(--mb-space-3);
    margin-bottom: var(--mb-space-3);
}

.mb-admin-page .admin-profile__icon {
    align-items: center;
    background: var(--mb-secondary-soft);
    border-radius: 50%;
    color: var(--mb-secondary);
    display: inline-flex;
    flex: 0 0 50px;
    height: 50px;
    justify-content: center;
    width: 50px;
}

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

.mb-admin-page .admin-profile__meta {
    color: var(--mb-muted-2);
    font-size: 14px;
    line-height: 1.5;
}

.mb-admin-page .admin-profile__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mb-space-2);
}

.mb-admin-page .admin-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mb-space-2);
    justify-content: center;
    margin-top: var(--mb-space-5);
}

.mb-admin-page .admin-pagination > a,
.mb-admin-page .admin-pagination > span:not(.admin-pagination__summary) {
    align-items: center;
    background: var(--mb-surface) !important;
    border: 1px solid var(--mb-border) !important;
    border-radius: var(--mb-radius-sm) !important;
    color: var(--mb-text) !important;
    display: inline-flex;
    font-size: 14px !important;
    justify-content: center;
    min-height: 36px;
    min-width: 36px;
    padding: 6px 10px !important;
    text-decoration: none !important;
}

.mb-admin-page .admin-pagination > span[style*="background"] {
    background: var(--mb-primary) !important;
    border-color: var(--mb-primary) !important;
    color: #fff !important;
}

.mb-admin-page .admin-pagination__summary {
    color: var(--mb-muted-2) !important;
    font-size: 14px !important;
    margin-left: var(--mb-space-2) !important;
}

/* Piso tipográfico para componentes administrativos heredados que aún
   declaran tamaños pequeños en sus hojas particulares. */
.mb-admin-page .form-section-title,
.mb-admin-page .permissions-section-header h3,
.mb-admin-page .assigned-panel-header h3 {
    font-size: 17px;
}

.mb-admin-page .role-tab,
.mb-admin-page .btn-preview,
.mb-admin-page .permission-label,
.mb-admin-page .assigned-module-title {
    font-size: 14px;
}

.mb-admin-page .permission-description,
.mb-admin-page .assigned-item-desc,
.mb-admin-page .permissions-section-hint,
.mb-admin-page .dato-label {
    font-size: 13px !important;
}

.mb-admin-page .badge,
.mb-admin-page code {
    font-size: 13px !important;
}

@media (max-width: 767px) {
    .mb-admin-page .content-box-header,
    .mb-admin-page .admin-header {
        align-items: stretch;
        flex-direction: column;
        padding: var(--mb-space-4);
    }

    .mb-admin-page .admin-header-intro {
        margin-left: 0;
    }

    .mb-admin-page .content-box-header > .btn-primary,
    .mb-admin-page .content-box-header > .btn-secondary,
    .mb-admin-page .admin-header > .btn-primary,
    .mb-admin-page .admin-header > .btn-secondary {
        width: 100%;
    }

    .mb-admin-page .content-box-body {
        padding: var(--mb-space-4);
    }

    .mb-admin-page .admin-filters {
        grid-template-columns: 1fr;
    }

    .mb-admin-page .admin-filter-actions,
    .mb-admin-page .admin-filter-actions .btn-primary,
    .mb-admin-page .admin-filter-actions .btn-secondary {
        width: 100%;
    }

    .mb-admin-page .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mb-admin-page .form-actions .btn-primary,
    .mb-admin-page .form-actions .btn-secondary {
        width: 100%;
    }

    .mb-admin-page .admin-profile__identity {
        align-items: flex-start;
    }
}

/* Composición administrativa inspirada en el panel de Margarita Maza. */
.mb-admin-page {
    --admin-control-height: 44px;
}

.mb-admin-page .content-box,
.mb-admin-page.form-container {
    border-color: #dfe7e4;
    border-radius: 13px;
    box-shadow: 0 8px 24px rgb(15 63 55 / 6%);
}

.mb-admin-page .content-box-header,
.mb-admin-page .admin-header {
    background:
        radial-gradient(circle at 96% 8%, rgb(35 91 78 / 8%), transparent 16rem),
        #fff;
    border-bottom-color: #dfe7e4;
    border-left: 4px solid var(--mb-secondary);
    min-height: 124px;
    padding: 22px 24px;
}

.mb-admin-page .content-box-header > div::before,
.mb-admin-page .admin-header > div::before {
    color: var(--mb-secondary);
    content: "ADMINISTRACIÓN";
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin: 0 0 7px 46px;
}

.mb-admin-page .content-box-header h2,
.mb-admin-page .admin-title {
    color: #24312e;
    font-size: clamp(1.45rem, 2.5vw, 1.78rem);
    letter-spacing: -0.02em;
}

.mb-admin-page .content-box-header h2 > i,
.mb-admin-page .admin-title > i {
    background: var(--mb-primary-soft);
    border: 1px solid var(--mb-primary-border);
    border-radius: 9px;
    flex-basis: 38px;
    height: 38px;
    width: 38px;
}

.mb-admin-page .admin-header-intro {
    color: #5c6864;
    font-size: 16px;
    line-height: 1.5;
    margin-top: 6px;
}

.mb-admin-page .content-box-body {
    padding: 26px 24px;
}

.mb-admin-page .btn-primary,
.mb-admin-page .btn-secondary,
.mb-admin-page .btn-danger {
    border-width: 2px;
    border-style: solid;
    border-radius: 8px;
    font-size: 15px;
    min-height: var(--admin-control-height);
    padding: 9px 17px;
    transition: box-shadow var(--mb-transition), transform var(--mb-transition), background var(--mb-transition);
}

.mb-admin-page .btn-primary:hover,
.mb-admin-page .btn-danger:hover {
    box-shadow: 0 5px 14px rgb(97 18 50 / 18%);
    transform: translateY(-1px);
}

.mb-admin-page .btn-secondary {
    border-color: var(--mb-primary);
}

.mb-admin-page .btn-secondary:hover {
    box-shadow: 0 5px 14px rgb(97 18 50 / 10%);
    transform: translateY(-1px);
}

.mb-admin-page .admin-stats {
    gap: 14px;
}

.mb-admin-page .admin-stat {
    background: #fff;
    border-color: #dfe7e4;
    border-left: 4px solid var(--mb-primary);
    border-radius: 11px;
    box-shadow: 0 5px 16px rgb(15 63 55 / 5%);
    min-height: 88px;
    padding: 17px;
}

.mb-admin-page .admin-stat--success {
    border-left-color: var(--mb-success);
}

.mb-admin-page .admin-stat--danger {
    border-left-color: var(--mb-danger);
}

.mb-admin-page .admin-stat strong {
    font-size: 1.6rem;
}

.mb-admin-page .admin-stat small {
    color: #606b67;
    font-size: 14px;
}

.mb-admin-page .admin-filters,
.mb-admin-page .admin-profile,
.mb-admin-page .info-card,
.mb-admin-page .info-box {
    background: #f8faf9;
    border-color: #dfe7e4;
}

.mb-admin-page .data-table {
    border-color: #d9e2df;
    border-radius: 11px;
}

.mb-admin-page .data-table thead {
    background: #f3f6f5;
}

.mb-admin-page .data-table th {
    border-bottom-color: #d4dfdb;
    color: #65706c;
    font-size: 13px;
    padding: 14px 15px;
}

.mb-admin-page .data-table td {
    border-bottom-color: #e8eeec;
    font-size: 15px;
    line-height: 1.5;
    padding: 15px;
}

.mb-admin-page .data-table tbody tr:hover {
    background: #f6faf8;
}

.mb-admin-page .search-input,
.mb-admin-page .form-input,
.mb-admin-page .form-select,
.mb-admin-page .form-textarea {
    border-color: #cfd9d5;
    border-radius: 8px;
    font-size: 16px;
}

.mb-admin-page .form-label,
.mb-admin-page .admin-filter label {
    color: #34413d;
    font-size: 15px;
}

.mb-admin-page .form-container {
    background:
        linear-gradient(180deg, rgb(248 250 249 / 72%), transparent 180px),
        #fff;
}

.mb-admin-page .form-section {
    border-color: #dfe7e4;
    border-radius: 11px;
    box-shadow: 0 4px 14px rgb(15 63 55 / 4%);
}

.mb-admin-page .form-section-title {
    border-left-color: var(--mb-secondary);
    color: #34413d;
    font-size: 17px;
    line-height: 1.35;
}

.mb-admin-page .role-tab,
.mb-admin-page .btn-preview {
    border-radius: 999px;
    min-height: 40px;
    padding: 8px 15px;
}

.mb-admin-page .role-tab:hover,
.mb-admin-page .btn-preview:hover {
    transform: translateY(-1px);
}

.mb-admin-page .permission-module {
    border-color: #dce5e2;
    box-shadow: 0 6px 18px rgb(15 63 55 / 5%);
}

.mb-admin-page .module-title {
    border-left: 4px solid var(--mb-secondary);
    font-size: 16px;
    min-height: 48px;
}

@media (max-width: 767px) {
    .mb-admin-page .content-box-header,
    .mb-admin-page .admin-header {
        border-left-width: 3px;
        min-height: 0;
        padding: 19px 17px;
    }

    .mb-admin-page .admin-header {
        border-left-width: 3px;
    }

    .mb-admin-page .content-box-header > div::before,
    .mb-admin-page .admin-header > div::before {
        margin-left: 0;
    }

    .mb-admin-page .content-box-header h2,
    .mb-admin-page .admin-title {
        align-items: flex-start;
        font-size: 1.45rem;
    }

    .mb-admin-page .admin-header-intro {
        font-size: 15px;
    }

    .mb-admin-page .content-box-body {
        padding: 20px 17px;
    }
}