/**
 * LRF Marcador
 *
 * Los colores estan todos arriba, en variables, para poder retocarlos sin
 * tener que meterse en el resto de las reglas.
 */

.lrfm {
	--lrfm-fondo: #8d0a24;
	--lrfm-fila: rgba(0, 0, 0, .16);
	--lrfm-fila-hover: rgba(0, 0, 0, .28);
	--lrfm-texto: #ffffff;
	--lrfm-suave: #f0c3cd;
	--lrfm-separador: rgba(255, 255, 255, .16);

	/* Verde para "en vivo", amarillo para el mensaje directo. Son dos cosas
	   distintas y conviene que no se confundan de un vistazo. */
	--lrfm-vivo-fondo: #d4072d;
	--lrfm-vivo-texto: #ffffff;
	--lrfm-aviso-fondo: #d4072d;
	--lrfm-aviso-texto: #ffffff;

	background: var(--lrfm-fondo);
	border-radius: 12px;
	/* En celular no ocupa todo el ancho a proposito: deja un respiro a los
	   costados para los telefonos con bordes curvos o con protector, donde el
	   borde justo contra el filo de la pantalla no se llega a ver bien. En PC
	   ese problema no existe y el margen se saca (mas abajo, en el @media). */
	margin: 0 2%;
	padding: 10px;
	color: var(--lrfm-texto);
	font-family: inherit;
	box-sizing: border-box;
}

.lrfm *,
.lrfm *:before,
.lrfm *:after {
	box-sizing: border-box;
}

.lrfm-cabecera {
	padding: 0 2px 5px;
}

.lrfm-marca {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
}

/* Deslizador -------------------------------------------------------------- */

.lrfm-viewport {
	overflow: hidden;
	/* El alto se lo pone el JS segun la pantalla que se este viendo. La
	   transicion acompana al cambio de pantalla. */
	transition: height .4s cubic-bezier(.22, .85, .3, 1);
}

/* Antes de que arranque el JS el carril todavia no esta repartido en pantallas,
   asi que se lo hace ver igual que la primera pantalla: misma grilla, mismo
   espaciado, y solo los primeros partidos. Sin esto, durante un instante se ven
   todas las tarjetas una abajo de la otra y a lo ancho, y parece que el bloque
   se rompio.

   Los numeros tienen que coincidir con los 'inicial' de
   lrf_marcador_cantidades() en lrf-marcador.php: 3 en celular y 6 en PC. */
.lrfm-track:not(.lrfm-listo) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: 1fr;
	gap: 6px;
}

.lrfm-track > .lrfm-partido:nth-child(n+4) {
	display: none;
}

.lrfm-track.lrfm-listo {
	display: flex;
	align-items: flex-start;
	/* Separacion entre una pantalla y la siguiente. Sin esto, al deslizar las
	   tarjetas de una pantalla se pegan a las de la otra y no se entiende donde
	   termina una y empieza la que viene. El JS mide este hueco solo. */
	gap: 16px;
	/* Lento a proposito: antes el cambio de pantalla era tan rapido que costaba
	   darse cuenta de que se habia movido. */
	transition: transform .4s cubic-bezier(.22, .85, .3, 1);
	will-change: transform;
}

.lrfm-track.lrfm-arrastrando {
	transition: none;
}

.lrfm-pantalla-grupo {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* Todas las tarjetas de una pantalla quedan del mismo alto, sin tener que
	   reservar espacio de gusto dentro de cada una: se estiran a la mas alta.
	   Que midan igual es lo que evita que se confundan al deslizar. */
	grid-auto-rows: 1fr;
	gap: 6px;
}

/* Tarjeta del partido ----------------------------------------------------- */

.lrfm-partido {
	display: block;
	/* Sin esto la tarjeta es un item de grilla con min-width:auto, y la linea
	   de goleadores (que va en una sola linea y puede ser larguisima) la estira
	   hasta empujar el marcador fuera de la pantalla. */
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	padding: 6px 10px 7px;
	background: var(--lrfm-fila);
	border-radius: 8px;
	color: var(--lrfm-texto);
	text-decoration: none;
	transition: background .15s ease;
}

.lrfm-partido:hover,
.lrfm-partido:focus {
	background: var(--lrfm-fila-hover);
	color: var(--lrfm-texto);
	text-decoration: none;
}

.lrfm-partido:focus-visible {
	outline: 2px solid var(--lrfm-vivo-fondo);
	outline-offset: 2px;
}

/* Encabezado: reloj (o mensaje directo) y la identificacion del torneo ----- */

.lrfm-encabezado {
	display: block;
	text-align: center;
}

.lrfm-estado {
	display: inline-block;
	max-width: 100%;
	padding: 2px 11px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--lrfm-suave);
}

/* En vivo: pastilla verde con el puntito latiendo. */
.lrfm-vivo .lrfm-estado {
	background: var(--lrfm-vivo-fondo);
	color: var(--lrfm-vivo-texto);
}

.lrfm-vivo .lrfm-estado:before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 5px;
	border-radius: 50%;
	background: var(--lrfm-vivo-texto);
	animation: lrfm-latido 2s ease-in-out infinite;
}

@keyframes lrfm-latido {
	0%, 100% { opacity: 1; }
	50%      { opacity: .3; }
}

/* Mensaje directo: pastilla amarilla. Es lo que se carga cuando un partido se
   suspende o hay algo que avisar, y reemplaza al reloj. Puede ser largo, asi
   que se le deja usar mas de un renglon en vez de recortarlo. */
.lrfm-con-mensaje .lrfm-estado {
	background: var(--lrfm-aviso-fondo);
	color: var(--lrfm-aviso-texto);
	white-space: normal;
}

/* Si el torneo y la categoria son largos, se parten en hasta tres renglones en
   vez de recortarse con puntos suspensivos. */
.lrfm-torneo {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	margin: 2px 0 4px;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lrfm-suave);
	overflow: hidden;
}

/* Escudos, tanteador y nombres -------------------------------------------- */

.lrfm-cruce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas:
		"escudo1 tanteador escudo2"
		"nombre1 tanteador nombre2";
	align-items: center;
	column-gap: 4px;
}

.lrfm-escudo-caja {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lrfm-lado1 { grid-area: escudo1; }
.lrfm-lado2 { grid-area: escudo2; }

/* Los escudos ocupan todo el ancho que les deja su lado de la tarjeta. El alto
   es fijo (y el object-fit los acomoda adentro) para que todas las tarjetas
   midan igual, sea cual sea la forma del escudo. */
.lrfm-escudo {
	width: 82px;
	max-width: 100%;
	height: 82px;
	object-fit: contain;
}

.lrfm-escudo-vacio {
	border-radius: 6px;
	background: rgba(255, 255, 255, .12);
}

/* El tanteador ocupa las dos filas y queda centrado entre los dos escudos. */
.lrfm-tanteador {
	grid-area: tanteador;
	align-self: center;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0 2px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.lrfm-guion {
	font-size: 18px;
	font-weight: 400;
	opacity: .55;
}

.lrfm-nombre1 { grid-area: nombre1; }
.lrfm-nombre2 { grid-area: nombre2; }

/* Los nombres largos ("Sportivo Santa Clara") no entran en una linea al lado
   del tanteador, asi que se les permiten dos antes de recortar. No hace falta
   reservar el alto de la segunda: de igualar las tarjetas se encarga el
   grid-auto-rows de .lrfm-pantalla-grupo. */
.lrfm-nombre {
	min-width: 0;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.3;
	text-align: center;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Linea de goleadores ----------------------------------------------------- */

/* El espacio esta siempre, tenga goles o no, para que todas las tarjetas midan
   igual y ninguna se destaque de las otras. */
.lrfm-linea {
	display: block;
	overflow: hidden;
	/* Alto fijo, con goles o sin goles, para que todas las tarjetas terminen
	   igual y ninguna quede mas alta que la de al lado. */
	height: 22px;
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid var(--lrfm-separador);
	font-size: 11px;
	line-height: 1.45;
	color: var(--lrfm-suave);
	white-space: nowrap;
}

.lrfm-linea-texto {
	display: inline-block;
}

/* Todas las lineas con goles se desplazan igual, a la misma velocidad, aunque
   el texto entre en pantalla. Si una sola se moviera, se llevaria toda la
   atencion y pareceria que ese partido tiene algo distinto. */
.lrfm-corre .lrfm-linea-texto {
	padding-left: 100%;
	animation: lrfm-desplazar var(--lrfm-dur, 20s) linear infinite;
	/* El retardo negativo arranca la animacion ya empezada, con el texto
	   apoyado en el borde izquierdo. Sin esto el primer gol tarda varios
	   segundos en entrar desde la derecha y la linea se ve vacia al abrir. */
	animation-delay: var(--lrfm-retardo, 0s);
}

@keyframes lrfm-desplazar {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* Destello cuando cambia el marcador -------------------------------------- */

.lrfm-gol {
	animation: lrfm-destello 2.5s ease-out 1;
}

@keyframes lrfm-destello {
	0%   { background: rgba(25, 195, 125, .45); }
	100% { background: var(--lrfm-fila); }
}

.lrfm-vacio {
	margin: 0;
	padding: 18px 4px;
	color: var(--lrfm-suave);
	font-size: 13px;
	text-align: center;
}

/* Pie: flechas y cantidad ------------------------------------------------- */

.lrfm-pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--lrfm-separador);
}

.lrfm-pie.lrfm-oculto,
.lrfm-paginador.lrfm-oculto {
	display: none;
}

.lrfm-paginador {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lrfm-flecha {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 32px;
	padding: 0;
	background: rgba(255, 255, 255, .1);
	border: 0;
	border-radius: 8px;
	color: var(--lrfm-texto);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.lrfm-flecha:hover {
	background: rgba(255, 255, 255, .2);
}

.lrfm-flecha[disabled] {
	opacity: .3;
	cursor: default;
}

.lrfm-pantalla {
	min-width: 46px;
	font-size: 12px;
	color: var(--lrfm-suave);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.lrfm-club,
.lrfm-cantidad {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--lrfm-suave);
}

.lrfm-club select,
.lrfm-cantidad select {
	height: 32px;
	padding: 0 6px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid var(--lrfm-separador);
	border-radius: 8px;
	color: var(--lrfm-texto);
	font-size: 13px;
	font-family: inherit;
}

.lrfm-club select option,
.lrfm-cantidad select option {
	color: #000000;
}

/* El selector de club puede tener nombres largos, asi que se le deja crecer y
   recortar en vez de empujar al resto del pie. */
/* Los nombres de club son largos. Se le pone un techo para que "Mi club" y
   "Ver" entren juntos en el mismo renglon del pie y no se desarme en tres. */
.lrfm-club select {
	max-width: 40vw;
	text-overflow: ellipsis;
}

/* La tarjeta del club elegido. Va primera de todas, y la estrellita explica
   por que esta arriba. */
.lrfm-favorito {
	background: rgba(0, 0, 0, .3);
	box-shadow: inset 0 0 0 1px var(--lrfm-separador);
}

.lrfm-favorito .lrfm-torneo:before {
	content: "★ ";
	color: var(--lrfm-aviso-fondo);
}

/* PC: las mismas tarjetas en varias columnas, y se ven 6 de entrada.
   El ancho tiene que coincidir con LRF_MARCADOR_ANCHO_PC en lrf-marcador.php. */
@media (min-width: 700px) {
	.lrfm {
		margin: 0;
		padding: 16px;
	}

	.lrfm-track:not(.lrfm-listo) {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 8px;
	}

	.lrfm-track > .lrfm-partido:nth-child(n+4) {
		display: block;
	}

	.lrfm-track > .lrfm-partido:nth-child(n+7) {
		display: none;
	}

	.lrfm-pantalla-grupo {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 8px;
	}

	.lrfm-pantalla-grupo > .lrfm-partido {
		min-width: 0;
	}

	.lrfm-escudo {
		width: 96px;
		height: 96px;
	}

	.lrfm-tanteador {
		font-size: 32px;
	}

	.lrfm-nombre {
		font-size: 14px;
	}

	.lrfm-estado {
		font-size: 15px;
	}

	.lrfm-torneo {
		font-size: 12.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lrfm-corre .lrfm-linea-texto {
		padding-left: 0;
		animation: none;
	}

	.lrfm-vivo .lrfm-estado:before,
	.lrfm-gol {
		animation: none;
	}

	.lrfm-track.lrfm-listo {
		transition: none;
	}
}