/* Central de Crédito — mesa de decisão.
   Metáfora que organiza tudo: mesa escura, documento claro em cima dela.
   O funil é a mesa (tinta); detalhe e memo são papel, porque é o que vira PDF. */

:root {
  /* Paleta alinhada aos tokens do painel dos LPs (mock-muse-spark): mesa usa
     o tema escuro da LP, papel usa o tema claro — mesmo par, sem cor nova. */
  --tinta: oklch(0.14 0.02 240);      /* mesa */
  --gaveta: oklch(0.22 0.02 240);     /* coluna do funil */
  --ficha: oklch(0.17 0.02 240);      /* card */
  --ficha-alta: oklch(0.25 0.04 215); /* card sob o cursor */
  --papel: oklch(0.985 0.004 250);    /* documento */
  --papel-linha: oklch(0.91 0.006 250);
  --grafite: oklch(0.18 0.02 255);    /* texto sobre papel */
  --nevoa: oklch(0.7 0.01 230);       /* texto secundário sobre tinta */
  --brasa: oklch(0.78 0.14 75);       /* prazo correndo */
  --salvia: oklch(0.7 0.14 160);      /* avanço, GO */
  --carmim: oklch(0.65 0.2 25);       /* divergência, NO-GO */
  --safira: oklch(0.7 0.12 215);      /* links, CTA, foco */
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, "Cascadia Mono", monospace;
  --corpo: "Satoshi", ui-sans-serif, system-ui, -apple-system, "SF Pro Display", sans-serif;
  --raio: 1rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--corpo);
  line-height: 1.5;
}

/* `.mesa` é a página do funil. O memo NÃO é mesa: é papel, e define o próprio
   fundo — por isso nada de cor de fundo/texto no `body` solto. */
body.mesa {
  padding: 28px 24px 40px;
  background: var(--tinta);
  color: #E7EDF4;
}

/* Cabeçalho: o nome do painel é código de sistema, não manchete. */
body.mesa h1 {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 22px;
  color: #E7EDF4;
}
body.mesa h1::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 10px;
  background: var(--salvia);
  border-radius: 2px;
  vertical-align: 1px;
}

/* ── Barra de ferramentas: busca + filtros, no espírito do painel de LP ── */

.ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }

#busca {
  font: inherit;
  font-family: var(--corpo);
  font-size: 12.5px;
  min-width: 260px;
  flex: 1 1 260px;
  max-width: 420px;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid #33415580;
  background: var(--ficha);
  color: #E7EDF4;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
#busca::placeholder { color: var(--nevoa); }
#busca:focus {
  border-color: var(--safira);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--safira) 15%, transparent);
}

.chip-filtro {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--nevoa);
  padding: .48rem .9rem;
  border: 1px solid #33415580;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
.chip-filtro:has(input:checked) {
  color: #E7EDF4;
  border-color: var(--safira);
  background: color-mix(in oklab, var(--safira) 12%, transparent);
}
.chip-filtro input { accent-color: var(--safira); }

/* ── Funil ────────────────────────────────────────────────────────────── */

#funil { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }

.coluna {
  min-width: 232px;
  flex: 0 0 232px;
  min-height: 160px;   /* coluna vazia continua sendo uma gaveta, não some */
  background: var(--gaveta);
  border-radius: var(--raio);
  padding: 12px 12px 14px;
  border-top: 2px solid transparent;
}
.coluna.erro { border-top-color: var(--carmim); }

.coluna h2 {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nevoa);
  margin: 0 0 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.card {
  background: var(--ficha);
  border-radius: calc(var(--raio) - 2px);
  padding: 12px 13px 13px;
  margin-bottom: 9px;
  cursor: pointer;
  border: 1px solid #29344680;
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 2px 6px -2px rgba(0,0,0,.35);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.card:hover, .card:focus-visible {
  background: var(--ficha-alta);
  border-color: #3A4A61;
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 6px 16px -4px rgba(0,0,0,.5);
  transform: translateY(-1px);
  outline: none;
}
.card:focus-visible { border-color: var(--salvia); }

.card .nome { font-size: 14px; font-weight: 550; letter-spacing: -0.01em; }
.card .op-id {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--nevoa);
  margin-top: 2px;
  letter-spacing: -0.02em;
}

/* ASSINATURA — régua de parada.
   O tempo na etapa vira COMPRIMENTO: quem varre o funil vê a demora antes de
   ler qualquer coisa. Vira brasa quando passa de uma semana parada. */
.regua { margin-top: 9px; }
.regua .trilho {
  height: 3px;
  background: rgba(51, 65, 85, .5);
  border-radius: 2px;
  overflow: hidden;
}
.regua .marca {
  display: block;
  height: 100%;
  background: var(--salvia);
  border-radius: 2px;
  transition: width .3s ease;
}
.regua.parada .marca { background: var(--brasa); }
.regua .tempo {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--nevoa);
  margin-top: 5px;
  letter-spacing: -0.02em;
}
.regua.parada .tempo { color: var(--brasa); }

/* Divergência é carimbo, não cor de fundo: some no meio de tudo se for sutil.
   O seletor é solto de propósito — o mesmo carimbo aparece no card (mesa) e no
   detalhe (papel). Preso a `.card` ele sumia no detalhe. */
.card.divergente { border-left: 3px solid var(--carmim); }
.carimbo {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--carmim);
  border: 1px solid var(--carmim);
  border-radius: 3px;
  padding: 1px 5px;
  margin-top: 8px;
}

.vazio { color: #64748B; font-size: 12.5px; font-style: italic; padding: 6px 2px; }

/* ── Detalhe: papel sobre a mesa ──────────────────────────────────────── */

#detalhe {
  position: fixed; inset: 0;
  background: rgba(6, 10, 16, .74);
  padding: 40px 20px;
  overflow-y: auto;
}
#detalhe.oculto { display: none; }

#detalhe .painel {
  background: var(--papel);
  color: var(--grafite);
  border-radius: 4px;               /* papel tem canto vivo, não pílula */
  padding: 30px 34px 34px;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
#detalhe h2 {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: -0.02em;
  margin: 0 0 2px;
}
#detalhe .op-id {
  font-family: var(--mono);
  font-size: 11px;
  color: #6B7280;
  margin: 0 0 14px;
}
#detalhe h3 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6B7280;
  margin: 22px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--papel-linha);
}
#detalhe p { margin: 4px 0; font-size: 14px; }
#detalhe .campo-aninhado { margin: 6px 0 6px 14px; padding-left: 10px; border-left: 2px solid var(--papel-linha); }
#detalhe .campo-aninhado > b { display: block; margin-bottom: 2px; }
#detalhe table { width: 100%; border-collapse: collapse; margin: 6px 0 4px; }
#detalhe td, #detalhe th {
  border-bottom: 1px solid var(--papel-linha);
  padding: 6px 8px;
  text-align: left;
  font-size: 13px;
}
#detalhe th { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: #6B7280; }
#detalhe pre {
  background: #E8E1D5;
  border-left: 2px solid var(--papel-linha);
  padding: 10px 12px;
  border-radius: 3px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
}
#detalhe .vazio { color: #8A8578; }

/* O mesmo carimbo do funil, agora sobre papel. */
.carimbo-papel {
  margin: 0 0 12px;
  transform: rotate(-1.2deg);   /* carimbo humano nunca sai reto */
}

.pareceres { display: grid; grid-template-columns: 1fr; gap: 18px; min-width: 0; }
.pareceres > div { min-width: 0; }

.fechar {
  cursor: pointer; float: right;
  font-family: var(--mono); font-size: 16px; line-height: 1;
  color: #6B7280; padding: 2px 6px; border-radius: 3px;
}
.fechar:hover { color: var(--carmim); }

.etapa-manual {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 10px 0 16px;
  padding: 10px 12px;
  background: #F4F1E8;
  border-radius: 6px;
}
.etapa-manual label { font-size: 12px; color: #6B7280; }
.etapa-manual select {
  font: inherit; font-family: var(--mono); font-size: 12.5px;
  padding: .35rem .5rem; border-radius: 4px; border: 1px solid var(--papel-linha);
  background: #fff;
}
.botao-secundario {
  font: inherit; font-family: var(--mono); font-size: 11.5px;
  padding: .35rem .7rem; border-radius: 4px;
  background: var(--safira); color: #0B1220; border: 1px solid var(--safira);
  cursor: pointer;
}
.botao-secundario:disabled { opacity: .45; cursor: default; }
.aviso-etapa-manual { flex-basis: 100%; font-size: 11px; color: #8A8578; font-style: italic; }

/* O caminho para a reunião: botão de ação, não link perdido no texto. */
.link-memo {
  display: inline-block;
  margin: 2px 0 6px;
  padding: .42rem .8rem;
  background: var(--grafite);
  color: var(--papel);
  border-radius: 4px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.link-memo:hover { background: #000; }

/* Zona de perigo: separada visualmente do resto, pra não ser clicada por acidente. */
.zona-perigo {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px dashed var(--papel-linha);
  text-align: right;
}
.botao-perigo, .botao-neutro {
  font: inherit;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: .42rem .8rem;
  border-radius: 4px;
  cursor: pointer;
}
.botao-perigo {
  background: var(--carmim);
  color: #fff;
  border: 1px solid var(--carmim);
}
.botao-perigo:hover { background: #A1291A; }
.botao-perigo:disabled { opacity: .6; cursor: default; }
.botao-perigo-fraco {
  background: transparent;
  color: var(--carmim);
  border: 1px solid var(--carmim);
}
.botao-perigo-fraco:hover { background: var(--carmim); color: #fff; }
.botao-neutro {
  background: transparent;
  color: #6B7280;
  border: 1px solid var(--papel-linha);
  margin-left: 6px;
}
.botao-neutro:hover { color: var(--grafite); }
.confirmar-exclusao {
  font-size: 13px;
  color: var(--grafite);
}
.confirmar-exclusao .botao-perigo,
.confirmar-exclusao .botao-neutro {
  margin-left: 6px;
}

@media (max-width: 640px) {
  body.mesa { padding: 20px 14px 32px; }
  #detalhe { padding: 20px 10px; }
  #detalhe .painel { padding: 22px 20px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* ── Carteira: dinheiro na rua ────────────────────────────────────────── */

.abas { display: flex; gap: 6px; margin: -10px 0 20px; }
.abas a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--nevoa); text-decoration: none; padding: .35rem .7rem;
  border: 1px solid transparent; border-radius: 6px;
}
.abas a:hover { color: #E7EDF4; }
.abas a[aria-current="page"] { color: #E7EDF4; border-color: #33415580; background: var(--gaveta); }

.linha-carteira {
  background: var(--gaveta);
  border-radius: var(--raio);
  padding: 14px 16px 16px;
  margin-bottom: 10px;
  max-width: 860px;
  border-left: 3px solid transparent;   /* a cor conta a situação */
}
.linha-carteira.situacao-quebrado { border-left-color: var(--carmim); }
.linha-carteira.situacao-atencao { border-left-color: var(--brasa); }
.linha-carteira.situacao-cumprido { border-left-color: var(--salvia); }

.linha-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.linha-topo .nome { font-size: 15px; font-weight: 550; }
.linha-topo .selo {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--nevoa);
}
.situacao-quebrado .selo { color: var(--carmim); }
.situacao-atencao .selo { color: var(--brasa); }
.situacao-cumprido .selo { color: var(--salvia); }

/* Números em grade: rótulo pequeno em cima, valor em mono embaixo. */
.numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px 16px; margin: 12px 0 12px;
}
.numeros .num { display: flex; flex-direction: column; gap: 2px; }
.numeros dt {
  font-family: var(--mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--nevoa);
}
.numeros dd { margin: 2px 0 0; font-family: var(--mono); font-size: 13px; }

.covenants { list-style: none; margin: 0 0 10px; padding: 0; }
.covenants .cov {
  font-size: 12.5px; padding: 3px 0 3px 12px; border-left: 2px solid #33415580; margin-bottom: 3px;
}
.covenants .cov.situacao-quebrado { border-left-color: var(--carmim); }
.covenants .cov.situacao-atencao { border-left-color: var(--brasa); }
.covenants .cov.situacao-cumprido { border-left-color: var(--salvia); }
.covenants .cov.situacao-verificacao_humana,
.covenants .cov.situacao-sem_dado { color: var(--nevoa); }

.linha-decisao {
  background: var(--gaveta);
  border-radius: var(--raio);
  padding: 14px 16px 16px;
  margin-bottom: 10px;
  max-width: 860px;
  border-left: 3px solid transparent;
}
.linha-decisao.decisao-aprovado,
.linha-decisao.decisao-aprovado_com_condicoes { border-left-color: var(--salvia); }
.linha-decisao.decisao-rejeitado { border-left-color: var(--carmim); }

/* Fonte/tamanho do selo já vêm de `.linha-topo .selo` (o selo da decisão está
   sempre dentro de `.linha-topo`, ver decisoes.js) — só a cor é específica. */
.decisao-aprovado .selo,
.decisao-aprovado_com_condicoes .selo { color: var(--salvia); }
.decisao-rejeitado .selo { color: var(--carmim); }

.meta-decisao, .condicoes-decisao { font-size: 12.5px; color: var(--nevoa); margin: 4px 0 0; }

.filtro-decisoes {
  display: block; margin-bottom: 14px;
  font-family: var(--mono); font-size: 12px; color: var(--nevoa);
}
.filtro-decisoes select { margin-left: 6px; }

.acoes-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.botao-lancar { cursor: pointer; font: inherit; font-family: var(--mono); font-size: 11.5px; }

.form-apuracao { margin-top: 14px; padding-top: 12px; border-top: 1px solid #33415580; }
.form-apuracao .campos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 14px; margin-bottom: 12px;
}
.form-apuracao label {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--nevoa);
}
.form-apuracao label.checkbox {
  flex-direction: row; align-items: center; gap: 7px; text-transform: none;
  font-size: 12px; letter-spacing: 0; font-family: var(--corpo);
}
.form-apuracao input {
  font: inherit; font-family: var(--mono); font-size: 13px;
  padding: .45rem .55rem; border: 1px solid #33415580; border-radius: 6px;
  background: var(--ficha); color: #E7EDF4;
}
.form-apuracao input[type=checkbox] { width: auto; }
.aviso-apuracao { margin: 8px 0 0; font-size: .85rem; color: var(--brasa); min-height: 1.1em; }

.titulo-secao {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--nevoa); margin: 22px 0 10px;
}