/**
 * El bloque de «disponible hoy» de la ficha.
 *
 * Dice dos cosas que a quien compra a las tres de la mañana le importan
 * más que cualquier otra: que hoy se puede, y que hay alguien al otro
 * lado.
 */

.fs-disp {
	margin: 1.2em 0 0;
	font-family: inherit;
}

.fs-disp__hoy {
	margin: 0 0 .8em;
	color: #3A3A3A;
	font-size: .98em;
	line-height: 1.45;
}

.fs-disp__hoy strong {
	color: #0D281A;
	font-weight: 600;
}

/* Las dos celdas, con una línea fina entre ellas. */
.fs-disp__caja {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid #E4E4E0;
	border-bottom: 1px solid #E4E4E0;
}

.fs-disp__celda {
	display: flex;
	align-items: center;
	gap: .6em;
	padding: .95em .9em;
	color: #0D281A;
	font-size: .95em;
	line-height: 1.3;
}

.fs-disp__celda + .fs-disp__celda {
	border-left: 1px solid #E4E4E0;
}

.fs-disp__icono {
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
	fill: none;
	stroke: #204E36;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- El punto que late ----
 *
 * Es la parte que hace el trabajo: un LED encendido dice «hay alguien»
 * mejor que cualquier frase. Late despacio, como una respiración, no
 * como una alarma: esto es un sitio fúnebre.
 */
.fs-disp__led {
	flex: 0 0 auto;
	position: relative;
	width: .62em;
	height: .62em;
	margin: 0 .15em;
	border-radius: 50%;
	background: #22A366;
}

.fs-disp__led::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #22A366;
	animation: fs-disp-latido 2.4s ease-out infinite;
}

@keyframes fs-disp-latido {
	0%   { transform: scale(1);   opacity: .75; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

@media (max-width: 420px) {
	.fs-disp__caja { grid-template-columns: 1fr; }
	.fs-disp__celda + .fs-disp__celda {
		border-left: 0;
		border-top: 1px solid #E4E4E0;
	}
}

/* Quien pidió menos movimiento ve el punto encendido, quieto. */
@media (prefers-reduced-motion: reduce) {
	.fs-disp__led::after { animation: none; opacity: 0; }
}