/**
 * Diálogos del sistema (SweetAlert2) — propuesta.
 *
 * La Gráfica Base fija `html { font-size: 10px }` y swal2 dimensiona todo su
 * contenido en `em` relativos a `.swal2-popup`; por eso los diálogos salen
 * encogidos. Subir esa base reescala el diálogo completo de forma proporcional.
 */
.swal2-popup {
    font-size: 1.5rem;
}

.swal2-popup.mb-confirm {
    background:
        radial-gradient(circle at 100% 0, rgba(97, 18, 50, 0.06), transparent 190px),
        var(--mb-surface, #fff);
    border: 1px solid var(--mb-primary-border, #e3cdd6);
    border-radius: var(--mb-radius-lg, 16px);
    box-shadow: 0 28px 80px rgba(24, 16, 20, 0.26);
    color: var(--mb-text, #303b37);
    max-width: calc(100vw - 24px);
    overflow: hidden;
    padding: 0;
    width: 34em;
}

.mb-confirm .mb-confirm__html {
    margin: 0;
    overflow: visible;
    padding: 28px 28px 0;
}

.mb-confirm__content {
    color: var(--mb-text, #303b37);
    text-align: left;
}

.mb-confirm__header {
    align-items: center;
    display: flex;
    gap: 14px;
    padding-right: 24px;
}

.mb-confirm__icon {
    align-items: center;
    background-color: var(--mb-primary-soft, #f8eef2);
    border: 1px solid var(--mb-primary-border, #e3cdd6);
    border-radius: 15px;
    color: var(--mb-primary, #611232);
    display: inline-flex;
    flex: 0 0 52px;
    height: 52px;
    justify-content: center;
    transform: rotate(-2deg);
    width: 52px;
}

.mb-confirm__heading { min-width: 0; }

.mb-confirm__eyebrow {
    color: var(--mb-muted, #59635f);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.2;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.mb-confirm__title {
    color: var(--mb-ink, #1f2937);
    font-size: 22px;
    font-weight: 650;
    line-height: 1.22;
    margin: 0;
    text-wrap: balance;
}

.mb-confirm__message {
    color: var(--mb-muted, #59635f);
    font-size: 15px;
    line-height: 1.6;
    margin: 20px 0 0;
    text-wrap: pretty;
}

.mb-confirm__summary {
    background-color: var(--mb-surface-3, #f4f7f9);
    border: 1px solid var(--mb-border, #e0e6e4);
    border-radius: 12px;
    display: grid;
    margin: 18px 0 0;
    overflow: hidden;
}

.mb-confirm__summary > div {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 10px 13px;
}

.mb-confirm__summary > div + div { border-top: 1px solid var(--mb-border, #e0e6e4); }

.mb-confirm__summary dt,
.mb-confirm__summary dd { font-size: 13px; line-height: 1.35; margin: 0; }
.mb-confirm__summary dt { color: var(--mb-muted-2, #6b7280); font-weight: 500; }
.mb-confirm__summary dd { color: var(--mb-ink, #1f2937); font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.mb-confirm__notice {
    align-items: flex-start;
    background-color: var(--mb-warning-soft, #fff4e0);
    border: 1px solid var(--mb-warning-border, #edd6ac);
    border-radius: 12px;
    color: var(--mb-warning, #a05d00);
    display: flex;
    gap: 11px;
    margin-top: 18px;
    padding: 13px 14px;
}

.mb-confirm__notice-icon {
    align-items: center;
    background-color: var(--mb-warning, #a05d00);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 23px;
    font-size: 13px;
    font-weight: 700;
    height: 23px;
    justify-content: center;
    margin-top: 1px;
    width: 23px;
}

.mb-confirm__notice p { color: inherit; font-size: 13px; font-weight: 600; line-height: 1.48; margin: 0; }

.mb-confirm .mb-confirm__actions {
    align-self: stretch;
    border-top: 1px solid var(--mb-border-soft, #edf1f0);
    display: grid !important;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    justify-self: stretch;
    margin: 24px 28px 0;
    padding: 18px 0 24px;
    width: auto;
}

/* swal2 conserva el botón cancelar en el DOM aunque esté oculto, así que
   `:only-child` nunca coincide: el constructor marca el caso de un solo botón. */
.mb-confirm .mb-confirm__actions--single { grid-template-columns: 1fr; }

.mb-confirm__button {
    align-items: center;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
    line-height: 1.25;
    min-height: 46px;
    padding: 10px 16px;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.mb-confirm__button:focus-visible { box-shadow: 0 0 0 4px rgba(97, 18, 50, 0.18); outline: 0; }
.mb-confirm__button:active { transform: translateY(1px); }

.mb-confirm__button--cancel {
    background-color: var(--mb-surface-3, #f4f7f9);
    border: 1px solid var(--mb-border-strong, #d6dbdf);
    color: var(--mb-text, #303b37);
}
.mb-confirm__button--cancel:hover { background-color: #e9eeec; border-color: #aebdb8; }

.mb-confirm__button--accept {
    background-color: var(--mb-primary, #611232);
    border: 1px solid var(--mb-primary, #611232);
    color: #fff;
}
.mb-confirm__button--accept:hover { background-color: var(--mb-primary-dark, #4a0e26); border-color: var(--mb-primary-dark, #4a0e26); }

.mb-confirm .mb-confirm__close { color: var(--mb-muted-2, #6b7280); font-size: 27px; height: 42px; right: 12px; top: 10px; width: 42px; }
.mb-confirm .mb-confirm__close:hover { color: var(--mb-ink, #1f2937); }

/* Variantes ---------------------------------------------------------- */

.mb-confirm--warning .mb-confirm__icon {
    background-color: var(--mb-warning-soft, #fff4e0);
    border-color: var(--mb-warning-border, #edd6ac);
    color: var(--mb-warning, #a05d00);
}

.mb-confirm--danger .mb-confirm__icon {
    background-color: var(--mb-danger-soft, #fff5f5);
    border-color: var(--mb-danger-border, #edcaca);
    color: var(--mb-danger-strong, #b10f2e);
}
.mb-confirm--danger .mb-confirm__notice {
    background-color: var(--mb-danger-soft, #fff5f5);
    border-color: var(--mb-danger-border, #edcaca);
    color: var(--mb-danger-text, #6f2532);
}
.mb-confirm--danger .mb-confirm__notice-icon { background-color: var(--mb-danger-strong, #b10f2e); }
.mb-confirm--danger .mb-confirm__button--accept {
    background-color: var(--mb-danger-strong, #b10f2e);
    border-color: var(--mb-danger-strong, #b10f2e);
}
.mb-confirm--danger .mb-confirm__button--accept:hover { background-color: #8d0b24; border-color: #8d0b24; }

.mb-confirm--success .mb-confirm__icon {
    background-color: var(--mb-success-soft, #e6f3ee);
    border-color: var(--mb-success-border, #bfded3);
    color: var(--mb-success-text, #155146);
}

@media (max-width: 575.98px) {
    .mb-confirm .mb-confirm__actions { grid-template-columns: 1fr; }
    .mb-confirm__title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .mb-confirm__button { transition: none; }
}

/* Diálogo de carga ---------------------------------------------------- */

.swal2-popup.mb-loading {
    border: 1px solid var(--mb-primary-border, #e3cdd6);
    border-radius: var(--mb-radius-lg, 16px);
    box-shadow: 0 28px 80px rgba(24, 16, 20, 0.26);
    padding: 30px 28px 26px;
}

.mb-loading .swal2-title {
    color: var(--mb-ink, #1f2937);
    font-size: 19px;
    font-weight: 700;
}

.mb-loading .swal2-html-container {
    color: var(--mb-muted, #59635f);
    font-size: 14px;
    margin-top: 6px;
}

.mb-loading .swal2-loader {
    border-color: var(--mb-primary, #611232) transparent var(--mb-primary, #611232) transparent;
}

/* Avisos efímeros (toast) --------------------------------------------- */

.swal2-popup.mb-toast {
    border: 1px solid var(--mb-border, #e0e6e4);
    border-left: 4px solid var(--mb-primary, #611232);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(24, 16, 20, 0.16);
    font-size: 1rem;
    padding: 13px 16px;
}

.mb-toast .swal2-title {
    color: var(--mb-ink, #1f2937);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    text-align: left;
}

.mb-toast .swal2-timer-progress-bar { background: var(--mb-border-strong, #d6dbdf); }

.mb-toast--success { border-left-color: var(--mb-success, #1d6f5d); }
.mb-toast--success .swal2-timer-progress-bar { background: var(--mb-success, #1d6f5d); }
.mb-toast--error { border-left-color: var(--mb-danger-strong, #b10f2e); }
.mb-toast--error .swal2-timer-progress-bar { background: var(--mb-danger-strong, #b10f2e); }
.mb-toast--warning { border-left-color: var(--mb-warning, #a05d00); }
.mb-toast--warning .swal2-timer-progress-bar { background: var(--mb-warning, #a05d00); }