.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Posición fija */
    z-index: 1; /* Encima de otros elementos */
    left: 0;
    top: 0;
    width: 100%; /* Ancho total */
    height: 100%; /* Alto total */
    overflow: auto; /* Permite desplazamiento si es necesario */
    background-color: rgba(0,0,0,0.8); /* Fondo oscuro con transparencia */
}

.modal-content {
    background-color: #333; /* Color de fondo oscuro */
    margin: 15% auto; /* Margen automático para centrar */
    padding: 20px; /* Espacio interno */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* Sombra para dar profundidad */
    width: 90%; /* Ancho del contenido */
    max-width: 400px; /* Tamaño máximo del contenido */
    text-align: center; /* Texto centrado */
    color: white; /* Color del texto blanco */
}

.icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Ajusta esto según sea necesario */
}

 .update-icon {
    cursor: pointer;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}