/* =========================================================
   AIdocs VERT — estilos das paginas
   Tudo aqui usa tokens de colors_and_type.css. Os unicos hex
   avulsos (#FAFAFA, #F8FCFC, #fff) sao os mesmos que o
   exemplo-app.html do design system usa nos mesmos papeis.
   ========================================================= */

* { box-sizing: border-box; }

/* O `display` das classes abaixo (flex, grid) vence o [hidden] da folha do
   navegador — estilo de autor sempre ganha do user-agent, independente de
   especificidade. Sem esta regra, `el.hidden = true` nao esconde nada. */
[hidden] { display: none !important; }

body { margin: 0; background: #FAFAFA; color: var(--fg); font-family: var(--font-sans); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--vert-nitrogenio); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--vert-copan); }

/* ---------- Topbar ---------- */
.topbar { height: 64px; background: var(--bg-inverse); color: #fff;
  display: flex; align-items: center; gap: var(--space-05);
  padding: 0 var(--space-07); position: sticky; top: 0; z-index: 30; }
.topbar .logo { height: 26px; }
.topbar .sub { font: 700 10px/1 var(--font-sans); letter-spacing: .22em; color: var(--vert-success-pure); }
.topbar .spacer { flex: 1; }
.topbar .amb { font: 700 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-pill); padding: 5px 12px; }
.topbar i { font-size: 22px; color: rgba(255,255,255,.8); cursor: pointer;
  transition: color var(--t-base) var(--t-ease); }
.topbar i:hover { color: #fff; }
.topbar a.ferramenta { display: inline-flex; }
.topbar .me { width: 36px; height: 36px; border-radius: var(--radius-circle);
  background: var(--vert-cobalto); color: #fff; display: flex; align-items: center;
  justify-content: center; font: 700 13px/1 var(--font-sans); flex: 0 0 auto; }
.topbar .me-anon { background: transparent; border: 1px solid rgba(255,255,255,.28); }
.topbar .me-anon i { font-size: 20px; color: #fff; }

/* ---------- Menu da conta ---------- */
.conta { position: relative; display: flex; }
.conta-botao { background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--radius-circle); }
.conta-botao:focus-visible { outline: 3px solid rgba(255,255,255,.5); outline-offset: 2px; }

.conta-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 300px; background: var(--bg-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-3); overflow: hidden; z-index: 40; }
.conta.aberta .conta-menu { display: block; }

.conta-cabecalho { display: flex; align-items: center; gap: var(--space-04);
  padding: var(--space-05); border-bottom: 1px solid var(--border); }
.conta-cabecalho .me { cursor: default; width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: var(--radius-circle); background: var(--vert-cobalto); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--font-sans); }
.conta-dados { min-width: 0; }
.conta-rotulo { font: 700 10px/1 var(--font-sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-subtle); }
/* anywhere (e nao break-all) para so quebrar quando nao couber mesmo */
.conta-email { font: var(--fw-body-2) var(--fs-body-2)/1.4 var(--font-sans);
  color: var(--fg); margin-top: var(--space-02); overflow-wrap: anywhere; }

.conta-acoes { padding: var(--space-03); }
.conta-acoes a, .conta-acoes button { display: flex; align-items: center; gap: var(--space-04);
  width: 100%; padding: 10px var(--space-04); border: 0; background: none; text-align: left;
  border-radius: var(--radius-md); text-decoration: none; cursor: pointer;
  font: var(--fw-body-2) var(--fs-body-2)/1.2 var(--font-sans); color: var(--fg-muted);
  transition: background var(--t-base) var(--t-ease), color var(--t-base) var(--t-ease); }
.conta-acoes i { font-size: 20px; color: var(--fg-subtle); cursor: inherit; }
.conta-acoes a:hover, .conta-acoes button:hover { background: var(--bg-hero); color: var(--fg); }
.conta-acoes a:hover i, .conta-acoes button:hover i { color: var(--accent); }
.conta-acoes .sair:hover { background: var(--vert-helper-light); color: var(--vert-helper-dark); }
.conta-acoes .sair:hover i { color: var(--vert-helper-dark); }

/* Hamburger: so aparece nas resolucoes baixas (media query no fim) */
.btn-menu { display: none; background: none; border: 0; padding: 0;
  color: #fff; cursor: pointer; align-items: center; }
.btn-menu i { font-size: 26px; color: #fff; }

/* ---------- Layout com menu lateral ---------- */
.layout { display: flex; align-items: flex-start; }

.menu { width: 248px; flex: 0 0 248px; background: var(--bg-card);
  border-right: 1px solid var(--border); padding: var(--space-06) 0;
  position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
.menu .grupo { padding: 0 var(--space-05); margin-bottom: var(--space-06); }
.menu .grupo-titulo { font: 700 11px/1 var(--font-sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-subtle); padding: 0 var(--space-04);
  margin-bottom: var(--space-04); }
.menu a { display: flex; align-items: center; gap: var(--space-04);
  padding: 10px var(--space-04); border-radius: var(--radius-md);
  font: var(--fw-body-2) var(--fs-body-2)/1.2 var(--font-sans);
  color: var(--fg-muted); text-decoration: none;
  transition: background var(--t-base) var(--t-ease), color var(--t-base) var(--t-ease); }
.menu a i { font-size: 20px; color: var(--fg-subtle); }
.menu a:hover { background: var(--bg-hero); color: var(--fg); text-decoration: none; }
.menu a:hover i { color: var(--accent); }
.menu a.ativo { background: var(--bg-hero); color: var(--accent); font-weight: 700; }
.menu a.ativo i { color: var(--accent); }
.menu a:focus-visible { outline: 3px solid rgba(0,116,122,.24); outline-offset: 1px; }

.conteudo { flex: 1; min-width: 0; }

/* Fundo escuro do menu off-canvas (so em telas baixas) */
.menu-fundo { display: none; position: fixed; inset: 64px 0 0; background: rgba(15,42,36,.45); z-index: 20; }

/* ---------- Hero band ---------- */
.hero { background: var(--bg-hero); padding: var(--space-09) var(--space-07) var(--space-07); }
.hero .crumb { font: 400 13px/1 var(--font-sans); color: var(--fg-subtle); margin-bottom: var(--space-03); }
.hero h1 { font: var(--fw-h1) var(--fs-h1)/var(--lh-h1) var(--font-sans); color: var(--fg); margin: 0; }
.hero p { font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans);
  color: var(--fg-muted); margin-top: var(--space-03); max-width: 60ch; }

/* ---------- Conteudo ---------- */
.wrap { padding: var(--space-07); display: flex; flex-direction: column;
  gap: var(--space-08); width: 100%; }
.card { background: var(--bg-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1); padding: var(--space-06); }

.alert { display: flex; align-items: flex-start; gap: var(--space-04);
  padding: var(--space-04) var(--space-05);
  border-radius: var(--radius-md); border-left: var(--bw-thick) solid var(--info);
  background: var(--bg-hero); color: var(--vert-default-dark);
  font: var(--fw-body-2) var(--fs-body-2)/var(--lh-body-2) var(--font-sans); }
/* Sem isto o icone herda line-height 1.5 sobre 20px (=30px) e desce em relacao
   a primeira linha do texto, cuja caixa tem 21px. */
.alert i { font-size: 20px; line-height: calc(var(--fs-body-2) * var(--lh-body-2)); }
.alert a { color: inherit; text-decoration: underline; }
.alert-erro { border-left-color: var(--danger); background: var(--vert-helper-light);
  color: var(--vert-helper-dark); }
.alert-atencao { border-left-color: var(--warning); background: var(--vert-warning-light);
  color: var(--vert-warning-dark); }
.alert-ok { border-left-color: var(--success); background: var(--vert-success-light);
  color: var(--vert-success-dark); }

.secao { display: flex; flex-direction: column; gap: var(--space-06); scroll-margin-top: 80px; }
.secao-head { display: flex; align-items: center; gap: var(--space-04); flex-wrap: wrap; }
.secao-head h2 { font: var(--fw-h2) var(--fs-h2)/1 var(--font-sans); margin: 0; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-06); }
.kpi .eyebrow { font: 700 11px/1 var(--font-sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-subtle); }
.kpi .value { font: 900 28px/1.1 var(--font-sans); color: var(--vert-folha); margin-top: var(--space-03); }
.kpi .hint { font: 400 12px/1 var(--font-sans); color: var(--fg-subtle); margin-top: var(--space-03); }

/* ---------- Paineis de tabela ---------- */
.panel-head { display: flex; align-items: center; gap: var(--space-04); margin-bottom: var(--space-05); }
.panel-head h3 { font: var(--fw-h3) var(--fs-h3)/1 var(--font-sans); margin: 0; }
.panel-head .spacer { flex: 1; }
.tag { font: 700 11px/1 var(--font-sans); padding: 5px 10px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tag-info { background: var(--vert-default-light); color: var(--vert-default-dark); }
.tag-success { background: var(--vert-success-light); color: var(--vert-success-dark); }
.tag-erro { background: var(--vert-helper-light); color: var(--vert-helper-dark); }
.tag-atencao { background: var(--vert-warning-light); color: var(--vert-warning-dark); }
.tag-neutra { background: var(--bg-hero); color: var(--fg-subtle); }

/* Escolha dos prompts das acoes de IA: recolhido por padrao, aberto sozinho
   quando a escolha ja saiu do padrao — assim quem nao usa nem ve. */
.painel-prompts { margin-bottom: var(--space-05); }
.painel-prompts > summary { cursor: pointer; font: 700 13px/1.4 var(--font-sans);
  color: var(--fg); padding: 10px 12px; background: var(--bg-hero);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.painel-prompts > summary:hover { border-color: var(--accent); }
.painel-prompts > summary .vazio { font-weight: 400; }
.painel-prompts[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.painel-prompts > .filtros { border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: 0; }

/* ---------- Tabelas ---------- */
.mono { font-family: var(--font-mono); font-size: 13px; }
.quebra { word-break: break-all; }

.tabela-wrap { max-height: 420px; overflow: auto; }
table { width: 100%; border-collapse: collapse;
  font: var(--fw-body-2) var(--fs-body-2)/var(--lh-body-2) var(--font-sans); }
th { position: sticky; top: 0; text-align: left; padding: 12px; background: #FAFAFA;
  font: 700 12px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-subtle); border-bottom: 1px solid var(--border); }
td { padding: 12px; border-bottom: 1px solid var(--border); }
tr:hover td { background: #F8FCFC; }
/* nowrap: sem ele "R$ 905.000.000,00" quebra em duas linhas em coluna estreita */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.firme { white-space: nowrap; }
/* Colunas longas (caminho, nome de arquivo): trunca e mostra tudo no title */
td.longo { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vazio { font: 400 13px/1 var(--font-sans); color: var(--fg-subtle); }
/* Linha apagada logicamente: so aparece quando o filtro pede. O vermelho fica no
   texto e numa faixa a esquerda — pintar a linha inteira de vermelho tornaria o
   proprio conteudo dificil de ler. */
tr.apagada td { color: var(--danger); background: #FDF6F6; }
tr.apagada td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
tr.apagada:hover td { background: #FBEDED; }
/* Com paginacao a lista nao precisa de rolagem interna */
.tabela-wrap.completa { max-height: none; }

/* ---------- Paginacao ---------- */
.paginacao { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--space-03); margin-top: var(--space-05); padding-top: var(--space-05);
  border-top: 1px solid var(--border); }
.pag-numeros { display: flex; align-items: center; gap: var(--space-03); flex-wrap: wrap; }
.pag { font: 700 13px/1 var(--font-sans); min-width: 36px; height: 36px; padding: 0 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent;
  color: var(--fg-muted); text-decoration: none; display: inline-flex; align-items: center;
  justify-content: center; gap: 4px; transition: background var(--t-base) var(--t-ease); }
.pag:hover { background: var(--bg-hero); color: var(--accent); border-color: var(--accent); text-decoration: none; }
.pag.atual { background: var(--accent); border-color: var(--accent); color: #fff; }
.pag.atual:hover { background: var(--accent); color: #fff; }
.pag.desativado { opacity: .45; pointer-events: none; }
.pag-reticencias { font: 700 13px/1 var(--font-sans); color: var(--fg-subtle); padding: 0 4px; }

/* ---------- Botao (pilula, estados so de cor) ---------- */
.btn { font: 700 14px/1 var(--font-sans); padding: 11px 24px; border-radius: var(--radius-pill);
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
  gap: 8px; align-self: flex-start; transition: background var(--t-base) var(--t-ease); }
.btn:hover { background: var(--bg-hero); text-decoration: none; }
.btn:focus-visible { outline: 4px solid rgba(0,116,122,.24); outline-offset: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primario:hover { background: var(--vert-default-dark); color: #fff; }
.btn-perigo { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-perigo:hover { background: var(--vert-helper-dark); color: #fff; }
.btn-pequeno { font-size: 12px; padding: 7px 16px; }

pre { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-05); overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6; margin: 0; }

/* ---------- Rodape ---------- */
footer { padding: var(--space-07); border-top: 1px solid var(--border);
  font: 400 12px/1.6 var(--font-sans); color: var(--fg-subtle); }
footer .mono { font-family: var(--font-mono); }

/* ---------- Formulario ---------- */
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-05); margin-bottom: var(--space-05); }
.campo { display: flex; flex-direction: column; gap: var(--space-03); }
.campo label { font: 700 12px/1 var(--font-sans); color: var(--fg); }
.campo textarea { font: 400 13px/1.6 var(--font-mono); color: var(--fg);
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background-color: #fff; resize: vertical; width: 100%; }
.campo .detalhe { font: 400 12px/1.5 var(--font-sans); color: var(--fg-subtle); margin: 0; }
.campo input, .campo select { font: 400 14px/1 var(--font-sans); color: var(--fg);
  padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  /* background-color, nao o shorthand: `background` apagaria o chevron do select */
  background-color: #fff; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,116,122,.16); }
.acoes-form { display: flex; align-items: center; gap: var(--space-04); flex-wrap: wrap; }

/* Seta propria: sem appearance:none o select fica com o visual cru do sistema.
   O chevron vai como data URI para nao depender de rede. */
.campo select, .filtros select, .ds-busca select { appearance: none; -webkit-appearance: none;
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.campo select:hover, .filtros select:hover, .ds-busca select:hover { border-color: var(--accent); }

/* ---------- Barra de filtros ---------- */
.filtros { display: flex; align-items: flex-end; gap: var(--space-05); flex-wrap: wrap;
  --altura-controle: 42px;
  background: var(--bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  padding: var(--space-05) var(--space-06); }
.filtros .campo { gap: var(--space-02); }
.filtros input:not([type="checkbox"]), .filtros select {
  font: 400 14px/1 var(--font-sans); color: var(--fg);
  height: var(--altura-controle); padding: 0 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background-color: #fff; min-width: 150px; }
/* Sem o :not() acima o checkbox virava um quadrado de 42x150. */
.filtros .campo-check { align-self: flex-end; height: var(--altura-controle);
  margin-bottom: 0; white-space: nowrap; }
/* O .btn base tem align-self: flex-start, que vence o align-items: flex-end do
   contêiner e joga o botao para o topo da linha. */
.filtros .btn { align-self: flex-end; height: var(--altura-controle);
  padding: 0 22px; display: inline-flex; align-items: center; gap: var(--space-03); }
.filtros select { min-width: 220px; }
.filtros .campo.largo input { min-width: 280px; }
.filtros input:focus-visible, .filtros select:focus-visible { outline: none;
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,116,122,.16); }
.filtros .limpar { align-self: flex-end; height: var(--altura-controle);
  display: inline-flex; align-items: center; font: 400 13px/1 var(--font-sans);
  color: var(--fg-subtle); }

/* ---------- Acoes por linha ---------- */
.acoes { display: flex; align-items: center; gap: var(--space-03); }
.acao { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--border); background: none;
  border-radius: var(--radius-sm); color: var(--fg-muted); cursor: pointer;
  text-decoration: none; transition: all var(--t-fast) var(--t-ease); }
.acao i { font-size: 18px; }
.acao:hover { background: var(--bg-hero); color: var(--accent); border-color: var(--accent); }

/* ---------- Barra de progresso ---------- */
.barra { height: 8px; background: var(--bg-hero); border-radius: var(--radius-pill); overflow: hidden; }
.barra span { display: block; height: 100%; width: 0; background: var(--accent);
  transition: width var(--t-base) var(--t-ease); }

/* =========================================================
   Blocos proprios do AIdocs
   ========================================================= */

/* ---------- Login (pagina sem menu) ---------- */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-hero); padding: var(--space-06); }
.login-card { width: 100%; max-width: 400px; }
.login-marca { display: flex; flex-direction: column; align-items: center; gap: var(--space-03);
  background: var(--bg-inverse); border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--space-07) var(--space-06); }
.login-marca img { height: 30px; }
.login-marca .sub { font: 700 10px/1 var(--font-sans); letter-spacing: .22em;
  color: var(--vert-success-pure); }
.login-corpo { background: var(--bg-card); border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-2); padding: var(--space-07) var(--space-06); }
.login-corpo h1 { font: var(--fw-h3) var(--fs-h3)/1.2 var(--font-sans); margin: 0 0 var(--space-06); }
.login-corpo .campo { margin-bottom: var(--space-05); }
.login-corpo .btn { width: 100%; justify-content: center; align-self: stretch; }

/* ---------- Upload / processamento (pagina inicial) ---------- */
.dropzone { border: var(--bw-thin) dashed var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg-card); padding: var(--space-09) var(--space-06); text-align: center;
  cursor: pointer; transition: border-color var(--t-base) var(--t-ease),
  background var(--t-base) var(--t-ease); }
.dropzone:hover, .dropzone.sobre { border-color: var(--accent); background: var(--bg-hero); }
.dropzone i { font-size: 44px; color: var(--accent); }
.dropzone .titulo { font: 700 var(--fs-h4)/1.4 var(--font-sans); color: var(--fg);
  margin-top: var(--space-04); }
.dropzone .detalhe { font: 400 13px/1.5 var(--font-sans); color: var(--fg-subtle);
  margin-top: var(--space-03); }
.dropzone.tem-arquivo { border-style: solid; border-color: var(--accent); }

.arquivo-escolhido { display: flex; align-items: center; gap: var(--space-04);
  margin-top: var(--space-05); padding: var(--space-04) var(--space-05);
  background: var(--bg-hero); border-radius: var(--radius-sm);
  font: var(--fw-body-2) var(--fs-body-2)/1.4 var(--font-sans); }
.arquivo-escolhido i { font-size: 20px; color: var(--accent); }
.arquivo-escolhido .spacer { flex: 1; }

.resultado-linha { display: flex; align-items: center; gap: var(--space-04);
  padding: var(--space-04) 0; border-bottom: 1px solid var(--border);
  font: var(--fw-body-2) var(--fs-body-2)/1.4 var(--font-sans); }
.resultado-linha:last-child { border-bottom: 0; }
.resultado-linha .rotulo { font-weight: 700; min-width: 120px; color: var(--fg-subtle); }
.resultado-linha .valor { flex: 1; font-family: var(--font-mono); font-size: 12px;
  overflow-wrap: anywhere; }

/* ---------- Explorer ---------- */
/* Tela cheia: sem hero band, e o miolo ocupa a altura restante da janela. */
.explorer { display: grid; grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-06); padding: var(--space-06) var(--space-07);
  height: calc(100vh - 64px); }
/* min-width: 0 nos dois: item de grid nasce com min-width auto e cresce alem da
   trilha quando o conteudo nao quebra — era o que fazia o markdown longo
   empurrar os cards para fora da janela. */
/* `.explorer .card` e nao `> .card`: os dois cards da direita sao filhos de
   .painel-direito, e ficavam de fora — sem flex o .card-corpo nao rolava, e sem
   min-width: 0 o markdown longo empurrava tudo para fora da janela (item de
   grid nasce com min-width auto). */
.explorer .card { display: flex; flex-direction: column;
  min-height: 0; min-width: 0; padding: 0; }
.explorer .card-head { display: flex; align-items: center; gap: var(--space-04);
  padding: var(--space-05) var(--space-06); border-bottom: 1px solid var(--border); }
.explorer .card-head h3 { font: 700 13px/1 var(--font-sans); letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-subtle); margin: 0; }
.explorer .card-head .spacer { flex: 1; }
.explorer .card-corpo { flex: 1; min-height: 0; overflow: auto; padding: var(--space-04); }

.lista-item { display: flex; align-items: center; gap: var(--space-04);
  padding: 9px var(--space-04); border-radius: var(--radius-md); cursor: pointer;
  font: var(--fw-body-2) var(--fs-body-2)/1.3 var(--font-sans); color: var(--fg-muted);
  transition: background var(--t-fast) var(--t-ease), color var(--t-fast) var(--t-ease); }
.lista-item i { font-size: 18px; color: var(--fg-subtle); flex: 0 0 auto; }
.lista-item .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.lista-item .meta { font-size: 11px; color: var(--fg-subtle); flex: 0 0 auto; }
.lista-item:hover { background: var(--bg-hero); color: var(--fg); }
.lista-item.ativo { background: var(--bg-hero); color: var(--accent); font-weight: 700; }
.lista-item.ativo i { color: var(--accent); }

.painel-direito { display: grid; grid-template-rows: minmax(120px, 34%) minmax(0, 1fr);
  gap: var(--space-06); min-height: 0; min-width: 0; }

/* ---------- Viewer de markdown ---------- */
.md-view { font: var(--fw-body) var(--fs-body)/1.7 var(--font-sans); color: var(--fg);
  padding: var(--space-06) var(--space-07); }
.md-view h1 { font: var(--fw-h1) var(--fs-h1)/var(--lh-h1) var(--font-sans);
  margin: var(--space-07) 0 var(--space-05); }
.md-view h2 { font: var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--font-sans);
  margin: var(--space-07) 0 var(--space-05); padding-bottom: var(--space-03);
  border-bottom: 1px solid var(--border); }
.md-view h3 { font: var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font-sans);
  margin: var(--space-06) 0 var(--space-04); }
.md-view h4, .md-view h5, .md-view h6 { font: var(--fw-h4) var(--fs-h4)/var(--lh-h4) var(--font-sans);
  margin: var(--space-05) 0 var(--space-03); }
.md-view > :first-child { margin-top: 0; }
.md-view p, .md-view ul, .md-view ol, .md-view blockquote { margin: 0 0 var(--space-05); }
.md-view ul, .md-view ol { padding-left: var(--space-07); }
.md-view li { margin-bottom: var(--space-03); }
.md-view blockquote { border-left: var(--bw-thick) solid var(--border-strong);
  padding-left: var(--space-05); color: var(--fg-muted); }
.md-view code { font-family: var(--font-mono); font-size: .875em;
  background: var(--bg-hero); border-radius: var(--radius-sm); padding: 2px 5px; }
.md-view pre { margin-bottom: var(--space-05); }
.md-view pre code { background: none; padding: 0; }
.md-view table { margin-bottom: var(--space-05); }
.md-view th { position: static; }
.md-view img { max-width: 100%; }
/* Tabela larga rola dentro do proprio bloco; sem isto ela estica o visor. */
.md-view table { display: block; overflow-x: auto; max-width: 100%; }
.md-view p, .md-view li { overflow-wrap: anywhere; }
.md-view hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-07) 0; }
/* Marcador de pagina inserido pelo pipeline: vira uma regua discreta */
.md-view .marcador-pagina { display: flex; align-items: center; gap: var(--space-04);
  font: 700 10px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-disabled); margin: var(--space-07) 0; }
.md-view .marcador-pagina::before, .md-view .marcador-pagina::after {
  content: ""; flex: 1; border-top: 1px solid var(--border); }

/* ---------- Barra da busca semantica ---------- */
.ds-busca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-04);
  background: var(--bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  padding: var(--space-05) var(--space-06); }
.ds-busca > i { font-size: 22px; color: var(--fg-subtle); }
.ds-busca input[type="search"], .ds-busca input[type="number"], .ds-busca select {
  font: 400 14px/1 var(--font-sans); color: var(--fg); height: 42px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: #fff;
  min-width: 0; }
/* So o campo de busca cresce; os outros tem a largura do seu conteudo. */
.ds-busca input[type="search"] { flex: 1 1 18rem; min-width: 12rem; }
.ds-busca input[type="number"] { width: 5.5rem; }
.ds-busca select { min-width: 15rem; max-width: 22rem; }
.ds-busca input:focus-visible, .ds-busca select:focus-visible { outline: none;
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,116,122,.16); }
.ds-busca .btn { align-self: center; height: 42px; padding: 0 22px; }
.ds-busca .limpar { font: 400 13px/1 var(--font-sans); color: var(--fg-subtle); }
.ds-busca .rotulo-inline { font: 700 12px/1 var(--font-sans); color: var(--fg-subtle); }

/* ---------- Resultados da busca ---------- */
.resultados { display: flex; flex-direction: column; gap: var(--space-05); }
.resultado { background: var(--bg-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1); padding: var(--space-05) var(--space-06); }
.resultado-head { display: flex; align-items: baseline; gap: var(--space-04);
  flex-wrap: wrap; margin-bottom: var(--space-04); }
.resultado-head .emissao { font: 700 var(--fs-body-2)/1.3 var(--font-sans); color: var(--fg); }
.resultado-head .emissao a { color: inherit; }
.resultado-head .caminho { font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-subtle); overflow-wrap: anywhere; }
.resultado-head .spacer { flex: 1; }
.resultado .trecho { font: var(--fw-body-2) var(--fs-body-2)/1.6 var(--font-sans);
  color: var(--fg-muted); margin: 0; }
.resultado .trecho mark { background: var(--vert-warning-light); color: var(--fg);
  border-radius: 2px; padding: 0 2px; }
.resultado details { margin-top: var(--space-04); }
.resultado details > summary { font: 700 12px/1 var(--font-sans); color: var(--accent);
  cursor: pointer; }
.resultado details > summary:hover { text-decoration: underline; }
.resultado details .integra { white-space: pre-wrap; font: 400 13px/1.6 var(--font-mono);
  color: var(--fg); background: var(--bg-hero); border-radius: var(--radius-sm);
  padding: var(--space-05); margin-top: var(--space-04); max-height: 420px; overflow: auto; }
/* Vizinhanca do trecho: mesma fonte, sem fundo e com a cor recuada — precisa se
   ler em sequencia com o trecho que casou, sem competir com ele. A borda a
   esquerda marca onde o resultado comeca e termina. */
.resultado details .vizinho { white-space: pre-wrap; font: 400 13px/1.6 var(--font-mono);
  color: var(--fg-subtle); border-left: 2px solid var(--border);
  padding: var(--space-04) var(--space-05); margin-top: var(--space-04);
  max-height: 220px; overflow: auto; }
.resultado details .rotulo-vizinho { display: block; font: 700 11px/1 var(--font-sans);
  letter-spacing: .04em; text-transform: uppercase; color: var(--fg-subtle);
  margin-bottom: var(--space-03); }

/* ---------- Leitura de um trecho em contexto ---------- */
/* Os vizinhos existem para serem lidos EM SEQUENCIA, entao nao levam caixa
   propria: o que separa um do outro e o cabecalho pequeno. So o trecho que
   casou ganha fundo e barra, para nao se perder no meio da leitura. */
.leitura { display: flex; flex-direction: column; }
.trecho-bloco > header { display: flex; align-items: center; gap: var(--space-04);
  padding: var(--space-04) 0 var(--space-03); border-top: 1px solid var(--border); }
.trecho-bloco:first-child > header { border-top: none; }
.trecho-bloco .indice { font: 700 11px/1 var(--font-sans); letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-subtle); white-space: nowrap; }
.trecho-bloco .secao { font: 400 12px/1.4 var(--font-sans); color: var(--fg-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.trecho-bloco .spacer { flex: 1; }
.trecho-bloco .corpo { white-space: pre-wrap; font: 400 13px/1.7 var(--font-mono);
  color: var(--fg-subtle); padding-bottom: var(--space-04); }
.trecho-bloco.alvo .corpo { color: var(--fg); background: var(--bg-hero);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  padding: var(--space-05); }
.trecho-bloco mark { background: var(--vert-warning-light); color: var(--fg); }

/* As duas parcelas da nota, ao lado do total. Discretas de proposito: quem so
   quer o resultado le o numero grande; quem desconfia dele le a decomposicao. */
.parcelas { display: inline-flex; gap: var(--space-04); align-items: baseline;
  margin-right: var(--space-04); }
.parcela { font: 400 11px/1 var(--font-sans); color: var(--fg-subtle);
  letter-spacing: .02em; white-space: nowrap; cursor: help; }
.parcela strong { font-weight: 700; color: var(--fg-muted);
  font-variant-numeric: tabular-nums; }
/* Parcela zerada: o sinal esta ausente, e isso e informacao — nao um detalhe. */
.parcela.nula, .parcela.nula strong { color: var(--vert-helper-medium); }

/* A escala de relevancia precisa da legenda: 0,65 de cosseno cru parece bom e e ruido. */
.meta-busca { font: 400 12px/1.6 var(--font-sans); color: var(--fg-subtle); margin: 0; }
.meta-busca strong { color: var(--fg-muted); }

/* ---------- Resolucoes baixas: menu vira off-canvas ---------- */
@media (max-width: 1023px) {
  .btn-menu { display: inline-flex; }

  .menu { position: fixed; top: 64px; left: 0; bottom: 0; height: auto; z-index: 25;
    transform: translateX(-100%); transition: transform var(--t-slow) var(--t-ease);
    box-shadow: var(--shadow-3); }
  body.menu-aberto .menu { transform: translateX(0); }
  body.menu-aberto .menu-fundo { display: block; }

  .hero, .wrap, footer { padding-left: var(--space-05); padding-right: var(--space-05); }
  .hero { padding-top: var(--space-07); }

  /* Explorer empilha e passa a rolar com a pagina */
  .explorer { grid-template-columns: 1fr; height: auto;
    padding-left: var(--space-05); padding-right: var(--space-05); }
  .explorer > .card { max-height: 60vh; }
  .painel-direito { grid-template-rows: auto; }
}

@media (max-width: 560px) {
  .topbar { gap: var(--space-04); padding: 0 var(--space-05); }
  .topbar .sub, .topbar .amb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
}

/* ---------- Passos do processamento (pagina inicial) ---------- */
.passos { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: var(--space-04); }
.passos li { display: flex; align-items: center; gap: var(--space-04);
  font: var(--fw-body-2) var(--fs-body-2)/1.3 var(--font-sans); color: var(--fg-disabled); }
.passos li i { font-size: 20px; color: var(--fg-disabled); }
.passos li.ativo { color: var(--fg); }
.passos li.ativo i { color: var(--accent); }
.passos li.feito { color: var(--fg-muted); }
.passos li.feito i { color: var(--success); }
.passos li.falhou { color: var(--vert-helper-dark); }
.passos li.falhou i { color: var(--danger); }
/* Barra indeterminada: nao da para estimar o tempo do docling + LLM */
.barra.indeterminada span { width: 40%; animation: desliza 1.4s var(--t-ease) infinite; }
@keyframes desliza { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .barra.indeterminada span { animation: none; width: 100%; opacity: .4; }
}

/* Subpasta no explorer: <details> nativo, sem JS de toggle */
.explorer details.sub > summary { list-style: none; cursor: pointer; }
.explorer details.sub > summary::-webkit-details-marker { display: none; }
.explorer details.sub > summary .nome { font-weight: 700; }
.explorer details.sub[open] > summary i::before { content: "\F0770"; }
.explorer details.sub > .lista-item { padding-left: var(--space-07); }

/* ---------- Tabela de documentos ---------- */
/* Sete colunas não cabem em 1440px sem apertar as duas de texto livre. As ações
   são o que a tela existe para oferecer: elas não podem ser a parte cortada. */
.tabela-documentos td.emissao { max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tabela-documentos td.documento { max-width: 240px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tabela-documentos td.situacao { white-space: nowrap; }
.tabela-documentos td.situacao .tag { margin-right: 4px; }
.tabela-documentos .acoes { flex-wrap: nowrap; }
.filtros select.emissao { max-width: 320px; }

/* Etapa que ainda não pode rodar: visível, mas claramente fora de alcance. */
.acao.desativada { opacity: .35; cursor: not-allowed; border-style: dashed; }
.acao.desativada:hover { background: none; color: var(--fg-muted); border-color: var(--border); }

/* ---------- Barras do painel ---------- */
/* Série única (uma medida), então um hue só — não há identidade a distinguir,
   e cor categórica aqui seria decoração. Cada barra leva o número ao lado, o
   que dispensa eixo e evita ler comprimento no olho. */
.barras { display: flex; flex-direction: column; gap: var(--space-04); }
.barras .linha { display: grid; grid-template-columns: minmax(110px, 190px) 1fr auto;
  gap: var(--space-05); align-items: center; }
.barras .rotulo { font: var(--fw-body-2) var(--fs-body-2)/1.3 var(--font-sans);
  color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras .trilha { height: 14px; background: var(--bg-hero);
  border-radius: var(--radius-sm); overflow: hidden; }
/* Ponta arredondada só no fim do dado; a base fica ancorada no eixo. */
.barras .marca { height: 100%; background: var(--accent); border-radius: 0 4px 4px 0;
  min-width: 2px; transition: width var(--t-base) var(--t-ease); }
.barras .valor { font: 700 var(--fs-body-2)/1 var(--font-sans); color: var(--fg);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.barras .valor span { font-weight: 400; color: var(--fg-subtle); margin-left: 6px; }

.painel-duplo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-06); }