/* Property of Sistema THEAD. All rights reserved. */
/* -----------------------------------------------------------------------
   Project-wide popup theme. Linked LAST on every page so it unifies every
   SweetAlert popup regardless of per-page customClass, with !important
   direct overrides (load-order-proof against both SweetAlert's injected
   styles and the per-page popup rules):
     - no borders on any popup
     - one shared border-radius (--popup-radius)
     - a soft, subtle dark backdrop that fades in/out smoothly
   The custom settings modals (.settings-modal) are aligned to the same
   radius + a matching fade in settings/modal.css.
   ----------------------------------------------------------------------- */
:root {
    --popup-radius: 28px;
    --popup-backdrop: rgba(3, 40, 63, 0.45);
}

/* No borders, one radius — beats SweetAlert's --swal2-border-radius and any
   per-page `.swal-*-popup { border / border-radius }`. */
.swal2-popup {
    border: 0 !important;
    border-radius: var(--popup-radius) !important;
}

/* Soft navy backdrop, gentle fade. SweetAlert toggles
   swal2-backdrop-show / swal2-backdrop-hide on the container.

   NOTE: the transition is intentionally NOT !important so SweetAlert's own
   `swal2-no-transition` (added when a dialog opens while another is already
   showing) can disable it — that native behaviour helps stop the backdrop
   blinking between back-to-back dialogs. */
.swal2-container.swal2-backdrop-show {
    background: var(--popup-backdrop) !important;
    transition: background-color 0.22s ease;
}
.swal2-container.swal2-backdrop-hide {
    background: rgba(3, 40, 63, 0) !important;
    transition: background-color 0.22s ease;
}
.swal2-container.swal2-no-transition {
    transition: none !important;
}

/* ----- Persistent backdrop scrim (chain smoothing) ---------------------
   swalMascot.js installs a single full-screen scrim that stays put across
   consecutive dialogs, so the dark backdrop NEVER fades out-and-in between
   one popup closing and the next opening. While the scrim is managing
   things, SweetAlert's own per-container backdrop is made transparent (the
   scrim is the only dark layer). Pages without swalMascot.js keep the
   normal per-container backdrop above. */
html.tactile-scrim-active .swal2-container.swal2-backdrop-show,
html.tactile-scrim-active .swal2-container.swal2-backdrop-hide {
    background: transparent !important;
}

.tactile-popup-scrim {
    position: fixed;
    inset: 0;
    background: var(--popup-backdrop);
    opacity: 0;
    pointer-events: none;
    /* One below SweetAlert2's container (default z-index 1060): the scrim
       dims the page, the transparent container + popup sit on top of it. */
    z-index: 1059;
    transition: opacity 0.22s ease;
    will-change: opacity;
}
.tactile-popup-scrim.is-on {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .tactile-popup-scrim {
        transition: none;
    }
}

/* -----------------------------------------------------------------------
   Calm, non-bouncy entrance/exit for a popup that opens on its own.
   Overrides SweetAlert2's default zoom-with-overshoot keyframes.

   When a popup opens while another is already showing (a chain),
   swalMascot.js passes `showClass.popup: ''` so the new dialog gets NO
   `swal2-show` class — it appears instantly in place, no fade-in replay,
   over the persistent scrim. So these keyframes only play for the FIRST
   popup of a chain.
   ----------------------------------------------------------------------- */
.swal2-popup.swal2-show {
    animation: tactile-pop-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.swal2-popup.swal2-hide {
    animation: tactile-pop-out 0.18s ease both !important;
}

@keyframes tactile-pop-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tactile-pop-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(6px) scale(0.985);
    }
}

.swal2-popup {
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
    .swal2-popup.swal2-show,
    .swal2-popup.swal2-hide {
        animation-duration: 0.001s !important;
    }
    .swal2-popup {
        transition: none !important;
    }
}