/*
 * 77Contract — design system base (Sprint 10: telas gerais)
 *
 * Tokens and reusable component classes ported from the design canvas
 * (`project/Main.dc.html`). Kept as a small, versioned stylesheet — rather
 * than an inline <style> block in base.html — because sprints 11 and 12
 * (app shell / workspace screens) reuse the same tokens and classes.
 *
 * Palette (see Main.dc.html "Cor"):
 *   Tinta     #181A20  texto, títulos
 *   Noturno   #1C2436  navegação, rodapé
 *   Papel     #F6F5F1  fundo
 *   Latão     #A9761F  ação primária
 *   Em dia    #3F7859  status ok
 *   Vencido   #B6442E  status crítico
 */

:root {
  --cl-ink: #181a20;
  --cl-noturno: #1c2436;
  --cl-paper: #f6f5f1;
  --cl-brass: #a9761f;
  --cl-brass-hover: #8e6119;
  --cl-ok: #3f7859;
  --cl-critical: #b6442e;

  /* Neutros quentes intermediários */
  --cl-stone-50: #f0eee6;
  --cl-stone-100: #e2dfd4;
  --cl-stone-200: #dedad0;
  --cl-stone-300: #d4d0c4;
  /* stone-500 = texto secundário (legendas, abas inativas, hints, nomes de
     contraparte). Era #8c8a80 -- ~3,2:1 sobre o papel, abaixo do mínimo
     WCAG AA de 4,5:1 para 12,5-14px (auditoria 23/10/2026, UX-004). Agora
     >= 4,5:1 sobre papel, branco, #fffbf3 e stone-50 (tests/
     test_contrast_tokens.py); a hierarquia vem do peso/tamanho e de
     stone-700 continuar mais escuro. O tom antigo segue como stone-400,
     só para bordas/ícones decorativos (não é cor de texto). */
  --cl-stone-400: #8c8a80;
  --cl-stone-500: #696860;
  --cl-stone-700: #55564f;
  --cl-stone-900: #33342e;

  /* Fundos/texto de status (pills, badges) */
  --cl-ok-bg: #e4eee7;
  --cl-ok-fg: #2b5e43;
  --cl-brass-bg: #f6ead1;
  --cl-brass-fg: #7a5712;
  --cl-critical-bg: #f2dbd4;
  --cl-critical-fg: #8c3620;
  --cl-neutral-bg: #eceae2;
  --cl-neutral-fg: #6b6a61;
}

/* Números tabulares para datas/valores (ver Main.dc.html) */
.mono-num {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------- */
/* Botões                                                                   */
/* ---------------------------------------------------------------------- */

.btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 13px 24px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--cl-brass);
  color: #fbf4e6;
}
.btn-primary:hover {
  background: var(--cl-brass-hover);
}

.btn-dark {
  background: var(--cl-ink);
  color: var(--cl-paper);
}
.btn-dark:hover {
  background: #2b2e38;
}

.btn-outline {
  background: transparent;
  color: var(--cl-ink);
  border: 1.5px solid var(--cl-stone-300);
  padding: 12px 23px;
}
.btn-outline:hover {
  border-color: var(--cl-stone-400);
}

/* Ação irreversível/sensível (excluir, suspender, bloquear...) -- usada
   pelo modal de confirmação (`_macros/confirm_modal.html`) no lugar do
   confirm() nativo; não existia uma variante "crítica" de .btn até aqui. */
.btn-critical {
  background: var(--cl-critical);
  color: #fdf1ee;
}
.btn-critical:hover {
  background: #9a3922;
}

.btn-ghost {
  background: transparent;
  color: var(--cl-stone-500);
  padding: 13px 8px;
}

.btn[disabled],
.btn-ghost[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------------------------------------------------------------------- */
/* Badges / status pills                                                   */
/* ---------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 100px;
  white-space: nowrap;
  width: fit-content;
}
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.badge-ok {
  background: var(--cl-ok-bg);
  color: var(--cl-ok-fg);
}
.badge-ok .badge-dot {
  background: var(--cl-ok);
}
.badge-warning {
  background: var(--cl-brass-bg);
  color: var(--cl-brass-fg);
}
.badge-warning .badge-dot {
  background: var(--cl-brass);
}
.badge-critical {
  background: var(--cl-critical-bg);
  color: var(--cl-critical-fg);
}
.badge-critical .badge-dot {
  background: var(--cl-critical);
}
.badge-neutral {
  background: var(--cl-neutral-bg);
  color: var(--cl-neutral-fg);
}
.badge-neutral .badge-dot {
  background: #a6a392;
}

/* ---------------------------------------------------------------------- */
/* Cards                                                                    */
/* ---------------------------------------------------------------------- */

.card {
  background: #ffffff;
  border: 1px solid var(--cl-stone-100);
  border-radius: 8px;
  padding: 24px 26px;
}

.card-dark {
  background: var(--cl-ink);
  border-radius: 8px;
  padding: 24px 26px;
  color: var(--cl-paper);
}

/* ---------------------------------------------------------------------- */
/* Campos                                                                   */
/* ---------------------------------------------------------------------- */

.input {
  font-family: inherit;
  font-size: 15px;
  padding: 11px 14px;
  border-radius: 6px;
  border: 1.5px solid var(--cl-stone-300);
  background: #ffffff;
  color: var(--cl-ink);
  box-sizing: border-box;
  width: 100%;
}
.input:focus {
  outline: 2px solid #efdfb8;
  outline-offset: 1px;
  border-color: var(--cl-brass);
}
.input[disabled] {
  /* #E6E3D9 per Main.dc.html — slightly lighter than --cl-stone-200 */
  border-color: #e6e3d9;
  background: var(--cl-stone-50);
  color: var(--cl-stone-500);
}

/* ---------------------------------------------------------------------- */
/* Tabelas                                                                  */
/* ---------------------------------------------------------------------- */

.table-wrap {
  /* Contexto de posicionamento: um filho absoluto (ex. .sr-only no
     cabeçalho de ações) não escapa da rolagem horizontal da tabela e não
     alarga a página. */
  position: relative;
  border: 1px solid var(--cl-stone-100);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}
/* `.table-wrap` and Tailwind's `.overflow-x-auto` are both single-class
   selectors, so whichever one happens to load later in the cascade wins
   and the other is silently dropped -- in production that meant
   `overflow: hidden` always won over `overflow-x: auto`, so wide tables
   (Contratos, Empresas) had no way to scroll horizontally at narrow
   widths and just clipped columns (Vencimento, Status, CNPJ). This
   combined selector has higher specificity than either one alone, so it
   wins deterministically wherever both classes are used together. */
.table-wrap.overflow-x-auto {
  overflow-x: auto;
  overflow-y: hidden;
}
.table-head-row {
  background: var(--cl-stone-50);
  font-size: 12px;
  font-weight: 600;
  color: var(--cl-stone-500);
}
/* Renamed from `.table-row`: that name collided with Tailwind's own
   `table-row` utility (display: table-row), which the CDN/JIT scanner
   auto-generates whenever it sees the literal string in a class
   attribute. On any flex/grid row using the old name for its border,
   that generated utility silently overrode `display:flex`/`display:grid`
   with `display:table-row`, breaking the row's layout -- confirmed live
   in production (Prazos, Painel, contract Obrigações list) and reproduced
   locally via computed styles. `<tr>` elements used the same class too;
   renaming is harmless there since a `<tr>` is already `display:table-row`
   by default. */
.row-divider {
  border-top: 1px solid #efede5;
}

/* ---------------------------------------------------------------------- */
/* Clara (assistente de contratos) -- ver app/static/js/clara.js           */
/* ---------------------------------------------------------------------- */

.clara-card {
  border: 1.5px solid #e9d3a6;
  background: #fffbf3;
  border-radius: 12px;
}
/* The result blocks are toggled with the `hidden` attribute from clara.js;
   their layout classes (flex) would otherwise beat the UA's display:none. */
.clara-card [hidden] {
  display: none !important;
}
.clara-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cl-brass);
  color: #fbf4e6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.clara-face { flex: none; display: block; }
.clara-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cl-brass-fg);
}
.clara-summary {
  border-left: 3px solid var(--cl-brass);
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.clara-status[data-kind="error"] {
  color: var(--cl-critical-fg);
}
.clara-status[data-kind="ok"] {
  color: var(--cl-ok-fg);
}
/* A field Clara filled keeps this mark until the user edits it. */
.clara-suggested .input {
  border-color: var(--cl-brass);
  box-shadow: 0 0 0 3px var(--cl-brass-bg);
}
.clara-chip {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cl-brass-bg);
  color: var(--cl-brass-fg);
  font-size: 11.5px;
  font-weight: 600;
}
label.clara-suggested .clara-chip {
  margin-top: 0;
  margin-left: 8px;
}
/* A field Clara looked for and did NOT find in the PDF (still empty after
   the analysis): neutral dashed mark, "Não encontrado no PDF" chip. Never
   shown before an analysis ran -- the form never pretends to be filled. */
.clara-missing .input { border-style: dashed; border-color: var(--cl-stone-400); }
.clara-chip-missing { background: var(--cl-neutral-bg); color: var(--cl-stone-700); }
.clara-missing .input[required] { border-color: var(--cl-critical); }
.clara-missing .input[required] ~ .clara-chip-missing { background: var(--cl-critical-bg); color: var(--cl-critical-fg); }
.clara-status { line-height: 1.5; }
.clara-status[data-kind="loading"] { color: var(--cl-brass-fg); }
/* Caminho manual da criação: o cartão vira só o anexo opcional, neutro, e
   desce para depois dos campos (o que importa no manual são os campos). */
.clara-card.is-manual { border: 1px solid var(--cl-line); background: var(--cl-surface); order: 1; }
.clara-card.is-manual [data-clara-only] { display: none !important; }
.clara-card:not(.is-manual) [data-manual-only] { display: none !important; }
form .form-actions { order: 2; }

/* "Clara está lendo o contrato…": the fields she may fill shimmer. */
.clara-reading {
  background: linear-gradient(90deg, #f0eee6 25%, #f6f5f1 50%, #f0eee6 75%);
  background-size: 200% 100%;
  animation: clara-shimmer 1.2s linear infinite;
}
@keyframes clara-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.clara-ob {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) 150px 140px;
  gap: 8px;
  align-items: center;
}
.clara-ob-hint {
  grid-column: 2 / -1;
}
@media (max-width: 640px) {
  .clara-ob { grid-template-columns: auto 1fr; }
  .clara-ob [data-ob-date],
  .clara-ob [data-ob-recurrence] { grid-column: 2; }
}

/* ---------------------------------------------------------------------- */
/* Base global                                                             */
/* ---------------------------------------------------------------------- */

::selection {
  background: #e9d7ae;
  color: var(--cl-ink);
}

:focus-visible {
  outline: 2px solid rgba(169, 118, 31, 0.55);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------- */
/* App shell (Sprint 11) — sidebar Noturno, abas, chips, tabela "card"    */
/* Ver App.dc.html / ContractsList.dc.html / Team.dc.html.                */
/* ---------------------------------------------------------------------- */

.app-sidebar {
  background: var(--cl-noturno);
}

.side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  color: #afb4c4;
  text-decoration: none;
}
.side-link:hover {
  background: #202943;
  color: #e7e9f0;
}
.side-link.active {
  background: #242d44;
  color: #f6f5f1;
}

.ws-switcher-btn {
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #242d44;
  border: 1px solid #2f3a57;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  color: #e7e9f0;
  font-family: inherit;
}

/* Abas (ContractsList, detalhe do contrato) */
.tab {
  font-size: 14px;
  font-weight: 600;
  color: var(--cl-stone-500);
  padding: 9px 4px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.tab.active {
  color: var(--cl-ink);
  border-bottom-color: var(--cl-brass);
}

/* Botão "⋯" de ações de linha (tabelas) */
.row-action {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--cl-stone-500);
}
.row-action:hover {
  background: var(--cl-stone-50);
}

/* Chip de filtro (lista de contratos) */
.chip {
  font-size: 13px;
  font-weight: 600;
  color: #55564f;
  border: 1px solid var(--cl-stone-100);
  background: #ffffff;
  border-radius: 100px;
  padding: 7px 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Linha de metadado rotulado (detalhe do contrato) */
.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #efede5;
}
.meta-row:first-child {
  border-top: none;
}

/* Papel de equipe — paleta extra além de badge-ok/warning/critical/neutral */
.badge-role-owner {
  background: #e8e6fa;
  color: #4b3fa6;
}

/* Rótulo/dica de campo (formulário de contrato — NewContract.dc.html) */
.flabel {
  font-size: 13px;
  font-weight: 600;
  color: var(--cl-stone-900);
}
.flabel .req,
.req {
  color: var(--cl-brass);
  font-weight: 700;
  margin-left: 2px;
}
.fhint {
  font-size: 12.5px;
  color: var(--cl-stone-500);
  line-height: 1.4;
}

/* ---------------------------------------------------------------------- */
/* Admin "Operação" shell (Sprint 12) — barra superior escura e dedicada   */
/* das telas /admin (AdminDashboard.dc.html / AdminTenantDetail.dc.html), */
/* deliberadamente DIFERENTE do Noturno da sidebar do tenant (.app-sidebar */
/* acima) — pra nunca se confundir "modo operação" com a conta do cliente.*/
/* ---------------------------------------------------------------------- */

/* Sidebar da Operação (Out/2026): grafite #13151A -- deliberadamente
   diferente do Noturno #1C2436 da sidebar do cliente (.app-sidebar). */
.ops-sidebar { background: #13151a; border-right: 1px solid #2a2d35; overflow-y: auto; }

.ops-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--cl-critical-fg);
  background: #2a1a16;
  border: 1px solid #452420;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}

.ops-side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #afb4c4;
  text-decoration: none;
}
.ops-side-link:hover { background: rgba(255, 255, 255, 0.05); color: #e7e9f0; }
.ops-side-link.active { background: #1f2229; color: #f6f5f1; box-shadow: inset 2px 0 0 var(--cl-brass); }
.ops-side-app { color: #e8c078; }
.ops-side-app:hover { color: #f6f5f1; }

.ops-side-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #2a2d35;
  border-radius: 8px;
  background: #1a1d23;
  color: #8b90a0;
  font-size: 13.5px;
  text-decoration: none;
}
.ops-side-search:hover,
.ops-side-search.active { color: #f6f5f1; border-color: #3a3f4c; }
.ops-kbd {
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid #3a3f4c;
  color: #8b90a0;
}

.ops-side-logout {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b90a0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ops-side-logout:hover { background: rgba(255, 255, 255, 0.06); color: #f6f5f1; }

/* Âncoras do detalhe da conta (#equipe, vindo da busca); no celular há a
   barra de 3.5rem no topo. A pessoa encontrada fica marcada em latão. */
body.ops-shell [id] { scroll-margin-top: 24px; }
@media (max-width: 767px) {
  body.ops-shell [id] { scroll-margin-top: 72px; }
}
body.ops-shell tr[aria-current="true"] td { background: var(--cl-brass-soft); }
body.ops-shell tr[aria-current="true"] td:first-child { box-shadow: inset 3px 0 0 var(--cl-brass); }

.ops-role-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #afb4c4;
  background: #1f2128;
  border: 1px solid #2a2d35;
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
}

.ops-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3a3f4c;
  color: #f6f5f1;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Botão discreto reaproveitado nas ações do card do owner (detalhe do
   tenant) — mesma receita visual de .btn-outline, só sem depender da
   classe .btn (que fixa padding maior demais para esses botões menores). */
.ops-ghost-btn {
  appearance: none;
  background: #ffffff;
  border: 1px solid var(--cl-stone-100);
  border-radius: 7px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cl-stone-900);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ops-ghost-btn:hover {
  border-color: var(--cl-stone-400);
}
.ops-ghost-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ====================================================================== */
/* App do cliente — sistema de layout e componentes (Out/2026)            */
/*                                                                        */
/* Até aqui cada tela montava o próprio cabeçalho, padding, largura e     */
/* banner com utilitários soltos + `style=""` inline (larguras 560/680px, */
/* cores #FBEEE9/#EAC8BC repetidas, `gap-4.5`/`px-4.5` que nem existiam   */
/* no Tailwind e compilavam para nada). Esta camada dá a cada TIPO de     */
/* tela uma receita só:                                                   */
/*   - layout: `.page` + um modificador de largura por tipo de tela       */
/*     (narrow = cadastro curto, form = formulário longo, settings,       */
/*     detail = entidade com painel lateral, wide = painel/lista/tabela); */
/*   - cabeçalho: macro `page_header` (_partials/ui.html);                */
/*   - tipografia: page-title > section-title > card-title > flabel/fhint;*/
/*   - cor só por token (--cl-*), nunca hex solto no template.            */
/* ====================================================================== */

:root {
  --cl-line: #e2dfd4;          /* borda padrão de superfície */
  --cl-line-soft: #efede5;     /* divisória interna */
  --cl-surface: #ffffff;
  --cl-critical-line: #eac8bc;
  --cl-critical-soft: #fbeee9;
  --cl-brass-soft: #fbf4e6;
  --cl-brass-line: #f0e0b8;
  --cl-ok-line: #c9dece;
  --cl-shadow-pop: 0 10px 30px rgba(24, 26, 32, 0.14), 0 2px 6px rgba(24, 26, 32, 0.06);

  --page-gutter: 16px;
  --page-pad-y: 20px;
}
@media (min-width: 640px) {
  :root { --page-gutter: 24px; --page-pad-y: 28px; }
}
@media (min-width: 1024px) {
  :root { --page-gutter: 40px; --page-pad-y: 32px; }
}

/* As telas do app desenham o próprio respiro (`.page`); o padding genérico
   do <main> de base.html somava com o delas (até 64px de margem lateral
   num celular de 375px). */
body.app-shell main#main,
body.ops-shell main#main {
  padding: 0;
}

/* --- Layout (conceito v2, docs/design/app-cliente-v2.md) --------------- */
/* A tela inteira trabalha: o conteúdo ocupa toda a largura ao lado da
   sidebar, sem coluna estreita centralizada. Os modificadores de tipo de
   tela continuam existindo (page-narrow/form/settings/detail/wide) para os
   ajustes de cada arquétipo, mas nenhum deles limita a largura. */
.page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: var(--page-pad-y) var(--page-gutter) 48px;
  min-width: 0;
}
/* Telas de foco (2FA): um cartão pequeno centralizado é a exceção. */
.page.items-center { align-items: center; }
/* Cabeçalho só de texto direto na coluna da página (telas de Configurações
   da Operação): a base de 320px de .page-header-text virava altura. */
.page > .page-header-text { flex: none; }

/* Formulário curto (empresa, contato, setor, disparo): os campos se
   distribuem em colunas em vez de virarem inputs de 1.000px. */
.page-narrow form > .card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px 24px;
}
.page-narrow form > .card > :has(textarea) { grid-column: 1 / -1; }

/* Ficha de detalhe sem lateral (empresa, contato, setor): pares
   rótulo/valor em duas colunas, para o olho não atravessar a tela. */
.page > .card:has(> .meta-row),
.stack > .card:has(> .meta-row) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  column-gap: 40px;
  padding-top: 8px;
}
.page > .card:has(> .meta-row) > .meta-row,
.stack > .card:has(> .meta-row) > .meta-row { border-top: 1px solid var(--cl-line-soft); }

.stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.stack-sm { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Conteúdo + painel lateral (detalhe do contrato, painel) */
.split {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
  .split-wide { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* --- Tipografia -------------------------------------------------------- */
.page-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cl-ink);
  overflow-wrap: anywhere;
}
@media (max-width: 639px) {
  .page-title { font-size: 21px; }
}
.page-subtitle { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cl-stone-500); }
.section-title { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--cl-ink); }
.card-title { margin: 0; font-size: 14.5px; line-height: 1.35; font-weight: 600; color: var(--cl-ink); }
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cl-stone-500);
}
.count { font-variant-numeric: tabular-nums; font-weight: 500; opacity: 0.6; margin-left: 6px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* --- Cabeçalho de página (macro page_header) --------------------------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
}
.page-header-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
.page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (min-width: 640px) {
  .page-header-actions { flex-wrap: nowrap; flex: 0 0 auto; }
  .page-header-actions > .btn { flex: none; white-space: nowrap; }
  .page-header-actions .search-box { flex: 0 0 300px; min-width: 0; }
}
@media (max-width: 639px) {
  /* No celular a ação principal ocupa a linha toda, fácil de tocar. */
  .page-header-actions { width: 100%; }
  .page-header-actions > .btn-primary { flex: 1 1 auto; }
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cl-stone-500);
  text-decoration: none;
  margin-bottom: 6px;
}
.back-link:hover { color: var(--cl-ink); }
/* O link de voltar pertence ao título logo abaixo, não é um bloco à parte. */
.stack > .back-link,
.page > .back-link { margin-bottom: -14px; }
@media (max-width: 639px) {
  .page-header > .btn-primary { flex: 1 1 100%; }
}

/* --- Botões: tamanhos e variantes que faltavam -------------------------- */
/* Antes cada tela reduzia .btn com style="padding:7px 13px" (11 valores
   diferentes no app); agora há dois tamanhos. */
.btn-sm { font-size: 13.5px; padding: 8px 14px; border-radius: 6px; gap: 6px; }
.btn-md { font-size: 14px; padding: 10px 18px; }
.btn-outline.btn-sm { padding: 7px 13px; }
.btn-outline.btn-md { padding: 9px 17px; }
.btn-ghost.btn-sm { padding: 8px; }
.btn-ghost:hover { color: var(--cl-ink); }
.btn-outline:hover { background: var(--cl-surface); }
.btn-danger {
  background: transparent;
  color: var(--cl-critical-fg);
  border: 1.5px solid var(--cl-critical-line);
  padding: 12px 23px;
}
.btn-danger:hover { border-color: var(--cl-critical); background: var(--cl-critical-soft); }
.btn-danger.btn-sm { padding: 7px 13px; }
.btn-danger.btn-md { padding: 9px 17px; }
.btn-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cl-brass-fg);
  cursor: pointer;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }
.btn-link.is-danger { color: var(--cl-critical-fg); }
.btn.is-submitting { cursor: progress; }

/* --- Campos ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-error,
[data-date-guard-error] {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--cl-critical-fg);
}
.input[aria-invalid="true"] { border-color: var(--cl-critical); background: #fffaf8; }
.input::placeholder { color: #b3af9f; }
textarea.input { resize: vertical; min-height: 88px; line-height: 1.5; }
/* Grade de campos: 1 coluna no celular, N colunas onde couber. */
.form-grid {
  display: grid;
  gap: 18px 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min, 220px), 100%), 1fr));
}
.form-grid-3 { --col-min: 180px; }
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cl-stone-900);
  cursor: pointer;
  width: fit-content;
}
.check input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--cl-brass); flex: none; }

/* Seção de formulário: título + descrição + campos, numa superfície. */
.form-section {
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-radius: 10px;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
@media (max-width: 639px) {
  .form-section { padding: 18px 16px 20px; }
}
.form-section-head { display: flex; flex-direction: column; gap: 3px; }
.form-section-head p { margin: 0; font-size: 13px; color: var(--cl-stone-500); line-height: 1.45; }

/* Barra de ações do formulário: presa no rodapé enquanto o form rola,
   então "Salvar" nunca some num formulário longo (sobretudo no celular). */
.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 calc(var(--page-gutter) * -1) -48px;
  padding: 14px var(--page-gutter);
  background: rgba(246, 245, 241, 0.94);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--cl-line);
}
.form-actions-note { margin-right: auto; font-size: 13px; color: var(--cl-stone-500); }
@media (max-width: 639px) {
  .form-actions { padding-top: 10px; padding-bottom: 10px; }
  .form-actions .btn-primary { flex: 1 1 auto; }
  .form-actions-note { display: none; }
}
/* Forms curtos não precisam da barra presa: só alinham os botões. */
.form-actions-static {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 12px;
}

/* --- Avisos (callouts) ------------------------------------------------- */
.callout {
  display: block;
  border: 1px solid var(--cl-line);
  background: var(--cl-stone-50);
  color: var(--cl-stone-900);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
}
.callout:has(> svg) { display: flex; gap: 10px; align-items: flex-start; }
.callout > svg { flex: none; margin-top: 3px; }
.callout[hidden] { display: none; }
.callout p { margin: 0; }
.callout a { color: inherit; font-weight: 600; text-decoration: underline; }
.callout-critical { border-color: var(--cl-critical-line); background: var(--cl-critical-soft); color: var(--cl-critical-fg); }
.callout-warning  { border-color: var(--cl-brass-line); background: var(--cl-brass-soft); color: var(--cl-brass-fg); }
.callout-ok       { border-color: var(--cl-ok-line); background: var(--cl-ok-bg); color: var(--cl-ok-fg); }

/* --- Estado vazio ------------------------------------------------------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 40px 24px;
  background: var(--cl-surface);
  border: 1px dashed var(--cl-stone-300);
  border-radius: 10px;
}
.empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--cl-stone-50);
  color: var(--cl-stone-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.empty-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--cl-ink); }
.empty-body { margin: 0; font-size: 13.5px; color: var(--cl-stone-500); max-width: 48ch; line-height: 1.5; }
.empty-actions { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* Vazio só com uma frase (listas filtradas sem resultado etc.) */
.empty-body-only { font-size: 14px; color: var(--cl-stone-500); padding: 32px 24px; }
.empty-body-only a { color: var(--cl-brass-fg); font-weight: 600; }
/* Vazio dentro de uma lista/tabela já emoldurada */
.empty-inline { padding: 16px 18px; font-size: 13.5px; color: var(--cl-stone-500); margin: 0; }

/* --- Indicadores (stat cards) ------------------------------------------ */
.stat-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
@media (max-width: 639px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-radius: 10px;
  padding: 18px 20px;
  color: var(--cl-ink);
  text-decoration: none;
  min-width: 0;
}
a.stat:hover { border-color: var(--cl-stone-400); }
.stat-label { font-size: 13px; color: var(--cl-stone-500); }
/* "?" ao lado do rótulo: a regra do contador está no title do cartão. */
.stat-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 2px; border-radius: 999px;
  border: 1px solid currentColor; font-size: 10px; font-weight: 700;
  line-height: 1; opacity: .7; vertical-align: 1px; cursor: help;
}
.stat-value {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat-hint { font-size: 12.5px; color: var(--cl-stone-500); }
.stat-warning .stat-value { color: var(--cl-brass-fg); }
.stat-critical { background: var(--cl-critical-soft); border-color: var(--cl-critical-line); }
.stat-critical .stat-label,
.stat-critical .stat-value { color: var(--cl-critical-fg); }
@media (max-width: 639px) {
  .stat { padding: 14px; }
  .stat-value { font-size: 23px; }
}

/* --- Abas -------------------------------------------------------------- */
/* Rola na horizontal no celular em vez de quebrar linha (as 4 abas do
   contrato não cabem em 343px). */
.tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--cl-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { white-space: nowrap; margin-bottom: -1px; }
.tab:hover { color: var(--cl-ink); }

/* --- Listas e tabelas --------------------------------------------------- */
.list { background: var(--cl-surface); border: 1px solid var(--cl-line); border-radius: 10px; overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 14px; padding: 13px 18px; }
.list-row + .list-row,
.list-row + .list-more { border-top: 1px solid var(--cl-line-soft); }
@media (max-width: 639px) {
  .list-row { padding: 12px 14px; flex-wrap: wrap; row-gap: 8px; }
}
.list-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.list-row-title { font-size: 14.5px; font-weight: 600; color: var(--cl-ink); text-decoration: none; overflow-wrap: anywhere; }
a.list-row-title:hover { text-decoration: underline; }
a.list-row { color: var(--cl-ink); text-decoration: none; }
a.list-row:hover { background: #fbfaf7; }
a.list-row:hover .list-row-title { text-decoration: underline; }
.list-row-meta { font-size: 12.5px; color: var(--cl-stone-700); }
.list-row-aside { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; }
.ob-check {
  width: 20px; height: 20px; flex: none;
  border: 1.5px solid var(--cl-stone-300); border-radius: 5px;
  background: var(--cl-surface); cursor: pointer;
}
.ob-check:hover { border-color: var(--cl-ok); background: var(--cl-ok-bg); }
.list-more { display: block; padding: 12px 18px; font-size: 13.5px; font-weight: 600; color: var(--cl-brass-fg); text-decoration: none; }

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
  text-align: left;
  padding: 10px 16px;
  background: var(--cl-stone-50);
  font-size: 12px;
  font-weight: 600;
  color: var(--cl-stone-500);
  white-space: nowrap;
}
.data-table td { padding: 12px 16px; border-top: 1px solid var(--cl-line-soft); vertical-align: middle; }
.data-table tbody tr:hover td { background: #fbfaf7; }
.data-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .muted { color: var(--cl-stone-700); }
.data-table .actions { text-align: right; white-space: nowrap; }
.cell-link { font-weight: 600; color: var(--cl-ink); text-decoration: none; }
.cell-link:hover { text-decoration: underline; }
/* Terciário (ex.: "Sem empresa" na lista): ainda >= 4,5:1 (UX-004). */
.text-faint { color: #6e6c63; }

/* --- Busca e filtros ---------------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.search-box {
  flex: 1 1 260px;
  max-width: 440px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cl-surface);
  border: 1.5px solid var(--cl-stone-300);
  border-radius: 7px;
  padding: 0 12px;
  color: var(--cl-stone-500);
}
.search-box:focus-within { border-color: var(--cl-brass); outline: 2px solid #efdfb8; outline-offset: 1px; }
.search-box input { border: none; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--cl-ink); padding: 10px 0; width: 100%; min-width: 0; }
.toolbar .input { width: auto; padding-top: 9px; padding-bottom: 9px; font-size: 14px; }
@media (max-width: 639px) {
  .search-box { max-width: none; flex-basis: 100%; }
  .toolbar .input { flex: 1 1 140px; min-width: 0; }
}

/* --- Toasts ------------------------------------------------------------ */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-left: 3px solid var(--toast-accent, var(--cl-stone-500));
  border-radius: 9px;
  padding: 12px 10px 12px 14px;
  box-shadow: var(--cl-shadow-pop);
  font-size: 14px;
  line-height: 1.45;
  color: var(--cl-ink);
  animation: toast-in 0.18s ease-out;
}
.toast-icon { flex: none; margin-top: 2px; color: var(--toast-accent, var(--cl-stone-500)); }
.toast-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-close {
  flex: none;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--cl-stone-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast-close:hover { background: var(--cl-stone-50); color: var(--cl-ink); }
.toast-ok { --toast-accent: var(--cl-ok); }
.toast-critical { --toast-accent: var(--cl-critical); }
.toast-warning { --toast-accent: var(--cl-brass); }
.toast-info { --toast-accent: var(--cl-noturno); }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* --- Carregando --------------------------------------------------------- */
.skeleton {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #f0eee6 25%, #f6f5f1 50%, #f0eee6 75%);
  background-size: 200% 100%;
  animation: clara-shimmer 1.2s linear infinite;
}
.spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display: inline-block;
  flex: none;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Upload (drag-and-drop) -------------------------------------------- */
/* O <input type="file"> continua real e dentro do <form> (o salvar normal
   envia o arquivo); a zona só o veste e aceita arrastar-e-soltar
   (app/static/js/dropzone.js). */
.dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1.5px dashed var(--cl-stone-300);
  border-radius: 10px;
  background: var(--cl-surface);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.dropzone:hover,
.dropzone:focus-within { border-color: var(--cl-brass); }
.dropzone.is-dragover { border-color: var(--cl-brass); background: var(--cl-brass-soft); }
.dropzone.has-file { border-style: solid; border-color: var(--cl-line); cursor: default; }
.dropzone.is-invalid { border-color: var(--cl-critical); background: #fffaf8; }
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone.has-file input[type="file"] { pointer-events: none; }
.dropzone-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--cl-brass-soft);
  color: var(--cl-brass-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.dropzone.has-file .dropzone-icon { background: var(--cl-stone-50); color: var(--cl-critical); }
.dropzone-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dropzone-title { font-size: 14.5px; font-weight: 600; color: var(--cl-ink); overflow-wrap: anywhere; }
.dropzone-hint { font-size: 12.5px; color: var(--cl-stone-500); }
.dropzone-actions { position: relative; z-index: 1; display: flex; gap: 6px; flex: none; }
.dropzone [hidden] { display: none !important; }
@media (max-width: 639px) {
  .dropzone { padding: 14px; gap: 12px; flex-wrap: wrap; }
  .dropzone-text { flex: 1 1 0; }
  .dropzone-actions { width: 100%; justify-content: flex-end; margin-top: -4px; }
}

/* --- Escolha de caminho (radio em cartão) ------------------------------- */
.choice-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.choice {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--cl-surface);
  border: 1.5px solid var(--cl-line);
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.choice:hover { border-color: var(--cl-stone-300); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--cl-brass); box-shadow: 0 0 0 3px var(--cl-brass-bg); }
.choice:has(input:focus-visible) { outline: 2px solid rgba(169, 118, 31, 0.6); outline-offset: 2px; }
.choice-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--cl-stone-50);
  color: var(--cl-stone-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.choice:has(input:checked) .choice-icon { background: var(--cl-brass); color: #fbf4e6; }
.choice-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--cl-ink); }
.choice-desc { margin: 3px 0 0; font-size: 13px; color: var(--cl-stone-500); line-height: 1.45; }
.tag-ai {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cl-brass-fg);
  background: var(--cl-brass-bg);
  border-radius: 4px;
  padding: 2px 6px;
}

/* --- Etapas (Clara: PDF → análise → revisão) ---------------------------- */
.steps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.step { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--cl-stone-500); }
.step-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--cl-stone-300);
  background: var(--cl-surface);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.step[data-state="current"] { color: var(--cl-ink); font-weight: 600; }
.step[data-state="current"] .step-dot { border-color: var(--cl-brass); color: var(--cl-brass-fg); }
.step[data-state="done"] { color: var(--cl-ok-fg); }
.step[data-state="done"] .step-dot { border-color: var(--cl-ok); background: var(--cl-ok); color: #fff; }

/* --- Painel lateral escuro (lembrete/sem responsável) ------------------- */
.note-dark {
  background: var(--cl-noturno);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #afb4c4;
  font-size: 13px;
  line-height: 1.55;
}
.note-dark .card-title { color: #f6f5f1; }
.note-dark a { color: #e8c078; font-weight: 600; text-decoration: none; }
.note-dark a:hover { text-decoration: underline; }

/* --- "Em breve" (configurações sem backend) ----------------------------- */
.soon-list { display: flex; flex-wrap: wrap; gap: 8px; }
.soon-item {
  font-size: 13px;
  color: var(--cl-stone-700);
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-radius: 100px;
  padding: 5px 12px;
}

/* Link de conteúdo: latão escuro, sublinhado no hover (antes cada tela
   herdava a cor do texto e o link sumia no parágrafo). */
.prose-link { color: var(--cl-brass-fg); font-weight: 600; text-decoration: none; }
.prose-link:hover { text-decoration: underline; }

.card { border-radius: 10px; }
@media (max-width: 639px) {
  .card { padding: 18px 16px; }
}

/* Tabela que vira lista empilhada no celular (lista de contratos): em vez
   de rolar na horizontal escondendo Vencimento/Status, cada linha vira um
   bloco com o nome em cima e o resto embaixo. */
@media (max-width: 639px) {
  .table-stack { min-width: 0 !important; }
  .table-stack thead { display: none; }
  .table-stack tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; }
  .table-stack td { padding: 0 !important; border: 0 !important; }
  .table-stack td:first-child { flex-basis: 100%; }
  .hide-sm { display: none !important; }
  /* .data-table separa as linhas pela borda das células, que o empilhamento
     zera: a divisória passa para a linha. Ações ficam à direita. */
  .data-table.table-stack tbody tr + tr { border-top: 1px solid var(--cl-line-soft); }
  .data-table.table-stack td.actions { margin-left: auto; text-align: right; }
}
.only-sm { display: none; }
@media (max-width: 639px) {
  .only-sm { display: inline; }
}

/* ---------------------------------------------------------------------- */
/* Novo contrato — wizard da Clara (docs/design/app-cliente-v2.md §6)      */
/* Um <form>; as etapas só mostram/escondem painéis (data-step na .wizard */
/* é controlado por clara.js; o servidor renderiza "review").            */
/* ---------------------------------------------------------------------- */
.wizard { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.wizard [hidden] { display: none !important; }
.wizard [data-step-panel] { display: none !important; }
.wizard[data-step="upload"] [data-step-panel="upload"],
.wizard[data-step="reading"] [data-step-panel="reading"] { display: flex !important; }
.wizard[data-step="review"] [data-step-panel="review"] { display: grid !important; }
.wizard[data-step="review"] .flex[data-step-panel="review"] { display: flex !important; }
/* Rodapé de salvar só existe na revisão. */
.wizard-form:has(.wizard[data-step="upload"]) .form-actions,
.wizard-form:has(.wizard[data-step="reading"]) .form-actions { display: none; }

/* As etapas 1 e 2 ocupam a altura da tela: o bloco cresce, sem vazio embaixo. */
.wizard-panel {
  flex-direction: column;
  gap: 22px;
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-radius: 16px;
  padding: 28px 32px;
  min-height: calc(100vh - 210px);
  box-sizing: border-box;
}
@media (max-width: 639px) {
  .wizard-panel { padding: 20px 16px; min-height: calc(100vh - 190px); }
}
.wz-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--cl-ink); }
.wz-hero { display: flex; align-items: center; gap: 18px; }
@media (max-width: 639px) {
  .wz-hero { align-items: flex-start; }
  .wz-hero .clara-face { width: 52px; height: 52px; }
  .wz-title { font-size: 18px; }
}
.wz-drop-slot { flex: 1; display: flex; flex-direction: column; min-height: 240px; }
.wz-drop-slot [data-pdf-drop] { flex: 1; }
.wz-drop-slot .dropzone {
  flex: 1;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border: 2px dashed #d9c08e;
  background: #fffbf3;
  border-radius: 14px;
  padding: 28px;
  gap: 12px;
}
.wz-drop-slot .dropzone .dropzone-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--cl-brass-bg); }
.wz-drop-slot .dropzone .dropzone-title { font-size: 17px; }
.wz-drop-slot .dropzone .dropzone-text { flex: none; align-items: center; }
.wz-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  border-top: 1px solid var(--cl-line-soft);
  padding-top: 20px;
}
.wz-strip-cell { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; border-left: 1px solid var(--cl-line-soft); }
@media (max-width: 899px) {
  .wz-strip { grid-template-columns: minmax(0, 1fr); }
  .wz-strip-cell { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--cl-line-soft); }
}
.wz-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 13px; color: var(--cl-stone-900); }
.wz-checklist li { display: flex; align-items: center; gap: 8px; }
.wz-checklist svg { flex: none; width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--cl-ok-bg); color: var(--cl-ok-fg); box-sizing: border-box; }
@media (max-width: 479px) { .wz-checklist { grid-template-columns: minmax(0, 1fr); } }

.wz-reading { align-items: center; justify-content: center; text-align: center; }
.wz-reading-face { position: relative; width: 112px; height: 112px; }
.wz-reading-face .clara-face { position: absolute; left: 8px; top: 8px; }
.wz-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--cl-brass-bg); border-top-color: var(--cl-brass);
  animation: spin 1s linear infinite;
}
.wizard[data-reading="error"] .wz-ring { animation: none; border-color: var(--cl-critical-bg); }

/* Indicador de etapas no cabeçalho */
.wz-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.wz-pill {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 7px; border-radius: 100px;
  background: var(--cl-surface); border: 1px solid var(--cl-line); color: var(--cl-stone-500); font-weight: 500;
}
.wz-pill-n {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--cl-stone-300);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; box-sizing: border-box;
}
.wz-pill[data-state="current"] { background: var(--cl-ink); border-color: var(--cl-ink); color: #f6f5f1; font-weight: 600; }
.wz-pill[data-state="current"] .wz-pill-n { background: var(--cl-brass); border-color: var(--cl-brass); color: #fbf4e6; }
.wz-pill[data-state="done"] { background: var(--cl-ok-bg); border-color: var(--cl-ok-line); color: var(--cl-ok-fg); font-weight: 600; }
.wz-pill[data-state="done"] .wz-pill-n { background: var(--cl-ok); border-color: var(--cl-ok); color: #fff; }
@media (max-width: 639px) {
  .wz-steps { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .wz-pill { padding: 0; border: 0; background: none !important; height: 4px; border-radius: 4px; overflow: hidden; font-size: 0; }
  .wz-pill { background: var(--cl-stone-100) !important; }
  .wz-pill[data-state="current"] { background: var(--cl-brass) !important; }
  .wz-pill[data-state="done"] { background: var(--cl-ok) !important; }
  .wz-pill .wz-pill-n { display: none; }
}

/* Revisão */
.form-divider { height: 1px; background: var(--cl-line-soft); margin: 2px 0; }
.wz-check { min-height: 46px; align-items: center; }
.wz-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--cl-stone-700); }
.wz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wz-key { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.wz-key-read { background: var(--cl-brass-bg); border: 1.5px solid var(--cl-brass); }
.wz-key-missing { border: 1.5px dashed var(--cl-stone-500); }
.wz-notfound {
  background: var(--cl-surface); border: 1px solid var(--cl-brass-line); border-radius: 10px;
  padding: 11px 13px; font-size: 13px; line-height: 1.5; color: var(--cl-brass-fg);
}
.wizard [data-slot="review"] .dropzone { padding: 14px 16px; }

/* A coluna da Clara acompanha a rolagem: num formulário mais alto que ela,
   o painel (e o PDF) continuam à vista em vez de deixar um vão parado. */
@media (min-width: 1100px) {
  .wizard:not(.has-result) .wz-aside { position: sticky; top: 20px; }
}
.wz-aside .dropzone { flex-wrap: wrap; }
.wz-aside .dropzone-text { flex: 1 1 160px; }
.wz-aside .dropzone-actions { width: 100%; justify-content: flex-end; margin-top: -6px; }
.wz-aside .dropzone.has-file .dropzone-title { font-size: 14px; }
.wz-steps[hidden] { display: none !important; }

/* Ficha de pares rótulo/valor em colunas (detalhe do contrato). */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  column-gap: 32px;
}
.meta-grid > .card-title { grid-column: 1 / -1; margin-bottom: 4px; }
.meta-grid > .meta-row { border-top: 1px solid var(--cl-line-soft); }

/* Cartão de relatório: número principal + descrição + ação. */
.report-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--cl-surface); border: 1px solid var(--cl-line); border-radius: 12px;
  padding: 20px 22px; color: var(--cl-ink); text-decoration: none;
}
.report-card:hover { border-color: var(--cl-stone-500); }
.report-card-title { font-size: 14.5px; font-weight: 600; }
.report-card-value { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin-top: 4px; }
.report-card-value small { font-size: 14px; font-weight: 500; color: var(--cl-stone-500); }
.report-card-meta { font-size: 13px; color: var(--cl-stone-700); }
.report-card-desc { font-size: 13px; color: var(--cl-stone-500); line-height: 1.5; margin-top: 6px; flex: 1; }
.report-card-cta { font-size: 13.5px; font-weight: 600; color: var(--cl-brass-fg); margin-top: 6px; }

/* Partes que a Clara encontrou no PDF, sob o campo Empresa (§9.5). */
.wz-parties {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--cl-brass-line); background: var(--cl-brass-soft);
  border-radius: 8px; padding: 10px 12px;
}
.wz-party { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.wz-party-name { font-weight: 600; color: var(--cl-ink); min-width: 0; overflow-wrap: anywhere; }
[data-new-company][hidden], [data-new-company-toggle][hidden], .wz-parties[hidden] { display: none !important; }

/* Faixa "Clara · resumo de hoje" no Painel (§9.5). */
.clara-today {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px;
  background: #fffbf3; border: 1.5px solid #e9d3a6; border-radius: 12px; padding: 18px 22px;
}
@media (max-width: 639px) { .clara-today { padding: 16px; align-items: flex-start; } }

/* Obrigações sugeridas: uma linha por obrigação, na largura toda. */
.clara-ob-head,
[data-clara-obligations] .clara-ob {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 170px 160px;
  gap: 8px 12px;
  align-items: center;
}
.clara-ob-head { font-size: 12px; font-weight: 600; color: var(--cl-stone-500); padding: 0 0 2px; }
[data-clara-obligations] .clara-ob { padding: 10px 0; border-top: 1px solid var(--cl-line-soft); }
[data-clara-obligations] .clara-ob .input { padding: 9px 12px; font-size: 14px; }
[data-clara-obligations] .clara-ob-hint { grid-column: 2 / -1; margin-top: -2px; }
[data-clara-obligations] .clara-ob-match { grid-column: 2 / -1; padding: 7px 10px; font-size: 13px; }
/* Agrupadas por parte responsável, cada uma com a cláusula de origem. */
.clara-ob-group { display: flex; flex-direction: column; }
.clara-ob-group + .clara-ob-group { margin-top: 10px; }
.clara-ob-party { margin: 0; padding: 4px 0 6px; font-size: 13px; font-weight: 600; color: var(--cl-ink); }
.clara-ob-source { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12.5px; line-height: 1.45; color: var(--cl-stone-500); }
.clara-ob-source[hidden] { display: none; }
.clara-ob-source strong { color: var(--cl-stone-700); font-weight: 600; }
.clara-ob-source q { font-style: italic; }
.clara-ob-kind { font-size: 11.5px; }
[data-clara-obligations] .clara-ob.clara-ob-undated [data-ob-date] { border-style: dashed; }
.ob-source { font-size: 12.5px; line-height: 1.45; color: var(--cl-stone-500); }
/* Ações de uma obrigação pendente (PROD-002): Editar · Reagendar · Cancelar,
   cada uma um <details>; o formulário aberto ocupa a largura da linha. */
.ob-row { flex-wrap: wrap; }
.ob-actions { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 100%; padding-left: 34px; }
.ob-action > summary { list-style: none; font-size: 12.5px; }
.ob-action > summary::-webkit-details-marker { display: none; }
.ob-action[open] { flex: 1 1 100%; order: 1; }
.ob-action[open] > summary { color: var(--cl-ink); font-weight: 600; }
.ob-panel { margin-top: 8px; padding: 14px 16px; border: 1px solid var(--cl-line-soft); border-radius: 10px; background: var(--cl-surface); }
.ob-panel-title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--cl-ink); }
@media (max-width: 639px) { .ob-actions { padding-left: 0; } }
@media (max-width: 719px) {
  .clara-ob-head { display: none; }
  [data-clara-obligations] .clara-ob { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); }
  [data-clara-obligations] .clara-ob [data-ob-title] { grid-column: 2 / -1; }
  [data-clara-obligations] .clara-ob [data-ob-date] { grid-column: 2; }
  [data-clara-obligations] .clara-ob [data-ob-recurrence] { grid-column: 3; }
}

/* --- Carteira em escala: lista de contratos ------------------------------
   Teste com escritório de muitos clientes: a tabela cabe na largura (sem
   rolagem horizontal) com layout fixo, colunas priorizadas e texto longo
   truncado (tooltip no title); abaixo de 1100px cada linha vira um cartão.
   O wrap não corta os menus (⋯ e "Sem responsável"), que abrem por cima. */
.table-wrap.carteira-wrap { overflow: visible; }
.carteira-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.carteira-table th, .carteira-table td { padding: 11px 14px; vertical-align: middle; text-align: left; }
.carteira-table thead th:first-child { border-top-left-radius: 8px; }
.carteira-table thead th:last-child { border-top-right-radius: 8px; }
.carteira-table tbody td { border-top: 1px solid var(--cl-line-soft); }
.carteira-table .col-check { width: 44px; padding-right: 0; }
.carteira-table .col-owner { width: 172px; }
/* Término e Próximo prazo separados (auditoria 23/10/2026, UX-002): a
   data do contrato e a obrigação mais próxima ("Aviso · 16/10/2026"). */
.carteira-table .col-end { width: 104px; }
.carteira-table .col-due { width: 170px; }
.carteira-table .col-value { width: 132px; text-align: right; }
.carteira-table .col-status { width: 150px; }
.carteira-table .col-actions { width: 52px; text-align: right; }
/* Rótulo da célula: só nos cartões (abaixo de 1100px), onde não há thead. */
.carteira-table .cell-caption { display: none; }
.carteira-table tbody tr.carteira-row:hover td { background: #fbfaf7; }
.carteira-table tbody tr.is-selected td { background: var(--cl-brass-soft); }
.carteira-group td {
  background: var(--cl-stone-50);
  font-size: 12.5px; font-weight: 700; color: var(--cl-stone-700);
  padding-top: 8px !important; padding-bottom: 8px !important;
}
.carteira-check { width: 16px; height: 16px; accent-color: var(--cl-brass); cursor: pointer; }
.truncate-cell { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.badge { border: 0; font-family: inherit; }
button.badge:hover { filter: brightness(0.97); text-decoration: underline; }
@media (max-width: 1439px) {
  .carteira-table .col-value { display: none; }
}
.carteira-table .due-end-sub { display: none; font-size: 12px; color: var(--cl-stone-500); margin-top: 2px; }
@media (max-width: 1279px) {
  .carteira-table .col-owner { width: 148px; }
  .carteira-table .col-end { display: none; }
  .carteira-table .due-end-sub { display: block; }
  .carteira-table .col-due { width: 148px; }
  .carteira-table .col-status { width: 136px; }
}
/* Com a sidebar aberta, abaixo de ~1100px a coluna do título ficaria
   espremida: cada linha vira cartão. */
@media (max-width: 1099px) {
  .carteira-table, .carteira-table tbody { display: block; }
  .carteira-table thead { display: none; }
  .carteira-table tr.carteira-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 32px;
    gap: 8px 12px;
    align-items: center;
    padding: 12px 14px;
    border-top: 1px solid var(--cl-line-soft);
  }
  .carteira-table tbody tr:first-child { border-top: 0; }
  .carteira-table tr.carteira-row td { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .carteira-table td.col-check { grid-column: 1; grid-row: 1 / span 4; align-self: start; padding-top: 2px; }
  .carteira-table td.col-title { grid-column: 2 / 4; grid-row: 1; }
  .carteira-table td.col-actions { grid-column: 4; grid-row: 1; justify-self: end; }
  .carteira-table td.col-owner { grid-column: 2; grid-row: 2; }
  .carteira-table td.col-status { grid-column: 3; grid-row: 2; }
  .carteira-table td.col-end { display: block !important; grid-column: 2; grid-row: 3; }
  .carteira-table .due-end-sub { display: none; }
  .carteira-table td.col-due .truncate-cell { white-space: normal; }
  .carteira-table td.col-status .badge { max-width: 100%; white-space: normal; }
  .carteira-table td.col-due { grid-column: 3; grid-row: 3; }
  .carteira-table td.col-value { display: block !important; grid-column: 2 / 4; grid-row: 4; }
  .carteira-table .cell-caption { display: block; font-size: 11.5px; color: var(--cl-stone-500); line-height: 1.3; }
  .carteira-table tr.carteira-group { display: block; }
  .carteira-table tr.carteira-group td { display: block; padding: 8px 14px; }
}

/* Barra de ações em massa (aparece com linhas marcadas). */
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  background: var(--cl-noturno); color: #f6f5f1;
  border-radius: 10px; padding: 10px 14px;
  position: sticky; top: 8px; z-index: 20;
}
.bulk-bar[hidden] { display: none; }
.bulk-count { font-size: 13.5px; font-weight: 600; }
.bulk-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bulk-bar .input { width: auto; min-width: 0; padding-top: 7px; padding-bottom: 7px; font-size: 13.5px; color: var(--cl-ink); }
.bulk-bar .btn-outline { background: transparent; color: #f6f5f1; border-color: #4a5470; }
.bulk-bar .btn-link { color: #e8c078; }
@media (max-width: 639px) {
  .bulk-group, .bulk-bar .input { flex: 1 1 100%; }
}

/* Filtros salvos (chips) + "Agrupar por cliente". */
.saved-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.saved-filters .chip { padding: 5px 11px; font-size: 12.5px; text-decoration: none; }
.chip-active { border-color: var(--cl-brass); background: var(--cl-brass-soft); color: var(--cl-brass-fg); }
.chip-dashed { border-style: dashed; list-style: none; }
.chip-dashed::-webkit-details-marker { display: none; }
.chip-link { color: inherit; text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-remove {
  border: 0; background: transparent; color: var(--cl-stone-500); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; margin-right: -4px;
}
.chip-remove:hover { background: var(--cl-stone-50); color: var(--cl-critical-fg); }
.saved-filter-new { position: relative; }
.saved-filter-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: min(18rem, 80vw); display: flex; flex-direction: column; gap: 8px;
  background: #ffffff; border: 1px solid var(--cl-line); border-radius: 12px;
  box-shadow: var(--cl-shadow-pop); padding: 12px;
}
@media (max-width: 639px) {
  .saved-filters .ml-auto { margin-left: 0; }
}

/* Pendências: uma seção por tipo de lacuna, cada linha com a correção. */
.gap-row-fix { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gap-row-fix .input { width: auto; min-width: 0; max-width: 200px; padding-top: 6px; padding-bottom: 6px; font-size: 13.5px; }
@media (max-width: 639px) {
  .gap-row-fix, .gap-row-fix .input { width: 100%; max-width: none; }
  .gap-row-fix .input { flex: 1 1 auto; }
}