/* Fuente base se mueve a body para que sea modificable */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  background-color: white;
  margin: 0; /* evitar margen por defecto */
  padding: 0; /* evitar padding por defecto */
  line-height: 1.5;
}

/* Ajuste para el main: quita font-family y color para que herede del body */
main {
  padding: 1rem 2rem;
  max-width: 900px;
  margin: auto;
  /* font-family y color eliminados para heredar de body */
}

/* Alto contraste: fondo negro y texto amarillo en body y main */
body.high-contrast {
  background-color: black !important;
  color: yellow !important;
}

body.high-contrast main {
  background-color: black !important;
  color: yellow !important;
}

.high-contrast .navbar .nav-link {
  color: yellow; /* Letras de los enlaces en gris claro */
}

/* Navbar en modo oscuro */
.high-contrast .navbar {
  background-color: #121212 !important; /* Fondo oscuro en el navbar */
  color: yellow;
}

/* Fuentes serif y monospace, aplicadas por clase al body */
body.serif {
  font-family: 'Times New Roman', serif !important;
}

body.monospace {
  font-family: 'Courier New', monospace !important;
}

/* Se mantiene lo siguiente para el contenido de ODS */
#ods-info {
  margin-bottom: 2rem;
}

#ods-info h2 {
  font-weight: 600;
  color: #004080;
  margin-bottom: 1rem;
}

#ods-info p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  text-align: justify; /* Texto justificado */
}

.ods-figure {
  margin: 2rem auto 0;
  max-width: 320px;
  text-align: center;
}

.ods-figure img {
  width: 100%;
  height: auto;
  border-radius: 50%; /* Imagen circular */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  user-select: none;
}

.ods-figure figcaption {
  margin-top: 0.5rem;
  font-weight: 600;
  color: #004080;
  font-size: 1rem;
}

body.high-contrast #ods-info-title,
body.high-contrast .ods-figure figcaption {
  color: yellow !important;
}

/* Modo oscuro */
.dark-mode {
  background-color: #121212 !important; /* Fondo oscuro */
  color: white !important; /* Todas las letras blancas */
}

/* Asegurarse de que el texto en el main también sea blanco */
.dark-mode main {
  background-color: #121212 !important;
  color: white !important;
}

/* Asegurarse de que los títulos y otros textos también sean blancos en modo oscuro */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode p, 
.dark-mode .ods-figure figcaption {
  color: white !important; /* Garantiza que todos los textos sean blancos */
}

/* Asegurarse de que las figuras, enlaces y otros elementos de texto sean blancos */
.dark-mode a {
  color: white !important; /* Asegurar que los enlaces sean visibles en blanco o azul claro */
}

.dark-mode .ods-figure figcaption {
  color: white !important; /* Los textos de las leyendas también en blanco */
}

/* Navbar en modo oscuro */
.dark-mode .navbar {
  background-color: #121212 !important; /* Fondo oscuro en el navbar */
  color: white !important;
}

.dark-mode .navbar a {
  color: #d4d4d4 !important; /* Letras del navbar en gris claro para contrastar con el fondo oscuro */
}

.dark-mode .navbar .nav-link {
  color: white; /* Letras de los enlaces en gris claro */
}

.dark-mode .navbar .nav-link:hover,
.dark-mode .navbar .nav-link:focus {
  background-color: #003366 !important; /* Fondo azul oscuro para los enlaces al pasar el ratón */
  color: white !important; /* Color de texto amarillo al hacer hover */
}

/* --- Responsive: Media Queries --- */

/* Pantallas pequeñas (móviles) */
@media (max-width: 600px) {
  main {
    padding: 1rem 1rem; /* reducir padding */
    max-width: 100%; /* ancho total */
  }

  #ods-info p {
    font-size: 0.9rem; /* texto un poco más pequeño */
  }

  .ods-figure {
    max-width: 200px; /* imagen más pequeña */
    margin: 1.5rem auto 0;
  }

  /* Navbar: menú vertical o hamburguesa si lo tienes */
  .navbar {
    padding: 0.5rem 1rem;
  }
}

/* Pantallas medianas (tablets) */
@media (min-width: 601px) and (max-width: 900px) {
  main {
    padding: 1rem 1.5rem;
    max-width: 700px;
  }

  .ods-figure {
    max-width: 250px;
  }
}

/* Ajuste para texto e imágenes en pantallas muy grandes */
@media (min-width: 1200px) {
  main {
    max-width: 900px;
  }

  #ods-info p {
    font-size: 1.1rem;
  }
}