/* Estilos para la barra de navegación */
.navbar {
    background-color: #76acdc; /* Establece el color de fondo de la barra de navegación */
    position: fixed; /* Fija la barra de navegación en la parte superior de la página */
    top: 0; /* Posiciona la barra de navegación en la parte superior */
    width: 100%; /* Hace que la barra de navegación ocupe el 100% del ancho de la pantalla */
    z-index: 1000; /* Asegura que la barra de navegación quede encima de otros elementos */
}

/* Estilos para el logo dentro de la barra de navegación */
.navbar-logo {
    max-height: 55px; /* Limita la altura del logo */
    width: auto; /* Mantiene la proporción del logo */
    padding-right: 0px; /* Elimina el padding derecho */
}

/* Ajuste del contenido principal para la barra de navegación fija */
main#quarto-document-content.content {
  margin-top: 100px; /* Añade un margen superior para evitar que el contenido se superponga con la barra de navegación fija */
}

/* Oculta el enlace de preferencias */
a#open_preferences_center {
  display: none !important; /* Oculta el enlace de centro de preferencias */
}

/* Oculta el título principal */
h1.title {
    display: none; /* Oculta el elemento h1 con clase title */
}

/* Estilos para los encabezados h2 */
h2 {
  font-size: 18px; /* Establece el tamaño de fuente para los h2 */
  margin-bottom: 10px; /* Añade un margen inferior para separar de los siguientes elementos */
}

/* Estilo para los párrafos */
p {
  font-size: 14px; /* Establece el tamaño de fuente para los párrafos */
  line-height: 1.5; /* Aumenta la altura de línea para mejorar la legibilidad */
}

/* Oculta los enlaces generados por anchor.js */
.anchorjs-link {
    display: none; /* Oculta los enlaces de anclaje generados por anchor.js */
}

/* Estilo general para los enlaces */
a {
  color: #76acdc; /* Hace que el color del enlace herede el color del elemento padre */
  text-decoration: none; /* Elimina el subrayado de los enlaces */
  transition: color 0.3s ease; /* Añade un efecto de transición suave al color cuando se pasa el ratón */
}

/* Efecto al pasar el ratón por encima de los enlaces */
a:hover {
  color: #1a00e1; /* Cambia el color del enlace cuando se pasa el ratón por encima */
}

/* Estilos para el modal */
.modal {
  display: none; /* Oculta el modal por defecto */
  position: fixed; /* Fija el modal en la pantalla */
  z-index: 1001; /* Asegura que el modal quede encima del contenido de la página */
  width: 100%; /* Hace que el modal ocupe el 100% del ancho de la pantalla */
  height: 100%; /* Hace que el modal ocupe el 100% de la altura de la pantalla */
  background-color: rgba(0, 0, 0, 0.4); /* Añade un fondo semi-transparente negro */
  backdrop-filter: blur(10px); /* Aplica un filtro de desenfoque al fondo */
  overflow: hidden; /* Evita que el contenido se desborde */
}

/* Estilo para el contenido del modal */
.modal-content {
  background-color: white; /* Establece el fondo blanco para el contenido del modal */
  padding: 25px; /* Añade relleno alrededor del contenido */
  border-radius: 12px; /* Redondea las esquinas del modal */
  width: 85%; /* Establece el ancho del modal al 85% de la pantalla */
  max-width: 700px; /* Limita el ancho máximo del modal */
  max-height: 50%; /* Limita la altura máxima del modal */
  position: absolute; /* Posiciona el contenido del modal de forma absoluta */
  top: 50%; /* Centra el modal verticalmente */
  left: 50%; /* Centra el modal horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta para centrar perfectamente */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Añade una sombra alrededor del modal */
  text-align: justify; /* Justifica el texto dentro del modal */
  z-index: 1002; /* Asegura que el contenido del modal quede encima del fondo */
  overflow-y: auto; /* Permite el desplazamiento vertical si el contenido desborda */
}

/* Estilos para el botón de cierre del modal */
.close {
  position: absolute; /* Posiciona el botón de cierre de forma absoluta */
  top: 10px; /* Posiciona el botón de cierre en la parte superior del modal */
  right: 25px; /* Posiciona el botón de cierre en la parte derecha */
  font-size: 25px; /* Establece el tamaño de fuente del botón de cierre */
  cursor: pointer; /* Cambia el cursor a puntero cuando pasa el ratón */
  font-weight: bold; /* Hace que el texto del botón de cierre sea negrita */
}

/* Efecto al pasar el ratón por encima del botón de cierre */
.close:hover {
  color: #76acdc; /* Cambia el color del botón de cierre cuando se pasa el ratón por encima */
}