/* Gráficos de los paneles.
   100% CSS, sin librería, tal como los resuelven los mockups. Los valores los
   inyecta BeeThere Core como custom properties inline sobre cada elemento, así
   que este fichero es puramente declarativo y no cambia con los datos.

   Todos los gráficos llevan role="img" con aria-label y una tabla .bt-sr-only
   con las cifras: un donut es invisible para un lector de pantalla. */

/* ---- Anillo y donut ---- */

.bt-donut {
	--bt-donut-size: 164px;
	--bt-donut-hole: 24px;
	position: relative;
	width: var(--bt-donut-size);
	height: var(--bt-donut-size);
	border-radius: 50%;
	background: conic-gradient(var(--bt-donut-stops, var(--bt-green-600) 0 100%));
	flex: 0 0 auto;
}

.bt-donut::after {
	content: "";
	position: absolute;
	inset: var(--bt-donut-hole);
	border-radius: 50%;
	background: var(--bt-surface, #fff);
}

.bt-donut__center {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	text-align: center;
	line-height: 1.1;
	z-index: 1;
}

.bt-donut__value {
	display: block;
	font-size: 26px;
	font-weight: var(--bt-w-bold, 720);
	letter-spacing: -.04em;
	color: var(--bt-ink, #162638);
}

.bt-donut__label {
	display: block;
	font-size: 11px;
	color: var(--bt-ink-muted, #5c6c80);
}

/* ---- Leyenda ---- */

.bt-legend { display: flex; flex-direction: column; gap: var(--bt-space-2, 8px); margin: 0; padding: 0; list-style: none; }
.bt-legend__row { display: flex; align-items: center; gap: var(--bt-space-2, 8px); font-size: var(--bt-fs-sm, 13px); }
.bt-legend__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bt-legend-color, var(--bt-green-600)); flex: 0 0 auto; }
.bt-legend__name { color: var(--bt-ink-2, #34485e); }
.bt-legend__value { margin-left: auto; font-weight: var(--bt-w-semi, 620); color: var(--bt-ink, #162638); font-variant-numeric: tabular-nums; }

/* ---- Barras ---- */

.bt-bars { display: flex; flex-direction: column; gap: var(--bt-space-4, 16px); }
.bt-bar__head { display: flex; justify-content: space-between; gap: var(--bt-space-3, 12px); margin-bottom: 6px; font-size: var(--bt-fs-sm, 13px); }
.bt-bar__value { font-weight: var(--bt-w-semi, 620); font-variant-numeric: tabular-nums; }

.bt-track {
	height: 8px;
	border-radius: var(--bt-radius-pill, 999px);
	background: #e8eef3;
	overflow: hidden;
}

.bt-fill {
	height: 100%;
	border-radius: inherit;
	width: var(--bt-fill-w, 0%);
	background: var(--bt-fill-bg, var(--bt-grad-primary));
}

.bt-fill--blue { --bt-fill-bg: linear-gradient(90deg, #82a7ff, var(--bt-blue-500, #4f7cff)); }
.bt-fill--orange { --bt-fill-bg: linear-gradient(90deg, #f4bf59, var(--bt-orange-500, #ef9b18)); }
.bt-fill--teal { --bt-fill-bg: linear-gradient(90deg, #7fd9cf, var(--bt-teal-500, #11b7a5)); }

/* ---- Medidor semicircular (índice de movilidad) ---- */

.bt-gauge { width: 200px; max-width: 100%; }
.bt-gauge svg { display: block; width: 100%; height: auto; }
.bt-gauge__track { fill: none; stroke: #e8eef3; stroke-width: 9; stroke-linecap: round; }

.bt-gauge__progress {
	fill: none;
	stroke: var(--bt-gauge-color, var(--bt-green-600));
	stroke-width: 9;
	stroke-linecap: round;
	stroke-dasharray: var(--bt-gauge-len, 151);
	stroke-dashoffset: var(--bt-gauge-offset, 151);
	transition: stroke-dashoffset .6s ease;
}

.bt-gauge__value { font-size: 26px; font-weight: var(--bt-w-bold, 720); fill: var(--bt-ink, #162638); }

/* ---- KPI ---- */

.bt-kpi { display: flex; flex-direction: column; gap: 6px; }
.bt-kpi__label { font-size: 9.5px; font-weight: 650; letter-spacing: .075em; text-transform: uppercase; color: var(--bt-ink-muted, #5c6c80); }
.bt-kpi__value { font-size: clamp(26px, 3vw, 38px); font-weight: var(--bt-w-bold, 720); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.bt-kpi__unit { font-size: .5em; font-weight: var(--bt-w-medium, 540); color: var(--bt-ink-muted, #5c6c80); margin-left: .25em; }

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