/* ==========================================================================
   LicitHub — tema Sinapse (design system do shell Sinapse, hom aa6e2edc)
   Tema escuro único · fonte do sistema · sem webfont · sem build step.
   Todos os tokens usados aqui estão definidos neste bloco (nenhuma classe
   "sem token" como fundo-elevado/destaque/preto/branco/verde/erro-escuro).
   ========================================================================== */
:root {
  color-scheme: dark;

  /* tokens do @theme do Sinapse (frontend/src/index.css) — cópia fiel */
  --color-azul: #1e3a8a;
  --color-azul-escuro: #0f1e4d;
  --color-azul-tenue: #1e293b;
  --color-azul-realce: #3b82f6;
  --color-alerta: #f97316;
  --color-alerta-fundo: #2a1a0f;
  --color-tinta: #f1f5f9;
  --color-tinta-suave: #cbd5e1;
  --color-borda: #334155;
  --color-fundo: #0a1228;
  --color-superficie: #1e293b;
  --color-ok: #34d399;
  --color-ok-fundo: #022c22;
  --color-ok-solido: #047857;
  --color-atencao: #fbbf24;
  --color-atencao-fundo: #2d1f04;
  --color-erro: #f87171;
  --color-erro-fundo: #2a0a0a;
  --color-erro-solido: #dc2626;
  --color-info: #60a5fa;
  --color-info-fundo: #0c2547;
  --color-link: #60a5fa;
  --color-fonte-disponivel: #60a5fa;
  --color-fonte-indisponivel: #94a3b8;

  /* valores do Sinapse sem token próprio no @theme */
  --color-azul-hover: #1e40af;        /* hover de .btn-primario em index.css */
  --color-branco: #ffffff;            /* texto de botões sólidos (text-white) */

  /* escala (padrões Tailwind v4 usados pelo Sinapse) */
  --radius-sm: 0.25rem;   /* rounded    — chips, badges retangulares, avisos */
  --radius-md: 0.375rem;  /* rounded-md — botões, inputs, cards pequenos */
  --radius-lg: 0.5rem;    /* rounded-lg — cards, tabelas, painéis */
  --radius-full: 9999px;  /* rounded-full — status chips */
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* aliases legados do LicitHub (app.js usa var(--ok) inline) */
  --ok: var(--color-ok);
  --danger: var(--color-erro);
  --warn: var(--color-atencao);
  --ink: var(--color-tinta);
  --ink-soft: var(--color-tinta-suave);
  --muted: var(--color-fonte-indisponivel);
  --line: var(--color-borda);
  --surface: var(--color-superficie);
  --brand: var(--color-azul);
  --accent: var(--color-azul-realce);
  --radius: var(--radius-lg);
  --font: var(--font-sans);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  margin: 0;
  background-color: var(--color-fundo);
  color: var(--color-tinta);
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

:focus-visible {
  outline: 2px solid var(--color-azul-realce);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-fundo); }
::-webkit-scrollbar-thumb { background: var(--color-azul-tenue); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-azul); }

a { color: var(--color-link); }

.hidden { display: none !important; }

/* ---------- Header / topbar (Layout.tsx: bg-azul-escuro border-b px-6 py-3) ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-azul-escuro);
  border-bottom: 1px solid var(--color-borda);
  color: var(--color-tinta);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  cursor: pointer;
  user-select: none;
  min-width: 0;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-superficie);
  border: 1px solid var(--color-borda);
  color: var(--color-azul-realce);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand-name {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--color-tinta);
}
.brand-sub {
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-tinta-suave);
}

/* Badges retangulares (Auditoria.tsx: rounded px-1.5 py-0.5 text-xs font-medium) */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  background: var(--color-atencao-fundo);
  color: var(--color-atencao);
  border: 1px solid color-mix(in srgb, var(--color-atencao) 30%, transparent);
}
.badge-engine {
  background: var(--color-info-fundo);
  color: var(--color-info);
  border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}
.badge-warn {
  background: var(--color-alerta-fundo);
  color: var(--color-alerta);
  border-color: color-mix(in srgb, var(--color-alerta) 30%, transparent);
}
.topnav .linkish {
  background: none;
  border: 1px solid transparent;
  color: var(--color-tinta-suave);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-md);
  transition: background-color 150ms ease, color 150ms ease;
}
.topnav .linkish:hover { background: var(--color-azul-tenue); color: var(--color-tinta); }

/* ---------- Casca ---------- */
.shell {
  width: min(1180px, calc(100% - 3rem));
  margin: 1.5rem auto 2rem;
  flex: 1;
}

.view-head h1,
.view > h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-tinta);
}
.lede {
  margin: 0 0 1.25rem;
  color: var(--color-tinta-suave);
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 52rem;
}
.view-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.job-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--color-fundo);
  color: var(--color-tinta-suave);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-borda);
}
.job-chip:empty { display: none; }
/* status chip (ContratoStatusBadge: rounded-full ring-1 px-2.5 py-1 text-xs font-medium) */
.status-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--color-ok-fundo);
  color: var(--color-ok);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ok) 30%, transparent);
}

/* ---------- Workspace em 2 colunas ---------- */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 960px) {
  .workspace { grid-template-columns: 1fr; }
  .painel-lateral { position: static; }
  .step-previa-inline { display: block; }
}
@media (min-width: 961px) {
  .step-previa-inline { display: none; }
}

.workspace-main {
  min-width: 0;
  color: var(--color-tinta);
}

/* Cada passo do formulário é um card Sinapse (rounded-lg border bg-superficie p-5, sem sombra) */
.step-block {
  margin: 0 0 1rem;
  padding: 1.25rem;
  min-width: 0;
  background: var(--color-superficie);
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-lg);
}
.step-legend {
  float: left;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0;
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-tinta);
}
.step-legend + * { clear: both; }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-md);
  background: var(--color-azul-realce);
  color: var(--color-fundo);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------- Painel lateral ---------- */
.painel-lateral {
  position: sticky;
  top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.painel-card {
  background: var(--color-superficie);
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-lg);
  padding: 1rem;
}
.painel-title {
  margin: 0 0 0.5rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-tinta-suave);
}
.painel-lede {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  color: var(--color-tinta-suave);
  line-height: 1.45;
}
.painel-org-name {
  margin: 0;
  font-weight: 600;
  color: var(--color-tinta);
  font-size: 0.875rem;
}
.painel-org-meta {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.75rem;
  color: var(--color-tinta-suave);
}

/* ---------- Grid / campos ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem 1rem;
}
.grid-2.tight { gap: 0.625rem 0.875rem; }
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
}
.span-2, .span-full { grid-column: 1 / -1; }

/* Login.tsx: label mb-1 text-xs font-medium text-tinta-suave;
   input rounded-md border border-borda px-3 py-2 text-sm (bg-fundo dentro de card, como no Studio) */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  min-width: 0;
}
.field span { color: var(--color-tinta-suave); font-weight: 500; font-size: 0.75rem; }
.field em,
.cnpj-field em { color: var(--color-erro); font-style: normal; }
.field input,
.field select,
.field textarea,
.cnpj-row input,
.itens-table input,
.itens-table select {
  font: inherit;
  font-size: 0.875rem;
  color: var(--color-tinta);
  background: var(--color-fundo);
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field input::placeholder,
.field textarea::placeholder,
.cnpj-row input::placeholder,
.itens-table input::placeholder {
  color: var(--color-fonte-indisponivel);
  opacity: 1;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.cnpj-row input:focus,
.itens-table input:focus,
.itens-table select:focus {
  outline: none;
  border-color: var(--color-azul-realce);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-azul-realce) 25%, transparent);
}
.field input[readonly] {
  background: transparent;
  color: var(--color-tinta-suave);
  border-style: dashed;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--color-erro); }
.field textarea { resize: vertical; min-height: 4.5rem; }
.field select { cursor: pointer; }
.field input:-webkit-autofill,
.field select:-webkit-autofill,
.field textarea:-webkit-autofill,
.cnpj-row input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-fundo) inset;
  -webkit-text-fill-color: var(--color-tinta);
  caret-color: var(--color-tinta);
}

/* ---------- CNPJ ---------- */
.cnpj-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.cnpj-field > span { color: var(--color-tinta-suave); font-weight: 500; font-size: 0.75rem; }
.cnpj-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.cnpj-row input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  padding: 0.625rem 0.875rem;
}
.btn-cnpj {
  flex-shrink: 0;
  white-space: nowrap;
}
.cnpj-status {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-tinta-suave);
}
.cnpj-status.ok { color: var(--color-ok); }
.cnpj-status.err { color: var(--color-erro); }
.cnpj-status.loading { color: var(--color-tinta-suave); }

/* ---------- Card "Dados oficiais" ---------- */
.org-card {
  border: 1px solid var(--color-borda);
  border-left: 3px solid var(--color-azul-realce);
  border-radius: var(--radius-lg);
  background: var(--color-fundo);
  padding: 1rem;
  margin-bottom: 1rem;
  animation: orgReveal 0.3s ease;
}
@keyframes orgReveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.org-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.875rem;
  flex-wrap: wrap;
}
.org-card-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-azul-realce);
}
.org-card-title {
  margin: 0.125rem 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-tinta);
  line-height: 1.3;
}
.org-card-razao {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--color-tinta-suave);
}
.source-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.chip {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-borda);
  background: var(--color-fundo);
  color: var(--color-tinta-suave);
}
.chip.brasilapi {
  background: var(--color-info-fundo);
  color: var(--color-info);
  border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}
.chip.pncp {
  background: var(--color-ok-fundo);
  color: var(--color-ok);
  border-color: color-mix(in srgb, var(--color-ok) 30%, transparent);
}
.chip.pncp-consulta,
.chip.pncp-search {
  background: var(--color-alerta-fundo);
  color: var(--color-alerta);
  border-color: color-mix(in srgb, var(--color-alerta) 30%, transparent);
}

.org-dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
}
.org-dl .span-full { grid-column: 1 / -1; }
.org-dl dt {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-tinta-suave);
}
.org-dl dd {
  margin: 0.125rem 0 0;
  color: var(--color-tinta);
  line-height: 1.4;
}
@media (max-width: 560px) {
  .org-dl { grid-template-columns: 1fr; }
}

.org-edit-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--color-borda);
}
.org-edit-fields.locked .field span::after {
  content: " (auto)";
  font-weight: 400;
  color: var(--color-fonte-indisponivel);
}
.org-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.responsavel-strip {
  background: transparent;
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1rem;
}
.strip-label {
  margin: 0 0 0.625rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-tinta);
}
.strip-hint {
  font-weight: 400;
  color: var(--color-fonte-indisponivel);
  font-size: 0.75rem;
}

/* ---------- Rito / checklist ---------- */
.rito-preview {
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.75rem;
  background: var(--color-info-fundo);
  border: 1px solid color-mix(in srgb, var(--color-info) 30%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-tinta);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.rito-preview.side {
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--color-tinta-suave);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-tinta-suave);
}
.check-item.ok { color: var(--color-ok); font-weight: 500; }
.check-item.miss { color: var(--color-erro); }
.check-item .mark {
  width: 1rem;
  text-align: center;
  font-weight: 600;
}
.faltam-line {
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-borda);
  font-size: 0.75rem;
  color: var(--color-erro);
  font-weight: 500;
}

/* ---------- Prévia das peças ---------- */
.piece-preview {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.piece-preview li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  transition: background-color 150ms ease;
}
.piece-preview li:hover { background: var(--color-fundo); }
.piece-preview .pc {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-link);
  grid-row: span 2;
  padding-top: 0.0625rem;
}
.piece-preview .pt {
  font-weight: 500;
  color: var(--color-tinta);
  line-height: 1.3;
}
.piece-preview .pp {
  color: var(--color-fonte-indisponivel);
  font-size: 0.75rem;
  line-height: 1.35;
  grid-column: 2;
}

/* ---------- Contratações PNCP ---------- */
.contratacoes-block {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px dashed var(--color-borda);
}
.contratacoes-title {
  margin: 0 0 0.5rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-tinta-suave);
}
.contratacoes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.contratacoes-list li {
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 0.5rem 0.625rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-md);
}
.painel-card .contratacoes-list li { background: var(--color-fundo); }
.contratacoes-list .co {
  display: block;
  font-weight: 500;
  color: var(--color-tinta);
}
.contratacoes-list .cm {
  display: block;
  color: var(--color-fonte-indisponivel);
  margin-top: 0.125rem;
  font-variant-numeric: tabular-nums;
}
.contratacoes-list.compact li { padding: 0.375rem 0.5rem; }
.contratacoes-list a,
.contratacoes-list a.co { color: var(--color-link); text-decoration: none; }
.contratacoes-list a:hover { text-decoration: underline; }

/* ---------- Botões (Botao.tsx) ---------- */
.form-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.btn {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* primario: bg-azul text-white hover #1e40af */
.btn.primary {
  background: var(--color-azul);
  color: var(--color-branco);
  border-color: var(--color-azul);
}
.btn.primary:hover:not(:disabled) {
  background: var(--color-azul-hover);
  border-color: var(--color-azul-hover);
}
/* secundário (Tombamento): border-borda bg-superficie text-tinta-suave hover:bg-fundo */
.btn.secondary {
  background: var(--color-superficie);
  color: var(--color-tinta-suave);
  border-color: var(--color-borda);
}
.btn.secondary:hover:not(:disabled) {
  background: var(--color-fundo);
  color: var(--color-tinta);
}
/* fantasma: border-borda text-tinta, fundo transparente */
.btn.ghost {
  background: transparent;
  color: var(--color-tinta);
  border-color: var(--color-borda);
}
.btn.ghost:hover:not(:disabled) {
  background: var(--color-fundo);
  border-color: var(--color-fonte-indisponivel);
}
/* perigo / ok (disponíveis; bg-erro-solido / bg-ok-solido text-white) */
.btn.danger {
  background: var(--color-erro-solido);
  color: var(--color-branco);
  border-color: var(--color-erro-solido);
}
.btn.danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-erro-solido) 90%, transparent);
}
.btn.success {
  background: var(--color-ok-solido);
  color: var(--color-branco);
  border-color: var(--color-ok-solido);
}
.btn.success:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-ok-solido) 90%, transparent);
}
.btn.sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Faixa de erro (rounded border border-erro bg-erro-fundo p-3 text-sm text-erro) */
.hint {
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.75rem;
  background: var(--color-erro-fundo);
  border: 1px solid var(--color-erro);
  border-radius: var(--radius-sm);
  color: var(--color-erro);
  font-size: 0.8125rem;
}
.hint[hidden] { display: none; }
#hist-empty.hint {
  background: var(--color-fundo);
  border-color: var(--color-borda);
  color: var(--color-tinta-suave);
}
.fineprint {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--color-fonte-indisponivel);
  text-align: right;
}

/* ---------- Progresso / pronto / histórico ---------- */
#view-progress,
#view-done,
#view-historico {
  background: var(--color-superficie);
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
}

/* Barra de progresso — componente novo (o Sinapse não tem):
   trilho #334155, preenchimento #3b82f6, texto tinta-suave, números mono tabulares */
.progress-block { margin: 1.25rem 0 1.25rem; }
.progress-track {
  position: relative;
  height: 0.5rem;
  background: var(--color-borda);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--color-azul-realce);
  border-radius: var(--radius-full);
  transition: width 0.45s ease;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-tinta-suave);
}
.progress-meta strong {
  color: var(--color-tinta);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Estado de erro (sem classe extra no JS: deriva da caixa de erro visível) */
#view-progress:has(#prog-error:not(.hidden)) .progress-fill { background: var(--color-erro); }
#view-progress:has(#prog-error:not(.hidden)) .steps li.current { background: var(--color-erro-fundo); }
#view-progress:has(#prog-error:not(.hidden)) .steps li.current .mark {
  background: var(--color-erro);
  border-color: var(--color-erro);
  color: var(--color-fundo);
}

/* Lista de status por peça */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.steps:empty { display: none; }
.steps li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--color-fonte-indisponivel);
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--color-borda);
}
.steps li:first-child { border-top: none; }
.steps li.done { color: var(--color-tinta); }
.steps li.current {
  color: var(--color-tinta);
  font-weight: 500;
  background: var(--color-info-fundo);
}
.steps .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-borda);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-fonte-indisponivel);
}
.steps li.done .mark {
  background: var(--color-ok-fundo);
  border-color: color-mix(in srgb, var(--color-ok) 30%, transparent);
  color: var(--color-ok);
}
.steps li.current .mark {
  background: var(--color-azul-realce);
  border-color: var(--color-azul-realce);
  color: var(--color-fundo);
}

.folder-row {
  margin-top: 1rem;
  padding: 0.625rem 0.75rem;
  background: var(--color-fundo);
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--color-tinta-suave);
}
.folder-row a { color: var(--color-link); font-weight: 500; }

.error-box {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-erro-fundo);
  border: 1px solid var(--color-erro);
  border-radius: var(--radius-sm);
  color: var(--color-erro);
  font-size: 0.875rem;
}

.folder-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 1.5rem;
}
.section-title {
  margin: 0 0 0.5rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-tinta-suave);
}
/* Lista de peças entregues — mesmo padrão de tabela Sinapse */
.file-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.file-list:empty { display: none; }
.file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--color-borda);
  font-size: 0.875rem;
  transition: background-color 150ms ease;
}
.file-list li:first-child { border-top: none; }
.file-list li:hover { background: var(--color-fundo); }
.file-list .title {
  font-weight: 500;
  color: var(--color-tinta);
  word-break: break-word;
}
.file-list a.btn {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  flex-shrink: 0;
  color: var(--color-link);
}

.pending-wrap { margin-bottom: 0.5rem; }
.pending-list {
  margin: 0 0 1rem;
  padding: 0.75rem 0.75rem 0.75rem 2rem;
  background: var(--color-atencao-fundo);
  border: 1px solid color-mix(in srgb, var(--color-atencao) 40%, transparent);
  border-radius: var(--radius-md);
  color: var(--color-atencao);
  font-size: 0.8125rem;
}
.pending-list li { margin: 0.125rem 0; }
.dedupe-note {
  background: var(--color-atencao-fundo);
  border: 1px solid var(--color-atencao);
  color: var(--color-atencao);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  margin: -0.5rem 0 1rem;
}

.hist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* ContratoCard: rounded-md border bg-superficie p-3 hover:border-azul-realce */
.hist-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  padding: 0.75rem;
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-md);
  background: var(--color-fundo);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  transition: border-color 150ms ease;
}
.hist-item:hover { border-color: var(--color-azul-realce); }
.hist-item .org { font-weight: 500; font-size: 0.875rem; color: var(--color-tinta); }
.hist-item .obj { color: var(--color-tinta-suave); font-size: 0.8125rem; grid-column: 1 / -1; }
.hist-item .meta {
  font-size: 11px;
  color: var(--color-fonte-indisponivel);
  font-family: var(--font-mono);
}
.hist-item .state {
  font-size: 11px;
  font-weight: 500;
  align-self: start;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-fundo);
  color: var(--color-tinta-suave);
  box-shadow: 0 0 0 1px var(--color-borda);
}
.hist-item .state.done {
  background: var(--color-ok-fundo);
  color: var(--color-ok);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ok) 30%, transparent);
}
.hist-item .state.error {
  background: var(--color-erro-fundo);
  color: var(--color-erro);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-erro) 30%, transparent);
}
.hist-item .state.running {
  background: var(--color-info-fundo);
  color: var(--color-info);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-info) 30%, transparent);
}

.footer {
  text-align: center;
  padding: 0.75rem;
  color: var(--color-fonte-indisponivel);
  font-size: 11px;
  border-top: 1px solid var(--color-borda);
  background: var(--color-azul-escuro);
}

/* ---------- Timer do apresentador ---------- */
.eta-panel {
  margin: 0 0 1.25rem;
  padding: 1rem;
  background: var(--color-fundo);
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-lg);
}
.eta-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.eta-title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-tinta-suave);
}
.eta-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-full);
  background: var(--color-info-fundo);
  color: var(--color-info);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-info) 30%, transparent);
}
.eta-badge.done {
  background: var(--color-ok-fundo);
  color: var(--color-ok);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ok) 30%, transparent);
}
.eta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  margin: 0;
}
.eta-grid .span-full { grid-column: 1 / -1; }
.eta-grid dt {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-tinta-suave);
  font-weight: 500;
}
.eta-grid dd {
  margin: 0.125rem 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-tinta);
}
.eta-grid .span-full dd {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-tinta-suave);
}
.eta-tip {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-borda);
  font-size: 0.75rem;
  color: var(--color-fonte-indisponivel);
  line-height: 1.45;
}
.painel-tempo-line {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-tinta);
}
.painel-tempo-tip {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-tinta-suave);
  line-height: 1.45;
}

/* ---------- CATMAT / Painel de Preços ---------- */
.catmat-panel,
.itens-panel {
  margin: 0.25rem 0 0.25rem;
  padding: 1rem;
  background: transparent;
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.catmat-head,
.itens-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.catmat-title,
.itens-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-tinta);
}
.itens-title em { color: var(--color-erro); font-style: normal; }
.catmat-lede,
.itens-lede {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--color-tinta-suave);
  max-width: 36rem;
}
.catmat-query-field { margin-bottom: 0.5rem; }
.catmat-status,
.itens-status {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-tinta-suave);
}
.catmat-status.loading,
.itens-status.loading { color: var(--color-tinta-suave); }
.catmat-status.ok,
.itens-status.ok { color: var(--color-ok); }
.catmat-status.err,
.itens-status.err { color: var(--color-erro); }
.catmat-candidates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.625rem 0;
}
.catmat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-full);
  background: var(--color-fundo);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-tinta-suave);
  cursor: pointer;
  max-width: 100%;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.catmat-chip:hover { border-color: var(--color-azul-realce); color: var(--color-tinta); }
.catmat-chip.selected {
  border-color: var(--color-azul-realce);
  background: var(--color-info-fundo);
  color: var(--color-tinta);
}
.catmat-chip .code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-link);
}
.catmat-chip .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

/* Origem do preço (CATMAT / CATSER) — chip pequeno na coluna Catálogo */
.origem-catser { color: #6f42c1; }
.price-card .pc-origem { font-size: 11px; color: var(--color-link); margin: 0 0 0.25rem; }
.price-card .pc-origem.catser { color: #6f42c1; }
.col-catmat { white-space: nowrap; }
.col-catmat .codigo-input {
  width: 7rem;
  font-family: var(--font-mono);
}
.col-origem { white-space: nowrap; }
.origem-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: var(--color-info-fundo);
  color: var(--color-tinta);
  border: 1px solid var(--color-azul-realce);
}
.origem-chip.catser {
  background: #f1eaff;
  color: #6f42c1;
  border-color: #c9b8f5;
}

.catmat-prices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
  margin-top: 0.625rem;
}
.price-card {
  background: var(--color-fundo);
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}
.price-card h4 {
  margin: 0 0 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-link);
}
.price-card .pc-desc {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  color: var(--color-tinta-suave);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.price-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.125rem 0.5rem;
  font-size: 0.75rem;
}
.price-card dt { color: var(--color-fonte-indisponivel); }
.price-card dd {
  margin: 0;
  font-weight: 500;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-tinta);
}
.catmat-add-itens-row { margin-top: 0.625rem; }

/* ---------- Itens do objeto / Orçamento ---------- */
.itens-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Tabelas Sinapse: wrapper rounded-lg border; thead bg-fundo text-xs uppercase tracking-wide;
   linhas border-t hover:bg-fundo; números mono tabulares à direita */
.itens-table-wrap,
.orcamento-table-wrap {
  overflow-x: auto;
  margin: 0.375rem 0;
  border: 1px solid var(--color-borda);
  border-radius: var(--radius-lg);
  background: var(--color-superficie);
}
.itens-table,
.orcamento-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: transparent;
  color: var(--color-tinta);
}
.itens-table th,
.itens-table td,
.orcamento-table th,
.orcamento-table td {
  border: none;
  border-top: 1px solid var(--color-borda);
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
  text-align: left;
}
.itens-table thead th,
.orcamento-table thead th {
  border-top: none;
  background: var(--color-fundo);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-tinta-suave);
}
.itens-table td { padding: 0.375rem 0.5rem; }
.itens-table tbody tr:hover,
.orcamento-table tbody tr:hover { background: var(--color-fundo); }
.itens-table .col-actions { width: 2.75rem; text-align: center; }
.itens-table input,
.itens-table select {
  width: 100%;
  min-width: 0;
  padding: 0.375rem 0.5rem;
}
.itens-table td.col-qtd input,
.itens-table td.col-catmat input {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.itens-table .col-qtd { width: 5rem; }
.itens-table .col-un { width: 5.25rem; }
.itens-table .col-catmat { width: 7rem; }
.btn-row-remove {
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-erro);
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.btn-row-remove:hover {
  background: var(--color-erro-fundo);
  border-color: color-mix(in srgb, var(--color-erro) 40%, transparent);
}
.orcamento-result {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px dashed var(--color-borda);
}
.orcamento-title {
  margin: 0 0 0.5rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-tinta-suave);
}
/* colunas numéricas do orçamento: Qtd (2), Preço unit. (5), Total linha (6) */
.orcamento-table tbody td:nth-child(2),
.orcamento-table tbody td:nth-child(5),
.orcamento-table tbody td:nth-child(6),
.orcamento-table thead th:nth-child(2),
.orcamento-table thead th:nth-child(5),
.orcamento-table thead th:nth-child(6) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.orcamento-table tbody td:nth-child(2),
.orcamento-table tbody td:nth-child(4),
.orcamento-table tbody td:nth-child(5),
.orcamento-table tbody td:nth-child(6) {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.orcamento-table tbody td:first-child {
  min-width: 12rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.orcamento-table th,
.orcamento-table td { padding: 0.5rem 0.625rem; }
.orcamento-table tbody td:nth-child(7) {
  font-size: 0.75rem;
  color: var(--color-tinta-suave);
}
.orcamento-table tfoot th,
.orcamento-table tfoot td {
  background: var(--color-fundo);
  font-weight: 600;
  color: var(--color-tinta);
}
.orcamento-table tfoot th { text-align: right; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; color: var(--color-tinta-suave); }
.orcamento-table tfoot td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  color: var(--color-ok);
}
.orcamento-warnings {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  background: var(--color-atencao-fundo);
  border: 1px solid color-mix(in srgb, var(--color-atencao) 40%, transparent);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--color-atencao);
}
.orcamento-warnings[hidden] { display: none; }
.painel-orcamento-total {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-tinta);
  font-size: 1.125rem;
}
.painel-orcamento-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-tinta-suave);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .topbar { padding: 0.75rem 1rem; }
  .shell { width: calc(100% - 2rem); margin-top: 1rem; }
  .step-block { padding: 1rem; }
  #view-progress, #view-done, #view-historico { padding: 1rem; }
  .brand-sub { display: none; }
}