/* ================= HISTORIAL DE CONCIERTOS =================
   Rejilla de carteles agrupada por año, con buscador. Se carga solo en la página que lleva
   el shortcode [ecc_historial] (ver includes/historial.php).

   Las alturas de fila NO son fijas como en la galería: aquí los carteles vienen de siete años
   distintos y tienen proporciones de todo tipo. Cada uno declara su width/height reales en el
   HTML, que es lo que reserva el hueco antes de que cargue la imagen y evita el salto (CLS). */

/* Fondo de piedra clara, el mismo de las secciones crema del sitio: misma imagen, mismo velo
   al 94 %, mismo encuadre.

   Va en el BODY de esta página y no en el bloque: el título de la página lo pinta el tema por
   encima del shortcode, así que poniéndolo solo en el bloque quedaba una banda blanca arriba y
   márgenes blancos a los lados. La página es la 749; si algún día se rehace, hay que actualizar
   este selector (el bloque en sí no depende de él). */
body.page-id-749 {
	background-image: linear-gradient(rgba(239, 230, 216, .94), rgba(239, 230, 216, .94)),
	                  url('../img/textura-piedra-suave.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;   /* la textura no viaja con el scroll: 400 carteles son mucha altura */
}
/* El H1 de esta página lo pinta el TEMA dentro de `.page-header`, no Elementor ni el shortcode:
   es la única página del sitio que sale así, y por eso se quedaba con la pila de fuentes del
   SISTEMA (-apple-system/Segoe UI, 40px, peso 500) mientras el resto del sitio titula en Fraunces
   itálica. Medido en el navegador el 2026-08-05. Aquí solo se alinea la tipografía con el token
   de marca: el tamaño, el color y el espaciado siguen siendo los del tema. */
body.page-id-749 .page-header h1 {
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-weight: 600;
}

.ecc-hist {
	padding: 10px;
}
.ecc-hist__interior {
	max-width: 1100px;
	margin: 0 auto;
}

/* --- buscador --- */
.ecc-hist__barra {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 10px;
	margin: 0 -10px;
	/* Opaca a propósito: por debajo pasan los carteles al hacer scroll. Se usa el mismo crema
	   del velo, así que sobre la textura no se nota el corte. */
	background: rgb(238, 230, 217);
}
.ecc-hist__buscar {
	flex: 1 1 260px;
	min-height: 48px;
	padding: 12px 16px;
	font-family: 'Archivo', sans-serif;
	font-size: 16px;            /* 16px evita el zoom automático de iOS al enfocar */
	color: var(--ecc-noche, #1B1712);
	background: rgba(255, 255, 255, .6);
	border: 1px solid rgba(27, 23, 18, .25);
	border-radius: 2px;
}
.ecc-hist__buscar:focus-visible {
	outline: 2px solid var(--ecc-hiedra, #4C6344);
	outline-offset: 2px;
}
.ecc-hist__cuenta {
	margin: 0;
	font-family: 'Space Mono', monospace;
	font-size: 13px;
	color: #5F5340;
}

/* --- índice de años --- */
.ecc-hist__anos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
}
.ecc-hist__anos a {
	padding: 6px 12px;
	font-family: 'Space Mono', monospace;
	font-size: 13px;
	color: var(--ecc-noche, #1B1712);
	text-decoration: none;
	border: 1px solid rgba(27, 23, 18, .2);
	border-radius: 2px;
}
.ecc-hist__anos a:hover,
.ecc-hist__anos a:focus-visible {
	background: rgba(27, 23, 18, .06);
}
/* Año sin resultados en la búsqueda: se DESACTIVA en su sitio en vez de ocultarse, para que la
   fila de años no se recomponga bajo el dedo a cada tecla. Lo pone y lo quita historial.js. */
.ecc-hist__anos a.is-vacio {
	opacity: .35;
	pointer-events: none;
}
/* Objetivo táctil de 44 px (2026-08-05). Solo en punteros gruesos: con ratón el chip se queda
   como estaba. El padding no cambia, así que el borde visible no se mueve horizontalmente. */
@media (pointer: coarse), (max-width: 780px) {
	.ecc-hist__anos a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* --- bloques por año --- */
.ecc-hist__ano {
	margin: 0 0 44px;
	scroll-margin-top: 90px;   /* que el título no quede debajo del buscador pegajoso */
}
.ecc-hist__titulo {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 18px;
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 28px;
	color: var(--ecc-noche, #1B1712);
	border-bottom: 1px solid rgba(27, 23, 18, .15);
	padding-bottom: 8px;
}
.ecc-hist__titulo span {
	font-family: 'Space Mono', monospace;
	font-size: 13px;
	color: #5F5340;
}

/* --- rejilla --- */
.ecc-hist__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 22px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ecc-hist__item b {
	display: block;
	margin-top: 8px;
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--ecc-noche, #1B1712);
}
/* Solo unos pocos conciertos del archivo tienen ficha propia (los que se publicaron ya con la
   web nueva). Subrayado para distinguir a simple vista cuál se puede abrir; el color lo hereda
   del <b> para no romper la retícula visual. */
.ecc-hist__item b a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.ecc-hist__item b a:hover,
.ecc-hist__item b a:focus-visible {
	color: #835C22;
}
.ecc-hist__item span {
	display: block;
	font-family: 'Space Mono', monospace;
	font-size: 12.5px;
	color: #5F5340;
}
.ecc-hist__cartel,
.ecc-hist__sincartel {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	background: rgba(27, 23, 18, .07);
}
.ecc-hist__sincartel {
	aspect-ratio: 3 / 4;
}

/* --- estados del buscador --- */
.ecc-hist__item[hidden],
.ecc-hist__ano[hidden] {
	display: none;
}
.ecc-hist__vacio {
	padding: 30px 0;
	font-family: 'Archivo', sans-serif;
	font-size: 16px;
	color: #5F5340;
	text-align: center;
}

@media (max-width: 600px) {
	.ecc-hist__lista { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 18px 14px; }
	.ecc-hist__titulo { font-size: 23px; }
}