/* Contas a Pagar MGT — "Petróleo"
 *
 * Shell escuro em "L" (barra lateral + topo) emoldurando um canvas claro.
 * O contrato de leitura é esse: cromo é escuro, dado é claro, e os dois nunca
 * se confundem.
 *
 * Três regras que explicam o resto:
 *   1. "A vencer" não tem cor — é a maioria das linhas.
 *   2. "Pago" também não tem cor. É estado terminal e o mais comum no
 *      histórico; o trabalho está no que NÃO foi pago. Neutralizar o pago é o
 *      que libera o verde para ser a marca.
 *   3. O acento marca onde se pode clicar e onde se está. Nunca marca o que o
 *      dado é.
 */

:root {
  /* Estrutura — Pantone White e os Cool Gray da marca.
   *
   * O canvas era um cinza frio; passa a ser branco. Com o shell em preto puro, o
   * contraste da moldura já é máximo, e um canvas cinza só somaria um terceiro
   * tom sem função. Cinza continua existindo, mas só onde separa: linha, hover,
   * cabeçalho de tabela. */
  --fundo:        #ffffff;
  --superficie:   #ffffff;
  --superficie-2: #f6f6f7;
  --linha:        #e7e7e7;
  --linha-forte:  #d0d0d0;
  --tinta:        #000000;
  --tinta-2:      #56565c;
  --tinta-3:      #7a7a84;

  /* Shell — Pantone Process Black C, com o 75% como elevação.
   *
   * Preto e branco deixam a marca ser a única cor da tela: o azul de ação passa a
   * ser a coisa mais colorida em qualquer lugar, e não disputa mais com um
   * marinho de fundo. É o que faz "clean" significar menos cor, não menos coisa. */
  --barra:        #000000;
  --barra-2:      #232323;
  --barra-linha:  #2f2f2f;
  --barra-texto:  #a8a8ae;

  /* Semântica.
   * "Vence hoje" usa o laranja da marca (Pantone 1375C): urgência é exatamente
   * o que ele significa. "Aguarda aprovação" usa o azul-ciano da paleta
   * secundária (7689C) — visivelmente diferente do azul de ação, que é indigo.
   * Vermelho não está na marca, e não deveria estar: é sinal, não identidade. */
  --vencido:       #c0362b;  --vencido-fundo: #fdecea;  --vencido-borda: #f5c9c4;
  --vencido-lavagem: #fef7f6;
  --hoje:          #a35f00;  --hoje-fundo:    #fef1de;  --hoje-borda:    #f8d9a6;
  --hoje-forte:    #f59400;
  --aguarda:       #0077a0;  --aguarda-fundo: #e3f4fa;  --aguarda-borda: #b9e3f2;
  --quieto:        #5a5a62;  --quieto-fundo:  #f1f2f5;  --quieto-borda:  #e3e4e8;

  /* Acento de marca — Pantone 2935C. Marca onde se clica e onde se está. */
  --acento:        #2421ff;
  --acento-claro:  #4d7dff;
  --acento-suave:  #ecebff;
  --acento-borda:  #b9b8ff;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .04);
  --sombra-2: 0 1px 3px rgba(0, 0, 0, .05), 0 6px 16px rgba(0, 0, 0, .06);
  --sombra-3: 0 16px 40px rgba(0, 0, 0, .22);

  --texto: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
           Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;

  --barra-largura: 232px;
  --linha-altura: 44px;
  --linha-cabecalho: 36px;
  --linha-dupla: 60px;
  --linha-rodape: 44px;
  --celula-padding: 12px;
}

/* Modo compacto: só muda métrica, nunca cor nem estrutura. */
body.compacto {
  --linha-altura: 36px;
  --linha-cabecalho: 32px;
  --linha-dupla: 48px;
  --linha-rodape: 36px;
  --celula-padding: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 14px/20px var(--texto);
  -webkit-font-smoothing: antialiased;
}

h1 { font: 600 20px/28px var(--texto); letter-spacing: -.01em; margin: 0; }
h2 { font: 600 15px/22px var(--texto); margin: 0; }
h3 { font: 600 14px/20px var(--texto); margin: 0; }
p  { margin: 0 0 12px; max-width: 68ch; }
.dica { color: var(--tinta-2); font-size: 13px; }
p.dica { margin: 4px 0 12px; }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.num, td.num, .valor { font-variant-numeric: tabular-nums lining-nums; text-align: right; white-space: nowrap; }
.valor { font-weight: 600; }
.registro { font-family: var(--mono); font-size: 13px; font-variant-numeric: slashed-zero; }
.rotulo {
  font: 600 11.5px/16px var(--texto);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
  display: block;
}

svg { flex: none; }

/* ================================================================= shell */

/* `minmax(0, 1fr)` e não `1fr`: a coluna de conteúdo tem `min-width: auto` por
 * padrão, então uma tabela larga não rola dentro do bloco — ela empurra o
 * layout inteiro para fora da tela e passa por cima da régua lateral. */
.aplicacao { display: grid; grid-template-columns: var(--barra-largura) minmax(0, 1fr); min-height: 100dvh; }
.aplicacao > div { min-width: 0; }
body.barra-recolhida { --barra-largura: 64px; }

.lateral {
  background: var(--barra);
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

a.marca { text-decoration: none; color: inherit; }
a.marca:hover .logo { opacity: .85; }
.lateral .marca {
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 20px;
  color: #fff;
  flex: none;
  border-bottom: 1px solid var(--barra-linha);
}
/* O símbolo só aparece quando o logo não cabe. */
.lateral .marca .simbolo.so-recolhida { display: none; }
.lateral .marca .simbolo {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--acento);
  color: #fff;
  display: grid; place-items: center;
  font: 700 12px/1 var(--texto);
  flex: none;
}
/* Largura manda, altura acompanha: o lockup é 2,13:1 e travar pela altura o
   deixaria estreito demais para o descritivo ser lido. */
.lateral .marca .logo { width: 100%; max-width: 168px; height: auto; color: #fff; }
body.barra-recolhida .lateral .marca .logo { display: none; }
body.barra-recolhida .lateral .marca .simbolo.so-recolhida { display: grid; }


.lateral nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.lateral .separador { height: 1px; background: var(--barra-linha); margin: 8px 12px; }

.lateral a.item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--barra-texto);
  font-size: 14px;
  position: relative;
  text-decoration: none;
  transition: background 120ms, color 120ms;
}
.lateral a.item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.lateral a.item.ativo { background: var(--barra-2); color: #fff; }
.lateral a.item.ativo svg { color: var(--acento-claro); }
.lateral a.item.ativo::before {
  content: "";
  position: absolute;
  left: -8px; top: 10px;
  width: 3px; height: 20px;
  border-radius: 2px;
  background: var(--acento-claro);
}
.lateral a.item:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
.lateral a.item .selo {
  margin-left: auto;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--barra-2);
  color: #fff;
  font: 600 11px/18px var(--texto);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lateral a.item .selo.urgente { background: var(--vencido); }
body.barra-recolhida .lateral a.item { justify-content: center; padding: 0; }
body.barra-recolhida .lateral a.item span:not(.selo) { display: none; }
body.barra-recolhida .lateral a.item .selo {
  position: absolute; top: 4px; right: 6px; margin: 0;
  min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; padding: 0 4px;
}

.lateral .rodape {
  margin-top: auto;
  border-top: 1px solid var(--barra-linha);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--barra-texto);
}
.lateral .rodape .avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--acento); color: #fff;
  display: grid; place-items: center;
  font: 600 11px/1 var(--texto);
  flex: none;
}
.lateral .rodape .quem { min-width: 0; }
.lateral .rodape .quem strong { display: block; color: #fff; font: 500 13px/16px var(--texto); }
.lateral .rodape .quem span {
  font-size: 11.5px; color: var(--tinta-3);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lateral .rodape .quem strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .rodape button {
  margin-left: auto; background: none; border: 0; color: var(--barra-texto);
  cursor: pointer; padding: 4px; border-radius: 6px;
}
.lateral .rodape button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
body.barra-recolhida .lateral .rodape { justify-content: center; }
body.barra-recolhida .lateral .rodape .quem { display: none; }

/* --- topo --- */
.topo {
  height: 56px;
  background: var(--barra);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topo .migalha { color: var(--barra-texto); font-size: 13px; }
.topo .busca {
  display: flex; align-items: center; gap: 8px;
  height: 36px; width: min(420px, 40vw);
  padding: 0 14px;
  border-radius: 999px;
  background: var(--barra-2);
  border: 1px solid var(--barra-linha);
  color: var(--barra-texto);
}
.topo .busca input {
  background: none; border: 0; outline: 0; color: #fff;
  font: 400 13px/1 var(--texto); width: 100%; min-width: 0;
}
.topo .busca input::placeholder { color: var(--tinta-3); }
.topo .no-topo { border-color: transparent; color: var(--barra-texto); background: none; }
.topo .no-topo:hover { background: var(--barra-2); border-color: var(--barra-linha); color: #fff; }
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topo .ambiente {
  height: 24px; padding: 0 10px;
  border-radius: 999px;
  background: rgba(161, 92, 0, .18);
  color: #f0c07a;
  font: 500 12px/24px var(--texto);
}
.topo .hamburguer { display: none; background: none; border: 0; color: var(--barra-texto); cursor: pointer; padding: 6px; }

main { padding: 20px 24px 48px; max-width: 1720px; }

/* ================================================================= superfícies */

.cartao, .bloco {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 10px;
  box-shadow: var(--sombra-1);
}
.bloco > .cabecalho {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--linha);
}
.bloco > .cabecalho > button { margin-left: auto; }
.bloco > .cabecalho .contagem {
  margin-left: auto; font-size: 13px; color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.cartao { padding: 20px; }
body.compacto .cartao { padding: 16px; }

.cabecalho-tela { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cabecalho-tela .dica { margin: 0; }

/* ================================================================= controles */

button, .botao {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--tinta);
  font: 500 13px/1 var(--texto);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
button:hover, .botao:hover { background: var(--superficie-2); border-color: var(--tinta-3); }
button.primario {
  background: var(--acento); border-color: var(--acento); color: #fff;
}
button.primario:hover { background: #1a17e0; border-color: #1a17e0; }
button.discreto { border-color: transparent; background: transparent; }
button.discreto:hover { background: var(--superficie-2); border-color: var(--linha); }
button.perigo { color: var(--vencido); border-color: var(--vencido-borda); }
button:disabled { color: var(--tinta-3); border-color: var(--linha); background: var(--superficie); cursor: default; }
button.icone { width: 34px; padding: 0; justify-content: center; }

input:not(:where([type="checkbox"], [type="radio"], [type="file"])), select, textarea {
  height: 34px;
  /* 12px para casar com o inset do botão: em .linha-form eles ficam colados, e
     dois insets diferentes é o desalinho que mais salta à vista. */
  padding: 0 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--tinta);
  font: 400 14px/1 var(--texto);
  min-width: 8rem;
}
textarea { height: auto; padding: 8px 12px; line-height: 20px; }
input:hover, select:hover { border-color: var(--tinta-3); }
input:focus-visible, select:focus-visible { border-color: var(--acento); outline: 2px solid var(--acento-suave); outline-offset: 0; }
input::placeholder { color: var(--tinta-3); }

input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--acento);
  cursor: pointer;
}

label.papel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.linha-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
/* Campo com a largura do que ele guarda: CNPJ não precisa de 400px, e descrição
   não cabe em 100px. Sem isto o mínimo de 8rem não vira largura, só piso. */
.campo.estreito { width: 7rem; }
.campo.curto    { width: 10rem; }
.campo.medio    { width: 16rem; }
.campo.amplo    { width: 24rem; }
.campo.estreito > *, .campo.curto > *, .campo.medio > *, .campo.amplo > * {
  width: 100%; min-width: 0;
}
/* Uma regra no lugar de dezesseis atribuições de estilo em JavaScript. */
.filtros .campo > :is(input, select, textarea) { width: 100%; min-width: 0; }

/* ================================================================= painel de filtros

   Faixas horizontais sobre uma grade de quatro colunas. O ganho não é estético:
   com largura de coluna constante, o olho percorre a mesma trilha em toda faixa,
   e campo que ocupa duas colunas (fornecedor, classificação, texto livre) diz
   pela largura que aceita conteúdo maior. */

.filtros .secao { padding: 16px 18px; border-top: 1px solid var(--linha); }
.filtros .secao:first-child { border-top: 0; padding-top: 14px; }
.titulo-secao {
  display: block; margin-bottom: 12px;
  font: 600 11px/1 var(--texto); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-3);
}
.filtros .grade {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px; align-items: end;
}
.filtros .grade > * { min-width: 0; }
.filtros .grade .largo { grid-column: span 2; }
.filtros .grade .todo  { grid-column: 1 / -1; }

.filtros .atalhos { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 1px; }
.filtros .atalho {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--linha-forte); border-radius: 999px;
  background: var(--superficie); color: var(--tinta-2);
  font: 500 12px/1 var(--texto); cursor: pointer;
}
.filtros .atalho:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }

.filtros .marcadores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.filtros .marcadores .separador {
  width: 1px; height: 18px; background: var(--linha-forte); margin: 0 2px;
}

.rodape-filtros {
  display: flex; align-items: flex-end; gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--linha);
  background: var(--superficie-2);
  border-radius: 0 0 10px 10px;
}
.rodape-filtros .campo { width: 200px; }
.rodape-filtros .acoes { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 1180px) {
  .filtros .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .filtros .grade { grid-template-columns: minmax(0, 1fr); }
  .filtros .grade .largo, .filtros .grade .todo { grid-column: auto; }
  .rodape-filtros { flex-direction: column; align-items: stretch; }
  .rodape-filtros .campo { width: auto; }
  .rodape-filtros .acoes { margin-left: 0; }
}

/* Chip de filtro: pílula com chevron, como na referência. */
.chip-filtro {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--superficie);
  font: 500 13px/1 var(--texto);
  color: var(--tinta-2);
  cursor: pointer;
}
.chip-filtro:hover { border-color: var(--tinta-3); color: var(--tinta); }
.chip-filtro.ativo {
  background: var(--acento-suave); border-color: var(--acento-borda); color: var(--acento);
}

/* ================================================================= tabela */

.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
table.livre { table-layout: auto; }

thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linha-forte);
  font: 600 11.5px/16px var(--texto);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
  text-align: left;
  padding: 0 var(--celula-padding);
  height: var(--linha-cabecalho);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
thead th.num { text-align: right; }
thead th:first-child, tbody td:first-child { padding-left: 16px; }
thead th:last-child, tbody td:last-child { padding-right: 16px; }

tbody td {
  height: var(--linha-altura);
  padding: 0 var(--celula-padding);
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
tbody tr:last-child td { border-bottom: 0; }
/* A célula de ações abriga um botão, não texto: reticências ali viram sujeira. */
tbody td:last-child, thead th:last-child { overflow: visible; text-overflow: clip; }
tbody tr:hover { background: var(--superficie-2); }
tbody tr.selecionada { background: var(--acento-suave); }

/* Régua de condição: sombra interna, sem coluna fantasma. */
tbody tr.condicao-vencido td:first-child { box-shadow: inset 3px 0 0 var(--vencido); }
tbody tr.condicao-hoje td:first-child { box-shadow: inset 3px 0 0 var(--hoje-forte); }
tbody tr.condicao-vencido { background: var(--vencido-lavagem); }
tbody tr.condicao-vencido:hover { background: #fdf0ee; }

td .secundario, .secundario { color: var(--tinta-3); font-size: 13px; }
td.principal a { font-weight: 500; }

tfoot td, .rodape-total {
  position: sticky; bottom: 0;
  background: var(--superficie);
  border-top: 1px solid var(--linha-forte);
  height: var(--linha-rodape);
  padding: 0 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 12px;
}
.rodape-total .direita { margin-left: auto; display: flex; align-items: center; gap: 8px; font-weight: 400; }

tr.inativo td { color: var(--tinta-3); }

/* Barra de ação em massa: ocupa o lugar do cabeçalho quando há seleção. */
.acao-em-massa {
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 16px;
  background: var(--acento-suave);
  border-bottom: 1px solid var(--acento-borda);
  font-size: 13px;
  color: var(--acento);
}
.acao-em-massa .fim, .cabecalho .fim, .cabecalho-tela .fim, .linha-form .fim { margin-left: auto; }

/* ================================================================= chips de estado */

.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font: 500 12px/1 var(--texto);
  white-space: nowrap;
  max-width: 100%; overflow: hidden;
}
.etiqueta.neutro  { color: var(--tinta-3); border-color: var(--linha); }
.etiqueta.quieto  { color: var(--quieto);  background: var(--quieto-fundo);  border-color: var(--quieto-borda); }
.etiqueta.aguarda { color: var(--aguarda); background: var(--aguarda-fundo); border-color: var(--aguarda-borda); }
.etiqueta.hoje    { color: var(--hoje);    background: var(--hoje-fundo);    border-color: var(--hoje-borda); }
.etiqueta.vencido { color: var(--vencido); background: var(--vencido-fundo); border-color: var(--vencido-borda); }
.etiqueta.apagado { color: var(--tinta-3); border-color: var(--linha); text-decoration: line-through; }
.etiqueta.acento  { color: var(--acento);  background: var(--acento-suave);  border-color: var(--acento-borda); }

.nome { font-weight: 500; }
.praca { font-family: var(--mono); font-size: 12px; color: var(--tinta-3); margin-right: 6px; }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
label.papel.destacado { font-weight: 500; color: var(--tinta); }
/* O respiro interno de um bloco. Estava escrito à mão em nove lugares, com três
   valores diferentes — 12, 14 e 16px — para a mesma ideia. */
.acolchoado { padding: 16px; }
.espaco-acima { margin-top: 16px; }
.espaco-antes { margin-left: 8px; }

/* Fila com duas linhas de texto por linha — em TODA linha, inclusive nas que não
   tem segunda. O que se recusa e a altura IRREGULAR, nao a altura: regua de
   leitura constante e o que faz a lista ser varrida em vez de lida. */
table.fila tbody td {
  height: var(--linha-dupla);
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: top;
}
table.fila tbody td > * { display: block; overflow: hidden; text-overflow: ellipsis; }

/* Botão de ação fica LADO A LADO com o vizinho.
 *
 * A regra logo acima põe todo filho de célula em `display: block`, e ela está
 * certa para dado empilhado — valor em cima, dica embaixo. Para botão está
 * errada: "Aprovar" e "Devolver" viravam duas linhas, dobrando a altura de
 * toda a fila e empurrando o segundo botão para baixo do primeiro. Apareceu no
 * dia em que a fila de aprovações passou a usar a tabela com colunas
 * escolhíveis, que traz a classe `fila` junto. */
table.fila tbody td.acoes { white-space: nowrap; }
table.fila tbody td.acoes > * { display: inline-flex; vertical-align: top; overflow: visible; }
table.fila tbody td.acoes > * + * { margin-left: 8px; }
table.fila tbody td .com-marca { display: flex; align-items: center; gap: 6px; }
table.fila tbody td .com-marca > * { display: inline-flex; }
table.fila { min-width: 660px; }

/* Marca clicavel com rotulo em texto: title nao alcanca teclado nem toque. */
button.etiqueta-botao {
  height: 20px;
  padding: 0 7px;
  font: 500 11px/1 var(--texto);
  border-radius: 999px;
  border-color: var(--linha-forte);
  color: var(--tinta-3);
  flex: none;
}
button.etiqueta-botao:hover {
  border-color: var(--acento);
  color: var(--acento);
  background: var(--acento-suave);
}

/* Mes ainda em curso: hachura, e o rotulo em texto diz o mesmo. */
.barra-linha .em-curso {
  background: repeating-linear-gradient(
    45deg,
    var(--acento-borda),
    var(--acento-borda) 4px,
    var(--acento-suave) 4px,
    var(--acento-suave) 8px
  );
}
.qtd.quieto-texto { color: var(--quieto); }
/* Parte já paga, dentro da barra do ano: mesma origem, por cima. */
.barra-linha { position: relative; }
.barra-linha .parte-paga {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--acento); border-radius: inherit;
}
/* Diferença de pagamento: pagou a mais é atrito, pagou a menos é desconto. */
td.acima { color: var(--vencido); }
td.abaixo { color: var(--acento); }
.em-atencao { color: var(--hoje); }
.acolchoado-abaixo { padding: 0 16px 16px; }

/* Linha que guarda conteúdo de altura variável — caixas de seleção que quebram,
   avisos de conflito empilhados. A linha de 44px é ótima para fila de trabalho e
   péssima para tela de configuração: aqui ela cortava metade dos papéis. */
tr.alta td {
  height: auto;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  padding-top: 10px;
  padding-bottom: 10px;
  vertical-align: top;
}
tr.alta td .papel { margin-right: 12px; }
tr.alta td .conflito { display: block; margin-top: 4px; }

/* Meta: rótulo à esquerda, campo curto e botão à direita. O campo era um input
   solto numa .lista-linha, com min-width por estilo embutido. */
.meta-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-top: 1px solid var(--linha);
}
.meta-linha:first-of-type { border-top: 0; }
.meta-texto { flex: 1; min-width: 0; }
.meta-valor { display: flex; align-items: center; gap: 6px; }
.meta-valor input { width: 5.5rem; min-width: 0; text-align: right; }

/* Filtros da linha do tempo: uma faixa só, que não empurra o conteúdo. */
.filtros-tempo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--linha);
}
.filtros-tempo select { width: 11rem; }
.filtros-tempo input[type="search"] { flex: 1; min-width: 12rem; }
.atalho.ativo {
  background: var(--acento-suave); border-color: var(--acento-borda); color: var(--acento);
  font-weight: 500;
}

/* Árvore de classificação. O peso cai por nível: o setor carrega a leitura, o
   detalhe é consulta. Recuo em vez de <ul> aninhado porque a linha precisa de
   largura inteira para caber a ação à direita. */
.arvore { padding: 4px 0 8px; }
.ramo {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
  min-height: 36px; padding: 2px 16px 2px 0;
  border-bottom: 1px solid var(--linha);
}
.ramo:last-child { border-bottom: 0; }
.ramo:hover { background: var(--superficie-2); }
.ramo.nivel-1 { padding-left: 8px; font-weight: 600; }
.ramo.nivel-2 { padding-left: 32px; }
.ramo.nivel-3 { padding-left: 56px; font-size: 13.5px; color: var(--tinta-2); }
.ramo.inativo .nome-ramo { text-decoration: line-through; color: var(--tinta-3); }

.ramo .punho {
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; color: var(--tinta-3); cursor: pointer;
}
.ramo .punho:hover { color: var(--acento); background: none; }
.ramo .punho.sem-filho { visibility: hidden; }
.ramo .punho svg { transition: transform 120ms; }
.ramo .punho.fechado svg { transform: rotate(-90deg); }

.rotulo-ramo { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rotulo-ramo .nome-ramo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rotulo-ramo .secundario { white-space: nowrap; }

/* A ação só aparece na linha sob o cursor: com um botão em cada nó, a árvore
   vira uma coluna de botões e a hierarquia some. */
.acao-ramo { opacity: 0; }
.ramo:hover .acao-ramo, .acao-ramo:focus-visible { opacity: 1; }

/* Formulário em grade. Substitui as fileiras de .linha-form com larguras
   improvisadas: a coluna é a mesma em toda linha, e o campo declara quanto
   ocupa. É o que faz um formulário de doze campos parecer arrumado. */
.secao-form { padding: 0 0 4px; }
.secao-form:first-of-type { padding-top: 8px; }
.secao-form + .secao-form { border-top: 1px solid var(--linha); padding-top: 18px; }
.secao-form > .grade-form:last-child { margin-bottom: 0; }

.grade-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px 16px;
  align-items: end;
  margin-bottom: 16px;
}
.grade-form > * { min-width: 0; }
.grade-form .campo > :is(input, select, textarea) { width: 100%; min-width: 0; }
.grade-form .curto  { grid-column: span 1; }
.grade-form .largo  { grid-column: span 2; }
.grade-form .todo   { grid-column: 1 / -1; }
.grade-form .acao .rotulo { visibility: hidden; }
.grade-form .acao button { width: 100%; }

/* Cabeçalho ordenável: o rótulo continua sendo texto, e a seta é sinal
   adicional — nunca o único. */
th button.ordenar {
  height: auto; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
th button.ordenar:hover { color: var(--acento); background: none; }
th .seta { color: var(--linha-forte); font-size: 10px; }
th .seta.ativa { color: var(--acento); }

.rodape-lista { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--linha); }

/* ================================================================= indicadores */

.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.indicador {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 10px;
  box-shadow: var(--sombra-1);
  padding: 16px;
  display: block;
  color: inherit;
  text-decoration: none;
}
a.indicador:hover { border-color: var(--linha-forte); box-shadow: var(--sombra-2); text-decoration: none; }
.indicador .rotulo { margin-bottom: 8px; }
.indicador .numero {
  font: 600 28px/34px var(--texto);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.indicador .cifra { font-size: 14px; color: var(--tinta-2); font-variant-numeric: tabular-nums; margin-top: 2px; }
.indicador .nota { font-size: 13px; color: var(--tinta-3); margin-top: 6px; }
.indicador.tom-vencido .numero { color: var(--vencido); }
.indicador.tom-hoje .numero { color: var(--hoje); }
.indicador.tom-aguarda .numero { color: var(--aguarda); }

/* ================================================================= listas */

.lista-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 12px;
  align-items: baseline;
  min-height: 40px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--linha);
  color: inherit;
  text-decoration: none;
}
/* O rótulo manda na largura da linha: sem isto ele quebra e o número flutua
   contra um texto de duas linhas, e a régua de leitura se perde. */
.lista-linha > :first-child { min-width: 0; }
.lista-linha:last-child { border-bottom: 0; }
a.lista-linha:hover { background: var(--superficie-2); text-decoration: none; }
.lista-linha .qtd { font-size: 13px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.lista-linha .valor { min-width: 8.5rem; }
.lista-linha.total { border-top: 1px solid var(--linha-forte); border-bottom: 0; }
/* O ponto existe em TODA linha, não em três de sete: um marcador que aparece
   só às vezes é lido como "estas são diferentes", quando a diferença já está
   dita pela cor. Sem tom, ele é neutro e serve só de guia do olho. */
.lista-linha .marcador {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--linha-forte);
  display: inline-block; margin-right: 8px; flex: none;
  transform: translateY(-1px);
}
.lista-linha .marcador.tom-hoje    { background: var(--hoje-forte); }
.lista-linha .marcador.tom-vencido { background: var(--vencido); }
.lista-linha .marcador.tom-aguarda { background: var(--aguarda); }

/* Integridade: rótulo curto de um lado, número do outro, e a linha sem
   ocorrência recua para o segundo plano em vez de gritar o mesmo que as outras. */
.lista-linha.tranquila { color: var(--tinta-3); }
.lista-linha.tranquila .valor { color: var(--tinta-3); font-weight: 400; }
.lista-linha .valor.forte { font-weight: 600; }

.ranque-linha {
  display: grid;
  grid-template-columns: 11rem 1fr 8.5rem 4.5rem;
  gap: 12px; align-items: center;
  min-height: 38px; padding: 0 16px;
  border-bottom: 1px solid var(--linha);
  font-size: 13.5px;
}
.ranque-linha:last-child { border-bottom: 0; }

/* Crescimento mensal. Grade propria porque .ranque-linha exige 24rem de colunas
   fixas — mais que os 360px da coluna direita — e o percentual saia para fora do
   cartao. Duas colunas de numero (valor e variacao) e a barra numa segunda
   linha, onde ela tem a largura inteira em vez de disputar espaco. */
.crescimento-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 3.75rem;
  gap: 2px 10px;
  align-items: baseline;
  padding: 10px 16px;
  border-bottom: 1px solid var(--linha);
  font-size: 13.5px;
}
.crescimento-linha:last-child { border-bottom: 0; }
.crescimento-linha .mes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crescimento-linha .valor { min-width: 0; }
.crescimento-linha .variacao {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crescimento-linha .barra-linha { grid-column: 1 / -1; height: 5px; margin-top: 4px; }
.ranque-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-linha { display: block; height: 8px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; }
.barra-linha > span { display: block; height: 100%; border-radius: 4px; background: var(--acento); }
.barra-linha > span.com-atraso { background: var(--vencido); }

/* ================================================================= gráfico */

.fluxo-colunas { display: grid; align-items: end; gap: 0; padding: 16px 12px 0; }
.fluxo-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 6px; padding: 0 3px; background: none; border: 0; cursor: pointer; height: auto;
}
.fluxo-slot:hover, .fluxo-slot:focus-visible { background: var(--superficie-2); border-radius: 8px; }
.fluxo-slot .topo-valor { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.fluxo-slot .rotulo { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; padding: 8px 0 12px; text-align: center; }
.fluxo-slot.corrente .rotulo { color: var(--tinta); font-weight: 600; }
.barra-pilha { display: flex; flex-direction: column; justify-content: flex-end; width: 62%; min-height: 3px; }
.barra { display: block; width: 100%; }
.barra.comprometido { background: var(--acento); border-radius: 3px 3px 0 0; }
.barra.a-decidir { background: var(--acento-borda); border-radius: 3px 3px 0 0; }
.barra.comprometido + .barra { border-radius: 0; }
.barra.atraso { background: var(--vencido); border-radius: 3px 3px 0 0; width: 62%; }
.barra.vazia { height: 3px; background: var(--linha-forte); border-radius: 2px; }
.fluxo-base { border-top: 1px solid var(--linha-forte); }
.fluxo-leitura { border-top: 1px solid var(--linha); padding: 10px 16px; font-size: 13px; min-height: 40px; color: var(--tinta-2); }
.legenda { display: flex; gap: 16px; padding: 0 16px 12px; font-size: 12.5px; color: var(--tinta-3); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legenda i.solida { background: var(--acento); }
.legenda i.hachura { background: var(--acento-borda); }
.legenda i.atraso { background: var(--vencido); }

/* ================================================================= diálogos */

.veu {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 21, 28, .5);
  display: grid; place-items: center;
  padding: 20px;
}
.dialogo {
  background: var(--superficie);
  border-radius: 10px;
  box-shadow: var(--sombra-3);
  width: min(520px, 100%);
  max-height: 90dvh;
  overflow: auto;
}
.dialogo header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linha); }
.dialogo header button { margin-left: auto; }
.dialogo .corpo { padding: 20px; display: grid; gap: 14px; }
.dialogo footer { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--linha); }

.popover {
  position: absolute; z-index: 50;
  background: var(--superficie);
  border-radius: 10px;
  box-shadow: var(--sombra-2);
  min-width: 220px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.popover a, .popover button {
  height: 34px; padding: 0 10px; border: 0; background: none;
  border-radius: 6px; font-size: 13.5px; text-align: left;
  color: var(--tinta); justify-content: flex-start; text-decoration: none;
  display: flex; align-items: center; gap: 8px;
}
.popover a:hover, .popover button:hover { background: var(--superficie-2); text-decoration: none; }

/* ================================================================= avisos */

.recado {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 16px;
  border-radius: 8px;
  font-size: 13.5px;
  border: 1px solid var(--linha);
  background: var(--superficie);
}
.recado.erro { background: var(--vencido-fundo); border-color: var(--vencido-borda); color: var(--vencido); }
.recado.ok   { background: var(--acento-suave); border-color: var(--acento-borda); color: var(--acento); }
.aviso {
  background: var(--hoje-fundo); border: 1px solid var(--hoje-borda); color: var(--hoje);
  padding: 10px 14px; border-radius: 8px; font-size: 13.5px; margin: 8px 0;
}
.conflito { color: var(--hoje); font-size: 12.5px; display: block; }

/* ================================================================= vazio e esqueleto */

.vazio { padding: 40px 20px; text-align: center; color: var(--tinta-2); }
.vazio svg { color: var(--tinta-3); margin-bottom: 12px; }
.vazio h3 { margin-bottom: 6px; }
.vazio p { margin: 0 auto 14px; font-size: 13px; max-width: 42ch; }

.esqueleto { height: 12px; border-radius: 4px; background: #eef1f5; display: block; }
@keyframes brilho { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }
.esqueleto { animation: brilho 1.2s ease-in-out infinite; }

/* ================================================================= ficha */

.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.ficha > * { min-width: 0; }
.ficha .rotulo { margin-bottom: 2px; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin: 16px 0; overflow-x: auto; scrollbar-width: thin; }
.abas button { flex: none; }
.abas button {
  height: 40px; border: 0; background: none; border-radius: 0;
  border-bottom: 2px solid transparent;
  color: var(--tinta-2); font: 500 14px/1 var(--texto);
}
.abas button:hover { background: var(--superficie-2); border-bottom-color: var(--linha-forte); }
.abas button.ativa { color: var(--acento); border-bottom-color: var(--acento); }

.identificacao { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.monograma {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--acento-suave); color: var(--acento);
  display: grid; place-items: center;
  font: 600 14px/1 var(--texto); flex: none;
}

/* Linha do tempo */
.tempo { position: relative; padding: 4px 0; }
.tempo .dia {
  font: 600 11.5px/16px var(--texto); letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-3); padding: 12px 16px 6px;
  position: sticky; top: 0; background: var(--superficie); z-index: 1;
}
.tempo .evento {
  display: grid; grid-template-columns: 56px 16px 1fr auto;
  gap: 10px; align-items: start;
  padding: 8px 16px; min-height: 40px;
  position: relative;
}
.tempo .evento .hora { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.tempo .evento .no {
  width: 8px; height: 8px; border-radius: 999px; background: var(--linha-forte);
  margin: 6px 0 0 4px;
}
.tempo .evento.acento .no { background: var(--acento); }
.tempo .evento.vencido .no { background: var(--vencido); }
.tempo .evento .quem { color: var(--tinta-3); font-size: 13px; }
.tempo .evento .detalhe { color: var(--tinta-2); font-size: 13px; }

/* ================================================================= misc */

.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.duas-colunas > * { min-width: 0; }
.duas-colunas-iguais { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; margin-top: 16px; }
.duas-colunas-iguais > * { min-width: 0; }
.pilha { display: grid; gap: 16px; min-width: 0; }
.pilha > * { min-width: 0; }
.paginacao { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--linha); font-size: 13px; }
.paginacao .contagem { margin-left: auto; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.escondido { display: none !important; }

.arvore, .arvore ul { list-style: none; padding-left: 16px; margin: 0; }
.arvore { padding-left: 0; }
.arvore ul { border-left: 1px solid var(--linha); }
.no-classificacao { display: flex; align-items: center; gap: 10px; min-height: 34px; flex-wrap: wrap; }


@media (max-width: 1279px) {
  /* Abaixo desta largura a barra nasce recolhida; o botão continua mandando. */
  body:not(.barra-expandida) { --barra-largura: 64px; }
  body:not(.barra-expandida) .lateral .marca .logo { display: none; }
  body:not(.barra-expandida) .lateral .marca .simbolo.so-recolhida { display: grid; }
  body:not(.barra-expandida) .lateral a.item { justify-content: center; padding: 0; }
  body:not(.barra-expandida) .lateral a.item span:not(.selo),
  body:not(.barra-expandida) .lateral .rodape .quem { display: none; }
  body:not(.barra-expandida) .lateral .rodape { justify-content: center; }
  body.barra-recolhida { --barra-largura: 64px; }
  body.barra-recolhida .lateral .marca .logo { display: none; }
  body.barra-recolhida .lateral .marca .simbolo.so-recolhida { display: grid; }
  body.barra-recolhida .lateral a.item { justify-content: center; padding: 0; }
  body.barra-recolhida .lateral a.item span:not(.selo),
  body.barra-recolhida .lateral .rodape .quem { display: none; }
  body.barra-recolhida .lateral .rodape { justify-content: center; }
  body:not(.barra-expandida) .lateral a.item { justify-content: center; padding: 0; }
}
@media (max-width: 1023px) {
  .aplicacao { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; left: 0; top: 0; z-index: 70; width: 280px;
    transform: translateX(-100%); transition: transform 160ms;
  }
  body.menu-aberto .lateral { transform: none; }
  .topo .hamburguer { display: inline-flex; }
  .duas-colunas { grid-template-columns: 1fr; }
  main { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .lateral, .topo, .paginacao, .abas, button, .fluxo-colunas, .legenda { display: none !important; }
  .aplicacao { grid-template-columns: 1fr; }
  body { background: #fff; font-size: 11pt; }
  main { padding: 0; max-width: none; }
  .bloco, .cartao { border: 0; box-shadow: none; }
  thead th { position: static; }
  tbody tr.condicao-vencido { background: #fff; }
  tbody tr.condicao-vencido td:first-child::before { content: "! "; font-weight: 700; }
  .rodape-total { position: static; border-top: 1pt solid #000; }
}

.texto-corrido { font-size: 13px; line-height: 1.55; color: var(--tinta-2); white-space: pre-wrap; margin: 0; }
.elo { color: var(--acento); text-decoration: none; font-weight: 500; }
.elo:hover { text-decoration: underline; }

/* ================================================================= tela de entrada

   Duas colunas: a marca ocupa a esquerda sobre a fotografia, o acesso fica à
   direita num cartão claro. O contrato é o mesmo do resto do sistema — cromo
   escuro, dado claro — e aqui ele separa "quem somos" de "o que você faz agora".

   A fotografia entra em /entrada.jpg. Se o arquivo não existir, o gradiente
   embaixo continua sozinho e a tela não quebra: nada aqui depende da imagem. */

body.tela-de-entrada {
  background: var(--barra);
  color: #fff;
}

.entrada {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  padding: 48px 56px;
  position: relative;
  isolation: isolate;
}

/* Duas camadas atrás de tudo: a foto esmaecida e, sobre ela, um brilho frio que
   segura o contraste do texto branco onde a foto é clara demais. */
.entrada::before,
.entrada::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.entrada::before {
  background-image: url('/entrada.jpg');
  background-size: cover;
  background-position: center;
  opacity: .2;
}
.entrada::after {
  /* Preto por baixo, um só ponto de azul da marca no canto do cartão. Com o
     shell em Process Black, a entrada acompanha — e o azul fica sendo a única
     cor da tela, que é o que "clean" quer dizer aqui. */
  background-image:
    radial-gradient(65rem 45rem at 88% 78%, rgba(36, 33, 255, .30), transparent 58%),
    linear-gradient(180deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .92));
}

/* --- coluna da marca */
.entrada-marca {
  display: grid;
  justify-items: center;
  gap: 28px;
  text-align: center;
  padding: 0 24px;
}
.logo-grande { width: min(440px, 90%); height: auto; color: #fff; }
.entrada-frase {
  margin: 0;
  max-width: 26ch;
  font: 600 26px/1.35 var(--texto);
  color: #fff;
  text-wrap: balance;
}

/* --- coluna do acesso */
.entrada-acesso { display: grid; justify-items: center; gap: 18px; }

.cartao-entrada {
  width: 100%;
  max-width: 400px;
  background: var(--superficie);
  color: var(--tinta);
  border-radius: 14px;
  box-shadow: var(--sombra-3);
  padding: 32px 32px 24px;
  display: grid;
  gap: 20px;
}

.marca-entrada { display: grid; gap: 4px; }
.marca-entrada h1 { font: 600 22px/1.2 var(--texto); margin: 0; }
.marca-entrada .produto { margin: 0; font-size: 13px; color: var(--tinta-3); }

.cartao-entrada .campos { display: grid; gap: 14px; }
.cartao-entrada .campo { gap: 6px; }
.cartao-entrada input { width: 100%; height: 42px; font-size: 15px; }
.cartao-entrada .rotulo { font-size: 11.5px; }

button.bloco { width: 100%; height: 42px; justify-content: center; font-size: 14px; }

/* A ajuda fica recolhida: quem já sabe o e-mail não precisa dela ocupando a
   tela, e quem não sabe encontra em um clique. */
.ajuda-papeis { border-top: 1px solid var(--linha); padding-top: 14px; }
.ajuda-papeis summary {
  cursor: pointer; font: 500 13px/1.4 var(--texto); color: var(--acento); list-style: none;
}
.ajuda-papeis summary::-webkit-details-marker { display: none; }
.ajuda-papeis summary::before { content: '+ '; font-weight: 700; }
.ajuda-papeis[open] summary::before { content: '– '; }
.ajuda-papeis summary:hover { text-decoration: underline; }
.ajuda-papeis ul { margin: 12px 0 8px; padding-left: 18px; display: grid; gap: 6px; }
.ajuda-papeis li, .ajuda-papeis p { font-size: 13px; color: var(--tinta-2); line-height: 1.5; margin: 0; }
.ajuda-papeis p { margin-top: 8px; }

/* Fora do cartão e em texto do shell: informa sem disputar com a marca. */
.nota-entrada {
  max-width: 400px;
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--barra-texto);
}

.selo-ambiente {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid var(--barra-linha);
  color: #fff;
  font: 600 11px/1.6 var(--texto);
  letter-spacing: .04em;
  vertical-align: 1px;
}

.tela-de-entrada #recado.recado { margin: 0; }

/* Abaixo de 900px a marca vira cabeçalho: duas colunas espremidas leem pior que
   uma coluna com hierarquia. */
@media (max-width: 900px) {
  .entrada { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 20px; align-content: center; }
  .logo-grande { width: min(320px, 78%); }
  .entrada-frase { font-size: 20px; }
}
@media (max-width: 420px) {
  .cartao-entrada { padding: 26px 20px 20px; }
  .entrada-frase { font-size: 18px; }
}


/* ============================================================== resumo no diálogo

   O que foi preenchido quando o título nasceu, mostrado na hora de decidir.
   Marcar como pago é irreversível na prática — o dinheiro já saiu — e a
   confirmação dizia só o nome do fornecedor. */

.resumo-titulo {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px; margin: 0 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--linha); border-radius: 8px;
  background: var(--superficie-2);
  font-size: 13px;
}
.resumo-titulo dt {
  font: 600 11px/1.5 var(--texto); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3);
}
.resumo-titulo dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }

/* Em lote, tabela: quinze fichas empilhadas não são conferência, são rolagem. */
.resumo-lote {
  margin-bottom: 4px;
  border: 1px solid var(--linha); border-radius: 8px; overflow: hidden;
}
.resumo-lote table { margin: 0; font-size: 12.5px; }
.resumo-lote th, .resumo-lote td { padding: 6px 10px; }
.resumo-lote .contagem {
  display: block; padding: 8px 10px;
  border-top: 1px solid var(--linha); background: var(--superficie-2);
}
/* O diálogo é estreito: a tabela do lote rola nela mesma, o diálogo não. */
.dialogo .resumo-lote { overflow-x: auto; }

/* ============================================================== reportar erro

   A faixa aparece quando a tela acusa um erro de JavaScript. Uma vez por
   quebra: alarme repetido vira ruído e a pessoa aprende a fechar sem ler. */

.faixa-erro {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; max-width: min(560px, calc(100vw - 32px));
  border: 1px solid var(--linha); border-radius: 10px;
  background: var(--superficie); color: var(--tinta);
  box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
}
.faixa-erro span { flex: 1; font-size: 13.5px; }

.dialogo.largo { width: min(880px, calc(100vw - 32px)); }
.dialogo.largo .corpo { max-height: 70vh; overflow-y: auto; }

.bloco-codigo {
  margin: 0; padding: 12px 14px;
  border: 1px solid var(--linha); border-radius: 8px;
  background: var(--superficie-2);
  font: 12px/1.5 var(--mono, ui-monospace, monospace);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* A trilha é lida de cima para baixo, e o passo mais recente é o que interessa
   — por isso numerada, e não como parágrafo corrido. */
.trilha-acoes {
  margin: 0; padding-left: 22px;
  font: 12.5px/1.7 var(--mono, ui-monospace, monospace);
  color: var(--tinta-2);
}
.trilha-acoes li { overflow-wrap: anywhere; }

.print-erro {
  max-width: 100%; border: 1px solid var(--linha); border-radius: 8px;
}

/* O botão de reportar erro é o único da barra que precisa ser achado sob
   pressão — alguém acabou de ver algo quebrar. Herdando `--barra-texto` ele
   ficava cinza sobre preto e sumia. Amarelo de alerta, o mesmo tom do selo de
   ambiente que já existe ali do lado, para não inventar uma cor nova. */
.topo #reportar-erro,
.topo button[aria-label="Reportar um erro"] {
  color: #f0c07a;
  background: rgba(161, 92, 0, .18);
  border-color: rgba(240, 192, 122, .28);
}
.topo #reportar-erro:hover,
.topo button[aria-label="Reportar um erro"]:hover {
  color: #1a1200;
  background: #f0c07a;
  border-color: #f0c07a;
}