/* =====================================================================
   ERP L'Espace — camada de componentes da UI do produto
   ---------------------------------------------------------------------
   DEPENDE     de tokens.css, que precisa vir ANTES. Este arquivo não
               define nenhum valor cru: toda cor, medida, raio e fonte
               sai de uma variável de lá. Se um valor não existe como
               token, ele não entra aqui — entra no design-system.

   NORMATIVO   design-system/components/primitives/*.jsx é a
               ESPECIFICAÇÃO. O kit React não é código a portar: é o
               gabarito de conferência. As medidas abaixo (32px de
               altura, 0 10px de padding, 0 14px no botão) são leitura
               direta dele.

   REGRA       **CSS ad-hoc por tela é proibido.** Tela nova consome
               esta base; se a base não tem o componente, o componente
               entra aqui PRIMEIRO. A regra é verificada por teste
               (`comum/tests_base_de_ui.py`), não confiada à memória.

   PREFIXO     `lx-` em tudo, para que nada colida com o CSS do Admin
               do Django, que vive no mesmo domínio.
   ===================================================================== */


/* ── Formulários ──────────────────────────────────────────────────────
   **Nenhum controle é estilizado por `type`.**

   O primeiro defeito visual do produto nasceu exatamente disso: a regra
   dizia `input[type=password], input[type=text]`, e o campo de e-mail —
   `type=email`, fora da lista — ficou com o default do navegador, mais
   alto e mais gordo que o vizinho.

   `type` descreve **o que o navegador valida**; não descreve o papel do
   elemento na tela. Duas coisas diferentes, e a segunda é a que importa
   para o desenho. Daí a regra de base valer para TODO controle, e a
   classe apenas acrescentar. Assim, esquecer a classe produz um campo
   correto — não um campo estranho.                                     */

.lx-cartao input,
.lx-cartao select,
.lx-cartao textarea,
.lx-entrada {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: var(--text-size-body);
  line-height: normal;
  appearance: none;
  -webkit-appearance: none;
  transition: var(--transition-ui);
}

.lx-cartao textarea {
  height: auto;
  padding: var(--space-3) 10px;
  line-height: var(--leading-normal);
}

.lx-cartao input:focus-visible,
.lx-entrada:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.lx-cartao input[aria-invalid="true"],
.lx-entrada[aria-invalid="true"] {
  border-color: var(--terracotta-light);
}

/* Um campo é rótulo + controle + apoio, empilhados. O `label` embrulha o
   controle, então clicar no rótulo foca o campo sem depender de `for`. */
.lx-campo {
  display: block;
  margin: 0 0 var(--space-6);
}

.lx-rotulo {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Botões ───────────────────────────────────────────────────────── */

.lx-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 32px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--text-size-body);
  font-weight: var(--weight-regular);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-ui);
}

.lx-botao:hover { background: var(--primary-dark); }
.lx-botao[disabled] { opacity: .45; cursor: not-allowed; }
.lx-botao--bloco { display: flex; width: 100%; }

/* ── Cartão ───────────────────────────────────────────────────────────
   Fronteira suave: borda OU sombra, nunca as duas (borders.css).       */

.lx-cartao {
  background: var(--surface-card);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
}

/* A tela de uma peça só, centrada na janela — login e troca de senha.
   Não é layout do sistema: o cromo (nav, topbar) chega com o Painel.   */
.lx-tela-unica {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-8);
}

.lx-tela-unica .lx-cartao {
  width: min(26rem, 100%);
  padding: var(--space-9);
}

/* ── Marca ────────────────────────────────────────────────────────────
   O arquivo se escolhe por CONTRASTE COM O FUNDO, nunca por hierarquia
   de nome (identidade.md, 18/08/2026). O cartão é claro; entra o lockup
   escuro. A largura é proporcional ao cartão, como no mockup.          */

.lx-marca {
  display: block;
  width: 62%;
  max-width: 15rem;
  height: auto;
  margin: 0 0 var(--space-9);
}

/* ── Texto de apoio e de erro ─────────────────────────────────────────
   Terracota para o negativo — identidade, nunca vermelho genérico.     */

.lx-ajuda {
  margin: 0 0 var(--space-7);
  font-size: var(--text-small);
  color: var(--text-muted);
}

.lx-ajuda ul { margin: var(--space-2) 0 0; padding-left: var(--space-7); }

.lx-erro {
  margin: var(--space-2) 0 0;
  font-size: var(--text-small);
  color: var(--terracotta);
}

/* Erro do formulário inteiro: acima dos campos, porque é sobre o
   conjunto — e com respiro, porque é a frase que a pessoa procura. */
.lx-erro--formulario { margin: 0 0 var(--space-7); }

.lx-ok { color: var(--sage-dark); }

/* Ações no rodapé do cartão. */
.lx-acoes { margin-top: var(--space-8); }


/* ═══════════════════════════════════════════════════════════════════════
   CROMO DA APLICAÇÃO — nav lateral, cabeçalho de área, KPIs, árvore
   -----------------------------------------------------------------------
   Entrou com o Painel (1.5). **O componente entra na base antes da tela**,
   que é a regra: a `/entrar/` usa a tela de peça única (`lx-tela-unica`);
   daqui para baixo é o cromo das telas de trabalho.

   Medidas lidas dos primitivos do design-system, que são a especificação:
   nav 216 px (`--nav-width`), linha 28 px (`--row-height`), célula 5/10 px
   (`--cell-padding-*`), indentação 16 px (`--indent-step`).
   ═══════════════════════════════════════════════════════════════════════ */

.lx-aplicacao {
  display: flex;
  min-height: 100vh;
  background: var(--surface-app);
}

/* ── Nav lateral ──────────────────────────────────────────────────────── */

.lx-nav {
  width: var(--nav-width);
  flex: 0 0 var(--nav-width);
  background: var(--surface-nav);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  padding: var(--space-7) 0 var(--space-6);
  position: sticky;
  top: 0;
  height: 100vh;
}

.lx-nav__marca { display: block; width: 132px; padding: 0 var(--space-7) var(--space-9); }
.lx-nav__marca img { display: block; width: 100%; height: auto; }
.lx-nav__itens { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--space-4); flex: 1; }

.lx-nav__grupo {
  padding: var(--space-7) var(--space-4) var(--space-3);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

.lx-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--text-on-dark-muted);
  font-size: var(--text-size-body);
  text-decoration: none;
  border: 0;
  transition: var(--transition-ui);
}

/* O design-system define `--surface-nav` e `--surface-nav-active`, e nao um
   tom de hover proprio. Usar o ativo no hover e a leitura fiel do que existe;
   inventar um terceiro tom aqui seria paleta paralela. */
.lx-nav__item:hover { background: var(--surface-nav-active); color: var(--text-on-dark); }
.lx-nav__item[aria-current="page"] { background: var(--surface-nav-active); color: var(--text-on-dark); }

/* **Item futuro fica visível e inerte, nunca escondido.** Um menu que cresce
   sem aviso desorienta mais que um menu com itens que ainda não abrem. */
.lx-nav__item--futuro { opacity: .45; cursor: not-allowed; }
.lx-nav__item--futuro:hover { background: transparent; color: var(--text-on-dark-muted); }
.lx-nav__futuro { margin-left: auto; font-size: var(--text-micro); letter-spacing: var(--tracking-label); }

.lx-nav__rodape {
  margin: var(--space-6) var(--space-7) 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-color-on-dark);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lx-nav__usuario { font-size: var(--text-small); color: var(--text-on-dark); }
.lx-nav__papel {
  font-size: var(--text-micro);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

/* ── Área de conteúdo ─────────────────────────────────────────────────── */

.lx-area {
  flex: 1;
  min-width: 0;
  padding: var(--page-padding-y) var(--page-padding-x);
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

.lx-cabecalho { display: flex; flex-direction: column; gap: var(--space-3); }
.lx-cabecalho__linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.lx-sobrancelha {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* **O carimbo do gabarito é obrigatório**: tela de números sem instante é
   comparação de fotografias diferentes esperando acontecer. */
.lx-carimbo { font-size: var(--text-small); color: var(--text-muted); }

/* ── Faixa de KPIs ────────────────────────────────────────────────────── */

.lx-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--kpi-strip-gap);
}

.lx-kpi {
  background: var(--surface-card);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--card-padding-tight) var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.lx-kpi__rotulo {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.lx-kpi__valor {
  font-family: var(--font-numeric);
  font-size: var(--text-kpi);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums lining-nums;
}

.lx-kpi__unidade { font-size: var(--text-small); color: var(--text-muted); margin-left: var(--space-3); }
.lx-kpi__nota { font-size: var(--text-small); color: var(--text-muted); }

/* ── Quadro e tabela em árvore ────────────────────────────────────────── */

.lx-quadro { background: var(--surface-card); border: var(--border); border-radius: var(--radius-md); }
.lx-quadro__cabecalho { padding: var(--card-padding); padding-bottom: var(--space-5); }
.lx-quadro__titulo {
  font-family: var(--font-title);
  font-weight: var(--weight-light);
  font-size: var(--text-section);
  text-transform: uppercase;
  letter-spacing: var(--tracking-title-sm);
  color: var(--text-strong);
  margin: 0;
}
.lx-quadro__sub { margin: var(--space-2) 0 0; font-size: var(--text-small); color: var(--text-muted); }
.lx-quadro__corpo { padding: 0 var(--card-padding) var(--card-padding); }
.lx-quadro__rolagem { overflow-x: auto; }

.lx-tabela { width: 100%; border-collapse: collapse; font-size: var(--text-table); }
.lx-tabela th {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  text-align: right;
  padding: var(--cell-padding-y) var(--cell-padding-x);
  border-bottom: var(--border);
  white-space: nowrap;
}
.lx-tabela th:first-child, .lx-tabela td:first-child { text-align: left; }
.lx-tabela td {
  padding: var(--cell-padding-y) var(--cell-padding-x);
  height: var(--row-height);
  border-bottom: var(--border);
  text-align: right;
  white-space: nowrap;
}
.lx-tabela tbody tr:last-child td { border-bottom: 0; }
.lx-tabela tbody tr:hover { background: var(--surface-hover); }

/* Tabela de subtotais — o resumo que antecede uma listagem longa.
   Destacada da lista abaixo para que ninguém a leia como "as primeiras
   linhas": é outra população (o universo inteiro, não o pedaço visível). */
.lx-tabela--resumo {
  margin-bottom: var(--space-4);
  background: var(--surface-sunken);
}
.lx-tabela--resumo td { font-weight: 500; }

/* Algarismo tabular — obrigatório em coluna de dinheiro. */
.lx-num {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--numeric-tabular);
}

.lx-num--negativo { color: var(--data-negative); }
.lx-num--positivo { color: var(--data-positive); }
.lx-num--projetado { color: var(--data-projected); }
.lx-num--premissa { color: var(--data-assumption); }

/* Hierarquia por indentação — um nível é `--indent-step`. */
.lx-no--n2 { padding-left: var(--indent-step); }
.lx-no--n3 { padding-left: calc(var(--indent-step) * 2); }
.lx-no--n1 .lx-no__rotulo { color: var(--text-strong); }

/* ── Inventário: filas de trabalho, não indicadores ───────────────────── */

.lx-inventario { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: var(--block-gap); }

.lx-selo {
  display: inline-block;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border: var(--border-strong);
  color: var(--text-muted);
}
.lx-selo--atencao { color: var(--data-negative); border-color: var(--terracotta-light); }
.lx-selo--ok { color: var(--sage-dark); border-color: var(--sage-light); }

/* **Ausência não é zero.** Zero é uma afirmação sobre o dado; ausência é uma
   afirmação sobre a medição. A tela nunca troca uma pela outra. */
.lx-sem-dado { color: var(--text-muted); }

/* ── Seletor de SPE ───────────────────────────────────────────────────── */

.lx-abas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.lx-aba {
  padding: var(--space-3) var(--space-6);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-muted);
  font-size: var(--text-small);
  text-decoration: none;
  transition: var(--transition-ui);
}
.lx-aba:hover { background: var(--offwhite-light); color: var(--text-strong); }
.lx-aba[aria-current] { background: var(--primary); border-color: var(--primary); color: var(--white); }


/* ── Árvore expansível da DRE ──────────────────────────────────────────
   **Expansão sem JavaScript**, com `<details>`/`<summary>` nativos: o
   navegador guarda o estado, o teclado funciona, e a tela não depende de
   script para ser legível.

   O alinhamento entre níveis vem de `table-layout: fixed` com a **mesma**
   largura de primeira coluna em todas as tabelas irmãs — é o que permite
   quebrar a árvore em uma tabela por agrupador e ainda assim ler as colunas
   de cima a baixo.

   **Hierarquia por peso, não só por recuo** (divergência 2 de 18/08). A
   referência da planilha distingue agrupador, macro e conta por **faixa,
   peso e recuo** ao mesmo tempo; só o recuo não se lê numa grade densa.
   ─────────────────────────────────────────────────────────────────────── */

.lx-arvore { width: 100%; }
.lx-arvore table { table-layout: fixed; width: 100%; }
.lx-arvore col.lx-col--rotulo { width: 34%; }

/* Nível 1 — agrupador: faixa cheia na primária, o peso mais forte da tela. */
.lx-ramo--agrupador > summary {
  background: var(--surface-nav);
  color: var(--text-on-dark);
  border-radius: var(--radius-sm);
  margin-top: var(--space-4);
}
.lx-ramo--agrupador > summary .lx-ramo__rotulo {
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-small);
}

/* **Na faixa escura, todo valor é branco — inclusive o negativo.**
   Decisão do proprietário em 19/08/2026, depois de a terracota (#683221)
   sobre a faixa do agrupador (#383F41) sair ilegível.

   O sinal não se perde: **o parêntese continua marcando o negativo**, e ele é
   o portador canônico do sinal no padrão contábil da casa — a cor sempre foi
   reforço, não a informação. A semântica terracota segue valendo nas linhas
   de fundo claro, onde ela se lê.

   > Contraste insuficiente é da mesma família do `var()` inexistente de
   > ontem: **renderiza, e não se lê**. Por isso os dois têm guarda. */
.lx-ramo--agrupador > summary .lx-ramo__valor,
.lx-ramo--agrupador > summary .lx-ramo__valor.lx-num--negativo {
  color: var(--text-on-dark);
}

/* Nível 2 — conta macro: fundo sutil, sem caixa alta. */
.lx-ramo--macro > summary {
  background: var(--surface-hover);
  color: var(--text-strong);
  border-bottom: var(--border);
}
.lx-ramo--macro { margin-left: var(--indent-step); }

/* Nível 3 — conta financeira: sem faixa, recuada, no peso do corpo. */
.lx-ramo__folhas { margin-left: calc(var(--indent-step) * 2); }

.lx-ramo > summary {
  display: grid;
  grid-template-columns: 34% repeat(4, 1fr);
  align-items: center;
  gap: 0;
  padding: var(--cell-padding-y) var(--cell-padding-x);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-table);
}
.lx-ramo > summary::-webkit-details-marker { display: none; }

/* A seta é do próprio elemento, e gira ao abrir: o estado fica visível sem
   depender de cor, que é o que falha em impressão e em daltonismo. */
.lx-ramo > summary .lx-ramo__seta {
  display: inline-block;
  width: var(--space-6);
  transition: var(--transition-ui);
}
.lx-ramo[open] > summary .lx-ramo__seta { transform: rotate(90deg); }

.lx-ramo > summary .lx-ramo__valor {
  text-align: right;
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  padding-right: var(--cell-padding-x);
}

.lx-ramo__rotulo { overflow: hidden; text-overflow: ellipsis; }

/* ── Linhas de resultado da DRE ────────────────────────────────────────
   Subtotais calculados das linhas que a tela já mostra. O destaque pesa mais
   que uma linha de composição porque é o que se lê primeiro — e a margem vem
   ao lado do valor, não numa coluna própria, para não sugerir que é uma
   quinta série temporal.                                                */

.lx-resultado { border-top: var(--border-strong); margin-top: var(--space-6); }
.lx-resultado .lx-tabela td { border-bottom: 0; }
.lx-resultado tr.lx-resultado--destaque td {
  font-size: var(--text-size-body);
  color: var(--text-strong);
  background: var(--surface-hover);
}
.lx-resultado__margem {
  display: block;
  font-size: var(--text-micro);
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
}

/* ── Drill-down de composição (D7) ─────────────────────────────────────
   **A célula que abre precisa parecer que abre.** Duplo clique é gesto
   invisível: sem afordância a funcionalidade existe e ninguém a encontra. O
   sinal é discreto de propósito — sublinhado pontilhado e cursor —, porque a
   grade é densa e um destaque forte competiria com o número, que é o que se
   veio ler.

   Célula que **não** abre não ganha marca nenhuma e carrega a explicação no
   `title`: a ausência de afordância é, ela própria, a informação.
   ─────────────────────────────────────────────────────────────────────── */

.lx-celula--abre {
  cursor: pointer;
  text-decoration: underline dotted var(--border-color-strong);
  text-underline-offset: var(--space-1);
}
.lx-celula--abre:hover { background: var(--surface-selected); }

.lx-composicao:empty { display: none; }
.lx-composicao { margin-top: var(--space-6); }

.lx-composicao__caixa {
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  padding: var(--card-padding-tight);
}
.lx-composicao__cabecalho {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
}
.lx-composicao__cabecalho::-webkit-details-marker { display: none; }
.lx-composicao__titulo {
  font-family: var(--font-title);
  font-size: var(--text-section);
  color: var(--text-strong);
}
.lx-composicao__resumo {
  margin: var(--space-3) 0;
  font-size: var(--text-small);
  color: var(--text-body);
}
/* **O corte nunca é silencioso.** Silêncio sobre truncamento é a forma mais
   barata de mentir numa tela: o total e a contagem são do universo inteiro, e
   o que ficou de fora aparece dito. */
.lx-composicao__corte {
  display: block;
  font-size: var(--text-micro);
  color: var(--data-negative);
}

/* Nota do bloco de resultado — **a explicação da célula vazia**.
   Célula vazia sem motivo à vista lê-se como defeito de renderização; e um
   tooltip numa célula vazia é aviso que ninguém encontra. */
.lx-resultado__nota {
  margin-top: var(--space-4);
  font-size: var(--text-micro);
  color: var(--text-body);
  max-width: 70ch;
}

/* ── Pop-up da composição (Fase 4) ─────────────────────────────────────
   **`<dialog>` nativo**: camada de topo, foco preso, Esc e véu vêm do
   navegador. O que fica aqui é aparência — e o **X fixo**, que foi o defeito
   apontado na validação: ele estava dentro do conteúdo e sumia na rolagem.
   ─────────────────────────────────────────────────────────────────────── */

.lx-composicao__caixa {
  border: 0;
  padding: var(--card-padding);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-popover);
  max-width: 76rem;
  width: min(76rem, 92vw);
  max-height: 84vh;
  overflow: auto;
}
.lx-composicao__caixa::backdrop {
  /* ⚠ O design-system não tem token de véu (scrim). Em vez de inventar cor
     crua — que a base proíbe, e com razão —, o véu é composto a partir da
     primária já definida. Lacuna nomeada, como o `--text-muted`. */
  background: color-mix(in srgb, var(--surface-nav) 55%, transparent);
}

/* **O X é fixo na viewport, não na caixa.** Independe de rolagem vertical e
   horizontal — é o "padrão de sistema" que a validação pediu. Dentro do
   `<dialog>` modal, `fixed` se resolve contra a janela, que é o que se quer. */
.lx-composicao__x {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  margin: 0;
  z-index: 1;
}
.lx-composicao__x button {
  width: var(--space-9);
  height: var(--space-9);
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-strong);
  font-size: var(--text-section);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-raised);
}
.lx-composicao__x button:hover { background: var(--surface-hover); }

.lx-composicao__cabecalho {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-right: var(--space-9);
}
.lx-composicao__titulo {
  font-family: var(--font-title);
  font-size: var(--text-section);
  color: var(--text-strong);
}
.lx-composicao__resumo {
  margin: var(--space-3) 0;
  font-size: var(--text-small);
  color: var(--text-body);
}
/* **O corte nunca é silencioso.** Silêncio sobre truncamento é a forma mais
   barata de mentir numa tela. */
.lx-composicao__corte {
  display: block;
  font-size: var(--text-micro);
  color: var(--data-negative);
}

/* ── conciliação: mestre-detalhe ──────────────────────────────────────────
   §30 do briefing de UX. A lista de movimentos à esquerda, o detalhe e a
   associação à direita. O painel deixou de renderizar dentro da linha —
   antes eram 758.592 linhas de tabela numa página da EC. */
.lx-mestre-detalhe {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--block-gap);
  align-items: start;
}
@media (max-width: 60rem) { .lx-mestre-detalhe { grid-template-columns: 1fr; } }

.lx-fila { display: flex; flex-direction: column; gap: var(--space-2); }

.lx-fila__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  text-align: left;
  width: 100%;
}
.lx-fila__item--foco { border-color: var(--border-color-strong); }
.lx-fila__item--resolvida { opacity: 0.6; }

/* Hierarquia de leitura vertical (§29): o valor primeiro, o histórico
   depois, os metadados por último. */
.lx-mov__valor { font-size: var(--text-body); font-weight: 600; }
.lx-mov__historico { font-size: var(--text-small); }
.lx-mov__meta { font-size: var(--text-small); color: var(--text-muted); }

/* Barra de lote — a seleção é sempre explícita: o sistema nunca concilia
   sozinho, e o botão diz quantas e quanto. */
.lx-lote {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}

.lx-atalhos { font-size: var(--text-small); color: var(--text-muted); }
.lx-atalhos kbd {
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
}

/* ── conciliação v5: revelação progressiva ────────────────────────────────
   O painel da direita mostra só o que a decisão daquele momento pede. */
.lx-progresso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.lx-barra { width: 12rem; height: var(--space-3); }

.lx-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* O resumo do split fica fixo à vista enquanto se marca: extrato, selecionado
   e diferença. *A conta que decide o botão não pode exigir rolagem.* */
.lx-resumo {
  position: sticky;
  top: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}

/* A fila: o item inteiro é clicável, e a hierarquia é vertical. */
.lx-fila__item > span { display: block; }
.lx-fila__item .lx-mov__valor,
.lx-fila__item .lx-mov__historico,
.lx-fila__item .lx-mov__meta { display: block; }
.lx-fila__item:focus-visible { outline: var(--focus-ring); }

/* A área que abre o detalhe. É uma âncora de verdade — sem JavaScript ela
   navega para a página cheia; com ele, o HTMX intercepta e troca só o
   painel. */
.lx-fila__abrir {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.lx-fila__abrir:focus-visible { outline: var(--focus-ring); }

/* A faixa que lembra a seleção quando o painel está mostrando um detalhe.
   *Seleção que some ao abrir outra coisa não é seleção: é rascunho.* */
.lx-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-size: var(--text-small);
}