/* modalForm.css */

.modal {
    pointer-events: auto !important;
}

.modal-content {
    pointer-events: auto !important;
}
.custom-modal-email-input {
        border: none;
}
.custom-modal-email-input:focus{
    outline: none;
    border:none;
}

.custom-modal-disposition {
    pointer-events: auto !important;
    z-index: 1101 !important;
}

/* Para desktop: dimensiones fijas */
.custom-modal-content {
    display: flex;
    width: 750px;
    height: 450px;
    padding: var(--spacing-32, 32px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-24, 24px);
    flex-shrink: 0;
    /* Centrado horizontal y vertical en el modal */
}
.content-input{
        display: flex;
        width: 320px;
        height: 44px;
        padding: var(--DataEntry-Spacing-Padding-horizontal, 12px) var(--DataEntry-Spacing-Padding-vertical, 16px);
        align-items: center;
        gap: var(--DataEntry-Spacing-Gap, 8px);
        align-self: stretch;
        border-radius: 100px;
        border: 1px solid var(--DataEntry-Border-Default, #DDE6F2);
        background: var(--DataEntry-Background-Default, #FFF);
}



/* Sobrescribir el fondo del backdrop del modal de Bootstrap */
.modal-backdrop {
    background-color: rgba(0, 0, 0, .3) !important;
}

@media (min-width: 768px) {
    
    .custom-modal-disposition {
        margin-top: 17.8888888889vh;
    }

    .modal-email-title {
        color: var(--Text-Neutral-Primary, #2B3340);
        text-align: center;

        /* Heading/S/Semibold */
        font-family: Quicksand;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px; /* 140% */
        padding: 0px 107px;
    }

    .modal-email-subtitle {
        font-family: Quicksand;
        font-size: 16px;
        font-weight: 400;
        line-height: 20.8px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;

        text-align: center;
    }

    .modal-email-body {
        text-align: center;
    }

    .modal-email-buttonTitle {
        font-family: Quicksand;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;

        text-align: start;
    }



    /* Contenedor que envuelve el input y el botón */
    .custom-modal-email-container {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 445px;
        /* Ajusta según el diseño */
    }



    /* Botón de envío sobre el input */
    .custom-modal-email-button {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        /* Centra verticalmente */
        height: 52px;
        width: 140px;
        border-radius: 100px;
        border: none;
        background-color: #0085FF;
        color: #FFFFFF;
        font-family: Quicksand;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-email-bodyText {
        color: var(--Text-Neutral-Primary, #2B3340);
        text-align: center;
        /* Body/M/Medium */
        font-family:  Quicksand;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 142.857% */
    }
    .modal-email-bodyText a{
        color:  #0085FF;
        font-family: Quicksand;
        font-size:  14px;
        font-style: normal;
        font-weight: 500;
        line-height:  20px;
        text-decoration: none;
    }
}

.modal-dialog {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    margin: auto;
    max-width: none;
    margin-top: 83px;
   
}

.custom-modal-content {
    /* Centrar orizontal y verticalmente */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    text-align: center;

    padding: 32px;

    border-radius: var(--M, 16px);
    background: var(--Background-Action-Secondary, #E5F3FF);

    background-image: url("/assets/images/v2/modal.svg");
    background-size: cover;
}

.close-modal-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.close-modal-form-button {
    height: 24px;
    width: 24px;

    margin: 10px 25px 0 0;
    background: none;
    border: none;
}

.close-icon {
    height: 30px;
    width: 30px;
}

.icon-modal-image {
    height: 88px;
    width: 88px;
}

.custom-modal-email-container {
    position: relative;
    display: inline-block;

    width: 100%;
}
/* Para móviles: ajusta a 95% del ancho y alto */
@media (max-width: 767px) {
    .custom-modal-content {
        height: 485.5405578613281px;
        width: 95%;
        margin-top: 70px;
          padding: 32px;
    }

    .custom-modal-disposition {
        margin-top: 10px;
    }
    .content-input{
        width: 100%;
        height: 44px;
    }
    #modalForm .btn {
        width: 100%;
        height: 44px;
        margin-top: 12px;
    }
    .icon-modal-image {
        height: 70px;
        width: 70px;
    }
   
    .modal-email-title {
 
        color: var(--Text-Neutral-Primary, #2B3340);
        text-align: center;

        /* Heading/S/Semibold */
        font-family: Quicksand;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px; /* 140% */
        padding: 0px 0px;
    }

    .modal-email-subtitle {
        font-family: Quicksand;
        font-size: 16px;
        font-weight: 400;
        line-height: 20.8px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;

        text-align: center;
    }

    .modal-email-body {
        text-align: center;
      
    }

    .modal-email-buttonTitle {
        font-family: Quicksand;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
    
        text-align: start;
    }

    
    /* Contenedor que envuelve el input y el botón */
    .custom-modal-email-container {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 300px;
        /* Ajusta según el diseño */
    }



    /* Botón de envío sobre el input */
    .custom-modal-email-button {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        /* Centra verticalmente */
        height: 52px;
        width: 94px;
        border-radius: 100px;
        border: none;
        background-color: #0085FF;
        color: #FFFFFF;
        font-family: Quicksand;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-email-bodyText {
        color: var(--Text-Neutral-Primary, #2B3340);
        text-align: center;
        /* Body/M/Medium */
        font-family:  Quicksand;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 142.857% */
    }
    .modal-email-bodyText a{
        color:  #0085FF;
        font-family: Quicksand;
        font-size:  14px;
        font-style: normal;
        font-weight: 500;
        line-height:  20px;
        text-decoration: none;
    }

}