/* Este segmto CSS se utilza para los colores de los links */
a:link {
    color: #0a58ca;
}

a:visited {
    color: #6f42c1;
}

a:hover {
    color: #0d6efd;
    text-decoration: underline;
}

a:active {
    color: #dc3545;
}

/* Header y Footer */

header img {
  width: 100%;
  height: auto;
  display: block;
}

.footer_div {
    background-color: rgb(21, 26, 22);
    padding: 10px 20px;
}

.footer_div p {
    font-size: smaller;
    font-family: 'Courier New', Courier, monospace;
    color: lightgrey;
    line-height: 1.2;
    text-align: center;
    margin: 0;
}

/* Config generales para el fondo, titulos y parrafos */
.body {
    background-color: rgb(234, 234, 211);
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size: medium;
    font-style: normal;
}

.h {
    color: rgb(19, 15, 54);
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}

.h2 {
    font-style: italic;
    text-align: justify;     /* opcional: estilo de párrafo */
    line-height: 2.5;
    max-width: 1200px;        /* limita el ancho del párrafo */
    margin: 0 auto 1em;      /* centra el párrafo con márgenes automáticos */
    padding: 0 15px;
}

.p {
    color: black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: justify;     /* opcional: estilo de párrafo */
    line-height: 1.8;        /* mejora la legibilidad */
    max-width: 1200px;        /* limita el ancho del párrafo */
    margin: 0 auto 1em;      /* centra el párrafo con márgenes automáticos */
    padding: 0 15px;
}

.img {
    display: block;        /* convierte la imagen en un bloque */
    margin: 20px auto;     /* auto centra horizontalmente */
    max-width: 100%;       /* evita que se pase del ancho de la pantalla */
    height: auto;          /* mantiene proporciones */
}


.item {
  /*border: 1px solid black;       /* borde suave */
  padding: 10px;                /* espacio interno */
}

/* Config para las tablas */

table, th, td {
    border-width: 3px;
    border-style: outset;
    text-align: justify;     /* opcional: estilo de párrafo */
    line-height: 1.8;        /* mejora la legibilidad */
    max-width: 1200px;        /* limita el ancho del párrafo */
    margin: 0 auto 1em;      /* centra el párrafo con márgenes automáticos */
}

/* Config para la galeria de imagenes */

.div_galeria {
  display: grid;                          /* agrego grilla para imagenes*/
  grid-template-columns: repeat(3, 1fr); /* 2 columnas iguales */
  gap: 20px;                             /* espacio entre bloques */
  padding: 20px;
  border: 1px solid black;                         /* margen interno */
}

.div_galeria img {
  width: 70%;                           /* imagen ocupa todo el ancho del bloque */
  height: auto;                          /* mantiene proporciones */
  border: 1px solid black;
}

.div_galeria p {
  text-align: left;                    /* texto centrado bajo la imagen */
  font-family: sans-serif;
  margin-top: 8px;
}

/* Config para los videos */

.div_videos {
  display: grid;                          /* agrego grilla para imagenes*/
  grid-template-columns: repeat(2, 1fr); /* 2 columnas iguales */
  gap: 20px;                             /* espacio entre bloques */
  padding: 20px;                         /* margen interno */
  border: 1px solid black;
}

.div_videos p {
  text-align: left;                    /* texto centrado bajo la imagen */
  font-family: sans-serif;
  margin-top: 8px;
}



/* Config del Menu */

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display:flex;                     /* pone los <li> en fila */
  border: 1px solid black;        /* borde alrededor de todo el menú */
}

.menu li {
  flex: 1;                          /* cada <li> ocupa mismo espacio */
  text-align: center;               /* centra el texto */
  border-left: 1px solid black;   /* línea separadora entre items */
}

.menu li:first-child {
  border-left: none;                /* quita línea al primer item */
}

.menu a {
  display: block;                   /* hace clickeable todo el bloque */
  padding: 10px 0;                  /* espacio vertical */
  text-decoration:none;             /* sin subrayado */
  color: black;
  font-family: sans-serif;
  font-style: italic;
  font-weight: bold;
  font-size: large;
}

/* Contenedor del bloque */
.card {
  max-width: 1000px;
  margin: 1rem auto;
  padding: 1rem;
  border: 1px solid black;
}
body.dark-mode .card {
  border-color: #444;
}

/* Título dentro de la card */
.card .h2 {
  margin-bottom: 0.8rem;
  text-align: left;
}

/* Mapa */
#map {
  width: 100%;
  height: 380px;
  border: 1px solid #ccc;
}
body.dark-mode #map {
  border-color: #444;
}

/* Texto de estado debajo del mapa */
.status {
  margin-top: 0.6rem;
  font-style: italic;
  text-align: center;
}
body.dark-mode .status {
  color: #ccc;
}

/* Asegura que el mapa sea visible */
#map-sedes {
  height: 360px;
  min-height: 40vh;
  border-radius: 12px;
  overflow: hidden;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

/* Estilos par a los links de WIKI */

.fuente-container {
  position: relative;
  margin-top: 1rem;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.fuente-container .cerrarFuente {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #d33;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10;
}

/* === MODO OSCURO === */

/* Botón flotante para no alterar el header/menu */
.toggle-theme {
  position: fixed;
  top: 12px;
  right: 12px;
  padding: 8px 12px;
  border: 1px solid #ffffff33;
  background: black;
  color: #fff;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  z-index: 9999;
}

/* Fondo y texto general */
body.dark-mode { color: #e6e6e6; }
body.dark-mode.body { background-color: #121212; }

/* Títulos y párrafos */
body.dark-mode .h  { color: #e8e7ff; }
body.dark-mode .h2 { color: #dcdcdc; }
body.dark-mode .p  { color: #e6e6e6; }


/* Menú */
body.dark-mode .menu {
  border-color: #444;
  background: #1b1b1b;
}

body.dark-mode .menu li { border-left-color: #444; }
body.dark-mode .menu a  { color: #f0f0f0; }

/* Footer */
body.dark-mode .footer_div { background-color: #0f1211; }
body.dark-mode .footer_div p { color: #cfcfcf; }

/* Tablas */
body.dark-mode table, 
body.dark-mode th, 
body.dark-mode td {
  border-color: #666;
  color: #e6e6e6;
  background: #1a1a1a;
}

/* Galería y videos (borde) */
body.dark-mode .div_galeria,
body.dark-mode .div_videos { border-color: #444; }
body.dark-mode .div_galeria img { border-color: #444; }