/* Percurso: contrato visual comum das telas. Carregar depois dos tokens e do CSS da superfície. */
.para-que { max-width: 65ch; color: var(--muted-foreground); font-size: 1rem; line-height: 1.5; }
.passos { list-style: none; margin: 0; padding: 0; }
.passo-estado { display: block; margin-top: 5px; color: var(--muted-foreground); font-size: 1rem; }
.passos [aria-current="step"] .passo-estado { color: var(--foreground); font-weight: 500; }
.parte-falhou, .faixa-dados { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--card); color: var(--foreground); }
.parte-falhou > svg, .faixa-dados > svg { flex: none; width: 22px; height: 22px; margin-top: 3px; }
.parte-falhou p, .faixa-dados p { margin: 0; }
.parte-falhou p + p, .faixa-dados p + p { margin-top: 6px; color: var(--muted-foreground); }
.parte-falhou strong, .faixa-dados strong { font-weight: 500; }
.parte-falhou .text-button, .faixa-dados .text-button { margin-top: 8px; font-size: 1rem; }
.faixa-dados { background: var(--review-background); color: var(--review-foreground); border: 0; }
.faixa-dados p + p { color: inherit; }
.estado-carregando { min-height: 300px; }
.estado-carregando > p { display: flex; align-items: center; gap: 10px; color: var(--muted-foreground); }
.linhas-carregando { list-style: none; padding: 0; margin: 24px 0; }
.linhas-carregando li { padding: 20px 0; border-bottom: 1px solid var(--border); }
.linhas-carregando span { display: block; height: 18px; width: 65%; background: var(--input); border-radius: 4px; }
.linhas-carregando span + span { width: 40%; margin-top: 12px; height: 14px; }
.percurso-traco { position: relative; height: 20px; margin: 14px 0 22px; color: var(--brand); }
.percurso-traco::before { content: ''; position: absolute; inset: 9px 0 auto; height: 1px; background: var(--border); }
.percurso-traco::after { content: ''; position: absolute; top: 6px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.percurso-traco[data-passo="2"]::after { left: calc(50% - 3px); }
.percurso-traco[data-passo="3"]::after, .percurso-traco[data-passo="4"]::after { left: calc(100% - 7px); }
.percurso-traco canvas { display: block; width: 100%; height: 20px; pointer-events: none; position: relative; visibility: hidden; }
.percurso-traco.is-rendered canvas { visibility: visible; }
.percurso-traco.is-rendered::before, .percurso-traco.is-rendered::after { visibility: hidden; }
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .percurso-traco canvas { display: none; }
  .percurso-traco.is-rendered::before, .percurso-traco.is-rendered::after { visibility: visible; }
}
@media (forced-colors: active) {
  :root, :root.dark {
    --background: Canvas;
    --foreground: CanvasText;
    --card: Canvas;
    --muted: Canvas;
    --accent: Canvas;
    --muted-foreground: CanvasText;
    --border: CanvasText;
    --line-strong: CanvasText;
    --ring: Highlight;
    --brand: LinkText;
    --action: ButtonFace;
    --action-foreground: ButtonText;
    --status-background: Canvas;
    --status-foreground: CanvasText;
    --review-background: Canvas;
    --review-foreground: CanvasText;
    --destructive: CanvasText;
  }
  .parte-falhou, .faixa-dados { border: 1px solid CanvasText; }
  .percurso-traco::before, .percurso-traco::after { background: CanvasText; }
}
@media print { .faixa-dados, .percurso-traco { display: none !important; } }