/* Modal overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* Ensure it stays above all other elements */
}

/* Modal container */
.modal-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 16px;
    position: relative;
    width: 400px;
    min-width: 348px;
    /* max-width: 604px; */
    max-width: min-content;
    background: #FFFFFF;
    box-shadow: 0px 8px 25px rgba(83, 89, 144, 0.07);
    border-radius: 24px;
}

.modal-container.alerta {
    min-width: 348px;
}

.modal-container.formulario {
    width: min(90%, 1366px); /* Set width to the minimum between 90% of the screen and 1366px */
    max-height: 95%; /* Set maximum height to 70% of the viewport height */
    min-width: unset; /* Ensure min-width does not interfere */
    max-width: unset; /* Ensure max-width does not interfere */
}

/* Styles for modal-container with class formulario */
.modal-container.formulario .form-component {
    border: none; /* Remove border */
    box-shadow: none; /* Remove shadow */
    padding: 0px; 
}

.modal-container.formulario .form-component .form-header {
    padding: 16px 24px 0px;
}

.modal-container.formulario .form-component .form-step {
    max-height: 45vh; /* Limit height to 80% of the viewport */
    overflow-y: auto; /* Enable vertical scrolling */
}

/* Scrollbar styles for the form-step */
.modal-container.formulario .form-step::-webkit-scrollbar {
    width: 8px;
}

.modal-container.formulario .form-step::-webkit-scrollbar-track {
    background: var(--fondos-digitales-fondo-5, #F8F8F8); /* Light gray background for the scrollbar track */
}

.modal-container.formulario .form-step::-webkit-scrollbar-thumb {
    background: var(--tonos-neutros-pantone-429-C, #B4B4B5); /* Gray thumb */
    border-radius: 4px;
}

.modal-container.formulario .form-step::-webkit-scrollbar-thumb:hover {
    background: var(--tonos-neutros-pantone-429-C, #888B8D); /* Darker gray on hover */
}
/* Mobile styles */
/* @media (max-width: 768px) {
    .modal-container.formulario .form-component .form-buttons {
        padding:16px 0px;
    }
} */

/* Modal content container */
.modal-content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 16px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.modal-container.formulario .modal-content-container {
    padding: 8px 0px 0px 0px;
}

/* Title */
.modal-title {
    font-family: 'Sura Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 22px;
    text-align: center;
    color: #0033A0;
    mix-blend-mode: normal;
}

/* Body */
.modal-body {
    font-family: 'Sura Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: var(--escala-grises-gris-500, #3F3F41);
    mix-blend-mode: normal;
    flex-direction: column;
    text-align: justify;
}

.modal-body span {
    width: 100%;
}

/* Icon */
.modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: 100%; */
    /* height: 55px; */
    font-size: 40px;
    /* text-align: center; */
}

/* Image */
.modal-image {
    width: 172px;
    height: 172px;
    background-size: cover;
    background-position: center;
}

/* Buttons container */
.modal-buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 8px;
    gap: 16px;
    width: auto;
    /* height: 48px; */
    flex: none;
    order: 1;
    flex-grow: 0;
}

.home-indicator {
    display: none;
}

/* spinner */
.modal-container.spin {
    width: 348px;
}

.animate-spin {
    width: 70px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    display: inline-block;

    /* Aplica la animación de giro */
    animation: spin 0.5s infinite linear;

    /* Imagen de fondo */
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.4667 6.63998C11.8533 4.62665 10.0067 3.33331 8.00668 3.33331C7.55335 3.33331 7.10001 3.39998 6.64668 3.53998C6.42001 3.60665 6.28668 3.85331 6.36001 4.07998C6.43335 4.30665 6.67335 4.43998 6.90001 4.36665C7.26668 4.25331 7.64001 4.19998 8.00668 4.19998C9.63335 4.19998 11.14 5.25331 11.64 6.89331C11.7533 7.25998 11.8067 7.63331 11.8067 7.99998C11.8067 8.61331 11.66 9.20665 11.3867 9.73331C11.2 10.1 10.9533 10.4333 10.66 10.72C10.4867 10.8866 10.4867 11.16 10.6533 11.3333C10.82 11.5066 11.0933 11.5066 11.2667 11.34C11.6333 10.9866 11.9333 10.5733 12.16 10.1266C12.4933 9.47331 12.68 8.74665 12.68 7.99331C12.68 7.53998 12.6133 7.08665 12.4733 6.63331L12.4667 6.63998Z' fill='%232D6DF6'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}



@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    .modal-container:not(.alerta):not(.spin) {
        position: fixed;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
    }

    .modal-buttons-container {
        flex-direction: column-reverse;
        width: 100%;
        height: auto;
    }

    .modal-buttons-container .button-primario-azul,
    .modal-buttons-container .button-secundario-azul,
    .modal-buttons-container .button-primario-amarillo,
    .modal-buttons-container .button-secundario-peligro,
    .modal-buttons-container .button-terciario,
    .modal-buttons-container .button-terciario-peligro {
        width: 100%;
        max-width: none;
    }

    .modal-buttons-container .button-mediano {
        height: 40px; /* Set button height to small */
        padding: 16px 18px; /* Set button padding to small */
        border-radius: 20px; /* Set button border radius to small */
    }

    .modal-container:not(.alerta):not(.spin) .home-indicator {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding: 0px 10px;
        height: 16px;
        background: #FFFFFF;
        flex: none;
        order: 2;
        align-self: stretch;
        flex-grow: 0;
    }

    .modal-container:not(.alerta):not(.spin) .indicator {
        width: 132px;
        height: 5px;
        background: #3F3F41;
        border-radius: 50px;
    }
}