/* Conferencia Santa Fe - estilo "livro-caixa" (achromatic-ledger, seed 857620988).
   A moldura nao tem cor: tinta sobre pedra. O dourado da Santa Fe aparece so no dado que
   importa, a trilha do dinheiro (venceu, entrou, repassado), e nunca passa de 1% da tela.
   Texto em Poppins (a fonte da marca); todo numero em IBM Plex Mono, porque a Poppins nao
   tem algarismo de largura fixa e coluna de dinheiro precisa alinhar centavo com centavo.

   Grade: barra lateral 240 + tela fluida com 32 de margem e um vao so, 16, nos dois sentidos.
   Linha de cima: 5 colunas iguais no quadro de numeros (um quadro so, divisorias de 1px).
   Linha do meio: 2fr 1fr  ->  (L - 16) * 2/3 + 16 + (L - 16) / 3 = L. */

@font-face { font-family: "Poppins"; src: url("arquivos/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("arquivos/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("arquivos/plexmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("arquivos/plexmono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ground: #f5f4f2;      /* pedra: um passo fora do branco, quente e quase sem croma */
  --surface: #ffffff;
  --raised: #f7f6f4;
  --active: #e9e8e5;
  --border: #e6e4e0;
  --rule: #f0efec;
  --control: #cfccc6;
  --text: #141414;
  --muted: #5d5b57;
  --faint: #6b6965;
  --primary: #1a1a1a;
  --primary-ink: #ffffff;
  --gold: #a97c1f;        /* o dourado escuro da logo: 3,4:1 no branco, so em marca grafica */
  --gold-ink: #7a5912;    /* dourado que aguenta texto (5,9:1) */
  --positive: #247b50;
  --negative: #c4242a;
  --pill-positive-bg: #dcfae5; --pill-positive-ink: #04250e;
  --pill-negative-bg: #ffedea; --pill-negative-ink: #831c1e;
  --pill-warning-bg: #fffbeb; --pill-warning-ink: #92400e;
  --pill-neutral-bg: #eeedea; --pill-neutral-ink: #3d3c3a;

  --font: "Poppins", system-ui, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, Consolas, monospace;
  --fs-title: 24px; --fs-section: 16px; --fs-lead: 30px; --fs-kpi: 20px; --fs-body: 14px; --fs-small: 12px;

  --sidebar: 240px; --pad: 32px; --gap: 16px; --card-pad: 20px;
  --radius-card: 8px; --radius-control: 6px; --radius-chip: 4px;
  --control-height: 44px;  /* regra da casa: 44px de alvo de toque em qualquer tela */ --row-height: 48px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 var(--fs-body)/20px var(--font); }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- moldura */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 12px 16px; }
.lateral .marca { display: block; padding: 0 12px 6px; }
.lateral .marca img { width: 168px; height: auto; display: block; }
.lateral .escopo { padding: 0 12px; margin: 10px 0 28px; color: var(--muted); font-size: var(--fs-small); line-height: 16px; }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 8px; text-decoration: none; color: var(--muted); transition: background var(--t, 150ms) var(--ease), color 150ms; }
.nav a svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; }
.nav a:hover { background: var(--raised); color: var(--text); }
.nav a[aria-current="page"] { background: var(--active); color: var(--text); }
.nav .conta { margin-left: auto; font-family: var(--mono); font-size: var(--fs-small); color: var(--muted); }
.nav .conta.alerta { color: var(--negative); }
.lateral .rodape { margin-top: auto; padding: 16px 12px 0; color: var(--muted); font-size: var(--fs-small); line-height: 17px; }
.lateral .rodape b { color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; }

.tela { min-width: 0; padding: 32px var(--pad) 64px; }
.topo-celular, .menu-folha { display: none; }

/* ---------------------------------------------------------------- titulo */
.titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.titulo h1 { margin: 0; font-size: var(--fs-title); line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.titulo .sub { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 22px; max-width: 70ch; }
.titulo .sub strong { color: var(--text); font-weight: 600; }
.acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.btn { height: var(--control-height); padding: 0 14px; border-radius: var(--radius-control); border: 1px solid var(--control); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; font-size: var(--fs-body); transition: background 150ms var(--ease), transform 120ms var(--ease); }
.btn:hover { background: var(--raised); }
.btn:active { transform: translateY(1px); }
.btn.primario { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primario:hover { background: #333; }
.btn.perigo { color: var(--negative); border-color: #e7b9b9; }
.btn.texto { border-color: transparent; background: none; padding: 0 8px; font-weight: 500; }
.btn.texto:hover { background: var(--raised); }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
select.btn { padding-right: 30px; appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%235d5b57' stroke-width='1.6'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E") no-repeat right 10px center; }

/* ---------------------------------------------------------------- cartoes */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); min-width: 0; }
.card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px var(--card-pad) 12px; }
.card > header h2 { margin: 0; font-size: var(--fs-section); line-height: 24px; font-weight: 600; }
.card > header .lado { color: var(--muted); font-size: var(--fs-small); }
.card .corpo { padding: 0 var(--card-pad) var(--card-pad); }
.grade { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
.grade.meio { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.grade.par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
/* cartao esticado ate o vizinho: so o rodape (acao ou total) desce pro pe */
.card.estica { display: flex; flex-direction: column; }
.card.estica > .pe { margin-top: auto; }
.coluna { align-content: start; }
.pe-total { display: flex; justify-content: space-between; gap: 12px; padding: 12px var(--card-pad) 16px; border-top: 1px solid var(--rule); color: var(--muted); }
.pe-total .num { color: var(--text); }
.coluna { display: grid; gap: var(--gap); min-width: 0; }

/* quadro de numeros: um cartao so, dividido por linhas de 1px */
.quadro { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.quadro > div { padding: 16px var(--card-pad) 18px; border-left: 1px solid var(--border); min-width: 0; }
.quadro > div:first-child { border-left: 0; }
.quadro .rot { color: var(--muted); font-size: 13px; line-height: 18px; }
.quadro .val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--fs-kpi); line-height: 30px; margin-top: 6px; white-space: nowrap; }
.quadro .val.lider { font-size: var(--fs-lead); line-height: 38px; font-weight: 500; }
.quadro .val .cent { font-size: 0.62em; color: var(--muted); }
.quadro .nota { color: var(--muted); font-size: var(--fs-small); line-height: 16px; margin-top: 4px; }
.quadro .nota.ruim { color: var(--negative); }
.quadro .zero { color: var(--muted); }

/* ---------------------------------------------------------------- pendencias */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 16px; min-height: 60px; padding: 10px var(--card-pad); border-top: 1px solid var(--rule); }
.lista li:first-child { border-top: 0; }
.lista .oque { font-weight: 600; font-size: 13px; }
.lista .oque.ruim { color: var(--negative); }
.lista .linha1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .linha2 { color: var(--muted); font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .valor { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lista .acao { justify-self: end; }
.vazio { margin: 0 var(--card-pad) var(--card-pad); padding: 12px 14px; border: 1px dashed var(--control); border-radius: 8px; color: var(--muted); }
.mais { padding: 12px var(--card-pad) 16px; border-top: 1px solid var(--rule); }
.lista + .mais.pe { border-top: 1px solid var(--rule); }

/* chips */
.chip { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-chip); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip.bom { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.chip.ruim { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.chip.aviso { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.chip.neutro { background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); }

/* caixa e atraso */
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; }
.kv > * { padding: 7px 0; border-top: 1px solid var(--rule); }
.kv > :nth-child(-n+2) { border-top: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.estado { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: var(--raised); margin-bottom: 12px; line-height: 19px; }
.estado .ponto { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--positive); }
.estado.ruim .ponto { background: var(--negative); }
.barras { display: grid; gap: 12px; }
.barras .b-top { display: flex; justify-content: space-between; gap: 12px; }
.barras .trilho { height: 6px; border-radius: 3px; background: var(--rule); margin-top: 6px; overflow: hidden; }
.barras .enche { height: 100%; background: var(--text); border-radius: 3px; }
.barras .enche.velho { background: var(--negative); }

/* ---------------------------------------------------------------- tabela de contratos */
.tabela-env { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { font-weight: 400; font-size: var(--fs-small); color: var(--muted); text-align: left; padding: 0 12px 10px; white-space: nowrap; }
td { padding: 10px 12px; border-top: 1px solid var(--rule); vertical-align: middle; }
th:first-child, td:first-child { padding-left: var(--card-pad); }
th:last-child, td:last-child { padding-right: var(--card-pad); }
th.num, td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num { font-family: var(--font); }
td .l2 { display: block; color: var(--muted); font-size: 13px; line-height: 18px; }
td .l1 { display: block; }
tbody tr { transition: background 150ms; }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover { background: var(--raised); }
td .num-l2 { display: block; color: var(--muted); font-size: 12px; line-height: 18px; }

/* a trilha do dinheiro: venceu -> entrou -> repassado. Dourado e o caminho que o dinheiro ja fez. */
.trilha { display: grid; grid-template-columns: 10px 1fr 10px 1fr 10px; align-items: center; width: 210px; margin-left: 40px; }
.trilha .no { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--control); background: var(--surface); }
.trilha .no.feito { background: var(--gold); border-color: var(--gold); }
.trilha .no.ruim { background: var(--surface); border-color: var(--negative); border-width: 2px; }
.trilha .no.erro { background: var(--negative); border-color: var(--negative); }
.trilha .seg { height: 2px; background: var(--rule); }
.trilha .seg.feito { background: var(--gold); }
/* as datas ficam centradas sob cada no: tres colunas de 100px, deslocadas 45px pra esquerda */
.trilha-rot { display: grid; grid-template-columns: repeat(3, 100px); width: 300px; margin: 4px 0 0 -5px; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); }
.trilha-rot span { text-align: center; white-space: nowrap; }
.trilha-rot .ruim { font-family: var(--font); }
.trilha-rot .ruim { color: var(--negative); }

/* ---------------------------------------------------------------- formularios */
.campo { display: grid; gap: 8px; align-content: start; }
.campo label { font-weight: 500; font-size: 14px; }
.campo .ajuda { color: var(--muted); font-size: 12.5px; line-height: 17px; }
.campo input, .campo select { height: 40px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; background: #fff; width: 100%; }
.campo input:focus { outline: 2px solid var(--text); outline-offset: 0; border-color: var(--text); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campos .largo { grid-column: 1 / -1; }
.busca { height: var(--control-height); border: 1px solid var(--control); border-radius: var(--radius-control); padding: 0 12px; width: 280px; max-width: 100%; background: #fff; }

dialog { border: 0; border-radius: 12px; padding: 0; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18); color: var(--text); }
dialog::backdrop { background: rgba(20, 20, 20, 0.36); }
dialog form > header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 8px; }
dialog h2 { margin: 0; font-size: 18px; font-weight: 600; }
dialog .corpo-d { padding: 8px 24px 8px; overflow-y: auto; max-height: calc(100vh - 210px); }
dialog footer { display: flex; justify-content: space-between; gap: 8px; padding: 16px 24px 20px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
dialog footer .dir { display: flex; gap: 8px; margin-left: auto; }
.secao-d { margin-top: 24px; }
.secao-d h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.ajuste { display: grid; grid-template-columns: 110px minmax(0, 1fr) 130px 36px; gap: 8px; align-items: center; margin-top: 8px; }
.ajuste input { height: 36px; border: 1px solid var(--border); border-radius: 6px; padding: 0 10px; width: 100%; }
.ajuste .num { text-align: right; }

/* ---------------------------------------------------------------- configuracao (copia de seguranca) */
.ajustes-tela { max-width: 1152px; }
.secao-a { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--border); }
.secao-a:first-of-type { border-top: 0; padding-top: 8px; }
.secao-a h2 { margin: 6px 0 4px; font-size: 16px; font-weight: 600; }
.secao-a p { margin: 0; color: var(--muted); line-height: 21px; }
.painel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; }
.painel p { color: var(--text); margin: 0 0 14px; line-height: 21px; }
.painel .acoes { margin-top: 4px; }

/* primeira vez */
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.passos > div { padding: 20px var(--card-pad); border-left: 1px solid var(--border); display: grid; gap: 8px; align-content: start; }
.passos > div:first-child { border-left: 0; }
.passos h3 { margin: 0; font-size: 15px; font-weight: 600; }
.passos p { margin: 0; color: var(--muted); line-height: 20px; }
.passos .feito h3 { color: var(--muted); text-decoration: line-through; }
.progresso { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; margin: 0 var(--card-pad) 4px; }
.progresso div { height: 100%; background: var(--gold); }

.soltar { position: fixed; inset: 0; background: rgba(245, 244, 242, 0.94); display: none; place-items: center; z-index: 50; font-size: 18px; font-weight: 600; }
.soltar.on { display: grid; }
.aviso-topo { margin-bottom: 16px; padding: 10px 14px; border: 1px solid #fde68a; background: var(--pill-warning-bg); color: var(--pill-warning-ink); border-radius: 8px; font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); transition: opacity 200ms var(--ease), transform 200ms var(--ease); pointer-events: none; z-index: 60; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- tablet e celular */
@media (max-width: 1100px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  .topo-celular { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; position: sticky; top: 0; z-index: 20; background: var(--ground); border-bottom: 1px solid var(--border); }
  .topo-celular img { height: 26px; width: auto; display: block; }
  .topo-celular .btn { height: 44px; }
  .tela { padding: 24px 24px 48px; }
  .menu-folha { position: fixed; inset: 56px 0 0 0; background: var(--ground); z-index: 30; padding: 16px; display: none; flex-direction: column; overflow-y: auto; }
  .menu-folha.on { display: flex; }
  .menu-folha .nav a { height: 48px; font-size: 16px; }
  .menu-folha .rodape { margin-top: 24px; color: var(--muted); font-size: 13px; line-height: 19px; }
  .quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quadro > div { border-left: 0; border-top: 1px solid var(--border); }
  .quadro > div:nth-child(2n) { border-left: 1px solid var(--border); }
  .quadro > div:nth-child(-n+2) { border-top: 0; }
  .quadro > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grade.meio, .grade.par { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :root { --card-pad: 16px; --fs-lead: 24px; --fs-kpi: 18px; }
  .tela { padding: 20px 16px 40px; }
  .titulo h1 { font-size: 21px; line-height: 28px; }
  .titulo .acoes { width: 100%; }
  .titulo .acoes .btn { height: 44px; flex: 1 1 auto; justify-content: center; }
  .lista li { grid-template-columns: minmax(0, 1fr) auto; padding: 12px var(--card-pad); }
  .lista .oque { grid-column: 1 / -1; }
  .lista .acao { grid-column: 1 / -1; justify-self: start; }
  .lista .acao .btn { height: 44px; padding: 0 10px; margin-left: -10px; }
  .passos { grid-template-columns: minmax(0, 1fr); }
  .passos > div { border-left: 0; border-top: 1px solid var(--border); }
  .passos > div:first-child { border-top: 0; }
  .secao-a { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .busca { width: 100%; height: 44px; }
  .btn { min-height: 44px; }
  .ajuste { grid-template-columns: 90px minmax(0, 1fr); }
  .ajuste .num { grid-column: 1; }
  /* tabela vira lista de duas linhas */
  table.vira thead { display: none; }
  table.vira, table.vira tbody, table.vira tr { display: block; }
  table.vira tr { padding: 12px var(--card-pad); border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  table.vira tbody tr:first-child { border-top: 0; }
  table.vira td { display: block; border: 0; padding: 0 !important; }
  table.vira td.so-largo { display: none; }
  table.vira td.cheio { grid-column: 1 / -1; }
  table.vira td.num { text-align: right; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  .lateral, .topo-celular, .acoes, .acao, .mais { display: none !important; }
  .shell { display: block; }
  .tela { padding: 0; }
  .card { break-inside: avoid; }
}

/* links de texto com alvo de 44px sem empurrar o layout */
.card > header a.lado, .aviso-topo a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 2px; }
.vazio a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.lateral .marca, .topo-celular > a { display: flex; align-items: center; min-height: 44px; }
.campo input, .campo select { height: 44px; }
.ajuste input { height: 44px; }