/* Layout: menu lateral escuro fixo + área de trabalho clara; listas como fichário (grupos por mês),
   detalhe em duas colunas (arquivo | dados). Carimbos (chips retangulares) indicam estado e origem. */
:root {
  --bg: #f3f5f7;
  --surface: #ffffff;
  --surface-2: #edf1f4;
  --surface-3: #e3e9ee;
  --ink: #17212b;
  --ink-2: #485664;
  --muted: #74818e;
  --line: #dbe2e8;
  --line-strong: #c3cdd6;
  --accent: #0f6b6f;
  --accent-hover: #0b5659;
  --accent-ink: #ffffff;
  --accent-soft: #e0efee;
  --side-bg: #142029;
  --side-ink: #b9c6d1;
  --side-muted: #6f8292;
  --side-hover: #1d2c38;
  --side-active: #ffffff;
  --ok: #2b7a4b;
  --ok-soft: #e3f2e9;
  --warn: #a35f00;
  --warn-soft: #fbf0dd;
  --bad: #b03a3a;
  --bad-soft: #f9e5e5;
  --manual: #5847b3;
  --manual-soft: #ece9fa;
  --info: #2c6590;
  --info-soft: #e3eef7;
  --mark: #ffe9a8;
  --shadow: 0 1px 2px rgba(20, 32, 41, .06), 0 6px 24px rgba(20, 32, 41, .08);

  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-head: "IBM Plex Sans Condensed", "Arial Narrow", "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --r: 6px;
  --side-w: 236px;
  --top-h: 60px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e141a; --surface: #151d25; --surface-2: #1b252f; --surface-3: #222e3a;
    --ink: #e5ebf0; --ink-2: #b2bec9; --muted: #84929f; --line: #25313c; --line-strong: #34424f;
    --accent: #3cb0aa; --accent-hover: #55c4be; --accent-ink: #06201f; --accent-soft: #12302f;
    --side-bg: #0a0f14; --side-ink: #aebbc6; --side-muted: #5f7181; --side-hover: #151f28; --side-active: #ffffff;
    --ok: #5cc28a; --ok-soft: #13301f; --warn: #e3a33c; --warn-soft: #33260f; --bad: #e57373; --bad-soft: #351919;
    --manual: #a897f3; --manual-soft: #241f3f; --info: #7db6e0; --info-soft: #132636; --mark: #6b5513;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e141a; --surface: #151d25; --surface-2: #1b252f; --surface-3: #222e3a;
  --ink: #e5ebf0; --ink-2: #b2bec9; --muted: #84929f; --line: #25313c; --line-strong: #34424f;
  --accent: #3cb0aa; --accent-hover: #55c4be; --accent-ink: #06201f; --accent-soft: #12302f;
  --side-bg: #0a0f14; --side-ink: #aebbc6; --side-muted: #5f7181; --side-hover: #151f28; --side-active: #ffffff;
  --ok: #5cc28a; --ok-soft: #13301f; --warn: #e3a33c; --warn-soft: #33260f; --bad: #e57373; --bad-soft: #351919;
  --manual: #a897f3; --manual-soft: #241f3f; --info: #7db6e0; --info-soft: #132636; --mark: #6b5513;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--surface);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num, .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100%; }
.side {
  background: var(--side-bg); color: var(--side-ink);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 12px calc(16px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: var(--side-active); text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 5px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); flex: none;
}
.brand-name { font: 600 18px/1.1 var(--f-head); letter-spacing: .01em; }
.brand-sub { display: block; font: 400 11px/1.2 var(--f-body); color: var(--side-muted); letter-spacing: .02em; }
.nav-label { font: 600 10.5px/1 var(--f-head); text-transform: uppercase; letter-spacing: .12em; color: var(--side-muted); padding: 14px 10px 6px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 5px;
  color: var(--side-ink); text-decoration: none; font-weight: 500;
}
.nav a:hover { background: var(--side-hover); color: var(--side-active); }
.nav a[aria-current="page"] { background: var(--side-hover); color: var(--side-active); box-shadow: inset 3px 0 0 var(--accent); }
.nav a .count { margin-left: auto; font: 500 11.5px var(--f-mono); color: var(--side-muted); }
.nav a svg { flex: none; opacity: .85; }
.nav-sub a { padding: 6px 10px 6px 38px; font-weight: 400; font-size: 13px; }
.side-foot { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--side-hover); font-size: 12px; color: var(--side-muted); display: grid; gap: 8px; }
.side-foot .modo { display: flex; gap: 8px; align-items: flex-start; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; margin-top: 4px; }
.dot.on { background: var(--ok); }
.side-foot button { background: none; border: 1px solid var(--side-hover); color: var(--side-ink); border-radius: 5px; padding: 6px 8px; cursor: pointer; text-align: left; }
.side-foot button:hover { background: var(--side-hover); }

.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  height: var(--top-h); display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.menu-btn { display: none; }
.busca-global { position: relative; flex: 1; max-width: 620px; }
.busca-global input {
  width: 100%; height: 38px; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--surface-2); padding: 0 70px 0 36px;
}
.busca-global input:focus { background: var(--surface); border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.busca-global > svg { position: absolute; left: 11px; top: 11px; color: var(--muted); pointer-events: none; }
.kbd { position: absolute; right: 10px; top: 9px; font: 500 11px var(--f-mono); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 6px; background: var(--surface); }
.busca-drop {
  position: absolute; left: 0; right: 0; top: 44px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); max-height: min(70vh, 520px); overflow-y: auto; padding: 6px;
}
.busca-drop h4 { margin: 8px 8px 4px; font: 600 10.5px var(--f-head); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.busca-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 5px; color: var(--ink); text-decoration: none; }
.busca-item:hover, .busca-item.ativo { background: var(--surface-2); }
.busca-item .t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-item .s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-ver-todos { display: block; text-align: center; padding: 8px; font-weight: 500; border-top: 1px solid var(--line); margin-top: 4px; text-decoration: none; }
.top-acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.content { padding: 24px max(24px, env(safe-area-inset-right, 0px)) 48px max(24px, env(safe-area-inset-left, 0px)); min-width: 0; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.btn-danger:hover { background: var(--bad-soft); }
.btn-danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn-icon { width: 36px; padding: 0; }

/* ---------- Cabeçalhos de página ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { margin: 0; font: 600 26px/1.15 var(--f-head); letter-spacing: -.005em; text-wrap: balance; }
.page-head .sub { color: var(--muted); margin-top: 4px; }
.eyebrow { font: 600 11px var(--f-head); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 4px; }

/* ---------- Filtros ---------- */
.filtros {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin-bottom: 14px;
}
.f { display: grid; gap: 4px; min-width: 0; }
.f label { font: 600 10.5px var(--f-head); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.f input, .f select {
  height: 34px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); padding: 0 9px; min-width: 0;
}
.f input:focus, .f select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.f-grow { flex: 1 1 220px; }
.f-par { display: flex; gap: 6px; align-items: center; }
.f-par input { width: 110px; }
.f-par span { color: var(--muted); }
.filtros-ativos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -4px 0 14px; font-size: 12.5px; color: var(--muted); }
.chip-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 9px; border-radius: 4px; background: var(--accent-soft); color: var(--ink); border: 0; cursor: pointer; font-size: 12.5px; }
.chip-filtro span { font-size: 14px; line-height: 1; color: var(--muted); padding: 0 3px; }

.temas-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tema-tab {
  display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 5px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); text-decoration: none; font-weight: 500;
}
.tema-tab:hover { border-color: var(--accent); color: var(--ink); }
.tema-tab[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tema-tab .count { font: 500 11.5px var(--f-mono); opacity: .7; }

/* ---------- Listas agrupadas ---------- */
.ano { font: 600 13px var(--f-head); letter-spacing: .14em; color: var(--muted); margin: 22px 0 8px; display: flex; align-items: center; gap: 10px; }
.ano::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.grupo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; }
.grupo > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary .mes { font: 600 15px var(--f-head); }
.grupo > summary .meta { color: var(--muted); font-size: 12.5px; }
.grupo > summary .soma { margin-left: auto; font: 500 13px var(--f-mono); color: var(--ink-2); }
.grupo > summary .seta { transition: transform .15s; color: var(--muted); }
.grupo:not([open]) > summary .seta { transform: rotate(-90deg); }
.grupo:not([open]) > summary { border-bottom: 0; }

.linha {
  display: grid; align-items: center; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--line);
  color: var(--ink); text-decoration: none; cursor: pointer; background: var(--surface); width: 100%; text-align: left; border-left: 0; border-right: 0; border-bottom: 0;
}
.grupo .linha:first-of-type { border-top: 0; }
.linha:hover { background: var(--surface-2); }
.linha.sel { background: var(--accent-soft); }
.linha-fat { grid-template-columns: 88px minmax(0, 1fr) 92px 104px 120px 44px; }
.linha-doc { grid-template-columns: 42px minmax(0, 1fr) 70px auto 40px; }
.linha-ctr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 170px 130px 110px; }
.linha .data { font: 500 12.5px var(--f-mono); color: var(--ink-2); }
.linha .tit { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha .valor { font: 500 13.5px var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.linha .flags { display: flex; gap: 4px; justify-content: flex-end; color: var(--muted); }
.cab-lista { display: grid; gap: 14px; padding: 0 14px 6px; font: 600 10.5px var(--f-head); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.cab-lista .r { text-align: right; }

.ext {
  width: 38px; height: 44px; border-radius: 3px 10px 3px 3px; display: grid; place-items: end center; padding-bottom: 6px;
  font: 600 9.5px var(--f-mono); letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--muted);
}
.ext-pdf { background: #b2423b; } .ext-docx { background: #2f5ea8; } .ext-sheet, .ext-csv { background: #2b7a4b; }
.ext-pptx { background: #c25e21; } .ext-image { background: #7b55a8; } .ext-xml, .ext-text, .ext-html { background: #4c5d6c; }

/* ---------- Carimbos (chips) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 3px;
  font: 600 10.5px/1.5 var(--f-head); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
  border: 1px solid currentColor; background: transparent; color: var(--ink-2);
}
.chip-solid { border-color: transparent; }
.c-ok { color: var(--ok); } .c-ok.chip-solid { background: var(--ok-soft); }
.c-warn { color: var(--warn); } .c-warn.chip-solid { background: var(--warn-soft); }
.c-bad { color: var(--bad); } .c-bad.chip-solid { background: var(--bad-soft); }
.c-info { color: var(--info); } .c-info.chip-solid { background: var(--info-soft); }
.c-manual { color: var(--manual); } .c-manual.chip-solid { background: var(--manual-soft); }
.c-muted { color: var(--muted); border-style: dashed; }
.c-accent { color: var(--accent); } .c-accent.chip-solid { background: var(--accent-soft); }

/* ---------- Estados ---------- */
.vazio {
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r);
  padding: 40px 24px; text-align: center; color: var(--ink-2); display: grid; gap: 10px; justify-items: center;
}
.vazio h3 { margin: 0; font: 600 18px var(--f-head); color: var(--ink); }
.vazio p { margin: 0; max-width: 52ch; }
.vazio svg { color: var(--muted); }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); border: 1px solid; font-size: 13.5px; }
.aviso svg { flex: none; margin-top: 2px; }
.aviso-warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); color: var(--ink); }
.aviso-warn svg { color: var(--warn); }
.aviso-erro { border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: var(--bad-soft); color: var(--ink); }
.aviso-erro svg { color: var(--bad); }
.aviso-info { border-color: color-mix(in srgb, var(--info) 30%, transparent); background: var(--info-soft); color: var(--ink); }
.aviso-info svg { color: var(--info); }
.avisos { display: grid; gap: 8px; }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.carregando { display: grid; place-items: center; gap: 10px; padding: 48px 16px; color: var(--muted); text-align: center; }
.skel { height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: brilho 1.2s infinite; }
@keyframes brilho { to { background-position: -200% 0; } }

/* ---------- Documentos: lista + pré-visualização ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start; }
.painel-prev {
  position: sticky; top: calc(var(--top-h) + 16px + env(safe-area-inset-top, 0px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column; height: calc(100vh - var(--top-h) - 40px); min-height: 420px;
}
.painel-prev-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.painel-prev-head .t { font: 600 16px var(--f-head); overflow-wrap: anywhere; }
.painel-prev-head .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: var(--muted); align-items: center; }
.painel-prev-head .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.painel-prev-body { flex: 1; min-height: 0; }

/* ---------- Pré-visualizador ---------- */
.prev { height: 100%; display: flex; flex-direction: column; min-height: 0; background: var(--surface-3); }
.prev-bar {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap;
}
.prev-bar .sep { flex: 1; }
.prev-bar .btn { height: 28px; padding: 0 8px; font-size: 12.5px; }
.prev-scroll { flex: 1; overflow: auto; min-height: 0; padding: 16px; }
.pdf-pages { display: grid; gap: 14px; justify-items: center; }
.pdf-page { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); position: relative; max-width: none; }
.pdf-page canvas { display: block; }
.pdf-page .pg { position: absolute; right: 6px; bottom: 4px; font: 500 10px var(--f-mono); color: #8a96a2; }
.prev-img { display: grid; place-items: center; min-height: 100%; }
.prev-img img { max-width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); cursor: zoom-in; }
.prev-img.zoom img { max-width: none; cursor: zoom-out; }
.doc-page {
  background: #fff; color: #1b1b1b; max-width: 820px; margin: 0 auto; padding: 48px 56px; box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  font: 14px/1.6 Georgia, "Times New Roman", serif; overflow-wrap: anywhere;
}
.doc-page h1, .doc-page h2, .doc-page h3 { font-family: var(--f-body); line-height: 1.25; }
.doc-page table { border-collapse: collapse; margin: 10px 0; }
.doc-page td, .doc-page th { border: 1px solid #ccc; padding: 4px 8px; }
.doc-page img { max-width: 100%; }
.sheet-tabs { display: flex; gap: 2px; padding: 0 8px; background: var(--surface); border-top: 1px solid var(--line); overflow-x: auto; flex: none; }
.sheet-tabs button { border: 0; background: transparent; padding: 7px 12px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.sheet-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
.sheet { border-collapse: collapse; background: var(--surface); font-size: 12.5px; }
.sheet td, .sheet th { border: 1px solid var(--line); padding: 3px 8px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.sheet th { background: var(--surface-2); color: var(--muted); font: 500 11px var(--f-mono); position: sticky; top: 0; }
.sheet td.rn { background: var(--surface-2); color: var(--muted); font: 500 11px var(--f-mono); text-align: right; position: sticky; left: 0; }
.sheet tr:first-child td:not(.rn) { font-weight: 600; }
.slides { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; }
.slide { background: #fff; color: #1d1d1d; aspect-ratio: 16 / 9; max-width: 100%; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); padding: 24px 32px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; font-family: var(--f-body); }
.slide .n { font: 500 10px var(--f-mono); color: #8a96a2; }
.slide .h { font: 600 20px var(--f-head); }
.slide p { margin: 0; font-size: 13.5px; }
.prev-texto { background: var(--surface); color: var(--ink); padding: 16px 18px; border-radius: 4px; font: 12.5px/1.55 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.prev-msg { display: grid; place-items: center; gap: 12px; text-align: center; padding: 40px 20px; color: var(--ink-2); height: 100%; align-content: center; }
.prev-msg h4 { margin: 0; font: 600 16px var(--f-head); color: var(--ink); }
.prev-msg p { margin: 0; max-width: 46ch; }
.prev-nota { font-size: 12px; color: var(--muted); text-align: center; padding: 8px; }

/* ---------- Detalhe ---------- */
.det-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.voltar { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); text-decoration: none; font-size: 13px; margin-bottom: 6px; }
.voltar:hover { color: var(--ink); }
.det-head h1 { margin: 0; font: 600 24px/1.2 var(--f-head); overflow-wrap: anywhere; text-wrap: balance; }
.det-head .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.det-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.det-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.det-prev { position: sticky; top: calc(var(--top-h) + 16px + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--top-h) - 40px); min-height: 460px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.det-dados { display: grid; gap: 14px; min-width: 0; }
.confirmar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r); background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); }

.det-dados > *, .rev-grid > *, .det-grid > * { min-width: 0; }
.bloco { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.bloco > header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bloco > header h2 { margin: 0; font: 600 13px var(--f-head); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.bloco > header .dir { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.bloco-corpo { padding: 4px 14px 12px; }

.resumo { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: end; }
.resumo .forn { font: 600 19px/1.25 var(--f-head); overflow-wrap: anywhere; }
.resumo .doc { color: var(--muted); font-size: 13px; }
.resumo .total { text-align: right; }
.resumo .total .lbl { font: 600 10.5px var(--f-head); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.resumo .total .v { font: 600 22px var(--f-mono); font-variant-numeric: tabular-nums; }

.campos { display: grid; }
.campo { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); }
.campo:first-child { border-top: 0; }
.campo-rot { font-size: 12.5px; color: var(--muted); padding-top: 2px; }
.campo-val { min-width: 0; overflow-wrap: anywhere; }
.campo-val.vazio-val { color: var(--muted); font-style: italic; }
.campo-val.longo { white-space: pre-wrap; font-size: 13px; }
.campo-prov { justify-self: end; }
.campo .fonte { grid-column: 2 / -1; font-size: 12px; color: var(--muted); }
.campo .fonte summary { cursor: pointer; width: max-content; list-style: none; text-decoration: underline dotted; text-underline-offset: 3px; }
.campo .fonte summary::-webkit-details-marker { display: none; }
.campo .fonte div { margin-top: 4px; padding: 6px 8px; background: var(--surface-2); border-radius: 4px; font: 11.5px/1.5 var(--f-mono); overflow-wrap: anywhere; color: var(--ink-2); }
.campo input, .campo select, .campo textarea, .tabela-edit input, .tabela-edit select {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 5px; padding: 6px 8px; background: var(--surface); min-width: 0;
}
.campo textarea { min-height: 72px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .tabela-edit input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.campo.alterado input, .campo.alterado select, .campo.alterado textarea { border-color: var(--manual); background: var(--manual-soft); }

.legenda { display: flex; gap: 8px 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); align-items: center; }

.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font: 600 10.5px var(--f-head); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabela td:first-child { min-width: 160px; }
.tabela-edit td:first-child { min-width: 200px; }
.tabela td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .r { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela tfoot td { font-weight: 600; border-top: 1px solid var(--line-strong); border-bottom: 0; }
.tabela-edit td { padding: 4px; }
.tabela-edit input.r { text-align: right; }
.sem-dados { color: var(--muted); font-style: italic; padding: 10px 0; font-size: 13px; }

.texto-lido { max-height: 260px; overflow: auto; margin: 0; font: 12px/1.55 var(--f-mono); white-space: pre-wrap; background: var(--surface-2); padding: 10px 12px; border-radius: 4px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- Envio / revisão ---------- */
.drop {
  border: 2px dashed var(--line-strong); border-radius: var(--r); background: var(--surface); padding: 28px 20px; text-align: center;
  display: grid; gap: 8px; justify-items: center; color: var(--ink-2); cursor: pointer;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop strong { font: 600 16px var(--f-head); color: var(--ink); }
.drop small { color: var(--muted); }
.overlay-drop {
  position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--accent) 18%, transparent); backdrop-filter: blur(2px);
  display: grid; place-items: center; pointer-events: none;
}
.overlay-drop div { background: var(--surface); border: 2px dashed var(--accent); border-radius: 10px; padding: 32px 48px; font: 600 20px var(--f-head); color: var(--ink); box-shadow: var(--shadow); text-align: center; }
.envio { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.fila { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; position: sticky; top: calc(var(--top-h) + 16px); }
.fila header { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.fila header h2 { margin: 0; font: 600 13px var(--f-head); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.fila-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); cursor: pointer; background: var(--surface); border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; }
.fila-item:first-of-type { border-top: 0; }
.fila-item:hover { background: var(--surface-2); }
.fila-item.sel { background: var(--accent-soft); }
.fila-item .t { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-item .s { font-size: 12px; color: var(--muted); }
.fila-ic { width: 18px; height: 18px; display: grid; place-items: center; margin-top: 1px; }
.fila-ic .spinner { width: 14px; height: 14px; border-width: 2px; }
.fila-acoes { padding: 10px 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.rev-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.rev-prev { height: calc(100vh - var(--top-h) - 120px); min-height: 420px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; position: sticky; top: calc(var(--top-h) + 16px); background: var(--surface); }
.rev-barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; position: sticky; bottom: 0; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.rev-barra .info { margin-right: auto; font-size: 12.5px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 7px 14px; cursor: pointer; font-weight: 500; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

/* ---------- Configurações ---------- */
.cfg { display: grid; gap: 16px; max-width: 980px; }
.tema-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.tema-row:first-child { border-top: 0; }
.tema-row input[type="text"] { width: 100%; border: 1px solid var(--line-strong); border-radius: 5px; padding: 6px 8px; background: var(--surface); }
.tema-row label { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.cfg textarea { width: 100%; min-height: 70px; border: 1px solid var(--line-strong); border-radius: 5px; padding: 8px; background: var(--surface); }
.cfg p { margin: 6px 0; color: var(--ink-2); max-width: 75ch; }
.cfg code { font-family: var(--f-mono); background: var(--surface-2); padding: 1px 5px; border-radius: 3px; font-size: 12.5px; }

/* ---------- Login ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.login form { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 28px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.login h1 { margin: 0; font: 600 24px var(--f-head); }
.login input { width: 100%; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 0 10px; background: var(--surface); }

/* ---------- Toast ---------- */
.toasts { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 200; display: grid; gap: 8px; }
.toast { background: var(--ink); color: var(--surface); padding: 10px 14px; border-radius: var(--r); box-shadow: var(--shadow); font-size: 13.5px; max-width: 380px; animation: entra .2s ease-out; }
.toast.erro { background: var(--bad); color: #fff; }
@keyframes entra { from { transform: translateY(8px); opacity: 0; } }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) {
  .linha-fat { grid-template-columns: 82px minmax(0, 1fr) 104px 112px 36px; }
  .linha-fat .c-tipo { display: none; }
  .cab-lista.fat { grid-template-columns: 82px minmax(0, 1fr) 104px 112px 36px !important; }
  .cab-lista.fat .c-tipo { display: none; }
}
@media (max-width: 1020px) {
  .split, .det-grid, .rev-grid { grid-template-columns: minmax(0, 1fr); }
  .painel-prev { display: none; }
  .det-prev, .rev-prev { position: static; height: 70vh; }
  .envio { grid-template-columns: minmax(0, 1fr); }
  .fila { position: static; }
  .linha-ctr { grid-template-columns: minmax(0, 1fr) 150px 110px; }
  .linha-ctr .c-obj, .cab-lista.ctr .c-obj { display: none; }
  .cab-lista.ctr { grid-template-columns: minmax(0, 1fr) 150px 110px !important; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 80; left: 0; top: 0; width: min(280px, 85vw); transform: translateX(-100%); transition: transform .2s; }
  .side.aberto { transform: none; box-shadow: var(--shadow); }
  .menu-btn { display: inline-flex; }
  .top { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); gap: 8px; }
  .top-acoes .btn-txt { display: none; }
  .kbd { display: none; }
  .busca-global input { padding-right: 10px; }
  .content { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
  .linha-fat { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .linha-fat .data { grid-column: 1; grid-row: 2; }
  .linha-fat .c-tipo, .linha-fat .flags { display: none; }
  .linha-fat .c-status { grid-column: 2; grid-row: 2; justify-self: end; }
  .linha-fat .valor { grid-column: 2; grid-row: 1; }
  .cab-lista { display: none !important; }
  .linha-doc { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .linha-doc .c-comp, .linha-doc .flags { display: none; }
  .linha-ctr { grid-template-columns: minmax(0, 1fr) auto; }
  .linha-ctr .c-vig { display: none; }
  .campo { grid-template-columns: minmax(0, 1fr) auto; }
  .campo-rot { grid-column: 1 / -1; }
  .campo .fonte { grid-column: 1 / -1; }
  .tema-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tema-row .palavras { grid-column: 1 / -1; }
  .f-par input { width: 92px; }
  .resumo { grid-template-columns: minmax(0, 1fr); }
  .resumo .total { text-align: left; }
  .doc-page { padding: 24px 20px; }
  .side-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .35); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}