@media (max-width: 768px) {
    #myModal {
        display: none !important; /* Oculta el modal en dispositivos móviles */
    }
}

.modal {
    display: flex;
    align-items: flex-end; /* Alinea el modal hacia abajo */
    justify-content: flex-end; /* Alinea el modal hacia la derecha */
    position: fixed; /* Posicionamiento fijo para que se mantenga en su lugar */
    z-index: 9999; /* Asegura que el modal esté en la capa superior */
    width: auto; /* Ancho automático para adaptarse al contenido */
    height: auto; /* Altura automática para adaptarse al contenido */
    margin: 0px; /* Margen para separar del borde de la ventana */
    margin-bottom: 0px;
    left: auto; /* Fija el lado izquierdo automáticamente */
    top: auto; /* Fija el lado superior automáticamente */
    bottom: 0; /* Fija el modal en el borde inferior */
    right: 0; /* Fija el modal en el borde derecho */
}

.modal-content {
    background-color: rgba(128, 128, 128, 0.2); /* Fondo transparente medio plomo */
    padding: 20px; /* Espaciado interno del contenido */
    border: 1px solid #888; /* Borde del contenido */
    max-width: 300px; /* Ancho máximo del contenido */
    max-height: 500px;
    position: relative; /* Posicionamiento relativo para hijos absolutos */
}

.close {
    color: red; /* Color del botón de cerrar */
    position: absolute; /* Posicionamiento absoluto para que se superponga al contenido */
    top: 10px; /* Distancia desde la parte superior */
    right: 10px; /* Distancia desde el lado derecho */
    font-size: 28px; /* Tamaño de fuente del botón de cerrar */
    font-weight: bold; /* Peso de la fuente del botón de cerrar */
}

.close:hover,
.close:focus {
    color: darkred; /* Cambia el color al pasar el ratón por encima */
    text-decoration: none; /* Quita el subrayado del botón de cerrar */
    cursor: pointer; /* Cambia el cursor al pasar por encima del botón de cerrar */
}

/* Estilo adicional para centrar el contenido */
.emergente {
    text-align: center; /* Alinea el contenido al centro */
}

.emergente_img {
    margin-top: 0px; /* Espaciado superior del contenido */
    margin-bottom: 0px; /* Espaciado inferior del contenido */
}

/* Estilos para el botón de diagnóstico */
.diagnostico {
    display: inline-block; /* Hace que el botón sea un bloque en línea */
    padding: 10px 20px; /* Espaciado interno del botón */
    border-radius: 20px; /* Borde redondeado del botón */
    background-color: #629a1e; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    text-decoration: none; /* Quita el subrayado del botón */
    border: 1px solid black; /* Borde negro */
}

/* Estilos para el botón de diagnóstico cuando el ratón pasa por encima */
.diagnostico:hover {
    background-color: #0f3d5a; /* Cambia el color de fondo al pasar el ratón */
    color: white; /* Cambia el color del texto al pasar el ratón */
    border: 1px solid black; /* Borde negro */
}

.justify-text {
    text-align: justify; /* Justifica el texto dentro del modal */
}
/* Estilo para ajustar el tamaño del iframe en dispositivos móviles */
@media only screen and (max-width: 600px) {
    .mi-iframe {
        display: none; /* Oculta el iframe en dispositivos móviles */
    }
}
/* Estilos para la versión minimizada */
.minimized {
        width: 250px;
        height: 40px;
        position: fixed;
        bottom: 10px;
        right: 10px;
        background-color: #fefefe;
        border: 1px solid #888;
        padding: 10px;
        z-index: 2;
        cursor: pointer;
        border: 1px solid black; /* Borde negro */
        }
.minimized:hover {
    background-color: #0f3d5a; /* Cambia el color de fondo al pasar el ratón */
    color: white; /* Cambia el color del texto al pasar el ratón */ 
    border: 1px solid black; /* Borde negro */
}
.minimized {
    margin: 0;
    font-size: 14px;
    background-color: #629a1e;
    color: black; /* Cambia el color del texto a azul */
    border-radius: 20px; /* Redondea las esquinas del borde */
    padding: 10px; /* Añade un poco de espacio interior para mejor visualización */
}

.read_more {
    background-color: #629a1e;
}
.dropdown-menu {
    background-color: #629a1e; /* Fondo del menú desplegable */
}

.dropdown-item {
    background-color: #629a1e; /* Fondo de los ítems del menú */
    color: white; /* Color del texto de los ítems */
    padding: 10px 20px; /* Espaciado interior para mejor apariencia */
    text-decoration: none; /* Eliminar subrayado del enlace */
    display: block; /* Asegura que los enlaces se comporten como bloques */
}

.dropdown-item:hover {
    background-color: #244a70; /* Fondo del ítem al pasar el mouse */
    color: white; /* Color del texto al pasar el mouse */
}