/* =========================================================
   SWEETALERT2 - BOOTSTRAP STYLE
   RAMPINT
   ========================================================= */


/* CONTENEDOR */
.swal2-container {
    position: fixed !important;
    inset: 0 !important;

    z-index: 2000 !important;

    display: grid !important;
    place-items: center !important;

    padding: 1rem !important;
}


/* BACKDROP */
.swal2-container.swal2-backdrop-show {
    background: rgba(0, 0, 0, 0.5) !important;
}


/* =========================================================
   POPUP
   ========================================================= */

.rampint-swal-popup {
    width: 100% !important;
    max-width: 500px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;

    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 0.5rem !important;

    box-shadow:
        0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;

    overflow: hidden !important;

    font-family: inherit !important;
}


/* =========================================================
   TÍTULO - SIMULA .modal-header
   ========================================================= */

.rampint-swal-title {
    width: 100% !important;

    margin: 0 !important;
    padding: 1rem 1.25rem !important;

    text-align: left !important;

    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;

    color: #566a7f !important;

    border-bottom: 1px solid #dee2e6 !important;
}


/* =========================================================
   CUERPO - SIMULA .modal-body
   ========================================================= */

.rampint-swal-text {
    width: 100% !important;

    margin: 0 !important;
    padding: 1.25rem !important;

    text-align: left !important;

    font-size: 0.9375rem !important;
    line-height: 1.5 !important;

    color: #697a8d !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.rampint-swal-actions {
    width: 100% !important;

    margin: 0 !important;
    padding: 0.75rem 1.25rem !important;

    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;

    gap: 0.5rem !important;

    border-top: 1px solid #dee2e6 !important;
}


/* Evitar márgenes propios de SweetAlert */
.rampint-swal-actions button {
    margin: 0 !important;
}


/* =========================================================
   BOTÓN X
   ========================================================= */

.swal2-close {
    position: absolute !important;

    top: 0.85rem !important;
    right: 1rem !important;

    width: 2rem !important;
    height: 2rem !important;

    margin: 0 !important;

    font-size: 1.5rem !important;
    font-weight: 400 !important;

    color: #6c757d !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}

.swal2-close:hover {
    color: #000 !important;
}


/* =========================================================
   ICONOS
   ========================================================= */

.rampint-swal-popup .swal2-icon {
    width: 3.5rem !important;
    height: 3.5rem !important;

    margin: 1.25rem auto 0 !important;

    font-size: 0.8rem !important;
}


/* =========================================================
   LOADER
   ========================================================= */

.rampint-swal-popup .swal2-loader {
    margin: 1.5rem auto !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 576px) {

    .rampint-swal-popup {
        max-width: calc(100% - 1rem) !important;
    }

    .rampint-swal-actions {
        flex-direction: column-reverse !important;
    }

    .rampint-swal-actions .btn {
        width: 100% !important;
    }

}

/* =========================================================
   CUSTOM STATUS ICONS
   ========================================================= */

.rampint-alert-status {
    display: flex;
    align-items: center;
    gap: 1rem;

    width: 100%;
}


/* Icono circular */

.rampint-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
}


/* Success */

.rampint-alert-icon-success {
    color: #71dd37;
    background: rgba(113, 221, 55, 0.16);
}


/* Error */

.rampint-alert-icon-error {
    color: #ff3e1d;
    background: rgba(255, 62, 29, 0.16);
}


/* Mensaje */

.rampint-alert-message {
    flex: 1;

    color: #697a8d;

    font-size: 0.9375rem;
    line-height: 1.5;
}