/* El Corralómetro — indicador editorial 0-100% del "nivel de Corral" de la
   noche. Namespace propio ecc-corralometro-* (variables de color en site.css,
   --ecc-*). Fondo con la misma técnica textura+velo que otras secciones
   "fondo claro" del sitio (hiedra + velo oscuro), aplicada aquí mismo para no
   tocar site.css. */

.ecc-corralometro {
	position: relative;
	padding: clamp(24px, 2.8vw, 36px) 20px;
	background-color: var(--ecc-noche);
	background-image: linear-gradient(rgba(27, 23, 18, .88), rgba(27, 23, 18, .88)), url('../img/textura-hiedra.jpg');
	background-size: cover;
	background-position: center;
	color: var(--ecc-piedra);
	overflow: hidden;
	animation: eccCorralometroAparecer .7s ease both;
}

@keyframes eccCorralometroAparecer {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.ecc-corralometro__inner {
	max-width: 980px;
	margin: 0 auto;
}

/* UNA SOLA REJILLA PARA TODO EL BLOQUE (2026-08-03).
   La cigüeña ocupa la columna izquierda y el resto se lee de arriba abajo en
   la derecha: rótulo → marcador → barra → mensaje → pie. Antes el rótulo y el
   pie iban fuera del cuerpo y la imagen se apilaba encima de la barra dentro
   de un __visual, lo que dejaba tres ejes de alineación en un bloque de 274 px
   y encajonaba la barra —lo único que gana con el ancho— en una columna
   lateral de 397 px.
   En vertical la cigüeña solo acompaña al rótulo y al marcador; barra, mensaje
   y pie pasan a ancho completo, que si no el texto se queda en 219 px. */
.ecc-corralometro__body {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: clamp(16px, 2.4vw, 32px);
	row-gap: 8px;
	align-items: center;
	text-align: left;
}

.ecc-corralometro__img {
	grid-area: 1 / 1 / 3 / 2;
	align-self: center;
	width: clamp(64px, 18vw, 92px);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.ecc-corralometro__eyebrow {
	grid-area: 1 / 2 / 2 / 3;
	margin: 0;
	font-family: 'Space Mono', monospace;
	font-size: 0.87rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ecc-ambar);
}

/* Número y estado en la misma línea, alineados por la base. Si no caben
   (móvil estrecho), el estado baja solo. */
.ecc-corralometro__score {
	grid-area: 2 / 2 / 3 / 3;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 14px;
}

.ecc-corralometro__pct {
	font-family: Fraunces, serif;
	font-weight: 700;
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	line-height: 1;
	color: var(--ecc-hueso);
}

.ecc-corralometro__pct-sign {
	font-size: .5em;
	color: var(--ecc-ambar);
}

.ecc-corralometro__estado {
	font-family: 'Space Mono', monospace;
	font-size: clamp(.85rem, 1.6vw, 1rem);
	letter-spacing: .1em;
	color: var(--ecc-ambar);
}

.ecc-corralometro__track {
	grid-area: 3 / 1 / 4 / -1;
	width: 100%;
	height: 10px;
	border-radius: 999px;
	background: rgba(239, 230, 216, .15);
	overflow: hidden;
}

.ecc-corralometro__fill {
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ecc-hiedra), var(--ecc-ambar));
	transition: width 1.1s cubic-bezier(.16, .8, .3, 1);
}

.ecc-corralometro__msg {
	grid-area: 4 / 1 / 5 / -1;
	max-width: 46ch;
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ecc-piedra);
}

.ecc-corralometro__cta {
	display: inline-block;
	margin-left: 6px;
	color: var(--ecc-ambar);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ecc-corralometro__cta:hover,
.ecc-corralometro__cta:focus-visible {
	color: var(--ecc-hueso);
}

.ecc-corralometro__cta:focus-visible {
	outline: 2px solid var(--ecc-ambar);
	outline-offset: 2px;
}

.ecc-corralometro__foot {
	grid-area: 5 / 1 / 6 / -1;
	margin: 4px 0 0;
	font-family: 'Space Mono', monospace;
	font-size: 0.81rem;
	letter-spacing: .04em;
	font-style: italic;
	color: rgba(185, 169, 140, .65);
}

/* A partir de tablet la cigüeña ocupa las cinco filas y todo lo demás queda en
   la columna de la derecha, con un único eje de alineación de arriba abajo. */
@media (min-width: 780px) {
	.ecc-corralometro__body { row-gap: 10px; }
	.ecc-corralometro__img { grid-area: 1 / 1 / 6 / 2; width: clamp(104px, 12vw, 156px); }
	.ecc-corralometro__track { grid-area: 3 / 2 / 4 / 3; }
	.ecc-corralometro__msg { grid-area: 4 / 2 / 5 / 3; }
	.ecc-corralometro__foot { grid-area: 5 / 2 / 6 / 3; }
}

/* Fuera de la ventana del marcador (una hora antes de abrir → una hora después
   de cerrar) el PHP no imprime ni el número ni la barra. Las áreas de arriba
   están puestas por número de fila, así que sin la barra la fila 3 quedaría
   vacía sumando un row-gap de más: se suben mensaje y pie una fila. */
.ecc-corralometro--descanso .ecc-corralometro__msg { grid-area: 3 / 1 / 4 / -1; }
.ecc-corralometro--descanso .ecc-corralometro__foot { grid-area: 4 / 1 / 5 / -1; }

@media (min-width: 780px) {
	.ecc-corralometro--descanso .ecc-corralometro__img { grid-area: 1 / 1 / 5 / 2; }
	.ecc-corralometro--descanso .ecc-corralometro__msg { grid-area: 3 / 2 / 4 / 3; }
	.ecc-corralometro--descanso .ecc-corralometro__foot { grid-area: 4 / 2 / 5 / 3; }
}

@media (prefers-reduced-motion: reduce) {
	.ecc-corralometro { animation: none; }
	.ecc-corralometro__fill { transition: none; }
}