/* MOVORÇA — Round 3 (UX). Arquivo separado do app.css para não conflitar com as regras de toast
   que estão sendo mexidas no app.css. Carregado depois do app.css em base.html. */

/* --- M3: etapas da jornada (E-mail · Serviço · Revisar · PDF) --- */
.journey { margin: 0 0 18px; }
.journey ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.journey-step { display: flex; align-items: center; gap: 8px; color: var(--ink-dim); font-size: .9rem; font-weight: 700; }
.journey-step + .journey-step::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--line); margin-right: 2px; }
.journey-dot {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #d9cfc6; background: #fff; color: var(--ink-dim);
  font-size: .8rem; font-weight: 800; line-height: 1;
}
.journey-step.is-done { color: var(--ink); }
.journey-step.is-done .journey-dot { border-color: var(--gold-2); background: #fff3ec; color: var(--gold-2); }
.journey-step.is-done + .journey-step::before { background: var(--gold-2); }
.journey-step.is-current { color: var(--ink); }
.journey-step.is-current .journey-dot { border-color: var(--gold-2); background: var(--gold-2); color: #fff; }
@media (max-width: 420px) {
  .journey ol { gap: 4px; }
  .journey-step { gap: 5px; font-size: .82rem; }
  .journey-step + .journey-step::before { width: 10px; }
  .journey-dot { width: 24px; height: 24px; }
}
.wizard .step-label { color: var(--ink-dim); letter-spacing: .08em; }

/* --- B11 + teclado: radios de área/modelo ficavam com display:none (fora do Tab). Agora só ficam invisíveis. --- */
.area-card, .layout-card { position: relative; }
.area-card input, .pick input, .layout-card input {
  display: block; position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; opacity: 0;
}
.area-grid[aria-invalid="true"] .area-card { border-color: #b42318; }
.wizard [data-area-status] { margin: 12px 0 0; }

/* --- B9: contraste (WCAG AA 4,5:1 para texto normal). Medido pelas cores do CSS:
   --gold #f15a24: 3,37 no #fff · 3,05 no --bg #f6f3ee  -> reprova como texto
   --gold-2 #c2410c: 5,18 no #fff · 4,68 no --bg        -> passa
   #ff8a80 (erro): 2,28 no #fff · 2,06 no --bg          -> reprova; #b42318: 6,57 / 5,94
   branco em --gold (btn-gold): 3,37 -> reprova; branco em --gold-2: 5,18
   #8a8376 (rodapé do documento): 3,76 no #fff -> reprova; #6f6a60: 5,38
   --ink-dim #6d6560: 5,71 no #fff · 5,15 no --bg · 5,48 no vidro (#fdfaf6) -> passa, sem mudança --- */
.kicker, .pix-label { color: var(--gold-2); }
.nav-links a.is-on, .nav-links a:hover, .nav-quiet:hover { color: var(--gold-2); }
.btn-gold { background: var(--gold-2); box-shadow: 0 8px 18px rgba(194, 65, 12, 0.22); }
.btn-gold:hover { background: #9a3412; }
.form-status.is-error, .ai-status.is-error { color: #b42318; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: #b42318 !important;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .14);
}
.doc-foot { color: #6f6a60; }

/* --- M4: revisão com a visualização ao lado no desktop; no mobile o botão vem depois da visualização --- */
.preview-submit { margin-top: 18px; }
.preview-submit .quota-note { margin: 0 0 8px; }
@media (min-width: 1180px) {
  .page-wrap.preview-layout {
    width: min(1320px, calc(100% - 40px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    grid-template-areas: "journey journey" "notice notice" "form live" "submit live";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 28px;
    align-items: start;
  }
  .preview-layout > .preview-journey { grid-area: journey; }
  .preview-layout > .draft-expired { grid-area: notice; }
  .preview-layout > form { grid-area: form; min-width: 0; }
  .preview-layout > .layout-live {
    grid-area: live; margin-top: 0;
    position: sticky; top: 84px;
    max-height: calc(100vh - 100px); overflow: auto;
    overscroll-behavior: contain; padding-right: 4px;
  }
  .preview-layout > .preview-submit { grid-area: submit; }
  .preview-layout .two-col { grid-template-columns: 1fr; }
  .preview-layout .layout-grid { grid-template-columns: repeat(3, 1fr); }
  .preview-layout .preview-jump { display: none; }
  .preview-layout .layout-live h2 { font-size: 1.4rem; }
}

/* --- B6: tabela do painel no mobile — sombra indicando que dá para rolar para o lado --- */
@media (max-width: 760px) {
  .sheet-scroll {
    background:
      linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
      linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(80, 42, 12, .18), rgba(80, 42, 12, 0)) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(80, 42, 12, .18), rgba(80, 42, 12, 0)) right center / 14px 100% no-repeat scroll;
  }
  .sheet-table td.sheet-act-col { background: #fffaf6; box-shadow: -8px 0 12px -10px rgba(80, 42, 12, .35); }
}

/* Round 3b: descartar rascunho (Caio, round 7) fica logo abaixo do Gerar,
   separado por uma linha, pequeno e em vermelho: secundário e destrutivo. */
.preview-submit .discard-form {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 24px; padding-top: 12px; border-top: 1px dashed rgba(180, 35, 24, .25);
}
.preview-submit .discard-form .hint { margin: 0; }
.btn-danger-ghost { color: #b42318; border-color: rgba(180, 35, 24, .35); background: transparent; }
.btn-danger-ghost:hover, .btn-danger-ghost:focus-visible { color: #fff; background: #b42318; border-color: #b42318; }
/* Gerar desabilitado (rascunho expirado): sem isso o botão parecia ativo. */
.preview-submit .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }