/*
 * cati-local/modal.css -- .u-modal pattern over bootstrap.Modal (WIZARDTICK-126)
 *
 * Local extension to the CATI visual system. The official package
 * (client/static/css/cati/*.css, delivered by design) covers the wizard and
 * login only; everything here follows the same --uvaq-* tokens but is NOT part
 * of that delivery. Each pattern is documented in
 * _uvaq-assets/sistema-visual-cati/extensiones-locales/. Loaded from base.html
 * right after cati.min.css (see the <link> list there for the order).
 */

/* --- Modal (WIZARDTICK-126). The CATI package has no modal, so this is a
   full local pattern. bootstrap.Modal stays as the engine (open/close, focus
   trap, Esc, backdrop); the --bs-modal-* variables are neutralized so only
   this skin shows. Markup: .modal.u-modal > .modal-dialog > .modal-content >
   .u-modal__head / __body / __foot. Documented in mockup-modal.html. --- */
.modal.u-modal {
    --bs-modal-width: 520px;
    --bs-modal-padding: 0;
    --bs-modal-bg: var(--uvaq-surface-raised);
    --bs-modal-color: var(--uvaq-text);
    --bs-modal-border-color: var(--uvaq-border);
    --bs-modal-border-radius: var(--uvaq-radius-lg);
    --bs-modal-box-shadow: var(--uvaq-shadow-3);
}
.modal.u-modal .modal-content { overflow: hidden; }
/* Navy backdrop instead of black. Global: every modal in the app is a .u-modal. */
.modal-backdrop {
    --bs-backdrop-bg: var(--uvaq-brand-800);
    --bs-backdrop-opacity: 0.55;
}

.u-modal__head {
    display: flex;
    align-items: center;
    gap: var(--uvaq-space-3);
    padding: var(--uvaq-space-4) var(--uvaq-space-5);
    border-bottom: 1px solid var(--uvaq-border);
}
.u-modal__icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--uvaq-brand-100);
    color: var(--uvaq-brand-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.u-modal__icon--warning { background-color: var(--uvaq-warning-bg); color: var(--uvaq-warning); }
.u-modal__title {
    flex: 1;
    margin: 0;
    font-size: var(--uvaq-fs-h3);
    font-weight: var(--uvaq-fw-bold);
    line-height: var(--uvaq-lh-tight);
    color: var(--uvaq-text);
}
/* The close control is a compact icon button (.u-btn--icon.u-btn--sm). */
.u-modal__close { margin-left: var(--uvaq-space-2); }

.u-modal__body { padding: var(--uvaq-space-5); }
.u-modal__body > * + * { margin-top: var(--uvaq-space-3); }
.u-modal__body p { margin: 0; }

.u-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--uvaq-space-2);
    padding: var(--uvaq-space-4) var(--uvaq-space-5);
    background-color: var(--uvaq-surface-inset);
    border-top: 1px solid var(--uvaq-border);
}

/* Below sm the modal becomes a bottom sheet: full width, rounded top corners,
   actions stacked with the primary on top. */
@media (max-width: 575.98px) {
    .modal.u-modal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        max-width: none;
        min-height: 0;
        align-items: flex-end;
    }
    .modal.u-modal .modal-content {
        border-radius: var(--uvaq-radius-lg) var(--uvaq-radius-lg) 0 0;
        border-bottom: 0;
        max-height: 92vh;
        overflow-y: auto;
    }
    .u-modal__foot { flex-direction: column-reverse; }
    .u-modal__foot .u-btn { width: 100%; }
}