/* ==========================================================================
   Bloco de Fluxo Orbital — SipCode Theme (v2.2)
   Continuação visual da Órbita da Home. Usa os design tokens reais do
   tema (tokens.css: --accent, --text, --text-secondary, --border,
   --card-bg, --bg-alt, --font-head, --font-body) — herda modo
   claro/escuro automaticamente via html[data-theme], sem precisar de
   regras duplicadas.
   ========================================================================== */

.sc-flow-diagram {
	width: 100%;
	max-width: 680px;
	margin-inline: auto;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: transform;
}

.sc-flow-diagram.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.sc-flow-diagram {
		transition: none;
		transform: none;
	}
}

.sc-flow-diagram__svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

/* --------------------------------------------------------------------
   Anéis orbitais do hub — mesmo traçado tracejado da Órbita da Home
   -------------------------------------------------------------------- */
.sc-flow-diagram__anel {
	stroke: var(--text-secondary);
	stroke-opacity: 0.3;
	stroke-width: 1;
	stroke-dasharray: 3 6;
	transform-box: fill-box;
	transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
	.sc-flow-diagram__anel--externo {
		animation: sc-flow-anel-spin 20s linear infinite;
		will-change: transform;
	}
	.sc-flow-diagram__anel--interno {
		animation: sc-flow-anel-spin 13s linear infinite reverse;
		will-change: transform;
	}
}

@keyframes sc-flow-anel-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Ponto orbital na mesma cor laranja dos nós que orbitam a Home e do
   cometa do rastro (exceção de cor já documentada acima) — consistência
   total com a linguagem visual da Órbita.

   A animação (keyframes + aplicação, com nome literal, sem variável CSS)
   é gerada por instância dentro do próprio <style> do componente
   (flow-diagram.php) — ver comentário lá para o motivo (bug de
   "animation-name: var(...)" encontrado em 17/07/2026). Esta classe
   cuida só da cor. */
.sc-flow-diagram__orbit-dot {
	fill: #f37b28;
	will-change: transform;
}

/* Variante "cadeado" — exclusiva do Cloud PABX VoIPSecurity (21/07/2026).
   Cor Amarelo/Dourado (identidade de segurança/criptografia desta
   solução), nunca o laranja institucional — mantém a exceção de cor do
   cometa restrita apenas ao cometa. */
.sc-flow-diagram__orbit-dot.is-cadeado rect {
	fill: #d4af37;
}

.sc-flow-diagram__orbit-dot.is-cadeado path {
	stroke: #d4af37;
	stroke-width: 1.6;
}

/* --------------------------------------------------------------------
   Hub central
   -------------------------------------------------------------------- */
.sc-flow-diagram__hub circle {
	fill: var(--card-bg);
	stroke: var(--accent);
	stroke-width: 2;
}

.sc-flow-diagram__hub.is-destaque circle {
	stroke-width: 2.5;
}

.sc-flow-diagram__hub-icon {
	stroke: var(--accent);
	fill: none;
	pointer-events: none;
}

.sc-flow-diagram__hub-titulo {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 15px;
	fill: var(--text);
}

.sc-flow-diagram__hub-caption {
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 500;
	fill: var(--text-secondary);
}

/* --------------------------------------------------------------------
   Entradas (canais convergentes) — ponto pulsante + texto + tooltip nativo
   -------------------------------------------------------------------- */
.sc-flow-diagram__entrada-ponto {
	fill: var(--accent);
}

.sc-flow-diagram__entrada-texto {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	fill: var(--text);
	cursor: help;
}

.sc-flow-diagram__ping circle {
	stroke: var(--accent);
	stroke-width: 1;
	transform-box: fill-box;
	transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
	.sc-flow-diagram__ping circle {
		animation: sc-flow-ping 2.4s ease-out infinite;
		will-change: transform, opacity;
	}
}

@keyframes sc-flow-ping {
	0%   { transform: scale(0.6); opacity: 0.55; }
	100% { transform: scale(2.2); opacity: 0; }
}

.sc-flow-diagram__leader {
	stroke: var(--border);
	stroke-width: 0.75;
	stroke-dasharray: 2 4;
}

/* --------------------------------------------------------------------
   Rastro de energia e nós seguintes
   -------------------------------------------------------------------- */
.sc-flow-diagram__grad-start {
	stop-color: var(--accent);
	stop-opacity: 0.06;
}

.sc-flow-diagram__grad-end {
	stop-color: var(--accent);
	stop-opacity: 0.6;
}

.sc-flow-diagram__trilha {
	stroke-width: 3;
	stroke-linecap: round;
}

/* EXCEÇÃO DE COR aprovada por Pedro Mendes (17/07/2026): o cometa usa o
   laranja institucional (#F37B28) fixo (não é token, pois é a mesma cor
   nos dois temas), normalmente exclusivo de CTA (Plano Mestre, seção
   3.1). É o único elemento decorativo autorizado a usar essa cor —
   reforça a assinatura de movimento do Ecossistema sem competir com a
   hierarquia de conversão da página. Não usar laranja em nenhum outro
   elemento deste componente. */
.sc-flow-diagram__cometa {
	fill: #f37b28;
}

@media (prefers-reduced-motion: no-preference) {
	.sc-flow-diagram__cometa {
		animation: sc-flow-cometa 4.5s ease-in-out infinite;
		will-change: offset-distance;
	}
}

@keyframes sc-flow-cometa {
	from { offset-distance: 0%; }
	to   { offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-flow-diagram__cometa {
		offset-distance: 0%;
	}
}

.sc-flow-diagram__node rect {
	fill: var(--bg-alt);
	stroke: var(--accent);
	stroke-width: 1;
	cursor: help;
}

.sc-flow-diagram__node text {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 14px;
	fill: var(--text);
	pointer-events: none;
}

/* --------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------- */
@media (max-width: 640px) {
	.sc-flow-diagram__svg {
		min-height: 0;
	}
}