/* =====================================================================
   EL PULSO DE LA TEMPORADA

   Hereda todo de .mbs (la tabla de situacion): mismos colores, misma
   rejilla y el mismo JavaScript de ordenar y filtrar. Aqui solo van las
   piezas que no existen alli.
   ===================================================================== */

/* --- Marcha: el desvio y su distintivo --- */

/* La cifra y el sello, siempre en la misma linea: la columna se ha
   dimensionado para que quepan los dos juntos. */
.mbp__marcha {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 0.4rem;
	white-space: nowrap;
}

.mbp__desvio {
	padding: 0.24rem 0.6rem;
	border-radius: 6px;
	font-style: normal;
	font-size: 0.95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	cursor: help;
}

.mbp__desvio--sube { background: rgba(26, 127, 55, 0.13); color: #146c2e; }
.mbp__desvio--baja { background: rgba(160, 56, 67, 0.13); color: var(--mbs-acento); }

.mbp__pronto {
	font-style: normal;
	font-size: 0.78rem;
	color: var(--mbs-suave);
	opacity: 0.65;
	cursor: help;
}

/* El sello. Que se vea: es el motivo de la tabla. */
.mbp__sello {
	padding: 0.26rem 0.6rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Es un aviso, no un aplauso: solo lo llevan los que van peor de lo
   que se esperaba de ellos */
.mbp__sello {
	background: var(--mbs-acento);
	color: #fff;
	box-shadow: 0 0 0 3px rgba(160, 56, 67, 0.16);
}

/* --- Racha --- */

.mbp__racha {
	display: inline-flex;
	align-items: baseline;
	gap: 0.1rem;
	min-width: 2.6rem;
	padding: 0.24rem 0.5rem;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	justify-content: center;
	cursor: help;
}

.mbp__racha em {
	font-style: normal;
	font-size: 0.72rem;
	opacity: 0.75;
}

.mbp__racha--gana   { background: rgba(26, 127, 55, 0.13); color: #146c2e; }
.mbp__racha--pierde { background: rgba(160, 56, 67, 0.13); color: var(--mbs-acento); }

/* --- Proximos partidos --- */

.mbp__proximos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.mbp__juego {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.24rem 0.5rem 0.24rem 0.62rem;
	border-radius: 5px;
	background: var(--mbs-gris);
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: help;
	transition: background-color 0.18s ease;
}

/* El color del rival, en una franja fina: identifica sin escudos */
.mbp__juego::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	border-radius: 5px 0 0 5px;
	background: var(--mbs-equipo, var(--mbs-suave));
}

.mbp__juego:hover { background: #E9E9E9; }

.mbp__juego em {
	font-style: normal;
	color: var(--mbs-suave);
}

/* Fuera de casa: mas apagado, para leer de un vistazo el calendario */
.mbp__juego--fuera {
	background: transparent;
	border: 1px solid var(--mbs-borde);
	color: var(--mbs-suave);
}

.mbp__espera {
	margin-bottom: 1.25rem;
	text-align: left;
}

.mbp__pie { margin-top: 1.5rem; }


/* --- Parte de lesiones --- */

.mbp__lesionados {
	display: flex;
	flex-wrap: wrap;
	gap: 0.28rem;
}

.mbp__lesion {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.22rem 0.5rem;
	border-radius: 5px;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: help;
}

/* El punto dice la gravedad sin tener que leer nada */
.mbp__lesion i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.mbp__lesion--baja {
	background: rgba(160, 56, 67, 0.13);
	color: var(--mbs-acento);
}

.mbp__lesion--duda {
	background: var(--mbs-gris);
	color: var(--mbs-suave);
}

.mbp__mas {
	align-self: center;
	padding: 0.22rem 0.42rem;
	border-radius: 5px;
	border: 1px dashed var(--mbs-borde);
	font-style: normal;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--mbs-suave);
	cursor: help;
}

.mbp__sanos {
	font-style: normal;
	font-size: 0.8rem;
	color: var(--mbs-verde);
}

/* =====================================================================
   DOS CONFERENCIAS, UNA AL LADO DE LA OTRA

   Con 30 equipos en una sola columna la tabla obliga a hacer scroll
   eterno. Partida en dos y apretada, entra entera en un portatil.
   ===================================================================== */

.mbp__columnas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}

/* La clasificacion pide sitio: 30 equipos en dos tablas de nueve
   columnas. Se sale del limite de 1460px del resto y ocupa casi toda
   la pantalla, que es donde de verdad se lee bien. */
.mbs.mbp {
	width: min(1900px, calc(100vw - 2rem));

	/* Suele ir justo debajo del hero: hace falta mas aire arriba que
	   el que llevan los demas bloques. */
	padding-top: clamp(4rem, 8vw, 7rem);
}

/* Dos columnas solo cuando de verdad hay sitio. En tablet y movil,
   una sola: apretar nueve columnas en media pantalla no se lee. */
@media (min-width: 1400px) {
	.mbp__columnas {
		grid-template-columns: 1fr 1fr;
		gap: clamp(1.75rem, 3vw, 3rem);
		align-items: start;
	}
}

.mbp__conferencia { min-width: 0; }

.mbp .mbs__conferencia { margin-top: 0; }

/* --- Todo mas apretado que en la tabla de franquicias --- */

.mbp .mbs__encabezado,
.mbp .mbs__fila {
	gap: 0.7rem;
	padding: 0.55rem 0.9rem;
}

.mbp .mbs__encabezado {
	font-size: 0.66rem;
	letter-spacing: 0.02em;
}

.mbp .mbs__equipo {
	padding-left: 0.55rem;
	font-size: 1.25rem;
}

.mbp .mbs__equipo::before { width: 3px; }

.mbp .mbs__puesto { font-size: 0.8rem; }
.mbp .mbs__num    { font-size: 0.86rem; }


.mbp .mbp__desvio {
	padding: 0.16rem 0.4rem;
	font-size: 0.85rem;
}

.mbp .mbp__racha {
	min-width: 2.1rem;
	padding: 0.16rem 0.3rem;
	font-size: 0.85rem;
}

.mbp .mbp__sello {
	padding: 0.18rem 0.42rem;
	font-size: 0.58rem;
	letter-spacing: 0.03em;
}

.mbp .mbp__juego,
.mbp .mbp__lesion {
	padding: 0.16rem 0.34rem 0.16rem 0.44rem;
	font-size: 0.72rem;
}

.mbp .mbp__proximos,
.mbp .mbp__lesionados { gap: 0.2rem; }

.mbp .mbp__lesion i { width: 5px; height: 5px; }

.mbp .mbp__mas {
	padding: 0.16rem 0.32rem;
	font-size: 0.7rem;
}

.mbp .mbp__sanos { font-size: 0.72rem; }
.mbp .mbp__pronto { font-size: 0.7rem; }

/* Por debajo de esto no cabe: cada tabla hace su propio scroll */
@media (max-width: 620px) {
	.mbp .mbs__tabla { overflow-x: auto; }

	.mbp .mbs__encabezado,
	.mbp .mbs__fila { min-width: 44rem; }
}


/* --- El record manda ---------------------------------------------------
   Es el dato de verdad de la tabla, asi que se lleva la columna mas
   ancha, la tipografia de titular y el unico negro puro de la fila. */

.mbp__record {
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	cursor: help;
}

.mbp .mbp__record {
	font-size: 1.5rem;
	line-height: 1;
	color: var(--mbs-tinta);
	/* Que no roce la prediccion ni de lejos */
	padding-right: 0.9rem;
	border-right: 2px solid var(--mbs-borde);
}

/* La prediccion, al lado pero en segundo plano */
.mbp .mbp__prediccion {
	color: var(--mbs-suave);
	font-weight: 500;
	cursor: help;
}

/* --- Lesiones: sin tanto aire ------------------------------------------ */

.mbp .mbp__lesionados { gap: 0.15rem; }

.mbp .mbp__lesion {
	gap: 0.22rem;
	padding: 0.12rem 0.3rem 0.12rem 0.36rem;
	font-size: 0.7rem;
	border-radius: 3px;
}

.mbp .mbp__lesion i { width: 4px; height: 4px; }

.mbp .mbp__mas {
	padding: 0.12rem 0.26rem;
	font-size: 0.66rem;
}

/* =====================================================================
   PIE: EL PASO SIGUIENTE

   Un solo destino, con sitio de sobra por encima para que no parezca
   parte de la tabla.
   ===================================================================== */

.mbp__pie {
	margin-top: clamp(2.75rem, 5vw, 4rem);
	padding-top: clamp(2rem, 3.5vw, 3rem);
	border-top: 1px solid var(--mbs-borde);
	text-align: center;
}

.mbs a.mbp__enlace {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 1.15rem;
	padding: 1.1rem 1.4rem 1.1rem 2rem;
	border-radius: 4px;
	background: var(--mbs-tinta);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}

/* El rojo entra barriendo desde la izquierda, no de golpe */
.mbs a.mbp__enlace::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mbs-acento);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.mbs a.mbp__enlace:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(53, 53, 53, 0.22);
}

.mbs a.mbp__enlace:hover::before { transform: scaleX(1); }

.mbp__enlace-ante,
.mbp__enlace-texto,
.mbp__enlace-flecha { position: relative; z-index: 1; }

.mbp__enlace-ante {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	padding-right: 1.15rem;
	border-right: 1px solid rgba(255, 255, 255, 0.2);
	transition: color 0.28s ease;
}

.mbs a.mbp__enlace:hover .mbp__enlace-ante { color: rgba(255, 255, 255, 0.75); }

.mbp__enlace-texto {
	font-family: Anton, Poppins, sans-serif;
	font-weight: 400;
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.mbp__enlace-flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.28s ease;
}

.mbs a.mbp__enlace:hover .mbp__enlace-flecha {
	background: rgba(255, 255, 255, 0.22);
	transform: translateX(4px);
}

@media (max-width: 520px) {
	.mbs a.mbp__enlace {
		flex-direction: column;
		gap: 0.6rem;
		padding: 1.35rem 1.75rem;
	}

	.mbp__enlace-ante {
		padding-right: 0;
		border-right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mbs a.mbp__enlace,
	.mbs a.mbp__enlace::before,
	.mbp__enlace-flecha { transition: none; }
}

/* =====================================================================
   EL COLOR DE CADA CONFERENCIA

   El mapa clasico de la NBA pinta el Oeste en rojo y el Este en azul.
   Aqui se usa igual pero contenido: una franja arriba, la cabecera
   teñida y un halo muy suave. Lo justo para identificar de un vistazo
   en que mitad estas sin que la tabla se convierta en un semaforo.
   ===================================================================== */

.mbp__conferencia {
	--mbp-conf: var(--mbs-suave);
	--mbp-conf-suave: rgba(105, 105, 105, 0.08);
}

/* Oeste: el rojo del mapa, algo mas apagado que el acento de la casa */
.mbp__conferencia--oeste {
	--mbp-conf: #C0392F;
	--mbp-conf-suave: rgba(192, 57, 47, 0.07);
}

/* Este: el azul de siempre */
.mbp__conferencia--este {
	--mbp-conf: #1D428A;
	--mbp-conf-suave: rgba(29, 66, 138, 0.07);
}

.mbp__conferencia .mbs__tabla {
	border-color: color-mix(in srgb, var(--mbp-conf) 28%, var(--mbs-borde));
	border-top: 4px solid var(--mbp-conf);
	box-shadow: 0 1px 0 0 var(--mbp-conf-suave),
	            0 10px 30px -18px var(--mbp-conf);

	/* La ultima fila quedaba pegada al borde de abajo */
	padding-bottom: 4px;
}

/* Y un pelin mas de alto en cada fila, que iban muy justas */
.mbp__conferencia .mbs__celda,
.mbp__conferencia .mbs__fila > * {
	padding-top: 3px;
	padding-bottom: 3px;
}

/* La cabecera toma el tono, con el texto en el color de la conferencia */
.mbp__conferencia .mbs__encabezado {
	background: var(--mbp-conf-suave);
	color: color-mix(in srgb, var(--mbp-conf) 78%, #000);
}

.mbp__conferencia .mbs__th:hover { color: var(--mbp-conf); }

.mbp__conferencia .mbs__th[aria-sort=descending],
.mbp__conferencia .mbs__th[aria-sort=ascending] { color: var(--mbp-conf); }

/* Y el titulo de la conferencia, con su marca */
.mbp .mbs__conferencia {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
	color: var(--mbp-conf);
}

.mbp .mbs__conferencia::before {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--mbp-conf);
	box-shadow: 0 0 0 4px var(--mbp-conf-suave);
}

/* Las filas, con un rastro tenue del color al pasar por encima */
.mbp__conferencia .mbs__fila:hover {
	background: var(--mbp-conf-suave);
}

/* --- Movil: letra legible --------------------------------------------
   Cabeceras a 10,6 px y sellos a 9,3 px en un movil: medido en la
   portada. Nada por debajo de 0,72rem. */
@media (max-width: 780px) {
	.mbp .mbs__encabezado { font-size: 0.72rem; }

	.mbp__sello,
	.mbp .mbp__sello { font-size: 0.72rem; }

	.mbp__enlace-ante {
		font-size: 0.72rem;
		letter-spacing: 0.1em;
	}
}