/* Bloquear el scroll en el body */
body.no-scroll {
    overflow: hidden;
}

/* Estilo para el overlay de la modal */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex; /* Flexbox para centrar */
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease; /* Transición suave */
}

.modal-overlay,
.modal-container {
    transition: opacity 0.3s ease, transform 0.3s ease;
}


/* Estilo para la modal activa */
.modal-overlay.active {
    opacity: 1;
    transition: opacity 0.3s ease;
}
/* Estilo para el contenedor de la modal */
.modal-container {
    width: 80%;
    max-width: 800px;
    max-height: 80vh; /* Limita la altura máxima de la modal */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column; /* Organiza el contenido verticalmente */
    position: relative; /* Establece el contexto para el div de cierre */
    z-index: 1001; /* Asegura que la modal esté sobre el overlay */
    transform: scale(0.9); /* Escala inicial para el efecto de zoom */
    opacity: 0; /* Oculta la modal al principio */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Transiciones suaves para escala y opacidad */
    /* overflow: hidden; Eliminar esta línea */
}

/* Estilo para la modal activa */
.modal-container.active {
    transform: scale(1);
    opacity: 1;
}

/* Estilo para la cabecera de la modal */
.modal-header {
    border-radius: 12px; /* Radio de todas las esquinas */
    background-color: #f8f9fa; /* Color de fondo de la cabecera */
    padding: 1rem; /* Espaciado interno de la cabecera */
    margin-bottom: 1rem; /* Espacio debajo de la cabecera */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra opcional para profundidad */
    display: flex; /* Utiliza flexbox para alinear el contenido */
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
    text-align: center; /* Centra el texto */
    position: relative; /* Posiciona el contenido para el botón de cerrar */
}

/* Estilo para el título de la modal */
.modal-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
}


/* Estilo para el botón de cierre */
.btn-close-custom {
    background: #007bff;
    color: #fff;
    cursor: pointer;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -22px;
    right: -22px;
    z-index: 1002; /* Asegúrate de que sea más alto que el contenedor */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Estilo para el cuerpo de la modal */
.modal-body {
    padding: 2rem;
    overflow-y: auto; /* Permite el scroll vertical en el cuerpo de la modal */
    flex: 1; /* Permite que el cuerpo ocupe el espacio disponible */
    max-height: calc(80vh - 4rem); /* Ajusta la altura máxima para tener en cuenta el header y el footer */
}

/* Estilo para la imagen */
.modal-body img {
    max-height: 100%;
    height: auto;
    max-width: 100%; /* Ajusta al contenedor */
    border-radius: 8px;
    object-fit: cover;
}

/* Estilo para los párrafos */
.modal-body p {
    margin: 0;
}

/* Estilo para los inputs y labels */
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.form-control {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #f8f9fa;
}

/* Estilo general para los contenedores con clase input-group-text */
.input-group-text {
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #e7e7e7; /* Borde gris */
    border-radius: 5px; /* Esquinas redondeadas */
    padding: 0.375rem 0.75rem; /* Relleno interno */
    display: flex; /* Usar flexbox para el alineamiento */
    align-items: center; /* Alinear el contenido verticalmente */
    justify-content: flex-start; /* Alinear el contenido al principio */
    font-weight: normal; /* Quitar la negrita del texto */
    text-transform: capitalize; /* Solo iniciales en mayúsculas */
    min-height: 51px; /* Altura mínima */
    position: relative; /* Hacer que el contenedor sea el contexto de referencia para el icono */
    overflow: hidden; /* Asegurar que el contenido no desborde el contenedor */
}

/* Estilo específico para el icono dentro de input-group-text */
.input-group-text i {
    font-size: 1rem; /* Tamaño del icono */
    color: #246af4; /* Cambia este valor para personalizar el color del icono */
    position: absolute; /* Posicionamiento absoluto */
    top: 8px; /* Alinear al borde superior */
    right: 10px; /* Alinear al borde derecho */
    margin-top: 0.5rem; /* Espacio fijo arriba del icono */
    pointer-events: none; /* Evitar que el icono interfiera con la interacción del usuario */
}

/* Ajustes para el texto dentro de input-group-text */
.input-group-text .label-text {
    color: #555555; /* Color del texto */
    font-size: 0.9rem; /* Tamaño de la fuente */
    flex: 1; /* Permite que el texto ocupe el espacio restante */
    white-space: normal; /* Permitir que el texto haga un salto de línea */
    word-wrap: break-word; /* Asegurar que el texto largo se divida en palabras */
    overflow-wrap: break-word; /* Manejo de palabras largas que podrían desbordarse */
    display: block; /* Asegura que el span se comporte como un bloque para el salto de línea */
    text-align: left; /* Alinear el texto hacia la izquierda */
    padding-right: 2rem; /* Espacio mínimo en píxeles desde el final de la fila antes del salto de línea */
    padding-bottom: 8px; /* Espacio mínimo en píxeles desde el final de la fila antes del salto de línea */
    padding-top: 8px; /* Espacio mínimo en píxeles desde el final de la fila antes del salto de línea */
}



























/* CSS */
.modal-overlay-ingreso {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay-ingreso.active {
    opacity: 1;
    visibility: visible;
    display: flex;
}

.modal-container-ingreso {
    background: #fff;
    border-radius: 8px;
    width: 80%;
    max-width: 1400px;
    min-width: 300px;
    max-height: 100vh;
    overflow: visible;
    padding: 0;
    position: relative;
    z-index: 1001;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-overlay-ingreso.active .modal-container-ingreso {
    transform: scale(1);
    opacity: 1;
}

.contact_form_box_all {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact_form_box_inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.wpcf7 {
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
}

.modal-header-ingreso {
    margin-bottom: 20px;
}

.modal-title-ingreso {
    font-size: 1.5rem;
    margin: 0;
}

.btn-close-custom-ingreso {
    background: #007bff;
    color: #fff;
    cursor: pointer;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed; /* Asegura que el botón se mantenga fijo */
    top: -20px; /* Ajusta la posición superior */
    right: -20px; /* Ajusta la posición derecha */
    z-index: 1002; /* Asegura que el botón esté por encima de la modal */
}