/* =====================================================================
   QUE FRANQUICIAS ESTAN PEOR

   Cuatro apartados, cada uno con su tabla de columnas propias. El
   JavaScript solo cambia de apartado y filtra; el orden ya viene hecho
   del servidor.

   La seccion se sale del contenedor de 1140px para llegar a los 1460px
   del header, que es todo el ancho util del sitio.

   Todo cuelga de .mbs
   ===================================================================== */

.mbs {
	--mbs-papel:  #FFFFFF;
	--mbs-gris:   #F3F3F3;
	--mbs-tinta:  #353535;
	--mbs-acento: #A03843;
	--mbs-vivo:   #c94a58;
	--mbs-suave:  #696969;
	--mbs-borde:  #E4E4E4;
	--mbs-verde:  #1a7f37;
	--mbs-ancho-max: 1460px;

	/* Ancho comun de todos los bloques del plugin: el de la clasificacion.
	   Se salen del contenedor de Elementor para que todos midan lo mismo
	   y la pagina no parezca un escalonado. */
	width: min(1900px, calc(100vw - 2rem));
	margin-left: 50%;
	transform: translateX(-50%);

	/* Aire arriba y abajo: estos bloques suelen ir pegados al footer */
	padding-block: clamp(2.5rem, 5vw, 4.5rem);

	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	color: var(--mbs-tinta);
}

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

.mbs__cabecera {
	max-width: 100%;
	margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
	text-align: center;
}

.mbs__antetitulo {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mbs-acento);
}

.mbs h2.mbs__titulo {
	margin: 0;
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	/* Se ajusta al ancho para que nunca parta en dos lineas */
	font-size: clamp(1.4rem, 4.1vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mbs-tinta);
}

.mbs__entrada {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--mbs-suave);
}

/* --- Mandos: apartados y filtros ------------------------------------ */

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

.mbs__vistas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0.35rem;
	border-radius: 999px;
	background: var(--mbs-gris);
}

.mbs .mbs__vista {
	padding: 0.8rem 1.9rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: inherit;
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--mbs-suave);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mbs .mbs__vista:hover { color: var(--mbs-tinta); }

.mbs .mbs__vista[aria-selected="true"] {
	background: var(--mbs-tinta);
	color: #fff;
}

.mbs__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.mbs .mbs__chip {
	padding: 0.62rem 1.25rem;
	border: 1px solid var(--mbs-borde);
	border-radius: 999px;
	background: var(--mbs-papel);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--mbs-suave);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.mbs .mbs__chip:hover { border-color: var(--mbs-tinta); }

.mbs .mbs__chip[aria-pressed="true"] {
	border-color: var(--mbs-acento);
	background: rgba(160, 56, 67, 0.08);
	color: var(--mbs-acento);
}

/* --- Un apartado ----------------------------------------------------- */

.mbs__apartado[hidden] { display: none; }

.mbs__intro {
	max-width: 62rem;
	margin-bottom: 1.5rem;
	padding-left: 1rem;
	border-left: 3px solid var(--mbs-acento);
}

.mbs h3.mbs__intro-titulo {
	margin: 0 0 0.5rem;
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--mbs-tinta);
}

.mbs__intro-texto {
	margin: 0 0 0.6rem;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--mbs-suave);
}

.mbs__intro-texto strong { color: var(--mbs-tinta); font-weight: 600; }

.mbs__intro-como {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--mbs-acento);
}

/* --- Los cinco peores ------------------------------------------------- */

.mbs__destacados { margin-bottom: 1.75rem; }

/* El titular que manda la mirada: grande, y con el subtitulo debajo */
.mbs__destacados-alto {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.15rem 0.9rem;
	margin-bottom: 1rem;
	padding-bottom: 0.7rem;
	border-bottom: 2px solid var(--mbs-acento);
}

.mbs h4.mbs__destacados-titulo {
	margin: 0;
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mbs-acento);
}

.mbs__destacados-pie {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	font-style: italic;
	color: var(--mbs-suave);
}

.mbs__tarjetas {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.mbs__tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 1rem 1rem 1rem 1.15rem;
	border: 1px solid var(--mbs-borde);
	border-radius: 12px;
	background: var(--mbs-papel);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.mbs__tarjeta::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: var(--mbs-equipo, var(--mbs-acento));
}

.mbs__tarjeta:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: 0 10px 26px rgba(53, 53, 53, 0.13);
}

.mbs__tarjeta-puesto {
	position: absolute;
	top: 0.5rem;
	right: 0.9rem;
	font-family: "Anton", "Poppins", sans-serif;
	font-size: 2.6rem;
	line-height: 1;
	color: rgba(53, 53, 53, 0.08);
}

.mbs__tarjeta-equipo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: 2.4rem;
	line-height: 1;
	letter-spacing: 0.03em;
	color: var(--mbs-tinta);
}

/* El color del equipo, sin usar su escudo */
.mbs__punto {
	flex: 0 0 auto;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	background: var(--mbs-equipo, var(--mbs-acento));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mbs-equipo, var(--mbs-acento)) 22%, transparent);
}

.mbs__tarjeta-cifra {
	margin-top: 0.35rem;
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: 2.1rem;
	line-height: 1.1;
	color: var(--mbs-acento);
	font-variant-numeric: tabular-nums;
}

.mbs__tarjeta-cifra em {
	font-style: normal;
	font-size: 0.55em;
	color: var(--mbs-suave);
}

.mbs__tarjeta-motivo {
	margin-top: 0.3rem;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--mbs-suave);
}

.mbs__conclusion {
	margin: 0;
	padding: 1.1rem 1.35rem;
	border-radius: 10px;
	background: var(--mbs-gris);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--mbs-suave);
}

.mbs__conclusion strong { color: var(--mbs-tinta); font-weight: 600; }

/* --- Tabla ------------------------------------------------------------ */

.mbs__tabla {
	border: 1px solid var(--mbs-borde);
	border-radius: 14px;
	overflow: hidden;
}

.mbs__encabezado,
.mbs__fila {
	display: grid;
	grid-template-columns: var(--mbs-cols);
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1.4rem;
}

.mbs__encabezado {
	background: var(--mbs-gris);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mbs-suave);
}

.mbs .mbs__th {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	cursor: pointer;
	transition: color 0.15s ease;
}

.mbs .mbs__th:hover { color: var(--mbs-acento); }

/* La flecha: apunta hacia donde ordena, y solo se ve en la activa */
.mbs__th i {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.mbs__th:hover i { opacity: 0.35; }

.mbs__th[aria-sort="descending"] i,
.mbs__th[aria-sort="ascending"] i { opacity: 1; }

.mbs__th[aria-sort="ascending"] i { transform: rotate(180deg); }

.mbs__th[aria-sort="descending"],
.mbs__th[aria-sort="ascending"] { color: var(--mbs-acento); }

.mbs__th--num    { justify-content: flex-end; text-align: right; }
.mbs__th--centro { justify-content: center; text-align: center; }

.mbs__fila {
	border-top: 1px solid var(--mbs-borde);
	background: var(--mbs-papel);
	transition: background-color 0.2s ease;
}

.mbs__fila:hover { background: #FAFAFA; }
.mbs__fila[hidden] { display: none; }

.mbs__puesto {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--mbs-suave);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.mbs__equipo {
	position: relative;
	padding-left: 0.8rem;
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1.7rem;
	line-height: 1;
	letter-spacing: 0.02em;
}

.mbs__equipo::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 1.25em;
	border-radius: 3px;
	background: var(--mbs-equipo, var(--mbs-acento));
}

.mbs__celda { min-width: 0; }
.mbs__celda--centro { text-align: center; }

/* Celdas numericas */
.mbs__num {
	font-size: 1rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mbs__num--fuerte { font-weight: 700; }
.mbs__num--nd     { color: var(--mbs-suave); opacity: 0.5; }
.mbs__num--rojo   { color: var(--mbs-acento); font-weight: 600; }
.mbs__num--verde  { color: var(--mbs-verde); }
.mbs__num--libre  { color: var(--mbs-verde); font-size: 0.9rem; }

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

/* --- Escalon de nivel -------------------------------------------------- */

.mbs__nivel {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	cursor: help;
}

.mbs__nivel--aspirante      { background: rgba(26, 127, 55, 0.12); color: #146c2e; }
.mbs__nivel--playoffs       { background: rgba(53, 53, 53, 0.09); color: var(--mbs-tinta); }
.mbs__nivel--playin         { background: rgba(105, 105, 105, 0.12); color: var(--mbs-suave); }
.mbs__nivel--reconstruccion { background: rgba(160, 56, 67, 0.12); color: var(--mbs-acento); }

.mbs .mbs__chip--aspirante[aria-pressed="true"] {
	border-color: #146c2e;
	background: rgba(26, 127, 55, 0.1);
	color: #146c2e;
}

/* --- Tramo salarial ---------------------------------------------------- */

.mbs__estado {
	display: inline-block;
	padding: 0.28rem 0.7rem;
	border-radius: 6px;
	background: var(--mbs-gris);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
}

.mbs__estado--sobre-el-segundo-apron { background: rgba(160, 56, 67, 0.14); color: var(--mbs-acento); }
.mbs__estado--sobre-el-primer-apron  { background: rgba(201, 74, 88, 0.12); color: var(--mbs-vivo); }
.mbs__estado--en-impuesto-de-lujo    { background: rgba(53, 53, 53, 0.1); }
.mbs__estado--sobre-el-tope          { background: rgba(53, 53, 53, 0.07); }
.mbs__estado--bajo-el-tope           { background: rgba(26, 127, 55, 0.12); color: #146c2e; }

/* --- Rondas de draft ---------------------------------------------------- */

.mbs__ronda {
	display: inline-block;
	min-width: 4rem;
	padding: 0.3rem 0.55rem;
	border-radius: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	cursor: help;
}

.mbs__ronda--propia     { background: rgba(26, 127, 55, 0.14); color: #146c2e; }
.mbs__ronda--protegida  { background: rgba(105, 105, 105, 0.16); color: var(--mbs-suave); }
.mbs__ronda--swap       { background: rgba(53, 53, 53, 0.1); color: var(--mbs-tinta); }
.mbs__ronda--traspasada { background: rgba(160, 56, 67, 0.14); color: var(--mbs-acento); }

/* --- Puesto en la conferencia --- */

.mbs__conf {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	padding: 0.24rem 0.6rem;
	border-radius: 6px;
	border-left: 3px solid currentColor;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	cursor: help;
}

.mbs__conf strong { font-size: 1rem; font-weight: 700; }

.mbs__conf em {
	font-style: normal;
	font-size: 0.78rem;
	color: var(--mbs-suave);
}

.mbs__conf--playoffs { background: rgba(26, 127, 55, 0.1);  color: #146c2e; }
.mbs__conf--playin   { background: rgba(53, 53, 53, 0.08);  color: var(--mbs-tinta); }
.mbs__conf--fuera    { background: rgba(160, 56, 67, 0.1);  color: var(--mbs-acento); }

/* --- Trayectoria --------------------------------------------------------- */

.mbs__flecha {
	display: inline-block;
	padding: 0.26rem 0.6rem;
	border-radius: 6px;
	font-style: normal;
	font-size: 0.95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	cursor: help;
}

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

/* --- Barra de presion ----------------------------------------------------- */

.mbs__medida {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	justify-content: flex-end;
}

.mbs__medida i {
	flex: 1 1 auto;
	min-width: 2rem;
	height: 8px;
	border-radius: 3px;
	background:
		linear-gradient(to right, var(--mbs-acento) var(--mbs-ancho, 0), transparent var(--mbs-ancho, 0)),
		var(--mbs-gris);
	transition: background 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.mbs__medida-nd { color: var(--mbs-suave); opacity: 0.5; }

/* --- Avisos ---------------------------------------------------------------- */

.mbs__vacio {
	margin: 0;
	padding: 2rem 1rem;
	text-align: center;
	color: var(--mbs-suave);
	background: var(--mbs-papel);
}

.mbs__nodata {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed var(--mbs-borde);
	border-radius: 12px;
	text-align: center;
	color: var(--mbs-suave);
}

.mbs__aviso {
	padding: 1.5rem;
	text-align: center;
	color: var(--mbs-suave);
	border: 1px dashed var(--mbs-borde);
	border-radius: 12px;
}

/* --- Adaptacion -------------------------------------------------------------- */

@media (max-width: 1200px) {
	.mbs__tabla { overflow-x: auto; }

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

@media (max-width: 900px) {
	.mbs__tarjetas { grid-template-columns: repeat(2, 1fr); }
	.mbs__tarjeta:last-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
	.mbs { width: calc(100vw - 1.5rem); }

	.mbs__mandos { justify-content: flex-start; }

	.mbs__vistas {
		width: 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.mbs__tarjetas { grid-template-columns: 1fr; }
	.mbs__tarjeta:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.mbs__medida i,
	.mbs__tarjeta { transition: none; }
}

/* =====================================================================
   FICHA DE UNA RONDA DE DRAFT

   Panel propio en vez del title del navegador: el texto de condiciones
   es largo, el title lo corta, aparece con retardo y no admite formato.

   Aparece con :hover y tambien con :focus-within, para que se pueda
   llegar con el teclado.
   ===================================================================== */

.mbs__ronda { position: relative; }

.mbs__ronda--tiene {
	cursor: help;
	text-decoration: underline dotted rgba(53, 53, 53, 0.4);
	text-underline-offset: 3px;
}

.mbs__ronda:focus-visible {
	outline: 2px solid var(--mbs-acento);
	outline-offset: 2px;
}

.mbs__ficha {
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	z-index: 20;
	display: block;
	width: max-content;
	max-width: 22rem;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	background: var(--mbs-tinta);
	color: #fff;
	text-align: left;
	white-space: normal;
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);

	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/* La flecha que la ata a la celda */
.mbs__ficha::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: var(--mbs-tinta);
}

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

.mbs__ficha-alto {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.mbs__ficha-alto strong {
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1;
	letter-spacing: 0.02em;
}

.mbs__ficha-estado {
	padding: 0.16rem 0.5rem;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.14);
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 600;
	white-space: nowrap;
}

.mbs__ficha-estado--propia     { background: rgba(94, 214, 130, 0.24); }
.mbs__ficha-estado--traspasada { background: rgba(233, 122, 134, 0.26); }

.mbs__ficha-texto {
	display: block;
	font-size: 0.92rem;
	line-height: 1.5;
	color: #fff;
}

/* El ingles original, por si alguien quiere comprobarlo */
.mbs__ficha-original {
	display: block;
	margin-top: 0.55rem;
	padding-top: 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.74rem;
	line-height: 1.45;
	font-style: italic;
	color: rgba(255, 255, 255, 0.5);
}

/* Las primeras filas no tienen sitio arriba: la ficha cae hacia abajo */
.mbs__fila:nth-child(-n + 4) .mbs__ficha {
	bottom: auto;
	top: calc(100% + 9px);
	transform: translate(-50%, -4px);
}

.mbs__fila:nth-child(-n + 4) .mbs__ficha::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: var(--mbs-tinta);
}

.mbs__fila:nth-child(-n + 4) .mbs__ronda:hover .mbs__ficha,
.mbs__fila:nth-child(-n + 4) .mbs__ronda:focus-within .mbs__ficha {
	transform: translate(-50%, 0);
}

/* La tabla recorta por defecto: sin esto la ficha quedaria cortada */
.mbs__apartado[data-para="draft"] .mbs__tabla { overflow: visible; }

/* --- Titulo de cada conferencia en Trayectoria --- */

.mbs h4.mbs__conferencia {
	margin: 1.75rem 0 0.7rem;
	font-family: "Anton", "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--mbs-tinta);
}

.mbs h4.mbs__conferencia:first-of-type { margin-top: 0; }

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

/* =====================================================================
   CABECERA EN FILA: TITULO A LA IZQUIERDA, SALIDA A LA DERECHA
   ===================================================================== */

.mbs__cabecera--fila {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	text-align: left;
}

.mbs__cabecera--fila .mbs__titulo { white-space: normal; }

/* El boton al Massive Draft */
.mbs a.mbs__ir {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	flex: 0 0 auto;
	padding: 0.9rem 1.15rem 0.9rem 1.6rem;
	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;
}

.mbs a.mbs__ir::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.mbs__ir:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(53, 53, 53, 0.22);
}

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

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

.mbs__ir-ante {
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	padding-right: 1rem;
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.mbs__ir-texto {
	font-family: Anton, Poppins, sans-serif;
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.mbs__ir-flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 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.mbs__ir:hover .mbs__ir-flecha {
	background: rgba(255, 255, 255, 0.22);
	transform: translateX(4px);
}

/* =====================================================================
   LO QUE PAGA POR SU SITIO
   ===================================================================== */

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

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

/* La combinacion que importa: nomina de aspirante sin serlo */
.mbs__alarma {
	padding: 0.22rem 0.55rem;
	border-radius: 999px;
	background: var(--mbs-acento);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: help;
	box-shadow: 0 0 0 3px rgba(160, 56, 67, 0.16);
}

/* =====================================================================
   LOS CONTRATOS QUE ATAN
   ===================================================================== */

.mbs__contratos {
	display: flex;
	flex-direction: column;
	gap: 0.22rem;
	width: 100%;
}

.mbs__contrato {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.18rem 0.45rem;
	border-radius: 5px;
	background: var(--mbs-gris);
	font-size: 0.82rem;
	cursor: help;
}

.mbs__contrato-quien {
	flex: 1 1 auto;
	min-width: 0;
	font-style: normal;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mbs__contrato-cuanto {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--mbs-acento);
	font-variant-numeric: tabular-nums;
}

/* Los años que quedan: cuantos mas, mas oscuro. Se ve la condena. */
.mbs__contrato-anios {
	flex: 0 0 auto;
	min-width: 1.7rem;
	padding: 0.05rem 0.3rem;
	border-radius: 4px;
	font-style: normal;
	font-size: 0.68rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.mbs__contrato-anios--1 { background: #9a9a9a; }
.mbs__contrato-anios--2 { background: #7d7d7d; }
.mbs__contrato-anios--3 { background: var(--mbs-vivo); }
.mbs__contrato-anios--4 { background: var(--mbs-acento); }

@media (max-width: 700px) {
	.mbs__cabecera--fila { flex-direction: column; align-items: flex-start; }
}

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

/* --- Mas detalle en cada contrato ------------------------------------ */

/* El porcentaje del tope: dice de un vistazo si es un maximo */
.mbs__contrato-tope {
	flex: 0 0 auto;
	padding: 0.05rem 0.28rem;
	border-radius: 4px;
	background: rgba(53, 53, 53, 0.08);
	font-size: 0.66rem;
	font-weight: 700;
	color: var(--mbs-suave);
	text-decoration: none;
	cursor: help;
	font-variant-numeric: tabular-nums;
}

/* La puerta de salida del ultimo año, si la hay */
.mbs__contrato-tipo {
	flex: 0 0 auto;
	padding: 0.05rem 0.3rem;
	border-radius: 4px;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	cursor: help;
}

.mbs__contrato-tipo--opcion_jugador { background: rgba(160, 56, 67, 0.14); color: var(--mbs-acento); }
.mbs__contrato-tipo--opcion_equipo  { background: rgba(26, 127, 55, 0.14);  color: #146c2e; }
.mbs__contrato-tipo--no_garantizado { background: rgba(26, 127, 55, 0.14);  color: #146c2e; }
.mbs__contrato-tipo--muerto         { background: var(--mbs-acento);        color: #fff; }

/* Con "hasta 29-30" en vez de "4a" hace falta algo mas de sitio */
.mbs__contrato-anios { min-width: 3.2rem; }

/* =====================================================================
   LAS COLUMNAS ANCHAS, SEPARADAS DE LO ANTERIOR

   Sin esto el contenido arranca pegado a la columna de al lado y la
   tabla se lee como un bloque. Una linea fina y aire por delante las
   convierten en lo que son: un apartado aparte dentro de la fila.
   ===================================================================== */


/* --- Lo que paga: repartido, no amontonado a la izquierda ----------- */

.mbs__gasto {
	justify-content: flex-start;
	gap: 0.5rem 0.7rem;
}

.mbs__gasto-cifra { font-size: 1.3rem; }

/* --- Contratos: seis en dos columnas -------------------------------- */

.mbs__contratos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.2rem 0.45rem;
	width: 100%;
}

/* Con dos columnas el nombre tiene menos sitio: se aprieta lo demas */
.mbs__contrato {
	gap: 0.3rem;
	padding: 0.14rem 0.35rem;
	font-size: 0.76rem;
}

/* Sin esto el nombre estira la fila y deja huecos irregulares */
.mbs__contrato-quien { max-width: 6.2rem; }

/* El porcentaje del tope, que es lo que mas dice de un contrato */
.mbs__contrato-tope {
	min-width: 2.1rem;
	padding: 0.1rem 0.32rem;
	border-radius: 999px;
	background: var(--mbs-tinta);
	font-size: 0.68rem;
	font-weight: 700;
	color: #fff;
	text-align: center;
}

/* Un maximo se ve venir de lejos */
.mbs__contrato-tope--alto {
	background: var(--mbs-acento);
	box-shadow: 0 0 0 2px rgba(160, 56, 67, 0.18);
}

.mbs__contrato-anios {
	min-width: 8.2rem;
	font-size: 0.62rem;
	letter-spacing: 0;
	white-space: nowrap;
}

/* Con seis contratos y la etiqueta completa, una sola columna se lee
   mejor en cuanto se estrecha algo la pantalla. */
@media (max-width: 1500px) {
	.mbs__contratos { grid-template-columns: 1fr; }
}

/* =====================================================================
   EL TITULAR, CON VIDA

   Mismo recurso que en Massive Draft: la primera mitad sostiene y la
   segunda lleva el barrido de luz. Asi las dos secciones se reconocen
   como parte de lo mismo.
   ===================================================================== */

.mbs h2.mbs__titulo--vivo {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.1em 0.3em;
	white-space: normal;
}

.mbs__titulo-suave { color: var(--mbs-tinta); }

.mbs__titulo-fuerte {
	background: linear-gradient(100deg,
		#A03843 0%, #c94a58 40%, #ff9aa5 50%, #c94a58 60%, #A03843 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: mbs-barrido 6s linear infinite;
}

@keyframes mbs-barrido {
	0%   { background-position: 130% 0; }
	60%  { background-position: -30% 0; }
	100% { background-position: -30% 0; }
}

.mbs h2.mbs__titulo--vivo::after {
	content: ;
	flex: 0 0 100%;
	max-width: 20rem;
	height: 3px;
	margin-top: 0.5rem;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--mbs-acento), transparent);
	transform-origin: left;
	animation: mbs-linea 1.1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes mbs-linea {
	from { transform: scaleX(0); opacity: 0; }
	to   { transform: scaleX(1); opacity: 1; }
}

/* --- El boton, en rojo de casa ---------------------------------------- */

.mbs a.mbs__ir {
	background: var(--mbs-acento);
	box-shadow: 0 8px 22px rgba(160, 56, 67, 0.28);
}

/* Al pasar por encima se oscurece en vez de encenderse: el rojo ya esta */
.mbs a.mbs__ir::before { background: var(--mbs-tinta); }

.mbs a.mbs__ir:hover {
	box-shadow: 0 16px 34px rgba(160, 56, 67, 0.4);
}

.mbs__ir-ante {
	color: rgba(255, 255, 255, 0.62);
	border-right-color: rgba(255, 255, 255, 0.28);
}

.mbs__ir-flecha { background: rgba(255, 255, 255, 0.18); }

@media (prefers-reduced-motion: reduce) {
	.mbs__titulo-fuerte,
	.mbs h2.mbs__titulo--vivo::after { animation: none; }
}


/* --- La columna que solo separa --------------------------------------- */

/* Existe para empujar la columna ancha hacia la derecha sin robarle
   sitio a las de datos ni descuadrar la cabecera. */
.mbs__espaciador {
	display: block;
	min-width: 0;
}