/* Viradas: lista com progresso e linha do tempo das etapas, na linha clean. */

.virada-barra { height: 8px; border-radius: 99px; background: var(--vs-azul-nevoa); overflow: hidden; }
.virada-barra__cheia { height: 100%; border-radius: 99px; background: var(--vs-selo); transition: width .3s ease; }

.virada-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.virada-cartao { background: #fff; border: 1px solid var(--vs-linha); border-radius: 16px; padding: 18px; box-shadow: var(--sombra); display: grid; gap: 10px; text-decoration: none; color: inherit; }
.virada-cartao:hover { border-color: var(--vs-azul-vivo); }
.virada-cartao__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.virada-cartao__nome { font-family: var(--titulo); font-weight: 700; font-size: 15px; }
.virada-cartao__apoio { font-size: 13px; color: var(--vs-texto); }
.virada-cartao__linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.virada-cartao__linha .etiqueta { white-space: normal; }

.virada-resumo__linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.virada-resumo__contagem { display: inline-flex; align-items: center; gap: 6px; font-family: var(--titulo); font-weight: 700; color: var(--vs-azul-profundo); }
.virada-resumo__proxima { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--vs-azul-profundo); text-decoration: none; }

.virada-linha { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.virada-linha::before { content: ''; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--vs-linha); }

.virada-etapa { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.virada-etapa__numero { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--vs-linha); font-family: var(--titulo); font-weight: 800; font-size: 15px; color: var(--vs-texto); }
.virada-etapa__corpo { background: #fff; border: 1px solid var(--vs-linha); border-radius: 16px; padding: 16px 18px; box-shadow: var(--sombra); display: grid; gap: 12px; min-width: 0; }
.virada-etapa__topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.virada-etapa__nome { font-family: var(--titulo); font-weight: 700; font-size: 16px; margin: 0; margin-right: auto; }
.virada-etapa__bloco { display: grid; gap: 4px; }
.virada-etapa__bloco p { margin: 0; font-size: 14px; line-height: 1.5; }
.virada-etapa__rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vs-azul); }
.virada-etapa__bloco--cuidado { background: var(--atencao-fundo); border-radius: 10px; padding: 10px 12px; }
.virada-etapa__bloco--cuidado .virada-etapa__rotulo { color: var(--atencao-texto); }
.virada-etapa__travas { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 2px; color: var(--atencao-texto); font-weight: 500; }
.virada-etapa__funcoes { display: flex; gap: 8px; flex-wrap: wrap; }
.virada-funcao { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border: 1px solid var(--vs-linha); border-radius: 10px; background: #F7F9FB; text-decoration: none; color: inherit; font-size: 13px; }
.virada-funcao:hover { border-color: var(--vs-azul-vivo); }
.virada-funcao__nome { font-weight: 600; }
.virada-etapa__formulario { display: grid; gap: 10px; border-top: 1px dashed var(--vs-linha); padding-top: 12px; }
.virada-etapa__acao { display: inline-flex; align-items: center; gap: 4px; }
.virada-etapa__rodape { font-size: 12px; color: var(--vs-texto); }
.virada-etapa__trava { border-left-color: var(--atencao-borda); background: var(--atencao-fundo); box-shadow: none; }

.virada-etapa--atual .virada-etapa__numero { border-color: var(--vs-azul); color: var(--vs-azul); box-shadow: 0 0 0 4px var(--vs-azul-nevoa); }
.virada-etapa--atual .virada-etapa__corpo { border-color: var(--vs-azul-vivo); }
.virada-etapa--em_andamento .virada-etapa__numero { border-color: var(--vs-azul); color: var(--vs-azul); }
.virada-etapa--concluida .virada-etapa__numero { background: var(--vs-selo); border-color: transparent; color: #fff; }
.virada-etapa--nao_se_aplica .virada-etapa__numero { background: #F3F5F8; color: #9A949A; }
.virada-etapa--nao_se_aplica .virada-etapa__corpo { opacity: .7; }
.virada-etapa--travada .virada-etapa__corpo { background: #FAFBFC; }
.virada-etapa--travada .virada-etapa__numero { border-style: dashed; border-color: var(--atencao-borda); color: var(--atencao-texto); }

@media (max-width: 600px) {
  .virada-linha::before { left: 15px; }
  .virada-etapa { grid-template-columns: 32px 1fr; gap: 10px; }
  .virada-etapa__numero { width: 32px; height: 32px; font-size: 13px; }
  .virada-etapa__corpo { padding: 14px; }
}