/* Comparador de fichas (plantilla template-comparar.php).
   Los tokens comunes vienen de :root en header.css; aca solo los que faltan. */

.bt-cmp {
	--bt-surface: #ffffff;
	--bt-radius: 12px;
	--bt-gap: 16px;
	--bt-gana: #0f7a52;
	--bt-gana-fondo: #e8f7f0;
	color: var(--bt-text);
	background: transparent;
	padding: 24px 0 40px;
	overflow-x: hidden;
}

.bt-cmp * {
	box-sizing: border-box;
}

.bt-cmp__title {
	margin: 0 0 8px;
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	overflow-wrap: anywhere;
}

.bt-cmp__vs-title {
	color: var(--bt-accent);
}

.bt-cmp__bajada {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--bt-muted);
	max-width: 60ch;
}

/* ---------- selector ---------- */

.bt-cmp__form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	align-items: end;
	background: var(--bt-surface-2);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	padding: 18px;
	margin: 0 0 28px;
}

.bt-cmp__campo {
	margin: 0;
	min-width: 0;
}

.bt-cmp__campo label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.bt-cmp__campo select {
	width: 100%;
	/* Astra le clava height:40px a los <select>: con el relleno propio
	   el texto no entra y queda cortado por abajo. */
	height: auto;
	line-height: 1.3;
	max-width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-sm);
	background: var(--bt-surface);
	color: var(--bt-text);
	font-size: 15px;
	font-family: inherit;
}

.bt-cmp__vs {
	display: none;
	font-size: 20px;
	font-weight: 700;
	color: var(--bt-accent);
	text-align: center;
	padding-bottom: 12px;
}

.bt-cmp__boton {
	width: 100%;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

.bt-cmp__aviso {
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 1px solid var(--bt-border);
	border-left: 4px solid var(--bt-accent);
	border-radius: var(--bt-radius-sm);
	background: var(--bt-accent-light);
	font-size: 14px;
}

/* ---------- duelos sugeridos ---------- */

.bt-cmp__sugeridas {
	margin-top: 32px;
}

.bt-cmp__subtitulo {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
}

.bt-cmp__sugeridas-bajada {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--bt-muted);
}

.bt-cmp__duelos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.bt-cmp__duelo {
	min-width: 0;
}

/* El boton muestra los dos equipos, no solo sus nombres: en una pagina de
   comparar, ver las dos fotos enfrentadas dice mas que dos lineas de texto. */
.bt-cmp__duelo a {
	display: block;
	height: 100%;
	padding: 14px 14px 16px;
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	color: inherit;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(16, 29, 66, .05), 0 8px 20px rgba(16, 29, 66, .06);
	transition: border-color .15s, box-shadow .15s, transform .15s;
}

.bt-cmp__duelo a:hover,
.bt-cmp__duelo a:focus-visible {
	border-color: var(--bt-accent);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

.bt-cmp__duelo-fotos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.bt-cmp__duelo-foto {
	display: block;
	flex: 0 0 74px;
	width: 74px;
	/* Las fotos vienen recortadas al equipo sobre blanco. */
	background: #fff;
	border-radius: var(--bt-radius-sm);
	overflow: hidden;
}

.bt-cmp__duelo-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: contain;
}

.bt-cmp__duelo-vs {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--bt-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}

.bt-cmp__duelo-nombres {
	display: block;
	margin-top: 12px;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.bt-cmp__duelo-nombres b {
	font-weight: 600;
}

.bt-cmp__duelo-nombres i {
	display: inline-block;
	margin: 0 5px;
	font-style: normal;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--bt-accent);
}

/* ---------- los dos equipos ---------- */

.bt-cmp__equipos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bt-gap);
	margin: 0 0 24px;
}

/* Con tres equipos las tarjetas se apilan en el telefono: tres columnas en una
   pantalla de 320 px dejan una foto de 50 px, que no muestra nada. Apiladas a
   220 px de foto eran 1.150 px de scroll antes de llegar al veredicto, asi que
   ahi la foto va mas chica. */
.bt-cmp__equipos--tres {
	grid-template-columns: 1fr;
}

@media (max-width: 559px) {
	.bt-cmp__equipos--tres .bt-cmp__foto {
		max-width: 150px;
	}
}

/* Sombra en dos capas: una linea de contacto de 1 px y una difusa y muy clara
   que despega la tarjeta del fondo. Es la misma que usa el panel del buscador,
   asi que las cajas del sitio se ven todas de la misma familia. */
.bt-cmp__equipo {
	position: relative;
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	padding: 16px;
	text-align: center;
	min-width: 0;
	box-shadow: 0 1px 2px rgba(16, 29, 66, .05), 0 8px 20px rgba(16, 29, 66, .06);
}

.bt-cmp__foto {
	display: block;
	/* Sin tope, la foto crece con la tarjeta y el equipo sale a 700 px de alto. */
	max-width: 220px;
	margin-inline: auto;
	/* Las fotos vienen recortadas al equipo sobre blanco. */
	background: #fff;
	border-radius: var(--bt-radius-sm);
	overflow: hidden;
}

.bt-cmp__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: contain;
}

.bt-cmp__equipo-nombre {
	margin: 12px 0 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* El que gana: mismo tamano que los otros —el borde verde es un anillo de
   sombra, no un borde mas grueso, asi la tarjeta no se corre ni un pixel—, con
   una franja arriba, un fondo apenas teñido y la sombra en verde. Antes solo
   cambiaba el color del borde y en el telefono, con las tarjetas apiladas, se
   perdia de vista. */
.bt-cmp__equipo--gana {
	border-color: var(--bt-gana);
	box-shadow: 0 0 0 1px var(--bt-gana), 0 2px 6px rgba(15, 122, 82, .10), 0 14px 30px rgba(15, 122, 82, .16);
}

/* La franja de arriba y no un fondo verde: las fotos vienen recortadas sobre
   blanco, asi que cualquier tinte en la tarjeta deja un rectangulo blanco en el
   medio, que es justo lo contrario de prolijo. */
.bt-cmp__equipo--gana::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto;
	height: 5px;
	background: linear-gradient(90deg, var(--bt-gana) 0%, #2fbf87 100%);
	border-radius: var(--bt-radius) var(--bt-radius) 0 0;
}

/* La nota del equipo, en las tres tarjetas. Antes era una chapa verde que solo
   tenia el ganador y decia "Gana 5-0"; ese numero dependia del rival. Este no:
   es la nota del equipo contra una escala fija, la misma en cualquier cruce.
   Por eso la lleva cada uno y solo cambia de color el que gana. */
.bt-cmp__nota {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	margin: 12px 0 0;
	padding: 4px 13px 5px;
	border: 1px solid var(--bt-border);
	border-radius: 999px;
	background: var(--bt-surface-2);
	color: var(--bt-muted);
}

.bt-cmp__nota-num {
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	color: var(--bt-text);
}

.bt-cmp__nota-de {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* Cuando la ficha no da para una nota se dice, en vez de inventar un numero. */
.bt-cmp__nota--sin {
	font-size: 11.5px;
	font-weight: 600;
}

.bt-cmp__nota--gana {
	border-color: var(--bt-gana);
	background: var(--bt-gana);
	color: rgba(255, 255, 255, .8);
	box-shadow: 0 2px 6px rgba(15, 122, 82, .28);
}

.bt-cmp__nota--gana .bt-cmp__nota-num {
	color: #ffffff;
}

.bt-cmp__chips {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}

.bt-cmp__chips li {
	background: var(--bt-surface-2);
	color: var(--bt-muted);
	font-size: 12px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 999px;
}

.bt-cmp__equipo-meta {
	margin: 0;
	font-size: 13px;
	color: var(--bt-muted);
}

.bt-cmp__enlace {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bt-accent);
	text-decoration: none;
}

.bt-cmp__enlace:hover,
.bt-cmp__enlace:focus-visible {
	text-decoration: underline;
}

/* ---------- sacar un equipo del cruce ---------- */

/* Con tres columnas la barra lateral no se dibuja —las tres tarjetas se quedan
   con el ancho entero—, asi que este boton es el unico lugar donde se deshace
   el cruce.
   Va anclado al pie de la tarjeta, no al final del contenido: asi las tres
   quedan a la misma altura aunque un equipo tenga la medalla y otro no. Se
   probo antes con la tarjeta en columna flexible y margin-top:auto, pero el
   flex le encogia la foto a la tarjeta que gana —la medalla le comia el alto—
   y su equipo salia a la mitad del tamaño de los otros dos. */
.bt-cmp__equipos--tres .bt-cmp__equipo {
	position: relative;
	padding-bottom: 62px;
}

/* La x que era: el simbolo &times; en la tipografia del sitio se dibuja chico y
   corrido hacia arriba, y el circulo gris sobre la tarjeta blanca no se veia.
   Ahora la cruz es un trazo dibujado —centrado de verdad— dentro de un circulo
   rojo claro: el rojo esta desde el principio, que es el color de sacar algo,
   y al pasar por encima se llena, con la cruz en blanco. */
.bt-cmp__sacar {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid #f0b6b1;
	border-radius: 50%;
	background: #fdeceb;
	color: #c0392f;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(179, 38, 30, .10);
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}

.bt-cmp__sacar-ico {
	display: block;
}

.bt-cmp__sacar:hover,
.bt-cmp__sacar:focus-visible {
	background: #b3261e;
	border-color: #b3261e;
	color: #ffffff;
	box-shadow: 0 3px 10px rgba(179, 38, 30, .32);
	/* El translateX es el que lo mantiene centrado: hay que repetirlo. */
	transform: translateX(-50%) translateY(-1px);
}

.bt-cmp__sacar:focus-visible {
	outline: 2px solid #b3261e;
	outline-offset: 2px;
}

.bt-cmp__sacar:active {
	transform: translateX(-50%) translateY(0);
	box-shadow: 0 1px 2px rgba(179, 38, 30, .18);
}

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

	.bt-cmp__sacar:hover,
	.bt-cmp__sacar:focus-visible {
		transform: translateX(-50%);
	}
}

/* ---------- veredicto ---------- */

/* Misma idea que el comparador de invierno.la: antes de la tabla, un panel que
   dice quien gana y por que. La tabla sigue estando para el que quiera el
   detalle, pero la respuesta esta arriba. */
.bt-cmp__veredicto {
	background: linear-gradient(135deg, var(--bt-accent-dark) 0%, #0b1f6b 100%);
	color: #fff;
	border-radius: var(--bt-radius);
	padding: 22px 24px 24px;
	margin: 0 0 24px;
}

.bt-cmp__veredicto--empate {
	background: linear-gradient(135deg, #2b3f47 0%, #16232a 100%);
}

.bt-cmp__veredicto-rotulo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

.bt-cmp__veredicto-rotulo b {
	background: #fff;
	color: var(--bt-accent-dark);
	padding: 3px 11px;
	border-radius: 999px;
	letter-spacing: .02em;
}

.bt-cmp__veredicto-nombre {
	margin: 10px 0 12px;
	font-size: clamp(18px, 2.4vw, 23px);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.02em;
	color: #fff;
	overflow-wrap: anywhere;
}

.bt-cmp__razones {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bt-cmp__razones li {
	font-size: 13px;
	font-weight: 600;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	padding: 5px 12px;
	border-radius: 999px;
}

/* La tilde va por CSS: es decoracion, no texto que deba leer un lector de
   pantalla ni copiarse al seleccionar. */
.bt-cmp__razones li::before {
	content: "✓ ";
}

.bt-cmp__veredicto-otro {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .75);
}

.bt-cmp__veredicto-otro b {
	color: #fff;
}


/* ---------- buscador de modelos ---------- */

/* El campo lo crea comparar.js leyendo los <option> que ya estan en la pagina.
   Sin ese archivo no existe nada de esto y quedan los desplegables, que son los
   que de verdad llevan el valor del formulario: por eso el select no se borra,
   se esconde. */
.bt-busca {
	/* `--bt-surface` y `--bt-radius` estan declarados sobre `.bt-cmp`, y este
	   componente tambien se usa en la barra lateral, que esta fuera de ese
	   contenedor: ahi las variables no existian y la lista salia con fondo
	   transparente, con su texto mezclado con el boton de abajo. Los tokens
	   que necesita los declara el componente. */
	--bt-busca-fondo: #ffffff;
	--bt-busca-radio: 12px;
	position: relative;
	min-width: 0;
}

/* El desplegable se esconde del todo, no "visualmente": un campo oculto de la
   forma clasica —posicionado y de 1 px— seguia estirando el documento, porque
   `.bt-cmp__campo select` le devolvia el `width:100%` y en un elemento
   posicionado ese 100% es el de la pagina, no el del parrafo que lo contiene.
   Un `display:none` no cambia nada del formulario: los campos ocultos asi se
   envian igual (lo que no se envia es lo deshabilitado), y este select ya no
   recibe foco ni lo anuncia el lector de pantalla. */
select.bt-busca__oculto {
	display: none;
}

.bt-busca__campo {
	width: 100%;
	max-width: 100%;
	/* Astra le clava height:40px a los campos: con el relleno propio el texto
	   no entra y queda cortado por abajo. */
	height: auto;
	padding: 11px 12px;
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-sm);
	background: var(--bt-busca-fondo);
	color: var(--bt-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.3;
}

.bt-busca__campo:focus {
	outline: none;
	border-color: var(--bt-accent);
	box-shadow: 0 0 0 3px rgba(0, 102, 255, .15);
}

/* Cuando se quiso comparar sin elegir modelo. */
.bt-busca.is-vacio .bt-busca__campo {
	border-color: #c62828;
	box-shadow: 0 0 0 3px rgba(198, 40, 40, .12);
}

.bt-busca__lista {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 4px;
	background: var(--bt-busca-fondo);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-busca-radio);
	box-shadow: 0 12px 28px rgba(16, 29, 66, .16);
}

.bt-busca__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 8px 10px;
	border-radius: var(--bt-radius-sm);
	cursor: pointer;
	line-height: 1.3;
}

.bt-busca__item.is-activo,
.bt-busca__item:hover {
	background: var(--bt-accent-light);
}

.bt-busca__modelo {
	font-size: 14px;
	font-weight: 600;
	color: var(--bt-text);
	min-width: 0;
}

.bt-busca__marca {
	flex: 0 0 auto;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bt-muted);
}

.bt-busca__aviso {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: #c62828;
}

/* Vacio no ocupa lugar: el aviso solo existe cuando hay algo que avisar. */
.bt-busca__aviso:empty {
	display: none;
}

.bt-busca__nada,
.bt-busca__pista,
.bt-busca__mas {
	margin: 0;
	padding: 10px;
	font-size: 13px;
	color: var(--bt-muted);
	text-align: center;
	cursor: default;
}

.bt-busca__mas {
	border-top: 1px solid var(--bt-border);
}

.bt-busca__pista b {
	font-weight: 600;
	color: var(--bt-text);
}

/* En la barra lateral el campo es mas chico, como el resto de la columna. */
.bt-aside .bt-busca__campo {
	padding: 10px 12px;
	border-color: var(--bt-aside-borde, #dde4f3);
	border-radius: 8px;
	font-size: 14px;
}

.bt-aside .bt-busca__lista {
	max-height: 280px;
}
/* ---------- tabla ---------- */

/* La tabla es lo unico que puede pasarse de ancho en un telefono: se desplaza
   sola en vez de empujar la pagina. */
.bt-cmp__tabla-caja {
	overflow-x: auto;
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	background: var(--bt-surface);
}

.bt-cmp__tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

/* Cuatro columnas no entran en un telefono: antes de apretarlas hasta que
   "Almacenamiento" se parta en cuatro lineas, la tabla se desplaza. El numero
   esta medido: 560 px es lo mas ancha que puede ser sin sacarle scroll a la
   columna mas angosta que tiene en escritorio (567 px, a 922 de pantalla). */
.bt-cmp__tabla--tres {
	min-width: 560px;
}

.bt-cmp__caption {
	caption-side: bottom;
	padding: 12px 16px;
	font-size: 13px;
	color: var(--bt-muted);
	text-align: left;
}

.bt-cmp__tabla th,
.bt-cmp__tabla td {
	padding: 11px 14px;
	text-align: center;
	border-bottom: 1px solid var(--bt-border);
}

/* Cabecera de bloque: la tabla pasa de ocho filas a veintiuna y sin cortes se
   lee como una lista larga. */
.bt-cmp__grupo th {
	padding: 14px 12px 8px;
	background: var(--bt-surface-2);
	color: var(--bt-muted);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
}

.bt-cmp__tabla tbody tr:first-child th {
	padding-top: 10px;
}

.bt-cmp__tabla thead th {
	font-size: 13px;
	background: var(--bt-surface-2);
}

.bt-cmp__tabla tbody th {
	text-align: left;
	font-weight: 600;
	white-space: nowrap;
	background: var(--bt-surface-2);
}

.bt-cmp__tabla tbody tr:last-child th,
.bt-cmp__tabla tbody tr:last-child td {
	border-bottom: 0;
}

.bt-cmp__gana {
	background: var(--bt-gana-fondo);
	color: var(--bt-gana);
	font-weight: 700;
}

@media (min-width: 560px) {
	.bt-cmp__duelos {
		grid-template-columns: repeat(2, 1fr);
	}

	.bt-cmp__equipos--tres {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 720px) {
	.bt-cmp__duelos {
		grid-template-columns: repeat(3, 1fr);
	}

	.bt-cmp__form {
		grid-template-columns: 1fr auto 1fr auto;
	}

	.bt-cmp__vs {
		display: block;
	}

	.bt-cmp__boton {
		width: auto;
	}
}

/* Entre 922 y 1199 px, si la barra lateral esta puesta, se lleva 300 px y la
   columna del comparador queda en unos 550: ahi los duelos de a tres no entran
   —cada uno necesita 230 px para las dos fotos y el VS— y el formulario en una
   sola linea corta los nombres. Va contra la clase del body y no contra el
   ancho a secas porque la misma pantalla, con tres equipos, no tiene barra y
   entonces si le sobra lugar. */
@media (min-width: 922px) and (max-width: 1199px) {
	body.bt-con-barra .bt-cmp__duelos {
		grid-template-columns: repeat(2, 1fr);
	}

	body.bt-con-barra .bt-cmp__form {
		grid-template-columns: 1fr;
	}

	body.bt-con-barra .bt-cmp__vs {
		display: none;
	}

	body.bt-con-barra .bt-cmp__boton {
		width: 100%;
	}
}


/* ---------- cuando no alcanza para un veredicto ---------- */

/* Gris y no azul ni verde: no es un resultado, es la ausencia de uno. */
.bt-cmp__veredicto--sin {
	background: linear-gradient(135deg, #4b5563 0%, #2f3640 100%);
}

/* ---------- nota por bloque ---------- */

/* El veredicto dice quien gana; esto dice por que, bloque por bloque y con el
   peso a la vista. Es la parte que vuelve auditable el numero de arriba: sin
   esto, un "73 sobre 100" es un numero que hay que creer. */
.bt-cmp__bloques {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	box-shadow: 0 1px 2px rgba(16, 29, 66, .05), 0 8px 20px rgba(16, 29, 66, .06);
	padding: 20px 22px 22px;
	margin: 0 0 24px;
}

.bt-cmp__bloques-title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
}

.bt-cmp__bloques-bajada {
	margin: 0 0 18px;
	max-width: 70ch;
	font-size: 13px;
	line-height: 1.55;
	color: var(--bt-muted);
}

.bt-cmp__bloques-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

@media (min-width: 720px) {
	.bt-cmp__bloques-lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 28px;
	}
}

.bt-cmp__bloque-rotulo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 7px;
	font-size: 13px;
	font-weight: 700;
}

.bt-cmp__bloque-peso {
	font-size: 11px;
	font-weight: 600;
	color: var(--bt-muted);
}

/* Nombre, barra y numero en una linea. El nombre se corta antes que la barra:
   la barra es el dato. */
.bt-cmp__barra {
	display: grid;
	grid-template-columns: minmax(0, 8em) 1fr 2.4em;
	align-items: center;
	gap: 9px;
	margin: 0 0 5px;
	font-size: 12px;
	color: var(--bt-muted);
}

.bt-cmp__barra-nombre {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bt-cmp__barra-riel {
	height: 7px;
	border-radius: 999px;
	background: var(--bt-surface-2);
	overflow: hidden;
}

.bt-cmp__barra-relleno {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #c3cad8;
}

.bt-cmp__barra-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.bt-cmp__barra--gana {
	color: var(--bt-text);
	font-weight: 600;
}

.bt-cmp__barra--gana .bt-cmp__barra-relleno {
	background: var(--bt-gana);
}

/* En 320 px el nombre se come la barra, y la barra es el dato: ahi va mas
   corto y el numero pegado. */
@media (max-width: 479px) {
	.bt-cmp__barra {
		grid-template-columns: minmax(0, 5.6em) 1fr 2.2em;
		gap: 7px;
	}
}

.bt-cmp__bloques-nota {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--bt-border);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--bt-muted);
}

/* El ancho de la barra sale de una clase y no de un style en el HTML: en este
   tema no se imprime CSS adentro del marcado. De a cinco puntos alcanza. */
.bt-cmp__barra-relleno--0 { width: 0%; }
.bt-cmp__barra-relleno--5 { width: 5%; }
.bt-cmp__barra-relleno--10 { width: 10%; }
.bt-cmp__barra-relleno--15 { width: 15%; }
.bt-cmp__barra-relleno--20 { width: 20%; }
.bt-cmp__barra-relleno--25 { width: 25%; }
.bt-cmp__barra-relleno--30 { width: 30%; }
.bt-cmp__barra-relleno--35 { width: 35%; }
.bt-cmp__barra-relleno--40 { width: 40%; }
.bt-cmp__barra-relleno--45 { width: 45%; }
.bt-cmp__barra-relleno--50 { width: 50%; }
.bt-cmp__barra-relleno--55 { width: 55%; }
.bt-cmp__barra-relleno--60 { width: 60%; }
.bt-cmp__barra-relleno--65 { width: 65%; }
.bt-cmp__barra-relleno--70 { width: 70%; }
.bt-cmp__barra-relleno--75 { width: 75%; }
.bt-cmp__barra-relleno--80 { width: 80%; }
.bt-cmp__barra-relleno--85 { width: 85%; }
.bt-cmp__barra-relleno--90 { width: 90%; }
.bt-cmp__barra-relleno--95 { width: 95%; }
.bt-cmp__barra-relleno--100 { width: 100%; }