/* Revisar alto-pequeno, alto-mediano, alto-grande. Alguno tiene 2 definiciones. Hacer un ejemplo para ver la diferencia entre ellos.

*/

/* --- VARIABLES DE COLOR --- */
:root {
  --color-fondo-fuera: #e3fafc;   
  --color-fondo-web: #f0f8ff;     
  --color-principal: #0b7285;     
  --color-secundario: #15aabf;    
  --color-bloques: #e3f2fd;       
  --color-texto: #0c2340;         
}

/* --- ESTILOS GENERALES --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* margin: 0 y padding: 0 quitan los márgenes a todos los elemntos, incluidos los <p> */
}

/* margin: 0 y padding: 0 quitan los márgenes a todos los elemntos, incluidos los <p>. Recuperamos sus márgenes */
p {
  margin: revert;
  padding: revert;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--color-fondo-fuera);
  color: var(--color-texto);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

/* --- CONTENEDOR PRINCIPAL (Max 920px y Centrado) --- */
.wrapper {
  width: 100%;
  max-width: 1200px; /*920px*/
  background-color: var(--color-fondo-web);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

/* Controles de demostración 
.demo-controls {
  background-color: #0c2340;
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 0.9rem;
}
.demo-controls button {
  background-color: var(--color-secundario);
  border: none;
  color: white;
  padding: 5px 15px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
}
*/

/* --- CABECERA --- */
header {
  /*background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1000&q=80');*/
  /*background: linear-gradient(rgba(11, 114, 133, 0.15), rgba(12, 35, 64, 0.5)),*/
  /*background: linear-gradient(rgba(11, 114, 133, 0.85), rgba(12, 35, 64, 0.9)), ORIGINAL*/
  background: linear-gradient(rgba(11, 114, 133, 0.35), rgba(12, 35, 64, 0.9)), 
               url('imagenes/varias/cabecera_2026_1200x500px.jpg');
  /*background-size: cover;*/
  /*background-position: center;*/
  background-repeat: no-repeat;
  background-position: top;
  color: white;
  padding: 20px;
}

.header-content {
  text-align: center;
  margin-bottom: 15px;
}

/* --- NAVEGACIÓN Y MENÚ --- */
nav {
  width: 100%;
}

.menu-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  font-size: 1.2rem;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  user-select: none;
  font-weight: bold;
}

.nav-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px; /* Separación horizontal y vertical entre opciones */
}

/* Ajuste para que las opciones no se fijen a un ancho específico */
.nav-menu li {
  flex: 0 0 auto; /* El contenedor mide únicamente lo que ocupa el contenido */
  width: auto;
  text-align: center;
}

.nav-menu a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 6px 0; /* Sin padding a la izquierda ni a la derecha */
  /*background: rgba(255, 255, 255, 0.15);*/
  background-color: var(--color-principal);
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap; /* Fuerza a que ocupe una sola línea */
  transition: background 0.2s ease;
  min-width: max-content; /* Asegura el ancho dinámico al texto */
  padding: 5px 10px;
}

/* Fondo destacado sólo para el texto cuando pasas el ratón */
.nav-menu a:hover {
  background: var(--color-secundario);
}

/* --- CONTENIDO CENTRAL --- */
main {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bloque-horizontal {
  background-color: var(--color-bloques);
  border: 2px solid var(--color-secundario);
  border-radius: 8px;
  padding: 20px;
}

/* SISTEMA DE COLUMNAS (CSS GRID) */
.columnas-container {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.columna {
  min-width: 0;
}

.col-bloque {
  background-color: #ffffff;
  border: 1px solid rgba(21, 170, 191, 0.3);
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
  overflow-x: auto;
}
.col-bloque:last-child { margin-bottom: 0; }

.texto-recortado {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}

.tabla-contenedor {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

table, th, td {
  border: 1px solid var(--color-secundario);
}

th, td {
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
  font-size: 0.85rem;
}

tr:nth-child(even) {
  background-color: var(--color-fondo-web);
}

.alto-pequeno { min-height: 100px; }
.alto-medio { min-height: 180px; }
.alto-grande { min-height: 280px; }

/* --- REGLA PARA IMÁGENES DENTRO DE COLUMNAS / BLOQUES --- */
.columna img,
.col-bloque img {
  width: 100%;            /* Intenta ocupar el 100% del ancho del contenedor */
  max-width: 100%;        /* No desborda el contenedor */
  height: auto;           /* Mantiene la proporción original */
  display: block;
  margin: 0 auto;         /* Centrado horizontal */
  object-fit: contain;
}

/* Clase para excluir de la regla anterior e imponer nuevos estilos */
.columna img.sin_centrar,
.col-bloque img.sin_centrar {
  width: auto !important;      /* Mantiene su ancho original */
  max-width: none !important;  /* Quita el límite */
  display: inline-block;       /* Permite alinearse con texto */
  margin: 0;                   /* Quita el centrado automático */
}

/* --- PIE DE PÁGINA --- */
footer {
  /*background-color: var(--color-texto);*/
  background: linear-gradient(var(--color-principal), var(--color-texto));
  color: #e3fafc;
  padding: 20px;
  text-align: center;
  margin-top: auto;
}

/* Para carrusel de imágenes y cualquier otro elemento */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Estilo genérico para elementos ampliables */
.ampliable {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ampliable:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Imágenes dentro de la galería */
.galeria img.ampliable {
  width: 100%;
  height: 220px;
  object-fit: contain;
  background-color: #ffffff;
  border: 1px solid #dcdcdc;
  padding: 10px;
  border-radius: 8px;
}

/* Bloques HTML arbitrarios (como tu div) */
.col-bloque {
  background-color: #ffffff;
  border: 1px solid #dcdcdc;
  padding: 15px;
  border-radius: 8px;
}

.alto-pequeno {
  max-height: 220px;
  overflow: hidden; /* Recorta en vista previa */
}

/* Contenedor con scroll para tablas */
.tabla-contenedor {
  overflow-x: auto;
  margin-top: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* Fuerza el scroll horizontal en contenedores pequeños */
}

td, th {
  border: 1px solid #ddd;
  padding: 8px;
  white-space: nowrap;
}

/* --- VENTANA MODAL UNIVERSAL --- */
.modal {
  display: none;
  position: fixed;
  /*z-index: 1000;*/
  z-index: 9998; /* El aviso de cookies tiene un 9999. La flecha para subir tiene un 9997 */
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  padding: 20px;
  user-select: none;
  -webkit-user-select: none;
}

.modal.activo {
  display: flex;
}

.modal-contenido {
  max-width: 90vw;
  max-height: 85vh;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  overflow: auto; /* Permite scroll interno si el contenido es grande */
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  color: #333;
}

/* Cuando el modal muestra una IMAGEN directa */
.modal-contenido.es-imagen {
  background-color: transparent;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}

.modal-contenido.es-imagen img {
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

/* Pie de foto */
.pie-foto {
  color: #ffffff;
  margin-top: 15px;
  font-size: 1rem;
  text-align: center;
  max-width: 80vw;
  word-wrap: break-word;
  line-height: 1.4;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 4px;
}

.pie-foto.oculto {
  display: none;
}

/* Botón cerrar */
.cerrar {
  position: absolute;
  top: 15px;
  right: 25px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1010;
  line-height: 1;
}

.cerrar:hover {
  color: #ccc;
}

/* Botones de navegación */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  font-size: 24px;
  padding: 16px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.5);
}

.nav-btn.prev { left: 20px; }
.nav-btn.next { right: 20px; }

.nav-btn.oculto {
  display: none !important;
}

/* Para flecha que sube hasta la cabecera */
#btnSubir {
  position: fixed;
  right: 20px; /* cambia a left: 20px si lo quieres a la izquierda */
  bottom: 20px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 9997; /* El aviso de cookies tiene un 9999. La ventana modal tiene un 9998 */
}

#btnSubir.visible {
  /*opacity: 1;*/
  opacity: 0.8; /* Semitransparente. Valor entre 0 y 1 */
  visibility: visible;
}

/* Para el índice del blog */
.blog article {
	/*border: 1px solid #09464D; */
	border-top: 0px;
	background-color: #F0FFFF; 
	margin: 0px; 
	text-align: left; 
	padding: 0px;
  /*border-bottom: 1px solid grey;;*/
}
.blog img { float: right; width: 75px; margin: 0px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.blog article a { float: left; display: block; text-decoration: none; width: 95%; padding: 5px; border-bottom: 1px solid grey; }
.blog article b { color: #09464D; }
.blog article a:hover, .blog article b:hover { /*font-style: italic; color: red;*/ color: green; }

/* --- Algunas reglas más --- */
table.tabla_2_fotos {
  /* 2 fotos en horizontal que se mantienen en esta postura en móviles */
  border-collapse: collapse; 
  min-width: 100%;
  border: 0;
}
table.tabla_2_fotos tr td { margin: 0; padding: 2px; border: 0; }

/* --- MEDIA QUERIES --- */

/* Escritorio (>= 768px) */
@media (min-width: 768px) {
  .diseno-1 { grid-template-columns: 1fr 1fr; }
  .diseno-2 { grid-template-columns: calc(65% - 10px) calc(35% - 10px); }
}

/* Móviles (< 768px) */
@media (max-width: 767px) {
  main {
    padding: 5px;
    /*display: flex;
    flex-direction: column;*/
    gap: 5px;
  }

  .menu-toggle {
    display: block;
  }

  .menu-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
  }

  .menu-wrapper.desplegado {
    grid-template-rows: 1fr;
    margin-top: 10px;
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 6px;
  }

  .nav-menu li {
    width: 100%;
  }

  .nav-menu a {
    padding: 8px 12px; /* En móviles añadimos acolchado para facilitar la pulsación táctil */
    font-size: 0.9rem;
    background: rgba(12, 35, 64, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
  }

  /* Para carrusel de imágenes y cualquier otro elemento */
  .nav-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .nav-btn.prev { left: 10px; }
  .nav-btn.next { right: 10px; }
}