/* Widget "Gráfico de barras" (Home v4 del design system). Solo CSS; tiempos del diseño:
   las barras crecen a los 350 ms, escalonadas 140 ms; las etiquetas aparecen 600 ms
   después de su barra; el punto a los 1,55 s y late cada 1,8 s; la línea base corre a
   los 1,25 s; el barrido cruza cada 3,4 s. */
.ssd-barras {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	min-width: 380px;
	padding: 26px 30px 22px;
	background: rgba(6, 16, 30, 0.64);
	border: 1px solid rgba(99, 151, 214, 0.28);
	border-radius: 2px;
	backdrop-filter: blur(6px);
	box-shadow: 0 18px 44px rgba(4, 10, 20, 0.45);
	--ssd-mono: var(--e-global-typography-family_mono-font-family), "JetBrains Mono", ui-monospace, monospace;
}
@media (max-width: 860px) {
	.ssd-barras {
		min-width: 0;
		padding: 22px 20px 18px;
	}
}
.ssd-barras::before {
	content: "// CRECIMIENTO ORGÁNICO + IA · SPRINT";
	font-family: var(--ssd-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: #6397D6;
	padding-bottom: 14px;
	margin-bottom: 12px;
	border-bottom: 1px solid rgba(99, 151, 214, 0.18);
	white-space: nowrap;
}
.ssd-barras__area {
	position: relative;
	height: var(--area, 310px);
	display: flex;
	align-items: flex-end;
	gap: 16px;
	border-bottom: 1px solid rgba(99, 151, 214, 0.32);
}
.ssd-barras__guia {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--p) * var(--max, 280px));
	height: 1px;
	background: rgba(99, 151, 214, 0.15);
}
.ssd-barras__barra {
	position: relative;
	flex: 1;
	height: var(--h);
	opacity: var(--o, 1);
	background: linear-gradient(180deg, rgba(99, 151, 214, 0.92) 0%, rgba(22, 67, 145, 0.55) 100%);
	border-top: 2px solid #6397D6;
	animation: ssd-barra-crece 900ms cubic-bezier(.2, .8, .2, 1) calc(350ms + var(--i, 0) * 140ms) both;
}
.ssd-barras__barra--destacada {
	background: linear-gradient(180deg, rgba(245, 158, 11, 0.92) 0%, rgba(22, 67, 145, 0.85) 100%);
	border-top: 2px solid #F59E0B;
	box-shadow: 0 0 24px rgba(245, 158, 11, 0.22);
}
@keyframes ssd-barra-crece { from { height: 0; } }

.ssd-barras__etq {
	position: absolute;
	top: -26px;
	left: 0;
	font-family: var(--ssd-mono);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.4;
	color: #9FB3D1;
	animation: ssd-barra-aparece 400ms ease-out calc(950ms + var(--i, 0) * 140ms) both;
}
.ssd-barras__barra--destacada .ssd-barras__etq {
	color: #F59E0B;
	font-weight: 700;
}
@keyframes ssd-barra-aparece { from { opacity: 0; } }

.ssd-barras__punto {
	position: absolute;
	top: -5px;
	right: -5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ssd-ambar, #F59E0B);
	animation: ssd-barra-aparece 300ms ease-out 1550ms both;
}
.ssd-barras__punto::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	animation: ssd-pulso 1.8s ease-out 1.4s infinite;
}
@keyframes ssd-pulso {
	0% { transform: scale(1); opacity: .9; }
	100% { transform: scale(3.2); opacity: 0; }
}

.ssd-barras__base {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: var(--ssd-ambar, #F59E0B);
	transform-origin: left;
	animation: ssd-barra-base 900ms cubic-bezier(.2, .8, .2, 1) 1250ms both;
}
@keyframes ssd-barra-base { from { transform: scaleX(0); } }

/* Barrido: cruza en 3,2 s, descansa 0,2 s y vuelve. */
.ssd-barras__barrido {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: rgba(99, 151, 214, 0.55);
	box-shadow: 0 0 0 3px rgba(99, 151, 214, 0.14);
	animation:
		ssd-barra-aparece 400ms ease-out 1750ms both,
		ssd-barrido 6800ms linear 3400ms infinite;
}
@keyframes ssd-barrido {
	0% { left: 0; }
	47.06% { left: 100%; }
	50% { left: 100%; }
	97.06% { left: 0; }
	100% { left: 0; }
}

.ssd-barras__leyenda {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.ssd-barras__leyenda p {
	margin: 0;
	font-family: var(--ssd-mono);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: .06em;
	white-space: nowrap;
	color: #9FB3D1 !important;
}
.ssd-barras__leyenda .ssd-barras__der {
	color: #F59E0B !important;
	font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
	.ssd-barras *,
	.ssd-barras *::after { animation: none !important; }
	.ssd-barras__barrido { display: none; }
}