/* =====================================================================
   MASSIVE CONTRATOS

   Dos pestanas: la nomina de cada equipo con los proximos cuatro anios,
   y la misma plantilla juzgada por lo que rinde. Hereda de situacion.css
   la caja, la tipografia y las fichas al pasar el raton.

   Dos columnas de equipos. Con tres las tablas de cuatro anios salian
   apretadas y las cifras no cabian.
   ===================================================================== */

/* Las pestanas iban pegadas al titulo */
.mbv__vistas {
	margin-top: 1.1rem;
	gap: 0.5rem;
}

.mbv .mbs__vista {
	padding: 0.6rem 1.35rem;
}

/* --- La leyenda de las marcas --------------------------------------- */

.mbv__leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	margin: 0 0 1.25rem;
	font-size: 0.82rem;
	color: var(--mbs-suave);
}

.mbv__clave {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.mbv__marca-tipo {
	display: inline-block;
	min-width: 1.2rem;
	padding: 0.05rem 0.28rem;
	border-radius: 3px;
	font-size: 0.74rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}

.mbv__marca-tipo--pl { background: rgba(29, 66, 138, 0.14); color: #1d428a; }
.mbv__marca-tipo--tm { background: rgba(192, 57, 47, 0.14); color: #c0392f; }
.mbv__marca-tipo--ng { background: rgba(105, 105, 105, 0.18); color: var(--mbs-suave); }

/* --- La rejilla de equipos ------------------------------------------ */

/* Ya no hace falta: las tarjetas van sueltas en la rejilla */
.mbv__equipos { display: contents; }

.mbv__equipo {
	position: relative;
	padding: 1.1rem 1.15rem 1rem 1.35rem;
	border: 1px solid var(--mbs-borde);
	border-radius: 10px;
	background: var(--mbs-papel);
}

.mbv__equipo::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	border-radius: 10px 0 0 10px;
	background: var(--mbs-equipo, var(--mbs-acento));
}

.mbv__equipo-cabecera {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-bottom: 0.6rem;
}

.mbv h4.mbv__equipo-nombre {
	margin: 0;
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1.9rem;
	line-height: 1;
	letter-spacing: 0.03em;
	color: var(--mbs-tinta);
}

.mbv__equipo-cuantos {
	font-size: 0.82rem;
	color: var(--mbs-suave);
}

.mbv__equipo-total {
	margin-left: auto;
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--mbs-acento);
}

/* --- La tabla de dentro --------------------------------------------- */

.mbv table.mbv__tabla {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 1.05rem;
}

.mbv .mbv__th {
	padding: 0 0 0.4rem;
	border: 0;
	background: none;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: right;
	color: var(--mbs-suave);
	white-space: nowrap;
}

.mbv .mbv__th--nombre {
	width: 38%;
	text-align: left;
}

.mbv .mbv__th--desvio { width: 22%; }

.mbv__fila-jugador {
	position: relative;
	border-top: 1px solid var(--mbs-borde);
}

/* La primera fila no lleva raya: pegada a los titulos de columna hacia
   un doble borde que no separaba nada, solo ensuciaba. */
.mbv__tabla tbody .mbv__fila-jugador:first-child {
	border-top: 0;
}

.mbv .mbv__celda-nombre {
	padding: 0.5rem 0.5rem 0.5rem 0;
	border: 0;
	background: none;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	color: var(--mbs-tinta);
	overflow-wrap: anywhere;
}

.mbv .mbv__celda {
	padding: 0.5rem 0 0.5rem 0.5rem;
	border: 0;
	background: none;
	font-size: 1rem;
	line-height: 1.3;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--mbs-tinta);
	white-space: nowrap;
}

.mbv .mbv__celda--vacia {
	color: var(--mbs-suave);
	opacity: 0.55;
}

.mbv__pos {
	margin-left: 0.35rem;
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mbs-suave);
}

/* La celda con opcion se tine muy suave, como en las tablas de la NBA */
.mbv .mbv__celda--pl { background: rgba(29, 66, 138, 0.07); }
.mbv .mbv__celda--tm { background: rgba(192, 57, 47, 0.07); }
.mbv .mbv__celda--ng { background: rgba(105, 105, 105, 0.08); }

.mbv__celda .mbv__marca-tipo {
	margin-right: 0.2rem;
	vertical-align: 0.08em;
}

/* --- Pestana 2: contra que se compara -------------------------------- */

.mbv__grupos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
	margin-bottom: 1.5rem;
}

.mbv__grupo {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--mbs-borde);
	border-radius: 8px;
	background: var(--mbs-papel);
}

.mbv__grupo-nombre {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mbs-suave);
}

.mbv__grupo-dato {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

.mbv__grupo-dato i {
	font-family: "Anton", "Poppins", sans-serif;
	font-style: normal;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--mbs-tinta);
}

.mbv__grupo-dato em {
	font-style: normal;
	font-size: 0.8rem;
	color: var(--mbs-suave);
}

/* --- El veredicto de cada jugador ------------------------------------ */

.mbv .mbv__celda--desvio {
	font-weight: 700;
	font-size: 1.05rem;
}

.mbv__fila-jugador--lastre .mbv__celda--desvio,
.mbv__fila-jugador--caro .mbv__celda--desvio { color: var(--mbs-acento); }

.mbv__fila-jugador--chollo .mbv__celda--desvio,
.mbv__fila-jugador--barato .mbv__celda--desvio { color: #1f7a4d; }

.mbv__fila-jugador--lastre .mbv__celda-nombre { color: var(--mbs-acento); }
.mbv__fila-jugador--chollo .mbv__celda-nombre { color: #1f7a4d; }

.mbv__fila-jugador--nd .mbv__celda-nombre { color: var(--mbs-suave); }

.mbv__tabla--valor .mbv__fila-jugador:hover {
	background: rgba(53, 53, 53, 0.035);
}

.mbv__aviso {
	margin-left: 0.35rem;
	padding: 0.05rem 0.32rem;
	border-radius: 3px;
	background: rgba(160, 56, 67, 0.12);
	font-style: normal;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--mbs-acento);
	white-space: nowrap;
}

.mbv__aviso--novato {
	background: rgba(105, 105, 105, 0.16);
	color: var(--mbs-suave);
}

/* --- El balance del equipo ------------------------------------------- */

.mbv__balance {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0.5rem;
	margin-top: 1rem;
	padding-top: 0.8rem;
	border-top: 1px solid var(--mbs-borde);
}

.mbv__balance-parte {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.mbv__balance-parte b {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--mbs-suave);
}

.mbv__balance-parte i {
	font-family: "Anton", "Poppins", sans-serif;
	font-style: normal;
	font-size: 1.4rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--mbs-tinta);
}

.mbv__balance-caro { color: var(--mbs-acento) !important; }
.mbv__balance-barato { color: #1f7a4d !important; }

.mbv__balance-parte--neto {
	padding-left: 0.75rem;
	border-left: 1px dashed var(--mbs-borde);
}

.mbv__balance--malo .mbv__balance-parte--neto i { color: var(--mbs-acento); }
.mbv__balance--bueno .mbv__balance-parte--neto i { color: #1f7a4d; }

/* --- La ficha -------------------------------------------------------- */

.mbv__fila-jugador:hover .mbs__ficha,
.mbv__fila-jugador:focus-within .mbs__ficha,
.mbv__fila-jugador:focus .mbs__ficha {
	opacity: 1;
	visibility: visible;
	transform: translate(0, 0);
}

.mbv__celda-nombre .mbs__ficha {
	bottom: calc(100% + 8px);
	left: 0;
	transform: translate(0, 4px);
	max-width: 27rem;
	min-width: 19rem;
	white-space: normal;
	font-weight: 400;
}

.mbs__ficha-estado--lastre,
.mbs__ficha-estado--caro { background: rgba(201, 74, 88, 0.35); }

.mbs__ficha-estado--chollo,
.mbs__ficha-estado--barato { background: rgba(31, 122, 77, 0.4); }

.mbv__ficha-datos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.2rem 0.9rem;
	margin-top: 0.55rem;
	padding-top: 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.78rem;
}

.mbv__ficha-datos b {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.55);
}

/* Las fichas se salen de la tarjeta */
.mbv__equipo,
.mbv table.mbv__tabla { overflow: visible; }

.mbv__avisos {
	margin-top: 1.75rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--mbs-borde);
	font-size: 0.86rem;
	line-height: 1.65;
}

@media (max-width: 1250px) {
	.mbv__grupos { grid-template-columns: repeat(2, 1fr); }
}


@media (max-width: 600px) {
	.mbv__grupos { grid-template-columns: 1fr; }
	.mbv table.mbv__tabla { font-size: 0.86rem; }
	.mbv__balance { grid-template-columns: 1fr; }
	.mbv__balance-parte--neto { padding-left: 0; border-left: 0; }
}

/* --- Las dos conferencias, una por columna --------------------------- */

/* UNA rejilla de dos columnas, no dos columnas sueltas.
   Cada tarjeta lleva escrito su grid-row, asi que la pareja N empieza
   siempre a la misma altura aunque una plantilla sea mas corta. */
.mbv__conferencias {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.mbv h4.mbv__conferencia-titulo {
	margin: 0;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--mbs-tinta);
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mbs-tinta);
}

/* El mismo codigo de color que usa la clasificacion */
.mbv__conferencia-titulo--oeste { border-bottom-color: #C0392F; }
.mbv__conferencia-titulo--este { border-bottom-color: #1D428A; }

.mbv__sin-resultados {
	grid-column: 1 / -1;
	margin: 0;
	padding: 1.5rem 0;
	font-size: 0.9rem;
	font-style: italic;
	color: var(--mbs-suave);
}

/* --- El buscador ----------------------------------------------------- */

.mbv__buscador {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 1.25rem;
}

.mbv__buscador-etiqueta {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mbs-suave);
}

.mbv input.mbv__buscador-campo {
	flex: 0 1 22rem;
	min-width: 0;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--mbs-borde);
	border-radius: 8px;
	background: var(--mbs-papel);
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--mbs-tinta);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.mbv input.mbv__buscador-campo:focus {
	outline: 0;
	border-color: var(--mbs-acento);
	box-shadow: 0 0 0 3px rgba(160, 56, 67, 0.13);
}

.mbv__buscador-cuenta {
	font-size: 0.8rem;
	color: var(--mbs-suave);
}

/* --- Pestana 3: el resumen ------------------------------------------- */

.mbv__resumen {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.mbv h4.mbv__bloque-titulo {
	margin: 0 0 0.9rem;
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1.15;
	letter-spacing: 0.02em;
	color: var(--mbs-tinta);
}

.mbv__bloque--bueno .mbv__bloque-titulo { color: #1f7a4d; }
.mbv__bloque--malo .mbv__bloque-titulo { color: var(--mbs-acento); }

.mbv__podio {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.mbv__puesto {
	position: relative;
	display: grid;
	grid-template-columns: 2rem 1fr auto;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0.85rem 0.6rem 0.9rem;
	border: 1px solid var(--mbs-borde);
	border-radius: 8px;
	background: var(--mbs-papel);
}

.mbv__puesto::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	border-radius: 8px 0 0 8px;
	background: var(--mbs-equipo, var(--mbs-suave));
}

.mbv__puesto-num {
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1;
	text-align: center;
	color: rgba(53, 53, 53, 0.22);
}

.mbv__puesto-quien {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.mbv__puesto-quien b {
	font-size: 1rem;
	font-weight: 600;
	color: var(--mbs-tinta);
}

.mbv__puesto-quien em {
	font-style: normal;
	font-size: 0.74rem;
	color: var(--mbs-suave);
}

.mbv__puesto-cifra {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.1rem;
	text-align: right;
	white-space: nowrap;
}

.mbv__puesto-cifra b {
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.mbv__bloque--bueno .mbv__puesto-cifra b { color: #1f7a4d; }
.mbv__bloque--malo .mbv__puesto-cifra b { color: var(--mbs-acento); }

.mbv__puesto-cifra em {
	font-style: normal;
	font-size: 0.72rem;
	color: var(--mbs-suave);
}

@media (max-width: 900px) {
	.mbv__conferencias,
	.mbv__resumen { grid-template-columns: 1fr; }
}

/* El nombre entero, para quien no se sepa las abreviaturas */
.mbv__equipo-ciudad {
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--mbs-suave);
}

@media (max-width: 520px) {
	.mbv__equipo-ciudad { display: none; }
}

/* =====================================================================
   CONTROLES: ORDEN Y PUESTOS
   ===================================================================== */

.mbv__filtros {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1.25rem;
}

.mbv__filtros .mbv__buscador { margin-bottom: 0; }

.mbv__controles {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.mbv__controles-rotulo {
	margin-right: 0.25rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mbs-suave);
}

.mbv button.mbv__orden {
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--mbs-borde);
	border-radius: 999px;
	background: var(--mbs-papel);
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--mbs-suave);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mbv button.mbv__orden:hover {
	border-color: var(--mbs-acento);
	color: var(--mbs-tinta);
}

.mbv button.mbv__orden.is-activo {
	background: var(--mbs-tinta);
	border-color: var(--mbs-tinta);
	color: #ffffff;
}

/* --- Los puestos --- */

.mbv__puestos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
}

.mbv button.mbv__puesto-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--mbs-borde);
	border-radius: 999px;
	background: var(--mbs-papel);
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--mbs-tinta);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mbv button.mbv__puesto-chip i {
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: var(--mbs-gris);
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--mbs-suave);
	font-variant-numeric: tabular-nums;
}

.mbv button.mbv__puesto-chip:hover { border-color: var(--mbs-acento); }

.mbv button.mbv__puesto-chip.is-activo {
	background: var(--mbs-acento);
	border-color: var(--mbs-acento);
	color: #ffffff;
}

.mbv button.mbv__puesto-chip.is-activo i {
	background: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

/* =====================================================================
   LA LIGA ENTERA

   Una sola lista, del que mas cobra al que menos. Dos columnas en
   pantallas anchas: son 460 jugadores y en una sola no se acaba nunca.
   ===================================================================== */

/* Una sola columna. Con dos, las tres cifras de cada renglon salian
   apretadisimas; el ancho de la tabla da de sobra para una. */
.mbv ol.mbv__liga {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El atributo hidden trae display:none, pero cualquier display
   puesto en una clase le gana. Sin esta guarda, filtrar por puesto
   marca las filas como ocultas y se siguen viendo todas. */
.mbv li.mbv__liga-fila[hidden] { display: none; }

.mbv li.mbv__liga-fila {
	position: relative;
	display: grid;
	grid-template-columns: 2.6rem minmax(12rem, 1fr) 11rem 12rem 11rem;
	align-items: center;
	gap: 1.25rem;
	margin: 0;
	padding: 0.7rem 1.1rem 0.7rem 1.1rem;
	border: 1px solid var(--mbs-borde);
	border-radius: 8px;
	background: var(--mbs-papel);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mbv li.mbv__liga-fila::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	border-radius: 8px 0 0 8px;
	background: var(--mbs-equipo, var(--mbs-suave));
}

.mbv li.mbv__liga-fila:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(53, 53, 53, 0.1);
}

.mbv .mbv__liga-puesto {
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1.05rem;
	line-height: 1;
	text-align: center;
	color: rgba(53, 53, 53, 0.3);
	font-variant-numeric: tabular-nums;
}

.mbv__liga-quien {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	min-width: 0;
}

.mbv__liga-quien b {
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--mbs-tinta);
	overflow-wrap: anywhere;
}

.mbv__liga-quien em {
	font-style: normal;
	font-size: 0.74rem;
	color: var(--mbs-suave);
}

.mbv__liga-sueldo {
	font-family: "Anton", "Poppins", sans-serif;
	font-size: 1.15rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--mbs-tinta);
	white-space: nowrap;
}

.mbv__liga-desvio {
	min-width: 4.5rem;
	font-size: 0.85rem;
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	cursor: help;
}

.mbv__liga-fila--lastre .mbv__liga-desvio,
.mbv__liga-fila--caro .mbv__liga-desvio { color: var(--mbs-acento); }

.mbv__liga-fila--chollo .mbv__liga-desvio,
.mbv__liga-fila--barato .mbv__liga-desvio { color: #1f7a4d; }

.mbv__liga-desvio--nd {
	color: var(--mbs-suave);
	opacity: 0.6;
	cursor: default;
}

/* --- El resumen, mas apretado --- */

.mbv__resumen--cuatro {
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 0;
}

.mbv__resumen--cuatro .mbv__puesto {
	grid-template-columns: 1.5rem 1fr auto;
	gap: 0.5rem;
	padding: 0.45rem 0.6rem 0.45rem 0.7rem;
}

.mbv__resumen--cuatro .mbv__puesto-num { font-size: 1.15rem; }
.mbv__resumen--cuatro .mbv__puesto-quien b { font-size: 0.88rem; }
.mbv__resumen--cuatro .mbv__puesto-quien em { font-size: 0.68rem; }
.mbv__resumen--cuatro .mbv__puesto-cifra b { font-size: 1.05rem; }
.mbv__resumen--cuatro .mbv__puesto-cifra em { display: none; }

@media (max-width: 1400px) {
	.mbv__resumen--cuatro { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
	.mbv ol.mbv__liga { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.mbv__filtros { flex-direction: column; align-items: stretch; }
	.mbv__resumen--cuatro { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.mbv li.mbv__liga-fila,
	.mbv button.mbv__orden,
	.mbv button.mbv__puesto-chip { transition: none; }

	.mbv li.mbv__liga-fila:hover { transform: none; }
}

/* =====================================================================
   RESUMEN CONTRATOS: LOS 30 EQUIPOS EN DOS LISTAS
   ===================================================================== */

.mbv__resumen--dos {
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 0;
}

.mbv__bloque--ranking { padding: 1.25rem 1.35rem 1.4rem; }

/* La bajada explica el criterio: sin ella hay que adivinar si el
   primero es el mejor o el que mas gasta */
.mbv .mbv__bloque--ranking .mbv__bloque-titulo span {
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 0.76rem;
	font-weight: 500;
}

.mbv ol.mbv__podio--largo { gap: 0.25rem; }

.mbv__podio--largo .mbv__puesto {
	grid-template-columns: 2rem 1fr auto;
	gap: 0.65rem;
	padding: 0.5rem 0.7rem 0.5rem 0.8rem;
}

.mbv__podio--largo .mbv__puesto-num { font-size: 1.2rem; }

.mbv__podio--largo .mbv__puesto-quien b { font-size: 0.94rem; }
.mbv__podio--largo .mbv__puesto-quien em { font-size: 0.7rem; }

.mbv__podio--largo .mbv__puesto-cifra b { font-size: 1.15rem; }

.mbv__podio--largo .mbv__puesto-cifra em {
	display: block;
	font-size: 0.7rem;
	opacity: 0.75;
}

/* En la lista de rendimiento el signo ya dice si es bueno o malo, pero
   el color lo resuelve de un vistazo */
.mbv__puesto--bueno .mbv__puesto-cifra b { color: #1f7a4d; }
.mbv__puesto--malo .mbv__puesto-cifra b { color: var(--mbs-acento); }

@media (max-width: 900px) {
	.mbv__resumen--dos { grid-template-columns: 1fr; }
}

/* =====================================================================
   LA ESTRELLA DE "RENDIMIENTOS"
   ===================================================================== */

.mbv__estrella {
	margin-left: 0.3rem;
	font-size: 0.9em;
	line-height: 1;
	color: #c8a24a;
	text-shadow: 0 1px 2px rgba(138, 106, 31, 0.35);
}

/* Sobre el fondo oscuro de la pestana activa hay que subirle el brillo */
.mbv .mbs__vista[aria-selected="true"] .mbv__estrella { color: #e8c66d; }

/* =====================================================================
   LA LISTA DE LA LIGA: TRES CIFRAS POR RENGLON

   Cobra · lo que le sobra o le falta · lo que deberia cobrar.

   Van en ese orden a proposito: leido de izquierda a derecha cuenta la
   historia entera sin que haya que hacer ninguna resta de cabeza. Y
   cada una lleva su rotulo al lado, no debajo: hay sitio de sobra a lo
   ancho y asi se lee de un golpe.
   ===================================================================== */

.mbv__liga-cifra {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	white-space: nowrap;
}

.mbv .mbv__liga-cifra b {
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--mbs-tinta);
}

.mbv .mbv__liga-cifra em {
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--mbs-suave);
}

/* Lo que deberia cobrar: la referencia, en tono mas apagado */
.mbv .mbv__liga-cifra--justo b { color: var(--mbs-suave); }

/* El desvio: el numero que responde a la pregunta.
   Rojo si sobra dinero, verde si falta. Sin depender del veredicto,
   que tiene mas matices de los que hacen falta para leer 460 filas. */
.mbv .mbv__liga-cifra--desvio {
	cursor: help;
}

.mbv .mbv__liga-cifra--desvio b { font-size: 1.7rem; }

.mbv .mbv__liga-cifra--desvio.es-caro b,
.mbv .mbv__liga-cifra--desvio.es-caro em { color: var(--mbs-acento); }

.mbv .mbv__liga-cifra--desvio.es-barato b,
.mbv .mbv__liga-cifra--desvio.es-barato em { color: #1f7a4d; }

.mbv .mbv__liga-cifra--desvio em {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
}

.mbv .mbv__liga-cifra--nd b {
	font-family: "Poppins", sans-serif;
	font-size: 0.95rem;
	color: var(--mbs-suave);
	opacity: 0.6;
}

.mbv .mbv__liga-cifra--nd em { opacity: 0.6; }

@media (max-width: 1200px) {
	.mbv li.mbv__liga-fila {
		grid-template-columns: 2.4rem minmax(9rem, 1fr) auto auto auto;
		gap: 0.9rem;
	}

	.mbv .mbv__liga-cifra b { font-size: 1.3rem; }
	.mbv .mbv__liga-cifra--desvio b { font-size: 1.45rem; }
	.mbv .mbv__liga-cifra em { font-size: 0.66rem; }
}

@media (max-width: 820px) {
	.mbv li.mbv__liga-fila {
		grid-template-columns: 2.2rem 1fr;
		row-gap: 0.5rem;
	}

	.mbv__liga-cifra { grid-column: 2; }
}

/* =====================================================================
   MOVIL: LAS DOS CONFERENCIAS, UNA DEBAJO DE LA OTRA

   A dos columnas, en 375 px cada tarjeta se quedaba en unos 199 px y su
   tabla necesita entre 266 y 290: la pagina entera se iba a 591 px.

   Cada tarjeta lleva su grid-column y su grid-row escritos en linea
   (para que las parejas empiecen a la misma altura en ordenador), de ahi
   los !important. Y en el HTML van primero los dos rotulos y luego los
   equipos, asi que se reordenan por conferencia con data-mbv-lado: si no,
   "Este" salia arriba del todo, lejos de sus equipos.
   ===================================================================== */

@media (max-width: 760px) {
	.mbv__conferencias { grid-template-columns: minmax(0, 1fr); }

	.mbv__conferencias > * {
		grid-column: 1 !important;
		grid-row: auto !important;
	}

	.mbv__conferencias > .mbv__conferencia-titulo--oeste { order: 0; }
	.mbv__conferencias > [data-mbv-lado="oeste"]         { order: 1; }
	.mbv__conferencias > .mbv__conferencia-titulo--este  { order: 2; }
	.mbv__conferencias > [data-mbv-lado="este"]          { order: 3; }
	.mbv__conferencias > .mbv__sin-resultados            { order: 4; }

	/* Etiquetas a 10,9 px y avisos a 11,2 px: medido en Contratos */
	.mbv__aviso,
	.mbv__buscador-etiqueta,
	.mbv__controles-rotulo { font-size: 0.72rem; }
}

/* =====================================================================
   MOVIL: LA NOMINA DE CADA EQUIPO CABE SIN DESBORDAR

   Cinco temporadas con cifras enteras ("$39.491.282") en columnas de
   48 px: 1.054 celdas se salian y la pagina se iba a 427 px. En movil la
   cifra va en millones ("39,5 M"), la marca P/T/NG sube encima de la
   cifra y la posicion baja debajo del nombre.
   ===================================================================== */

.mbv .mbv__cifra-corta { display: none; }

@media (max-width: 760px) {
	.mbv .mbv__cifra-larga { display: none; }
	.mbv .mbv__cifra-corta { display: inline; }

	.mbv article.mbv__equipo { padding-left: 1rem; padding-right: 0.75rem; }

	.mbv .mbv__th--nombre { width: 31%; }
	/* "Deberia cobrar" e "Impacto en franquicia" no cabian en una linea */
	.mbv .mbv__th {
		font-size: 0.68rem;
		letter-spacing: 0;
		line-height: 1.2;
		white-space: normal;
		vertical-align: bottom;
		padding-left: 0.25rem;
	}
	.mbv .mbv__th--nombre { padding-left: 0; }
	.mbv .mbv__celda-nombre { font-size: 0.88rem; }
	.mbv .mbv__celda { padding-left: 0.25rem; font-size: 0.8rem; }
	.mbv .mbv__celda--desvio { font-size: 0.86rem; }
	.mbv i.mbv__pos { display: block; margin-left: 0; }

	.mbv .mbv__celda .mbv__marca-tipo {
		display: table;
		margin: 0 0 0.15rem auto;
	}
}

/* =====================================================================
   ESCRITORIO: LAS CIFRAS SE PISABAN

   Con dos equipos por fila, cada tarjeta mide unos 560 px en un portatil
   y las cifras enteras ("$30.000.000") no caben en sus columnas: se
   montaban unas encima de otras. Cada tarjeta mira SU propio ancho
   (container query) y, si no llega, pasa a millones ("30,0 M"), igual
   que ya hacia en el movil. En pantallas grandes siguen las enteras.

   Y los titulos de columna de "Rendimientos para Franquicias" ("Debería
   cobrar", "Impacto en franquicia") se juntaban y se salian de la
   tarjeta: ahora bajan a dos lineas.
   ===================================================================== */

.mbv article.mbv__equipo {
	container-type: inline-size;
	container-name: mbv-equipo;
}

@container mbv-equipo (max-width: 900px) {
	.mbv .mbv__cifra-larga { display: none; }
	.mbv .mbv__cifra-corta { display: inline; }
}

.mbv .mbv__tabla--valor .mbv__th {
	padding-left: 0.4rem;
	line-height: 1.25;
	white-space: normal;
	vertical-align: bottom;
}

.mbv .mbv__tabla--valor .mbv__th--nombre { padding-left: 0; }

/* --- Salarios en el movil: se desplaza de lado ----------------------- */

/* Con todos los años a la vez la tabla no cabia y los nombres se partian
   en tres lineas. En el movil se ven dos o tres temporadas y el resto se
   alcanza deslizando; el nombre se queda fijo a la izquierda. (Idea de
   Sergi, en Sugerencias.) Solo la de salarios: la de valor lleva fichas
   flotantes que un contenedor con scroll recortaria. */
@media (max-width: 600px) {
	.mbv table.mbv__tabla:not(.mbv__tabla--valor) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		table-layout: auto;
	}

	.mbv table.mbv__tabla:not(.mbv__tabla--valor) .mbv__th--nombre,
	.mbv table.mbv__tabla:not(.mbv__tabla--valor) .mbv__celda-nombre {
		position: sticky;
		left: 0;
		z-index: 1;
		width: auto;
		min-width: 8.6rem;
		max-width: 8.6rem;
		background: var(--mbs-papel);
		box-shadow: 6px 0 6px -6px rgba(0, 0, 0, 0.18);
	}

	.mbv table.mbv__tabla:not(.mbv__tabla--valor) .mbv__th:not(.mbv__th--nombre),
	.mbv table.mbv__tabla:not(.mbv__tabla--valor) .mbv__celda {
		/* Un poco menos que el hueco: asoma la tercera y se ve que hay mas */
		min-width: 4.9rem;
		padding-left: 0.6rem;
		white-space: nowrap;
	}
}