/**
 * Mi Progreso — estilos v1 core. Scoped a .bb-progreso.
 * Tokens y estética alineados con la maqueta canónica
 * (06-app-progreso/diseno-cloud-design/mi-progreso-standalone.html).
 *
 * Paleta cálida BellBeasts (fondo crema, líneas suaves, tipografía Inter).
 *
 * NOTA: stylelint del proyecto exige prefijo bb- en todas las clases. Aquí
 * usamos nombres canónicos (.hero, .kpi, .week, .day, .cmp2…) porque están
 * scoped bajo `.bb-progreso` y replican 1:1 la maqueta canónica. Desactivamos
 * la regla en este archivo de forma explícita.
 */

/* stylelint-disable selector-class-pattern */

.bb-progreso {
	--bb-yellow: #facc15;
	--bb-yellow-soft: #fef3c7;
	--bb-yellow-warm: #f4b73b;
	--bb-ink: #0a0a0a;
	--bb-text: #141414;
	--bb-text-2: #4a4a48;

	/* #6f6f6a (antes #8a8a86): pasa el contraste AA 4.5:1 sobre crema —
	 * el público 40-60 con presbicia lo nota en cada label. */
	--bb-text-3: #6f6f6a;
	--bb-bg: #fdf8ea;
	--bb-bg-2: #f5f1e2;
	--bb-card: #fff;
	--bb-line: #e7e3d4;
	--bb-line-2: #efebde;
	--bb-hush: #f4f0e1;
	--bb-good: #15803d;
	--bb-good-bg: #f0fbf3;
	--bb-bad: #b91c1c;
	--bb-bad-bg: #fef4f3;
	--bb-radius: 18px;
	--bb-radius-sm: 12px;
	--bb-radius-xs: 8px;

	/* Escala tipográfica (8 pasos). Los componentes nuevos la usan SIEMPRE;
	 * la migración del CSS histórico es progresiva. */
	--bb-fs-1: 11px;
	--bb-fs-2: 12.5px;
	--bb-fs-3: 14px;
	--bb-fs-4: 16px;
	--bb-fs-5: 22px;
	--bb-fs-6: 28px;
	--bb-fs-7: 40px;
	--bb-fs-8: 64px;

	/* Familia de la card oscura: una sola receta de texto/línea/sombra para
	 * que la próxima card negra no se invente la suya. */
	--bb-ink-text: #f5f1e2;
	--bb-ink-text-2: rgb(255 255 255 / 65%);
	--bb-ink-text-3: rgb(255 255 255 / 50%);
	--bb-ink-line: rgb(255 255 255 / 8%);
	--bb-shadow-dark:
		0 1px 0 rgb(20 20 20 / 4%), 0 12px 28px -16px rgb(20 20 20 / 35%);
	--bb-shadow-card: 0 1px 0 rgb(20 20 20 / 2%), 0 1px 2px rgb(20 20 20 / 3%);
	--bb-shadow-soft:
		0 1px 0 rgb(20 20 20 / 2%), 0 8px 24px -8px rgb(20 20 20 / 6%);
	--bb-font: "Inter", system-ui, -apple-system, helvetica, arial, sans-serif;

	position: relative;

	/* Full-bleed: rompe el ancho del bloque WP para pintar el fondo crema
	 * de borde a borde (patrón canónico de BellBeasts en bloques wp:html).
	 * border-box explícito: si el tema no resetea box-sizing, 100vw +
	 * padding desbordaría el viewport y desplazaría todas las cards. */
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;

	/* !important: los temas de bloques (p.ej. el del WP local) fuerzan
	 * margin auto !important en los hijos de entry-content y rompen el
	 * full-bleed (el bloque queda desplazado y las cards se cortan). */
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;

	/* clip (no hidden): recorta el orbe decorativo que asoma 120px por la
	 * derecha SIN convertir el bloque en scroll container (hidden rompería
	 * el position:sticky de las chips). */
	overflow-x: clip;
	padding: 56px 16px 80px;
	font-family: var(--bb-font);
	font-weight: 400;
	color: var(--bb-text);
	background: var(--bb-bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
}

@media (width >= 600px) {
	.bb-progreso {
		padding: 80px 32px 120px;
	}
}

/* El contenido se centra dentro del fondo full-bleed. */
.bb-progreso .stack,
.bb-progreso .bb-skeleton,
.bb-progreso .bb-state {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

.bb-progreso .num {
	font-feature-settings: "tnum", "ss01", "cv11", "zero";
}

.bb-progreso .hl {
	background-image: linear-gradient(
		180deg,
		transparent 0 56%,
		var(--bb-yellow) 56% 95%,
		transparent 95%
	);
	padding: 0 2px;
	border-radius: 1px;
}

.bb-progreso .stack > * + * {
	margin-top: 20px;
}

@media (width >= 600px) {
	.bb-progreso .stack > * + * {
		margin-top: 28px;
	}
}

/* ---- Skeleton ---- */
.bb-progreso .bb-skeleton {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bb-progreso .bb-skeleton__card {
	min-height: 160px;
	background: var(--bb-bg-2);
	border-radius: var(--bb-radius);
	animation: bb-pulse 1.4s ease-in-out infinite;
}

@keyframes bb-pulse {
	0%,
	100% {
		opacity: 0.5;
	}

	50% {
		opacity: 0.85;
	}
}

/* Fade-in escalonado de las secciones del stack al cargar. */
@keyframes bb-fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.bb-progreso .stack > * {
	animation: bb-fade-up 0.5s ease-out backwards;

	/* La cascada la alimenta renderFull con style="--i:N". El esquema viejo
	 * de nth-child(1..10) se rompía a partir del hijo 11: las últimas
	 * secciones aparecían ANTES que las del medio. */
	animation-delay: calc(var(--bb-i, 0) * 60ms);
}

/* Re-visitas del mismo día: la página es una consulta, no un estreno. */
.bb-progreso.bb-no-intro .stack > * {
	animation: none;
}

.bb-progreso.bb-no-intro .dial__bar {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.bb-progreso .stack > * {
		animation: none;
	}
}

/* ---- Estados (teaser, expired, error, onboarding) ---- */
.bb-progreso .bb-state {
	text-align: center;
	padding: 48px 24px;
	background: var(--bb-card);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-card);
}

.bb-progreso .bb-state h2 {
	font-size: var(--bb-fs-5);
	font-weight: 500;
	letter-spacing: -0.015em;
	margin: 0 0 12px;
}

.bb-progreso .bb-state p {
	color: var(--bb-text-2);
	margin: 0 0 24px;
	font-size: var(--bb-fs-3);
}

.bb-progreso .bb-cta {
	display: inline-block;
	padding: 12px 22px;
	background: var(--bb-ink);
	color: var(--bb-yellow);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 500;
	font-size: var(--bb-fs-3);
	letter-spacing: -0.005em;
	box-shadow: 0 8px 16px -8px rgb(250 204 21 / 60%);
	transition:
		transform 0.2s,
		box-shadow 0.2s;
}

.bb-progreso .bb-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 22px -8px rgb(250 204 21 / 70%);
}

/* ---- Kicker (línea decorativa) ---- */
.bb-progreso .kicker {
	font-size: var(--bb-fs-1);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bb-text-3);
	margin: 0 0 22px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.bb-progreso .kicker::before {
	content: "";
	width: 14px;
	height: 1px;
	background: var(--bb-text-3);
	display: inline-block;
}

/* ---- Card primitive ---- */
.bb-progreso .card {
	background: var(--bb-card);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	padding: 26px;
	box-shadow: var(--bb-shadow-card);
}

@media (width >= 600px) {
	.bb-progreso .card {
		padding: 36px;
	}
}

.bb-progreso .section-h {
	font-size: var(--bb-fs-5);
	font-weight: 600;
	letter-spacing: -0.022em;
	margin: 0 0 6px;
	color: var(--bb-text);
}

.bb-progreso .section-sub {
	font-size: var(--bb-fs-3);
	font-weight: 400;
	color: var(--bb-text-2);
	margin: 0;
}

/* ---- HERO ---- */
.bb-progreso .hero {
	text-align: center;
	margin-bottom: 28px;
}

.bb-progreso .hero .hello {
	font-size: var(--bb-fs-4);
	color: var(--bb-text-2);
	font-weight: 400;
	margin: 0 0 6px;
}

.bb-progreso .hero-name {
	display: inline-flex;
	align-items: baseline;
	gap: 14px;
	font-size: 48px; /* display del onboarding: escala propia con breakpoint */
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0 auto 18px;
	justify-content: center;
}

@media (width >= 600px) {
	.bb-progreso .hero-name {
		font-size: 68px; /* display ≥600px: por encima del tope de la escala (fs-8) */
	}
}

.bb-progreso .hero-name .wave {
	font-size: 0.6em;
	transform: translateY(-2px);
	display: inline-block;
}

.bb-progreso .hero-name__brush {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(
		180deg,
		transparent 0 72%,
		var(--bb-yellow) 72% 92%,
		transparent 92%
	);
	padding: 0 6px;
	border-radius: 1px;
}

.bb-progreso .hero-lead {
	font-size: var(--bb-fs-4);
	line-height: 1.6;
	color: var(--bb-text-2);
	max-width: 56ch;
	margin: 0 auto 36px;
	text-wrap: pretty;
}

.bb-progreso .hero-lead strong {
	color: var(--bb-text);
	font-weight: 500;
}

.bb-progreso .bb-index__cmp-l .info-trigger {
	width: 14px;
	height: 14px;
	font-size: 9px; /* glifo dentro de círculo de 14px: fs-1 desbordaría */
	background: rgb(255 255 255 / 10%);
}

/* ---- Racha semanal ---- */
.bb-progreso .racha-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 6px;
}

.bb-progreso .racha-head .pill {
	background: linear-gradient(180deg, #fffaef, #fff3d4);
	border: 1px solid #f4d76b;
	color: #6b4516;
	border-radius: 999px;
	padding: 4px 12px 4px 9px;
	font-size: var(--bb-fs-2);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%);
}

.bb-progreso .racha-head .pill svg {
	width: 12px;
	height: 12px;
}

.bb-progreso .weeks {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 10px;
	margin: 28px 0 22px;
}

@media (width >= 600px) {
	.bb-progreso .weeks {
		gap: 14px;
	}
}

/* En desktop limitamos el ancho del grid para que las cells no se
 * inflen a 130px+. La maqueta canónica también las mantiene compactas. */
@media (width >= 720px) {
	.bb-progreso .weeks {
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
		gap: 16px;
	}
}

/* Cada semana = mini-anillo de progreso (se completa con 4 entrenos),
 * mismo lenguaje visual que el dial del Index. */
.bb-progreso .week {
	aspect-ratio: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bb-progreso .week svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.bb-progreso .week__track {
	fill: var(--bb-card);
	stroke: var(--bb-line);
	stroke-width: 3.5;
}

.bb-progreso .week__bar {
	fill: none;
	stroke-width: 3.5;
	stroke-linecap: round;
}

.bb-progreso .week__n {
	position: relative;
	font-size: var(--bb-fs-4);
	font-weight: 700;
	color: var(--bb-text-3);
	font-feature-settings: "tnum", "ss01";
	line-height: 1;
}

/* Buena (≥4): anillo y número en verde, relleno suave. */
.bb-progreso .week.good .week__track {
	fill: var(--bb-good-bg);
}

.bb-progreso .week.good .week__bar {
	stroke: var(--bb-good);
}

.bb-progreso .week.good .week__n {
	color: var(--bb-good);
}

/* Comodín: anillo ámbar + estrella. */
.bb-progreso .week.comodin .week__track {
	fill: var(--bb-yellow-soft);
}

.bb-progreso .week.comodin .week__bar {
	stroke: var(--bb-yellow-warm);
}

.bb-progreso .week.comodin .week__n {
	color: #6b4516;
}

.bb-progreso .week__star {
	position: absolute;
	top: -4px;
	right: -2px;
	font-size: var(--bb-fs-2);
	color: var(--bb-yellow-warm);
	line-height: 1;
}

/* Semana en curso: arco tinta (aún no es buena ni mala). */
.bb-progreso .week.pending .week__bar {
	stroke: var(--bb-ink);
}

.bb-progreso .week.pending .week__n {
	color: var(--bb-text);
}

/* Fallida: arco gris, queda el hueco a la vista. */
.bb-progreso .week.miss .week__bar {
	stroke: #d4cfb9;
}

.bb-progreso .week .wl {
	position: absolute;
	bottom: -22px;
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--bb-fs-1);
	font-weight: 500;
	color: var(--bb-text-3);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.bb-progreso .week.current .wl {
	color: var(--bb-text);
	font-weight: 600;
}

.bb-progreso .week.current .week__track {
	stroke: var(--bb-text-2);
}

.bb-progreso .comodin-row {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--bb-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.bb-progreso .comodin-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: var(--bb-fs-2);
	font-weight: 500;
}

.bb-progreso .comodin-pill--ok {
	background: var(--bb-yellow-soft);
	color: var(--bb-text);
}

.bb-progreso .comodin-pill--usado {
	background: var(--bb-hush);
	color: var(--bb-text-3);
}

.bb-progreso .comodin-pill .ico-comodin {
	color: var(--bb-yellow-warm);
	font-size: 1.1em;
}

.bb-progreso .comodin-help {
	font-size: var(--bb-fs-2);
	color: var(--bb-text-3);
	line-height: 1.4;
	flex: 1 1 200px;
}

/* ---- Calendario ---- */
.bb-progreso .cal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

/* Cabecera del calendario: flechas ← / → flanquean al label del mes.
 * El conjunto se mantiene como una unidad (cal-title) para que el flex
 * del padre lo trate como bloque junto a cal-stats. */
.bb-progreso .cal-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.bb-progreso .cal-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--bb-hush);
	color: var(--bb-text);
	border: 0;
	font-size: var(--bb-fs-4);
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition:
		background 0.15s ease,
		color 0.15s ease,
		transform 0.1s ease;
	-webkit-tap-highlight-color: transparent;
}

.bb-progreso .cal-nav-btn:hover:not(:disabled) {
	background: var(--bb-ink);
	color: var(--bb-yellow);
}

.bb-progreso .cal-nav-btn:active:not(:disabled) {
	transform: scale(0.95);
}

.bb-progreso .cal-nav-btn:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 2px rgb(250 204 21 / 45%);
}

.bb-progreso .cal-nav-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.bb-progreso .cal-card--loading {
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

.bb-progreso .cal-head .month {
	font-size: var(--bb-fs-5);
	font-weight: 500;
	letter-spacing: -0.01em;
	text-transform: capitalize;
}

.bb-progreso .cal-head .month .yr {
	color: var(--bb-text-3);
	font-weight: 400;
}

.bb-progreso .cal-stats {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	font-size: var(--bb-fs-2);
	color: var(--bb-text-3);
}

.bb-progreso .cal-stats .s b {
	color: var(--bb-text);
	font-weight: 500;
	font-size: var(--bb-fs-3);
}

.bb-progreso .cal-cmp-pill {
	font-size: var(--bb-fs-2);
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 3px 9px;
	border-radius: 999px;
	font-feature-settings: "tnum";
}

.bb-progreso .cal-cmp-pill--up {
	background: var(--bb-good-bg);
	color: var(--bb-good);
}

.bb-progreso .cal-cmp-pill--down {
	background: var(--bb-bad-bg);
	color: var(--bb-bad);
}

.bb-progreso .cal-cmp-pill--neutral {
	background: var(--bb-hush);
	color: var(--bb-text-3);
}

.bb-progreso .cal {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-top: 18px;
}

@media (width >= 600px) {
	.bb-progreso .cal {
		gap: 6px;
	}
}

/* En desktop el calendario tampoco necesita ocupar todo el ancho:
 * limitamos para que las cells de día queden alrededor de 48-56px
 * en lugar de los 130px+ que pillarían en un grid de 1080px ancho. */
@media (width >= 720px) {
	.bb-progreso .cal {
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
		gap: 8px;
	}
}

.bb-progreso .cal .dow {
	font-size: var(--bb-fs-1);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-text-3);
	text-align: center;
	padding: 6px 0 10px;
	border-bottom: 1px solid var(--bb-line-2);
	margin-bottom: 4px;
}

.bb-progreso .day {
	aspect-ratio: 1 / 1;
	max-height: 44px;
	border-radius: var(--bb-radius-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--bb-fs-2);
	font-weight: 500;
	font-feature-settings: "tnum";
	color: var(--bb-text-3);
	background: transparent;
	position: relative;
	transition:
		background 0.15s,
		transform 0.15s;
}

@media (width >= 600px) {
	.bb-progreso .day {
		font-size: var(--bb-fs-3);
		border-radius: var(--bb-radius-xs);
		max-height: 52px;
	}
}

.bb-progreso .day.empty {
	color: var(--bb-text-3);
	opacity: 0.45;
	font-weight: 400;
}

.bb-progreso .day.done {
	background: var(--bb-yellow);
	color: var(--bb-ink);
	font-weight: 600;
	box-shadow: inset 0 0 0 1px rgb(10 10 10 / 6%);
}

.bb-progreso .day.done:hover {
	transform: translateY(-1px);
}

.bb-progreso .day.today {
	outline: 1.5px solid var(--bb-ink);
	outline-offset: 1px;
}

.bb-progreso .day.today::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--bb-ink);
}

.bb-progreso .cal-legend {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--bb-line-2);
	font-size: var(--bb-fs-1);
	color: var(--bb-text-3);
}

.bb-progreso .cal-legend .lg {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bb-progreso .cal-legend .sw {
	width: 12px;
	height: 12px;
	border-radius: 4px;
	background: var(--bb-yellow);
	display: inline-block;
	vertical-align: middle;
}

.bb-progreso .cal-legend .sw.empty {
	background: var(--bb-hush);
}

.bb-progreso .cal-legend .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bb-ink);
	display: inline-block;
}

/* ---- Heatmap anual ---- */
.bb-progreso .heatmap-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.bb-progreso .heatmap-head .big {
	font-size: var(--bb-fs-5);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.bb-progreso .heatmap-head .big .num {
	color: var(--bb-text);
	font-weight: 600;
	background-image: linear-gradient(
		180deg,
		transparent 0 56%,
		var(--bb-yellow) 56% 95%,
		transparent 95%
	);
	padding: 0 4px;
	margin-right: 4px;
}

/* Heatmap "bloque homogéneo": 2 filas (ene-jun / jul-dic). Cada fila tiene
 * los 6 meses pegados sin gap entre ellos para que el ojo vea continuidad.
 * Las cells dentro de cada mes mantienen su propio gap pequeño para que
 * cada día se distinga. */
.bb-progreso .hm-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.bb-progreso .hm-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
}

.bb-progreso .hm-month {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	padding: 0 4px;
	border-right: 1px solid rgb(20 20 20 / 4%);
}

.bb-progreso .hm-month:last-child {
	border-right: 0;
}

@media (width >= 600px) {
	.bb-progreso .hm-month {
		padding: 0 8px;
	}
}

/* Grid GitHub-style real: 7 filas (Lun..Dom) × 6 cols (semanas del mes).
 * Items se colocan column-major; cells de días fuera del mes son hm-cell--empty
 * (invisibles para que el ojo no las cuente como días sin entrenar). */
.bb-progreso .hm-grid {
	display: grid;
	grid-template-rows: repeat(7, 1fr);
	grid-template-columns: repeat(6, 1fr);
	grid-auto-flow: column;
	gap: 2px;
	aspect-ratio: 6 / 7;
}

.bb-progreso .hm-cell {
	background: var(--bb-line-2);
	border-radius: 2px;
	transition:
		background 0.15s ease,
		transform 0.15s ease;
}

.bb-progreso .hm-cell.on {
	background: var(--bb-yellow);
	box-shadow: inset 0 0 0 0.5px rgb(244 183 59 / 35%);
}

.bb-progreso .hm-cell--empty {
	background: transparent;
}

.bb-progreso .hm-label {
	font-size: var(--bb-fs-1);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--bb-text-3);
	text-align: center;
	text-transform: uppercase;
}

.bb-progreso .hm-month.current .hm-label {
	color: var(--bb-text);
	font-weight: 600;
}

.bb-progreso .hm-month.current .hm-grid {
	border-radius: 4px;
	box-shadow: 0 0 0 1.5px var(--bb-ink);
	padding: 3px;
}

.bb-progreso .legend {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--bb-fs-1);
	color: var(--bb-text-3);
	margin-top: 16px;
}

.bb-progreso .legend .lg {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bb-progreso .legend .sw {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: var(--bb-line-2);
	display: inline-block;
}

.bb-progreso .legend .sw.on {
	background: var(--bb-yellow);
}

/* ---- Mes en cifras (volumen) ---- */

.bb-progreso .vol {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin-top: 18px;
}

@media (width >= 600px) {
	.bb-progreso .vol {
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
	}
}

.bb-progreso .vol-item {
	padding: 18px 0;
	border-bottom: 1px solid var(--bb-line);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

@media (width >= 600px) {
	.bb-progreso .vol-item {
		padding: 6px 28px;
		border-bottom: none;
		border-right: 1px solid var(--bb-line);
	}

	.bb-progreso .vol-item:last-child {
		border-right: none;
		padding-right: 0;
	}

	.bb-progreso .vol-item:first-child {
		padding-left: 0;
	}
}

.bb-progreso .vol-item .v {
	font-size: var(--bb-fs-6);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1;
	font-feature-settings: "tnum", "ss01", "zero";
}

@media (width >= 600px) {
	.bb-progreso .vol-item .v {
		font-size: var(--bb-fs-7);
	}
}

/* Lead = headline number del mes (Volumen). Más grande que los demás. */
.bb-progreso .vol-item--lead .v {
	font-size: var(--bb-fs-7);
	font-weight: 400;
	letter-spacing: -0.04em;
	color: var(--bb-text);
}

@media (width >= 600px) {
	.bb-progreso .vol-item--lead .v {
		font-size: var(--bb-fs-8);
	}
}

.bb-progreso .vol-item--lead .l {
	font-weight: 600;
}

.bb-progreso .vol-item .v .u {
	font-size: 0.36em;
	font-weight: 400;
	color: var(--bb-text-3);
	margin-left: 4px;
}

.bb-progreso .vol-item .l {
	font-size: var(--bb-fs-2);
	color: var(--bb-text-3);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 500;
}

/* ---- Récords personales ---- */
.bb-progreso .pr-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.bb-progreso .pr-max-pill {
	flex-shrink: 0;
	font-size: var(--bb-fs-2);
	font-weight: 500;
	color: var(--bb-text-2);
	background: var(--bb-hush);
	border-radius: 999px;
	padding: 5px 13px;
}

.bb-progreso .pr-max-pill b {
	color: var(--bb-text);
	font-weight: 700;
	font-feature-settings: "tnum";
}

.bb-progreso .pr-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 18px;
}

@media (width >= 600px) {
	.bb-progreso .pr-grid {
		gap: 14px;
	}
}

@media (width >= 900px) {
	.bb-progreso .pr-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bb-progreso .pr {
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-sm);
	padding: 18px 20px;
	background: var(--bb-card);
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.bb-progreso .pr:hover {
	transform: translateY(-1px);
	box-shadow: var(--bb-shadow-soft);
	border-color: #d9d4c0;
}

.bb-progreso .pr .top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}

.bb-progreso .pr .pr-badge {
	font-size: var(--bb-fs-1);
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--bb-text-3);
	border: 1px solid var(--bb-line);
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--bb-card);
}

.bb-progreso .pr .name {
	font-size: var(--bb-fs-1);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-text-3);
}

.bb-progreso .pr .val {
	font-size: var(--bb-fs-5);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.bb-progreso .pr .val .x {
	color: var(--bb-text-3);
	font-weight: 400;
	margin: 0 4px;
}

.bb-progreso .pr .date {
	font-size: var(--bb-fs-2);
	color: var(--bb-text-3);
	margin-top: 2px;
}

/* Récord anterior y "hace cuánto" debajo del récord. */
.bb-progreso .pr .pr-prev {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dashed var(--bb-line);
	font-size: var(--bb-fs-2);
	color: var(--bb-text-2);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.bb-progreso .pr .pr-prev--empty {
	color: var(--bb-text-3);
	font-style: italic;
}

.bb-progreso .pr .pr-prev-text {
	flex: 1 1 auto;
	min-width: 0;
}

.bb-progreso .pr .pr-delta {
	font-size: var(--bb-fs-1);
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	letter-spacing: 0.01em;
	font-feature-settings: "tnum";
}

.bb-progreso .pr .pr-delta--up {
	background: var(--bb-good-bg);
	color: var(--bb-good);
}

.bb-progreso .pr .pr-since {
	color: var(--bb-text-3);
}

/* ---- Arsenal kettlebells ---- */
.bb-progreso .kb-arsenal {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 28px;
}

@media (width <= 599px) {
	.bb-progreso .kb-arsenal {
		gap: 8px;
	}
}

.bb-progreso .kb-slot {
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-sm);
	padding: 18px 12px 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: var(--bb-card);
	position: relative;
	text-align: center;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.bb-progreso .kb-slot:hover {
	transform: translateY(-1px);
	box-shadow: var(--bb-shadow-soft);
}

.bb-progreso .kb-slot.current {
	background: #fffdf2;
	border-color: #fcd34d;
}

.bb-progreso .kb-icons {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	min-height: 44px;
}

.bb-progreso .kb-icons svg {
	color: var(--bb-text-2);
	display: block;
}

.bb-progreso .kb-slot.current .kb-icons svg {
	color: var(--bb-ink);
}

.bb-progreso .kb-count {
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--bb-fs-1);
	font-weight: 600;
	background: var(--bb-ink);
	color: white;
	padding: 3px 8px;
	border-radius: 999px;
	letter-spacing: 0.05em;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
	z-index: 2;
}

.bb-progreso .kb-slot.current .kb-count {
	background: var(--bb-yellow);
	color: var(--bb-ink);
}

.bb-progreso .kb-wt {
	font-size: var(--bb-fs-4);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--bb-text);
	margin-top: 4px;
}

.bb-progreso .kb-when {
	font-size: var(--bb-fs-1);
	color: var(--bb-text-3);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bb-progreso .kb-slot.current .kb-when {
	color: #713f12;
	font-weight: 500;
}

/* "Siguiente kettlebell sugerida" — slot ghost que invita a subir de peso. */
.bb-progreso .kb-slot--next {
	background: transparent;
	border: 1.5px dashed var(--bb-line);
	box-shadow: none;
	color: var(--bb-text-3);
}

.bb-progreso .kb-slot--next:hover {
	border-color: var(--bb-yellow-warm);
	color: var(--bb-text-2);
	transform: translateY(-1px);
}

.bb-progreso .kb-slot--next .kb-icons {
	color: var(--bb-text-3);
	opacity: 0.55;
}

.bb-progreso .kb-slot--next .kb-wt {
	color: var(--bb-text-2);
}

.bb-progreso .kb-slot--next .kb-when {
	color: var(--bb-text-3);
}

.bb-progreso .kb-count--next {
	background: var(--bb-ink);
	color: var(--bb-yellow);
}

/* ---- Comparativa multi-ventana (sección Comparativa con tabs) ---- */
.bb-progreso .cmp-card {
	padding-top: 24px;
}

.bb-progreso .cmp-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 4px;
}

@media (width >= 720px) {
	.bb-progreso .cmp-head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}
}

/* Segmented control único del sistema: track crema con pill activa
 * tinta+amarillo. Lo comparten la comparativa (cmp-tabs) y la ventana
 * 30D/60D del Index (ibbe-pills); semántica aria-pressed en ambos. */
.bb-progreso .cmp-tabs,
.bb-progreso .ibbe-pills,
.bb-progreso .calhm-tabs {
	display: inline-flex;
	background: var(--bb-hush);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
	align-items: center;
}

.bb-progreso .cmp-tabs {
	overflow-x: auto;
	max-width: 100%;
}

/* ---- Card única Calendario (vistas Mes/Año) ---- */
.bb-progreso .calhm-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.bb-progreso .calhm-head .section-h {
	margin: 0;
}

.bb-progreso .calhm-view {
	display: none;
}

.bb-progreso .calhm-view.is-active {
	display: block;
}

/* ---- Card única Rendimiento (snapshot + comparativa) ---- */
.bb-progreso .cmp-title {
	font-size: var(--bb-fs-4);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--bb-text);
}

.bb-progreso .cmp-divider {
	border: 0;
	border-top: 1px solid var(--bb-line-2);
	margin: 24px 0 20px;
}

/* Wrapper que agrupa el botón tab con su icono ⓘ, para que el popover
 * pueda posicionarse relativo al pareja botón+icono. */
.bb-progreso .cmp-tab-wrap {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	position: relative;
	padding-right: 6px;
}

.bb-progreso .cmp-tab-wrap .info-trigger {
	width: 14px;
	height: 14px;
	font-size: 9px; /* glifo dentro de círculo de 14px: fs-1 desbordaría */
	background: rgb(20 20 20 / 8%);
	color: var(--bb-text-2);
}

.bb-progreso .cmp-tab-wrap .info-trigger:hover {
	background: var(--bb-yellow);
	color: var(--bb-ink);
}

.bb-progreso .cmp-tab,
.bb-progreso .ibbe-pill,
.bb-progreso .calhm-tab {
	border: 0;
	background: transparent;
	color: var(--bb-text-2);
	font-family: inherit;
	font-size: var(--bb-fs-2);
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 6px 13px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background 0.2s ease,
		color 0.2s ease;
}

.bb-progreso .cmp-tab:hover,
.bb-progreso .ibbe-pill:hover,
.bb-progreso .calhm-tab:hover {
	color: var(--bb-text);
}

.bb-progreso .cmp-tab.is-active,
.bb-progreso .ibbe-pill--active,
.bb-progreso .calhm-tab.is-active {
	background: var(--bb-ink);
	color: var(--bb-yellow);
	font-weight: 600;
}

.bb-progreso .cmp-panels {
	display: grid;
	gap: 22px;
	margin-top: 18px;
}

.bb-progreso .cmp-panel {
	display: none;
	grid-template-columns: 1fr;
	gap: 22px;
}

@media (width >= 720px) {
	.bb-progreso .cmp-panel {
		grid-template-columns: 1fr 1fr;
	}
}

.bb-progreso .cmp-panel.is-active {
	display: grid;
}

/* ---- Comparativa mes vs anterior ---- */
.bb-progreso .cmp2 {
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-sm);
	padding: 18px 18px 16px;
	background: rgb(255 255 255 / 55%);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.bb-progreso .cmp2:hover {
	transform: translateY(-1px);
	box-shadow: var(--bb-shadow-soft);
}

.bb-progreso .cmp2__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

.bb-progreso .cmp2__lab {
	font-size: var(--bb-fs-3);
	font-weight: 500;
	color: var(--bb-text);
	letter-spacing: -0.005em;
	line-height: 1.3;
	flex: 1;
	min-width: 0;
}

.bb-progreso .cmp2__delta {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	flex: 0 0 auto;
}

.bb-progreso .cmp2__delta--up {
	background: var(--bb-good-bg);
	color: var(--bb-good);
}

.bb-progreso .cmp2__delta--down {
	background: var(--bb-bad-bg);
	color: var(--bb-bad);
}

.bb-progreso .cmp2__delta--neutral {
	background: var(--bb-hush);
	color: var(--bb-text-3);
}

.bb-progreso .cmp2__delta-n {
	font-size: var(--bb-fs-4);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.bb-progreso .cmp2__delta-w {
	font-size: var(--bb-fs-1);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bb-progreso .cmp2__bars {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bb-progreso .cmp2__row {
	display: grid;
	grid-template-columns: 90px 1fr auto;
	gap: 12px;
	align-items: center;
}

@media (width >= 600px) {
	.bb-progreso .cmp2__row {
		grid-template-columns: 110px 1fr auto;
	}
}

.bb-progreso .cmp2__when {
	font-size: var(--bb-fs-1);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bb-text-3);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.bb-progreso .cmp2__row--current .cmp2__when {
	color: var(--bb-text);
}

.bb-progreso .cmp2__track {
	height: 8px;
	border-radius: 4px;
	background: var(--bb-hush);
	position: relative;
	overflow: hidden;
}

.bb-progreso .cmp2__fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	border-radius: 4px;
	transition: width 0.6s ease;
}

.bb-progreso .cmp2__fill--prev {
	background: #d4cfb9;
}

.bb-progreso .cmp2__fill--now {
	background: var(--bb-yellow);
	box-shadow: 0 0 0 1px rgb(234 179 8 / 25%) inset;
}

.bb-progreso .cmp2__val {
	font-size: var(--bb-fs-3);
	font-weight: 500;
	font-feature-settings: "tnum";
	text-align: right;
	min-width: 60px;
}

.bb-progreso .cmp2__val b {
	font-weight: 600;
}

/* ---- Variante "Comparativa con barras grandes" (Opción B / PDF) ---- */
.bb-progreso .cmp-card--big .cmp2 {
	border: 0;
	background: transparent;
	padding: 20px 0 6px;
}

.bb-progreso .cmp-card--big .cmp2 + .cmp2 {
	border-top: 1px solid var(--bb-line-2);
}

.bb-progreso .cmp-card--big .cmp2:hover {
	transform: none;
	box-shadow: none;
}

.bb-progreso .cmp-card--big .cmp2__lab {
	font-size: var(--bb-fs-4);
	font-weight: 500;
}

.bb-progreso .cmp-card--big .cmp2__delta {
	padding: 6px 14px;
	border-radius: 999px;
}

.bb-progreso .cmp-card--big .cmp2__delta-n {
	font-size: var(--bb-fs-5);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.bb-progreso .cmp-card--big .cmp2__delta-w {
	font-size: var(--bb-fs-1);
	margin-left: 2px;
}

.bb-progreso .cmp-card--big .cmp2__bars {
	gap: 12px;
}

.bb-progreso .cmp-card--big .cmp2__track {
	height: 16px;
	border-radius: var(--bb-radius-xs);
}

.bb-progreso .cmp-card--big .cmp2__fill {
	border-radius: var(--bb-radius-xs);
}

.bb-progreso .cmp-card--big .cmp2__val {
	font-size: var(--bb-fs-3);
	min-width: 80px;
}

@media (width >= 600px) {
	.bb-progreso .cmp-card--big .cmp2__val {
		font-size: var(--bb-fs-4);
	}
}

.bb-progreso .cmp-card--big .cmp-panel {
	gap: 8px;
}

@media (width >= 720px) {
	.bb-progreso .cmp-card--big .cmp-panel {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ---- Tooltip 'i' info (popover click reutilizable) ---- */
.bb-progreso .info-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgb(255 255 255 / 12%);
	color: rgb(255 255 255 / 80%);
	border: 0;
	outline: 0;
	font-size: var(--bb-fs-1);
	font-weight: 600;
	font-style: italic;
	font-family: Georgia, "Times New Roman", serif;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition:
		background 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
	vertical-align: middle;
	-webkit-tap-highlight-color: transparent;
}

.bb-progreso .info-trigger:hover {
	background: var(--bb-yellow);
	color: var(--bb-ink);
}

.bb-progreso .info-trigger:focus,
.bb-progreso .info-trigger:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 2px rgb(250 204 21 / 45%);
}

.bb-progreso .info-trigger[aria-expanded="true"] {
	background: var(--bb-yellow);
	color: var(--bb-ink);
}

/* Popover con position:fixed → top/left calculados por JS desde el rect del
 * trigger (getBoundingClientRect). Evita problemas de stacking context u
 * overflow:hidden de cards padre y permite reposicionar contra viewport
 * cuando el trigger está en la columna derecha. */
.bb-progreso .info-pop {
	display: none;
	position: fixed;
	z-index: 9999;
	background: #fff;
	color: var(--bb-text);
	border-radius: var(--bb-radius-sm);
	padding: 14px 16px 12px;
	box-shadow:
		0 8px 24px -6px rgb(20 20 20 / 28%),
		0 0 0 1px rgb(20 20 20 / 6%);
	max-width: 320px;
	min-width: 240px;
	width: max-content;
	font-family: var(--bb-font);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	top: var(--bb-pop-top, 0);
	left: var(--bb-pop-left, 0);
}

.bb-progreso .info-pop.is-open {
	display: block;
}

.bb-progreso .info-pop__title {
	display: block;
	font-size: var(--bb-fs-2);
	font-weight: 600;
	color: var(--bb-text);
	margin-bottom: 6px;
	letter-spacing: 0.02em;
}

.bb-progreso .info-pop__text {
	display: block;
	font-size: var(--bb-fs-2);
	color: var(--bb-text-2);
	line-height: 1.5;
	padding-right: 20px;
}

.bb-progreso .info-pop__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	font-size: var(--bb-fs-4);
	line-height: 1;
	color: var(--bb-text-3);
	cursor: pointer;
	padding: 0;
}

.bb-progreso .info-pop__close:hover {
	background: var(--bb-hush);
	color: var(--bb-text);
}

/* ---- BellBeasts Index — Bloque A: card clara de evolución (.ibbe) ---- */
.bb-progreso .ibbe-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.bb-progreso .ibbe-eyebrow {
	font-size: var(--bb-fs-1);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bb-text-3);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: relative;
}

/* .ibbe-pills/.ibbe-pill usan la receta del segmented control único
 * (junto a .cmp-tabs/.cmp-tab, más arriba). */

.bb-progreso .ibbe-num-row {
	display: flex;
	align-items: baseline;
	gap: 4px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.bb-progreso .ibbe-num {
	font-size: var(--bb-fs-8);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--bb-text);
}

@media (width >= 600px) {
	.bb-progreso .ibbe-num {
		font-size: 72px; /* display ≥600px: por encima del tope de la escala (fs-8) */
	}
}

.bb-progreso .ibbe-scale {
	font-size: var(--bb-fs-6);
	font-weight: 500;
	color: var(--bb-text-3);
}

.bb-progreso .ibbe-delta {
	font-size: var(--bb-fs-3);
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
	margin-left: 8px;
	align-self: center;
	white-space: nowrap;
	font-feature-settings: "tnum";
}

.bb-progreso .ibbe-delta--up {
	color: var(--bb-good);
	background: var(--bb-good-bg);
}

.bb-progreso .ibbe-delta--down {
	color: var(--bb-bad);
	background: var(--bb-bad-bg);
}

.bb-progreso .ibbe-delta--neutral {
	color: var(--bb-text-3);
	background: var(--bb-hush);
}

.bb-progreso .ibbe-zona {
	font-size: var(--bb-fs-4);
	font-weight: 600;
	color: #3a3a36;
	margin-top: 6px;
}

/* La gráfica escala no-uniforme (preserveAspectRatio: none): el svg toma
 * todo el ancho y una altura fija; por eso dentro no hay <text>. */
.bb-progreso .ibbe-chart {
	margin-top: 18px;
}

.bb-progreso .ibbe-svgwrap {
	position: relative;

	/* Scrub explorable: el dedo arrastra en horizontal sin secuestrar el
	 * scroll vertical de la página. */
	touch-action: pan-y;
	cursor: crosshair;
}

/* Etiquetas de zona dentro de la gráfica (overlay HTML, una por banda). */
.bb-progreso .ibbe-zlabels span {
	position: absolute;

	/* A la izquierda: el lado derecho es donde vive el punto de hoy. */
	left: 8px;
	transform: translateY(-50%);
	font-size: var(--bb-fs-1);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bb-text-3);
	pointer-events: none;

	/* Velo sutil para que se lean aunque la línea las cruce. */
	background: rgb(255 255 255 / 60%);
	padding: 1px 7px;
	border-radius: 999px;
}

/* ---- Scrub de la gráfica (línea + etiqueta que siguen el puntero) ---- */
.bb-progreso .ibbe-scrub-line {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 1.5px dashed var(--bb-text-2);
	pointer-events: none;
	display: none;
}

.bb-progreso .ibbe-scrub-label {
	position: absolute;
	top: 6px;
	transform: translateX(-50%);
	background: var(--bb-ink);
	color: #fff;
	font-size: var(--bb-fs-1);
	font-weight: 600;
	font-feature-settings: "tnum";
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
	pointer-events: none;
	display: none;
	z-index: 2;
}

.bb-progreso .ibbe-chart svg {
	display: block;
	width: 100%;
	height: 170px;
}

@media (width >= 600px) {
	.bb-progreso .ibbe-chart svg {
		height: 200px;
	}
}

/* Punto del día actual: overlay HTML (un <circle> dentro del svg estirado
 * con preserveAspectRatio:none se deformaría en óvalo). */
.bb-progreso .ibbe-dot {
	position: absolute;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #3a3a36;
	border: 2.5px solid #fff;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.bb-progreso .ibbe-axis {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: var(--bb-fs-1);
	color: var(--bb-text-3);
	font-feature-settings: "tnum";
}

.bb-progreso .ibbe-leyenda-mini {
	margin-top: 6px;
	font-size: var(--bb-fs-1);
	color: var(--bb-text-3);
}

/* Caja coach Mr. Beasty: la mascota asoma en absoluto por la izquierda. */
.bb-progreso .ibbe-coach {
	position: relative;
	background: var(--bb-hush);
	border-radius: var(--bb-radius-sm);
	padding: 16px 16px 16px 100px;

	/* La mascota asoma 28px por arriba: margen extra para que el asa no
	 * pise la leyenda de la gráfica (feedback Dani 11-jun). */
	margin-top: 40px;
}

.bb-progreso .ibbe-coach--noimg {
	padding: 16px;
}

.bb-progreso .ibbe-coach__img {
	position: absolute;
	left: -14px;
	top: -28px;
	width: 112px;
	height: 112px;

	/* El PNG ya es transparente; multiply queda solo para fundir los grises
	 * de la tinta con la card clara (look integrado, no pegatina). */
	mix-blend-mode: multiply;
}

.bb-progreso .ibbe-coach__kicker {
	font-size: var(--bb-fs-2);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bb-text-3);
	margin-bottom: 4px;
}

.bb-progreso .ibbe-coach__txt {
	font-size: var(--bb-fs-3);
	line-height: 1.5;
	color: var(--bb-text);
	margin: 0;
}

.bb-progreso .ibbe-legend {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px dashed var(--bb-line);
}

.bb-progreso .ibbe-legend summary {
	font-size: var(--bb-fs-3);
	color: var(--bb-text-2);
	cursor: pointer;
}

.bb-progreso .ibbe-legend__zones {
	display: grid;
	gap: 8px;
	margin: 12px 0 10px;
}

.bb-progreso .ibbe-legend__zone {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--bb-fs-3);
	color: var(--bb-text-2);
}

.bb-progreso .ibbe-legend__sw {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	border: 1px solid var(--bb-line);
	flex: none;
}

.bb-progreso .ibbe-legend__sw--z1 {
	background: #f4f0e1;
}

.bb-progreso .ibbe-legend__sw--z2 {
	background: #e7e3d4;
}

.bb-progreso .ibbe-legend__sw--z3 {
	background: #c8c2b0;
}

.bb-progreso .ibbe-legend__sw--z4 {
	background: #facc15;
}

.bb-progreso .ibbe-legend__range {
	color: var(--bb-text-3);
	font-feature-settings: "tnum";
}

.bb-progreso .ibbe-legend__tagline {
	font-size: var(--bb-fs-2);
	line-height: 1.5;
	color: var(--bb-text-3);
	margin: 0;
}

/* ---- BellBeasts Index — Bloque B: card oscura de componentes ---- */
.bb-progreso .bb-index {
	margin: 22px 0 6px;
	padding: 22px 22px 20px;
	background: var(--bb-ink);
	border: 0;
	border-radius: var(--bb-radius);
	color: var(--bb-ink-text);
	box-shadow: var(--bb-shadow-dark);
}

.bb-progreso .bb-index--locked {
	background: var(--bb-hush);
	color: var(--bb-text-2);
	box-shadow: none;
}

.bb-progreso .bb-index__placeholder {
	font-size: var(--bb-fs-3);
	color: var(--bb-text-2);
	text-align: center;
	padding: 14px 0;
}

/* Como hijo del stack, el espaciado lo gobierna `.stack > * + *`. */
.bb-progreso .bb-index--cmps {
	margin: 0;
	padding: 20px 18px 22px;
}

.bb-progreso .bb-index__cmps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px 8px;
}

.bb-progreso .bb-index__cmp {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: var(--bb-fs-1);
}

.bb-progreso .bb-index__cmp-l {
	color: rgb(255 255 255 / 55%);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	font-size: var(--bb-fs-1);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.bb-progreso .bb-index__cmp-v {
	font-size: var(--bb-fs-7);
	font-weight: 700;
	color: #fff;
	font-feature-settings: "tnum", "ss01";
}

/* ---- Logros (achievements) — card oscura protagonista estilo mockup móvil ---- */
.bb-progreso .logros-card {
	background: var(--bb-ink);
	color: var(--bb-ink-text);
	border: 0;
	box-shadow: var(--bb-shadow-dark);
}

.bb-progreso .logros-hero {
	display: flex;
	align-items: center;
	gap: 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--bb-ink-line);
}

.bb-progreso .logros-hero__count {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	color: var(--bb-yellow);
	flex-shrink: 0;
}

.bb-progreso .logros-hero__num {
	font-size: var(--bb-fs-8);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	font-feature-settings: "tnum", "ss01";
}

@media (width >= 600px) {
	.bb-progreso .logros-hero__num {
		font-size: 72px; /* display ≥600px: por encima del tope de la escala (fs-8) */
	}
}

.bb-progreso .logros-hero__sep,
.bb-progreso .logros-hero__total {
	font-size: var(--bb-fs-5);
	color: rgb(255 255 255 / 55%);
	font-weight: 400;
	letter-spacing: -0.02em;
}

.bb-progreso .logros-hero__meta {
	flex: 1;
	min-width: 0;
}

.bb-progreso .logros-hero__title {
	font-size: var(--bb-fs-5);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 4px;
}

.bb-progreso .logros-hero__sub {
	font-size: var(--bb-fs-3);
	color: var(--bb-ink-text-2);
	margin: 0 0 8px;
	line-height: 1.5;
}

.bb-progreso .logros-card .logros-elite-pill {
	display: inline-block;
	font-size: var(--bb-fs-2);
	color: var(--bb-ink);
	background: var(--bb-yellow);
	border-radius: 999px;
	padding: 4px 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.bb-progreso .logros-since {
	font-size: var(--bb-fs-2);
	color: var(--bb-ink-text-3);
	margin: 12px 0 0;
	font-style: italic;
	letter-spacing: 0.01em;
}

/* "Tu próximo logro" — card amarilla protagonista dentro de la card negra,
 * destaca lo más cerca de desbloquear para crear call-to-action emocional. */
.bb-progreso .logros-next {
	margin-top: 22px;
	background: linear-gradient(180deg, var(--bb-yellow) 0%, #fbc814 100%);
	color: var(--bb-ink);
	border-radius: var(--bb-radius-sm);
	padding: 18px 22px 16px;
	box-shadow: 0 12px 24px -16px rgb(244 183 59 / 50%);
}

.bb-progreso .logros-next__kicker {
	font-size: var(--bb-fs-1);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgb(10 10 10 / 65%);
	margin-bottom: 10px;
}

.bb-progreso .logros-next__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.bb-progreso .logros-next__title {
	font-size: var(--bb-fs-4);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

@media (width >= 600px) {
	.bb-progreso .logros-next__title {
		font-size: var(--bb-fs-5);
	}
}

.bb-progreso .logros-next__pct {
	font-size: var(--bb-fs-4);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-feature-settings: "tnum";
}

@media (width >= 600px) {
	.bb-progreso .logros-next__pct {
		font-size: var(--bb-fs-5);
	}
}

.bb-progreso .logros-next__bar {
	height: 10px;
	background: rgb(10 10 10 / 14%);
	border-radius: 999px;
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgb(10 10 10 / 8%);
}

.bb-progreso .logros-next__bar-fill {
	height: 100%;
	background: var(--bb-ink);
	border-radius: 999px;
	transition: width 0.8s ease;
}

.bb-progreso .logros-next__progress {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-top: 8px;
	font-size: var(--bb-fs-2);
}

.bb-progreso .logros-next__nums {
	font-weight: 600;
	color: var(--bb-ink);
	font-feature-settings: "tnum";
}

.bb-progreso .logros-next__remain {
	color: rgb(10 10 10 / 75%);
	font-weight: 500;
}

.bb-progreso .logros-next__premio {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgb(10 10 10 / 12%);
	font-size: var(--bb-fs-2);
	font-weight: 600;
	color: var(--bb-ink);
}

.bb-progreso .ach-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 22px;
}

@media (width >= 600px) {
	.bb-progreso .ach-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.bb-progreso .ach {
	display: flex;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid rgb(255 255 255 / 10%);
	border-radius: var(--bb-radius-sm);
	background: rgb(255 255 255 / 4%);
}

.bb-progreso .ach--unlocked {
	border-color: rgb(244 183 59 / 50%);
	background: rgb(244 183 59 / 8%);
}

.bb-progreso .ach--elite {
	border-style: solid;
}

.bb-progreso .ach--locked {
	opacity: 0.62;
}

.bb-progreso .ach__icon {
	font-size: var(--bb-fs-5);
	line-height: 1;
	color: rgb(255 255 255 / 35%);
	flex-shrink: 0;
	width: 28px;
	text-align: center;
}

.bb-progreso .ach--unlocked .ach__icon {
	color: var(--bb-yellow);
}

.bb-progreso .ach__body {
	flex: 1;
	min-width: 0;
}

.bb-progreso .ach__title {
	font-size: var(--bb-fs-3);
	font-weight: 500;
	color: #fff;
	line-height: 1.3;
}

.bb-progreso .ach__desc {
	font-size: var(--bb-fs-2);
	color: rgb(255 255 255 / 60%);
	margin-top: 2px;
	line-height: 1.4;
}

.bb-progreso .ach__bar {
	margin-top: 8px;
	height: 4px;
	background: rgb(255 255 255 / 10%);
	border-radius: 999px;
	overflow: hidden;
}

.bb-progreso .ach__bar-fill {
	height: 100%;
	background: var(--bb-yellow-warm);
	border-radius: 999px;
	transition: width 0.6s ease;
}

.bb-progreso .ach__progress {
	font-size: var(--bb-fs-1);
	color: rgb(255 255 255 / 55%);
	margin-top: 4px;
	font-feature-settings: "tnum", "ss01";
}

.bb-progreso .ach__premio {
	font-size: var(--bb-fs-2);
	color: var(--bb-yellow);
	margin-top: 8px;
	font-weight: 500;
}

.bb-progreso .ach__elite-hint {
	font-size: var(--bb-fs-2);
	color: var(--bb-ink-text-3);
	margin-top: 6px;
	font-style: italic;
}

/* ---- Footer suave (cierre motivacional, sin CTA agresivo) ---- */
.bb-progreso .footer-note {
	margin-top: 12px;
	padding: 28px 24px;
	background: var(--bb-card);
	border: 1px dashed var(--bb-line);
	border-radius: var(--bb-radius);
	text-align: center;
	color: var(--bb-text-2);
	font-size: var(--bb-fs-3);
	line-height: 1.55;
}

.bb-progreso .footer-note p {
	margin: 0;
}

.bb-progreso .footer-note p + p {
	margin-top: 10px;
	font-size: var(--bb-fs-2);
	color: var(--bb-text-3);
}

.bb-progreso .footer-note strong {
	color: var(--bb-text);
	font-weight: 500;
}

/* ---- Ranking de constancia — card oscura de comunidad ---- */
.bb-progreso .ranking-card {
	background: var(--bb-ink);
	color: var(--bb-ink-text);
	border: 0;
	box-shadow: var(--bb-shadow-dark);
}

.bb-progreso .rank-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--bb-ink-line);
	margin-bottom: 6px;
}

.bb-progreso .rank-title {
	font-size: var(--bb-fs-5);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 4px;
}

.bb-progreso .rank-sub {
	font-size: var(--bb-fs-3);
	color: rgb(255 255 255 / 60%);
	margin: 0;
	line-height: 1.5;
}

.bb-progreso .rank-mes-pill {
	flex-shrink: 0;
	font-size: var(--bb-fs-2);

	/* Dieta de amarillo: outline en vez de relleno (el amarillo queda para
	 * los datos de la card, no para la decoración). */
	color: var(--bb-yellow);
	background: transparent;
	border: 1px solid rgb(250 204 21 / 45%);
	border-radius: 999px;
	padding: 3px 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.bb-progreso .rank-scrollwrap {
	position: relative;
}

.bb-progreso .rank-list {
	display: flex;
	flex-direction: column;
}

/* ~5,5 filas visibles; el resto con scroll dentro de la card. */
.bb-progreso .rank-list--scroll {
	max-height: 296px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgb(255 255 255 / 25%) transparent;
	padding-right: 4px;
}

.bb-progreso .rank-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30px;
	background: linear-gradient(
		180deg,
		rgb(10 10 10 / 0%) 0%,
		var(--bb-ink) 100%
	);
	pointer-events: none;
}

.bb-progreso .rank-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 6px;
	border-bottom: 1px solid rgb(255 255 255 / 6%);
	min-height: 52px;
}

.bb-progreso .rank-list .rank-row:last-child {
	border-bottom: 0;
}

.bb-progreso .rank-row--me {
	background: rgb(250 204 21 / 9%);
	border: 1px solid rgb(250 204 21 / 35%);
	border-radius: var(--bb-radius-sm);
	padding-left: 10px;
	padding-right: 10px;
}

.bb-progreso .rank-row--footer {
	margin-top: 10px;
}

.bb-progreso .rank-pos {
	width: 26px;
	flex-shrink: 0;
	text-align: center;
	font-size: var(--bb-fs-3);
	font-weight: 600;
	color: rgb(255 255 255 / 55%);
	font-feature-settings: "tnum", "ss01";
}

.bb-progreso .rank-medal {
	font-size: var(--bb-fs-4);
	line-height: 1;
}

.bb-progreso .rank-ava {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--bb-fs-2);
	font-weight: 600;
	color: var(--bb-ink);
	letter-spacing: 0.02em;
}

/* Paleta determinista de avatares (índice color 0-7 del backend). */
.bb-progreso .rank-ava--c0 {
	background: #facc15;
}

.bb-progreso .rank-ava--c1 {
	background: #fb923c;
}

.bb-progreso .rank-ava--c2 {
	background: #34d399;
}

.bb-progreso .rank-ava--c3 {
	background: #60a5fa;
}

.bb-progreso .rank-ava--c4 {
	background: #c084fc;
}

.bb-progreso .rank-ava--c5 {
	background: #f472b6;
}

.bb-progreso .rank-ava--c6 {
	background: #a3e635;
}

.bb-progreso .rank-ava--c7 {
	background: #2dd4bf;
}

.bb-progreso .rank-ava--me {
	background: var(--bb-yellow);
	font-size: var(--bb-fs-1);
}

.bb-progreso .rank-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bb-progreso .rank-chase {
	font-size: var(--bb-fs-1);
	font-weight: 500;
	color: var(--bb-yellow);
}

.bb-progreso .rank-mejora-pill {
	flex-shrink: 0;
	font-size: var(--bb-fs-2);
}

.bb-progreso .rank-saliente,
.bb-progreso .rank-mejora {
	font-size: var(--bb-fs-2);
	color: var(--bb-ink-text-2);
	line-height: 1.5;
	margin: 10px 0 4px;
}

.bb-progreso .rank-saliente b,
.bb-progreso .rank-mejora b {
	color: #fff;
	font-weight: 600;
}

.bb-progreso .rank-name {
	min-width: 0;
	font-size: var(--bb-fs-3);
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.bb-progreso .rank-name--cta {
	white-space: normal;
	font-size: var(--bb-fs-3);
	font-weight: 400;
	color: rgb(255 255 255 / 80%);
	line-height: 1.45;
}

.bb-progreso .rank-you-pill {
	font-size: var(--bb-fs-1);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bb-yellow);
	background: transparent;
	border: 1px solid rgb(250 204 21 / 45%);
	border-radius: 999px;
	padding: 1px 7px;
	flex-shrink: 0;
}

.bb-progreso .rank-days {
	flex-shrink: 0;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.bb-progreso .rank-days__n {
	font-size: var(--bb-fs-4);
	font-weight: 600;
	color: var(--bb-yellow);
	font-feature-settings: "tnum", "ss01";
}

.bb-progreso .rank-days__u {
	font-size: var(--bb-fs-1);
	color: var(--bb-ink-text-3);
}

.bb-progreso .rank-empty {
	padding: 22px 6px 10px;
	text-align: center;
}

.bb-progreso .rank-empty__big {
	font-size: var(--bb-fs-4);
	font-weight: 600;
	color: var(--bb-yellow);
	margin-bottom: 8px;
}

.bb-progreso .rank-empty__sub {
	font-size: var(--bb-fs-3);
	color: var(--bb-ink-text-2);
	line-height: 1.55;
	margin: 0 auto;
	max-width: 420px;
}

.bb-progreso .rank-prev {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--bb-ink-line);

	/* Columna: 1º, 2º y 3º uno encima de otro, estilo podio (en línea se
	 * partía feo en móvil — feedback Dani 11-jun). */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	font-size: var(--bb-fs-2);
	color: var(--bb-ink-text-2);
}

.bb-progreso .rank-prev__label {
	font-size: var(--bb-fs-1);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 45%);
}

.bb-progreso .rank-prev__item {
	white-space: nowrap;
}

.bb-progreso .rank-prev__item--me {
	color: var(--bb-yellow);
	font-weight: 600;
}

/* ============================================================
 * UI 2026 — componentes nuevos (hero score-first, capítulos,
 * coach unificado, campana de la manada, skeleton mimético)
 * ============================================================ */

/* ---- Fondo premium del spec: grid sutil + 2 orbes amarillos lentos ----
 * (el position:relative que anclan ::before/::after vive en el bloque raíz) */
.bb-progreso::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgb(20 20 20 / 2.5%) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(20 20 20 / 2.5%) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
	z-index: 0;
}

.bb-progreso::after {
	content: "";
	position: absolute;
	top: 60px;
	right: -120px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgb(250 204 21 / 14%) 0%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
	animation: bb-orbe 36s ease-in-out infinite alternate;
}

@keyframes bb-orbe {
	from {
		transform: translate(0, 0);
	}

	to {
		transform: translate(-60px, 120px);
	}
}

.bb-progreso .stack {
	position: relative;
	z-index: 1;
}

/* ---- Focus ring unificado ---- */
.bb-progreso :is(button, a, [tabindex]):focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgb(250 204 21 / 55%);
	border-radius: var(--bb-radius-xs);
}

/* ---- Áreas de toque ≥44px sin cambiar el visual ---- */
.bb-progreso .info-trigger,
.bb-progreso .cal-nav-btn,
.bb-progreso .ibbe-pill,
.bb-progreso .cmp-tab,
.bb-progreso .calhm-tab,
.bb-progreso .info-pop__close {
	position: relative;
}

/* OJO al extender las hit-areas ::after: el botón DEBE estar también en el
 * grupo position:relative de arriba — si no, el ::after se ancla al .stack
 * y se convierte en un overlay invisible que se traga los clicks de media
 * página (bug real de la primera revisión del 12-jun). */

.bb-progreso .info-trigger::after,
.bb-progreso .cal-nav-btn::after,
.bb-progreso .info-pop__close::after {
	content: "";
	position: absolute;
	inset: -12px;
}

.bb-progreso .ibbe-pill::after,
.bb-progreso .cmp-tab::after,
.bb-progreso .calhm-tab::after {
	content: "";
	position: absolute;
	inset: -8px;
}

/* ---- Hover honesto: sin lift en lo que no se puede clicar ---- */
.bb-progreso .week:hover,
.bb-progreso .day.done:hover,
.bb-progreso .pr:hover,
.bb-progreso .kb-slot:hover,
.bb-progreso .kb-slot--next:hover,
.bb-progreso .cmp2:hover {
	transform: none;
}

/* Lo que lleva tooltip de tap sí es tocable: cursor coherente. */
.bb-progreso [data-tip] {
	cursor: pointer;
}

/* ---- Error visible del calendario (antes moría en silencio) ---- */
.bb-progreso .cal-error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: var(--bb-radius-xs);
	background: var(--bb-bad-bg);
	color: var(--bb-bad);
	font-size: var(--bb-fs-2);
	font-weight: 500;
}

.bb-progreso .cal-error__retry {
	border: 1px solid currentcolor;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: var(--bb-fs-2);
	font-weight: 600;
	border-radius: 999px;
	padding: 4px 12px;
	cursor: pointer;
	flex-shrink: 0;
}

.bb-progreso .cal-error__retry:hover {
	background: var(--bb-bad);
	color: #fff;
}

/* ---- Saludo compacto (hero v2) ---- */
.bb-progreso .hero--v2 {
	padding: 6px 0 0;
}

.bb-progreso .hero--v2 .hello {
	font-size: var(--bb-fs-2);
	color: var(--bb-text-3);
	letter-spacing: 0.04em;
	margin-bottom: 2px;
}

.bb-progreso .hero--v2 .hero-name {
	font-size: var(--bb-fs-6);
	margin: 0;
}

@media (width >= 600px) {
	.bb-progreso .hero--v2 .hello {
		font-size: var(--bb-fs-3);
	}

	.bb-progreso .hero--v2 .hero-name {
		font-size: var(--bb-fs-7);
	}
}

/* ---- Card dial: el Index abre la página (score-first) ---- */
.bb-progreso .dial-card {
	background: var(--bb-ink);
	color: var(--bb-ink-text);
	border: 0;
	box-shadow: var(--bb-shadow-dark);
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
}

.bb-progreso .dial {
	position: relative;
	width: 132px;
	height: 132px;
	flex-shrink: 0;
}

.bb-progreso .dial svg {
	display: block;
	width: 100%;
	height: 100%;
}

.bb-progreso .dial__track {
	fill: none;
	stroke: var(--bb-ink-line);
	stroke-width: 10;
}

.bb-progreso .dial__bar {
	fill: none;
	stroke: var(--bb-yellow);
	stroke-width: 10;
	stroke-linecap: round;
	animation: bb-dial-in 0.9s ease-out backwards;
}

@keyframes bb-dial-in {
	from {
		stroke-dashoffset: var(--bb-dial-c, 389.6);
	}
}

.bb-progreso .dial__center {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.bb-progreso .dial__num {
	font-size: var(--bb-fs-7);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: #fff;
	font-feature-settings: "tnum", "ss01";
	line-height: 1;
}

.bb-progreso .dial__scale {
	font-size: var(--bb-fs-2);
	color: var(--bb-ink-text-3);
	align-self: flex-end;
	padding-bottom: 26px;
}

.bb-progreso .dial-meta {
	flex: 1;
	min-width: 200px;
}

.bb-progreso .dial-zona {
	font-size: var(--bb-fs-4);
	font-weight: 600;
	color: #fff;
	margin-bottom: 6px;
}

.bb-progreso .dial-zona--off {
	color: var(--bb-ink-text-2);
	font-weight: 500;
	font-size: var(--bb-fs-3);
}

.bb-progreso .dial-delta {
	display: inline-block;
	font-size: var(--bb-fs-2);
	font-weight: 600;
	border-radius: 999px;
	padding: 3px 11px;
	margin-bottom: 14px;
}

.bb-progreso .dial-delta--up {
	color: #6ee7a0;
	background: rgb(21 128 61 / 25%);
}

.bb-progreso .dial-delta--down {
	color: #fca5a5;
	background: rgb(185 28 28 / 25%);
}

.bb-progreso .dial-delta--neutral {
	color: var(--bb-ink-text-2);
	background: var(--bb-ink-line);
}

.bb-progreso .dial-kpis {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}

.bb-progreso .dkpi {
	min-width: 78px;
}

.bb-progreso .dkpi__l {
	display: block;
	font-size: var(--bb-fs-1);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bb-ink-text-3);
	margin-bottom: 4px;
	white-space: nowrap;
}

.bb-progreso .dkpi__v {
	display: block;
	font-size: var(--bb-fs-5);
	font-weight: 700;
	color: #fff;
	font-feature-settings: "tnum", "ss01";
	line-height: 1.1;
}

.bb-progreso .dkpi__u {
	font-size: var(--bb-fs-1);
	font-weight: 500;
	color: var(--bb-ink-text-3);
	margin-left: 3px;
}

.bb-progreso .dkpi .kpi-sub {
	margin-top: 4px;
	font-size: var(--bb-fs-1);
	border: 0;
	padding: 0;
	background: none;
}

.bb-progreso .dkpi .kpi-sub--up {
	color: #6ee7a0;
}

.bb-progreso .dkpi .kpi-sub--down {
	color: #fca5a5;
}

.bb-progreso .dkpi .kpi-sub--neutral,
.bb-progreso .dkpi .kpi-sub--warm {
	color: var(--bb-ink-text-3);
}

.bb-progreso .dial-card .info-trigger {
	border-color: rgb(255 255 255 / 30%);
	color: var(--bb-ink-text-2);
}

/* ---- Barra de chips sticky (mapa de capítulos) ---- */
.bb-progreso .bb-chips {
	position: sticky;
	top: 8px;
	z-index: 40;
	display: flex;
	gap: 8px;
	padding: 8px 10px;
	background: rgb(253 248 234 / 90%);
	backdrop-filter: blur(8px);
	border: 1px solid var(--bb-line);
	border-radius: 999px;
	overflow-x: auto;
	scrollbar-width: none;
	box-shadow: var(--bb-shadow-soft);
}

.bb-progreso .bb-chips::-webkit-scrollbar {
	display: none;
}

.bb-progreso .bb-chip {
	font-family: var(--bb-font);
	font-size: var(--bb-fs-3);
	font-weight: 500;
	color: var(--bb-text-2);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 7px 15px;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background 0.2s ease,
		color 0.2s ease;
}

.bb-progreso .bb-chip--on {
	background: var(--bb-ink);
	color: var(--bb-yellow);
	font-weight: 600;
}

/* ---- Capítulos ---- */
.bb-progreso .bb-cap {
	scroll-margin-top: 72px;
}

.bb-progreso .bb-cap > * + * {
	margin-top: 20px;
}

.bb-progreso .cap-kicker {
	font-size: var(--bb-fs-1);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bb-text-3);
	margin: 34px 0 14px;
}

/* ---- Coach unificado (la única voz de Mr. Beasty fuera del Index) ---- */
.bb-progreso .coach-uni {
	position: relative;
	background: var(--bb-hush);
	border: 0;
	border-radius: var(--bb-radius-sm);
	padding: 16px 18px 16px 104px;
	box-shadow: none;
}

/* La mascota asoma 24px por arriba de la card: respiración extra con la
 * card anterior (el asa de la kettlebell rozaba el dial — feedback Dani). */
.bb-progreso .bb-cap > .coach-uni,
.bb-progreso .stack > .coach-uni {
	margin-top: 38px;
}

.bb-progreso .coach-uni--noimg {
	padding-left: 18px;
}

.bb-progreso .coach-uni__img {
	position: absolute;
	left: -10px;
	top: -24px;
	width: 104px;
	height: 104px;
	mix-blend-mode: multiply;
}

.bb-progreso .coach-uni__kicker {
	font-size: var(--bb-fs-1);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bb-text-3);
	margin-bottom: 4px;
}

.bb-progreso .coach-uni__title {
	font-size: var(--bb-fs-3);
	font-weight: 600;
	color: var(--bb-text);
	margin-bottom: 2px;
}

.bb-progreso .coach-uni__msg {
	font-size: var(--bb-fs-3);
	line-height: 1.55;
	color: var(--bb-text);
	margin: 0;
}

.bb-progreso .coach-uni--warn {
	box-shadow: inset 3px 0 0 var(--bb-yellow-warm);
}

/* ---- Tu posición en el club (sustituye a la campana de Gauss) ---- */
.bb-progreso .ibbe-club {
	margin: 16px 0 0;
	padding: 12px 16px;
	background: var(--bb-hush);
	border-radius: var(--bb-radius-sm);
	font-size: var(--bb-fs-3);
	color: var(--bb-text);
}

.bb-progreso .ibbe-club b {
	font-weight: 700;
}

/* ---- Skeleton mimético ---- */
.bb-progreso .bb-skel-line,
.bb-progreso .bb-skel-chips,
.bb-progreso .bb-skel-circle {
	background: linear-gradient(
		90deg,
		var(--bb-hush) 25%,
		var(--bb-line-2) 50%,
		var(--bb-hush) 75%
	);
	background-size: 200% 100%;
	animation: bb-shimmer 1.7s ease-in-out infinite;
	border-radius: var(--bb-radius-xs);
}

@keyframes bb-shimmer {
	from {
		background-position: 200% 0;
	}

	to {
		background-position: -200% 0;
	}
}

.bb-progreso .bb-skel-line--sm {
	width: 120px;
	height: 13px;
	margin-bottom: 10px;
}

.bb-progreso .bb-skel-line--md {
	width: 180px;
	height: 16px;
	margin-bottom: 10px;
}

.bb-progreso .bb-skel-line--lg {
	width: 220px;
	height: 26px;
	margin-bottom: 18px;
}

.bb-progreso .bb-skel-chips {
	height: 46px;
	border-radius: 999px;
	margin-bottom: 18px;
}

.bb-progreso .bb-skel-dial {
	display: flex;
	gap: 24px;
	align-items: center;
	background: var(--bb-card);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	padding: 24px;
	margin-bottom: 18px;
}

.bb-progreso .bb-skel-circle {
	width: 132px;
	height: 132px;
	border-radius: 50%;
	flex-shrink: 0;
}

.bb-progreso .bb-skel-dial__meta {
	flex: 1;
}

/* ---- Reduced motion: nada de orbes, dial ni shimmer en movimiento ---- */
@media (prefers-reduced-motion: reduce) {
	.bb-progreso::after {
		animation: none;
	}

	.bb-progreso .dial__bar {
		animation: none;
	}

	.bb-progreso .bb-skel-line,
	.bb-progreso .bb-skel-chips,
	.bb-progreso .bb-skel-circle {
		animation: none;
	}

	.bb-progreso .bb-chip {
		transition: none;
	}
}

/* ---- Responsive del dial en móvil ----
 * La meta envuelve bajo el dial y quedaba descolgada a la izquierda
 * (feedback Dani desde el iPhone, 11-jun): columna centrada. */
@media (width <= 520px) {
	.bb-progreso .dial-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 14px;
	}

	.bb-progreso .dial {
		width: 116px;
		height: 116px;
	}

	.bb-progreso .dial__num {
		font-size: 36px; /* encoge bajo fs-7 solo en móviles estrechos */
	}

	.bb-progreso .dial__scale {
		padding-bottom: 20px;
	}

	.bb-progreso .dial-meta {
		min-width: 0;
	}

	.bb-progreso .dial-kpis {
		justify-content: center;
		gap: 32px;
	}

	.bb-progreso .dkpi {
		min-width: 0;
		text-align: center;
	}

	.bb-progreso .dkpi__l {
		justify-content: center;
	}
}

/* ============================================================
 * Bento de escritorio (>= 1024px) — D5
 *
 * Aprovecha el ancho grande montando una rejilla bento de 12 columnas
 * DENTRO de cada capítulo (.bb-cap), no en el .stack global. El .stack
 * sigue en flujo block para que la barra de chips conserve su
 * position:sticky a lo largo de todo el scroll (un sticky dentro de un
 * grid solo se pega mientras su celda está visible, así que un .stack en
 * grid rompía el sticky en escritorio). Como cada capítulo ya va separado
 * por su kicker de ancho completo, partir la rejilla por capítulo se ve
 * igual que una rejilla continua. Por debajo de 1024px no se aplica nada.
 * ============================================================ */
@media (width >= 1024px) {
	/* El .stack se centra y limita su ancho, pero NO es grid: queda en
	 * flujo block y las chips siguen pegándose arriba al hacer scroll. */
	.bb-progreso .stack {
		max-width: 1240px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Cada capítulo es su propia rejilla bento de 12 columnas. `stretch`
	 * hace que las cards de una misma fila terminen a la misma altura, sin
	 * el escalón que dejaba una caja más corta que su vecina. */
	.bb-progreso .bb-cap {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 18px;
		align-items: stretch;
	}

	/* El gap gobierna la separación dentro del capítulo; los margin-top
	 * del flujo lineal sobran y descuadrarían las filas. */
	.bb-progreso .bb-cap > * {
		margin-top: 0;
	}

	/* Kicker del capítulo y nota de pie: ancho completo en su rejilla. */
	.bb-progreso .cap-kicker,
	.bb-progreso .footer-note {
		grid-column: 1 / -1;
	}

	/* HOY — el Index manda; el coach a su derecha, misma altura. */
	.bb-progreso .dial-card {
		grid-column: span 7;
		padding: 32px 36px;
		gap: 36px;
	}

	.bb-progreso #cap-hoy > .coach-uni {
		grid-column: span 5;
		display: flex;
		flex-direction: column;
		justify-content: center;

		/* En el bento el coach va al LADO del dial (no debajo), así que el
		 * margin-top que da aire a la mascota sobra y lo dejaba 38px más
		 * corto que el dial dentro de la fila stretch. */
		margin-top: 0;
	}

	/* CONSTANCIA — racha y calendario a la izquierda; el ranking, que es
	 * alto, ocupa la columna derecha a lo largo de dos filas. */
	.bb-progreso #cap-constancia > .card:not(.ranking-card, .calhm-card) {
		grid-column: span 7;
	}

	.bb-progreso .ranking-card {
		grid-column: span 5;
		grid-row: span 2;
	}

	.bb-progreso .calhm-card {
		grid-column: span 7;
	}

	/* RENDIMIENTO — la tira de KPIs (frecuencia, regularidad, etc.) a todo
	 * el ancho arriba; debajo, la gráfica del Index y la comparativa lado a
	 * lado, que tienen alturas parecidas y así cuadran sin hueco. El `order`
	 * sube la tira por encima de la gráfica sin tocar el orden del DOM (el
	 * kicker se queda primero con order -2). */
	.bb-progreso #cap-rendimiento > .cap-kicker {
		order: -2;
	}

	.bb-progreso .bb-index--cmps {
		order: -1;
		grid-column: 1 / -1;
	}

	.bb-progreso .ibbe {
		grid-column: span 8;
	}

	.bb-progreso .cmp-card--big {
		grid-column: span 4;
	}

	/* RÉCORDS — los récords anchos, el arsenal de kettlebells al lado. */
	.bb-progreso #cap-material > section:not(.card) {
		grid-column: span 8;
	}

	.bb-progreso #cap-material > .card {
		grid-column: span 4;
	}

	/* LOGROS — a todo el ancho, apilado (resumen, próximo logro y rejilla
	 * de insignias). La rejilla pasa a 3 columnas para que las 11 insignias
	 * ocupen menos alto y la tarjeta no deje un hueco grande debajo. */
	.bb-progreso .logros-card {
		grid-column: 1 / -1;
	}

	.bb-progreso .logros-card .ach-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}