/* A página usa a tipografia, as cores, as seções e os controles do portal.
   Este CSS cuida somente do desenho dos fluxos, que não é um controle operacional.
   Cores: okaiCyan, neutral e info do tailwind.config.js. */
.fluxos-page [hidden] { display: none !important; }
.fluxos-page #exemplos, .fluxos-page #operacao, .fluxos-page #customizacao { scroll-margin-top: 96px; }
.fluxo-diagrama { margin: 0; padding: 24px; border-radius: 16px; background: radial-gradient(circle at 1px 1px, #D3CDFD 1px, transparent 0) 0 0 / 24px 24px, linear-gradient(120deg, #F5F9FF, #F1F0FF 58%, #FFF5FB); color: #3F4352; }
.fluxo-diagrama__cabecalho { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.fluxo-diagrama__simbolo { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; background: #fff; color: #3473CC; }
.fluxo-diagrama__cabecalho strong { display: block; font-size: 18px; font-weight: 600; line-height: 24px; }
.fluxo-diagrama__titulo > span { display: block; margin-top: 4px; color: #6B7280; font-size: 14px; line-height: 21px; }
.fluxo-diagrama__percurso { display: grid; align-items: center; }
.fluxo-diagrama__percurso--decisao { grid-template-columns: 3fr 1fr; gap: 32px; }
.fluxo-diagrama__etapas { display: grid; grid-template-columns: repeat(var(--etapas), minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.fluxo-diagrama__etapa { position: relative; min-width: 0; }
.fluxo-diagrama__etapa + .fluxo-diagrama__etapa::before { content: ''; position: absolute; top: 50%; left: -32px; width: 32px; border-top: 2px solid #8FB5EB; }
.fluxo-diagrama__etapa + .fluxo-diagrama__etapa::after { content: ''; position: absolute; top: calc(50% - 3px); left: -6px; width: 6px; height: 6px; border-top: 2px solid #8FB5EB; border-right: 2px solid #8FB5EB; transform: rotate(45deg); }
.fluxo-diagrama__cartao { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 168px; padding: 20px; border: 1px solid var(--borda); border-top: 3px solid var(--tom); border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(54,43,135,.05); transition: transform 450ms ease, box-shadow 450ms ease, background 450ms ease; }
.fluxo-diagrama__identidade { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.fluxo-diagrama__icone { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fundo); color: var(--tom); }
.fluxo-diagrama__numero { font-size: 14px; line-height: 21px; color: #6B7280; }
.fluxo-diagrama__cartao > strong { font-size: 16px; line-height: 24px; font-weight: 600; }
.fluxo-diagrama__responsavel { margin-top: 8px; color: #6B7280; font-size: 14px; line-height: 21px; }
.fluxo-diagrama__saidas { position: relative; display: grid; gap: 24px; }
.fluxo-diagrama__saidas::before { content: ''; position: absolute; left: -32px; top: 50%; width: 16px; border-top: 2px solid #8FB5EB; }
.fluxo-diagrama__saidas::after { content: ''; position: absolute; left: -16px; top: 23%; bottom: 23%; width: 16px; border: 2px solid #8FB5EB; border-right: 0; border-radius: 8px 0 0 8px; }
.fluxo-diagrama__saida { display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 16px; border: 1px solid var(--borda); border-radius: 12px; background: #fff; color: var(--tom); transition: background 450ms ease, box-shadow 450ms ease, transform 450ms ease; }
.fluxo-diagrama__saida > svg { flex-shrink: 0; }
.fluxo-diagrama__saida strong { display: block; color: #3F4352; font-size: 14px; line-height: 21px; font-weight: 600; }
.fluxo-diagrama__saida span { display: block; color: #6B7280; font-size: 12px; line-height: 18px; margin-top: 4px; }
.fluxo-diagrama__retorno { display: flex; justify-content: center; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid #E2E4F0; }
.fluxo-diagrama__retorno > span { display: inline-flex; align-items: center; gap: 8px; color: #6B7280; font-size: 14px; line-height: 21px; }
/* Paleta do portal: okaiCyan, okaiBlue, okaiPink, green e yellow. */
.fluxo-diagrama [data-cor="azul"] { --tom: #3473CC; --fundo: #F5F9FF; --borda: #BFD6F5; }
.fluxo-diagrama [data-cor="roxo"] { --tom: #6E5FDD; --fundo: #F1F0FF; --borda: #D3CDFD; }
.fluxo-diagrama [data-cor="rosa"] { --tom: #C75098; --fundo: #FFF5FB; --borda: #F4D9E9; }
.fluxo-diagrama [data-cor="verde"] { --tom: #0E872C; --fundo: #DDF8E2; --borda: #A8E1B6; }
.fluxo-diagrama [data-cor="ambar"] { --tom: #BE6700; --fundo: #FFF8E5; --borda: #FFD27A; }
.fluxo-diagrama__titulo { flex: 1; min-width: 0; }
.fluxo-diagrama__status { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 18px; padding: 4px 8px; border-radius: 6px; font-size: 12px; line-height: 18px; color: #6B7280; background: #F7F8FC; }
.fluxo-diagrama__etapa[data-estado="ativa"] .fluxo-diagrama__cartao { background: var(--fundo); transform: translateY(-4px); box-shadow: 0 8px 24px color-mix(in srgb, var(--tom) 18%, transparent); }
.fluxo-diagrama__etapa[data-estado="ativa"] .fluxo-diagrama__icone { background: var(--tom); color: #fff; animation: fluxo-respirar 2400ms ease-in-out infinite; }
.fluxo-diagrama__etapa[data-estado="ativa"] .fluxo-diagrama__status,
.fluxo-diagrama__etapa[data-estado="concluida"] .fluxo-diagrama__status { color: var(--tom); background: var(--fundo); }
.fluxo-diagrama__etapa[data-estado="concluida"]::before { border-color: var(--tom); }
.fluxo-diagrama__sinal { position: absolute; z-index: 2; top: calc(50% - 4px); left: -32px; width: 8px; height: 8px; border-radius: 50%; background: var(--tom); opacity: 0; }
.fluxo-diagrama__etapa[data-estado="ativa"] .fluxo-diagrama__sinal { animation: fluxo-encaminhar 800ms ease-out both; }
.fluxo-diagrama__saida[data-selecionada="true"] { background: var(--fundo); border-color: var(--tom); box-shadow: 0 5px 20px color-mix(in srgb, var(--tom) 16%, transparent); transform: translateX(4px); }
.fluxo-diagrama__saida[data-selecionada="true"] > svg { animation: fluxo-confirmar 500ms ease-out both; }
.fluxo-diagrama__andamento { margin-top: 28px; padding: 16px 20px; border: 1px solid #E2E4F0; border-radius: 12px; background: #fff; }
.fluxo-diagrama__mensagem { display: flex; align-items: center; gap: 10px; min-height: 24px; font-size: 14px; line-height: 21px; color: #5E50C7; }
.fluxo-diagrama__mensagem > svg { flex-shrink: 0; }
.fluxo-diagrama__mensagem[data-concluido="true"] { color: #0E872C; }
.fluxo-diagrama[data-resultado="adequacao"] .fluxo-diagrama__mensagem[data-concluido="true"] { color: #BE6700; }
.fluxo-diagrama__progresso { height: 4px; margin-top: 12px; background: #EDF0F7; border-radius: 4px; overflow: hidden; }
.fluxo-diagrama__progresso > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4A83D4, #6E5FDD 55%, #C75098); transition: width 700ms cubic-bezier(.2,.8,.2,1); }
.fluxo-diagrama[data-passo="0"] .fluxo-diagrama__progresso > span { transition: none; }
.fluxo-diagrama[data-animando="false"] * { animation-play-state: paused !important; }
@keyframes fluxo-respirar { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tom) 20%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tom) 0%, transparent); } }
@keyframes fluxo-encaminhar { 0% { opacity: 0; transform: translateX(0); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(32px); } }
@keyframes fluxo-encaminhar-vertical { 0% { opacity: 0; transform: translateY(0); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(24px); } }
@keyframes fluxo-confirmar { from { opacity: .4; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 1023px) {
    .fluxo-diagrama__percurso--decisao { grid-template-columns: 1fr; gap: 32px; }
    .fluxo-diagrama__saidas { grid-template-columns: 1fr 1fr; }
    .fluxo-diagrama__saidas::before { left: 50%; top: -32px; width: 0; height: 16px; border-top: 0; border-left: 2px solid #8FB5EB; }
    .fluxo-diagrama__saidas::after { left: 25%; right: 25%; top: -16px; bottom: auto; width: auto; height: 16px; border: 2px solid #8FB5EB; border-bottom: 0; border-radius: 8px 8px 0 0; }
    .fluxo-diagrama__cartao { padding: 16px; }
    .fluxo-diagrama { padding: 20px 16px; }
    .fluxo-diagrama__cabecalho { flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
    .fluxo-diagrama__cabecalho strong { font-size: 16px; }
    .fluxo-diagrama__titulo > span { font-size: 12px; line-height: 18px; }
    .fluxo-diagrama__etapas { grid-template-columns: 1fr; gap: 24px; }
    .fluxo-diagrama__cartao { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; min-height: 0; padding: 16px; }
    .fluxo-diagrama__identidade { grid-row: 1 / 4; margin: 0; }
    .fluxo-diagrama__numero { display: none; }
    .fluxo-diagrama__responsavel { margin-top: 4px; }
    .fluxo-diagrama__etapa + .fluxo-diagrama__etapa::before { top: -24px; left: 50%; width: 0; height: 24px; border-top: 0; border-left: 2px solid #8FB5EB; }
    .fluxo-diagrama__etapa + .fluxo-diagrama__etapa::after { top: -6px; left: calc(50% - 2px); transform: rotate(135deg); }
    .fluxo-diagrama__saida { flex-direction: column; align-items: flex-start; padding: 12px; gap: 8px; }
    .fluxo-diagrama__saidas { gap: 12px; }
    .fluxo-diagrama__retorno > span { font-size: 12px; line-height: 18px; }
    .fluxo-diagrama__retorno svg { flex-shrink: 0; }
    .fluxo-diagrama__status { grid-column: 2; justify-self: start; margin-top: 8px; }
    .fluxo-diagrama__sinal { top: -24px; left: calc(50% - 3px); }
    .fluxo-diagrama__etapa[data-estado="ativa"] .fluxo-diagrama__sinal { animation-name: fluxo-encaminhar-vertical; }
    .fluxo-diagrama__andamento { padding: 14px; }
    .fluxo-diagrama__saida[data-selecionada="true"] { transform: translateY(3px); }
}

@media (max-width: 639px) {
    .fluxo-diagrama__cabecalho { display: grid; grid-template-columns: 48px minmax(0, 1fr); }
    .fluxo-diagrama__cabecalho > button { grid-column: 1 / -1; justify-self: end; }
}

/* O exemplo detalhado compartilha os mesmos cartões e controles do hero.
   A segunda linha só é percorrida quando a avaliação indica adequação. */
.fluxo-diagrama__decisao { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 32px 0; }
.fluxo-diagrama__decisao-titulo { display: none; }
.fluxo-diagrama__decisao::before { content: ''; position: absolute; top: -16px; left: calc(25% - 3px); right: calc(25% - 3px); border-top: 2px solid #8FB5EB; }
.fluxo-diagrama__decisao::after { content: ''; position: absolute; top: -32px; left: 50%; height: 16px; border-left: 2px solid #8FB5EB; }
.fluxo-diagrama__decisao .fluxo-diagrama__saida { position: relative; min-height: 72px; }
.fluxo-diagrama__decisao .fluxo-diagrama__saida::before { content: ''; position: absolute; top: -16px; left: 50%; height: 16px; border-left: 2px solid #8FB5EB; }
.fluxo-diagrama__decisao .fluxo-diagrama__saida[data-selecionada="true"] { transform: none; }
.fluxo-diagrama__decisao .fluxo-diagrama__saida[data-selecionada="true"]::before { border-color: var(--tom); }
.fluxo-diagrama__ramo--adequacao::after { content: ''; position: absolute; bottom: -18px; left: -7px; right: 50%; height: 18px; border-right: 2px solid #8FB5EB; border-bottom: 2px solid #8FB5EB; border-radius: 0 0 8px 0; }
.fluxo-diagrama__ramo--adequacao[data-selecionada="true"]::after { border-color: var(--tom); }
.fluxo-diagrama__etapas--adequacao { position: relative; }
.fluxo-diagrama__etapas--adequacao::before { content: ''; position: absolute; top: -14px; left: 50%; height: 14px; border-left: 2px solid #8FB5EB; }
.fluxo-diagrama__etapa[data-estado="condicional"] .fluxo-diagrama__cartao,
.fluxo-diagrama__etapa[data-estado="dispensada"] .fluxo-diagrama__cartao { border-style: dashed; box-shadow: none; }
.fluxo-diagrama__etapa[data-estado="dispensada"] .fluxo-diagrama__cartao { background: #F7F8FC; border-color: #CBD0DB; }
.fluxo-diagrama__etapa[data-estado="dispensada"] .fluxo-diagrama__icone { background: #EDF0F7; color: #6B7280; }
.fluxo-diagrama.fluxo-diagrama--duas-linhas .fluxo-diagrama__mensagem[data-concluido="true"] { color: #0E872C; }
@keyframes fluxo-encaminhar-reverso { 0% { opacity: 0; transform: translateX(0); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-32px); } }
@keyframes fluxo-descer { 0% { opacity: 0; transform: translateY(0); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(32px); } }
@media (min-width: 1024px) {
    .fluxo-diagrama--duas-linhas .fluxo-diagrama__cartao { min-height: 160px; padding: 16px; }
    .fluxo-diagrama--duas-linhas .fluxo-diagrama__identidade { margin-bottom: 12px; }
    .fluxo-diagrama--duas-linhas .fluxo-diagrama__status { margin-top: 12px; }
    .fluxo-diagrama__decisao { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
    .fluxo-diagrama__decisao-titulo { display: flex; align-items: center; color: #6B7280; font-size: 14px; line-height: 21px; }
    .fluxo-diagrama__decisao::before { left: 50%; right: calc(16.6667% - 10.6667px); }
    .fluxo-diagrama__decisao::after { left: auto; right: calc(16.6667% - 10.6667px); }
    .fluxo-diagrama__ramo--adequacao::after { bottom: -32px; left: 50%; right: auto; height: 32px; border: 0; border-left: 2px solid #8FB5EB; border-radius: 0; }
    .fluxo-diagrama__ramo--adequacao[data-selecionada="true"]::after { border-color: var(--tom); }
    .fluxo-diagrama__etapas--adequacao::before { display: none; }
    .fluxo-diagrama__etapas--adequacao > :nth-child(1) { grid-column: 3; grid-row: 1; }
    .fluxo-diagrama__etapas--adequacao > :nth-child(2) { grid-column: 2; grid-row: 1; }
    .fluxo-diagrama__etapas--adequacao > :nth-child(3) { grid-column: 1; grid-row: 1; }
    .fluxo-diagrama__etapas--adequacao .fluxo-diagrama__etapa + .fluxo-diagrama__etapa::before { left: auto; right: -32px; }
    .fluxo-diagrama__etapas--adequacao .fluxo-diagrama__etapa + .fluxo-diagrama__etapa::after { left: auto; right: -6px; transform: rotate(-135deg); }
    .fluxo-diagrama__etapas--adequacao .fluxo-diagrama__sinal { left: auto; right: -32px; }
    .fluxo-diagrama__etapas--adequacao .fluxo-diagrama__etapa[data-estado="ativa"] .fluxo-diagrama__sinal { animation-name: fluxo-encaminhar-reverso; }
    .fluxo-diagrama__etapas--adequacao .fluxo-diagrama__etapa:first-child .fluxo-diagrama__sinal { top: -32px; right: auto; left: calc(50% - 4px); animation-name: fluxo-descer; }
}

@media (prefers-reduced-motion: reduce) {
    .fluxo-diagrama *, .fluxo-diagrama *::before, .fluxo-diagrama *::after { animation: none !important; transition: none !important; }
    .fluxo-diagrama__cartao, .fluxo-diagrama__saida { transform: none !important; }
    .fluxo-diagrama__sinal, .fluxo-diagrama__andamento, .fluxo-diagrama__status { display: none; }
}