/* =====================================================================
   TABLERO DEL DRAFT (portada)
   =====================================================================
   La tabla avanza de fila en fila: el JS mueve --mbta-paso. Se para al
   pasar el raton y con prefers-reduced-motion.
   ===================================================================== */

.mbta {
	--mbta-tinta: #353535;
	--mbta-suave: #6a6a6a;
	--mbta-acento: #A03843;
	--mbta-papel: #ffffff;
	--mbta-linea: rgba(53, 53, 53, 0.1);
	--mbta-alto: 44px;
	position: relative;
	box-sizing: border-box;

	/* El mismo ancho que la clasificacion y el resto de bloques */
	width: var(--mbw-ancho-bloque, min(1900px, calc(100vw - 2rem)));
	margin-left: 50%;
	transform: translateX(-50%);
	margin-block: clamp(1.4rem, 3vw, 2.6rem);
	padding: 1.6rem clamp(1rem, 2.5vw, 1.9rem) 1.2rem;
	border: 1px solid var(--mbta-linea);
	border-radius: 16px;
	background: var(--mbta-papel);
	box-shadow: 0 18px 40px -32px rgba(0, 0, 0, 0.5);
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--mbta-tinta);
}

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

/* --- Cabecera ------------------------------------------------------- */

.mbta__cabecera { margin-bottom: 1.1rem; }

.mbta .mbta__antetitulo {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.35rem;
	color: var(--mbta-acento);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mbta__punto {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mbta-acento);
}

.mbta__titulo {
	margin: 0 0 0.3rem;
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	font-weight: 800;
	line-height: 1.2;
}

.mbta .mbta__bajada {
	margin: 0;
	max-width: 60ch;
	color: var(--mbta-suave);
	font-size: 0.84rem;
	line-height: 1.45;
}

/* --- La tabla ------------------------------------------------------- */

.mbta__tabla {
	/* Cada mitad: equipo + cuantas le quedan + botin */
	--mbta-cols: 7.5rem 5.5rem minmax(6rem, 1fr);
	border: 1px solid var(--mbta-linea);
	border-radius: 12px;
	overflow: hidden;
}

.mbta__encabezado {
	display: grid;
	grid-template-columns: var(--mbta-cols) var(--mbta-cols);
	gap: 0.55rem;
	height: 34px;
	padding: 0 0.7rem;
	background: rgba(53, 53, 53, 0.04);
	border-bottom: 1px solid var(--mbta-linea);
}

.mbta__th {
	display: flex;
	align-items: center;
	overflow: hidden;
	color: var(--mbta-suave);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mbta__fila {
	display: grid;
	grid-template-columns: var(--mbta-cols);
	align-items: center;
	gap: 0.55rem;
	padding: 0 0.7rem;
}

.mbta__ventana {
	height: calc(var(--mbta-filas, 6) * var(--mbta-alto));
	overflow: hidden;
}

.mbta__carro {
	/* Dos equipos por fila: se ven el doble sin ocupar mas alto */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	transform: translateY(calc(var(--mbta-paso, 0) * var(--mbta-alto) * -1));
	transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

.mbta__fila {
	height: var(--mbta-alto);
	border-bottom: 1px solid rgba(53, 53, 53, 0.06);
	border-left: 3px solid var(--mbta-equipo, var(--mbta-acento));
	background: #fff;
}

.mbta__equipo { display: flex; flex-direction: column; min-width: 0; }

.mbta__equipo b {
	color: var(--mbta-equipo, var(--mbta-tinta));
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.mbta__equipo em {
	overflow: hidden;
	color: var(--mbta-suave);
	font-size: 0.68rem;
	font-style: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Cuantas primeras propias le quedan */

.mbta__cuenta {
	display: grid;
	grid-template-columns: auto auto;
	align-items: baseline;
	gap: 0.25rem;
	justify-content: start;
}

.mbta__cuenta b {
	font-size: 1.15rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.mbta__cuenta i {
	color: var(--mbta-suave);
	font-size: 0.7rem;
	font-style: normal;
}

.mbta__medidor {
	grid-column: 1 / -1;
	display: block;
	width: 100%;
	height: 4px;
	margin-top: 0.2rem;
	border-radius: 999px;
	background: rgba(53, 53, 53, 0.1);
	overflow: hidden;
}

.mbta__medidor i {
	display: block;
	width: var(--mbta-lleno, 0%);
	height: 100%;
	border-radius: inherit;
	background: var(--mbta-equipo, var(--mbta-acento));
}

.mbta__botin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	min-width: 0;
}

.mbta b.mbta__chip {
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	font-size: 0.66rem;
	font-weight: 700;
	white-space: nowrap;
}

.mbta b.mbta__chip--ronda { background: rgba(26, 127, 55, 0.12); color: #1a7f37; }
.mbta b.mbta__chip--swap  { background: rgba(29, 66, 138, 0.12); color: #1d428a; }
.mbta b.mbta__chip--fuera { background: rgba(160, 56, 67, 0.12); color: #A03843; }

.mbta em.mbta__seco {
	color: var(--mbta-suave);
	font-size: 0.68rem;
	font-style: normal;
}

/* --- Nota de pie ---------------------------------------------------- */

.mbta .mbta__nota {
	margin: 0.8rem 0 0;
	max-width: 80ch;
	color: var(--mbta-suave);
	font-size: 0.74rem;
	line-height: 1.5;
}


.mbta__pie {
	display: flex;
	justify-content: flex-end;
	margin-top: 1rem;
	padding-top: 0.8rem;
	border-top: 1px solid var(--mbta-linea);
}

.mbta a.mbta__enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--mbta-acento);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

.mbta a.mbta__enlace:hover { text-decoration: underline; }

/* --- Movil ---------------------------------------------------------- */

@media (max-width: 900px) {
	/* Una sola columna de equipos: en el movil no caben dos */
	.mbta__carro { grid-template-columns: minmax(0, 1fr); }

	.mbta__encabezado { grid-template-columns: var(--mbta-cols); }

	.mbta__encabezado .mbta__th:nth-child(n+4) { display: none; }

	.mbta__equipo em { display: none; }
}

@media (max-width: 560px) {
	.mbta { padding: 1.3rem 1rem 1rem; --mbta-alto: 46px; }

	.mbta__tabla { --mbta-cols: 4.6rem 4.5rem minmax(0, 1fr); }

	.mbta b.mbta__chip { font-size: 0.62rem; }

}

/* --- Quien no quiere movimiento ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mbta__carro { transition: none; }

}