/* Selo Digital — conferência da serventia
   Estética de livro de registro: papel envelhecido, tinta ferrogálica,
   carmim registral dos selos oficiais, pautas finas e algarismos tabulares. */

/* ---------------- Temas ----------------

   Toda cor da interface é um destes tokens, e só eles carregam valor
   literal (test_webapp_temas.py guarda a regra: cor nova entra aqui, em
   TODOS os temas, nunca solta numa regra). O tema é o atributo
   data-tema no <html>, posto pelo nucleo.js a partir das preferências
   (TEMAS); sem ele, vale o clássico.

   Os seletores são [data-tema="…"], e não :root[…], de propósito: a
   amostra de cada tema no painel de preferências carrega o mesmo
   atributo e se pinta com as cores do tema que representa. O clássico
   entra por :where(:root) — especificidade zero —, para que qualquer
   outro tema no <html> o vença sem depender da ordem.

   As cores-base de cada tema são escolhidas à mão; as derivadas (fundos
   de estado, rampas dos gráficos, véus) saem de misturas das base, já
   calculadas — sem color-mix() em tempo de execução, que num navegador
   antigo invalidaria a declaração e deixaria o fundo transparente.

   Nomes ficaram os de sempre: --carmim é o ACENTO de cada tema (no
   Oceano é azul), e --perigo é o que acusa erro, divergência, perda e
   valor negativo — no clássico, o mesmo carmim. */

/* O papel clareou um tom e as pautas recuaram: a paleta é a mesma, com
   menos amarelo e menos contraste de moldura. O que dava ar de documento
   velho era o fundo puxando para o creme e as linhas quase tão escuras
   quanto o texto — não o carmim, que é a identidade e ficou onde estava. */
:where(:root), [data-tema="classico"] {
  color-scheme: light;
  --papel: #faf8f3;
  --papel-linha: #f2ede1;
  --papel-fundo: #f5f2e9;
  --tinta: #2b2721;
  --tinta-suave: #6a6255;
  --tinta-fraca: #9a9284;
  --pauta: #e6dfce;
  --pauta-forte: #cfc5ad;
  --carmim: #82192c;
  --carmim-claro: #a83545;
  --perigo: #82192c;
  --verde-selo: #35664a;
  --alerta: #a3651f;
  --azul: #33456b;
  --campo: #fff;
  --sobre-acento: #fff;
  --postit: #fdf6c9;
  --postit-borda: #e4d284;

  --perigo-fundo: #f3d9dc;
  --perigo-fundo-claro: #f6e5e7;
  --perigo-leve: #fdf5f6;
  --perigo-veu: rgba(124, 28, 42, 0.06);
  --verde-fundo: #dfe7e0;
  --verde-fundo-claro: #e4ece6;
  --alerta-fundo: #f0e3d3;
  --alerta-fundo-claro: #f3e8d8;
  --azul-fundo: #e6e9f0;
  --azul-borda: #8d9ab5;
  --lido: #fbf4dd;
  --postit-fio: #d9c76a;
  --postit-tinta: #8a7a45;
  --realce: rgba(216, 207, 186, 0.22);
  --realce-leve: rgba(216, 207, 186, 0.15);
  --recuo: rgba(0, 0, 0, 0.02);
  --veu: rgba(35, 32, 27, 0.45);
  --veu-postit: rgba(60, 50, 30, 0.25);
  --sombra: rgba(43, 39, 33, 0.07);
  --sombra-media: rgba(43, 39, 33, 0.25);
  --sombra-forte: rgba(0, 0, 0, 0.3);
  --sombra-postit: rgba(60, 50, 30, 0.35);
  --grafico-rec-1: #9c2f42;
  --grafico-rec-2: #b45364;
  --grafico-rec-3: #c87c89;
  --grafico-rec-4: #dba7b0;
  --grafico-rec-5: #ecd0d5;
  --grafico-rec-receber: #e2b8bf;
  --grafico-rec-outras: #d9a0aa;
  --grafico-calor-1: #e7cdd0;
  --grafico-calor-2: #cf9aa2;
  --grafico-calor-3: #a85763;
  --grafico-desp-0: #8f8674;
  --grafico-desp-1: #a89e88;
  --grafico-desp-3: #ddd4bf;
  --grafico-desp-4: #e9e2d2;
}

/* Claro: as linhas do clássico sem o papel creme — branco e cinzas
   frios, o carmim da casa como acento. */
[data-tema="claro"] {
  color-scheme: light;
  --papel: #ffffff;
  --papel-linha: #f5f6f8;
  --papel-fundo: #eff1f4;
  --tinta: #1e2227;
  --tinta-suave: #555d67;
  --tinta-fraca: #848c96;
  --pauta: #e3e6ea;
  --pauta-forte: #c9ced5;
  --carmim: #8a1a2f;
  --carmim-claro: #ad3448;
  --perigo: #8a1a2f;
  --verde-selo: #2d6a48;
  --alerta: #9a5b12;
  --azul: #33507f;
  --campo: #ffffff;
  --sobre-acento: #ffffff;
  --postit: #fdf6c9;
  --postit-borda: #e4d284;

  --perigo-fundo: #ead6da;
  --perigo-fundo-claro: #f2e6e8;
  --perigo-leve: #f9f4f5;
  --perigo-veu: rgba(138, 26, 47, 0.06);
  --verde-fundo: #e0e9e4;
  --verde-fundo-claro: #e8efeb;
  --alerta-fundo: #f0e6db;
  --alerta-fundo-claro: #f4ede5;
  --azul-fundo: #e9ecf1;
  --azul-borda: #8f9fb9;
  --lido: #fef9dc;
  --postit-fio: #d0c07b;
  --postit-tinta: #777151;
  --realce: rgba(201, 206, 213, 0.3);
  --realce-leve: rgba(201, 206, 213, 0.2);
  --recuo: rgba(30, 34, 39, 0.025);
  --veu: rgba(24, 27, 31, 0.45);
  --veu-postit: rgba(24, 27, 31, 0.25);
  --sombra: rgba(30, 34, 39, 0.07);
  --sombra-media: rgba(30, 34, 39, 0.25);
  --sombra-forte: rgba(0, 0, 0, 0.3);
  --sombra-postit: rgba(30, 34, 39, 0.35);
  --grafico-rec-1: #a44c5d;
  --grafico-rec-2: #bb7a86;
  --grafico-rec-3: #ce9fa8;
  --grafico-rec-4: #e1c3c9;
  --grafico-rec-5: #f1e4e6;
  --grafico-rec-receber: #e3c8cd;
  --grafico-rec-outras: #d7b1b8;
  --grafico-calor-1: #ecdade;
  --grafico-calor-2: #d5adb4;
  --grafico-calor-3: #af6372;
  --grafico-desp-0: #767e88;
  --grafico-desp-1: #a3aab2;
  --grafico-desp-3: #dde0e5;
  --grafico-desp-4: #eaecef;
}

/* Grafite: escuro, de preto e cinzas. O carmim e as cores de estado
   sobem de luminosidade (o #82192c sobre quase preto não chega a 2:1),
   e o texto sobre o acento passa a ser escuro. */
[data-tema="grafite"] {
  color-scheme: dark;
  --papel: #1c1d20;
  --papel-linha: #232428;
  --papel-fundo: #131416;
  --tinta: #e7e5e0;
  --tinta-suave: #aeaaa3;
  --tinta-fraca: #86827b;
  --pauta: #2d2f34;
  --pauta-forte: #41444b;
  --carmim: #e47e8b;
  --carmim-claro: #f0a0aa;
  --perigo: #e47e8b;
  --verde-selo: #7cc49a;
  --alerta: #e0a960;
  --azul: #97b5e6;
  --campo: #151619;
  --sobre-acento: #16171a;
  --postit: #3a3423;
  --postit-borda: #6d6038;

  --perigo-fundo: #483238;
  --perigo-fundo-claro: #3a2c30;
  --perigo-leve: #2e262a;
  --perigo-veu: rgba(228, 126, 139, 0.1);
  --verde-fundo: #2f3e38;
  --verde-fundo-claro: #2a3632;
  --alerta-fundo: #43392d;
  --alerta-fundo-claro: #39322a;
  --azul-fundo: #323844;
  --azul-borda: #60718d;
  --lido: #302c22;
  --postit-fio: #796d49;
  --postit-tinta: #b6b09d;
  --realce: rgba(65, 68, 75, 0.35);
  --realce-leve: rgba(65, 68, 75, 0.25);
  --recuo: rgba(231, 229, 224, 0.03);
  --veu: rgba(0, 0, 0, 0.6);
  --veu-postit: rgba(0, 0, 0, 0.45);
  --sombra: rgba(0, 0, 0, 0.3);
  --sombra-media: rgba(0, 0, 0, 0.5);
  --sombra-forte: rgba(0, 0, 0, 0.6);
  --sombra-postit: rgba(0, 0, 0, 0.55);
  --grafico-rec-1: #b86973;
  --grafico-rec-2: #90555e;
  --grafico-rec-3: #70464d;
  --grafico-rec-4: #50363c;
  --grafico-rec-5: #402e33;
  --grafico-rec-receber: #583a40;
  --grafico-rec-outras: #70464d;
  --grafico-calor-1: #483238;
  --grafico-calor-2: #70464d;
  --grafico-calor-3: #b0656f;
  --grafico-desp-0: #928e87;
  --grafico-desp-1: #676665;
  --grafico-desp-3: #34363b;
  --grafico-desp-4: #2a2c31;
}

/* Oceano: azul-petróleo de acento sobre brancos azulados, verde de
   estado. O erro deixa de ser o acento e ganha vermelho próprio. */
[data-tema="oceano"] {
  color-scheme: light;
  --papel: #fbfdfd;
  --papel-linha: #eef5f6;
  --papel-fundo: #e8f0f2;
  --tinta: #172a33;
  --tinta-suave: #466370;
  --tinta-fraca: #7a939d;
  --pauta: #d5e3e6;
  --pauta-forte: #b0c7cc;
  --carmim: #1b5f7c;
  --carmim-claro: #2f7b98;
  --perigo: #b02a37;
  --verde-selo: #2a7a55;
  --alerta: #a3620e;
  --azul: #3a5a9a;
  --campo: #ffffff;
  --sobre-acento: #ffffff;
  --postit: #fbf5cf;
  --postit-borda: #ded07f;

  --perigo-fundo: #eed7d9;
  --perigo-fundo-claro: #f3e6e7;
  --perigo-leve: #f7f2f3;
  --perigo-veu: rgba(176, 42, 55, 0.06);
  --verde-fundo: #dce9e4;
  --verde-fundo-claro: #e4efeb;
  --alerta-fundo: #eee6d9;
  --alerta-fundo-claro: #f1ece3;
  --azul-fundo: #e6ebf2;
  --azul-borda: #91a3c7;
  --lido: #fbf8df;
  --postit-fio: #cabf77;
  --postit-tinta: #717555;
  --realce: rgba(176, 199, 204, 0.3);
  --realce-leve: rgba(176, 199, 204, 0.2);
  --recuo: rgba(23, 42, 51, 0.025);
  --veu: rgba(18, 34, 41, 0.45);
  --veu-postit: rgba(18, 34, 41, 0.25);
  --sombra: rgba(23, 42, 51, 0.07);
  --sombra-media: rgba(23, 42, 51, 0.25);
  --sombra-forte: rgba(0, 0, 0, 0.3);
  --sombra-postit: rgba(23, 42, 51, 0.35);
  --grafico-rec-1: #4c8298;
  --grafico-rec-2: #79a1b2;
  --grafico-rec-3: #9dbbc7;
  --grafico-rec-4: #c1d4db;
  --grafico-rec-5: #e0eaee;
  --grafico-rec-receber: #c5d7de;
  --grafico-rec-outras: #afc7d1;
  --grafico-calor-1: #d7e4e8;
  --grafico-calor-2: #aac4cf;
  --grafico-calor-3: #6392a5;
  --grafico-desp-0: #6a8590;
  --grafico-desp-1: #92aab2;
  --grafico-desp-3: #ccdcdf;
  --grafico-desp-4: #deeaec;
}

/* Outono: laranja queimado, oliva e mostarda sobre papel quente. */
[data-tema="outono"] {
  color-scheme: light;
  --papel: #fffaf3;
  --papel-linha: #f8ede0;
  --papel-fundo: #f5ede3;
  --tinta: #3a2a1f;
  --tinta-suave: #765b47;
  --tinta-fraca: #a08670;
  --pauta: #eddcc7;
  --pauta-forte: #dbc1a1;
  --carmim: #a84a16;
  --carmim-claro: #c4642a;
  --perigo: #9b2a1f;
  --verde-selo: #56722e;
  --alerta: #8f6409;
  --azul: #46607a;
  --campo: #fffdf9;
  --sobre-acento: #ffffff;
  --postit: #fbf1c8;
  --postit-borda: #dfc77a;

  --perigo-fundo: #edd5cd;
  --perigo-fundo-claro: #f4e3dc;
  --perigo-leve: #faf0e8;
  --perigo-veu: rgba(155, 42, 31, 0.06);
  --verde-fundo: #e6e6d5;
  --verde-fundo-claro: #ecebdd;
  --alerta-fundo: #eee4d0;
  --alerta-fundo-claro: #f3ead9;
  --azul-fundo: #ebe9e6;
  --azul-borda: #99a5b0;
  --lido: #fcf4d7;
  --postit-fio: #cfb771;
  --postit-tinta: #847148;
  --realce: rgba(219, 193, 161, 0.3);
  --realce-leve: rgba(219, 193, 161, 0.2);
  --recuo: rgba(58, 42, 31, 0.025);
  --veu: rgba(46, 34, 25, 0.45);
  --veu-postit: rgba(46, 34, 25, 0.25);
  --sombra: rgba(58, 42, 31, 0.07);
  --sombra-media: rgba(58, 42, 31, 0.25);
  --sombra-forte: rgba(0, 0, 0, 0.3);
  --sombra-postit: rgba(58, 42, 31, 0.35);
  --grafico-rec-1: #bb7147;
  --grafico-rec-2: #cd9473;
  --grafico-rec-3: #dab096;
  --grafico-rec-4: #e8ccba;
  --grafico-rec-5: #f5e5d8;
  --grafico-rec-receber: #ead0be;
  --grafico-rec-outras: #e1bea8;
  --grafico-calor-1: #f1ded0;
  --grafico-calor-2: #e0bba3;
  --grafico-calor-3: #c4825d;
  --grafico-desp-0: #937964;
  --grafico-desp-1: #bba186;
  --grafico-desp-3: #e8d5bd;
  --grafico-desp-4: #f1e2d0;
}

/* Rosa: framboesa sobre brancos rosados; o erro em vermelho à parte. */
[data-tema="rosa"] {
  color-scheme: light;
  --papel: #fffafb;
  --papel-linha: #fbf0f3;
  --papel-fundo: #f7eef1;
  --tinta: #33212a;
  --tinta-suave: #77535f;
  --tinta-fraca: #a58893;
  --pauta: #f0dee5;
  --pauta-forte: #e0c0cd;
  --carmim: #a3295a;
  --carmim-claro: #c14878;
  --perigo: #b0262e;
  --verde-selo: #3a775a;
  --alerta: #a35d1a;
  --azul: #4c5a92;
  --campo: #ffffff;
  --sobre-acento: #ffffff;
  --postit: #fdf4cc;
  --postit-borda: #e6d084;

  --perigo-fundo: #f1d4d6;
  --perigo-fundo-claro: #f6e3e4;
  --perigo-leve: #fbeff1;
  --perigo-veu: rgba(176, 38, 46, 0.06);
  --verde-fundo: #e1e6e3;
  --verde-fundo-claro: #e9ece9;
  --alerta-fundo: #f1e2d9;
  --alerta-fundo-claro: #f5e9e2;
  --azul-fundo: #ebe8ef;
  --azul-borda: #9da2c1;
  --lido: #fef6dc;
  --postit-fio: #d4bf7b;
  --postit-tinta: #847052;
  --realce: rgba(224, 192, 205, 0.3);
  --realce-leve: rgba(224, 192, 205, 0.2);
  --recuo: rgba(51, 33, 42, 0.025);
  --veu: rgba(41, 26, 34, 0.45);
  --veu-postit: rgba(41, 26, 34, 0.25);
  --sombra: rgba(51, 33, 42, 0.07);
  --sombra-media: rgba(51, 33, 42, 0.25);
  --sombra-forte: rgba(0, 0, 0, 0.3);
  --sombra-postit: rgba(51, 33, 42, 0.35);
  --grafico-rec-1: #b7577d;
  --grafico-rec-2: #ca819e;
  --grafico-rec-3: #d8a2b7;
  --grafico-rec-4: #e7c4d1;
  --grafico-rec-5: #f4e1e8;
  --grafico-rec-receber: #e9c8d4;
  --grafico-rec-outras: #e0b3c4;
  --grafico-calor-1: #f0d9e1;
  --grafico-calor-2: #deafc1;
  --grafico-calor-3: #c06c8e;
  --grafico-desp-0: #977883;
  --grafico-desp-1: #c0a1ad;
  --grafico-desp-3: #ecd6de;
  --grafico-desp-4: #f4e4ea;
}

/* O que não muda com o tema: as famílias tipográficas e o branco do
   documento (PDF, imagem do comprovante, QR) — papel de verdade é
   branco em qualquer tema. */
:root {
  --documento: #fff;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
}


* { box-sizing: border-box; }

/* O fundo também no <html>: sem ele, o Safari mostra branco ao puxar a
   página além da borda — no tema escuro, um clarão. */
html { -webkit-text-size-adjust: 100%; background: var(--papel-fundo); }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--papel-fundo);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.45;
}

/* ---------------- Cabeçalho ---------------- */

.cabecalho {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.85rem 1.5rem;
  background: var(--papel);
  border-bottom: 1px solid var(--pauta-forte);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Símbolo e nome são uma assinatura só, não duas colunas: o intervalo
   entre eles fica menor que o do resto do cabeçalho. */
.marca { display: flex; align-items: center; gap: 0.5rem; }

/* O V da Vera, que é também o traço de conferido. Vem de arquivo em vez
   de desenhado em CSS: é a marca, e marca se troca sem mexer em folha
   de estilo. O mesmo arquivo serve de favicon — que fica carmim, a
   marca —, mas no cabeçalho ele é só a máscara: a tinta é o acento do
   tema, senão o V carmim destoava do Outono e sumia no Grafite.

   Um pouco mais alto que o bloco de texto ao lado, para liderar o
   conjunto sem virar ilustração. Como o arquivo é recortado no traçado,
   este tamanho é o do símbolo, não o de uma caixa com folga em volta —
   é o que permite aproximá-lo do texto sem que reste um vão. */
.marca-selo {
  width: 40px; height: 40px; flex: none; display: block;
  background: var(--carmim);
  -webkit-mask: url(/vera-v.svg) center / contain no-repeat;
  mask: url(/vera-v.svg) center / contain no-repeat;
}

.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-titulo {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.marca-sub { font-size: 0.72rem; color: var(--tinta-fraca); letter-spacing: 0.04em; text-transform: uppercase; }

/* Seletor de serventia (pesquisável). Encostado à direita, longe da
   assinatura: ali sobra espaço, e o nome da serventia — que muda de
   sentido a cada troca — não disputa a vista com a marca, que nunca
   muda. */
.serventia-seletor { position: relative; margin-left: auto; }

.serventia-atual {
  display: flex; align-items: center; gap: 0.55rem;
  background: var(--papel-linha);
  border: 1px solid var(--pauta-forte);
  border-radius: 3px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-family: var(--serif);
  color: var(--tinta);
  min-width: 230px;
  text-align: left;
}
.serventia-atual:hover { border-color: var(--tinta-suave); }
/* Uma serventia só: o mesmo lugar vira rótulo — sem seta, sem cursor de
   botão, sem convite a um clique que não leva a nada. */
.serventia-seletor.unica .chevron { display: none; }
.serventia-seletor.unica .serventia-atual { cursor: default; }
.serventia-seletor.unica .serventia-atual:hover { border-color: var(--pauta-forte); }
.serventia-nome { font-weight: 600; font-size: 0.95rem; }
.serventia-cns {
  font-family: var(--mono); font-size: 0.75rem; color: var(--tinta-fraca);
  margin-left: auto;
}
.chevron {
  width: 0; height: 0; margin-left: 0.2rem;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--tinta-suave);
}

.prefs-botao {
  background: var(--papel-linha); border: 1px solid var(--pauta-forte);
  border-radius: 3px; width: 32px; height: 32px; cursor: pointer;
  font-size: 1rem; color: var(--tinta-suave);
}
.prefs-botao:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.prefs-painel {
  position: absolute; top: 56px; right: 1.5rem;
  background: var(--papel); border: 1px solid var(--tinta-suave);
  border-radius: 3px; box-shadow: 0 8px 20px var(--sombra);
  padding: 0.7rem 0.9rem; z-index: 50; font-size: 0.85rem;
}
.prefs-item { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; cursor: pointer; }
.prefs-item + .prefs-item { margin-top: 0.5rem; }

/* As opções da tela (o balancete, por ora) vêm sob um título como as
   colunas: a primeira precisa do respiro que só o par ganha. A escolha
   de um entre poucos fica lado a lado — são os dois nomes do mesmo
   documento, e vê-los juntos é o que diz que se escolhe um deles. */
.prefs-titulo + .prefs-item,
.prefs-titulo + .prefs-escolha { margin-top: 0.5rem; }
.prefs-escolha { display: flex; gap: 1.1rem; }
.prefs-escolha .prefs-item + .prefs-item { margin-top: 0; }

/* O tema abre o painel: o primeiro título não precisa do fio que separa
   os blocos. */
#prefsTema .prefs-titulo { margin-top: 0; padding-top: 0; border-top: 0; }

/* As amostras dos temas: uma folha em miniatura — fundo, papel, a faixa
   do acento e duas pautas de texto — nas cores do próprio tema (o botão
   carrega o data-tema). A escolhida ganha o contorno no acento dela. */
.temas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem;
  margin-top: 0.5rem;
}
.tema-amostra {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem;
  padding: 0.35rem; cursor: pointer; font: inherit;
  background: var(--papel-fundo); color: var(--tinta);
  border: 1px solid var(--pauta-forte); border-radius: 4px;
}
.tema-amostra:hover { border-color: var(--tinta-suave); }
.tema-amostra[aria-pressed="true"] {
  border-color: var(--carmim); box-shadow: 0 0 0 1px var(--carmim);
}
.tema-amostra-papel {
  display: flex; flex-direction: column; gap: 0.2rem;
  height: 2.6rem; padding: 0.3rem 0.35rem;
  background: var(--papel); border: 1px solid var(--pauta); border-radius: 2px;
}
.tema-amostra-acento { height: 0.35rem; width: 55%; background: var(--carmim); border-radius: 1px; }
.tema-amostra-linha { height: 0.18rem; background: var(--tinta-fraca); border-radius: 1px; }
.tema-amostra-curta { width: 65%; background: var(--pauta-forte); }
.tema-amostra-nome { font-size: 0.74rem; text-align: left; }

/* Colunas dos lançamentos, pela engrenagem: visibilidade e ordem. */
.prefs-titulo {
  margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--pauta);
  font-size: 0.72rem; color: var(--tinta-fraca); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.prefs-coluna {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 0.3rem;
}
.prefs-coluna label { display: flex; gap: 0.4rem; align-items: center; cursor: pointer; }
.prefs-coluna-setas button {
  border: 1px solid var(--pauta-forte); background: var(--papel);
  border-radius: 2px; cursor: pointer; color: var(--tinta-suave);
  padding: 0 0.3rem; font-size: 0.75rem;
}
.prefs-coluna-setas button:disabled { opacity: 0.35; cursor: default; }
.prefs-coluna-setas button:hover:not(:disabled) { border-color: var(--tinta-suave); }

/* Cabeçalho arrastável da tabela de lançamentos. */
th.col-arrastavel { cursor: pointer; user-select: none; }
th.col-arrastavel:hover { color: var(--carmim); }
th.col-alvo { border-bottom: 2px solid var(--carmim); }

.serventia-lista {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 100%;
  background: var(--papel);
  border: 1px solid var(--tinta-suave);
  border-radius: 3px;
  box-shadow: 0 8px 24px var(--sombra);
  z-index: 50;
  overflow: hidden;
}
.serventia-busca {
  width: 100%; border: none; border-bottom: 1px solid var(--pauta);
  padding: 0.55rem 0.7rem; font-family: var(--sans); font-size: 0.85rem;
  background: var(--papel-linha); color: var(--tinta); outline: none;
}
.serventia-lista ul { list-style: none; margin: 0; padding: 0.25rem; max-height: 260px; overflow-y: auto; }
.serventia-lista li {
  padding: 0.45rem 0.6rem; cursor: pointer; border-radius: 2px;
  display: flex; align-items: baseline; gap: 0.6rem;
}
.serventia-lista li:hover { background: var(--papel-linha); }
.serventia-lista li .nome { font-family: var(--serif); font-weight: 600; }
.serventia-lista li .cns { font-family: var(--mono); font-size: 0.72rem; color: var(--tinta-fraca); margin-left: auto; }
.serventia-lista li.selecionada .nome::after { content: " ✓"; color: var(--carmim); }

/* ---------------- Menu ---------------- */

.menu {
  display: flex; gap: 0.25rem;
  padding: 0 1.5rem;
  background: var(--papel);
  border-bottom: 1px solid var(--pauta-forte);
  position: sticky; top: 57px; z-index: 35;
}
.menu-grupo { position: relative; }
.menu-botao {
  background: none; border: none; cursor: pointer;
  padding: 0.6rem 0.9rem; font-family: var(--sans); font-size: 0.9rem;
  color: var(--tinta-suave); border-bottom: 2px solid transparent;
}
.menu-botao:hover, .menu-grupo.aberto .menu-botao { color: var(--tinta); }
.menu-grupo.tem-ativo .menu-botao { border-bottom-color: var(--carmim); color: var(--tinta); }
.menu-drop {
  position: absolute; top: 100%; left: 0;
  background: var(--papel);
  border: 1px solid var(--tinta-suave); border-radius: 3px;
  box-shadow: 0 8px 20px var(--sombra);
  min-width: 190px; padding: 0.25rem; display: none; z-index: 45;
}
.menu-grupo.aberto .menu-drop { display: block; }
.menu-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 0.5rem 0.7rem; border-radius: 2px;
  font-family: var(--sans); font-size: 0.88rem; color: var(--tinta);
}
.menu-item:hover { background: var(--papel-linha); }
.menu-item.ativo { color: var(--carmim); font-weight: 600; }
/* Item de raiz: um menu-item que vive na barra, vestido de menu-botao —
   a Visão geral é uma tela só, e abrir um menu de um item seria
   cerimônia sem conteúdo. */
.menu-item.menu-raiz {
  display: inline-block; width: auto;
  padding: 0.6rem 0.9rem; font-size: 0.9rem; color: var(--tinta-suave);
  border-bottom: 2px solid transparent; border-radius: 0;
}
.menu-item.menu-raiz:hover { background: none; color: var(--tinta); }
.menu-item.menu-raiz.ativo {
  border-bottom-color: var(--carmim); color: var(--tinta); font-weight: 400;
}
/* display: block acima vence o [hidden] do navegador — sem esta linha, o
   item de administração apareceria a quem não é administrador (o
   servidor recusa, mas a tela não deve oferecer o que vai falhar). */
.menu-item[hidden] { display: none; }

/* ---------------- Barra de período ---------------- */

.periodo-barra {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.8rem;
  padding: 0.7rem 1.5rem;
  background: var(--papel-linha);
  border-bottom: 1px solid var(--pauta);
}
.periodo-campos { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--tinta-suave); }
.periodo-campos input[type="date"] {
  font-family: var(--mono); font-size: 0.85rem;
  border: 1px solid var(--pauta-forte); border-radius: 3px;
  padding: 0.3rem 0.45rem; background: var(--papel); color: var(--tinta);
}
/* As setas que andam o período inteiro: mesmo peso visual dos campos
   de data que ladeiam, e nunca competindo com eles. */
.periodo-seta {
  background: var(--papel); border: 1px solid var(--pauta-forte);
  border-radius: 3px; cursor: pointer;
  width: 1.7rem; height: 1.7rem; padding: 0; line-height: 1;
  font-family: var(--serif); font-size: 1.1rem; color: var(--tinta-suave);
}
.periodo-seta:hover { border-color: var(--carmim); color: var(--carmim); }
.periodo-atalhos { display: flex; gap: 0.35rem; }
.periodo-atalhos button {
  background: var(--papel); border: 1px solid var(--pauta-forte);
  border-radius: 3px; padding: 0.35rem 0.7rem; cursor: pointer;
  font-family: var(--sans); font-size: 0.82rem; color: var(--tinta-suave);
}
.periodo-atalhos button:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.periodo-atalhos button.ativo {
  background: var(--carmim); border-color: var(--carmim); color: var(--sobre-acento);
}

/* ---------------- Botões ---------------- */

/* Primário e secundário são de toda a casa — inclusive do login, que só
   carrega esta folha e a paineis.css. Moram aqui, não na despesas.css. */
.botao-primario, .botao-secundario {
  border-radius: 3px; padding: 0.4rem 0.9rem; cursor: pointer;
  font-family: var(--sans); font-size: 0.85rem;
}
.botao-primario { background: var(--carmim); border: 1px solid var(--carmim); color: var(--sobre-acento); }
.botao-primario:hover { background: var(--carmim-claro); border-color: var(--carmim-claro); }
.botao-primario:disabled {
  background: var(--pauta); border-color: var(--pauta-forte);
  color: var(--tinta-fraca); cursor: not-allowed;
}
.botao-secundario {
  background: var(--papel); border: 1px solid var(--pauta-forte); color: var(--tinta);
}
.botao-secundario:hover { border-color: var(--tinta-suave); }

/* ---------------- Conteúdo ---------------- */

.conteudo { padding: 1.5rem; max-width: 1180px; margin: 0 auto; }
/* As telas colunadas (VIEWS_LARGAS, no nucleo.js) usam a tela grande.
   Há teto mesmo assim: numa tela ultralarga a linha longa demais já não
   se lê de uma ponta à outra. Os tetos das colunas de texto sobem junto,
   em despesas.css. */
.conteudo.conteudo-largo { max-width: 1840px; }

.vazio {
  text-align: center; color: var(--tinta-fraca);
  padding: 4rem 1rem; font-family: var(--serif); font-size: 1.05rem;
}

.secao-titulo {
  font-family: var(--serif); font-size: 1rem; font-weight: 600;
  color: var(--tinta); margin: 1.6rem 0 0.5rem;
  padding-bottom: 0.3rem; border-bottom: 1px solid var(--pauta-forte);
  display: flex; align-items: baseline; gap: 0.6rem;
}
.secao-titulo .nat-cod {
  font-family: var(--mono); font-size: 0.78rem; color: var(--sobre-acento);
  background: var(--tinta); border-radius: 2px; padding: 0.05rem 0.4rem;
}