/**
 * Barra de tempo compartilhada — mesmo visual da barra da aba Previsão: setas
 * (com animação de deslize) + rótulo "Deslize para ver mais dias" e uma trilha
 * cinza com um THUMB vermelho MÓVEL (não um preenchimento que cresce).
 */
.wf-timebar {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin-top: 10px;
	padding: 2px 2px 0;
	box-sizing: border-box;
}

.wf-timebar__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.wf-timebar__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #1a1e2a;
	cursor: pointer;
	border-radius: 6px;
	transition: opacity .15s;
	flex: 0 0 auto;
}
.wf-timebar__arrow:hover { opacity: .6; }
.wf-timebar__arrow svg { width: 22px; height: 22px; display: block; }
/* Animação de deslize (igual à barra da Previsão). */
.wf-timebar__arrow--prev svg { animation: wf-timebar-pulse-left 1.2s ease-in-out infinite; }
.wf-timebar__arrow--next svg { animation: wf-timebar-pulse-right 1.2s ease-in-out infinite; }
@keyframes wf-timebar-pulse-right { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes wf-timebar-pulse-left  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@media (prefers-reduced-motion: reduce) { .wf-timebar__arrow svg { animation: none; } }

.wf-timebar__label {
	font-size: .68rem;
	font-style: italic;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #8a92a0;
	white-space: nowrap;
	user-select: none;
}

/* Trilha cinza com thumb vermelho móvel. Estreita e centralizada (estilo da barra
   da aba Previsão) — menor em relação ao gráfico. */
.wf-timebar__track {
	position: relative;
	height: 6px;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	border-radius: 999px;
	background: #e7e9ee;
	cursor: pointer;
	touch-action: none;
	outline: none;
}
.wf-timebar__track:focus-visible { box-shadow: 0 0 0 2px rgba(232,17,45,.35); }

/* Thumb: largura fixa (~28%), desliza pela trilha via `left` — mantém sempre
   trilha cinza dos dois lados (preserva o canto direito). */
.wf-timebar__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 28%;
	min-width: 32px;
	border-radius: 999px;
	background: #e8112d;
	pointer-events: none;
	/* Sem transição: o thumb segue o dedo na hora (a transição fazia parecer
	   "pesado"/atrasado no arraste). */
}
/* O site do detalhe é sempre tema claro (não adapta ao prefers-color-scheme do
   SO): setas escuras, trilha cinza clara — fixo. */