/* =========================================================================
   RETÍCULA DE CUATRO PANELES Y VENTANA CENTRAL
   -------------------------------------------------------------------------
   Hoja independiente: no depende de Eleventy ni de ninguna otra hoja, para
   poder llevarla a otra web (por ejemplo, una plantilla de WordPress).
   Lee algunas variables CSS opcionales; si no existen, usa los valores por
   defecto indicados en cada var().

   ESTRUCTURA HTML ESPERADA (el orden importa: es el orden de lectura y de
   tabulación, y el que se ve en pantallas estrechas):

     <a class="saltar" href="#contenido">Saltar al contenido</a>
     <div class="reticula">
       <header class="reticula__banda reticula__banda--izquierda">
         <nav class="reticula__panel" aria-label="…">…</nav>   ← arriba
         <nav class="reticula__panel" aria-label="…">…</nav>   ← abajo
       </header>
       <main id="contenido" class="reticula__centro" tabindex="-1">…</main>
       <div class="reticula__banda reticula__banda--derecha">
         <nav class="reticula__panel" aria-label="…">…</nav>   ← arriba
         <nav class="reticula__panel" aria-label="…">…</nav>   ← abajo
       </div>
     </div>

   Clases auxiliares:
     .reticula-solo-paneles  → solo se muestra con los cuatro paneles.
     .reticula-solo-plegado  → solo se muestra en la vista plegada.

   DOS MODOS
   1. Plegado (por defecto, pantallas estrechas): la banda izquierda se
      convierte en cabecera (título, idioma y un menú desplegable hecho con
      <details>, que funciona sin JavaScript); la banda derecha pasa debajo
      del contenido.
   2. Cuatro paneles: tres columnas. Cada banda ocupa la altura de la
      ventana, queda fija al desplazar la página y se divide en dos
      mini-pantallas con desplazamiento propio. La página se desplaza con
      el contenido central.

   PUNTO DE REPLIEGUE (calculado, no fijo)
   La ventana central manda: el texto nunca baja de la medida mínima de
   lectura (unos 60 caracteres por línea). Por tanto:

     ancho mínimo = 2 × banda mínima + medida mínima + 2 × margen central
                  = 2 × 15rem       + 31.47rem     + 2 × 2.5rem
                  = 66.47rem  →  66.5rem  (1064px con letra de 16px)

   (31.47rem = 26,5em de la serif a 1.1875rem; ver variables.css.)
   Las media queries no admiten var(): si cambias --reticula-banda-min,
   --reticula-medida o --reticula-margen, recalcula el valor 66.5rem de las
   dos media queries de esta hoja. Al usar rem, el punto de repliegue se
   adapta si el lector aumenta el tamaño de letra del navegador.
   ========================================================================= */

.reticula {
	--_banda-min: var(--reticula-banda-min, 15rem);
	--_banda-max: var(--reticula-banda-max, 19rem);
	--_medida: var(--reticula-medida, 31.47rem);
	--_margen: var(--reticula-margen, 2.5rem);
	--_grosor: var(--reticula-grosor, 1px);
	--_linea: var(--reticula-linea, currentColor);
	--_filete: var(--_grosor) solid var(--_linea);
	--_fondo: var(--reticula-fondo, Canvas);
	--_centro-max: var(--reticula-centro-max, 46rem);
}

/* Nunca desplazamiento horizontal: cualquier hijo de la retícula puede
   encogerse por debajo de su contenido y las palabras largas se parten. */
.reticula,
.reticula * {
	min-width: 0;
}
.reticula {
	overflow-wrap: break-word;
}

/* Enlace «Saltar al contenido»: fuera de la vista hasta que recibe el foco. */
.saltar {
	position: absolute;
	z-index: 100;
	top: 0.5rem;
	left: 0.5rem;
	transform: translateY(-200%);
}
.saltar:focus {
	transform: none;
}

/* -------------------------------------------------------------------------
   1. VISTA PLEGADA (por defecto)
   ------------------------------------------------------------------------- */

@media (width < 66.5rem) {
	.reticula-solo-paneles {
		display: none !important;
	}

	/* Contenido central: centrado, con márgenes que crecen con la pantalla. */
	.reticula__centro {
		padding-inline: clamp(1.25rem, 5vw, var(--_margen));
	}
	.reticula__centro > * {
		max-width: var(--_centro-max);
		margin-inline: auto;
	}

	/* La banda izquierda es la cabecera. */
	.reticula__banda--izquierda {
		border-bottom: var(--_filete);
	}

	/* La banda derecha va después del contenido: sus dos paneles, uno junto
	   a otro si caben y si no uno debajo del otro. El hueco de 1px deja ver
	   el color de línea del fondo y dibuja los filetes. */
	.reticula__banda--derecha {
		display: flex;
		flex-wrap: wrap;
		gap: var(--_grosor);
		background: var(--_linea);
		border-top: var(--_filete);
	}
	.reticula__banda--derecha > .reticula__panel {
		flex: 1 1 18rem;
		background: var(--_fondo);
	}
}

/* -------------------------------------------------------------------------
   2. CUATRO PANELES
   ------------------------------------------------------------------------- */

@media (width >= 66.5rem) {
	.reticula-solo-plegado {
		display: none !important;
	}

	.reticula {
		display: grid;
		grid-template-columns:
			minmax(var(--_banda-min), var(--_banda-max))
			minmax(calc(var(--_medida) + 2 * var(--_margen)), 1fr)
			minmax(var(--_banda-min), var(--_banda-max));
		align-items: start;
	}

	/* Cada banda: alta como la ventana, fija y partida en dos mitades. */
	.reticula__banda {
		position: sticky;
		top: 0;
		height: 100vh;
		height: 100dvh;
		display: grid;
		grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
		background: var(--_fondo);
	}
	.reticula__banda--izquierda {
		grid-column: 1;
		grid-row: 1;
		border-right: var(--_filete);
	}
	.reticula__banda--derecha {
		grid-column: 3;
		grid-row: 1;
		border-left: var(--_filete);
	}
	.reticula__centro {
		grid-column: 2;
		grid-row: 1;
		padding-inline: var(--_margen);
	}
	/* Contenido alineado con el filete de la banda izquierda. */
	.reticula__centro > * {
		max-width: var(--_centro-max);
	}

	/* Mini-pantallas con desplazamiento independiente. */
	.reticula__panel {
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
	.reticula__panel + .reticula__panel {
		border-top: var(--_filete);
	}
}