/* Estilos para el modal */
.modal {
  display: none; /* Ocultar por defecto */
  position: fixed; /* Posicionarlo fijo */
  z-index: 1; /* Colocarlo en la parte superior */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Alto completo */
  overflow: auto; /* Habilitar el scroll si es necesario */
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
}

.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 1000px;
  max-height: 80vh; /* Altura máxima del contenido del modal */
  overflow-y: auto; /* Habilitar la barra de desplazamiento vertical */
  border-radius: 10px;
  position: relative;
  text-align: justify; /* Justificar el contenido del modal */
}

/* Estilos para el botón de cerrar */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #007BFF; /* Color azul */
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close:hover,
.close:focus {
  color: #0056b3; /* Azul más oscuro al pasar el ratón o enfocar */
  text-decoration: none;
  cursor: pointer;
}