/* Conciliador — estética "livro-razão editorial" */
:root {
  --paper: #f4efe4;
  --paper-2: #efe8d8;
  --card: #fbf8f1;
  --ink: #1d1b16;
  --ink-soft: #6c6555;
  --ink-faint: #9a9382;
  --rule: #ded5c1;
  --rule-strong: #cabfa3;
  --green: #1f6f54;
  --green-deep: #134734;
  --rust: #a3472e;
  --blue: #355b86;
  --gold: #ab8338;
  --shadow: 0 1px 0 #fffdf8 inset, 0 18px 40px -28px rgba(40, 33, 20, 0.55);
  --r: 14px;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #fbf6ea 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #f0ead9 0%, transparent 55%),
    var(--paper);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* grão de papel */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---------- topbar ---------- */
.topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 60px);
  border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand .mark {
  font-size: 30px; color: var(--green-deep);
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1.5px solid var(--green-deep); border-radius: 10px;
  background: linear-gradient(160deg, #fff8, #fff0); transform: rotate(-4deg);
}
.brand h1 {
  font-family: var(--serif); font-weight: 600; font-size: 26px;
  letter-spacing: -0.02em; line-height: 1;
}
.brand .sub {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 4px;
}

.status {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft);
  padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--card);
}
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); box-shadow: 0 0 0 0 rgba(31,111,84,.5); }
.status.online .dot { background: var(--green); animation: pulse 2.4s infinite; }
.status.offline .dot { background: var(--rust); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(31,111,84,.45);} 70%{box-shadow:0 0 0 7px rgba(31,111,84,0);} 100%{box-shadow:0 0 0 0 rgba(31,111,84,0);} }

/* ---------- main ---------- */
main { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 60px) 80px; }

.intro { max-width: 640px; margin-bottom: 40px; }
.intro h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 5vw, 46px);
  letter-spacing: -0.025em; line-height: 1.05;
}
.intro h2 em { font-style: italic; color: var(--green-deep); }
.intro p { margin-top: 16px; color: var(--ink-soft); font-size: 16px; max-width: 52ch; }

.grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 26px; align-items: start; }
@media (max-width: 880px) { .grid { grid-template-columns: 1fr; } }

/* ---------- cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--rule-strong); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 26px; position: relative; overflow: hidden;
}
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--green-deep), var(--gold)); opacity: .85; }
.card-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.card-head .num { font-family: var(--mono); font-size: 12px; color: var(--gold); letter-spacing: .1em; }
.card-head h3 { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; }

/* segmented */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--paper-2); border-radius: 10px; border: 1px solid var(--rule); margin-bottom: 22px; }
.seg button {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
  padding: 9px 12px; border-radius: 7px; transition: .22s;
}
.seg button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 8px -3px rgba(0,0,0,.25); }

/* forms */
form.mode { display: flex; flex-direction: column; gap: 16px; }
.hidden { display: none !important; }
label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
input, select {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 9px;
  padding: 11px 13px; transition: .2s; text-transform: none; letter-spacing: 0;
}
input:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,111,84,.14); background: #fff; }
input[type="date"] { font-family: var(--mono); font-size: 14px; }

.drop {
  border: 1.5px dashed var(--rule-strong); border-radius: 11px; padding: 30px 18px;
  text-align: center; cursor: pointer; color: var(--ink-soft); font-size: 14px;
  text-transform: none; letter-spacing: 0; transition: .2s; background: var(--paper);
}
.drop:hover, .drop.over { border-color: var(--green); background: #fffdf8; color: var(--ink); }
.drop.filled { border-style: solid; border-color: var(--green); color: var(--green-deep); }

.action {
  margin-top: 4px; border: 0; cursor: pointer; font-family: var(--sans);
  font-size: 15px; font-weight: 600; color: #f6f4ea; letter-spacing: .01em;
  background: linear-gradient(170deg, var(--green), var(--green-deep));
  padding: 14px 18px; border-radius: 10px; transition: .2s; box-shadow: 0 12px 24px -14px rgba(19,71,52,.9);
}
.action:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(19,71,52,.95); }
.action:active { transform: translateY(0); }
.action:disabled { opacity: .55; cursor: progress; transform: none; }

.hint { font-size: 12px; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }

/* ---------- saída ---------- */
.empty { text-align: center; padding: 40px 16px; color: var(--ink-faint); }
.empty .ledger-illo {
  height: 96px; margin: 0 auto 18px; max-width: 220px;
  background-image: repeating-linear-gradient(var(--rule) 0 1px, transparent 1px 18px);
  border-left: 2px solid var(--rust); border-radius: 2px; opacity: .6;
}
.empty p { font-size: 14px; }

.loading { padding: 40px 10px; text-align: center; color: var(--ink-soft); }
.loading .bars { display: flex; gap: 5px; justify-content: center; margin-bottom: 16px; }
.loading .bars span { width: 6px; height: 26px; background: var(--green); border-radius: 3px; animation: bar 1s ease-in-out infinite; }
.loading .bars span:nth-child(2){animation-delay:.12s} .loading .bars span:nth-child(3){animation-delay:.24s} .loading .bars span:nth-child(4){animation-delay:.36s} .loading .bars span:nth-child(5){animation-delay:.48s}
@keyframes bar { 0%,100%{transform:scaleY(.4);opacity:.5} 50%{transform:scaleY(1);opacity:1} }

/* contexto */
.ctx { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 18px; display: flex; gap: 18px; flex-wrap: wrap; }
.ctx b { color: var(--ink); font-weight: 600; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 520px){ .stats { grid-template-columns: repeat(2,1fr);} }
.stat {
  border: 1px solid var(--rule); border-radius: 11px; padding: 14px 15px; background: var(--paper);
  opacity: 0; transform: translateY(8px); animation: rise .5s forwards;
}
@keyframes rise { to { opacity: 1; transform: none; } }
.stat .v { font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 7px; }
.stat.good .v { color: var(--green-deep); }
.stat.warn .v { color: var(--gold); }
.stat.bad .v { color: var(--rust); }
.stat.mute .v { color: var(--ink-soft); }
.stat.total { background: linear-gradient(165deg, #1f3a30, #16271f); border-color: #16271f; }
.stat.total .v { color: #f4efe2; } .stat.total .k { color: #b6c8bd; }
.stat .desc { font-size: 11px; color: var(--ink-faint); margin-top: 6px; line-height: 1.4; }
.stat.total .desc { color: #8ab0a0; }

/* cards clicáveis (navegação) */
.stat.clickable { cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.stat.clickable:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: 0 10px 22px -16px rgba(19,71,52,.8); }
.stat.clickable::after { content: "ver →"; position: absolute; top: 12px; right: 13px; font-size: 10px; letter-spacing: .06em; color: var(--ink-faint); opacity: 0; transition: .15s; }
.stat { position: relative; }
.stat.clickable:hover::after { opacity: 1; }
.stat.active { border-color: var(--green); box-shadow: 0 0 0 2px rgba(31,111,84,.35) inset; }
.stat.active::after { content: "● ativo"; opacity: 1; color: var(--green); }

.valor-total { font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; }
.valor-total b { font-family: var(--mono); color: var(--green-deep); font-size: 16px; }

/* downloads */
.downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.dl {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-strong); padding: 10px 14px; border-radius: 9px; transition: .18s;
}
.dl:hover { border-color: var(--green); background: #fff; transform: translateY(-1px); }
.dl.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dl.primary:hover { background: var(--green-deep); border-color: var(--green-deep); }
.dl .ic { font-size: 15px; }

/* avisos */
.aviso { background: #fbf1e8; border: 1px solid #e6c4ad; border-left: 4px solid var(--rust); border-radius: 9px; padding: 13px 15px; margin-bottom: 20px; font-size: 13px; color: #7a3520; }
.aviso b { display: block; margin-bottom: 5px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.aviso ul { margin: 0; padding-left: 18px; } .aviso li { margin: 3px 0; }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin-bottom: 0; overflow-x: auto; }
.tabs button {
  border: 0; background: transparent; cursor: pointer; font-family: var(--sans);
  font-size: 13px; color: var(--ink-soft); padding: 10px 13px; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: .18s;
}
.tabs button.active { color: var(--ink); border-bottom-color: var(--green); }
.tabs button .badge { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-left: 5px; }

/* tabela */
.table-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 0 9px; }
.table-head h4 { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); }
.table-head .count { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.tablewrap { max-height: 440px; overflow: auto; border: 1px solid var(--rule); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead th { text-align: left; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); padding: 9px 12px; background: var(--paper-2); position: sticky; top: 0; }
tbody td { padding: 8px 12px; border-top: 1px solid var(--rule); vertical-align: top; }
tbody tr:nth-child(even) { background: rgba(222,213,193,.18); }
td.num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.cta { font-family: var(--mono); color: var(--ink-soft); white-space: nowrap; }
td.desc { color: var(--ink); max-width: 300px; }
/* colunas ORIGINAL vs TRATADO */
td.orig { background: rgba(215,225,245,.18); }
td.trat { background: rgba(215,240,220,.18); }
thead th.orig-h { background: #d9e1f2; color: #2a4080; }
thead th.trat-h { background: #e2efda; color: #1e5c2a; }
.empty-tab { padding: 26px; text-align: center; color: var(--ink-faint); font-size: 13px; }

/* erro */
.erro { background: #fbeae5; border: 1px solid #e0a392; border-radius: 10px; padding: 16px; color: #8a2f1a; font-size: 14px; }

footer { position: relative; z-index: 2; text-align: center; padding: 26px; color: var(--ink-faint); font-size: 12px; border-top: 1px solid var(--rule); }
footer b { color: var(--ink-soft); font-weight: 600; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(28, 24, 16, .42); backdrop-filter: blur(3px); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.modal-box {
  position: relative; width: min(840px, 96vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--rule-strong); border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(20,16,8,.7); overflow: hidden; animation: pop .22s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.modal-box::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--green-deep), var(--gold)); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid var(--rule); }
.modal-head h4 { font-family: var(--serif); font-weight: 600; font-size: 19px; }
.modal-x { border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0 4px; transition: .15s; }
.modal-x:hover { color: var(--rust); }
.modal-body { padding: 18px 22px; overflow: auto; }
.modal-body pre {
  font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 9px; padding: 14px 16px;
  white-space: pre; overflow-x: auto;
}
.modal-body .sub-title { font-family: var(--sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 8px; }
.modal-body .sub-title:first-child { margin-top: 0; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--rule); background: var(--paper); }
.modal-note { font-size: 12px; color: var(--ink-faint); }

/* linhas clicáveis (abrem auditoria) */
tbody tr.rowclick { cursor: pointer; transition: background .12s; }
tbody tr.rowclick:hover { background: rgba(31,111,84,.10); box-shadow: inset 3px 0 0 var(--green); }
td.go { color: var(--ink-faint); text-align: center; width: 26px; }
tbody tr.rowclick:hover td.go { color: var(--green); }

/* modal empilhado (auditoria) acima dos demais */
.modal.modal-top { z-index: 60; }
.audit-box { width: min(700px, 96vw); }

/* botão expandir tabela */
.expand-btn { border: 1px solid var(--rule-strong); background: var(--paper); cursor: pointer; font-family: var(--sans); font-size: 12px; color: var(--ink); padding: 6px 12px; border-radius: 8px; transition: .15s; display: inline-flex; align-items: center; gap: 6px; }
.expand-btn:hover { border-color: var(--green); background: #fff; transform: translateY(-1px); }

/* mini-seletor de grupo dentro do modal de tabela */
.bucket-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.bucket-bar button { border: 1px solid var(--rule); background: var(--paper); cursor: pointer; font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); padding: 7px 13px; border-radius: 999px; transition: .15s; }
.bucket-bar button:hover { border-color: var(--green); }
.bucket-bar button.active { background: var(--green-deep); color: var(--paper); border-color: var(--green-deep); }
.modal .tablewrap { max-height: 60vh; }

/* ---------- pop-up de tabela ampliado (busca + ordenação + exportar) ---------- */
.modal.table-mode .modal-box { width: min(1240px, 97vw); max-height: 92vh; }
.modal.table-mode .tablewrap { max-height: 68vh; }

.tbl-toolbar { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.tbl-busca {
  flex: 1; min-width: 0; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 9px;
  padding: 9px 12px; text-transform: none; letter-spacing: 0; transition: .2s;
}
.tbl-busca:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,111,84,.14); background: #fff; }
.tbl-info { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.tbl-export {
  border: 1px solid var(--rule-strong); background: var(--paper); cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--ink);
  padding: 9px 14px; border-radius: 9px; transition: .15s; white-space: nowrap;
}
.tbl-export:hover { border-color: var(--green); background: #fff; transform: translateY(-1px); }

/* cabeçalhos clicáveis para ordenar (o thead já é sticky) */
th.th-sort { cursor: pointer; user-select: none; z-index: 2; }
th.th-sort::after { content: "↕"; opacity: .3; margin-left: 5px; font-size: 10px; }
th.th-sort:hover { color: var(--ink); }
th.th-sort.asc::after { content: "↑"; opacity: 1; color: var(--green); }
th.th-sort.desc::after { content: "↓"; opacity: 1; color: var(--green); }

@media (max-width: 620px) {
  .tbl-toolbar { flex-wrap: wrap; }
  .tbl-info { order: 3; width: 100%; }
}

/* filtro de tipo dentro do modal de tabela */
.tipo-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 12px; }
.tipo-bar button {
  border: 1px solid var(--rule); background: var(--paper); cursor: pointer;
  font-family: var(--sans); font-size: 11.5px; color: var(--ink-soft);
  padding: 5px 11px; border-radius: 999px; transition: .15s;
}
.tipo-bar button:hover { border-color: var(--blue); color: var(--ink); }
.tipo-bar button.active { background: var(--blue); color: var(--paper); border-color: var(--blue); }

/* botão trilhas — ativo */
.tbl-trilhas-btn.active { background: var(--green-deep); color: var(--paper); border-color: var(--green-deep); }
.tbl-trilhas-btn.active:hover { background: var(--green); }

/* linha de trilha expandida */
.trilha-row { display: none; }
.trilha-row.open { display: table-row; background: #f8f6f0; }
.trilha-row td { padding: 0 18px 14px 36px; border-top: 0; vertical-align: top; }

/* linha pai quando expandida */
tbody tr.rowclick.expanded { background: rgba(31,111,84,.07); box-shadow: inset 3px 0 0 var(--green); }
tbody tr.rowclick.expanded td.go { color: var(--green); }

/* container da trilha inline */
.trilha-inline { display: grid; grid-template-columns: 280px 1fr; gap: 18px; padding: 12px 0 4px; }
@media (max-width: 760px) { .trilha-inline { grid-template-columns: 1fr; } }

/* trilha menor dentro da tabela */
.trilha-sm { padding-left: 20px; }
.trilha-sm::before { left: 5px; top: 4px; bottom: 6px; width: 1.5px; }
.trilha-sm .passo { padding-bottom: 12px; }
.trilha-sm .passo::before { left: -17px; width: 10px; height: 10px; }
.trilha-sm .etapa { font-size: 9.5px; }
.trilha-sm .det { font-size: 12.5px; }
.trilha-sm .dp { font-size: 11px; padding: 5px 8px; }

/* ---------- layout pós-resultado (largura total) ---------- */
/* Antes de gerar: duas colunas (entrada | saída). Depois: tudo empilhado em
   largura total — a entrada vira uma barra horizontal compacta no topo e o
   resultado ocupa a página inteira, sem o vazio ao lado. */
main.has-result .intro { display: none; }
main.has-result .grid { grid-template-columns: 1fr; gap: 22px; }

/* entrada como barra horizontal */
main.has-result #formZen,
main.has-result #formArq {
  flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 14px;
}
main.has-result #formZen > label,
main.has-result #formArq > label:not(.drop) { flex: 1 1 180px; }
main.has-result #formZen .row { display: contents; } /* De/Até na mesma linha */
main.has-result #formArq .drop { flex: 2 1 240px; padding: 14px 18px; }
main.has-result #formZen .action,
main.has-result #formArq .action { flex: 0 0 auto; margin-top: 0; }
main.has-result #formZen .hint,
main.has-result #formArq .hint { flex-basis: 100%; margin-top: -2px; }

/* cards numa linha só quando há largura */
main.has-result .stats { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1040px) { main.has-result .stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { main.has-result .stats { grid-template-columns: repeat(2, 1fr); } }

.tabela-dica { font-size: 12.5px; color: var(--ink-faint); margin: -4px 0 18px; }

/* auditoria */
.audit-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { font-size: 12px; padding: 5px 11px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink); }
.chip.tipo { background: #e7efe9; border-color: #bcd4c4; color: var(--green-deep); font-weight: 600; }
.chip.valor { font-family: var(--mono); }
.audit-origem { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 14px; margin-bottom: 20px; }
.audit-origem .lin { display: grid; grid-template-columns: 128px 1fr; gap: 10px; padding: 4px 0; align-items: baseline; }
.audit-origem .lin > span { color: var(--ink-soft); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.audit-origem .lin > b { font-weight: 500; font-size: 13.5px; word-break: break-word; }

.trilha-title { font-family: var(--serif); font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.trilha { position: relative; padding-left: 26px; }
.trilha::before { content: ""; position: absolute; left: 8px; top: 5px; bottom: 8px; width: 2px; background: var(--rule-strong); }
.passo { position: relative; padding: 0 0 17px; }
.passo:last-child { padding-bottom: 2px; }
.passo::before { content: ""; position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--green); }
.passo.destino::before { background: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.passo .etapa { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--green-deep); font-weight: 600; }
.passo .det { font-size: 13.5px; margin-top: 2px; color: var(--ink); }
.passo .dp { font-family: var(--mono); font-size: 11.5px; margin-top: 6px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--rule); border-radius: 7px; padding: 7px 10px; white-space: pre-wrap; word-break: break-word; }
.passo .dp .arrow { color: var(--green); font-weight: 600; }