/**
 * Contador de prisión.
 *
 * Las variables están pensadas para retocarse sin tocar el resto: si el tema
 * ya define sus propios tokens, apunta --cp-* a ellos y listo.
 */

.cp {
	--cp-tinta: #23211e;
	--cp-acento: #c8972e;
	--cp-suave: rgba( 35, 33, 30, .68 );
	--cp-linea: rgba( 35, 33, 30, .16 );
	--cp-mono: "Space Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	text-align: center;
	color: var( --cp-tinta );
	padding-block: clamp( 1.5rem, 4vw, 3rem );
}

/* Variante para fondo oscuro: [contador_prision tema="oscuro"] */
.cp--oscuro {
	--cp-tinta: #f5f0e3;
	--cp-acento: #e2b652;
	--cp-suave: rgba( 245, 240, 227, .62 );
	--cp-linea: rgba( 245, 240, 227, .2 );
}

.cp > * {
	margin: 0;
}

/* --- Número de días ---------------------------------------------------- */

.cp__numero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
}

.cp__digitos {
	font-family: var( --cp-mono );
	font-size: clamp( 5rem, 17vw, 6rem );
	font-weight: 700;
	line-height: .85;
	letter-spacing: -.03em;
	color: var( --cp-tinta );

	/* Sin esto el bloque cambia de ancho al pasar de 999 a 1.000. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.cp__unidad {
	font-family: var( --cp-mono );
	font-size: clamp( .75rem, 1.6vw, 1rem );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .22em;
	color: var( --cp-acento );
}

.cp__lugar {
	margin-top: .15rem;
	font-family: var( --cp-mono );
	font-size: clamp( .625rem, 1.25vw, .8125rem );
	text-transform: uppercase;
	letter-spacing: .16em;
	line-height: 1.5;
	color: var( --cp-suave );
	max-width: 40ch;
}

/* --- Reloj HH:MM:SS ---------------------------------------------------- */

.cp__reloj {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: clamp( .35rem, 1.2vw, .9rem );
	margin-top: clamp( 1.75rem, 4vw, 2.75rem );
}

.cp__celda {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	min-width: clamp( 3.25rem, 8vw, 5rem );
	padding-top: .65rem;
	border-top: 1px solid var( --cp-linea );
}

.cp__cifra {
	font-family: var( --cp-mono );
	font-size: clamp( 1.75rem, 5vw, 2.75rem );
	font-weight: 700;
	line-height: 1;
	color: var( --cp-tinta );
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.cp__etiqueta {
	font-family: var( --cp-mono );
	font-size: clamp( .5625rem, 1.1vw, .6875rem );
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var( --cp-suave );
}

.cp__sep {
	font-family: var( --cp-mono );
	font-size: clamp( 1.75rem, 5vw, 2.75rem );
	font-weight: 700;
	line-height: 1;
	padding-top: .65rem;
	color: var( --cp-acento );
	opacity: .55;
}

/* --- Texto --------------------------------------------------------------- */

.cp__desglose {
	margin-top: clamp( .9rem, 2vw, 1.25rem );
	font-family: var( --cp-mono );
	font-size: clamp( 1rem, 2.2vw, 1.375rem );
	letter-spacing: .02em;
	color: var( --cp-tinta );
}

.cp__pie {
	margin-top: .75rem;
	font-size: clamp( .8125rem, 1.4vw, .9375rem );
	line-height: 1.6;
	color: var( --cp-suave );
}

/* --- Entrada escalonada -------------------------------------------------- */

.cp[data-cp-animacion="si"] .cp__numero,
.cp[data-cp-animacion="si"] .cp__reloj,
.cp[data-cp-animacion="si"] .cp__desglose,
.cp[data-cp-animacion="si"] .cp__pie {
	opacity: 0;
	transform: translateY( 14px );
}

.cp[data-cp-animacion="si"].cp--visible .cp__numero,
.cp[data-cp-animacion="si"].cp--visible .cp__reloj,
.cp[data-cp-animacion="si"].cp--visible .cp__desglose,
.cp[data-cp-animacion="si"].cp--visible .cp__pie {
	opacity: 1;
	transform: none;
	transition:
		opacity .7s cubic-bezier( .22, 1, .36, 1 ) calc( var( --cp-i, 0 ) * 140ms ),
		transform .7s cubic-bezier( .22, 1, .36, 1 ) calc( var( --cp-i, 0 ) * 140ms );
}

/* Sin JS no hay clase .cp--visible: el contenido debe verse igual. */
.no-js .cp[data-cp-animacion="si"] .cp__numero,
.no-js .cp[data-cp-animacion="si"] .cp__reloj,
.no-js .cp[data-cp-animacion="si"] .cp__desglose,
.no-js .cp[data-cp-animacion="si"] .cp__pie {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.cp[data-cp-animacion="si"] .cp__numero,
	.cp[data-cp-animacion="si"] .cp__reloj,
	.cp[data-cp-animacion="si"] .cp__desglose,
	.cp[data-cp-animacion="si"] .cp__pie {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Utilidades ---------------------------------------------------------- */

.cp__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

@media ( max-width: 380px ) {
	.cp__sep {
		display: none;
	}
	.cp__reloj {
		gap: .75rem;
	}
}