/* ─── Portal do Cliente — BUK Contabilidade ─────────────────────────────────
   Segue o design do ecossistema: teal #0B4C5F como cor de marca, laranja
   #f39c12 como destaque. A tabela usa o padrão tabela-título-conteúdo: em tela
   estreita o cabeçalho some e cada linha vira card com o rótulo embutido
   (`data-label`), como na lista de editais do Licita.
   ------------------------------------------------------------------------- */

:root {
  --teal: #0B4C5F;
  --teal-claro: #12708b;
  --laranja: #f39c12;
  /* A tinta que se lê sobre o laranja. Branco sobre #f39c12 dá 2,19:1, abaixo do
     mínimo de 4,5:1; este marrom dá 6,57:1, e 7,45:1 no hover, que clareia o fundo.
     O valor não é novo: era o do `.atalho.forte` desde sempre, e virou token quando o
     botão passou a usá-lo também, em 17/09/2026. Escurecer o laranja até o branco
     passar exigiria #a0670c, que já não é o laranja da casa. */
  --laranja-tinta: #3a2600;
  --texto: #22323a;
  --suave: #6b7c85;
  --linha: #dfe6ea;
  --fundo: #f4f6f7;
  --branco: #fff;

  /* ── O TEAL COMO TINTA, SEPARADO DO TEAL COMO FUNDO (21/08/2026) ───────────
     A mesma separação que o núcleo passou a fazer, e pelo mesmo motivo medido:
     no papel escuro, título e nome de azulejo escritos em `--teal` ficam com
     contraste 1,4:1 — invisíveis. `--teal` continua sendo a cor da marca (fundo
     de barra, botão cheio, borda); `--teal-tinta` é a mesma cor quando ela é
     TEXTO, e `--elo` é o teal médio dos links. */
  --teal-tinta: #0B4C5F;
  --elo: #12708b;

  /* ── A MOLDURA DO GRÁFICO (`lib/grafico.js`) ────────────────────────────────
     Texto, grade, eixo e o papel do halo. As TRÊS CORES DE SÉRIE não estão aqui
     e não devem estar: elas passaram nos seis testes do validador contra o
     fundo do cartão, e reescolhê-las por tema desfaz a única parte daquela
     paleta que não é opinião. Ver o cabeçalho de `lib/grafico.js`. */
  --g-tinta: #22323a;
  --g-suave: #6b7c85;
  --g-mudo: #8b9aa2;
  --g-grade: #e8edef;
  --g-eixo: #cfd8dc;
  --g-papel: #fff;

  /* ── OS TONS QUE ESTAVAM CRAVADOS (21/08/2026) ───────────────────────────
     Nada aqui é cor nova: são os mesmos valores que já apareciam soltos pela
     folha, agora com nome. Ganharam nome porque o TEMA ESCURO precisa de um
     lugar onde trocá-los de uma vez — e porque um `var(--fraco)` escrito em seis
     regras diferentes é seis chances de a sétima sair um tom fora.

     ⚠ `--branco` PASSA A QUERER DIZER "PAPEL", não "branco". No escuro ele é
     #16262e. Onde a folha desenha texto SOBRE O TEAL (a barra, o botão cheio,
     o hero) o valor continua `#fff` cravado, e tem de continuar: aquele branco
     é contraste contra o teal da marca, que não muda com o tema. */
  --fraco: var(--fraco);      /* fio interno de lista — mais leve que --linha */
  --baixo: #eef2f4;      /* faixa/cabeçalho de tabela */
  --sutil: #fbfcfd;      /* alternância quase imperceptível */
  --tl-fundo: #eef7f9;   /* o teal diluído, para o selecionado */

  /* Os três estados. Cada um é um trio fundo/linha/tinta, e eles vêm em trio
     de propósito: fundo trocado sem a tinta correspondente é como nasce o
     aviso ilegível no tema escuro. */
  --al-fundo: #fff8ec; --al-linha: #f3dcb4; --al-tinta: #8a5108;
  --er-fundo: #fdecea; --er-linha: #f3cdc6; --er-tinta: #b4341f;
  --ok-fundo: #e8f4ed; --ok-linha: #cbe5d6; --ok-tinta: #2e7d4f;
}

/* ── O TEMA ESCURO DO PORTAL E DA BASE ───────────────────────────────────────
   Quem liga o atributo `data-nu-tema` no <html> é o núcleo (ver a seção 9 de
   `nucleo/lib/ui/ui.css`), a partir da preferência da pessoa. Aqui só se
   redefine o MESMO vocabulário — nenhum nome novo, nenhuma regra nova.

   ⚠ ESTA FOLHA CARREGA DEPOIS DA DO NÚCLEO, DE PROPÓSITO (é o contrato: o
   produto sobrescreve a moldura sem `!important`). Foi por isso que a troca de
   tipografia perdeu para cinco arquivos em 21/08/2026 — e é por isso que o tema
   escuro do Portal PRECISA estar aqui: os tokens do núcleo não alcançam
   `--fundo`, `--texto` e `--linha`, que são desta folha e só dela. */
html[data-nu-tema="escuro"] {
  --teal-claro: #4f8ea3;
  --texto: #e4eef1;
  --suave: #8ba1aa;
  --linha: #243a44;
  --fundo: #0e1b21;
  --branco: #16262e;
  --teal-tinta: #7fb3c1;
  --elo: #8ec7d8;

  /* ⚠ A GRADE ESCURECE MAIS DO QUE O OLHO ESPERA. No claro ela é um cinza a um
     passo do branco; a tradução literal seria um cinza a um passo do preto, que
     no papel escuro fica MAIS visível que a linha do dado — grade nenhuma é
     melhor que grade gritando. */
  --g-tinta: #e4eef1;
  --g-suave: #8ba1aa;
  --g-mudo: #93a8b1;
  --g-grade: #223640;
  --g-eixo: #33505c;
  --g-papel: #16262e;

  --dica-fundo: #2c454f; --dica-tinta: #eaf3f6; --dica-linha: #47646f;

  --fraco: #1d3039;
  --baixo: #1b323c;
  --sutil: #192b33;
  --tl-fundo: #1b323c;

  --al-fundo: #2e2412; --al-linha: #5a4620; --al-tinta: #f3c07a;
  --er-fundo: #33201d; --er-linha: #5e2f28; --er-tinta: #ff8f80;
  --ok-fundo: #14302a; --ok-linha: #245043; --ok-tinta: #4cc79b;
}

* { box-sizing: border-box; }
/* ⚠ A BARRA DE ROLAGEM RESERVA O LUGAR DELA SEMPRE (08/09/2026). Sem isto, um
   mês com poucas notas cabe na tela e um mês com muitas não: a barra aparece,
   come 15px de largura e desloca a página inteira — cabeçalho, cartões e
   tabela — a cada troca de mês. É a última fonte de movimento depois de as
   colunas terem largura declarada, e a mais difícil de ver, porque o culpado
   não está em nada que se possa medir na tabela. */
html { scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  /* A pilha vem do núcleo (--nu-fonte). A reserva é a de sempre, para o dia
     em que esta folha carregar sem a do núcleo. */
  font-family: var(--nu-fonte, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  /* ⚠ A DENSIDADE VEM POR VARIÁVEL PELO MESMO MOTIVO DA FONTE. Esta folha
     carrega DEPOIS da do núcleo; um `font-size: 14px` cravado aqui venceria o
     `var(--nu-fs)` da moldura e a lente "condensada" mudaria a tabela e não o
     texto — meia densidade, que é pior que nenhuma. A reserva é o valor de
     sempre, para o dia em que esta folha carregar sozinha. */
  font-size: var(--nu-fs, 14px);
  line-height: var(--nu-lh, 1.5);
}

/* ─── Topo ───────────────────────────────────────────────────────────────── */
.topo {
  background: var(--teal); color: #fff; padding: 10px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.marca { font-weight: 700; letter-spacing: .5px; }
.marca span { font-weight: 400; opacity: .85; }
.quem { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.quem select {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px; padding: 5px 8px; font-size: 13px;
}
.quem select option {
  /* O menu aberto de um <select> é desenhado pelo SISTEMA, não pelo CSS da
     página: no claro ele nasce com fundo branco, e sem esta linha as opções
     herdariam o branco do seletor sobre o teal e sumiriam. No escuro quem vira
     o fundo do menu é `color-scheme: dark` (núcleo, seção 9) — daí o valor sair
     de `--texto` e não de um cinza cravado, que ali ficaria preto no preto. */
  color: var(--texto);
  background: var(--branco);
}
.empresa-nome { font-weight: 600; }
.pessoa { opacity: .85; font-size: 13px; }
.sair {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5);
  border-radius: 4px; padding: 5px 12px; cursor: pointer; font-size: 13px;
}
.sair:hover { background: rgba(255,255,255,.14); }

/* ─── Menu de seções (fica logo abaixo do topo) ──────────────────────────── */
.secoes {
  background: var(--teal-claro); display: flex; gap: 2px; padding: 0 12px; flex-wrap: wrap;
}
.secao {
  color: #fff; text-decoration: none; padding: 9px 14px; font-size: 13.5px;
  opacity: .85; border-bottom: 3px solid transparent;
}
.secao:hover { opacity: 1; background: rgba(255,255,255,.10); }
.secao.ativa { opacity: 1; font-weight: 600; border-bottom-color: var(--laranja); }

/* ⚠ O RESPIRO DO MIOLO RESPONDE À LENTE. A moldura do núcleo já responde
   sozinha (`.nu_conteudo`), mas o Portal e a Base desenham o próprio `main` —
   sem esta linha, escolher "condensada" apertaria a tabela e deixaria 18px de
   margem em volta dela, que é o resultado meia-boca de mexer só num lado. */
main { max-width: 1100px; margin: 0 auto; padding: var(--pd-main, 18px); }
h1 { font-size: 20px; color: var(--teal-tinta); margin: 6px 0 14px; }

/* ─── Barra de abas + período ────────────────────────────────────────────── */
.barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.abas { display: flex; gap: 4px; flex-wrap: wrap; }
.aba {
  padding: 8px 14px; border-radius: 4px 4px 0 0; text-decoration: none;
  color: var(--teal-tinta); background: var(--baixo); font-weight: 600;
}
.aba.ativa { background: var(--branco); box-shadow: inset 0 -3px 0 var(--laranja); }
.periodo { display: flex; align-items: center; gap: 8px; }
.periodo label { color: var(--suave); font-size: 13px; }
.periodo select { padding: 6px 10px; border: 1px solid var(--linha); border-radius: 4px; background: var(--branco); color: var(--texto); }

/* A barra de abas da seção Contábil fica acima da barra de período, e não
   dentro dela: são cinco abas, e num celular elas ocupam a linha inteira. */
.abas { margin-bottom: 14px; }

/* ─── Painel — a porta de entrada ─────────────────────────────────────────────
   A tela mais "desenhada" do Portal, e a única que abre sem o cliente ter
   pedido um relatório. As regras que o resto da folha já segue continuam
   valendo aqui sem exceção: paleta de gráfico validada contra o BRANCO DO
   CARTÃO (#1596b8 · #eb6834 · #4a3aa7), cor nunca sozinha como canal de
   informação, e nada de verde/vermelho dizendo se a empresa vai bem — esse é
   um juízo que o BUK Contábil se recusa a assinar e que não vai nascer no CSS.
   -------------------------------------------------------------------------- */

.hero {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-claro) 100%);
  color: #fff; border-radius: 10px; padding: 20px 24px; margin-bottom: 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
}
.hero-ola { margin: 0 0 2px; font-size: 13.5px; opacity: .85; }
.hero-empresa { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; }
.hero-doc { margin: 4px 0 0; font-size: 12.5px; opacity: .8; font-variant-numeric: tabular-nums; }
.hero-atalhos { display: flex; gap: 8px; flex-wrap: wrap; }
.atalho {
  display: inline-block; padding: 9px 16px; border-radius: 6px; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4);
}
.atalho:hover { background: rgba(255,255,255,.26); }
/* O atalho que ESCREVE é o laranja da casa — o mesmo tratamento do botão de
   emitir, pelo mesmo motivo: é o único clique daqui do qual não se volta. */
.atalho.forte { background: var(--laranja); border-color: var(--laranja); color: var(--laranja-tinta); }
.atalho.forte:hover { filter: brightness(1.08); background: var(--laranja); }

.secao-tit {
  font-size: 15px; color: var(--teal-tinta); margin: 28px 0 12px; font-weight: 700;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.secao-tit .secao-ano {
  font-size: 12px; font-weight: 400; color: var(--suave); text-transform: none; letter-spacing: 0;
}
.secao-sub { font-size: 14px; color: var(--teal-tinta); margin: 22px 0 10px; }

/* Os cartões de topo. `auto-fit` com piso de 210px: quatro em tela larga, dois
   no tablet, um no celular — sem media query e sem cartão espremido. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.kpi {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 8px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 5px;
}
/* O cartão do mês de referência é o assunto da tela: ganha a barra da marca no
   topo, e só ele. Destaque que se dá a tudo não destaca nada. */
.kpi.destaque-kpi { border-top: 3px solid var(--laranja); }
.kpi-rot { color: var(--suave); font-size: 12px; line-height: 1.35; }
/* Figuras PROPORCIONAIS no número grande: `tabular-nums` deixa o 1 frouxo em
   corpo de destaque. Tabular fica nas tabelas e nos rótulos de eixo. */
.kpi-cifra { font-size: 25px; font-weight: 700; color: var(--teal-tinta); line-height: 1.15; }
.kpi-pe { color: var(--suave); font-size: 11.5px; line-height: 1.45; }
.destaque .kpi-pe { margin-top: 4px; }

/* O aviso que separa documento fiscal de receita contábil. Ele é a única coisa
   da tela que precisa ser lida ANTES dos gráficos: os dois números aparecem na
   mesma página, ficam perto e não são a mesma coisa. */
.nota-forte {
  background: var(--al-fundo); border: 1px solid var(--al-linha); border-left: 4px solid var(--laranja);
  border-radius: 6px; padding: 12px 14px; margin: 14px 0 4px;
  font-size: 12.5px; line-height: 1.6; color: var(--texto);
}

/* Dois quadros lado a lado em tela larga; empilhados abaixo de 900px. */
/* ⚠ `minmax(0, 1fr)` e não `1fr`: o quadro da direita contém um SVG com
   `min-width: 520px`, e `1fr` respeita o conteúdo mínimo — as duas colunas
   saíam com larguras diferentes (492px e 558px, medidas) e o quadro da esquerda
   encolhia para acomodar um gráfico que já sabe rolar sozinho dentro de
   `.rolagem`. Com o piso zerado, as colunas ficam iguais e o excesso rola onde
   deve rolar. */
.duas-gr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.duas-gr .cartao-gr { margin-bottom: 0; }

/* A rosca e a legenda-com-valor. Em tela estreita a legenda desce; em tela larga
   ela fica ao lado, que é onde se lê fatia e número juntos sem varredura. */
.rosca-caixa { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
/* ⚠ `svg.gr.rosca` e não `.rosca`: a regra genérica `.gr` (bloco dos Índices,
   mais abaixo nesta folha) impõe `width:100%; min-width:520px`, que serve a
   gráfico com eixo e estouraria a rosca para meia tela. Empate de
   especificidade entre duas classes resolve pela ORDEM, e `.gr` vem depois —
   daí os dois seletores encadeados. */
svg.gr.rosca { flex: 0 0 auto; width: 200px; height: 200px; min-width: 0; }
.legenda-v { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; min-width: 180px; }
.legenda-v li {
  display: grid; grid-template-columns: 12px 1fr auto; gap: 4px 8px;
  align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--fraco);
}
.legenda-v li:last-child { border-bottom: 0; }
.legenda-v i { width: 10px; height: 10px; border-radius: 2px; }
.legenda-v .lv-nome { font-size: 12.5px; color: var(--texto); }
.legenda-v .lv-val { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.legenda-v .lv-pct { grid-column: 3; font-size: 11.5px; color: var(--suave); font-variant-numeric: tabular-nums; }

svg.gr .fatia { transition: opacity .12s; }
svg.gr:hover .fatia { opacity: .6; }
svg.gr .fatia:hover { opacity: 1; }

/* ─── Ranque de maiores clientes ─────────────────────────────────────────────
   Barras horizontais em CSS, e não em SVG como o resto: aqui a categoria é um
   NOME DE EMPRESA de comprimento imprevisível, e texto que reflui é justamente
   o que o SVG não faz. A geometria (a largura de cada barra, proporcional ao
   maior cliente) vem calculada do servidor, como nos demais gráficos.

   UMA série, UMA cor — a mesma regra da sparkline. O slot 1 da paleta validada
   (#1596b8), nunca uma cor por linha: cor aqui seguiria a POSIÇÃO no ranking,
   que muda a cada ano, e cor tem de seguir a entidade. */
.ranque { list-style: none; margin: 4px 0 0; padding: 0; }
.ranque li {
  display: grid; align-items: center; gap: 2px 10px;
  grid-template-columns: 20px minmax(120px, 1.6fr) minmax(60px, 2fr) auto 46px;
  grid-template-areas: 'pos nome barra val pct' '. nome qtd qtd qtd';
  padding: 9px 0; border-bottom: 1px solid var(--fraco);
}
.ranque li:last-child { border-bottom: 0; }
.rq-pos { grid-area: pos; color: var(--suave); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.rq-nome { grid-area: nome; font-size: 13px; line-height: 1.35; }
/* O CNPJ e o "n estabelecimentos" são contexto, não o dado: descem uma linha e
   ficam menores, como o rótulo embutido da tabela-título-conteúdo. */
.rq-obs { display: block; color: var(--suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.rq-barra { grid-area: barra; background: var(--baixo); border-radius: 3px; height: 12px; overflow: hidden; }
.rq-barra i { display: block; height: 100%; background: #1596b8; border-radius: 3px; }
.rq-val { grid-area: val; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rq-pct { grid-area: pct; font-size: 12.5px; color: var(--teal-tinta); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rq-qtd { grid-area: qtd; color: var(--suave); font-size: 11px; text-align: right; }
/* A linha do resto não compete com os nomeados, mas continua legível — ela é o
   que faz as partes somarem o total. */
.ranque .rq-outros .rq-nome, .ranque .rq-outros .rq-val { color: var(--suave); font-style: italic; }
.ranque .rq-outros .rq-barra i { background: var(--teal-claro); opacity: .55; }
.ranque .rq-outros .rq-pct { color: var(--suave); font-weight: 400; }

/* Em tela estreita a barra sai da linha do nome e ocupa a largura inteira:
   espremida entre nome e valor num celular, ela viraria um traço sem leitura. */
@media (max-width: 620px) {
  .ranque li {
    grid-template-columns: 20px 1fr auto 46px;
    grid-template-areas: 'pos nome val pct' '. barra barra barra' '. qtd qtd qtd';
    gap: 4px 10px;
  }
  .rq-qtd { text-align: left; }
}

.mais { font-size: 12.5px; color: var(--suave); margin: 12px 0 0; line-height: 1.6; }

@media (max-width: 900px) {
  .duas-gr { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero { padding: 16px 18px; }
  .hero-empresa { font-size: 19px; }
  .hero-atalhos { width: 100%; }
  .atalho { flex: 1 1 auto; text-align: center; }
}

/* ─── Tabela de contas ───────────────────────────────────────────────────── */
.contas { width: 100%; border-collapse: collapse; background: var(--branco); border: 1px solid var(--linha); }
.contas th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--suave); background: var(--baixo); padding: 8px 10px; border-bottom: 1px solid var(--linha);
  position: sticky; top: 0;
}
.contas td { padding: 6px 10px; border-bottom: 1px solid var(--fraco); }
.contas .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.contas .forte { font-weight: 600; }
.contas .cod { color: var(--suave); font-family: ui-monospace, Consolas, monospace; font-size: 12px; margin-right: 6px; }
.contas tr.sint { background: var(--sutil); font-weight: 600; }
.contas tr.p1 td:first-child { padding-left: 26px; }
.contas tr.p2 td:first-child { padding-left: 44px; }
.contas tr.p3 td:first-child { padding-left: 62px; }
.contas tr.p4 td:first-child { padding-left: 80px; }
.contas tfoot td { border-top: 2px solid var(--linha); font-weight: 700; }

/* Cabecalho que ordena. O indicador e um triangulo desenhado em CSS, e nao um
   caractere de seta: o desenho nao entra no texto que a pessoa copia da tela. */
.contas th.ord { cursor: pointer; user-select: none; }
.contas th.ord:hover, .contas th.ord:focus-visible { color: var(--teal-tinta); background: var(--sutil); }
.contas th.ord::after {
  content: ''; display: inline-block; width: 0; height: 0; margin-left: 6px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid transparent; vertical-align: middle;
}
.contas th.ord[aria-sort="descending"]::after { border-top-color: var(--teal-tinta); }
.contas th.ord[aria-sort="ascending"]::after {
  border-top: 0; border-bottom: 5px solid var(--teal-tinta);
}

/* A ordenacao por clique no titulo nao existe na tela estreita, onde o cabecalho
   some e cada linha vira card. Por isso o mesmo comando aparece ali como lista. */
.ord-movel { display: none; margin: 10px 0 0; font-size: 13px; color: var(--suave); }
.ord-movel select { margin-left: 6px; max-width: 100%; padding: 5px 6px; font-size: 13px; }
.contas tr.resultado td { border-top: 2px solid var(--linha); font-weight: 700; color: var(--teal-tinta); }

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duas h2 { font-size: 14px; color: var(--teal-tinta); display: flex; justify-content: space-between; align-items: baseline; }
.duas .tot { font-variant-numeric: tabular-nums; }

.resumo { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.resumo div {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 6px;
  padding: 10px 14px; min-width: 160px;
}
.resumo span { display: block; color: var(--suave); font-size: 12px; }
.resumo b { font-size: 18px; font-variant-numeric: tabular-nums; }
.resumo .destaque { border-color: var(--laranja); }
.resumo .destaque b { color: var(--teal-tinta); }

/* A abertura por espécie: as duas parcelas do destaque acima. Cartões menores e
   sem borda acentuada de propósito — elas explicam o número grande, não
   competem com ele. */
.resumo.abertura { margin-top: 8px; }
.resumo.abertura div { min-width: 150px; padding: 8px 12px; background: var(--fundo, transparent); }
.resumo.abertura b { font-size: 15px; }
.resumo.abertura em { display: block; font-style: normal; color: var(--suave); font-size: 11.5px; margin-top: 2px; }
.resumo.abertura span { display: flex; align-items: center; gap: 6px; }

/* O mesmo ponto da legenda do gráfico. A cor vem do atributo `style`, porque
   quem escolhe a cor da série é lib/grafico.js (SERIES) e não o CSS — cravá-la
   aqui criaria uma segunda paleta para envelhecer sozinha. */
.ponto-serie {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  flex: 0 0 auto;
}
.tend-legenda {
  margin-right: auto; display: flex; align-items: center; gap: 5px;
  color: var(--suave); font-size: 12px;
}
.tend-legenda .ponto-serie { margin-left: 8px; }

.prova { margin-top: 10px; font-size: 13px; }
.prova.ok { color: var(--ok-tinta); }
.prova.nok { color: var(--er-tinta); font-weight: 600; }
.rodape-fonte { color: var(--suave); font-size: 12px; margin-top: 18px; }

.aviso { background: var(--branco); border: 1px solid var(--linha); border-left: 4px solid var(--teal); padding: 12px 14px; border-radius: 4px; }
.aviso.alerta { border-left-color: var(--laranja); }

/* ─── Faixa de meses, com a linha de tendência (f7e5+) ───────────────────────
   O SVG (`.tend-svg`, gerado em lib/grafico.js » faixaMeses) e a faixa de
   cartões (`.meses`) usam a MESMA largura fixa por mês (84px, ver `larguraCard`
   no gerador) — é assim que o ponto da linha cai exatamente no centro do
   cartão sem nenhuma conta no navegador. Em tela estreita as duas rolam juntas
   dentro de `.tend-rolagem`, como a faixa de um extrato de cartão. */
.barra .sub { color: var(--suave); font-size: 13px; }

.tend-cartao {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 8px;
  padding: 16px 16px 14px; margin: 14px 0;
}
.tend-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.tend-titulo { font-size: 14px; font-weight: 600; color: var(--texto); }
.tend-ano {
  color: var(--elo); text-decoration: none; font-size: 12.5px; padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.tend-ano b { font-variant-numeric: tabular-nums; margin-left: 4px; }
.tend-ano:hover { color: var(--teal-tinta); }
.tend-ano.ativo, .tend-ano.ativa { color: var(--teal-tinta); font-weight: 600; border-bottom-color: var(--laranja); }

.tend-rolagem { overflow-x: auto; }
.tend-corpo { width: max-content; min-width: 100%; }
.tend-svg { display: block; }

/* Sem gap nem margem: a largura de CADA cartão precisa bater, em pixel, com o
   `larguraCard` usado para posicionar a linha em lib/grafico.js. Um gap aqui
   desalinharia o ponto do centro do cartão a partir do 2º mês em diante. */
.meses { display: flex; }
.meses .mes {
  flex: 0 0 84px; width: 84px; box-sizing: border-box; text-align: center; text-decoration: none;
  color: var(--texto); border: 1px solid transparent; border-radius: 8px; padding: 6px 4px 8px;
}
.meses .mes span { display: block; color: var(--suave); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.meses .mes b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.meses .mes.vazio b { color: var(--suave); opacity: .6; font-weight: 400; }
.meses .mes:hover { background: var(--tl-fundo); }
.meses .mes.ativo {
  border-color: var(--teal-tinta); background: var(--tl-fundo);
  box-shadow: 0 1px 4px rgba(11,76,95,.14);
}
.meses .mes.ativo span { color: var(--elo); }
.meses .mes.ativo b { color: var(--teal-tinta); font-weight: 700; }

/* ─── Lista de documentos ────────────────────────────────────────────────── */
.docs tr.cancelado td { color: var(--suave); text-decoration: line-through; }
.docs tr.cancelado td.acoes, .docs .selo { text-decoration: none; }
.docs .selo {
  display: inline-block; background: var(--er-fundo); color: var(--er-tinta); border-radius: 3px;
  padding: 1px 6px; font-size: 11px; margin-left: 6px; text-transform: uppercase; letter-spacing: .4px;
}
/* Devolução: nem tachada (a nota VALE) nem igual a uma venda (ela subtrai).
   O valor negativo já vem do servidor; aqui só o tom que o distingue. */
.docs tr.devolucao td, .docs tr.fora-da-soma td { color: var(--suave); }
.docs tr.devolucao td.n { color: var(--er-tinta); }
.docs .selo-devolucao { background: var(--al-fundo); color: var(--al-tinta); }
.docs .acoes a { color: var(--elo); margin-right: 10px; font-size: 12.5px; }

/* ── Larguras FIXAS, iguais em todo mês ──────────────────────────────────────
   `table-layout: fixed` é o que faz o navegador obedecer ao `<colgroup>` em vez
   de medir o conteúdo. Sem ele o `width` do <col> é só uma sugestão, e a coluna
   volta a crescer com o texto mais longo do mês que estiver aberto — que é
   exatamente o que se quer impedir: ao trocar de mês, a tabela inteira se
   remontava e a pessoa perdia a referência de onde ler o valor.

   Nome e operação levam a folga; data, valor e os dois links são curtos e de
   forma conhecida.

   ⚠ E EM 09/09/2026 O USUÁRIO DECIDIU O CONTRÁRIO SOBRE O TEXTO QUE NÃO CABE:
   uma nota é UMA LINHA, e o nome extenso é cortado em vez de quebrar. O
   argumento antigo (quebrar preserva o dado; reticências o escondem) valia
   olhando uma linha por vez, e a tela não se lê assim: ela se lê de cima a
   baixo, conferindo um mês. Com alturas diferentes, a lista deixa de ter pente
   e o olho perde o lugar entre uma linha e a seguinte.
   O dado não se perde: o nome inteiro fica no `title` de cada célula cortada, a
   um repouso de mouse. É a mesma troca que a coluna de enviar faz com a sua
   orientação. */
.contas.docs { table-layout: fixed; }
.contas.docs .c-comp  { width: 11%; }
.contas.docs .c-doc   { width: 17%; }
.contas.docs .c-parte { width: 24%; }
.contas.docs .c-oper  { width: 20%; }
.contas.docs .c-val   { width: 11%; }
.contas.docs .c-arq   { width: 10%; }
/* A coluna de enviar só existe em Notas emitidas; onde ela não é desenhada, as
   demais crescem sozinhas porque as larguras são percentuais.
   ⚠ E as proporções foram REMEDIDAS com a linha única (09/09/2026): antes, o
   que não coubesse quebrava e continuava legível, então uma coluna apertada não
   custava nada. Com o corte, apertado passou a significar ESCONDIDO, e a data
   saía "02/09/2..." num tela de 980px. Medido no navegador, célula a célula:
   data e a dupla de links pediam 101px e 86px e tinham 92px e 83px. */
.contas.docs .c-env   { width: 7%; }
/* UMA LINHA POR NOTA, e a regra vale para a LINHA INTEIRA, não só para as duas
   colunas de texto longo. Foi o que a medição mostrou: com o nome e a operação
   cortados, a linha da nota cancelada continuava mais alta que as outras, porque
   quem quebrava ali era o selo "cancelado" na coluna do documento. Uma linha que
   escapa da regra basta para o pente sumir, e é sempre a linha excepcional que
   escapa.
   ⚠ `white-space: nowrap` sozinho não basta com `table-layout: fixed`: sem
   `overflow: hidden` o texto ATRAVESSA a célula vizinha em vez de ser cortado, e
   o nome longo passa por cima da operação. */
.contas.docs td {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
}
/* `td.corta` é a marca de quem leva o texto INTEIRO no `title` (nome do
   destinatário e natureza da operação). O corte é de todas; o resgate por
   repouso de mouse é só onde há dado a resgatar. */

/* ─── Compartilhar com o destinatário (09/09/2026) ─────────────────────────────
   Três aparências, e a diferença entre elas é de COR e de preenchimento, nunca
   de desenho: é o mesmo envelope nos três estados, porque trocar o ícone faria
   parecer que a ação também mudou.
     apagado = não há para onde mandar (não é botão, e o cursor diz isso)
     aceso   = há e-mail e ainda não se enviou
     enviado = já foi (continua clicável: reenviar é legítimo) */
.contas.docs td.env { white-space: nowrap; }
.env-form { display: inline; margin: 0; }
.env-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--linha); border-radius: 7px;
  background: var(--branco); color: var(--teal-tinta);
  cursor: pointer; line-height: 0;
}
.env-btn:hover { border-color: var(--teal-tinta); }
.env-btn.apagado {
  color: var(--suave); opacity: .45; cursor: not-allowed; background: transparent;
}
.env-btn.apagado:hover { border-color: var(--linha); }
.env-btn.enviado {
  /* Verde de "já foi", preenchido: o estado terminado se reconhece de longe, sem
     precisar comparar dois ícones lado a lado. */
  color: #fff; background: #1f8a53; border-color: #1f8a53;
}
.env-btn[disabled] { cursor: default; }
.env-btn.enviando { opacity: .55; }
#env_aviso { margin: 0 0 10px; }

/* ─── Boleto na lista de notas (10/09/2026) ────────────────────────
   Quatro aparências, e a diferença entre elas é de COR e de preenchimento, nunca
   de desenho: é o mesmo código de barras nos quatro estados, porque trocar o
   ícone faria parecer que a ação também mudou. Mesma escolha do envelope acima.
     apagado = não dá para cobrar por esta nota (não é botão, e o cursor diz isso)
     aceso   = dá para emitir, e ainda não se emitiu
     emitido = há boleto registrado esperando pagamento (leva à tela de Cobrança)
     quitado = o banco confirmou o pagamento

   ⚠ O EMITIDO É LARANJA E O QUITADO É VERDE, e não dois tons da mesma cor: os
   dois estados convivem na mesma coluna, um sob o outro, e a pergunta que se faz
   varrendo a lista é exatamente "qual já caiu?". Dois tons próximos respondem
   isso só para quem compara duas linhas lado a lado. */
.contas.docs td.bol { white-space: nowrap; }
.bol-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--linha); border-radius: 7px;
  background: var(--branco); color: var(--teal-tinta);
  cursor: pointer; line-height: 0; text-decoration: none;
}
.bol-btn:hover { border-color: var(--teal-tinta); }
.bol-btn.apagado {
  color: var(--suave); opacity: .45; cursor: not-allowed; background: transparent;
}
.bol-btn.apagado:hover { border-color: var(--linha); }
.bol-btn.emitido { color: #fff; background: #b4600f; border-color: #b4600f; }
.bol-btn.quitado { color: #fff; background: #1f8a53; border-color: #1f8a53; cursor: default; }
.bol-btn.ocupado { opacity: .55; cursor: progress; }
.bol-btn[disabled] { cursor: default; }

/* A coluna nova cabe tirando das duas colunas de texto longo, que são as únicas
   com folga: nome e operação já são cortadas com referências no `title`, e as
   demais (data, valor, os links) são curtas e de forma conhecida. Sem isto as
   proporções somariam 107 e o navegador redistribuiria tudo sozinho, desfazendo
   a largura fixa que a lista ganhou em 08/09/2026. */
.contas.docs.com-boleto .c-parte { width: 21%; }
.contas.docs.com-boleto .c-oper  { width: 17%; }
.contas.docs .c-bol { width: 7%; }

/* ─── A tela de Cobrança ─────────────────────────────────────── */
.cobr-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 12px; }
.cobr-filtros select, .cobr-filtros input { min-width: 0; }
.cobr-filtros input[type=search] { flex: 1 1 240px; }
.cobr-selo {
  display: inline-block; border-radius: 3px; padding: 1px 7px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px;
  background: var(--sutil); color: var(--suave);
}
.cobr-selo.aberto { background: var(--tl-fundo); color: var(--teal-tinta); }
.cobr-selo.atraso { background: var(--al-fundo); color: var(--al-tinta); }
.cobr-selo.pago { background: #e3f3ea; color: #14653a; }
.cobr-obs { color: var(--suave); font-size: 12px; }
/* As ações são formulários (POST), e não links: cancelar cobrança e reenviar
   e-mail não podem acontecer por um GET que alguém abriu sem querer. O `inline`
   é o que impede cada `<form>` de virar uma linha própria dentro da célula. */
.cobr-acoes form { display: inline; margin: 0; }
.cobr-acao {
  background: none; border: 0; padding: 0; margin-right: 10px;
  color: var(--elo); font: inherit; font-size: 12.5px; cursor: pointer;
}
.cobr-acao:hover { text-decoration: underline; }
.cobr-acao.perigo { color: var(--er-tinta); }
.contas.cobr td.cobr-acoes { white-space: nowrap; }

/* ─── A janela de confirmação, uma só para o Portal (10/09/2026) ──────────
   Ela é LARGA e o texto é GRANDE de propósito: uma janela que explica o que vai
   ser feito e sai em corpo 12 dentro de 320px é uma janela que ninguém lê, e uma
   confirmação que ninguém lê é um clique a mais, não uma proteção. */
.jc {
  border: 1px solid var(--linha); border-radius: 10px; padding: 0;
  max-width: 520px; width: calc(100% - 32px);
  background: var(--branco); color: var(--texto);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}
.jc::backdrop { background: rgba(15,26,32,.42); }
.jc-corpo { padding: 22px 24px 18px; margin: 0; }
.jc-tit { margin: 0 0 12px; font-size: 17px; color: var(--teal-tinta); line-height: 1.35; }
.jc-texto p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.jc-texto p:last-child { margin-bottom: 0; }
.jc-campos { margin: 14px 0 0; display: grid; gap: 10px; }
.jc-campo { display: block; }
.jc-campo span { display: block; font-size: 12.5px; color: var(--suave); margin-bottom: 3px; }
.jc-campo input {
  width: 100%; box-sizing: border-box; padding: 7px 9px;
  border: 1px solid var(--linha); border-radius: 6px; font: inherit;
}
.jc-campo small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--suave); }
.jc-erro { margin-top: 12px; color: var(--er-tinta); font-size: 13px; }
.jc-pe { margin-top: 18px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.jc-nao { background: none; border: 0; padding: 6px 4px; color: var(--suave); font: inherit; cursor: pointer; }
.jc-nao:hover { color: var(--texto); text-decoration: underline; }
/* O botão que confirma repete o ATO no rótulo (nunca "OK"): quem lê só o botão
   tem de saber o que está confirmando. */
.jc-sim { cursor: pointer; }
.jc-sim.perigo { background: var(--er-tinta); border-color: var(--er-tinta); }

/* ─── Análise em texto ───────────────────────────────────────────────────── */
.analise {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 8px;
  padding: 20px 24px; max-width: 760px;
}
.analise h2 { font-size: 15px; color: var(--teal-tinta); margin: 20px 0 6px; }
.analise h2:first-child { margin-top: 0; }
.analise p { font-size: 14.5px; line-height: 1.65; margin: 0 0 10px; }

/* ─── Índices econômico-financeiros ──────────────────────────────────────────
   Paleta dos gráficos validada contra o BRANCO DO CARTÃO (#fff), não contra o
   fundo da página: slot 1 #1596b8, slot 2 #eb6834, slot 3 #4a3aa7. Os seis
   testes passam em todos os pares. A cor da marca pura (#0B4C5F + #12708b) foi
   reprovada — mesma família de matiz, ΔE 12,2 entre as duas.
   Esta página compromete-se com o tema claro, como o resto do Portal. */

.destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }
.destaque {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 8px; padding: 14px 16px;
}
.destaque .rot { display: block; color: var(--suave); font-size: 12px; margin-bottom: 6px; }
/* Figuras PROPORCIONAIS no número grande: `tabular-nums` deixa 121 frouxo em
   corpo de destaque. Tabular fica só nas tabelas e nos rótulos de eixo. */
.destaque .cifra { display: block; font-size: 22px; font-weight: 700; color: var(--teal-tinta); line-height: 1.2; }

.grupo { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--suave); margin: 26px 0 10px; font-weight: 600; }
.indices { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.indice {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 8px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.indice.sem { background: var(--sutil); }
.indice-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.indice-topo .rot { color: var(--texto); font-size: 13px; font-weight: 600; }
.indice-topo .cifra { font-size: 21px; font-weight: 700; color: var(--teal-tinta); white-space: nowrap; }
.spark-caixa { height: 46px; }
.spark { display: block; width: 100%; height: 46px; }
/* O comparativo Atual × Anterior. Ver `svg.gr.comp`, mais abaixo: a regra tem de
   vir DEPOIS de `.gr`, que impõe `min-width:520px` para os gráficos largos. */
.comp-caixa { margin: 2px 0; }
.indice-pe { min-height: 16px; }
.impedido { margin: 0; font-size: 12.5px; color: var(--suave); line-height: 1.5; }
.impedido b { color: var(--texto); }

/* A seta vem SEMPRE acompanhada do número e da palavra: cor sozinha não é canal
   acessível, e "subiu" só é bom ou ruim conforme o índice. */
.delta { font-size: 12px; }
.delta.bom { color: var(--ok-tinta); }
.delta.ruim { color: var(--er-tinta); }
.delta.igual { color: var(--suave); }

.explica { margin-top: 2px; }
.explica summary { color: var(--elo); font-size: 12px; cursor: pointer; }
.explica p { margin: 6px 0 0; font-size: 12.5px; color: var(--suave); line-height: 1.5; }
.explica .fx { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--texto); }

.cartao-gr { background: var(--branco); border: 1px solid var(--linha); border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; }
.cartao-gr h3 { margin: 0 0 2px; font-size: 15px; color: var(--teal-tinta); }
.sub-gr { margin: 0 0 12px; color: var(--suave); font-size: 12.5px; line-height: 1.5; }
/* Conteúdo largo rola dentro do próprio quadro; a página nunca rola na
   horizontal. */
.rolagem { overflow-x: auto; }
.gr { display: block; width: 100%; min-width: 520px; height: auto; }

/* ⚠ O comparativo dos Índices mora DENTRO de um cartão estreito, e por isso tem
   de desfazer o `min-width` acima — em CSS o `min-width` VENCE o `max-width`,
   então um `max-width` sozinho não segurava nada: o gráfico saía com 520px
   dentro de um cartão de 370px e vazava para fora dele. É a mesma armadilha de
   ordem/especificidade já anotada em `svg.gr.rosca`, e a regra precisa vir
   depois de `.gr`. */
svg.gr.comp { min-width: 0; max-width: 260px; margin: 0 auto; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12.5px; color: var(--suave); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.ressalva { margin: 10px 0 0; font-size: 12.5px; color: var(--suave); line-height: 1.5; }
.tabela-twin { margin-top: 12px; }
.tabela-twin summary { color: var(--elo); font-size: 12.5px; cursor: pointer; }
.tabela-twin table { margin-top: 10px; }
.cartao-gr .contas th, .cartao-gr .contas td { font-size: 12.5px; }

.dica {
  position: fixed; z-index: 20; pointer-events: none;
  /* No claro é uma caixa escura sobre a tela clara. No escuro a mesma caixa
     quase desaparece dentro do cartão — ela sobe de tom e ganha um fio de
     borda, porque o que faz um balão de dica ser lido é ele DESTOAR do fundo,
     não ele ser escuro. */
  background: var(--dica-fundo, #22323a); color: var(--dica-tinta, #fff);
  border: 1px solid var(--dica-linha, transparent);
  padding: 6px 9px; border-radius: 4px; font-size: 12px; line-height: 1.35; max-width: 240px;
}
.dica b { display: block; font-variant-numeric: tabular-nums; }
.dica span { opacity: .8; font-size: 11px; }
svg.gr .col { transition: opacity .12s; }
svg.gr:hover .col { opacity: .55; }
svg.gr .col:hover { opacity: 1; }

/* ─── Emitir nota (a única tela que escreve) ─────────────────────────────── */
.form-emitir, .previa, .emitida {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 8px;
  padding: 20px 24px; max-width: 620px;
}
.form-emitir label { display: block; margin: 14px 0 4px; color: var(--suave); font-size: 13px; }
.form-emitir label:first-child { margin-top: 0; }
.form-emitir select, .form-emitir input, .form-emitir textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--linha); border-radius: 4px;
  font-size: 15px; font-family: inherit; background: var(--branco); color: var(--texto);
}
.form-emitir textarea { resize: vertical; }
.botao {
  display: inline-block; margin-top: 16px; padding: 10px 18px; background: var(--teal);
  color: #fff; border: 0; border-radius: 4px; font-size: 15px; cursor: pointer; text-decoration: none;
}
.botao:hover { background: var(--teal-claro); }
/* O botão que EMITE é o laranja da casa: é o único clique da tela do qual não
   se volta, e ele não pode parecer com "conferir". */
.botao.forte { background: var(--laranja); color: var(--laranja-tinta); }
.botao.forte:hover { filter: brightness(1.08); }
.botao[disabled] { opacity: .6; cursor: default; }
.previa h2, .emitida h2 { font-size: 16px; color: var(--teal-tinta); margin: 0 0 14px; }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.ficha dt { color: var(--suave); font-size: 13px; }
.ficha dd { margin: 0; font-size: 14.5px; }
.ficha dd.n { font-variant-numeric: tabular-nums; }
.ficha dd.grande { font-size: 20px; font-weight: 700; color: var(--teal-tinta); }
.ficha dd.chave { font-family: ui-monospace, Consolas, monospace; font-size: 12px; word-break: break-all; }
.confirmar { display: flex; align-items: center; gap: 16px; }
/* ⚠ `:not(.botao)` NÃO É ZELO, É CORREÇÃO. Sem ele esta regra alcança o
   `<a class="botao">` que mora nos mesmos parágrafos (Abrir o DANFE, Baixar o
   DANFSE, Criar a ficha) e VENCE `.botao`, porque classe mais elemento tem
   especificidade maior que classe sozinha. O efeito era a tinta do link sobre o
   fundo teal do botão: medido em 17/09/2026, #12708b sobre #0B4C5F dá 1,68:1,
   contra os 9,49:1 do branco que a regra do botão pede. O tema escuro escapava
   (5,11:1), então o defeito só aparecia no claro, que é o padrão. */
.confirmar a:not(.botao), .acoes-nota a:not(.botao) { color: var(--elo); font-size: 13.5px; }
.acoes-nota { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ajuda { color: var(--suave); font-size: 12.5px; margin: 12px 0 0; line-height: 1.5; }
.selo-homolog { margin-bottom: 14px; }

/* ─── Entrar / mensagens ─────────────────────────────────────────────────── */
.tela-entrar { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: 8px; padding: 28px; width: min(400px, 92vw); }
.cartao .marca { color: var(--teal-tinta); margin-bottom: 6px; }
.cartao h1 { margin-top: 0; }
.cartao label { display: block; margin: 12px 0 4px; color: var(--suave); font-size: 13px; }
.cartao input { width: 100%; padding: 9px 10px; border: 1px solid var(--linha); border-radius: 4px; font-size: 15px; }
.cartao button {
  margin-top: 16px; width: 100%; padding: 10px; background: var(--teal); color: #fff;
  border: 0; border-radius: 4px; font-size: 15px; cursor: pointer;
}
.cartao button:hover { background: var(--teal-claro); }
.cartao .erro { background: var(--er-fundo); color: var(--er-tinta); padding: 9px 12px; border-radius: 4px; font-size: 13px; }
.cartao .ajuda { color: var(--suave); font-size: 12.5px; margin-top: 14px; }
.rodape { color: var(--suave); font-size: 12px; text-align: center; padding: 16px; }

/* ─── Tela estreita: tabela vira card, rótulo embutido ───────────────────── */
@media (max-width: 760px) {
  .duas { grid-template-columns: 1fr; }
  .contas thead { display: none; }
  .contas, .contas tbody, .contas tr, .contas td { display: block; width: 100%; }
  /* No card não há colunas: a largura declarada tem de sair do caminho, senão a
     `.c-val` de 11% viraria a largura do valor dentro do cartão. */
  .contas.docs { table-layout: auto; }
  .contas.docs colgroup { display: none; }
  /* No card cada célula é uma linha própria, com o rótulo à esquerda: cortar o
     nome aqui esconderia dado sem ganhar pente nenhum, porque pente não existe
     numa tela estreita. O corte é do modo TABELA. */
  .contas.docs td { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .contas tr { border-bottom: 1px solid var(--linha); padding: 8px 4px; }
  .contas tr.p1 td:first-child, .contas tr.p2 td:first-child,
  .contas tr.p3 td:first-child, .contas tr.p4 td:first-child { padding-left: 10px; }
  .contas td { border: 0; display: flex; justify-content: space-between; gap: 12px; }
  .contas td[data-label]::before {
    content: attr(data-label); color: var(--suave); font-size: 11px;
    text-transform: uppercase; letter-spacing: .4px; flex: 0 0 auto;
  }
  .contas td:first-child::before { content: none; }
  .contas .n { text-align: right; }
  .ord-movel { display: block; }
}

/* ─── Meus documentos (f7e7) — a matriz espécie × mês ────────────────────────
   Linha = tipo de documento, coluna = mês (mais o 13º), aba = ano. O desenho
   nasce de uma leitura: a informação mais valiosa aqui é a CASA VAZIA, e ela só
   existe numa matriz. Daí as três decisões visuais que não são enfeite:

   1. A casa vazia é um traço CINZA e discreto, nunca um X vermelho. Ausência de
      arquivo não é irregularidade — quem responde por regularidade é a seção
      Regularidade, e pintar isto de alarme ensinaria o cliente a ignorar o
      alarme de verdade.
   2. O ícone com arquivo é teal e ganha alvo de 34px: é o único clique da tela.
   3. A coluna do 13º é separada por um fio, porque ela não é um mês — e a do
      "s/ comp.", quando existe, pelo mesmo motivo.

   ⚠ A LISTA QUE FICAVA ABAIXO DA MATRIZ SAIU EM 25/08/2026 (pedido do usuário),
   e com ela as regras `.comp`, `.det-tit` e `.comp:target`. Uma casa com vários
   arquivos hoje baixa um .zip montado pelo Emissor, em vez de apontar para um
   segundo andar da mesma tela.
   -------------------------------------------------------------------------- */
.abas.anos { margin-bottom: 0; }

/* A tabela rola DENTRO do quadro. A página nunca rola de lado — quatorze colunas
   (quinze, com a do sem competência) não cabem em 375px, e é a moldura que
   absorve isso. */
.quadro-docs {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: 0 8px 8px 8px; overflow-x: auto;
}
.matriz { width: 100%; border-collapse: collapse; font-size: 13px; }
.matriz thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
  color: var(--suave); background: var(--baixo); padding: 9px 4px;
  border-bottom: 1px solid var(--linha); text-align: center; white-space: nowrap;
}
.matriz th.esp {
  text-align: left; padding-left: 14px; min-width: 190px;
  position: sticky; left: 0; z-index: 2; background: var(--baixo);
}
/* A coluna do documento acompanha o rolar lateral: sem ela grudada, rolar até
   dezembro deixa a pessoa olhando uma linha de ícones sem saber de quê. */
.matriz tbody th.esp {
  background: var(--branco); color: var(--texto); font-weight: 600;
  font-size: 13px; text-transform: none; letter-spacing: 0;
  border-right: 1px solid var(--linha); border-bottom: 1px solid var(--fraco);
  padding: 4px 12px 4px 14px; line-height: 1.3;
}
.matriz tbody th.esp .sub { display: block; font-size: 11px; color: var(--suave); font-weight: 400; }
.matriz tbody tr:nth-child(even) th.esp,
.matriz tbody tr:nth-child(even) td { background: var(--sutil); }
.matriz tbody tr:hover th.esp, .matriz tbody tr:hover td { background: var(--tl-fundo); }
.matriz td {
  text-align: center; padding: 2px; border-bottom: 1px solid var(--fraco);
  background: var(--branco); min-width: 44px;
}
.matriz .m13 { border-left: 2px solid var(--linha); }
.matriz tr.sem-nada th.esp { color: var(--suave); font-weight: 500; }

/* Os três ícones. Alvo de 34px em todos — o vazio também recebe o cursor, senão
   a linha fica com ritmo desigual e o clique erra a casa vizinha. */
.ico {
  position: relative;      /* ⚠ ancora o `.vis-oculto`: sem isto ele se posiciona
                              contra a PÁGINA e a faz rolar de lado (medido) */
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  width: 34px; height: 30px; border-radius: 5px; text-decoration: none;
}
.ico svg { width: 17px; height: 17px; }
.ico.tem { color: var(--teal-tinta); cursor: pointer; }
.ico.tem:hover, .ico.tem:focus-visible { background: var(--tl-fundo); color: var(--elo); outline: none; }
.ico.tem:focus-visible { box-shadow: 0 0 0 2px var(--laranja); }
.ico.nao { color: var(--g-eixo); }
.ico .conta { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ico.peq { width: auto; height: auto; vertical-align: -3px; }

/* O contador ao lado do ícone de pacote: quantos arquivos vêm no .zip. Ele NÃO
   é mais um atalho para uma lista logo abaixo — essa lista saiu, e o número
   agora é a única pista do tamanho do pacote antes de baixar. */
.ico .conta { margin-left: -1px; }
.contas.docs .sub { color: var(--suave); font-size: 12px; }

.legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12.5px; color: var(--suave); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.ressalva { margin: 10px 0 0; font-size: 12.5px; color: var(--suave); line-height: 1.5; }
.tabela-twin { margin-top: 12px; }
.tabela-twin summary { color: var(--elo); font-size: 12.5px; cursor: pointer; }
.tabela-twin table { margin-top: 10px; }
.cartao-gr .contas th, .cartao-gr .contas td { font-size: 12.5px; }

.dica {
  position: fixed; z-index: 20; pointer-events: none;
  /* No claro é uma caixa escura sobre a tela clara. No escuro a mesma caixa
     quase desaparece dentro do cartão — ela sobe de tom e ganha um fio de
     borda, porque o que faz um balão de dica ser lido é ele DESTOAR do fundo,
     não ele ser escuro. */
  background: var(--dica-fundo, #22323a); color: var(--dica-tinta, #fff);
  border: 1px solid var(--dica-linha, transparent);
  padding: 6px 9px; border-radius: 4px; font-size: 12px; line-height: 1.35; max-width: 240px;
}
.dica b { display: block; font-variant-numeric: tabular-nums; }
.dica span { opacity: .8; font-size: 11px; }
svg.gr .col { transition: opacity .12s; }
svg.gr:hover .col { opacity: .55; }
svg.gr .col:hover { opacity: 1; }

/* ─── Emitir nota (a única tela que escreve) ─────────────────────────────── */
.form-emitir, .previa, .emitida {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 8px;
  padding: 20px 24px; max-width: 620px;
}
.form-emitir label { display: block; margin: 14px 0 4px; color: var(--suave); font-size: 13px; }
.form-emitir label:first-child { margin-top: 0; }
.form-emitir select, .form-emitir input, .form-emitir textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--linha); border-radius: 4px;
  font-size: 15px; font-family: inherit; background: var(--branco); color: var(--texto);
}
.form-emitir textarea { resize: vertical; }
.botao {
  display: inline-block; margin-top: 16px; padding: 10px 18px; background: var(--teal);
  color: #fff; border: 0; border-radius: 4px; font-size: 15px; cursor: pointer; text-decoration: none;
}
.botao:hover { background: var(--teal-claro); }
/* O botão que EMITE é o laranja da casa: é o único clique da tela do qual não
   se volta, e ele não pode parecer com "conferir". */
.botao.forte { background: var(--laranja); color: var(--laranja-tinta); }
.botao.forte:hover { filter: brightness(1.08); }
.botao[disabled] { opacity: .6; cursor: default; }
.previa h2, .emitida h2 { font-size: 16px; color: var(--teal-tinta); margin: 0 0 14px; }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.ficha dt { color: var(--suave); font-size: 13px; }
.ficha dd { margin: 0; font-size: 14.5px; }
.ficha dd.n { font-variant-numeric: tabular-nums; }
.ficha dd.grande { font-size: 20px; font-weight: 700; color: var(--teal-tinta); }
.ficha dd.chave { font-family: ui-monospace, Consolas, monospace; font-size: 12px; word-break: break-all; }
.confirmar { display: flex; align-items: center; gap: 16px; }
/* ⚠ `:not(.botao)` NÃO É ZELO, É CORREÇÃO. Sem ele esta regra alcança o
   `<a class="botao">` que mora nos mesmos parágrafos (Abrir o DANFE, Baixar o
   DANFSE, Criar a ficha) e VENCE `.botao`, porque classe mais elemento tem
   especificidade maior que classe sozinha. O efeito era a tinta do link sobre o
   fundo teal do botão: medido em 17/09/2026, #12708b sobre #0B4C5F dá 1,68:1,
   contra os 9,49:1 do branco que a regra do botão pede. O tema escuro escapava
   (5,11:1), então o defeito só aparecia no claro, que é o padrão. */
.confirmar a:not(.botao), .acoes-nota a:not(.botao) { color: var(--elo); font-size: 13.5px; }
.acoes-nota { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ajuda { color: var(--suave); font-size: 12.5px; margin: 12px 0 0; line-height: 1.5; }
.selo-homolog { margin-bottom: 14px; }

/* ─── Entrar / mensagens ─────────────────────────────────────────────────── */
.tela-entrar { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: 8px; padding: 28px; width: min(400px, 92vw); }
.cartao .marca { color: var(--teal-tinta); margin-bottom: 6px; }
.cartao h1 { margin-top: 0; }
.cartao label { display: block; margin: 12px 0 4px; color: var(--suave); font-size: 13px; }
.cartao input { width: 100%; padding: 9px 10px; border: 1px solid var(--linha); border-radius: 4px; font-size: 15px; }
.cartao button {
  margin-top: 16px; width: 100%; padding: 10px; background: var(--teal); color: #fff;
  border: 0; border-radius: 4px; font-size: 15px; cursor: pointer;
}
.cartao button:hover { background: var(--teal-claro); }
.cartao .erro { background: var(--er-fundo); color: var(--er-tinta); padding: 9px 12px; border-radius: 4px; font-size: 13px; }
.cartao .ajuda { color: var(--suave); font-size: 12.5px; margin-top: 14px; }
.rodape { color: var(--suave); font-size: 12px; text-align: center; padding: 16px; }

/* ─── Tela estreita: tabela vira card, rótulo embutido ───────────────────── */
@media (max-width: 760px) {
  .duas { grid-template-columns: 1fr; }
  .contas thead { display: none; }
  .contas, .contas tbody, .contas tr, .contas td { display: block; width: 100%; }
  .contas tr { border-bottom: 1px solid var(--linha); padding: 8px 4px; }
  .contas tr.p1 td:first-child, .contas tr.p2 td:first-child,
  .contas tr.p3 td:first-child, .contas tr.p4 td:first-child { padding-left: 10px; }
  .contas td { border: 0; display: flex; justify-content: space-between; gap: 12px; }
  .contas td[data-label]::before {
    content: attr(data-label); color: var(--suave); font-size: 11px;
    text-transform: uppercase; letter-spacing: .4px; flex: 0 0 auto;
  }
  .contas td:first-child::before { content: none; }
  .contas .n { text-align: right; }
}

/* ─── Meus documentos (f7e7) — a matriz espécie × mês ────────────────────────
   Linha = tipo de documento, coluna = mês (mais o 13º), aba = ano. O desenho
   nasce de uma leitura: a informação mais valiosa aqui é a CASA VAZIA, e ela só
   existe numa matriz. Daí as três decisões visuais que não são enfeite:

   1. A casa vazia é um traço CINZA e discreto, nunca um X vermelho. Ausência de
      arquivo não é irregularidade — quem responde por regularidade é a seção
      Regularidade, e pintar isto de alarme ensinaria o cliente a ignorar o
      alarme de verdade.
   2. O ícone com arquivo é teal e ganha alvo de 34px: é o único clique da tela.
   3. A coluna do 13º é separada por um fio, porque ela não é um mês — e a do
      "s/ comp.", quando existe, pelo mesmo motivo.

   ⚠ A LISTA QUE FICAVA ABAIXO DA MATRIZ SAIU EM 25/08/2026 (pedido do usuário),
   e com ela as regras `.comp`, `.det-tit` e `.comp:target`. Uma casa com vários
   arquivos hoje baixa um .zip montado pelo Emissor, em vez de apontar para um
   segundo andar da mesma tela.
   -------------------------------------------------------------------------- */
.abas.anos { margin-bottom: 0; }

/* A tabela rola DENTRO do quadro. A página nunca rola de lado — quatorze colunas
   (quinze, com a do sem competência) não cabem em 375px, e é a moldura que
   absorve isso. */
.quadro-docs {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: 0 8px 8px 8px; overflow-x: auto;
}
.matriz { width: 100%; border-collapse: collapse; font-size: 13px; }
.matriz thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
  color: var(--suave); background: var(--baixo); padding: 9px 4px;
  border-bottom: 1px solid var(--linha); text-align: center; white-space: nowrap;
}
.matriz th.esp {
  text-align: left; padding-left: 14px; min-width: 190px;
  position: sticky; left: 0; z-index: 2; background: var(--baixo);
}
/* A coluna do documento acompanha o rolar lateral: sem ela grudada, rolar até
   dezembro deixa a pessoa olhando uma linha de ícones sem saber de quê. */
.matriz tbody th.esp {
  background: var(--branco); color: var(--texto); font-weight: 600;
  font-size: 13px; text-transform: none; letter-spacing: 0;
  border-right: 1px solid var(--linha); border-bottom: 1px solid var(--fraco);
  padding: 4px 12px 4px 14px; line-height: 1.3;
}
.matriz tbody th.esp .sub { display: block; font-size: 11px; color: var(--suave); font-weight: 400; }
.matriz tbody tr:nth-child(even) th.esp,
.matriz tbody tr:nth-child(even) td { background: var(--sutil); }
.matriz tbody tr:hover th.esp, .matriz tbody tr:hover td { background: var(--tl-fundo); }
.matriz td {
  text-align: center; padding: 2px; border-bottom: 1px solid var(--fraco);
  background: var(--branco); min-width: 44px;
}
.matriz .m13 { border-left: 2px solid var(--linha); }
.matriz tr.sem-nada th.esp { color: var(--suave); font-weight: 500; }

/* ─── O quadro de DOCUMENTOS DE CADASTRO (26/08/2026) ────────────────────────

   Mesma moldura da matriz — mesma caixa, mesma zebra, mesmos ícones —, e de
   propósito: é a mesma tela e o mesmo gesto (clicar num ícone e receber o
   arquivo). O que muda são as colunas, porque aqui não há meses: espécie,
   quantos arquivos e até quando vale.

   ⚠ AS REGRAS FICAM AQUI, e não no fim do arquivo: o `@media (max-width: 760px)`
   logo abaixo encolhe `.matriz`, e regra nova escrita depois dele venceria a
   versão de celular sem que ninguém percebesse no desktop.
   -------------------------------------------------------------------------- */
h2.secao-doc {
  margin: 26px 0 6px; font-size: 15px; font-weight: 700; color: var(--texto);
}
.matriz.cadastro th.esp { min-width: 230px; }
.matriz.cadastro td.qtd, .matriz.cadastro td.val { min-width: 90px; white-space: nowrap; }
.matriz.cadastro td.qtd { font-variant-numeric: tabular-nums; color: var(--suave); }
.matriz.cadastro td.val { font-variant-numeric: tabular-nums; }
.matriz.cadastro td.val .sub { color: var(--g-eixo); }
/* Vencido é dito por COR e por texto: a data já está escrita, e o `title` da
   linha não é lido por quem só passa o olho. Cor sozinha nunca é o único canal
   neste produto. */
.matriz.cadastro .vencido { color: var(--er-tinta); font-weight: 700; }
.matriz.cadastro .vencido::after { content: ' (vencido)'; font-size: 11px; font-weight: 600; }

/* Os três ícones. Alvo de 34px em todos — o vazio também recebe o cursor, senão
   a linha fica com ritmo desigual e o clique erra a casa vizinha. */
.ico {
  /* ⚠ `relative` ancora o `.vis-oculto`: sem isto o texto de leitor de tela se
     posiciona contra a PÁGINA e a faz rolar de lado no celular (medido). */
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  width: 34px; height: 30px; border-radius: 5px; text-decoration: none;
}
.ico svg { width: 17px; height: 17px; }
.ico.tem { color: var(--teal-tinta); cursor: pointer; }
.ico.tem:hover, .ico.tem:focus-visible { background: var(--tl-fundo); color: var(--elo); outline: none; }
.ico.tem:focus-visible { box-shadow: 0 0 0 2px var(--laranja); }
.ico.nao { color: var(--g-eixo); }
.ico .conta { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ico.peq { width: auto; height: auto; vertical-align: -3px; }

/* O contador ao lado do ícone de pacote: quantos arquivos vêm no .zip. Ele NÃO
   é mais um atalho para uma lista logo abaixo — essa lista saiu, e o número
   agora é a única pista do tamanho do pacote antes de baixar. */
.ico .conta { margin-left: -1px; }
.contas.docs .sub { color: var(--suave); font-size: 12px; }

.legenda {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 10px 2px 0; font-size: 12.5px; color: var(--suave);
}
.legenda .sep { color: var(--linha); }

/* Texto para leitor de tela: o ícone sozinho não diz nada a quem não o vê. */
.vis-oculto {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 760px) {
  /* ⚠ A MATRIZ NÃO VIRA CARD. O padrão tabela-título-conteúdo serve a linhas
     que são registros; aqui a linha é uma faixa de 13 casas, e quebrá-la em 13
     cartõezinhos destrói exatamente a leitura que a tela existe para dar. Ela
     rola de lado dentro do quadro, com a coluna do documento grudada. */
  .matriz { font-size: 12px; }
  .matriz th.esp { min-width: 150px; }
  .matriz td { min-width: 40px; }
  .ico { width: 30px; }
}

/* ─── Regularidade (f7e7) — farol por esfera ──────────────────────────────────
   ⚠ A COR É REFORÇO, NUNCA A INFORMAÇÃO. Cada faixa e cada selo trazem a
   palavra escrita; quem não distingue as cores (ou lê por leitor de tela)
   recebe exatamente a mesma resposta. Num assunto em que a leitura errada vai
   para dentro de uma habilitação, depender de verde e vermelho seria imprudente.
   Há quatro estados de propósito — o "parcial" existe para que "não sei" nunca
   se pinte de "está tudo certo". */
.vered {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between; padding: 16px 18px; border-radius: 8px;
  border: 1px solid var(--linha); border-left-width: 5px; background: var(--branco);
  margin: 4px 0 18px;
}
.vered-cabeca h2 { font-size: 17px; margin: 0 0 4px; color: var(--texto); }
.vered-cabeca p { margin: 0; font-size: 13.5px; color: var(--suave); max-width: 62ch; line-height: 1.5; }
.vered-conta { text-align: right; white-space: nowrap; }
.vered-conta strong { display: block; font-size: 23px; font-variant-numeric: tabular-nums; }
.vered-conta span { font-size: 12px; color: var(--suave); }

.vered-ok        { border-left-color: var(--ok-tinta); background: var(--ok-fundo); }
.vered-ok .vered-conta strong        { color: var(--ok-tinta); }
.vered-parcial   { border-left-color: var(--teal-tinta); background: var(--tl-fundo); }
.vered-parcial .vered-conta strong   { color: var(--teal-tinta); }
.vered-atencao   { border-left-color: var(--laranja); background: var(--al-fundo); }
.vered-atencao .vered-conta strong   { color: var(--al-tinta); }
.vered-irregular { border-left-color: var(--er-tinta); background: var(--er-fundo); }
.vered-irregular .vered-conta strong { color: var(--er-tinta); }

.selo {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.selo-negativa,
.selo-positiva_efeito_negativa { background: var(--ok-fundo); color: var(--ok-tinta); border-color: var(--ok-linha); }
.selo-positiva                 { background: var(--er-fundo); color: var(--er-tinta); border-color: var(--er-linha); }
.selo-vencida,
.selo-sem_certidao             { background: var(--al-fundo); color: var(--al-tinta); border-color: var(--al-linha); }
/* Cinza, e não amarelo: "não verificada" não é alerta — é ausência de dado, e
   pintá-la de alerta ensinaria o cliente a ignorar o alerta de verdade. */
.selo-nao_apurada              { background: var(--baixo); color: var(--suave); border-color: var(--linha); }

/* A faixa do Painel: a mesma resposta, em uma linha, onde o cliente entra. */
.faixa-reg {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 6px; border: 1px solid var(--linha);
  border-left-width: 4px; background: var(--branco); margin: 0 0 18px; font-size: 13.5px;
}
.faixa-reg strong { font-size: 14.5px; }
.faixa-reg .fr-det { color: var(--suave); }
.faixa-reg a { margin-left: auto; white-space: nowrap; }

/* ─── Faixa de conferência (visão do cliente, para a equipe da BUK) ──────────
   Laranja, larga e no topo de tudo: ela existe para que ninguém confunda a
   sessão de conferência com a própria. Discreta ela não serviria para nada. */
.faixa-conferencia {
  background: var(--al-fundo); border-bottom: 1px solid var(--al-linha);
  color: var(--al-tinta); padding: 8px 18px; font-size: 13px; line-height: 1.5;
}
.faixa-conferencia b { color: var(--al-tinta); }
.faixa-conferencia a { color: var(--al-tinta); margin-left: 8px; }

/* ── A saída da visão do cliente (25/08/2026) ────────────────────────────────
   É um POST, e não um link — entrar e sair mexem no estado da sessão —, mas
   tem de PARECER o link que era, no meio da frase da faixa. Sem isto o botão
   sai numa linha própria, com moldura de formulário, e a faixa deixa de se ler
   como uma frase. */
.faixa-conferencia-sair { display: inline; margin: 0; }
.faixa-conferencia-sair button {
  background: none; border: 0; padding: 0; margin-left: 8px;
  color: var(--al-tinta); font: inherit; text-decoration: underline; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AS QUATRO ROTINAS DO CLIENTE (25/08/2026)
   Clientes, Estoque, A pagar/A receber e a via de mercadoria da emissão.
   Nenhuma cor nova: tudo sai das variáveis que a reformulação de 21/08 já
   declarou — cor cravada aqui não responderia ao tema escuro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cadastro de clientes ─────────────────────────────────────────────────── */
.busca-clientes { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.busca-clientes input {
  flex: 1 1 240px; min-width: 0;          /* ⚠ min-width:0, senão a barra rola de lado no celular */
  padding: 8px 10px; border: 1px solid var(--linha); border-radius: 4px;
  background: var(--branco); color: var(--texto); font-size: 14px;
}
.busca-clientes a { color: var(--elo); font-size: 13px; }

/* Dado que falta e que TEM consequência. Não é erro do cadastro — é a coluna
   dizendo o que deixa de funcionar enquanto ninguém preencher. */
.falta { color: var(--al-tinta); font-size: 12.5px; }

/* A ficha em duas colunas, que viram uma no celular. `minmax(0, 1fr)` e não
   `1fr`: item de grid nasce com `min-width:auto` e não encolhe — é a causa de
   toda página que rola de lado. */
.ficha-cliente .par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.ficha-cliente fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ficha-cliente fieldset[disabled] { opacity: .75; }
.ficha-cliente h2 { font-size: 14px; color: var(--teal-tinta); margin: 24px 0 4px; }
.ficha-cliente h2:first-of-type { margin-top: 0; }
.ficha-cliente .opc { color: var(--suave); font-weight: 400; }
.ficha-cliente .marcador { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--texto); font-size: 14px; }
.ficha-cliente .marcador input { width: auto; }
.excluir-cliente { margin: 16px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* O botão destrutivo NÃO é vermelho-berrante: a exclusão aqui é lógica e
   reversível pela BUK. Vermelho de alarme para um ato recuperável gasta o
   sinal que os atos irreversíveis vão precisar. */
.botao.apagar { background: var(--branco); color: var(--er-tinta); border: 1px solid var(--er-tinta); }
.botao.apagar:hover { background: var(--er-fundo); }

/* ── Estoque ──────────────────────────────────────────────────────────────── */
.contas .un { color: var(--suave); font-size: 11.5px; margin-left: 2px; }

/* ── Emissão de mercadoria ────────────────────────────────────────────────── */
.impedimentos { margin: 8px 0; padding-left: 20px; }
.impedimentos li { margin-bottom: 4px; line-height: 1.5; }
.linhas-nfe td { vertical-align: middle; }
.linhas-nfe select, .linhas-nfe input {
  width: 100%; min-width: 0;
  padding: 7px 8px; border: 1px solid var(--linha); border-radius: 4px;
  background: var(--branco); color: var(--texto); font-size: 14px;
}
.linhas-nfe .n input { text-align: right; font-variant-numeric: tabular-nums; }
.linhas-nfe .tirar-linha { padding: 4px 10px; line-height: 1; }
.linhas-nfe .tirar-dup { padding: 4px 10px; line-height: 1; }
/* A conta das parcelas fica ao LADO do botao que acrescenta uma, e nao no fim
   da pagina: e ali que a pessoa esta olhando quando digita o valor, e o numero
   que falta so serve enquanto ela ainda pode corrigi-lo. */
.conta-parcelas { font-size: 13px; }
.conta-parcelas.pendente { color: var(--er-tinta); }
.conta-parcelas.ok { color: var(--teal-tinta); }
.parcelas { margin-top: 18px; }

/* 760px, o MESMO ponto em que a tabela vira card mais acima. Um segundo
   breakpoint próximo faria a tela mudar de forma duas vezes ao girar o
   celular, e o motivo não estaria em lugar nenhum. */
@media (max-width: 760px) {
  /* Duas colunas em 375px viram dois campos ilegíveis lado a lado. */
  .ficha-cliente .par { grid-template-columns: minmax(0, 1fr); }
}

/* ── O cliente que só existe no arquivo fiscal (25/08/2026) ──────────────────
   Ele é cliente de verdade — já recebeu nota — e ainda não tem ficha. A linha
   fica DISCRETA, não apagada: apagada diria "isto é um problema", e não é;
   é trabalho de cadastro que ninguém fez ainda. */
.contas tr.sem-ficha td { background: var(--sutil); }
.selo-acervo { background: var(--tl-fundo); color: var(--teal-tinta); }

/* ─── Convite e redefinição de senha (26/08/2026) ─────────────────────────── */
/* Seletores NOVOS, acrescentados no fim de propósito: não há @media anterior
   sobre eles para perder na cascata — a armadilha registrada no CLAUDE.md vale
   para regra nova que REDEFINE medida existente, e não é o caso aqui. */
.cartao .aviso {
  background: var(--ok-fundo, #e8f5e9); color: var(--ok-tinta, #1b5e20);
  padding: 9px 12px; border-radius: 4px; font-size: 13px;
}
.cartao .ajuda.menor { font-size: 11.5px; margin-top: 8px; }
.cartao .ajuda a { color: var(--elo); }


/* ─── A JANELA DA FICHA DE CLIENTE (26/08/2026) ────────────────────────────────
   Pedido do usuário: editar e criar cliente "aparecem como uma janela", e um "+"
   ao lado do seletor nas duas telas de emitir.

   ⚠ SELETORES NOVOS, no fim do arquivo de propósito — nenhum @media anterior
   fala deles, então não há cascata a perder. (A armadilha registrada no
   CLAUDE.md vale para regra nova que REDEFINE medida existente.)

   ⚠ E A LARGURA É `min()`, não um valor fixo: o formulário do cliente é longo e
   no celular ele precisa da tela inteira menos uma folga. Um `width: 720px` faz
   a janela sair pela lateral em 375px, e o dano não é estético — os botões de
   gravar e cancelar ficam fora do alcance. */
dialog.janela-cliente {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 48px);
  padding: 0; border: 1px solid var(--linha); border-radius: 8px;
  background: var(--branco); color: var(--texto);
  box-shadow: 0 12px 40px rgba(11, 76, 95, .22);
  overflow: hidden;
}
dialog.janela-cliente::backdrop { background: rgba(11, 76, 95, .38); }

.janela-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--linha); background: var(--sutil);
  /* Fica parado enquanto o formulário rola: numa ficha desta altura, perder o
     título e o "fechar" ao rolar é perder a saída da janela. */
  position: sticky; top: 0; z-index: 1;
}
.janela-cabeca h2 { margin: 0; font-size: 15px; color: var(--teal-tinta); }
.janela-fechar {
  border: 0; background: none; cursor: pointer; color: var(--suave);
  font-size: 22px; line-height: 1; padding: 0 4px;
}
.janela-fechar:hover { color: var(--texto); }

/* A rolagem é do CORPO, e não do <dialog>: é o que mantém a cabeça parada. */
.janela-corpo { padding: 16px; overflow-y: auto; max-height: calc(100vh - 48px - 46px); }
/* Dentro da janela o formulário não precisa da própria moldura — ela já é a
   moldura. Sem isto ficam duas bordas concêntricas com 20px entre elas. */
.janela-corpo .form-emitir { border: 0; padding: 0; margin: 0; box-shadow: none; background: none; }
.janela-corpo .rodape-fonte { margin-bottom: 0; }

/* A recusa que volta do Emissor, mostrada por cima do formulário JÁ PREENCHIDO —
   ver o porquê em `public/js/cliente_janela.js`. */
.ficha-recusa { margin: 0 0 12px; }
.ficha-recusa[hidden] { display: none; }

/* ── O "+" ao lado do seletor ────────────────────────────────────────────────
   ⚠ `min-width: 0` no <select>: item de flex nasce com `min-width: auto` e se
   dimensiona pela opção mais larga — é a causa registrada de toda tela do
   ecossistema que rola de lado no celular. */
.linha-com-mais { display: flex; align-items: stretch; gap: 8px; }
.linha-com-mais > select { flex: 1 1 auto; min-width: 0; }
.botao.mais {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; padding: 0; font-size: 20px; line-height: 1; font-weight: 600;
  text-decoration: none;
}

/* ─── Os dois relatórios em PDF da tela de documentos (09/09/2026) ───────────
   Ficam entre a faixa de meses e a lista porque é aí que a pessoa termina de
   escolher o período — o botão de gerar papel pertence ao recorte, não ao topo
   da página. `margin-top: 0` nos botões porque `.botao` nasce com 16px pensando
   no fim de um formulário, e aqui eles estão numa linha própria. */
.doc-relatorios { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 14px; }
.doc-relatorios .botao { margin-top: 0; padding: 8px 14px; font-size: 13.5px; }
.doc-relatorios-nota { color: var(--suave); font-size: 12px; }

/* ─── O selo do lastro das demonstrações (09/09/2026) ────────────────────────
   Duas leituras do mesmo documento: âmbar enquanto é gerencial (atenção, não
   erro: a demonstração não tem defeito, ela só ainda não foi conferida) e verde
   quando o contador cravou o lastro. A frase mora no Controle, em
   lib/lastro_contabil.js, para que o papel e as duas telas digam o mesmo. */
.selo { border-radius: 4px; padding: 11px 14px; margin: 0 0 14px;
        border-left: 4px solid; font-size: 13px; line-height: 1.5; }
.selo-ger { background: #fdf6e7; border-color: #8a5a00; color: #6b4a08; }
.selo-ok  { background: #eef7f2; border-color: #1d6f4a; color: #17573a; }

/* O botão do PDF fica na barra do período, ao lado do exercício: o papel é
   daquele exercício, e separá-los faria escolher o ano e imprimir parecerem
   coisas de lugares diferentes. */
.btn-pdf { display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
           border: 1px solid var(--teal); border-radius: 4px; color: var(--teal);
           text-decoration: none; font-size: 13px; }
.btn-pdf:hover { background: var(--teal); color: #fff; }

/* ─── Marcar pagamento e lançar título na carteira (22/09/2026) ──────────────
   SELETORES NOVOS, no fim do arquivo de propósito: nenhum @media anterior fala
   deles, então não há regra no meio do arquivo para esta vencer por ordem de
   cascata. (A armadilha registrada no CLAUDE.md: densidade aplicada em regra
   nova no fim venceu os @media de celular que estavam no meio.)

   O formulário de marcar é uma LINHA: data e botão lado a lado dentro da célula
   da tabela. Em pé, um sobre o outro, ele dobraria a altura de cada linha da
   agenda — e a agenda é justamente a lista que se percorre inteira. */
.marcar-pago { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.marcar-pago .botao { margin-top: 0; padding: 5px 10px; font-size: 12.5px; white-space: nowrap; }
.marcar-pago-data { display: inline-flex; align-items: center; gap: 4px;
                    color: var(--suave); font-size: 12px; }
.marcar-pago-data input {
  padding: 4px 6px; border: 1px solid var(--linha); border-radius: 4px;
  font: inherit; font-size: 12.5px; color: inherit; background: var(--branco);
  /* ⚠ `min-width: 0` porque o item de flex nasce com `auto` e não encolhe: sem
     isto, o campo de data se dimensiona pelo conteúdo do seletor nativo e faz a
     tabela rolar de lado no celular. É a causa registrada em
     [[celular-min-width-zero]]. */
  min-width: 0; max-width: 140px;
}

/* O formulário de lançar título mora dentro de um <details> e não é a tela
   inteira: teto de largura para o campo não atravessar a página no desktop. */
.form-titulo { max-width: 520px; margin-top: 14px; }
.form-titulo h4 { margin: 0 0 4px; font-size: 14px; color: var(--teal-tinta); }

/* O botão "cancelar" do título lançado à mão fica na altura da linha, como o de
   marcar: sem isto ele herda os 16px de `margin-top` que `.botao` traz pensando
   no fim de um formulário, e desalinha a linha da tabela. */
.contas .botao.apagar { margin-top: 0; padding: 5px 10px; font-size: 12.5px; }

/* ─── Resultado por CC e razão, consulta do cliente (07/10/2026) ──────────────
   Seletores novos, no fim do arquivo. As cores saem dos tokens, para valer no
   tema escuro também; a linha de destaque mantém o fundo no hover. */
.rcc-barra { align-items: flex-start; }
.rcc-opcoes { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--suave); }
.rcc-acoes { display: flex; gap: 10px; align-items: flex-start; }
.rcc-centros summary { cursor: pointer; height: 32px; line-height: 30px; padding: 0 12px; border: 1px solid var(--linha);
  border-radius: 4px; font-size: 13px; list-style: none; background: var(--branco); }
.rcc-centros[open] form { position: absolute; z-index: 20; right: 16px; max-width: min(640px, calc(100vw - 32px));
  max-height: 60vh; overflow: auto; background: var(--branco); border: 1px solid var(--linha); border-radius: 6px; padding: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.rcc-grupo { margin-bottom: 10px; }
.rcc-grupo-tit { font-weight: 700; color: var(--teal-tinta); font-size: 12px; margin-bottom: 4px; }
.rcc-opt { display: block; font-size: 12px; padding: 2px 0; }
.rcc-opt span { color: var(--suave); }
.rcc-form-acoes { display: flex; gap: 8px; margin-top: 8px; position: sticky; bottom: -12px; background: var(--branco); padding: 8px 0; }
.rcc-form-acoes button { height: 32px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--teal); background: var(--teal); color: #fff; cursor: pointer; }
.rcc-form-acoes .btn-sec, .razao-botoes .btn-sec { background: var(--branco); color: var(--texto); border: 1px solid var(--linha); }
.rcc-nota { font-size: 12px; color: var(--suave); margin: 0 0 10px; }
.rcc-rolagem { overflow-x: auto; max-width: 100%; }
table.rcc, table.razao { border-collapse: collapse; font-size: 12.5px; width: 100%; }
table.rcc th, table.rcc td, table.razao th, table.razao td { padding: 5px 8px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
table.rcc th { text-align: right; color: var(--teal-tinta); vertical-align: bottom; }
table.rcc th.rot, table.rcc td.rot { text-align: left; position: sticky; left: 0; background: var(--branco); }
table.rcc th.cc { color: var(--suave); }
table.rcc .cc-nome { font-size: 10px; font-weight: 400; }
table.rcc td.num, table.razao td.num, table.razao th.num { text-align: right; }
table.rcc td.neg, table.rcc td.neg a { color: #b3261e; }
table.rcc td a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
table.rcc .pct { font-size: 10px; color: var(--suave); }
table.rcc .pct span { margin-left: 6px; }
table.rcc tr.grp td, table.rcc tr.resultado td, table.rcc tr.saldolucro td, table.rcc tr.destaque td { font-weight: 700; }
table.rcc tr.det td.rot { padding-left: 22px; font-weight: 400; }
table.rcc tr[class*="forte"] td { font-weight: 700; }
table.rcc tr[class*="sep"] td { border-top: 2px solid var(--linha); }
table.rcc tr.resultado td { background: rgba(11,76,95,.07); }
table.rcc tr.saldolucro td { background: rgba(243,156,18,.10); }
table.rcc tr.destaque td, table.rcc tr.destaque td.rot { background: var(--teal); color: #fff; }
table.rcc tr.destaque td a { color: #fff; }
table.rcc tr.prova td { color: var(--suave); font-size: 11.5px; }
table.rcc tbody tr:hover td { background-color: rgba(11,76,95,.04); }
table.rcc tbody tr.destaque:hover td { background: var(--teal); }
.rcc-abre { display: inline-block; margin-top: 4px; font-size: 10px; padding: 1px 6px; border: 1px solid var(--linha); border-radius: 4px; text-decoration: none; color: var(--teal-tinta); }
.rcc-abre.aberto { background: var(--teal); color: #fff; border-color: var(--teal); }
.razao-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; font-size: 12px; color: var(--suave); }
.razao-filtros label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.razao-filtros label.largo { flex: 1 1 200px; }
.razao-filtros input, .razao-filtros select { height: 32px; min-width: 0; max-width: 100%; }
.razao-botoes { display: flex; gap: 8px; }
.razao-botoes button { height: 32px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--teal); background: var(--teal); color: #fff; cursor: pointer; }
.razao-botoes .btn-sec { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 4px; text-decoration: none; }
.razao-resumo { font-size: 13px; margin-bottom: 8px; }
.razao-resumo .suave, table.razao .suave { color: var(--suave); }
table.razao td { white-space: normal; vertical-align: top; }
table.razao td:first-child, table.razao td.num { white-space: nowrap; }
table.razao .cod { color: var(--suave); font-size: 11px; }
.paginas { display: flex; gap: 14px; justify-content: center; margin: 12px 0; font-size: 13px; }
table.razao td.docs a { display: block; white-space: nowrap; font-size: 12px; }
table.razao td.docs a.anexo { color: var(--suave); }
a.conta-razao, table.rcc td.rot a { color: inherit; text-decoration: none; }
a.conta-razao:hover, table.rcc td.rot a:hover { text-decoration: underline; }
table.rcc tr.destaque td.rot a { color: #fff; }
.razao-cab { align-items: center; }
.razao-recorte { font-size: 14px; }

/* Títulos das colunas fixos ao rolar (07/10/2026). A área já rolava de lado, e
   rolagem lateral prende o `sticky` a ela: por isso ela passa a rolar também na
   vertical, com a altura da janela, e o cabeçalho gruda no topo DELA. */
.rcc-rolagem { overflow: auto; max-height: calc(100vh - 140px); }
table.rcc thead th, table.razao thead th { position: sticky; top: 0; z-index: 3; background: var(--branco);
  box-shadow: inset 0 -1px 0 var(--linha); }
table.rcc thead th.rot { left: 0; z-index: 4; }
table.razao th:first-child, table.razao td:first-child { position: sticky; left: 0; background: var(--branco); z-index: 1; }
table.razao thead th:first-child { z-index: 4; }

/* ── Documentos legais e aceite (f11e2, 18/10/2026) ──────────────────────────
   O cartão da entrada tem 400px, que é largura de formulário e não de leitura:
   o texto jurídico ganha o cartão largo, com medida de linha confortável. */
.cartao.largo { width: min(820px, 94vw); margin: 24px 0; }
.legal-texto { line-height: 1.6; font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.legal-texto h1 { font-size: 22px; margin: 4px 0 14px; }
.legal-texto h2 { font-size: 16px; margin: 22px 0 6px; color: var(--teal-tinta); }
.legal-texto h3 { font-size: 15px; margin: 16px 0 4px; }
.legal-texto ol, .legal-texto ul { padding-left: 22px; margin: 6px 0; }
.legal-texto li { margin: 4px 0; }
.legal-tabela { overflow-x: auto; margin: 10px 0; }
.legal-tabela table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.legal-tabela th, .legal-tabela td { border: 1px solid var(--linha); padding: 6px 8px; text-align: left; vertical-align: top; }
.legal-cabeca { margin-top: 0; }
.rodape-legal a { color: inherit; }