/* ===========================================================================
   MÓDULO CONTRATOS — Contratos
   ---------------------------------------------------------------------------
   Este arquivo veio do `public/styles.css` na CS2 do `CSS_POR_MODULO_LOOP.md`
   (item 35): são as regras que só esta tela usa. O que é de TODOS (a casca, os
   primitivos, o BI) continua em `styles.css`/sdk-ui, e o mapa de donos é
   `scripts/lib/modulos-do-front.js`. Carregado no `index.html` logo DEPOIS de
   `styles.css` — a ordem é o que preserva a cascata de antes da mudança.
   Regra nova de tela daqui nasce AQUI, não no `styles.css`.
   =========================================================================== */

.ct-novo-check { display: flex; gap: 0.5rem; align-items: center; font-size: 0.875rem; margin-top: 0.25rem; }

.ct-novo-legenda { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); margin: 0.6rem 0 0.1rem; }

/* CM9c (mockup §3): os chips de filtro por POSIÇÃO da lista e, na CM10b, os de ETAPA da aba
   "Auditoria". Um só marcado por vez (`aria-pressed`); o valor é o da coluna, nunca o texto do
   selo. Estilo do mockup aprovado — pílula com borda, preta quando ativa. */
.chips { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.2rem 0 0.8rem; }
.chip { border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.7rem; font-size: 0.78rem; background: var(--background); color: var(--foreground); font-family: inherit; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.chip:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 1px; }

/* ===========================================================================
   ST4c (item 88) — o cartão "Setup" da ficha e a janela "Gerar a fatura da
   implantação" (mockup `setup-fatura-parcelas-senha-mockup.html`, estados
   1/2/3/6/7). As parcelas viram CARTÕES pela largura da JANELA (@container),
   não pela da página — o mesmo desenho do mockup a 390 px.
   =========================================================================== */

.ct-setup-cartao { margin: 0.2rem 0 0.9rem; max-width: 46rem; }
.ct-setup-cartao-acao { margin-top: 0.6rem; }
.ct-setup-cartao-tabela { margin-top: 0.4rem; }

/* O FUNDO da janela é próprio, com z-index 55 — e NÃO o `.os-modal-fundo` (1000): o diálogo da
   senha de ação sensível (`.reaut-overlay`, 60) precisa abrir POR CIMA dela enquanto o POST não
   sai (o mesmo motivo do `.colab-modal`/`.cert-modal`; `.os-modal-fundo` cobriria o da senha). */
.ct-setup-fundo {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 1.5rem 1rem;
  background: color-mix(in oklch, var(--foreground) 35%, transparent);
}

.ct-setup-fundo[hidden] { display: none; }

.ct-setup-modal { max-width: 54rem; container-type: inline-size; container-name: janela; }
.ct-setup-sub { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--muted-foreground); }
.ct-setup-corpo { display: grid; gap: 0.8rem; }
.ct-setup-dica { flex: 1 1 14rem; font-size: 0.75rem; color: var(--muted-foreground); }

.ct-setup-bloco { border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ct-setup-bloco-cab { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border); background: var(--sidebar); border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-weight: 600; font-size: 0.85rem; }
.ct-setup-bloco-cab small { font-weight: 400; color: var(--muted-foreground); margin-left: auto; text-align: right; }
.ct-setup-bloco-corpo { padding: 0.35rem 0.8rem 0.8rem; min-width: 0; }
/* Estado 5 (ST4e): o aviso de que gerar NÃO emitiu nota, NÃO criou títulos e NÃO emitiu boleto. */
.ct-setup-informa { display: flex; gap: 0.4rem; align-items: flex-start; font-size: 0.8rem; color: var(--muted-foreground); }
.ct-setup-informa > .zr-icone { margin-top: 0.15em; flex: none; }
.ct-setup-passo { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 0.72rem; font-weight: 600; flex: none; }
.ct-setup-selo { margin-left: 0.4rem; }
.ct-setup-obs { display: block; font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.ct-setup-intro { font-size: 0.8rem; margin: 0.45rem 0 0.6rem; max-width: 70ch; }
.ct-setup-alerta { margin: 0.35rem 0 0.5rem; align-items: flex-start; }
.ct-setup-lista { margin: 0.3rem 0 0; padding-left: 1.1rem; }

.ct-setup-tabela { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ct-setup-tabela th { text-align: left; font-weight: 500; color: var(--muted-foreground); padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); }
.ct-setup-tabela td { padding: 0.45rem 0.5rem; border-bottom: 1px dashed var(--border); vertical-align: top; }
.ct-setup-tabela input[type="text"] { max-width: 9.5rem; }
.ct-setup-tabela select { max-width: 14rem; }
.ct-setup-cart { display: block; margin-top: 0.35rem; }
.ct-setup-cart[hidden] { display: none; }
.ct-setup-marca { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.78rem; line-height: 1.35; cursor: pointer; }
.ct-setup-campo-motivo { display: block; margin-top: 0.7rem; }
.ct-setup-campo-motivo[hidden] { display: none; }
.ct-setup-so-cartao { display: none; }

.ct-setup-conferir-acao { display: flex; gap: 0.5rem 0.8rem; align-items: center; flex-wrap: wrap; padding-top: 0.35rem; }
.ct-setup-conferir-acao .zr-help { margin: 0; flex: 1 1 14rem; }
.ct-setup-resultado { margin-top: 0.6rem; }
.ct-setup-legenda { font-size: 0.72rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin: 0 0 0.35rem; }
.ct-setup-conf { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ct-setup-conf th { text-align: left; font-weight: 500; color: var(--muted-foreground); padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); }
.ct-setup-conf td { padding: 0.45rem 0.5rem; border-bottom: 1px dashed var(--border); vertical-align: top; }
.ct-setup-conf tfoot td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--border); }
.ct-setup-mudou { background: var(--info-bg-soft); color: var(--info-strong); border-radius: var(--radius-sm); padding: 0 0.25rem; font-weight: 600; }
.ct-setup-avisos { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.ct-setup-avisos li { display: flex; gap: 0.4rem; align-items: flex-start; font-size: 0.82rem; }
.ct-setup-avisos li > svg { margin-top: 0.2em; }
.ct-setup-av-ok { color: var(--success-strong); }
.ct-setup-av-info { color: var(--info-strong); }

/* Celular (390 px) — o mockup estado 6: cada parcela vira um cartão, com o rótulo de cada campo. */
@container janela (max-width: 40rem) {
  .ct-setup-cartoes thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ct-setup-cartoes, .ct-setup-cartoes tbody, .ct-setup-cartoes td { display: block; }
  .ct-setup-cartoes tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 0.7rem; margin: 0.5rem 0 0; }
  .ct-setup-cartoes td { padding: 0; border: 0; }
  .ct-setup-cartoes td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 0.72rem; color: var(--muted-foreground); margin-bottom: 0.1rem; }
  .ct-setup-cartoes td.cheia { grid-column: 1 / -1; }
  .ct-setup-cartoes input[type="text"], .ct-setup-cartoes select { max-width: none; width: 100%; }
  .ct-setup-so-cartao { display: inline; font-weight: 400; }
  .ct-setup-conf thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .ct-setup-conf, .ct-setup-conf tbody, .ct-setup-conf tfoot, .ct-setup-conf td { display: block; }
  .ct-setup-conf tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 0.7rem; margin: 0.5rem 0 0; }
  .ct-setup-conf td { padding: 0; border: 0; }
  .ct-setup-conf td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 0.72rem; color: var(--muted-foreground); margin-bottom: 0.1rem; }
  .ct-setup-conf tfoot td:nth-child(4) { display: none; }
  .ct-setup-dica { flex: 1 1 100%; }
  .os-modal-rodape .zr-btn { flex: 1 1 0; }
}