/* ============================================================
   Fluxograma — passos conectados por setas, feito pra esta
   apresentação de "como funciona" (i9/feal/apresentacao),
   21/09/2026: "bem sucinta por tópicos que mostre como funciona
   em fluxograma a ferramenta i9/feal e i9/rodada-de-negocios". Reaproveita
   as variáveis de cor de tema-azul-rodada.css (mesmo arquivo da
   apresentação institucional do FEAL, ../../apresentacao/feal/).
   ============================================================ */

.i9-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: .5rem 0;
}
.i9-flow .flow-step {
  background: #fff;
  border: 1px solid var(--i9-borda, #d7e5fb);
  border-radius: 16px;
  padding: 16px 14px;
  min-width: 150px;
  max-width: 190px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(11, 30, 77, .06);
}
.i9-flow .flow-step .flow-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--i9-creme, #eef4ff);
  color: var(--i9-dourado, #1D4ED8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin: 0 auto 10px;
}
.i9-flow .flow-step .flow-label {
  font-weight: 700;
  font-size: .88rem;
  color: #1f2937;
  line-height: 1.3;
}
.i9-flow .flow-step .flow-sub {
  font-size: .76rem;
  color: #6b7280;
  margin-top: 4px;
  line-height: 1.35;
}
.i9-flow .flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--i9-dourado, #1D4ED8);
  font-size: 1.3rem;
  padding: 0 8px;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .i9-flow { flex-direction: column; align-items: center; }
  .i9-flow .flow-step { max-width: 280px; width: 100%; }
  .i9-flow .flow-arrow { padding: 4px 0; }
  .i9-flow .flow-arrow i { transform: rotate(90deg); }
}

/* Diagrama-resumo da visão geral (passo 2) — blocos um pouco maiores,
   uma "fase" por bloco (comissão / fornecedor / comprador / encontro). */
.i9-flow-fases .flow-step { min-width: 170px; max-width: 210px; }
.i9-flow-fases .flow-step .flow-icon { width: 54px; height: 54px; font-size: 1.5rem; }

/* Selo "de quem é essa ação", no alto de cada passo de papel (comissão,
   fornecedor, comprador) -- reforça o dono da ação sem repetir no texto. */
.i9-papel-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--i9-creme, #eef4ff);
  border: 1px solid var(--i9-borda, #d7e5fb);
  color: var(--i9-dourado-escuro, #12296B);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .8rem;
  font-weight: 700;
}

/* Lista de links de acesso (passo 7) */
.i9-links-acesso .link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--i9-borda, #d7e5fb);
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.i9-links-acesso .link-card:hover {
  box-shadow: 0 6px 18px rgba(11, 30, 77, .12);
  transform: translateY(-1px);
}
.i9-links-acesso .link-card .flow-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--i9-creme, #eef4ff);
  color: var(--i9-dourado, #1D4ED8);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.i9-links-acesso .link-card strong { display: block; color: #1f2937; }
.i9-links-acesso .link-card span { font-size: .82rem; color: #6b7280; }