/* Visual da versão 2 (epic #865) — a camada que só existe para quem tem a
   marca "visual novo" (core/visual.py; decisão 14 do dono, 2026-10-03).

   Carregada DEPOIS do base.css, só quando <html data-visual="novo">, por
   core/base.html e templates/admin/base_site.html. O base.css continua
   sendo o visual antigo, intacto, para todo mundo; esta folha sobrepõe.
   Quando o padrão virar "novo" (uma versão depois do lançamento) e o
   antigo sair (duas versões depois), o que está aqui desce para o base.css.

   Esta folha é a FUNDAÇÃO: tokens (escala de tipo, grade, paleta com
   nome, raio, sombras), a fonte própria, o anel de foco e o SHELL
   (cabeçalho de 44 px, barra lateral com ícones, grupos e item ativo,
   telas de entrada). Os COMPONENTES (pílula, botões, toast, diálogo,
   estado vazio…) moram em componentes.css, carregada logo depois desta.

   Duas regras que todo bloco daqui obedece, conferidas por script na
   suíte:
   - "nunca metade" (CLAUDE.md): regra que muda o FUNDO num estado declara
     junto a COR DO TEXTO, e vice-versa — core/lint_contraste.py;
   - "escala de tipo": todo font-size sai de um token --tipo-N — nada de
     43 tamanhos de volta — core/lint_escala.py. */

/* ---- Fonte própria (decisão 11 do dono) ------------------------------ */

/* Inter (SIL Open Font License), variável de 100 a 900, servida pelo
   nosso nginx em /static/ — nenhuma chamada externa, como toda fonte do
   sistema (ver fontes.css, do Propoutmos). Dois arquivos: o latino cobre
   o português inteiro (acentos, cedilha); o latino estendido só é baixado
   se um texto pedir um caractere dele (unicode-range). ~48 KB + ~85 KB. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fontes/inter-latin-ext.1ad231aac0a8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fontes/inter-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ---------------------------------------------------------- */

/* Tema ESCURO (o padrão do sistema; casa também sem data-theme). */
html[data-theme="dark"],
:root {
  /* A fonte do sistema passa a ser a nossa; a pilha do sistema operacional
     fica de reserva para o instante antes de o arquivo chegar. */
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala de tipo: cinco tamanhos, do rótulo miúdo ao título de página.
     Toda regra de tamanho da versão 2 vem daqui — nada de 43 tamanhos. */
  --tipo-1: 0.78rem;   /* rótulo miúdo, meta, contagem */
  --tipo-2: 0.875rem;  /* texto de apoio, cabeçalho de coluna, pílula */
  --tipo-3: 1rem;      /* texto corrido */
  --tipo-4: 1.15rem;   /* título de seção (h2) */
  --tipo-5: 1.5rem;    /* título de página (h1) */
  /* Grade de espaçamento de 4 px. */
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-6: 1.5rem;
  --espaco-8: 2rem;
  /* Dois raios e duas sombras, no lugar de 19 e 27. */
  --raio: 6px;
  --raio-pilula: 999px;
  --sombra-leve: 0 1px 2px rgba(0, 0, 0, 0.18);
  --sombra-flutuante: 0 8px 24px rgba(0, 0, 0, 0.28);
  /* Altura do cabeçalho do sistema (3.4 do relatório): uma variável, para
     o /admin/ — que posiciona a barra lateral por conta própria — ler a
     mesma medida. */
  --altura-topo: 44px;

  /* Tokens que os módulos já pediam sem existir ("fantasmas" do
     levantamento de 2026-10-03). Definidos uma vez, para o acento, o
     perigo e as bordas suaves lerem igual em todo módulo. */
  --cor-acento: #5B9BE0;
  --cor-destaque: #5B9BE0;
  --cor-secundaria-escura: #4A86C8;
  --cor-perigo: #E5837B;
  --cor-perigo-suave: rgba(229, 131, 123, 0.16);
  --cor-aviso-suave: rgba(224, 178, 91, 0.16);
  --cor-borda-suave: #2B3543;
  --cor-hover-linha: rgba(127, 145, 165, 0.10);
  --cor-pilula-fundo: rgba(127, 145, 165, 0.18);
  --cor-pill-fundo: rgba(127, 145, 165, 0.18);
  --cor-pill-texto: #E7ECF2;
  --cor-fundo-campo: #222B37;
  --cor-fundo-suave: #1B222C;

  /* Paleta SEMÂNTICA (3.2 do relatório): cinco significados, cada um com
     o tom cheio (texto, ícone, borda) e o fundo suave da pílula. Pílula de
     status, situação de contrato e aviso escolhem pelo NOME, nunca pelo
     hex. O fundo suave é um verniz translúcido: o texto por cima segue o
     tema e continua legível nos dois modos. */
  --sem-info: #5B9BE0;
  --sem-info-suave: rgba(91, 155, 224, 0.18);
  --sem-sucesso: #6FCB84;
  --sem-sucesso-suave: rgba(111, 203, 132, 0.18);
  --sem-aviso: #E0B25B;
  --sem-aviso-suave: rgba(224, 178, 91, 0.18);
  --sem-erro: #E5837B;
  --sem-erro-suave: rgba(229, 131, 123, 0.18);
  --sem-neutro: #9AA7B5;
  --sem-neutro-suave: rgba(154, 167, 181, 0.18);

  /* Paleta CATEGÓRICA: oito cores com nome para etiqueta, fila, carteira,
     coluna e avatar. Uma pílula categórica usa `--pc: var(--cat-coral)`;
     o fundo nasce por color-mix e o texto segue o tema. */
  --cat-azul: #5B9BE0;
  --cat-verde-mar: #3FB8A8;
  --cat-lima: #9CCB4B;
  --cat-ambar: #E0B25B;
  --cat-coral: #E5837B;
  --cat-rosa: #D982B5;
  --cat-violeta: #9C8BE0;
  --cat-ardosia: #8A9BAE;
}

/* Tema CLARO. */
html[data-theme="light"] {
  --sombra-leve: 0 1px 2px rgba(0, 0, 0, 0.08);
  --sombra-flutuante: 0 8px 24px rgba(0, 0, 0, 0.14);

  --cor-acento: #1E73BE;
  --cor-destaque: #1E73BE;
  --cor-secundaria-escura: #185E9C;
  --cor-perigo: #B3261E;
  --cor-perigo-suave: rgba(179, 38, 30, 0.10);
  --cor-aviso-suave: rgba(154, 106, 0, 0.12);
  --cor-borda-suave: #E1E5EA;
  --cor-hover-linha: rgba(31, 41, 51, 0.05);
  --cor-pilula-fundo: rgba(31, 41, 51, 0.08);
  --cor-pill-fundo: rgba(31, 41, 51, 0.08);
  --cor-pill-texto: #1F2933;
  --cor-fundo-campo: #FFFFFF;
  --cor-fundo-suave: #F4F6F8;

  --sem-info: #1E73BE;
  --sem-info-suave: rgba(30, 115, 190, 0.12);
  --sem-sucesso: #1E7B34;
  --sem-sucesso-suave: rgba(30, 123, 52, 0.12);
  --sem-aviso: #9A6A00;
  --sem-aviso-suave: rgba(154, 106, 0, 0.12);
  --sem-erro: #B3261E;
  --sem-erro-suave: rgba(179, 38, 30, 0.10);
  --sem-neutro: #5A6672;
  --sem-neutro-suave: rgba(90, 102, 114, 0.12);

  --cat-azul: #1E73BE;
  --cat-verde-mar: #0F8B7D;
  --cat-lima: #5F8F10;
  --cat-ambar: #9A6A00;
  --cat-coral: #B3261E;
  --cat-rosa: #A8347C;
  --cat-violeta: #6A4FC7;
  --cat-ardosia: #5A6672;
}

/* ---- Foco ------------------------------------------------------------ */

/* Anel de foco visível e igual em todo lugar (3.8 do relatório): 2 px na
   cor de acento, fora da peça. Só para quem navega por teclado
   (:focus-visible) — o clique do mouse não ganha moldura. Regras mais
   específicas do base.css continuam valendo onde já existiam. */
:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

/* Barra de rolagem fina e na cor do tema (3.10) nas peças que rolam por
   dentro: barra lateral, conteúdo, janelinhas. */
.barra-lateral,
.conteudo-principal,
.janelinha,
.sino-painel,
.dica-balao {
  scrollbar-width: thin;
  scrollbar-color: var(--cor-borda-campo) transparent;
}

/* ---- Tipografia ------------------------------------------------------ */

/* Os três níveis de título vêm da escala; o h2 e o h3 deixam de ficar no
   tamanho do navegador. Só tamanho, peso e respiro — a cor segue o tema. */
h1 {
  font-size: var(--tipo-5);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h2 {
  font-size: var(--tipo-4);
  font-weight: 600;
  line-height: 1.3;
}

h3 {
  font-size: var(--tipo-3);
  font-weight: 600;
  line-height: 1.35;
}

/* Cabeçalho de coluna: miúdo, apagado, em caixa alta e baixa. */
th {
  font-size: var(--tipo-2);
  font-weight: 600;
}

/* Rótulo de campo no tamanho de apoio, acima do campo (3.7). */
label {
  font-size: var(--tipo-2);
}

/* Cabeçalho de página do núcleo na versão 2: mais respiro embaixo e a
   trilha no tamanho de apoio. */
.cabecalho-pagina {
  margin-bottom: var(--espaco-6);
}

.trilha {
  font-size: var(--tipo-2);
}

.cabecalho-pagina-frase {
  font-size: var(--tipo-3);
}

/* Link dentro de tabela sublinha só no hover (3.10); link em prosa
   continua sublinhado, como o base.css manda. Cor declarada nos dois
   estados. */
td a {
  color: var(--cor-acento);
  text-decoration: none;
}

td a:hover,
td a:focus-visible {
  color: var(--cor-acento);
  text-decoration: underline;
}

/* ---- Shell: cabeçalho ------------------------------------------------ */

/* Cabeçalho de 44 px (3.4 do relatório): logo à esquerda, a busca no
   centro, sino e avatar à direita. A faixa vermelha de dev fica em cima,
   igual à do visual antigo (pedido do dono, 2026-10-03). A altura é fixa para a faixa
   do /admin/ (que posiciona por CSS) e a do sistema baterem. */
header.topo {
  height: var(--altura-topo);
  padding: 0 var(--espaco-4);
  gap: var(--espaco-4);
}

header.topo img {
  height: 22px;
}

/* A linha "Bem-vindo(a), Fulano" sai: o nome está no avatar e no menu
   dele, e a faixa de 44 px não tem onde pôr duas linhas. A linha de
   conquistas do Abana (gatilho da janelinha) continua, até o lote F
   levá-la para a home do módulo. */
.topo-bemvindo {
  display: none;
}

.topo-boasvindas {
  flex-direction: row;
  align-items: center;
}

.conquistas-linha {
  font-size: var(--tipo-1);
}

.topo-esquerda {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  flex: 0 0 auto;
}

/* A busca do sistema (Ctrl+K, lote F — issue #871) já tem o lugar
   reservado no centro. Até o lote F ela é uma AÇÃO INDISPONÍVEL: visível,
   desabilitada e com o motivo no balão (diretriz de 2026-08-11/31) — não
   some, porque botão que some parece funcionalidade faltando. */
.topo-busca {
  flex: 1 1 auto;
  max-width: 26rem;
  margin: 0 auto;
  min-width: 0;
}

.topo-busca .dica-balao {
  left: 50%;
}

.topo-busca-botao {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  width: 100%;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-secao);
  color: var(--cor-texto-suave);
  font-size: var(--tipo-2);
  text-align: left;
  cursor: not-allowed;
}

.topo-busca-botao:hover,
.topo-busca-botao:focus-visible {
  border-color: var(--cor-borda);
  background: var(--cor-secao);
  color: var(--cor-texto-suave);
}

.topo-busca-botao .icone {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.topo-busca-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topo-busca-botao kbd {
  font-family: inherit;
  font-size: var(--tipo-1);
  padding: 0 0.3rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 3px;
  color: var(--cor-texto-suave);
  background: transparent;
}

/* Botão desabilitado do cabeçalho: a regra global de <button> desabilitado
   (opacity .5 + pointer-events none) tiraria dele o hover que abre o
   balão. Aqui a peça em volta (.acao-bloqueada) é o gatilho, então o botão
   fica inteiro e sem eventos próprios. */
.topo-busca button:disabled {
  opacity: 1;
  pointer-events: none;
}

/* O alternador de visual, estando no visual novo, oferece a volta — fica
   um pouco mais apagado, porque agora é a opção rara. Cores declaradas
   por inteiro nos dois estados. */
.topo-visual-botao {
  border-color: transparent;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: var(--tipo-1);
}

.topo-visual-botao:hover,
.topo-visual-botao:focus-visible {
  border-color: var(--cor-borda-campo);
  background: transparent;
  color: var(--cor-texto);
}

/* Avatar do cabeçalho com cor estável por pessoa (3.8): a matiz vem do
   nome, calculada no servidor (core/templatetags/icones.py, `matiz_de`),
   e a mesma pessoa tem a mesma cor em toda tela. Texto branco sobre um
   tom escuro o bastante nos dois temas; o hover só escurece um pouco. */
.menu-usuario-iniciais {
  width: 1.75rem;
  height: 1.75rem;
  font-size: var(--tipo-1);
  background: hsl(var(--matiz, 212), 55%, 42%);
  color: #FFFFFF;
}

.menu-usuario summary:hover .menu-usuario-iniciais,
.menu-usuario[open] .menu-usuario-iniciais {
  background: hsl(var(--matiz, 212), 55%, 36%);
  color: #FFFFFF;
}

.menu-usuario-avatar {
  width: 1.75rem;
  height: 1.75rem;
}

/* Interface flutuante com a sombra única da versão 2. */
.menu-engrenagem-itens,
.menu-mais-itens,
.dica-balao,
.sino-painel,
.tabela-filtro-painel {
  box-shadow: var(--sombra-flutuante);
}

/* O banner "O SabedorIA foi atualizado" sai de todas as telas: a bolinha
   ao lado da versão (barra lateral) e o item Novidades do menu já dizem
   isso — e no visual novo a bolinha aparece também com a barra encolhida. */
.banner-novidades {
  display: none;
}

/* ---- Shell: barra lateral -------------------------------------------- */

/* A barra lateral vira uma superfície própria, um tom abaixo do conteúdo,
   como no mockup aprovado (seção 3 do relatório). Fundo que segue o tema,
   texto herdado — legível nos dois modos. */
.barra-lateral {
  background: var(--cor-secao);
  border-right: 1px solid var(--cor-borda);
  padding: var(--espaco-3) var(--espaco-2);
}

/* Os itens de primeiro nível (Início, Pedidos, cada módulo) se REORDENAM
   por área sem o HTML mudar (o visual antigo lê a ordem de sempre): a
   lista vira coluna flex e cada item recebe a sua posição pelo data-grupo
   que o template declara. Os rótulos de grupo ("Operações", "Comercial")
   só existem no HTML do visual novo e entram nas posições 10, 20, 30, 40. */
.barra-lateral-links {
  display: flex;
  flex-direction: column;
}

.barra-lateral-links > [data-grupo="inicio"] { order: 0; }
.barra-lateral-links > .barra-grupo[data-grupo="operacoes"] { order: 10; }
.barra-lateral-links > [data-grupo="operacoes"] { order: 11; }
.barra-lateral-links > .barra-grupo[data-grupo="comercial"] { order: 20; }
.barra-lateral-links > [data-grupo="comercial"] { order: 21; }
.barra-lateral-links > .barra-grupo[data-grupo="financeiro"] { order: 30; }
.barra-lateral-links > [data-grupo="financeiro"] { order: 31; }
.barra-lateral-links > .barra-grupo[data-grupo="equipe"] { order: 40; }
.barra-lateral-links > [data-grupo="equipe"] { order: 41; }

/* Rótulo de grupo: miúdo, apagado, com respiro em cima. Só aparece quando
   há pelo menos um módulo embaixo dele — quem decide é o template, que só
   o escreve quando algum módulo do grupo é renderizado. */
.barra-grupo {
  margin: var(--espaco-4) 0 var(--espaco-1);
  padding: 0 0.65rem;
  font-size: var(--tipo-1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
  white-space: nowrap;
}

/* Itens da barra: hover com verniz translúcido em vez de trocar para o
   mesmo fundo da barra (que, sobre a barra já cinza, não aparecia). Cor do
   texto declarada junto. */
.barra-lateral a,
.barra-lateral-links summary {
  font-size: var(--tipo-2);
  padding: 0.4rem 0.65rem;
  color: var(--cor-texto);
}

.barra-lateral a:hover,
.barra-lateral-links summary:hover {
  background: var(--cor-hover-linha);
  color: var(--cor-texto);
}

/* O item de primeiro nível (módulo, Início, Pedidos): ícone + nome numa
   linha, a setinha ▸ do <details> à direita e miúda. */
.barra-lateral-links > a,
.barra-lateral-links > details > summary {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font-size: var(--tipo-2);
  font-weight: 500;
  color: var(--cor-texto);
  margin-top: 0;
}

.barra-lateral-links > details > summary:hover {
  background: var(--cor-hover-linha);
  color: var(--cor-texto);
}

.barra-lateral-links > details > summary::before {
  order: 2;
  margin-left: auto;
  width: auto;
  font-size: var(--tipo-1);
  color: var(--cor-texto-suave);
}

.icone-modulo {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--cor-texto-suave);
}

.barra-rotulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Submenu alinhado com o texto do módulo (depois do ícone), divisória
   fina à esquerda no lugar do recuo solto. */
.barra-lateral-links .submenu {
  margin-left: 1.15rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--cor-borda);
}

.barra-lateral-links .submenu a {
  font-size: var(--tipo-2);
  padding: 0.3rem 0.55rem;
}

/* ITEM ATIVO (2.6 do relatório): o link da tela atual ganha fundo de
   acento translúcido, texto cheio e um fio à esquerda; o módulo que o
   contém fica em negrito e com o ícone na cor de acento. Quem marca é o
   script do fim de _barra_lateral.html (aria-current). Fundo e cor
   declarados juntos nos dois estados. */
.barra-lateral a[aria-current="page"],
.barra-lateral a[aria-current="page"]:hover {
  background: color-mix(in srgb, var(--cor-acento) 16%, transparent);
  color: var(--cor-texto);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--cor-acento);
}

.barra-lateral-links > details[data-ativo] > summary {
  color: var(--cor-texto);
  font-weight: 600;
}

.barra-lateral-links > details[data-ativo] > summary .icone-modulo {
  color: var(--cor-acento);
}

/* TRILHO DE ÍCONES (2.6): encolhida, a barra não some com os módulos — só
   com os nomes. Cada ícone continua clicável (expande a barra e abre o
   módulo) e mostra o nome num balão próprio no hover e no foco. */
.barra-lateral.encolhida {
  width: 48px;
  padding: var(--espaco-3) 0.35rem;
  overflow: visible;
}

.barra-lateral.encolhida .barra-lateral-links {
  display: flex;
  align-items: stretch;
}

.barra-lateral.encolhida .barra-grupo,
.barra-lateral.encolhida .barra-rotulo,
.barra-lateral.encolhida .submenu,
.barra-lateral.encolhida > .barra-lateral-links > details > summary::before {
  display: none;
}

.barra-lateral.encolhida .barra-lateral-links > a,
.barra-lateral.encolhida .barra-lateral-links > details > summary {
  justify-content: center;
  padding: 0.5rem 0;
  position: relative;
}

.barra-lateral.encolhida .barra-lateral-links > details[data-ativo] > summary,
.barra-lateral.encolhida .barra-lateral-links > a[aria-current="page"] {
  background: color-mix(in srgb, var(--cor-acento) 16%, transparent);
  color: var(--cor-texto);
  box-shadow: none;
}

.barra-lateral.encolhida .icone-modulo {
  width: 1.1rem;
  height: 1.1rem;
}

/* O nome do módulo, no hover e no foco do ícone: balão próprio, com as
   próprias cores (interface flutuante não herda a área que cobre). */
.barra-lateral.encolhida [data-rotulo]:hover::after,
.barra-lateral.encolhida [data-rotulo]:focus-visible::after {
  content: attr(data-rotulo);
  position: absolute;
  left: calc(100% + 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: var(--tipo-2);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--sombra-flutuante);
  pointer-events: none;
}

.barra-lateral.encolhida .barra-lateral-toggle {
  margin: 0 auto var(--espaco-2);
}

/* A versão no pé: no trilho só a bolinha de novidades sobrevive. */
.barra-lateral.encolhida .versao-do-sistema {
  display: block;
  padding: 0.6rem 0;
  text-align: center;
  font-size: 0;
}

.barra-lateral.encolhida .versao-do-sistema .bolinha-novidades {
  margin: 0;
}

.barra-lateral .versao-do-sistema {
  font-size: var(--tipo-1);
}

.barra-lateral-toggle {
  font-size: var(--tipo-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin-bottom: var(--espaco-2);
}

.barra-lateral-toggle .icone {
  width: 1rem;
  height: 1rem;
}

/* ---- Shell: /admin/ -------------------------------------------------- */

/* O /admin/ posiciona cabeçalho e barra por CSS (admin-tema.css, com 65 px
   fixos). Com o cabeçalho de 44 px, as três medidas descem juntas — e no
   dev, com a faixa vermelha em cima (pedido do dono: a faixa é igual nos
   dois visuais), a altura dela soma como no admin-tema.css. Especificidade
   maior que a do admin-tema.css de propósito: esta folha carrega ANTES
   dele.

   Só o /admin/ (body.painel-admin, escrito em templates/admin/base_site.html).
   Sem essa âncora, estas regras valiam para TODA página do visual novo: o
   body ganhava 44 px de recheio em cima e a barra lateral (position:
   relative no base.css) descia 44 px, deixando uma faixa vazia entre o
   cabeçalho e o primeiro ícone — reporte do dono em 2026-10-04. */
html[data-visual="novo"] body.painel-admin:not(.popup) {
  padding-top: var(--altura-topo);
}

html[data-visual="novo"] body.painel-admin:not(.popup) .barra-lateral {
  top: var(--altura-topo);
  background: var(--cor-secao);
}

html[data-visual="novo"] body.painel-admin.com-faixa-dev:not(.popup) {
  padding-top: calc(var(--altura-topo) + var(--altura-faixa-dev));
}

html[data-visual="novo"] body.painel-admin.com-faixa-dev:not(.popup) .barra-lateral {
  top: calc(var(--altura-topo) + var(--altura-faixa-dev));
}

html[data-visual="novo"] body.painel-admin.barra-admin-encolhida:not(.popup) #container {
  margin-left: 48px;
}

/* ---- Superfícies e peças do base.css que mudam de roupa -------------- */

/* Cartões: a sombra leve única no lugar da borda marcada. */
.cartao {
  border-color: transparent;
  box-shadow: var(--sombra-leve), 0 0 0 1px var(--cor-borda);
}

/* Botões: um pouco mais de respiro e raio igual em todo lugar. */
button,
.botao,
.botao-secundario {
  border-radius: var(--raio);
  padding: 0.45rem 1rem;
  font-size: var(--tipo-2);
  font-weight: 500;
}

/* Campos: raio e fonte da escala; o resto (fundo, borda) segue o base.css. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  border-radius: var(--raio);
  font-size: var(--tipo-3);
  padding: 0.5rem 0.7rem;
}

/* Tabelas que se leem (3.6 do relatório): linha de altura constante,
   divisória fina, números tabulares e hover como verniz — cor do texto
   declarada junto. */
th,
td {
  padding: 0.55rem 0.75rem;
  font-variant-numeric: tabular-nums;
}

tbody tr:hover {
  background: var(--cor-hover-linha);
  color: var(--cor-texto);
}

/* Conteúdo com mais ar em volta. */
.conteudo-principal {
  padding: 1.75rem 2.25rem;
}

/* Mensagens do Django: no visual novo elas viram toast (acoes.js move
   cada .mensagem para a pilha de toasts ao carregar). Enquanto o script
   não roda — e para quem navega sem script — elas continuam no fluxo,
   só com as cores do tema no lugar das fixas do tema claro. */
.mensagem {
  border-radius: var(--raio);
  font-size: var(--tipo-2);
}

.mensagem-error {
  background: var(--sem-erro-suave);
  color: var(--cor-texto);
  border-color: var(--sem-erro);
}

.mensagem-success {
  background: var(--sem-sucesso-suave);
  color: var(--cor-texto);
  border-color: var(--sem-sucesso);
}

.mensagem-warning {
  background: var(--sem-aviso-suave);
  color: var(--cor-texto);
  border-color: var(--sem-aviso);
}

/* ---- Telas de entrada e de erro (3.9) -------------------------------- */

/* Login, 2FA, entrada bloqueada, rede negada, acesso negado e "não
   encontrado" no MESMO cartão centrado: logo, título, uma frase e a ação.
   Só roupagem — o fluxo de autenticação continua o do Django e do
   django-otp. Fora da casca (visitante) o .conteudo-principal já é uma
   coluna estreita; dentro dela (404 de quem está logado) o cartão se
   centra sozinho. */
.tela-entrada {
  max-width: 26rem;
  margin: var(--espaco-8) auto;
  padding: var(--espaco-8) var(--espaco-6);
  border: 0;
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  box-shadow: var(--sombra-leve), 0 0 0 1px var(--cor-borda);
  text-align: center;
}

.tela-entrada-logo {
  display: block;
  height: 28px;
  margin: 0 auto var(--espaco-6);
}

.tela-entrada h1 {
  margin: 0 0 var(--espaco-2);
  font-size: var(--tipo-4);
}

.tela-entrada p {
  margin: 0 0 var(--espaco-4);
  color: var(--cor-texto-suave);
  font-size: var(--tipo-2);
}

.tela-entrada form {
  text-align: left;
}

.tela-entrada form p {
  margin: 0 0 var(--espaco-3);
  color: var(--cor-texto);
}

.tela-entrada label {
  margin-bottom: var(--espaco-1);
  color: var(--cor-texto-suave);
}

.tela-entrada input[type="text"],
.tela-entrada input[type="email"],
.tela-entrada input[type="password"] {
  margin-bottom: var(--espaco-2);
}

.tela-entrada button[type="submit"],
.tela-entrada .botao {
  width: 100%;
  margin-top: var(--espaco-2);
}

.tela-entrada .botao-google {
  width: 100%;
  height: auto;
  padding: 0.5rem;
  gap: var(--espaco-2);
  color: var(--cor-texto);
  font-size: var(--tipo-2);
  font-weight: 500;
  background: var(--cor-campo);
  border-color: var(--cor-borda-campo);
}

.tela-entrada .botao-google:hover,
.tela-entrada .botao-google:focus-visible {
  background: var(--cor-secao);
  color: var(--cor-texto);
}

.tela-entrada .login-aviso {
  text-align: left;
  font-size: var(--tipo-2);
}

/* Erro do formulário de entrada que ORIENTA: lista do Django em cor de
   erro, sem marcador, no tamanho de apoio. */
.tela-entrada .errorlist {
  list-style: none;
  margin: 0 0 var(--espaco-3);
  padding: 0.5rem 0.7rem;
  border-radius: var(--raio);
  background: var(--sem-erro-suave);
  color: var(--cor-texto);
  font-size: var(--tipo-2);
  text-align: left;
}

/* Os IPs da tela de rede negada (issue #411) alinhados no cartão. */
.tela-entrada .ips-do-visitante {
  display: inline-block;
  text-align: left;
}

/* O logo do cartão de entrada troca com o tema, como o do cabeçalho. */
.tela-entrada .logo-escuro { display: block; }
.tela-entrada .logo-claro { display: none; }
html[data-theme="dark"] .tela-entrada .logo-escuro { display: none; }
html[data-theme="dark"] .tela-entrada .logo-claro { display: block; }
html[data-theme="light"] .tela-entrada .logo-escuro { display: block; }
html[data-theme="light"] .tela-entrada .logo-claro { display: none; }

/* O botão de encolher a barra traz os dois ícones; o CSS mostra o certo. */
.barra-lateral:not(.encolhida) .barra-toggle-expandir,
.barra-lateral.encolhida .barra-toggle-encolher { display: none; }