/* =========================================================================
   PREFIRO CRM — tema visual
   =========================================================================

   Reescrito do zero na Alpha 0.4. O tema anterior remendava o CSS do admin do
   Django regra a regra e brigava com ele; o resultado era pior do que o padrão.
   Aqui a abordagem é outra: um punhado de tokens define o sistema visual, e as
   regras redesenham os componentes do admin em cima deles.

   Referências: os CRMs que o Victor citou — RD Station, Conta Azul, Omie, Gupy,
   Pipedrive. O que eles têm em comum e foi adotado aqui:

   - Barra lateral escura, conteúdo claro. Dá âncora visual e faz o conteúdo
     respirar sem precisar de bordas em tudo.
   - Cartões com raio generoso e sombra baixa, em vez de linhas de 1px.
   - Cor forte reservada para ação e estado. Se tudo é colorido, nada chama.
   - Densidade média: linha de tabela alta o suficiente para clicar sem mirar.

   SUMÁRIO
     1. Tokens
     2. Base e tipografia
     3. Esqueleto (header, sidebar, conteúdo)
     4. Cartões e módulos
     5. Tabelas e listagens
     6. Formulários
     7. Botões e ações
     8. Etiquetas e estados
     9. Painel e gráficos
    10. Kanban
    11. Responsivo
    12-19. Especificidade, trilha, contraste, navegação, busca, 360, metas, lateral
    20. Meu dia, ações de um clique e primeiros passos
    21. Paleta de comandos (Ctrl+K)
    22. Etiquetas
    23. Pessoas repetidas
    24. Importação de planilha
    25. Barras horizontais de ranking
    26. Rodapé fixo: salvar e andar entre as etapas
    27. Resumo financeiro do dossiê
    28. Densidade: caber na tela sem zoom out
    29. Listagem: a tabela recebe a largura da tela
    30. Transferência entre contas de fornecedor
    31. Conciliação bancária
    32. Pente fino: o que o teste de uso apontou
    33. Leitura em tabela: faixas, cabeçalho forte e colunas com medida
    34. Densidade: seis campos sem cinco telas de rolagem
    35. Preferências de tela: dicas e caixa alta
   ========================================================================= */


/* -------------------------------------------------------------------------
   0. A fonte, servida por nós
   -------------------------------------------------------------------------
   A Inter vinha do Google a cada abertura de tela (03 M7). Três problemas, em
   ordem de tamanho: contradizia a decisão de não depender de CDN, que é a
   mesma razão de os ícones serem caracteres e os gráficos serem SVG de
   servidor; numa rede corporativa que bloqueia o Google — hotel, aeroporto,
   operadora — o CRM abria com a fonte de reserva; e o CRM parava de abrir
   direito sem internet mesmo tendo tudo o mais em casa.

   É a versão VARIÁVEL. O tema usa oito pesos (400, 500, 550, 600, 650, 700,
   750 e 800) e a Inter estática do Google tem cinco: o navegador arredondava
   550, 650 e 750 para o vizinho, então o "650" dos títulos era 700 na prática.
   Com o eixo contínuo de 100 a 900, os oito passam a existir de verdade.

   Dois recortes por família. O `latin` cobre o português inteiro; o
   `latin-ext` entra só quando aparece um caractere que ele não tem — nome de
   hotel polonês, cidade tcheca —, e o navegador nem baixa o arquivo enquanto
   isso não acontecer. São 133 KB de Inter e 68 KB de Archivo no total.

   Origem: fonts.gstatic.com, os mesmos arquivos que o Google servia.
   Licença: SIL Open Font License 1.1, em `static/admin/fonts/*-OFL.txt`.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  /* `swap`: o texto aparece na fonte de reserva e troca quando a Inter chega.
     A alternativa (`block`) esconde o texto por até três segundos, e num CRM
     de trabalho ler tarde é pior que ler na fonte errada por um instante. */
  font-display: swap;
  src: url("../fonts/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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/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;
}


/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root,
html[data-theme="light"] {
  /* Marca — extraída da logomarca da Prefiro Viagens. */
  --marca: #b42000;
  /* Vermelho Tinta e Névoa do guia de marca. Eram #8e1900 e #fdeeea — perto o
     bastante para ninguém notar a olho nu, e é justamente por isso que não
     custava nada fechar. Contraste conferido: o Tinta sobre branco melhorou de
     9,17:1 para 10,29:1; o Névoa como fundo de pastilha ficou em 5,83:1. */
  --marca-forte: #801700;
  --marca-clara: #ff6a3d;
  --marca-suave: #f9edeb;
  /* Tons de TEXTO, separados dos tons de fundo. A mesma cor não serve para
     as duas coisas: `--marca` sobre o fundo escuro dá 2,6:1. Cada tema
     define abaixo o tom que passa nele. */
  --marca-texto: #b42000;
  /* O link sob o cursor tinha `--marca-clara`, que é tom de FUNDO: como texto
     sobre branco dá 2,85:1, abaixo dos 4,5 exigidos (03 A2). Hover precisa de
     par claro/escuro próprio pelo mesmo motivo que `--marca-texto` precisa —
     no tema escuro, um vermelho mais escuro que a marca some no fundo. */
  --marca-hover: #801700;

  /* Superfícies */
  --fundo: #f4f5f9;
  --superficie: #ffffff;
  --superficie-2: #fafbfd;
  --superficie-3: #f1f3f8;

  /* Barra lateral */
  --lateral: #14161d;
  --lateral-2: #1c1f28;
  --lateral-texto: #bcc2ce;
  --lateral-texto-forte: #ffffff;
  /* O terceiro nível: rótulo de grupo, contador, texto de apoio. Vivia como
     um cinza solto em sete lugares. O relatório de design pediu para apontá-los
     a `--texto-2` — que é cinza escuro, para superfície clara, e sumiria neste
     fundo. A lateral tem vocabulário próprio porque tem fundo próprio. */
  --lateral-texto-fraco: #868da0;
  /* A cor de cada grupo do menu (DEBUG 26/09, item 1): *"Os itens principais
     devem ter cores próprias. Os subitens podem continuar em cinza."* Tons
     claros, porque o fundo da lateral é escuro nos dois temas — todos passam
     de 4,5:1 sobre `--lateral` e `--lateral-2` (`tests_contraste`). */
  --grupo-painel: #ff9a85;
  --grupo-comercial: #ffab5c;
  --grupo-operacao: #7fb8ff;
  --grupo-financeiro: #5fd9a8;
  --grupo-clientes: #c4a8ff;
  --grupo-gestao: #ffd45c;
  --grupo-configuracao: #f593bf;
  --grupo-equipe: #62d4e6;

  /* Texto */
  --texto: #171a22;
  --texto-2: #5b6274;
  /* 4,35:1 sobre o fundo da página — reprovava por pouco, e é justamente o tom
     das notas e legendas, que já são o texto menor da tela (03 A2). */
  --texto-3: #5c6370;

  /* Linhas
     -----------------------------------------------------------------
     `--linha` e `--linha-forte` são DECORATIVAS: separam blocos, e a norma não
     exige contraste de quem só organiza a página. `--linha-campo` é outra
     coisa — é o que diz onde o campo começa e termina, e o 1.4.11 cobra 3:1
     dela. Dividir os dois papéis foi o que permitiu escurecer a borda do campo
     sem transformar toda divisória do CRM num risco preto. */
  --linha: #e6e9f0;
  --linha-forte: #d3d8e4;
  --linha-campo: #838a97;
  /* Azul de foco, e não o vermelho da marca: a mesma cor não pode significar
     "onde estou" e "aqui deu erro". Sobre branco dá 6,30:1 (03 A2). */
  --foco: #2155d6;

  /* Estados */
  --ok: #0f9d58;
  --ok-texto: #0a7c44;
  --ok-suave: #e6f6ed;
  --aviso: #b45309;
  --aviso-texto: #96450a;
  --aviso-suave: #fdf3e4;
  --erro: #d92d20;
  /* Sobre `--erro-suave`, o `--erro` dá 4,22:1. Este tom é para texto. */
  --erro-texto: #a3160f;
  --erro-suave: #fdecea;
  --erro-linha: #f2c9c3;
  --info: #1668dc;
  --info-texto: #0f57bd;
  --info-suave: #e8f1fe;

  /* Séries dos gráficos */
  --gr-1: #6366f1;
  --gr-2: #06b6d4;
  --gr-3: #f59e0b;
  --gr-4: #ec4899;
  --gr-5: #10b981;
  --gr-6: #8b5cf6;

  /* Espaçamento
     -----------------------------------------------------------------
     Cor, raio e sombra sempre tiveram escala; espaçamento e tipografia,
     não — e cada tela nova decidia a margem de novo, de memória. Os quatro
     primeiros passos são os valores que o CSS já usava (2, 4, 6, 8, 10, 12,
     14, 16 e 18px, arredondados para múltiplos de 4); os dois últimos
     estendem a escala para o espaço entre blocos, que era o mais solto.

     A migração é por oportunidade: cada arquivo aberto por outro motivo
     troca o valor solto pelo token. Sprint de migração de CSS é o tipo de
     trabalho que consome uma semana e não muda nada que o Victor veja. */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 40px;

  /* Tipografia
     -----------------------------------------------------------------
     Abaixo de 1rem o tema usava mais de vinte tamanhos diferentes, de .68rem
     a .95rem, em passos de um ou dois centésimos que nenhum olho distingue.
     Estes cinco não inventam tamanho: são aqueles vinte arredondados para o
     vizinho mais próximo.

     O piso e o rótulo subiram no achado 03 M6. A densidade deste CRM tinha
     sido conseguida encolhendo letra — havia rótulo a 9,9px e cabeçalho de
     listagem a 10,2px, em caixa alta e com espaçamento entre letras, numa
     ferramenta que o mesmo par de olhos lê oito horas por dia. Densidade se
     compra com altura de controle e entrelinha, não com corpo de texto.

     `--texto-micro` é o piso: 11px, e nada abaixo disso em lugar nenhum. Ele
     existe para os lugares em que o espaço é físico — pastilha dentro de
     cartão de funil, contador ao lado do item do menu — e não como escapatória
     para caber mais coisa na tela. */
  --texto-micro: .6875rem;
  --texto-legenda: .75rem;
  --texto-nota: .78rem;
  --texto-corpo-sm: .85rem;
  --texto-corpo: .92rem;
  --texto-titulo: 1.05rem;

  /* Formas */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-cheio: 999px;

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

  /* Etiquetas: pares fundo/texto, um por cor. O par é definido junto porque
     é o par que precisa passar no contraste — cor de fundo sozinha não diz
     nada sobre legibilidade. */
  --et-cinza-fundo: #eceef3;      --et-cinza-texto: #4a5163;
  --et-vermelho-fundo: #fdecea;   --et-vermelho-texto: #a3160f;
  --et-laranja-fundo: #fdf1e3;    --et-laranja-texto: #8a4009;
  --et-verde-fundo: #e6f6ed;      --et-verde-texto: #0a7c44;
  --et-azul-fundo: #e8f1fe;       --et-azul-texto: #0f57bd;
  --et-roxo-fundo: #efeafc;       --et-roxo-texto: #5b34c7;
  --et-rosa-fundo: #fdeaf3;       --et-rosa-texto: #b02367;
  --et-turquesa-fundo: #e2f5f8;   --et-turquesa-texto: #0b6a7d;

  --lateral-largura: 264px;
  --topo-altura: 64px;
}

/* O admin do Django tem alternador de tema próprio. Em vez de brigar com ele,
   o tema escuro reaproveita os mesmos tokens — as regras abaixo não mudam. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --fundo: #0f1116;
    --superficie: #171a21;
    --superficie-2: #1c1f27;
    --superficie-3: #232732;
    --texto: #eef0f5;
    --texto-2: #a8afc0;
    --texto-3: #969db1;
    --linha: #272b36;
    --linha-forte: #333846;
    --linha-campo: #717988;
    --foco: #7aa2ff;
    --marca-suave: #2a1410;
    --ok-suave: #10261a;
    --aviso-suave: #2a1f0e;
    --marca-texto: #ff8a63;
    --marca-hover: #ffb199;
    --ok-texto: #4ade80;
    --aviso-texto: #fbbf24;
    --info-texto: #7cb4ff;
    --erro-texto: #ff8a80;
    --erro-suave: #2c1412;
    --erro-linha: #5c2a24;
    --info-suave: #10233f;
    --et-cinza-fundo: #262b36;      --et-cinza-texto: #c3cad9;
    --et-vermelho-fundo: #2c1412;   --et-vermelho-texto: #ff8a80;
    --et-laranja-fundo: #2a1f0e;    --et-laranja-texto: #fbbf24;
    --et-verde-fundo: #10261a;      --et-verde-texto: #4ade80;
    --et-azul-fundo: #10233f;       --et-azul-texto: #7cb4ff;
    --et-roxo-fundo: #1f1836;       --et-roxo-texto: #c0a8ff;
    --et-rosa-fundo: #33142a;       --et-rosa-texto: #ff9ecb;
    --et-turquesa-fundo: #0d2830;   --et-turquesa-texto: #5fd8ee;
    --sombra-2: 0 2px 8px rgba(0, 0, 0, .35);
    --sombra-3: 0 8px 24px rgba(0, 0, 0, .45);
  }
}

html[data-theme="dark"] {
  --fundo: #0f1116;
  --superficie: #171a21;
  --superficie-2: #1c1f27;
  --superficie-3: #232732;
  --texto: #eef0f5;
  --texto-2: #a8afc0;
  --texto-3: #969db1;
  --linha: #272b36;
  --linha-forte: #333846;
  --linha-campo: #717988;
  --foco: #7aa2ff;
  --marca-suave: #2a1410;
  --ok-suave: #10261a;
  --aviso-suave: #2a1f0e;
  --marca-texto: #ff8a63;
  --marca-hover: #ffb199;
  --ok-texto: #4ade80;
  --aviso-texto: #fbbf24;
  --info-texto: #7cb4ff;
  --erro-texto: #ff8a80;
  --erro-suave: #2c1412;
  --erro-linha: #5c2a24;
  --info-suave: #10233f;
  --et-cinza-fundo: #262b36;    --et-cinza-texto: #c3cad9;
  --et-vermelho-fundo: #2c1412;   --et-vermelho-texto: #ff8a80;
  --et-laranja-fundo: #2a1f0e;  --et-laranja-texto: #fbbf24;
  --et-verde-fundo: #10261a;    --et-verde-texto: #4ade80;
  --et-azul-fundo: #10233f;     --et-azul-texto: #7cb4ff;
  --et-roxo-fundo: #1f1836;     --et-roxo-texto: #c0a8ff;
  --et-rosa-fundo: #33142a;     --et-rosa-texto: #ff9ecb;
  --et-turquesa-fundo: #0d2830;   --et-turquesa-texto: #5fd8ee;
  --sombra-2: 0 2px 8px rgba(0, 0, 0, .35);
  --sombra-3: 0 8px 24px rgba(0, 0, 0, .45);
}


/* -------------------------------------------------------------------------
   2. Base e tipografia
   ------------------------------------------------------------------------- */
html, body {
  background: var(--fundo);
  color: var(--texto);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* 13,5px, e não 14: é o valor que a tela mostra desde o pedido "reduz
     fonte". Ele morava numa segunda regra `body`, quatro mil linhas abaixo, e
     esta aqui dizia 14 sem valer nada (03 M1). */
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

a { color: var(--marca-texto); text-decoration: none; }
a:hover { color: var(--marca-hover); text-decoration: underline; }
/* O anel de foco é a única pista de onde o teclado está. Era do tom da marca e
   dava 2,61:1 sobre o fundo escuro — invisível para quem navega por Tab à noite
   (03 A2). `summary` entrou na lista porque os blocos recolhíveis do formulário
   são percorridos por teclado como qualquer outro controle. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

h1, h2, h3, h4 { color: var(--texto); font-weight: 650; letter-spacing: -0.02em; }
/* Os valores que valem, no lugar em que se procura por eles. Eram 1.4rem e
   1.1rem aqui, redefinidos para 1.3rem e 1.02rem na seção de densidade — a
   primeira regra era uma pista falsa (03 M1). */
h1 { font-size: 1.3rem; }
h2 { font-size: 1.02rem; }


/* -------------------------------------------------------------------------
   3. Esqueleto
   ------------------------------------------------------------------------- */

/* O Django limita o container a 980px, o que corta tabelas largas em telas
   grandes e cria barra horizontal em telas pequenas. */
#container {
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--fundo);
}

/* --- Topo --- */
#header {
  /* Item de um flex column: sem `flex: none` o navegador encolhe o cabeçalho
     assim que o conteúdo passa da altura da janela, e a altura declarada vira
     decoração. Foi exatamente o que aconteceu na primeira versão. */
  flex: none;
  background: var(--superficie);
  color: var(--texto);
  border-bottom: 1px solid var(--linha);
  height: var(--topo-altura);
  padding: 0 24px;
  display: flex;
  /* O `responsive.css` do admin põe o cabeçalho em coluna até 1024 px; com a
     quebra de linha do celular, coluna abria uma segunda coluna ao lado e a
     página rolava de lado (achado de 03/10/2026). */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: var(--sombra-1);
}

#branding { display: flex; align-items: center; }

#site-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
#site-name a { color: var(--texto); text-decoration: none; }
#site-name a:hover { color: var(--marca-texto); }
.prefiro-marca-leve { color: var(--marca-texto); }

#user-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .82rem;
  color: var(--texto-2);
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
  margin: 0;
}
#user-tools a { color: var(--texto-2); font-weight: 500; }
#user-tools a:hover { color: var(--marca-texto); text-decoration: none; }

.prefiro-saudacao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--texto);
}
.prefiro-saudacao::before {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: var(--r-cheio);
  background: linear-gradient(135deg, var(--marca), var(--marca-clara));
  flex: none;
}

.prefiro-link-painel {
  padding: 7px 14px;
  border-radius: var(--r-cheio);
  background: var(--marca-suave);
  color: var(--marca-texto) !important;
  font-weight: 600;
}
.prefiro-link-painel:hover { background: var(--marca); color: #fff !important; }

#logout-form { display: inline; margin: 0; padding: 0; }
#logout-form button {
  background: none;
  border: none;
  color: var(--texto-2);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  padding: 0;
}
#logout-form button:hover { color: var(--erro-texto); }

/* --- Corpo: lateral + conteúdo --- */
.main { display: flex; flex: 1 1 auto; min-width: 0; }

/* O admin rola o conteúdo junto com a lateral; fixá-la mantém a navegação
   sempre visível, que é o comportamento de todo CRM da referência. */

#nav-filter {
  width: 100%;
  box-sizing: border-box;
  background: var(--lateral-2);
  border: 1px solid #ffffff14;
  border-radius: var(--r-md);
  color: var(--lateral-texto-forte);
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: var(--texto-corpo-sm);
}
#nav-filter::placeholder { color: var(--lateral-texto-fraco); }
#nav-filter:focus { border-color: var(--marca-clara); outline: none; }

/* --- Conteúdo --- */
#content, .colM, #content-main {
  min-width: 0;
  max-width: 100%;
}

#content {
  /* O recheio lateral, também como variável: as barras de ação encostam nas
     bordas com margem negativa medida por ele (`.prefiro-barra-acoes`). */
  --recheio-lateral: 28px;
  padding: 24px 28px 56px;
  flex: 1;
  min-width: 0;
}
/* Na listagem o respiro lateral vale menos que a coluna que ele custa.
   -------------------------------------------------------------------------
   28px de cada lado são 56px que a tabela não tem — e em dossiês, com o menu
   aberto a 1280, eram exatamente os 40px que faltavam para a coluna "MARGEM"
   caber sem rolagem. Num formulário o respiro paga: o olho percorre uma coluna
   de campos, e apertar as bordas cansa. Numa tabela de onze colunas, não.

   Vale só na listagem, e é por isso que o seletor é `.change-list`. */
.change-list #content { --recheio-lateral: 12px; padding-left: 12px; padding-right: 12px; }

/* Vence o `h1` da seção 2 por especificidade, e por isso é ESTE o tamanho do
   título das telas do admin — não o 1.3rem de lá, que só vale para `h1` fora do
   conteúdo. Parece óbvio escrito aqui; não era, quando cada um morava num canto
   e a segunda regra dizia "reduz fonte" (03 M1). */
#content > h1 { margin: 0 0 18px; font-size: 1.5rem; }

/* Trilha de navegação: discreta, sem a faixa cinza do padrão. */
div.breadcrumbs {
  background: none;
  border: none;
  padding: 16px 28px 0;
  color: var(--texto-3);
  font-size: .8rem;
}
div.breadcrumbs a { color: var(--texto-3); font-weight: 500; }
div.breadcrumbs a:hover { color: var(--marca-texto); text-decoration: none; }

/* Barra do topo do objeto (histórico, ver no site…). */
.object-tools { margin-top: -4px; }
.object-tools a,
.object-tools a:link,
.object-tools a:visited {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-cheio);
  color: var(--texto-2);
  font-size: var(--texto-nota);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 15px;
  box-shadow: var(--sombra-1);
}
.object-tools a:hover { background: var(--superficie-3); color: var(--texto); }
.object-tools a.addlink { background: var(--marca); border-color: var(--marca); color: #fff; }
.object-tools a.addlink:hover { background: var(--marca-forte); }


/* -------------------------------------------------------------------------
   4. Cartões e módulos
   ------------------------------------------------------------------------- */
.module {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  margin-bottom: 20px;
  overflow: hidden;
}

.module > h2,
.module caption,
.inline-group h2 {
  background: var(--superficie-2);
  color: var(--texto);
  border-bottom: 1px solid var(--linha);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
  padding: 14px 20px;
}

fieldset.module { padding-bottom: 6px; }

.module .description,
.form-row .help,
.help {
  color: var(--texto-2);
  font-size: .82rem;
  line-height: 1.6;
}
fieldset .description {
  background: var(--info-suave);
  border-left: 3px solid var(--info);
  border-radius: var(--r-sm);
  margin: 16px 20px 4px;
  padding: 12px 16px;
  color: var(--texto-2);
}

.inline-group {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  margin: 20px 0;
  padding: 0;
  /* Inline com muitas colunas rola dentro de si, sem empurrar a página. */
  overflow-x: auto;
}
.inline-group .module { border: none; box-shadow: none; margin: 0; }
.inline-related h3 {
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linha);
  color: var(--texto-2);
  font-size: var(--texto-nota);
  font-weight: 600;
  padding: 10px 20px;
}


/* -------------------------------------------------------------------------
   5. Tabelas e listagens
   ------------------------------------------------------------------------- */
#changelist { background: none; }

#changelist .results {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  overflow-x: auto;
  margin-top: 4px;
}

table { border-collapse: collapse; width: 100%; }

thead th, thead td {
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linha);
  color: var(--texto-3);
  font-size: var(--texto-legenda);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: none;
  padding: 13px 16px;
  white-space: nowrap;
}
thead th a, thead th a:link, thead th a:visited { color: var(--texto-3); }
thead th.sorted { color: var(--marca-texto); }

tbody td, tbody th {
  border-bottom: 1px solid var(--linha);
  padding: 14px 16px;
  color: var(--texto);
  vertical-align: middle;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }

/* O admin pinta linhas alternadas; hover comunica melhor onde está o cursor. */
#changelist tbody tr, .module tbody tr { background: var(--superficie); }
#changelist tbody tr:hover, .inline-group tbody tr:hover { background: var(--superficie-3); }
#changelist tbody tr.selected { background: var(--marca-suave); }

#changelist tbody th a, #changelist tbody td a { font-weight: 600; color: var(--texto); }
#changelist tbody th a:hover, #changelist tbody td a:hover { color: var(--marca-texto); }

/* Barra de ferramentas da listagem (busca + ações). */
#toolbar {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  padding: 14px 16px;
  margin-bottom: 16px;
}
#toolbar form#changelist-search { display: flex; gap: 10px; align-items: center; }
#searchbar {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-cheio);
  background: var(--superficie-2);
  padding: 10px 18px;
  font-size: .88rem;
  color: var(--texto);
}
#searchbar:focus { border-color: var(--marca); background: var(--superficie); outline: none; }
#toolbar form input[type="submit"] {
  background: var(--marca);
  border: none;
  border-radius: var(--r-cheio);
  color: #fff;
  font-weight: 600;
  padding: 10px 22px;
  cursor: pointer;
}
#toolbar form input[type="submit"]:hover { background: var(--marca-forte); }

.actions {
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  color: var(--texto-2);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.actions select { max-width: 340px; }

/* Filtros laterais da listagem. */
#changelist-filter {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  padding: 4px 0 12px;
  width: 232px;
}
#changelist-filter h2 {
  background: none;
  border-bottom: 1px solid var(--linha);
  color: var(--texto);
  font-size: .8rem;
  letter-spacing: .04em;
  padding: 14px 18px;
}
#changelist-filter h3 {
  color: var(--texto-3);
  font-size: var(--texto-legenda);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: none;
  padding: 14px 18px 4px;
  margin: 0;
}
#changelist-filter ul { padding: 0 10px; margin: 0 0 8px; }
#changelist-filter li { list-style: none; margin: 0; }
#changelist-filter li a {
  display: block;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  color: var(--texto-2);
  font-size: .84rem;
}
#changelist-filter li a:hover { background: var(--superficie-3); color: var(--texto); text-decoration: none; }
#changelist-filter li.selected a {
  background: var(--marca-suave);
  color: var(--marca-texto);
  font-weight: 600;
  border-left: none;
}

.paginator {
  background: none;
  border: none;
  color: var(--texto-2);
  padding: 16px 2px;
  font-size: var(--texto-corpo-sm);
}
.paginator a, .paginator .this-page {
  display: inline-block;
  min-width: 32px;
  text-align: center;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.paginator a { background: var(--superficie); border: 1px solid var(--linha-forte); color: var(--texto-2); }
.paginator a:hover { background: var(--superficie-3); text-decoration: none; }
.paginator .this-page { background: var(--marca); color: #fff; }

/* Hierarquia de datas. */
.xfull, #toolbar + .xfull { margin-bottom: 12px; }
.toplinks {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-cheio);
  padding: 8px 16px;
  display: inline-flex;
  gap: 14px;
  font-size: .82rem;
}


/* -------------------------------------------------------------------------
   6. Formulários
   ------------------------------------------------------------------------- */
.form-row {
  border-bottom: 1px solid var(--linha);
  padding: 16px 20px;
}
.form-row:last-child { border-bottom: none; }
.aligned label {
  color: var(--texto-2);
  font-size: .8rem;
  font-weight: 600;
  padding-top: 10px;
  width: 190px;
}

input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="number"], input[type="tel"], input[type="date"], input[type="time"],
input[type="datetime-local"], textarea, select, .vTextField {
  background: var(--superficie);
  /* `--linha-forte` dava 1,43:1 sobre o branco do cartão: o campo não tinha
     contorno visível, só uma sugestão de contorno (03 A2). */
  border: 1px solid var(--linha-campo);
  border-radius: var(--r-md);
  color: var(--texto);
  font-family: inherit;
  font-size: .88rem;
  padding: 10px 13px;
  /* Sem isto, campos largos empurram a página inteira para o lado. */
  max-width: 100%;
  box-sizing: border-box;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--foco);
  /* O halo era `--marca-suave` sólido: 1,14:1 sobre branco, ou seja, quem
     sinalizava o campo focado era só a borda de 1px. Derivado do próprio tom de
     foco, ele passa a ser visível sem virar um bloco de cor. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 25%, transparent);
  outline: none;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
select { min-height: 40px; }
select[multiple] { min-height: 150px; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--marca); width: 16px; height: 16px; }

.errornote, .errorlist {
  background: var(--erro-suave);
  border: 1px solid #f5c2bd;
  border-left: 3px solid var(--erro);
  border-radius: var(--r-md);
  color: var(--erro-texto);
  font-weight: 500;
  padding: 12px 16px;
  margin: 0 0 14px;
}
.errorlist li { list-style: none; }
.form-row.errors { background: var(--erro-suave); }

/* Rodapé de ações do formulário: fica colado embaixo, sempre alcançável. */
.submit-row {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-3);
  padding: 14px 18px;
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: sticky;
  bottom: 12px;
  z-index: 20;
}
.submit-row a.deletelink { margin-left: auto; }

/* Atalhos das chaves estrangeiras. */
.related-widget-wrapper { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.related-widget-wrapper-link {
  opacity: .55;
  transition: opacity .12s ease;
}
.related-widget-wrapper-link:hover { opacity: 1; }

/* Autocomplete (select2) alinhado ao resto do formulário. */
.select2-container--admin-autocomplete .select2-selection--single,
.select2-container--admin-autocomplete .select2-selection--multiple {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-md);
  min-height: 40px;
  padding: 4px 8px;
}
.select2-container--admin-autocomplete.select2-container--focus .select2-selection--single {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-suave);
}
.select2-dropdown {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-3);
}
.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
  background: var(--marca);
}


/* -------------------------------------------------------------------------
   7. Botões e ações
   ------------------------------------------------------------------------- */
.button, input[type="submit"], input[type="button"], .submit-row input, a.button {
  background: var(--marca);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: .86rem;
  font-weight: 600;
  padding: 10px 18px;
  transition: background .12s ease, transform .06s ease, box-shadow .12s ease;
  box-shadow: var(--sombra-1);
}
.button:hover, input[type="submit"]:hover, .submit-row input:hover, a.button:hover {
  background: var(--marca-forte);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--sombra-2);
}
.button:active, input[type="submit"]:active { transform: translateY(1px); }

.button.default, input[type="submit"].default, .submit-row input.default {
  background: var(--marca);
  font-weight: 700;
}

/* Ação secundária: contorno, para a principal continuar sendo a única cheia. */
.submit-row a:link, .submit-row a:visited,
.button.cancel, a.closelink {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  color: var(--texto-2);
  box-shadow: none;
}
.submit-row a:hover, .button.cancel:hover { background: var(--superficie-3); color: var(--texto); }

.deletelink, a.deletelink, .submit-row a.deletelink {
  background: var(--erro-suave);
  border: 1px solid #f3c4bf;
  color: var(--erro-texto);
}
.deletelink:hover, .submit-row a.deletelink:hover { background: var(--erro); color: #fff; border-color: var(--erro); }

/* Mensagens do sistema. */
ul.messagelist { padding: 0; margin: 0 0 18px; }
ul.messagelist li {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--info);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-2);
  color: var(--texto);
  font-size: .88rem;
  padding: 14px 18px;
  margin-bottom: 10px;
  list-style: none;
}
ul.messagelist li.success { border-left-color: var(--ok); background: var(--ok-suave); }
ul.messagelist li.warning { border-left-color: var(--aviso); background: var(--aviso-suave); }
ul.messagelist li.error { border-left-color: var(--erro); background: var(--erro-suave); }


/* -------------------------------------------------------------------------
   8. Etiquetas e estados
   ------------------------------------------------------------------------- */
.prefiro-etiqueta,
[class^="prefiro-etiqueta-"], [class*=" prefiro-etiqueta-"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-cheio);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.prefiro-etiqueta::before,
[class^="prefiro-etiqueta-"]::before, [class*=" prefiro-etiqueta-"]::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Um vocabulário só, o dos tokens: `--ok-*`, `--aviso-*`, `--erro-*`,
   `--info-*`. Antes o CSS dizia `sucesso`/`alerta` e o Python dizia
   `ok`/`atencao` para a mesma coisa — e como nenhum dos dois falava a língua
   dos tokens, eram três nomes por ideia. */
.prefiro-etiqueta-neutro { background: var(--superficie-3); color: var(--texto-2); }
.prefiro-etiqueta-info { background: var(--info-suave); color: var(--info-texto); }
.prefiro-etiqueta-ok { background: var(--ok-suave); color: var(--ok-texto); }
.prefiro-etiqueta-aviso { background: var(--aviso-suave); color: var(--aviso-texto); }
.prefiro-etiqueta-erro { background: var(--erro-suave); color: var(--erro-texto); }
.prefiro-etiqueta-marca { background: var(--marca-suave); color: var(--marca-texto); }

.prefiro-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-cheio);
  background: var(--marca);
  color: #fff;
  font-size: var(--texto-legenda);
  font-weight: 700;
}

.prefiro-nota { color: var(--texto-2); font-size: var(--texto-corpo-sm); margin: 10px 0 0; }


/* -------------------------------------------------------------------------
   9. Painel e gráficos
   ------------------------------------------------------------------------- */
.prefiro-painel { display: flex; flex-direction: column; gap: 22px; }

.prefiro-painel-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.prefiro-painel-titulo { margin: 0; font-size: 1.6rem; font-weight: 700; }
.prefiro-painel-subtitulo { color: var(--texto-2); margin: 2px 0 0; font-size: .9rem; }

.prefiro-painel-secao { margin: 0; }
.prefiro-painel-secao > h2,
.prefiro-bloco > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 650;
  margin: 0 0 12px;
  color: var(--texto);
}

/* Grade dos cartões: acompanha a largura sem quebrar em telas estreitas. */
.prefiro-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}

/* Os quatro indicadores do mês (03 M2).
   -----------------------------------------------------------------
   Grade própria, e não `auto-fit` como a dos cartões que crescem: são quatro
   números fixos, e o que se faz com eles é comparar. `auto-fit` põe três numa
   linha e um sozinho na seguinte quando a tela fica no tamanho errado, e o
   quarto órfão parece outro assunto.

   Quatro colunas, depois duas, e só empilha no celular — quatro cartões em
   coluna ocupam a tela inteira e desfazem a comparação, que é o motivo de eles
   estarem juntos. */
.prefiro-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px) {
  .prefiro-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .prefiro-kpis { grid-template-columns: minmax(0, 1fr); }
}
/* Em quatro colunas o cartão tem cerca de 245px, e "R$ 525.000,00" a 1,9rem
   pede mais que isso: o valor quebrava em duas linhas. Com 1,6rem ele cabe
   inteiro no caso comum, e em duas linhas ainda legíveis ("R$" e o número)
   quando a agência tiver um mês de sete dígitos.

   `tabular-nums` é o que faz os quatro números terem a mesma largura de
   dígito: sem isso, comparar dois valores de cartões vizinhos é comparar duas
   réguas diferentes. */
.prefiro-kpis .prefiro-card-valor {
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  /* Duas colunas: o cartão dobra de largura e o número volta ao tamanho cheio. */
  .prefiro-kpis .prefiro-card-valor { font-size: 1.9rem; }
}
/* O desenho da tendência é o conteúdo do quarto cartão, no lugar em que os
   outros três têm o número. `auto` empurra a nota para o rodapé, e os quatro
   ficam com as notas alinhadas entre si. */
.prefiro-card-spark {
  margin: var(--espaco-1) 0 auto;
  min-height: 36px;
}
.prefiro-painel-comparacao { margin: 0 0 var(--espaco-3); }

.prefiro-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  padding: 18px 20px;
  color: var(--texto);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.prefiro-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-3);
  border-color: var(--linha-forte);
  text-decoration: none;
  color: var(--texto);
}
.prefiro-card-valor { font-size: 1.9rem; font-weight: 750; letter-spacing: -0.035em; line-height: 1.15; }
.prefiro-card-rotulo { color: var(--texto-2); font-size: .83rem; font-weight: 500; }
.prefiro-card-nota { color: var(--texto-3); font-size: .76rem; }

/* A borda que avisa: o mesmo vermelho do erro, na densidade de uma linha. */
.prefiro-card-alerta { border-color: var(--erro-linha); }
.prefiro-card-alerta .prefiro-card-valor { color: var(--erro-texto); }
.prefiro-card-alerta::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--erro);
}

/* Cartão de indicador do topo do painel.
   -----------------------------------------------------------------
   Era um bloco de gradiente com o texto em branco por cima, e por isso mesmo
   não tinha como passar: sobre o ciano do "Tendência" o rótulo dava 2,04:1 e
   sobre o verde da "Margem do mês", 2,13:1 (03 A2). Nenhuma correção de tom
   salvava — cor saturada o bastante para ser fundo de destaque é clara demais
   para servir de fundo de texto.

   A saída é inverter os papéis: o cartão vira superfície comum e a cor passa a
   ser um traço de 3px na lateral. O número recupera o protagonismo, que é o que
   um painel quer, e a cor continua distinguindo um cartão do outro. */
.prefiro-card-destaque {
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--linha);
}
.prefiro-card-destaque .prefiro-card-rotulo { color: var(--texto-2); }
.prefiro-card-destaque .prefiro-card-nota { color: var(--texto-3); }
.prefiro-card-destaque:hover { color: var(--texto); }
/* Os tons servem com ou sem `destaque`: na tela `/sistema-visual/` eles
   aparecem sozinhos, e ali o traço também é o que identifica cada um. */
.prefiro-card-t1 { border-left: 3px solid var(--marca); }
.prefiro-card-t2 { border-left: 3px solid var(--gr-1); }
.prefiro-card-t3 { border-left: 3px solid var(--gr-2); }
.prefiro-card-t4 { border-left: 3px solid var(--gr-5); }

.prefiro-card-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.prefiro-card-icone {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  /* Um fundo só, agora que o cartão de destaque também é claro. O branco a 18%
     existia para funcionar por cima do gradiente e não funciona em mais nada. */
  background: var(--marca-suave);
  color: var(--marca-texto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--texto-titulo);
  flex: none;
}

/* Blocos maiores (gráfico, tabela). */
.prefiro-grade {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}
.prefiro-col-4 { grid-column: span 4; }
.prefiro-col-5 { grid-column: span 5; }
.prefiro-col-6 { grid-column: span 6; }
.prefiro-col-7 { grid-column: span 7; }
.prefiro-col-8 { grid-column: span 8; }
.prefiro-col-12 { grid-column: span 12; }

.prefiro-bloco {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  padding: 20px;
  min-width: 0;
}
.prefiro-bloco-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.prefiro-bloco-topo h2 { margin: 0; }

.prf-grafico { width: 100%; height: auto; display: block; overflow: visible; min-height: 170px; }
.prf-grade { stroke: var(--linha); stroke-width: 1; }
.prf-eixo { fill: var(--texto-3); font-size: 11px; font-family: inherit; }
.prf-rosca { width: 100%; max-width: 210px; height: auto; margin: 0 auto; display: block; }
.prf-rosca-valor { fill: var(--texto); font-size: 26px; font-weight: 750; font-family: inherit; }
.prf-rosca-rotulo { fill: var(--texto-3); font-size: 11px; font-family: inherit; }
.prf-spark { width: 100%; height: 36px; display: block; margin-top: 6px; }
.prf-grafico-vazio { opacity: .7; }

.prefiro-legenda { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.prefiro-legenda-item { display: flex; align-items: center; gap: 9px; font-size: .84rem; }
.prefiro-legenda-cor { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.prefiro-legenda-rotulo { color: var(--texto-2); flex: 1; min-width: 0; }
.prefiro-legenda-valor { font-weight: 650; color: var(--texto); }

/* -------------------------------------------------------------------------
   O conjunto de gráficos: um retângulo, não três blocos soltos
   -------------------------------------------------------------------------
   `.prefiro-grade` alinha por `start`, que é o certo em quase todo lugar: cada
   bloco tem a altura do que carrega. Na faixa dos gráficos isso abria um
   buraco — a rosca com a legenda embaixo era uns 170px mais alta que o gráfico
   de área ao lado, e a linha de baixo só começava depois dela.

   Aqui os dois de cima passam a ter a mesma altura, declarada, e cada conteúdo
   se acomoda dentro: o SVG escala mantendo a proporção, a legenda da rosca foi
   para o lado e rola se a agência vender muitos tipos de produto. Nada define a
   altura do vizinho.

   A altura é uma variável para caber num lugar só o dia em que precisar mudar.
   ------------------------------------------------------------------------- */
.prefiro-grade-conjunto {
  --altura-do-conjunto: 268px;
  align-items: stretch;
}
.prefiro-bloco-conjunto {
  /* O admin do Django deixa estes blocos em `content-box`, e aí a altura
     declarada some por baixo dos 20px de recheio de cada lado — dois blocos
     com a mesma altura acabariam com 42px de diferença. */
  box-sizing: border-box;
  height: var(--altura-do-conjunto);
  display: flex;
  flex-direction: column;
}
/* `min-height: 0` porque um filho de flex não encolhe abaixo do próprio
   conteúdo sem isso — e sem ele o SVG estouraria a altura em vez de escalar. */
.prefiro-area-do-grafico {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
}
.prefiro-area-do-grafico > .prf-grafico {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.prefiro-rosca-com-legenda { gap: 18px; }
.prefiro-rosca-com-legenda > .prf-rosca {
  flex: 0 1 132px;
  max-width: 132px;
  margin: 0;
}
.prefiro-rosca-com-legenda > .prefiro-legenda {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  gap: 7px;
  max-height: 100%;
  overflow-y: auto;
}
.prefiro-rosca-com-legenda .prefiro-legenda-rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Meia tela para cada bloco muda a proporção: prender a altura ali só criaria
   um buraco novo, deste lado. */
@media (max-width: 1100px) {
  .prefiro-bloco-conjunto { height: auto; }
  .prefiro-area-do-grafico > .prf-grafico { height: auto; }
}
@media (max-width: 700px) {
  .prefiro-rosca-com-legenda { flex-direction: column; align-items: stretch; }
  .prefiro-rosca-com-legenda > .prf-rosca { flex: none; max-width: 168px; margin: 0 auto; }
  .prefiro-rosca-com-legenda > .prefiro-legenda { max-height: none; margin-top: 14px; }
}

.prefiro-tabela-painel { width: 100%; border-collapse: collapse; font-size: .87rem; }
/* Ver a nota sobre a faixa alternada na seção das tabelas: é o padrão do CRM,
   e a tabela do painel é lida de relance como qualquer outra. */
.prefiro-tabela-painel tbody tr:nth-child(odd) > td { background: var(--superficie); }
.prefiro-tabela-painel tbody tr:nth-child(even) > td { background: var(--faixa); }
.prefiro-tabela-painel tbody tr:hover > td { background: var(--superficie-3); }

/* O ranking de barras é lista também — e é a que mais se lê comparando uma
   linha com a de baixo, que é justamente o que a faixa ajuda. */
.prefiro-barra-linha:nth-child(odd) { background: var(--superficie); }
.prefiro-barra-linha:nth-child(even) { background: var(--faixa); }
.prefiro-barra-linha { padding-left: 8px; padding-right: 8px; border-radius: var(--r-sm); }
.prefiro-tabela-painel th {
  background: none;
  border: none;
  border-bottom: 1px solid var(--linha);
  color: var(--texto-3);
  font-size: var(--texto-micro);
  letter-spacing: .07em;
  padding: 0 8px 9px 0;
  text-align: left;
  text-transform: none;
}
.prefiro-tabela-painel td {
  border-bottom: 1px solid var(--linha);
  padding: 11px 8px 11px 0;
  vertical-align: middle;
}
.prefiro-tabela-painel tr:last-child td { border-bottom: none; }
.prefiro-col-direita { text-align: right; white-space: nowrap; color: var(--texto-2); }

/* Barra de progresso horizontal (ranking, distribuição). */
.prefiro-barra {
  height: 7px;
  border-radius: var(--r-cheio);
  background: var(--superficie-3);
  overflow: hidden;
  min-width: 70px;
}
.prefiro-barra span { display: block; height: 100%; border-radius: var(--r-cheio); background: var(--gr-1); }

.prefiro-vazio {
  background: var(--superficie);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r-lg);
  color: var(--texto-2);
  padding: 32px 24px;
  text-align: center;
}
.prefiro-vazio h2 { font-size: 1rem; margin: 0 0 6px; }


/* -------------------------------------------------------------------------
   10. Kanban do funil
   ------------------------------------------------------------------------- */
.prefiro-kanban {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  overflow-x: auto;
  padding: 4px 4px 20px;
  /* A rolagem para no início de cada coluna, em vez de parar no meio. */
  scroll-snap-type: x proximity;
}

.prefiro-coluna {
  flex: 0 0 288px;
  /* `min-width: auto` é o padrão de item flex e deixa a coluna crescer até
     caber o conteúdo mais largo — bastava um nome comprido para uma coluna
     ficar maior que as outras e o quadro perder o alinhamento. */
  min-width: 0;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  /* Duas dobras, e não uma (pedido de 24/09).

     Cortar em `100vh - 230px` amarrava toda etapa à primeira dobra: com oito
     cartões a coluna já rolava por dentro enquanto a página inteira seguia
     vazia embaixo — duas rolagens para ler uma lista, e a de dentro é a que
     ninguém percebe que existe.

     A etapa cresce com os cartões até a página inteira medir duas dobras.
     Passou disso, aí sim a lista rola por dentro: sem teto nenhum, uma coluna
     de 40 cartões faria a página ter quatro metros e as outras cinco etapas
     ficariam sozinhas lá em cima.

     Os 312px são o que a página gasta fora do quadro, medido na tela e não
     estimado: 215px acima (topo fixo de 64, migalhas e cabeçalho do painel) e
     97px abaixo (o recheio do conteúdo e o da faixa). Com eles na conta a
     página para exatamente em duas dobras; os 230px de antes sobravam 82px, e
     a dobra prometida não era a dobra entregue. */
  max-height: calc(200vh - 312px);
  scroll-snap-align: start;
  transition: background .12s ease, border-color .12s ease;
}

.prefiro-coluna-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--linha);
}
.prefiro-coluna-marca { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.prefiro-coluna-nome { font-weight: 650; font-size: .87rem; flex: 1; min-width: 0; }
.prefiro-coluna-total {
  background: var(--superficie-3);
  border-radius: var(--r-cheio);
  color: var(--texto-2);
  font-size: var(--texto-legenda);
  font-weight: 700;
  padding: 2px 9px;
}
.prefiro-coluna-valor {
  padding: 0 16px 10px;
  color: var(--texto-3);
  font-size: .76rem;
  border-bottom: 1px solid var(--linha);
}

.prefiro-coluna-lista {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 90px;
  /* `relative` não desloca nada: está aqui para conter o que é absoluto.

     Um elemento absoluto procura o ancestral posicionado mais próximo — e um
     `overflow: auto` sem posição não recorta o que escapou. Cada cartão tem
     um `.prefiro-sr` absoluto no botão «Mover» (o texto que o leitor de tela
     ouve), e os cartões rolados para fora da lista levavam esse trecho para
     fora do recorte: a página media 2667px quando o quadro acabava em 1884,
     780px de rolagem em branco embaixo do funil. */
  position: relative;
}

/* Estado de recebimento: a coluna inteira responde, não só o ponto do cursor. */
.prefiro-coluna.arrastando-sobre {
  background: var(--marca-suave);
  border-color: var(--marca-clara);
}
.prefiro-coluna.arrastando-sobre .prefiro-coluna-lista { outline: 2px dashed var(--marca-clara); outline-offset: -6px; border-radius: var(--r-md); }

.prefiro-cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-1);
  padding: 13px 14px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .12s ease, transform .12s ease, opacity .12s ease;
}
.prefiro-cartao:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
.prefiro-cartao:active { cursor: grabbing; }
.prefiro-cartao.arrastando { opacity: .4; }

.prefiro-cartao-topo { display: flex; align-items: center; gap: 9px; }
.prefiro-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--r-cheio);
  background: linear-gradient(135deg, var(--gr-1), var(--gr-6));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--texto-legenda);
  font-weight: 700;
  flex: none;
  letter-spacing: 0;
}
.prefiro-cartao-nome {
  font-weight: 650;
  font-size: .87rem;
  color: var(--texto);
  text-decoration: none;
  line-height: 1.3;
  min-width: 0;
  word-break: break-word;
}
.prefiro-cartao-nome:hover { color: var(--marca-texto); }
.prefiro-cartao-linha {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-2);
  font-size: var(--texto-nota);
  min-width: 0;
}
.prefiro-cartao-linha span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prefiro-cartao-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
  font-size: .76rem;
  color: var(--texto-3);
}
.prefiro-cartao-valor { font-weight: 700; color: var(--texto); }
.prefiro-cartao-atrasado { color: var(--erro-texto); font-weight: 600; }

.prefiro-coluna-vazia {
  color: var(--texto-3);
  font-size: .8rem;
  text-align: center;
  padding: 22px 10px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r-md);
}

.prefiro-kanban-aviso {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  background: var(--texto);
  color: var(--superficie);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-3);
  padding: 12px 18px;
  font-size: .86rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  max-width: 380px;
}
.prefiro-kanban-aviso.visivel { opacity: 1; transform: translateY(0); }
.prefiro-kanban-aviso.erro { background: var(--erro); color: #fff; }

.prefiro-abas {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 18px;
  overflow-x: auto;
}
.prefiro-aba {
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  color: var(--texto-2);
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
}
.prefiro-aba:hover { color: var(--texto); text-decoration: none; }
.prefiro-aba.ativa { color: var(--marca-texto); border-bottom-color: var(--marca); }


/* -------------------------------------------------------------------------
   11. Responsivo
   ------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .prefiro-col-4, .prefiro-col-5, .prefiro-col-7, .prefiro-col-8 { grid-column: span 6; }
}

@media (max-width: 1024px) {
  :root { --lateral-largura: 210px; }
  /* A busca e as ferramentas não cabem numa linha a 768px: o topo quebra e
     cresce com o que tem (antes era a coluna do `responsive.css` do admin que
     empilhava — ver `#header`). */
  #header { flex-wrap: wrap; height: auto; min-height: var(--topo-altura); padding-top: 8px; padding-bottom: 8px; row-gap: 8px; }
  #content { --recheio-lateral: 18px; padding: 18px 18px 48px; }
  .prefiro-col-4, .prefiro-col-5, .prefiro-col-6,
  .prefiro-col-7, .prefiro-col-8 { grid-column: span 12; }
}

@media (max-width: 767px) {
  .main { flex-direction: column; }
  #header { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 10px; }
  #content { --recheio-lateral: 14px; padding: 14px 14px 40px; }
  .aligned label { width: auto; float: none; display: block; padding-top: 0; }
  .prefiro-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .prefiro-card-valor { font-size: 1.5rem; }
  .submit-row { position: static; }
  .prefiro-coluna { flex-basis: 258px; max-height: none; }
}

/* Quem prefere menos movimento não recebe nenhum. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .prefiro-card:hover, .prefiro-cartao:hover { transform: none; }
}

/* Ações do cabeçalho do painel e legenda em linha. */
.prefiro-painel-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.prefiro-legenda-inline { display: flex; gap: 16px; flex-wrap: wrap; }
.prefiro-legenda-inline .prefiro-legenda-item { font-size: var(--texto-nota); }

/* Cartão aguardando a resposta do servidor. */
.prefiro-cartao.salvando { opacity: .6; pointer-events: none; }


/* -------------------------------------------------------------------------
   12. Ajustes de especificidade

   O admin do Django tem regras com dois IDs (`#toolbar #searchbar`,
   `#changelist .actions`) que vencem qualquer seletor de um ID só. Em vez de
   espalhar `!important` pelo arquivo — que quebraria o alternador de tema do
   próprio admin e qualquer ajuste futuro —, as regras que precisam ganhar
   estão reunidas aqui, com a mesma especificidade da regra que sobrescrevem.

   Também mora aqui o conserto do layout herdado: `#content-main` flutua, e
   elemento flutuante encolhe para caber o conteúdo. Era por isso que a tabela
   de itens de venda aparecia espremida em 432px numa tela de 1280.
   ------------------------------------------------------------------------- */

#content-main {
  float: none;
  width: 100%;
  min-width: 0;
}

#changelist {
  width: 100%;
  gap: 20px;
  align-items: flex-start;
}

#changelist .changelist-form-container { min-width: 0; }

#toolbar #searchbar {
  height: auto;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-cheio);
  background: var(--superficie-2);
  color: var(--texto);
  font-size: .88rem;
  padding: 10px 18px;
  margin: 0;
  vertical-align: middle;
}
#toolbar #searchbar:focus {
  border-color: var(--marca);
  background: var(--superficie);
}

#toolbar form#changelist-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#toolbar form#changelist-search > div { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; }
#changelist-search label { display: inline-flex; align-items: center; }

#changelist .actions {
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 12px;
}
#changelist .actions select {
  height: auto;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-md);
  color: var(--texto);
  font-size: .86rem;
  padding: 8px 12px;
  vertical-align: middle;
}
#changelist .actions .button {
  background: var(--marca);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  box-shadow: none;
  color: #fff;
  font-size: .84rem;
  padding: 8px 16px;
  margin: 0;
}
#changelist .actions .button:hover { background: var(--marca-forte); border-color: transparent; }

#changelist .paginator {
  background: none;
  border: none;
  color: var(--texto-2);
  overflow: visible;
}

#changelist .toplinks { border: 1px solid var(--linha); }

#changelist table thead th { padding: 0; }
#changelist table thead th.sorted { color: var(--marca-texto); }
#changelist table thead th > a,
#changelist table thead th > div.text > a {
  display: block;
  padding: 13px 16px;
}
#changelist table thead th.action-checkbox-column { width: 2.2em; }

#changelist-filter {
  flex: 0 0 232px;
  background: var(--superficie);
  border-left: 1px solid var(--linha);
  margin: 0;
}
#changelist-filter h2 {
  border-bottom: 1px solid var(--linha);
  font-size: .8rem;
  letter-spacing: .04em;
  margin-bottom: 0;
  padding: 14px 18px;
}
#changelist-filter h3,
#changelist-filter details summary { padding: 14px 18px 4px; margin-bottom: 2px; }
#changelist-filter ul { border-bottom: none; margin: 4px 0 8px; padding: 0 10px 4px; }
#changelist-filter a { color: var(--texto-2); }
#changelist-filter li.selected { border-left: none; padding-left: 0; margin-left: 0; }
#changelist-filter details > summary::before { content: none; }

/* O admin tem uma altura mínima grande para a coluna de filtros; sem filtro na
   tela isso deixa um vão branco embaixo da tabela. */
.change-list .filtered { min-height: 0; }

/* Formulários: mesma história de especificidade nos campos alinhados. */
.aligned label + p,
.aligned label + div.readonly { padding-top: 10px; margin-left: 0; }
form .aligned p.help,
form .aligned div.help { margin-left: 0; padding-left: 0; color: var(--texto-2); font-size: .8rem; }
.aligned .vCheckboxLabel { padding-top: 0; }


/* -------------------------------------------------------------------------
   13. Trilha do fluxo comercial

   As quatro etapas do negócio, no topo do atendimento, da cotação e do dossiê.
   Flex com quebra de linha: numa tela média as quatro não cabem lado a lado, e
   descer para a linha de baixo é melhor do que empurrar a página para o lado.
   ------------------------------------------------------------------------- */
.prefiro-trilha {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.prefiro-etapa {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 165px;
  min-width: 0;
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.prefiro-etapa-numero { font-size: var(--texto-micro); font-weight: 700; letter-spacing: .06em; text-transform: none; }
.prefiro-etapa-nome { font-weight: 700; font-size: var(--texto-corpo); }
.prefiro-etapa-detalhe { color: var(--texto-2); font-size: var(--texto-nota); word-break: break-word; }
.prefiro-etapa-acao {
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 12px;
  font-size: var(--texto-nota);
}
.prefiro-etapa-seta { color: var(--texto-3); font-size: 1.3rem; align-self: center; }

/* O verde é da etapa **atual**, não das outras.
   Estava ao contrário: a tela aberta vinha no vermelho da marca e as demais em
   verde, e o olho lê verde como "é aqui". Quem estava no atendimento achava que
   estava na cotação. Agora a etapa aberta é a verde, com borda verde e um traço
   à esquerda, e as já cumpridas ficam no tom da marca — visitadas, não ativas. */
.prefiro-etapa-feita { background: var(--marca-suave); }
.prefiro-etapa-feita .prefiro-etapa-numero,
.prefiro-etapa-feita .prefiro-etapa-nome { color: var(--marca-texto); }
.prefiro-etapa-feita .prefiro-etapa-nome:hover { color: var(--marca-texto); text-decoration: underline; }

.prefiro-etapa-atual {
  background: var(--ok-suave);
  border-color: var(--ok-texto);
  border-left-width: 4px;
}
.prefiro-etapa-atual .prefiro-etapa-numero,
.prefiro-etapa-atual .prefiro-etapa-nome { color: var(--ok-texto); }
/* Cor sozinha não diz em qual página se está para quem não distingue verde de
   vermelho. O "Etapa 2" da aberta vira "Etapa 2 · você está aqui". */
.prefiro-etapa-atual .prefiro-etapa-numero::after { content: ' · você está aqui'; }

.prefiro-etapa-pendente { background: var(--superficie-3); }
/* `--texto-3` sobre `--superficie-3` dá 4,27:1 — passa perto, mas passa por
   baixo do mínimo. A etapa pendente é informação, não decoração. */
.prefiro-etapa-pendente .prefiro-etapa-numero,
.prefiro-etapa-pendente .prefiro-etapa-nome { color: var(--texto-2); }

@media (max-width: 767px) {
  .prefiro-etapa-seta { display: none; }
  .prefiro-etapa { flex-basis: 100%; }
}


/* -------------------------------------------------------------------------
   14. Contraste: as regras do admin que assumem cabeçalho escuro

   O admin do Django pinta os links do cabeçalho com `var(--accent)` (amarelo) e
   `var(--header-link-color)` (branco) porque o cabeçalho dele é escuro. Como
   aqui o cabeçalho é claro, o resultado era logo amarelo sobre branco (1,37:1)
   e "Alterar senha" branco sobre branco — literalmente invisível.

   As regras do Django usam `:link` e `:visited`, o que soma uma pseudo-classe à
   especificidade. Um seletor sem elas perde por menos de um ponto, e foi
   exatamente o que aconteceu na primeira versão do tema. Aqui elas estão
   repetidas para empatar e vencer pela ordem.

   Mesma história no menu lateral: a `<table>` interna herdava fundo branco e
   deixava os links claros ilegíveis sobre ela, com o fundo escuro do `<nav>`
   escondido atrás. E `.current-model` do Django pinta a linha de amarelo claro,
   sobre o qual o texto branco dá 1,03:1.
   ------------------------------------------------------------------------- */

#site-name a:link,
#site-name a:visited { color: var(--texto); }
#site-name a:hover { color: var(--marca-texto); }

#header a:link,
#header a:visited { color: var(--texto-2); }
#header a:hover { color: var(--marca-texto); }

#user-tools a:link,
#user-tools a:visited { color: var(--texto-2); }
#user-tools a:hover { color: var(--marca-texto); }

#header .prefiro-link-painel:link,
#header .prefiro-link-painel:visited { color: var(--marca-texto); }
#header .prefiro-link-painel:hover { color: #fff; }

#logout-form button { color: var(--texto-2); }
#logout-form button:hover { color: var(--erro-texto); }

/* --- Trilha de navegação --- */
div.breadcrumbs a:link,
div.breadcrumbs a:visited { color: var(--texto-2); }
div.breadcrumbs a:hover { color: var(--marca-texto); }
div.breadcrumbs { color: var(--texto-2); }

/* --- Links dentro de conteúdo --- */
#content a:link,
#content a:visited { color: var(--marca-texto); }
/* Repetido com `#content` porque o admin usa id + pseudo-classe nas cores de
   link e a regra de elemento lá de cima perde a disputa. */
#content a:hover { color: var(--marca-hover); }
#content .prefiro-card:link,
#content .prefiro-card:visited { color: var(--texto); }
#content .prefiro-card-destaque:link,
#content .prefiro-card-destaque:visited { color: var(--texto); }
#changelist tbody th a:link,
#changelist tbody th a:visited,
#changelist tbody td a:link,
#changelist tbody td a:visited { color: var(--texto); }
#changelist tbody th a:hover,
#changelist tbody td a:hover { color: var(--marca-texto); }
#changelist-filter a:link,
#changelist-filter a:visited { color: var(--texto-2); }
#changelist-filter li.selected a:link,
#changelist-filter li.selected a:visited { color: var(--marca-texto); }
/* Estes precisam do `#content` na frente porque a regra genérica logo acima
   também o tem — sem isso ela vence, e o texto do botão sai da cor da marca
   sobre o fundo da marca. */
#content .object-tools a:link,
#content .object-tools a:visited { color: var(--texto-2); }
/* O `addlink` precisa reafirmar o fundo: a regra genérica das object-tools
   logo acima o pintaria de branco, e texto branco sobre branco some. */
#content .object-tools a.addlink,
#content .object-tools a.addlink:link,
#content .object-tools a.addlink:visited {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}
#content .object-tools a.addlink:hover { background: var(--marca-forte); }
#content .submit-row a:link,
#content .submit-row a:visited { color: var(--texto-2); }
#content .submit-row a.deletelink:link,
#content .submit-row a.deletelink:visited { color: var(--erro-texto); }
#content .button:link,
#content .button:visited,
#content a.button:link,
#content a.button:visited { color: #fff; }
/* Na barra de ações o `a.button` é a ação secundária, de fundo branco (regra
   `.submit-row a:link` acima): o texto branco da regra anterior sumia nele
   (o "Voltar" das telas próprias — achado de 03/10/2026). */
#content .submit-row a.button:link,
#content .submit-row a.button:visited,
#content .button.cancel:link,
#content .button.cancel:visited { color: var(--texto-2); }
#content .prefiro-etapa-nome:link,
#content .prefiro-etapa-nome:visited { color: inherit; }
#content .prefiro-etapa-feita .prefiro-etapa-nome:link,
#content .prefiro-etapa-feita .prefiro-etapa-nome:visited { color: var(--ok-texto); }
#content .prefiro-etapa-atual .prefiro-etapa-nome:link,
#content .prefiro-etapa-atual .prefiro-etapa-nome:visited { color: var(--marca-texto); }
#content .prefiro-cartao-nome:link,
#content .prefiro-cartao-nome:visited { color: var(--texto); }


/* -------------------------------------------------------------------------
   15. Navegação: barra de módulos e botão de voltar

   O menu lateral responde "o que existe no sistema"; a barra responde "para
   onde eu vou agora". Eram perguntas diferentes sendo atendidas pelo mesmo
   componente — e a segunda ficava sem resposta, porque encontrar Dossiês numa
   lista de treze módulos exige ler a lista inteira.
   ------------------------------------------------------------------------- */
.prefiro-modulos {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 28px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  overflow-x: auto;
  position: sticky;
  top: var(--topo-altura);
  z-index: 25;
  scrollbar-width: thin;
}

.prefiro-modulo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 15px 11px;
  border-bottom: 2px solid transparent;
  color: var(--texto-2);
  font-size: .87rem;
  font-weight: 550;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.prefiro-modulo:hover {
  color: var(--texto);
  background: var(--superficie-3);
  text-decoration: none;
}
.prefiro-modulo.atual {
  color: var(--marca-texto);
  border-bottom-color: var(--marca);
  font-weight: 700;
}
.prefiro-modulo-icone {
  font-size: 1rem;
  line-height: 1;
  opacity: .75;
}
.prefiro-modulo.atual .prefiro-modulo-icone { opacity: 1; }

/* Especificidade: o admin pinta `#header a` e a barra é irmã dele. */
.prefiro-modulos a:link,
.prefiro-modulos a:visited { color: var(--texto-2); }
.prefiro-modulos a.atual:link,
.prefiro-modulos a.atual:visited { color: var(--marca-texto); }

/* --- Voltar --- */
.prefiro-acoes-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.prefiro-acoes-topo .object-tools { margin: 0; }

.prefiro-voltar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-cheio);
  background: var(--superficie);
  color: var(--texto-2);
  font-size: .82rem;
  font-weight: 600;
  box-shadow: var(--sombra-1);
}
.prefiro-voltar:hover {
  background: var(--superficie-3);
  color: var(--texto);
  border-color: var(--texto-3);
  text-decoration: none;
}
#content .prefiro-voltar:link,
#content .prefiro-voltar:visited { color: var(--texto-2); }
#content .prefiro-voltar:hover { color: var(--texto); }

@media (max-width: 767px) {
  .prefiro-modulos { padding: 0 14px; position: static; }
  .prefiro-modulo { padding: 11px 12px; font-size: .82rem; }
  .prefiro-modulo span:not(.prefiro-modulo-icone) { display: none; }
  .prefiro-modulo.atual span:not(.prefiro-modulo-icone) { display: inline; }
  .prefiro-modulo-icone { font-size: 1.15rem; }
}

/* Contador dentro da aba de situação. */
.prefiro-aba-total {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--r-cheio);
  background: var(--superficie-3);
  color: var(--texto-2);
  font-size: var(--texto-legenda);
  font-weight: 700;
}
.prefiro-aba.ativa .prefiro-aba-total { background: var(--marca-suave); color: var(--marca-texto); }
.prefiro-abas { margin-bottom: 14px; }
#changelist .prefiro-abas a:link,
#changelist .prefiro-abas a:visited { color: var(--texto-2); }
#changelist .prefiro-abas a.ativa:link,
#changelist .prefiro-abas a.ativa:visited { color: var(--marca-texto); }


/* -------------------------------------------------------------------------
   16. Busca global

   O campo fica no cabeçalho, ao lado da marca, porque a busca é a ação mais
   frequente de quem atende ao telefone — e a única que não pertence a nenhum
   módulo em particular.
   ------------------------------------------------------------------------- */
.prefiro-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 22px;
  padding: 0 14px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-cheio);
  background: var(--superficie-2);
  min-width: 260px;
  max-width: 420px;
  flex: 1;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.prefiro-busca:focus-within {
  border-color: var(--marca);
  background: var(--superficie);
  box-shadow: 0 0 0 3px var(--marca-suave);
}
.prefiro-busca-icone { color: var(--texto-3); font-size: var(--texto-titulo); line-height: 1; cursor: text; }
.prefiro-busca input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 9px 0;
  font-family: inherit;
  font-size: .87rem;
  color: var(--texto);
}
.prefiro-busca input:focus { outline: none; box-shadow: none; border: none; }
.prefiro-busca input::placeholder { color: var(--texto-3); }

.prefiro-resultados { list-style: none; margin: 0; padding: 0; }
.prefiro-resultados li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
}
.prefiro-resultados li:last-child { border-bottom: none; }

.prefiro-resultado {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.prefiro-resultado-titulo { font-weight: 600; color: var(--texto); word-break: break-word; }
.prefiro-resultado-detalhe { color: var(--texto-2); font-size: .81rem; }
#content .prefiro-resultado:link,
#content .prefiro-resultado:visited { color: var(--texto); }
#content .prefiro-resultado:hover .prefiro-resultado-titulo { color: var(--marca-texto); }

@media (max-width: 1024px) {
  .prefiro-busca { min-width: 180px; margin-left: 12px; }
}
@media (max-width: 767px) {
  .prefiro-busca { order: 3; width: 100%; max-width: none; margin: 0; }
}


/* -------------------------------------------------------------------------
   17. Visão 360 do cliente
   ------------------------------------------------------------------------- */
.prefiro-360 { display: flex; flex-direction: column; gap: 20px; }

.prefiro-360-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.prefiro-360-numero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
}
.prefiro-360-numero strong { font-size: var(--texto-titulo); color: var(--texto); }
.prefiro-360-rotulo { color: var(--texto-2); font-size: var(--texto-legenda); text-transform: none; letter-spacing: .05em; }

.prefiro-360-secao { min-width: 0; }
.prefiro-360-secao h4 {
  margin: 0 0 8px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: none;
  color: var(--texto-2);
}

.prefiro-360-lado-a-lado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* Variação em relação ao período anterior, nos indicadores do painel. */
.prefiro-variacao {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  margin-right: 6px;
  border-radius: var(--r-cheio);
  background: var(--superficie-3);
  color: var(--texto-2);
  font-size: var(--texto-legenda);
  font-weight: 700;
}
/* O `:not(.prefiro-card-destaque)` existia só para poupar o cartão de gradiente,
   que agora é claro como os outros. Um par de regras a menos brigando. */
.prefiro-variacao.subiu { background: var(--ok-suave); color: var(--ok-texto); }
.prefiro-variacao.caiu { background: var(--erro-suave); color: var(--erro-texto); }


/* -------------------------------------------------------------------------
   18. Metas: OKRs e KPIs
   ------------------------------------------------------------------------- */
.prefiro-ciclo {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.prefiro-ciclo-numero { display: flex; flex-direction: column; }
.prefiro-ciclo-numero strong { font-size: 2.1rem; font-weight: 750; letter-spacing: -0.04em; line-height: 1; }
.prefiro-ciclo-numero span { color: var(--texto-2); font-size: .8rem; }

.prefiro-ciclo-barras { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 10px; }
.prefiro-ciclo-linha { display: flex; align-items: center; gap: 10px; }
.prefiro-ciclo-rotulo { width: 72px; color: var(--texto-2); font-size: var(--texto-nota); flex: none; }
.prefiro-ciclo-linha .prefiro-barra { flex: 1; height: 9px; }

/* A barra do tempo é referência, não conquista: fica cinza para não competir
   visualmente com o progresso dos objetivos. */
.prefiro-barra.tempo span { background: var(--texto-3); }

.prefiro-objetivo { border-left: 3px solid var(--linha-forte); }
.prefiro-objetivo.situacao-no_ritmo,
.prefiro-objetivo.situacao-concluido { border-left-color: var(--ok); }
.prefiro-objetivo.situacao-atencao { border-left-color: var(--aviso); }
.prefiro-objetivo.situacao-atrasado { border-left-color: var(--erro); }

.prefiro-objetivo-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.prefiro-objetivo-topo h2 { margin: 0; font-size: var(--texto-titulo); }
.prefiro-objetivo-progresso {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.prefiro-objetivo-progresso strong { font-size: 1.5rem; font-weight: 750; letter-spacing: -0.03em; }

.prefiro-krs td { vertical-align: middle; }
.prefiro-krs .prefiro-barra { display: inline-block; width: 62%; vertical-align: middle; }

.prefiro-auto, .prefiro-manual {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: var(--r-cheio);
  font-size: var(--texto-micro);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
}
.prefiro-auto { background: var(--ok-suave); color: var(--ok-texto); }
.prefiro-manual { background: var(--superficie-3); color: var(--texto-2); }

/* --- KPIs --- */
.prefiro-kpi { border-left: 3px solid var(--linha-forte); position: relative; }
.prefiro-kpi.situacao-saudavel { border-left-color: var(--ok); }
.prefiro-kpi.situacao-abaixo { border-left-color: var(--erro); }
.prefiro-kpi.situacao-acima { border-left-color: var(--aviso); }
.prefiro-kpi.situacao-neutro { border-left-color: var(--info); }

.prefiro-kpi-situacao {
  margin-top: 6px;
  color: var(--texto-2);
  font-size: var(--texto-legenda);
  text-transform: none;
  letter-spacing: .05em;
}
.prefiro-kpi.situacao-abaixo .prefiro-kpi-situacao { color: var(--erro-texto); font-weight: 700; }
.prefiro-kpi.situacao-acima .prefiro-kpi-situacao { color: var(--aviso-texto); font-weight: 700; }
.prefiro-kpi.situacao-saudavel .prefiro-kpi-situacao { color: var(--ok-texto); }


/* -------------------------------------------------------------------------
   19. Barra lateral do CRM

   Substitui a do Django. Diferenças que importam: é organizada pelos grupos da
   rotina (não pela estrutura do código), fica sempre visível (a do Django vem
   recolhida, e foi por isso que não se achava Dossiês a partir do painel) e o
   grupo do item aberto já nasce expandido.
   ------------------------------------------------------------------------- */
.prefiro-lateral {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px 32px;
  /* Sem `border-box` o padding soma à base e a lateral fica 20px mais larga
     do que o conteúdo reserva, empurrando a página para o lado. */
  box-sizing: border-box;
  background: var(--lateral);
  width: var(--lateral-largura);
  flex: 0 0 var(--lateral-largura);
  overflow-y: auto;
  scrollbar-width: thin;
}
.prefiro-lateral::-webkit-scrollbar { width: 6px; }
.prefiro-lateral::-webkit-scrollbar-thumb { background: #ffffff1f; border-radius: 3px; }

/* A lateral é presa e tem altura própria em **qualquer** largura.
   -------------------------------------------------------------------------
   Isto vivia dentro de um `@media (min-width: 1024px)`, e abaixo disso a
   lateral ficava sem `position` e sem altura declarada. Como filha de `.main`
   (`display: flex`, sem `align-items`, ou seja `stretch`), ela esticava para
   acompanhar a coluna de conteúdo ao lado.

   Medido a 900px, numa listagem de atendimentos: menu com 684px de itens
   dentro de uma faixa de **1.758px**. Mil pixels de fundo escuro vazio — e, ao
   rolar, os itens saem da vista e sobra só a faixa. Foi o que apareceu nos PDFs
   e o que a auditoria reproduziu ao vivo.

   1024px de largura *efetiva* é mais estreito do que parece: escala do Windows
   acima de 100%, janela não maximizada ou zoom do navegador já derrubam um
   monitor grande abaixo disso. O breakpoint estava protegendo contra um caso
   que não precisava de proteção e deixando o caso comum sem nenhuma.

   Não há mais media query: `sticky` + altura de viewport é o comportamento
   certo em toda largura. O que muda com a tela estreita é a largura da lateral,
   e isso já é outro token. */
.prefiro-lateral {
  position: sticky;
  top: var(--topo-altura);
  height: calc(100vh - var(--topo-altura));
}

/* Abaixo de 1024px o topo pode empilhar e ficar mais alto que `--topo-altura`.
   `max-height` em unidade de viewport garante que a lateral nunca peça mais
   altura do que a tela tem, mesmo que a conta do `top` fique defasada. */
@media (max-width: 1023px) {
  .prefiro-lateral {
    max-height: 100vh;
  }
}

.prefiro-lateral ul { list-style: none; margin: 0; padding: 0; }
.prefiro-lateral-solto { margin-bottom: 6px; }

.prefiro-lateral-grupo { margin-bottom: 2px; }
.prefiro-lateral-grupo > summary {
  padding: 12px 12px 7px;
  color: var(--lateral-texto-fraco);
  font-size: var(--texto-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: none;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.prefiro-lateral-grupo > summary::-webkit-details-marker { display: none; }
.prefiro-lateral-grupo > summary::after { content: '▸'; font-size: .8em; transition: transform .15s ease; }
.prefiro-lateral-grupo[open] > summary::after { transform: rotate(90deg); }
.prefiro-lateral-grupo > summary:hover { color: var(--lateral-texto); }

.prefiro-lateral-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  color: var(--lateral-texto);
  font-size: .87rem;
  font-weight: 500;
  text-decoration: none;
  /* Nome longo quebra em vez de ser cortado com reticências. */
  white-space: normal;
  word-break: break-word;
  transition: background .12s ease, color .12s ease;
}
.prefiro-lateral-item:hover {
  background: var(--lateral-2);
  color: var(--lateral-texto-forte);
  text-decoration: none;
}
.prefiro-lateral-item.atual {
  background: linear-gradient(90deg, rgba(255, 106, 61, .26), rgba(255, 106, 61, .07));
  color: #fff;
  font-weight: 650;
  box-shadow: inset 3px 0 0 var(--marca-clara);
}
.prefiro-lateral-icone {
  line-height: 1;
  opacity: .8;
  flex: none;
  width: 18px;
  /* O SVG vem de `apps/icones.py` e herda a cor do texto do item (03 M5). Como
     é `currentColor`, o item ativo, o hover e o tema escuro pintam o ícone
     junto com o rótulo, sem uma regra sequer para cada estado. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.prefiro-icone {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
}
.prefiro-lateral-item.atual .prefiro-lateral-icone { opacity: 1; }

/* Especificidade: o admin pinta `#content a` e a lateral é irmã dele. */
.prefiro-lateral a:link,
.prefiro-lateral a:visited { color: var(--lateral-texto); }
.prefiro-lateral a.atual:link,
.prefiro-lateral a.atual:visited { color: #fff; }
.prefiro-lateral a:hover { color: var(--lateral-texto-forte); }

@media (max-width: 767px) {
  .prefiro-lateral {
    width: 100%;
    flex: none;
    position: static;
    height: auto;
    max-height: 320px;
  }
}


/* O irmão da lateral precisa encolher para caber ao lado dela. Sem isto ele
   mantém a largura cheia e a soma dos dois passa da janela — foi o que
   aconteceu quando a barra do Django saiu e a nossa entrou no lugar. */
.main > .content,
main#content-start {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
}


/* -------------------------------------------------------------------------
   20. Meu dia, ações de um clique e primeiros passos
   -------------------------------------------------------------------------
   Três blocos que existem pelo mesmo motivo: encurtar a distância entre ver o
   que precisa ser feito e fazer. Por isso a linha inteira é uma unidade — ícone
   à esquerda, texto no meio, prazo e botões à direita — e os botões só ganham
   cor quando o ponteiro chega. Uma lista com dez botões vermelhos sempre acesos
   grita, e o que grita o tempo todo deixa de ser lido.
   ------------------------------------------------------------------------- */
.prefiro-dia { padding: 6px 0; }

.prefiro-dia-lista { list-style: none; margin: 0; padding: 0; }

.prefiro-dia-item {
  display: flex;
  align-items: center;
  /* A faixa de ações não encolhe de propósito — botão apertado é botão que se
     erra. Mas ela também não quebrava, e com sete ações numa tela de 900px a
     linha estourava 2px além da janela e a página inteira passava a rolar de
     lado. Quebrar é a saída: o texto encolhe até o limite, e aí as ações
     descem para uma segunda linha em vez de empurrar a página. */
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--linha);
  transition: background-color .12s ease, opacity .2s ease, transform .2s ease;
}
.prefiro-dia-item:last-child { border-bottom: 0; }
.prefiro-dia-item:hover { background: var(--superficie-3); }

/* Sai da lista deslizando: a linha some, mas dá tempo de ver qual sumiu. */
.prefiro-dia-item.prefiro-saindo,
.prefiro-painel-secao.prefiro-saindo {
  opacity: 0;
  transform: translateX(18px);
}

.prefiro-dia-icone {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-cheio);
  background: var(--superficie-3);
  color: var(--texto-2);
  font-size: var(--texto-corpo-sm);
}
.prefiro-dia-item.atrasado .prefiro-dia-icone {
  background: var(--erro-suave);
  color: var(--erro-texto);
}

.prefiro-dia-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.prefiro-dia-titulo {
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prefiro-dia-titulo:link,
.prefiro-dia-titulo:visited { color: var(--texto); }
.prefiro-dia-titulo:hover { color: var(--marca-texto); text-decoration: underline; }
.prefiro-dia-contexto {
  font-size: var(--texto-nota);
  color: var(--texto-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prefiro-dia-prazo {
  flex: 0 0 auto;
  font-size: var(--texto-nota);
  color: var(--texto-3);
  white-space: nowrap;
}
.prefiro-dia-item.atrasado .prefiro-dia-prazo { color: var(--erro-texto); font-weight: 600; }

.prefiro-dia-acoes {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Encostada à direita quando cabe na linha do texto; ocupando a linha
     inteira quando desce. */
  margin-left: auto;
  gap: 6px;
  opacity: .45;
  transition: opacity .12s ease;
}
.prefiro-dia-item:hover .prefiro-dia-acoes,
.prefiro-dia-acoes:focus-within { opacity: 1; }

.prefiro-dia-adiar { display: inline-flex; align-items: center; gap: 3px; }
.prefiro-dia-adiar-rotulo {
  font-size: var(--texto-legenda);
  color: var(--texto-3);
  text-transform: none;
  letter-spacing: .04em;
  margin-right: 2px;
}

.prefiro-dia-rodape { padding: 10px 16px 4px; margin: 0; }
.prefiro-dia-limpo { padding: 18px 16px; margin: 0; color: var(--texto-2); }

/* --- O botão de ação ---------------------------------------------------- */
.prefiro-acao {
  border: 1px solid var(--linha-forte);
  background: var(--superficie);
  color: var(--texto-2);
  border-radius: var(--r-sm);
  padding: 4px 9px;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.prefiro-acao:hover { border-color: var(--texto-3); color: var(--texto); }
.prefiro-acao:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.prefiro-acao-ok:hover {
  background: var(--ok-suave);
  border-color: var(--ok);
  color: var(--ok-texto);
}
.prefiro-acao-fraca { padding: 4px 6px; font-weight: 500; color: var(--texto-3); }
.prefiro-acao[disabled] { opacity: .5; cursor: default; }

/* --- O recado que confirma a ação --------------------------------------- */
.prefiro-recado {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  z-index: 2000;
  max-width: min(560px, 92vw);
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--lateral);
  color: var(--lateral-texto-forte);
  box-shadow: var(--sombra-3);
  font-size: var(--texto-corpo-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.prefiro-recado.visivel { opacity: 1; transform: translate(-50%, 0); }
.prefiro-recado.erro { background: var(--erro); color: #ffffff; }

/* --- Primeiros passos ---------------------------------------------------- */
.prefiro-passos { padding: 16px 18px; }
.prefiro-passos-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.prefiro-passos-titulo { margin: 0; font-size: 1rem; }

.prefiro-passos-barra {
  height: 6px;
  border-radius: var(--r-cheio);
  background: var(--superficie-3);
  margin: 12px 0 14px;
  overflow: hidden;
}
.prefiro-passos-barra > span {
  display: block;
  height: 100%;
  background: var(--ok);
  border-radius: var(--r-cheio);
  transition: width .3s ease;
}

.prefiro-passos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 18px;
}
.prefiro-passo {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
}
.prefiro-passo.proximo { background: var(--marca-suave); }
.prefiro-passo-marca { color: var(--texto-3); font-size: var(--texto-corpo-sm); }
.prefiro-passo.feito .prefiro-passo-marca { color: var(--ok-texto); }
.prefiro-passo-texto { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.prefiro-passo-texto a { font-weight: 600; }
.prefiro-passo.feito .prefiro-passo-texto a { font-weight: 500; }
.prefiro-passo.feito .prefiro-passo-texto a:link,
.prefiro-passo.feito .prefiro-passo-texto a:visited { color: var(--texto-2); }
.prefiro-passo-ajuda { font-size: .76rem; color: var(--texto-3); }
.prefiro-passo.feito .prefiro-passo-ajuda { display: none; }
.prefiro-passo-agora {
  font-size: var(--texto-micro);
  font-weight: 700;
  text-transform: none;
  letter-spacing: .05em;
  color: var(--marca-texto);
  white-space: nowrap;
}

.prefiro-contador-erro { background: var(--erro-suave); color: var(--erro-texto); }


/* -------------------------------------------------------------------------
   21. Paleta de comandos (Ctrl+K)
   -------------------------------------------------------------------------
   Sobreposta e centralizada no terço superior, que é onde o olho já está
   quando alguém aperta o atalho. A janela não fecha ao clicar dentro: quem
   erra o alvo por 3px não perde o que digitou.
   ------------------------------------------------------------------------- */
.prefiro-paleta { display: none; }
.prefiro-paleta.aberta { display: block; }

.prefiro-paleta-fundo {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(11, 13, 18, .55);
}

.prefiro-paleta-janela {
  position: fixed;
  z-index: 2101;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 94vw);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-3);
  overflow: hidden;
}

.prefiro-paleta-campo {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--linha);
  background: transparent;
  color: var(--texto);
  padding: 15px 18px;
  font-size: 1rem;
  outline: none;
}
.prefiro-paleta-campo::placeholder { color: var(--texto-3); }

.prefiro-paleta-lista {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 52vh;
  overflow-y: auto;
}

.prefiro-paleta-grupo {
  padding: 8px 18px 4px;
  font-size: var(--texto-micro);
  font-weight: 700;
  text-transform: none;
  letter-spacing: .06em;
  color: var(--texto-3);
}

.prefiro-paleta-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 18px;
  cursor: pointer;
}
.prefiro-paleta-item.marcado { background: var(--marca-suave); }
.prefiro-paleta-icone {
  flex: 0 0 22px;
  text-align: center;
  color: var(--texto-3);
}
.prefiro-paleta-item.marcado .prefiro-paleta-icone { color: var(--marca-texto); }
.prefiro-paleta-texto { display: flex; flex-direction: column; min-width: 0; }
.prefiro-paleta-texto strong {
  font-weight: 600;
  font-size: .9rem;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prefiro-paleta-texto small {
  font-size: .76rem;
  color: var(--texto-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prefiro-paleta-vazio { padding: 18px; color: var(--texto-3); font-size: .87rem; }

.prefiro-paleta-rodape {
  display: flex;
  gap: 16px;
  padding: 9px 18px;
  border-top: 1px solid var(--linha);
  background: var(--superficie-2);
  font-size: var(--texto-legenda);
  color: var(--texto-3);
}
.prefiro-paleta-rodape kbd,
.prefiro-busca-atalho kbd {
  display: inline-block;
  border: 1px solid var(--linha-forte);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--superficie);
  color: var(--texto-2);
  padding: 0 4px;
  margin-right: 2px;
  font-family: inherit;
  font-size: var(--texto-legenda);
  line-height: 1.5;
}

/* O atalho visível no campo de busca: quem não conhece Ctrl+K descobre aqui. */
.prefiro-busca-atalho {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 8px 0 4px;
  opacity: .75;
}
.prefiro-busca-atalho:hover { opacity: 1; }

@media (max-width: 900px) {
  .prefiro-busca-atalho { display: none; }
  /* Em tela estreita as ações ficam sempre visíveis: `opacity` que só sobe no
     hover é affordance de mouse, e aqui pode não haver mouse.
     `box-sizing` porque `width: 100%` **mais** 38px de recheio somam 38px além
     do pai sem ele — a página inteira passava a rolar de lado por causa disso.
     É a mesma armadilha que a lateral documenta duas seções acima. */
  .prefiro-dia-acoes {
    box-sizing: border-box;
    opacity: 1;
    width: 100%;
    padding-left: 38px;
  }
}


/* -------------------------------------------------------------------------
   22. Etiquetas
   -------------------------------------------------------------------------
   A pastilha tem de ser reconhecível de relance e nunca roubar a linha em que
   está: por isso é pequena, sem borda e sem peso extra. A cor identifica; quem
   informa é o texto.

   Cada cor é um par fundo/texto definido nos tokens, e o par é o mesmo nos dois
   temas — o que muda é o valor, não a estrutura. Foi assim que as oito cores
   passaram no contraste sem exceção.
   ------------------------------------------------------------------------- */
.prefiro-marcador {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-cheio);
  font-size: var(--texto-legenda);
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--et-cinza-fundo);
  color: var(--et-cinza-texto);
}
.prefiro-marcador.cor-cinza    { background: var(--et-cinza-fundo);    color: var(--et-cinza-texto); }
.prefiro-marcador.cor-vermelho { background: var(--et-vermelho-fundo); color: var(--et-vermelho-texto); }
.prefiro-marcador.cor-laranja  { background: var(--et-laranja-fundo);  color: var(--et-laranja-texto); }
.prefiro-marcador.cor-verde    { background: var(--et-verde-fundo);    color: var(--et-verde-texto); }
.prefiro-marcador.cor-azul     { background: var(--et-azul-fundo);     color: var(--et-azul-texto); }
.prefiro-marcador.cor-roxo     { background: var(--et-roxo-fundo);     color: var(--et-roxo-texto); }
.prefiro-marcador.cor-rosa     { background: var(--et-rosa-fundo);     color: var(--et-rosa-texto); }
.prefiro-marcador.cor-turquesa { background: var(--et-turquesa-fundo); color: var(--et-turquesa-texto); }

/* No cartão do funil o espaço é pouco: as etiquetas quebram em linha própria
   e as que não couberem ficam para a tela do atendimento. */
.prefiro-cartao-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.prefiro-cartao-etiquetas .prefiro-marcador { font-size: var(--texto-micro); padding: 0 7px; }

/* Na busca e no «Meu dia» a etiqueta acompanha o título, não a linha inteira. */
.prefiro-busca-item .prefiro-etiqueta,
.prefiro-busca-item .prefiro-marcador,
.prefiro-dia-texto .prefiro-etiqueta,
.prefiro-dia-texto .prefiro-marcador { margin-left: 6px; }

/* O seletor múltiplo padrão do Django é alto demais para oito escolhas. */
.field-etiquetas select[multiple] { min-height: 8.5em; max-width: 420px; }


/* -------------------------------------------------------------------------
   23. Pessoas repetidas
   -------------------------------------------------------------------------
   Os dois cadastros ficam lado a lado com os mesmos campos na mesma ordem e na
   mesma altura de linha. É essa simetria que permite comparar de relance —
   qualquer deslocamento entre as colunas obriga o olho a procurar o par de
   cada campo, e aí a tela deixa de resolver em segundos.
   ------------------------------------------------------------------------- */
.prefiro-duplicados { padding: 4px 0; }

.prefiro-dup-par {
  padding: 14px 18px;
  border-bottom: 1px solid var(--linha);
}
.prefiro-dup-par:last-child { border-bottom: 0; }

.prefiro-dup-motivo {
  font-size: var(--texto-legenda);
  font-weight: 700;
  text-transform: none;
  letter-spacing: .06em;
  color: var(--texto-3);
  margin-bottom: 8px;
}

.prefiro-dup-lados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.prefiro-dup-lado {
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--superficie-2);
}
.prefiro-dup-lado.fica {
  border-color: var(--ok);
  background: var(--ok-suave);
}

.prefiro-dup-marca {
  display: inline-block;
  font-size: var(--texto-micro);
  font-weight: 700;
  text-transform: none;
  letter-spacing: .06em;
  padding: 0 6px;
  border-radius: var(--r-cheio);
  margin-bottom: 6px;
  /* Os mesmos pares fundo/texto das etiquetas: branco sobre --ok dá 3.5:1, que
     reprova para texto pequeno. O par verde do token passa nos dois temas. */
  background: var(--et-verde-fundo);
  color: var(--et-verde-texto);
}
.prefiro-dup-marca.some {
  background: var(--et-cinza-fundo);
  color: var(--et-cinza-texto);
}

.prefiro-dup-nome {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 6px;
}

.prefiro-dup-campos {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: .8rem;
}
/* `--texto-3` sobre o verde do lado que fica dá 4.24:1 — reprova por pouco, e
   reprovar por pouco é reprovar. `--texto-2` passa nos dois fundos. */
.prefiro-dup-campos dt { color: var(--texto-2); }
.prefiro-dup-campos dd { margin: 0; color: var(--texto); }

.prefiro-dup-acoes { display: inline-block; margin: 10px 8px 0 0; }


/* -------------------------------------------------------------------------
   24. Importação de planilha
   -------------------------------------------------------------------------
   A tabela de conferência é longa por natureza — é ela que substitui o
   "importou e torça". A cor de fundo da linha diz o destino dela sem obrigar a
   ler a coluna: quem só quer saber se há problema encontra o vermelho rolando
   a página, sem precisar procurar.
   ------------------------------------------------------------------------- */
.prefiro-importar-colunas {
  margin: 8px 0 12px;
  padding-left: 20px;
  font-size: .87rem;
  color: var(--texto-2);
  line-height: 1.9;
}

.prefiro-importar-tabela { font-size: .84rem; }
.prefiro-importar-tabela th { white-space: nowrap; }
.prefiro-importar-tabela td { vertical-align: middle; }
.prefiro-importar-tabela small {
  display: block;
  color: var(--texto-2);
  font-size: var(--texto-legenda);
  margin-top: 2px;
}
.prefiro-importar-tabela tr.acao-erro { background: var(--erro-suave); }
.prefiro-importar-tabela tr.acao-completar { background: var(--info-suave); }


/* -------------------------------------------------------------------------
   25. Barras horizontais de ranking
   -------------------------------------------------------------------------
   Usadas em "Por que perdemos". Div com largura percentual, não SVG: são
   barras retas, e gerar um gráfico no servidor para isso seria peso sem ganho.
   O rótulo tem largura fixa para que todas as barras comecem na mesma coluna —
   sem isso a comparação visual, que é a razão de existir do gráfico, se perde.
   ------------------------------------------------------------------------- */
.prefiro-barras { list-style: none; margin: 0; padding: 10px 16px 14px; }

.prefiro-barra-linha {
  display: grid;
  /* 160px cortavam "CLIENTE NAO RETORNOU" por **sete pixels** — o motivo de
     perda mais frequente da agência aparecia como "CLIENTE NAO RETORNO…".
     A coluna do rótulo continua fixa, porque é ela que faz todas as barras
     começarem no mesmo ponto (sem isso a comparação visual, que é a razão de
     existir do gráfico, se perde), mas agora cabe o maior motivo cadastrado. */
  grid-template-columns: 186px 1fr 74px;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.prefiro-barra-rotulo {
  font-size: .82rem;
  color: var(--texto);
  /* Sem reticências: um motivo de perda cortado é justamente o dado que a tela
     existe para mostrar. Se um motivo novo não couber na coluna, ele quebra em
     duas linhas — a barra continua começando no mesmo lugar. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.prefiro-barra-trilho {
  height: 10px;
  border-radius: var(--r-cheio);
  background: var(--superficie-3);
  overflow: hidden;
}
.prefiro-barra-cheia {
  display: block;
  height: 100%;
  border-radius: var(--r-cheio);
  min-width: 3px;
}

.prefiro-barra-valor {
  font-size: .84rem;
  font-weight: 600;
  color: var(--texto);
  text-align: right;
}
.prefiro-barra-valor small {
  display: inline-block;
  margin-left: 4px;
  font-weight: 400;
  font-size: var(--texto-legenda);
  color: var(--texto-2);
}

/* A linha inteira é o alvo, e não só o rótulo: um alvo de 12px de altura é um
   alvo que se erra. O link é uma camada por cima, sem texto — assim ele não
   entra na grade de três colunas nem empurra rótulo, barra e número. */
.prefiro-barra-linha.clicavel { position: relative; border-radius: var(--r-sm); }
.prefiro-barra-linha.clicavel:hover { background: var(--superficie-2); }
.prefiro-barra-alvo {
  position: absolute;
  /* Zero em cima e embaixo: com folga vertical os alvos de duas linhas
     vizinhas se sobrepõem, e o clique na fronteira abre a etapa errada. */
  inset: 0 -6px;
  border-radius: inherit;
}
.prefiro-barra-alvo:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

/* O funil tem três etapas: sem altura mínima ele ficaria com a cara de uma
   sobra de página, e com o gráfico antigo tinha a cara de um cartaz. */
.prefiro-bloco-funil .prefiro-barras { padding: 4px 0 0; }
.prefiro-bloco-funil .prefiro-barra-linha { padding: 7px 0; }

@media (max-width: 700px) {
  .prefiro-barra-linha { grid-template-columns: 110px 1fr 64px; }
}


/* -------------------------------------------------------------------------
   26. Rodapé fixo: salvar e andar entre as etapas
   -------------------------------------------------------------------------
   `position: sticky` no rodapé, e não no topo: o formulário de dossiê tem oito
   blocos e dois inlines, e o botão de salvar ficava a três telas de distância
   de onde a pessoa estava digitando. Com o rodapé preso, ele está sempre a um
   clique — e as etapas ficam ao lado dele porque é ali que o trabalho termina.
   ------------------------------------------------------------------------- */
.prefiro-rodape-fixo {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px -20px -20px;
  padding: 10px 20px;
  background: var(--superficie);
  border-top: 1px solid var(--linha-forte);
  box-shadow: 0 -4px 16px rgba(16, 24, 40, .07);
}

/* A submit_row do Django vem com margem e fundo próprios; aqui ela é só o
   miolo da barra. */
.prefiro-rodape-salvar { flex: 1 1 auto; display: flex; justify-content: center; }
.prefiro-rodape-salvar .submit-row {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.prefiro-etapa-voltar,
.prefiro-etapa-avancar,
.prefiro-etapa-bloqueada {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-sm);
  padding: 7px 13px;
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.prefiro-etapa-voltar,
.prefiro-etapa-voltar:link,
.prefiro-etapa-voltar:visited {
  border: 1px solid var(--linha-forte);
  background: var(--superficie);
  color: var(--texto-2);
}
.prefiro-etapa-voltar:hover { border-color: var(--texto-3); color: var(--texto); }

.prefiro-etapa-avancar,
.prefiro-etapa-avancar:link,
.prefiro-etapa-avancar:visited {
  border: 1px solid var(--linha-forte);
  background: var(--superficie);
  color: var(--texto-2);
}
/* Só o botão que **cria** o próximo registro ganha a cor da marca: avançar
   para algo que já existe é navegação, criar é decisão. */
.prefiro-etapa-avancar.cria,
.prefiro-etapa-avancar.cria:link,
.prefiro-etapa-avancar.cria:visited {
  border-color: var(--marca);
  background: var(--marca);
  color: #ffffff;
}
.prefiro-etapa-avancar:hover { border-color: var(--texto-3); color: var(--texto); }
.prefiro-etapa-avancar.cria:hover { background: var(--marca-forte); color: #ffffff; }

.prefiro-etapa-bloqueada {
  border: 1px dashed var(--linha-forte);
  color: var(--texto-3);
  font-weight: 500;
}

@media (max-width: 900px) {
  .prefiro-rodape-fixo { justify-content: center; }
  .prefiro-rodape-salvar { order: -1; width: 100%; }
}


/* -------------------------------------------------------------------------
   27. Resumo financeiro do dossiê
   -------------------------------------------------------------------------
   Confirmado, a emitir e cancelado lado a lado. O cancelado aparece riscado e
   apagado: precisa estar à vista (foi negociado, alguém vai perguntar) sem
   parecer que ainda conta.
   ------------------------------------------------------------------------- */
.prefiro-resumo-dossie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: flex-end;
}
.prefiro-resumo-dossie > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prefiro-resumo-dossie b {
  font-size: var(--texto-legenda);
  font-weight: 700;
  text-transform: none;
  letter-spacing: .05em;
  color: var(--texto-2);
}
.prefiro-resumo-dossie b.numero {
  font-size: var(--texto-titulo);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--texto);
}
.prefiro-resumo-dossie .aviso b.numero { color: var(--aviso-texto); }
.prefiro-resumo-dossie .fora b.numero {
  color: var(--texto-3);
  text-decoration: line-through;
}


/* -------------------------------------------------------------------------
   28. Densidade: caber na tela sem zoom out
   -------------------------------------------------------------------------
   Medição que originou esta seção, num dossiê a 1366×768 (a resolução de
   notebook mais comum): a página tinha 4715px de altura — **6,1 telas de
   rolagem** — com 29 linhas de formulário a 112px cada, todas ocupando a
   largura inteira de 1087px para exibir um campo de 300px.

   O desperdício não era a fonte nem o espaçamento: era o formulário em coluna
   única. Um `<fieldset>` do admin é uma pilha de `.form-row`, e cada linha usa
   a largura toda mesmo quando o campo é uma data. Aqui o fieldset vira grade:
   os campos curtos ficam lado a lado, e só o que precisa de largura — textarea,
   bloco somente-leitura, linha com vários campos — ocupa a linha inteira.

   O rótulo sobe para cima do campo pelo mesmo motivo. Na coluna à esquerda ele
   reservava 200px fixos em cada linha; acima do campo, custa 18px de altura e
   devolve 200px de largura para a grade.
   ------------------------------------------------------------------------- */
fieldset.module.aligned {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0 22px;
  align-items: start;
}

/* Cabeçalho e descrição do bloco valem para o bloco inteiro. */
fieldset.module.aligned > h2,
fieldset.module.aligned > .description,
fieldset.module.aligned > .form-row.errors,
fieldset.module.aligned > .prefiro-system-note {
  grid-column: 1 / -1;
}

fieldset.module.aligned > .form-row {
  padding: 9px 20px;
  border-bottom: 0;
}

/* Uma linha só ganha a largura inteira quando precisa dela de verdade. */
fieldset.module.aligned > .form-row:has(textarea),
fieldset.module.aligned > .form-row:has(.readonly table),
fieldset.module.aligned > .form-row:has(select[multiple]),
fieldset.module.aligned > .form-row:has(.prefiro-trilha),
fieldset.module.aligned > .form-row:has(.prefiro-resumo-dossie),
fieldset.module.aligned > .form-row:has(.fieldBox + .fieldBox) {
  grid-column: 1 / -1;
}

/* Linha com vários campos (tupla no fieldset) volta a ser uma faixa própria,
   com os campos lado a lado dentro dela. */
fieldset.module.aligned > .form-row:has(.fieldBox + .fieldBox) > div,
fieldset.module.aligned > .form-row:has(.fieldBox + .fieldBox) .flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  align-items: flex-start;
}
fieldset.module.aligned .fieldBox { flex: 1 1 240px; min-width: 0; }

/* --- Rótulo acima do campo ---------------------------------------------- */
.aligned .form-row > div > .flex-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}
.aligned .form-row label,
.aligned .fieldBox > label {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: var(--texto-legenda);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--texto-2);
  line-height: 1.35;
}
.aligned .form-row input[type="text"],
.aligned .form-row input[type="email"],
.aligned .form-row input[type="url"],
.aligned .form-row input[type="number"],
.aligned .form-row input[type="password"],
.aligned .form-row select,
.aligned .form-row textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Data e hora não crescem: um campo de 100% para "dd/mm/aaaa" é ruído. */
.aligned .form-row .vDateField,
.aligned .form-row .vTimeField { max-width: 170px; }

/* A ajuda é lida uma vez e relida raramente: menor e mais apagada, sem sumir. */
.aligned .form-row .help,
.aligned .form-row div.help {
  margin: 2px 0 0 !important;
  padding: 0 !important;
  font-size: var(--texto-legenda);
  line-height: 1.4;
  color: var(--texto-2);
}

/* --- Menos altura por toda parte ---------------------------------------- */
fieldset.module.aligned > .form-row input,
fieldset.module.aligned > .form-row select {
  padding-top: 6px;
  padding-bottom: 6px;
}
fieldset.module > h2 { padding-top: 10px; padding-bottom: 10px; }
.inline-group h2 { padding-top: 10px; padding-bottom: 10px; }
.inline-related h3 { padding-top: 7px; padding-bottom: 7px; }

/* Tabela de inline: linha mais baixa, sem perder o alvo do clique. */
.inline-group .tabular td,
.inline-group .tabular th { padding-top: 7px; padding-bottom: 7px; }

/* --- Barra lateral recolhível -------------------------------------------
   264px são 19% da largura de um notebook de 1366px. Quem está montando um
   dossiê não navega; quem navega não está montando. O estado fica no
   navegador de quem usa — é preferência de pessoa, não de agência. */
.prefiro-lateral-recolher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 10px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--lateral-texto);
  font-size: var(--texto-legenda);
  font-weight: 600;
  cursor: pointer;
}
.prefiro-lateral-recolher:hover {
  border-color: rgba(255, 255, 255, .28);
  color: var(--lateral-texto-forte);
}

/* A largura vem de `flex: 0 0 var(--lateral-largura)`; redefinir só `width`
   não venceria a base do flex. Trocar o token faz as duas de uma vez. */
html.prefiro-lateral-fechada { --lateral-largura: 58px; }
html.prefiro-lateral-fechada .prefiro-lateral {
  padding-left: 6px;
  padding-right: 6px;
  overflow-x: hidden;
}
html.prefiro-lateral-fechada .prefiro-lateral-grupo > summary {
  font-size: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}
html.prefiro-lateral-fechada .prefiro-lateral-grupo > summary::before {
  content: '···';
  font-size: 12px;
  color: var(--lateral-texto);
}
html.prefiro-lateral-fechada .prefiro-lateral .prefiro-lateral-rotulo,
html.prefiro-lateral-fechada .prefiro-lateral summary span:not(.prefiro-lateral-icone),
html.prefiro-lateral-fechada .prefiro-lateral-recolher span:last-child {
  display: none;
}
html.prefiro-lateral-fechada .prefiro-lateral a { justify-content: center; padding-left: 0; padding-right: 0; }


/* --- Caixas de texto: altura de anotação, não de redação ----------------
   O admin do Django entrega textarea com 10 linhas (~200px). Num dossiê há
   sete delas: 1.400px de altura reservados para texto que quase sempre tem
   duas linhas. Aqui a caixa nasce baixa e o navegador deixa a pessoa
   arrastar quando precisar de mais. */
.aligned .form-row textarea,
.inline-group textarea {
  min-height: 74px;
  height: 74px;
  resize: vertical;
  line-height: 1.5;
}

/* O seletor múltiplo de etiquetas cabe numa coluna da grade; forçá-lo à
   largura inteira gastava uma faixa de 1000px para oito nomes curtos. */
.field-etiquetas select[multiple] { min-height: 6em; max-width: 100%; }
fieldset.module.aligned > .form-row.field-etiquetas { grid-column: auto; }

@media (max-width: 1100px) {
  fieldset.module.aligned { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}


/* -------------------------------------------------------------------------
   29. Listagem: a tabela recebe a largura da tela
   -------------------------------------------------------------------------
   Medição que originou esta seção, na listagem de dossiês a 1366px: a tabela
   precisava de **1406px** e recebia **779px**. Duas colunas laterais comiam o
   resto — o menu do CRM (264px) e o painel de filtros do Django (232px), que
   fica preso à direita e não abre mão da largura mesmo quando ninguém está
   filtrando.

   Era esse o motivo do zoom out: as colunas da direita — venda, margem, datas
   — ficavam fora da vista em toda listagem larga.

   Aqui os filtros deixam de ser uma coluna e viram uma faixa horizontal acima
   da tabela. Continuam à vista (o pedido era ver tudo, não esconder), mas
   deitados eles custam 60px de altura em vez de 232px de largura.
   ------------------------------------------------------------------------- */
#changelist.filtered { display: block; }

#changelist .changelist-form-container { display: block; width: 100%; }

#changelist-filter {
  order: -1;
  width: auto;
  max-width: none;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
}

/* O título "Filtro" vira rótulo da faixa, não cabeçalho de coluna. */
#changelist-filter > h2 {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--texto-legenda);
  font-weight: 700;
  text-transform: none;
  letter-spacing: .06em;
  color: var(--texto-3);
}

/* Cada grupo de filtro é um `<details>`; deitados, eles abrem por cima da
   tabela em vez de empurrá-la. */
#changelist-filter > details {
  position: relative;
  margin: 0;
  border: 0;
}
#changelist-filter > details > summary {
  padding: 4px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-sm);
  background: var(--superficie);
  font-size: .8rem;
  font-weight: 600;
  color: var(--texto-2);
  white-space: nowrap;
  cursor: pointer;
}
#changelist-filter > details[open] > summary {
  border-color: var(--marca);
  color: var(--marca-texto);
}
#changelist-filter > details > ul {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  min-width: 210px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-md);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
}
#changelist-filter > details > ul li { margin: 0; }
#changelist-filter > details > ul li a {
  display: block;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  font-size: .82rem;
  white-space: nowrap;
}
#changelist-filter > details > ul li a:hover { background: var(--superficie-3); }
#changelist-filter > details > ul li.selected a {
  background: var(--marca-suave);
  color: var(--marca-texto);
  font-weight: 600;
}

/* Sobrando largura, a tabela usa toda ela; faltando, rola dentro do próprio
   quadro — nunca empurrando a página inteira para o lado. */
#changelist .results {
  width: 100%;
  overflow-x: auto;
}


/* Padding de 14x16 dava 32px horizontais por célula: em 11 colunas, 352px
   gastos em respiro. 10x11 mantém a linha confortável e devolve 130px. */
#result_list td, #result_list th { padding: 8px 5px; }
/* As pastilhas de etiqueta empilham quando a coluna aperta, em vez de forçar
   a tabela a crescer. Duas etiquetas numa linha só custam 150px de largura;
   empilhadas, custam 20px de altura. */
#result_list td.field-etiquetas_marcadas .prefiro-marcador {
  display: inline-block;
  margin-bottom: 2px;
}
#result_list th { white-space: nowrap; }
/* O Django marca `nowrap` em toda coluna de chave estrangeira. Com isso a
   tabela passa a ter a largura do nome mais comprido da base inteira — um
   "LARISSA SANTOS COUTINHO NOGUEIRA" empurrava as colunas de dinheiro para
   fora da tela. Aqui essas colunas voltam a poder quebrar. */
#result_list td.nowrap,
#result_list th.nowrap { white-space: normal; }

/* Data e contagem continuam numa linha: são curtas, e quebrá-las rouba mais
   altura do que a largura que devolvem. */
#result_list td[class*="field-data"],
#result_list td.field-criado_em,
#result_list td.field-quantidade_passageiros { white-space: nowrap; }

/* Valor e margem quebram, mas com teto: "R$ 6.000,00 (25.00%)" numa linha só
   pedia 156px de uma tabela que tinha 89px sobrando. */
#result_list td[class*="field-total"],
#result_list td.field-margem,


/* Cabeçalho preso ao rolar. Numa listagem de cem dossiês, saber que a terceira
   coluna é "situação" exigia subir até o topo — e voltar. */
#result_list thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* A listagem também não rola de lado. `table-layout: fixed` reparte a largura
   entre as colunas e deixa o texto quebrar: a tabela fica mais alta e cabe
   inteira na tela.

   Rolagem interna foi tentada e descartada — informação que exige rolar para
   ser vista é informação que o operador não vê. Altura se resolve com o gesto
   que todo mundo já faz; largura escondida, não. */
/* `table-layout: fixed`, e desta vez com largura declarada por tipo de coluna.
   -------------------------------------------------------------------------
   O comentário que estava aqui dizia que `fixed` tinha sido tentado e
   descartado porque reparte tudo em partes iguais — "Pax" ficava com os mesmos
   101px de "Responsável financeiro". A observação está certa; a conclusão é que
   estava faltando a outra metade da técnica, não que a técnica não servia.

   O que o `auto` custou, medido a 1280px com o menu aberto (que é a tela real
   do Victor: 1919 pixels físicos a 150% de escala do Windows):

       dossiês          122px escondidos — "Margem" cortada
       itens de venda   193px            — "Situação" cortada
       atendimentos      47px            — "Criado em" cortada
       pessoas            6px            — "Data de nascimento" cortada

   E o teto por célula não estava segurando nada: `max-width: 110px` numa
   `<td>` de tabela `auto` é **sugestão**, não limite — o algoritmo usa a
   largura mínima do conteúdo e passa por cima. Medido: célula com teto de
   110px ocupando 121,86px.

   Com `fixed` a conta é outra e é determinística: a tabela vale exatamente
   100% do quadro, as colunas com largura declarada ficam com ela, e as demais
   repartem a sobra. Não existe caso em que estoure — não é uma defesa, é
   aritmética.

   As larguras abaixo são as mesmas medidas que já estavam escritas como teto;
   só passaram a valer de verdade. */
#result_list {
  width: 100%;
  table-layout: fixed;
}
#result_list th,
#result_list td {
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

/* A largura de cada coluna sai de `apps/larguras_de_coluna.py`, num
   `<colgroup>`, e é repartida por `prefiro_colunas.js` — ver a seção 37. Aqui
   ficou o que não é largura. */

#result_list th { font-size: var(--texto-legenda); line-height: 1.3; }
/* Rolagem vertical do corpo continua sendo a da página. */
#changelist .results { overflow: visible; }

@media (max-width: 900px) {
  #changelist-filter { gap: 6px 12px; }
}

/* O endereço público da proposta, na tela da cotação. Monoespaçado porque é
   feito para ser conferido caractere a caractere antes de colar. */
.prefiro-link-publico {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  padding: 5px 9px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-sm);
  background: var(--superficie-2);
  color: var(--texto);
  max-width: 100%;
}


/* -------------------------------------------------------------------------
   30. Transferência entre contas de fornecedor
   ------------------------------------------------------------------------- */
.prefiro-form-transferencia { display: grid; gap: 14px; max-width: 460px; }
.prefiro-campo-transferencia { display: flex; flex-direction: column; gap: 4px; }
.prefiro-campo-transferencia label {
  font-size: .76rem;
  font-weight: 600;
  color: var(--texto-2);
}
.prefiro-campo-transferencia input,
.prefiro-campo-transferencia select {
  width: 100%;
  box-sizing: border-box;
}
.prefiro-erro-campo, .prefiro-erro-form {
  color: var(--erro-texto);
  font-size: .8rem;
  font-weight: 600;
}
.prefiro-erro-form {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--erro-suave);
}


/* -------------------------------------------------------------------------
   31. Conciliação bancária
   -------------------------------------------------------------------------
   Duas colunas por linha: o que o banco diz à esquerda, o que o CRM acha à
   direita. A razão da sugestão fica sempre visível, e não atrás de um clique —
   um palpite que quase sempre acerta faz a pessoa confirmar sem olhar.
   ------------------------------------------------------------------------- */
.prefiro-form-extrato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.prefiro-conciliacao { padding: 4px 0; }

.prefiro-conc-linha {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.3fr);
  gap: 12px 20px;
  align-items: start;
  padding: 12px 18px;
  border-bottom: 1px solid var(--linha);
}
.prefiro-conc-linha:last-child { border-bottom: 0; }

.prefiro-conc-banco { display: flex; flex-direction: column; gap: 2px; }
.prefiro-conc-data { font-size: var(--texto-legenda); color: var(--texto-3); }
.prefiro-conc-valor { font-size: var(--texto-titulo); color: var(--ok-texto); }
.prefiro-conc-valor.saida { color: var(--erro-texto); }
.prefiro-conc-descricao { font-size: .8rem; color: var(--texto-2); }

.prefiro-conc-sugestao { display: flex; flex-direction: column; gap: 8px; }
.prefiro-conc-form, .prefiro-conc-form-ignorar { margin: 0; }
.prefiro-conc-form { display: flex; flex-direction: column; gap: 6px; }
.prefiro-conc-alvo { margin: 0; font-size: var(--texto-corpo-sm); font-weight: 600; color: var(--texto); }
.prefiro-conc-motivo { margin: 0; font-size: .75rem; color: var(--texto-2); }
.prefiro-conc-rotulo { font-size: .75rem; color: var(--texto-2); }
.prefiro-conc-sem { margin: 0; font-size: .82rem; color: var(--texto-2); }
.prefiro-conc-form button, .prefiro-conc-form-ignorar button { align-self: flex-start; }
.prefiro-conc-form select { max-width: 100%; }

@media (max-width: 820px) {
  .prefiro-conc-linha { grid-template-columns: 1fr; }
}


/* -------------------------------------------------------------------------
   32. Pente fino: o que o teste de uso apontou
   -------------------------------------------------------------------------
   Correções vindas de assistir alguém usar o CRM. Cada bloco aqui conserta uma
   coisa que estava visivelmente errada na tela, não uma preferência de estilo.
   ------------------------------------------------------------------------- */

/* --- O botão que ficava invisível ----------------------------------------
   `#content a:link` do admin tem um id no seletor e vence qualquer regra de
   classe, por mais classes que ela junte. O resultado era o botão de avançar
   com texto na cor da marca sobre fundo da marca: um retângulo vermelho vazio.
   Repetir o `#content` é o que devolve a briga — o mesmo caminho já usado na
   seção 14 para as regras de cabeçalho do Django. */
#content .prefiro-etapa-avancar.cria,
#content .prefiro-etapa-avancar.cria:link,
#content .prefiro-etapa-avancar.cria:visited,
.prefiro-rodape-fixo .prefiro-etapa-avancar.cria:link,
.prefiro-rodape-fixo .prefiro-etapa-avancar.cria:visited {
  color: #ffffff;
}
#content .prefiro-etapa-avancar:link,
#content .prefiro-etapa-avancar:visited,
#content .prefiro-etapa-voltar:link,
#content .prefiro-etapa-voltar:visited {
  color: var(--texto-2);
}
#content .prefiro-etapa-avancar.cria:hover { color: #ffffff; }

/* --- O rodapé fixo -------------------------------------------------------
   Ele tinha 107px e duas faixas, e cobria os três primeiros campos do
   formulário. Aqui ele fica numa faixa só, e o conteúdo ganha embaixo o espaço
   que ele ocupa — barra fixa que tapa campo é pior que barra que rola. */
.prefiro-rodape-fixo {
  padding: 7px 20px;
  gap: 10px;
  flex-wrap: nowrap;
}
.prefiro-rodape-salvar .submit-row { gap: 6px; }
.prefiro-rodape-fixo .submit-row input[type="submit"],
.prefiro-rodape-fixo .submit-row a,
.prefiro-rodape-fixo .submit-row .deletelink {
  padding: 7px 13px;
  font-size: .82rem;
  white-space: nowrap;
}

/* Nome de etapa é longo por natureza ("Voltar à cotação COT-2026-0006"). Ele
   encolhe com reticências em vez de empurrar a barra para uma segunda linha; o
   nome inteiro fica no `title`. */
.prefiro-etapa-voltar,
.prefiro-etapa-avancar,
.prefiro-etapa-bloqueada {
  max-width: 250px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 1.6;
}

/* O espaço que a barra ocupa, devolvido ao conteúdo. Generoso de propósito:
   sobra branco no fim da página e nenhum campo fica inalcançável. */
/* O espaço que a barra ocupa, devolvido ao conteúdo — no `#content` inteiro e
   não só no primeiro `div` do formulário, porque os inlines ficam fora dele e
   era o último campo do inline que continuava embaixo da barra. */
.change-form #content { padding-bottom: 110px; }
.change-form #content-main > form > div { padding-bottom: 0; }

/* --- Inline que passava da largura ---------------------------------------
   As tabelas de passageiros e de itens de venda têm nove colunas e saíam pela
   direita da tela. A saída óbvia seria rolar dentro do quadro — e ela foi
   recusada: informação que exige rolagem para ser vista é informação que o
   operador não vê.

   `table-layout: fixed` reparte a largura disponível entre as colunas em vez
   de deixar cada uma pedir o que quiser. O texto quebra em duas linhas; a
   tabela fica um pouco mais alta e **cabe**. Altura se lê rolando a página,
   que é o gesto que todo mundo já faz; largura escondida não se lê de jeito
   nenhum. */
.inline-group .tabular table,
.inline-group table {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}
.inline-group .tabular td,
.inline-group .tabular th {
  overflow-wrap: anywhere;
  word-break: normal;
}
/* O cabeçalho da tabela DE DENTRO do formulário fica no piso de 11px, e não
   nos 12px do cabeçalho da listagem (03 M6). Aqui o espaço é físico: oito
   colunas em 943px é o limite medido, e cada coluna tem um campo para digitar
   dentro, não um texto para ler. A regra da casa que manda é a primeira de
   REGRAS_DE_APRESENTACAO — nada pode depender de rolagem —, e 11px já tira
   este cabeçalho da faixa que o achado apontou. */
.inline-group .tabular th { white-space: normal; font-size: var(--texto-micro); line-height: 1.3; }
.inline-group .tabular input,
.inline-group .tabular select,
.inline-group .tabular textarea,
.inline-group .tabular .select2 {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* O `<select>` que o select2 esconde continua no DOM para leitores de tela.
   Dar 100% de largura a ele o fazia esticar 1029px por baixo da tabela e
   reabrir a rolagem que a `table-layout: fixed` tinha acabado de fechar. */
.inline-group .tabular select.select2-hidden-accessible {
  width: 1px !important;
  max-width: 1px;
}
/* A largura das colunas do inline saiu daqui.
   -------------------------------------------------------------------------
   Estas duas regras eram tudo o que havia de declarado — "excluir" e "ordem" —
   e **todo o resto repartia a sobra em partes iguais**, que é o mesmo defeito
   que a listagem tinha: a descrição do item de venda ficava do tamanho da
   coluna de quantidade.

   Hoje quem declara é o `<colgroup>` de `colunas_do_inline`, no template
   `admin/edit_inline/tabular.html`, com o mesmo cálculo da listagem mais um
   piso próprio: a célula do inline tem um campo para preencher, e um `<input>`
   estreito demais não é ilegível, é inutilizável.

   Declarar largura aqui volta a competir com o `<col>` — ver a seção 37. */

/* --- O rótulo da linha, que caía em cima dos campos ----------------------
   O Django escreve, em cada linha de inline já gravada, um `<p>` com o nome do
   registro e o link "Modificar". Ele é `position: absolute` com `left: 0` e
   **sem `top`** — ou seja: encosta na esquerda do primeiro ancestral
   posicionado e fica na altura em que calhar.

   No admin cru isso dá certo por acidente: não há ancestral posicionado, a
   tabela começa perto da borda da janela e a linha reserva `padding-top: 2em`
   para o rótulo. Aqui deu errado — ele caiu no meio da linha, por cima do
   select do passageiro e do campo "o que é". Foi o que o Victor fotografou.

   A correção é ancorá-lo em quem ele descreve: a própria linha. Com a `<tr>`
   como bloco de contenção, o rótulo ocupa a faixa de 2em que a linha **já**
   reservava — largura inteira, acima dos campos, sem tirar um pixel de altura
   de ninguém.

   `position: relative` em `<tr>` é suportado por todos os navegadores atuais;
   era indefinido no CSS 2.1, e é dessa época que vem o `_position: relative`
   (truque de IE, hoje inerte) que o Django ainda carrega no `td.original`. */
.inline-group .tabular tbody tr.has_original { position: relative; }
.inline-group .tabular td.original p {
  top: 5px;
  left: 11px;
  right: 11px;
  width: auto;
  height: auto;
  padding: 0;
  /* Uma linha só, com reticências. O nome do registro é orientação, não
     conteúdo — o conteúdo está nas colunas, logo abaixo. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--texto-micro);
  letter-spacing: .04em;
  color: var(--texto-3);
}
.inline-group .tabular td.original p a.inlinechangelink { margin-left: 10px; }

/* A coluna do rótulo ficou sem nada além dos campos escondidos: o rótulo mudou
   para a faixa da linha. Os 44px voltam para as colunas que se leem.

   A largura zero é declarada no `<colgroup>` junto com as outras; aqui fica só
   o recheio, que o `<col>` não sabe declarar. */
.inline-group .tabular td.original,
.inline-group .tabular th.original,
.inline-group .tabular thead th:first-child {
  padding-left: 0;
  padding-right: 0;
}

/* --- Links de "adicionar/modificar" sobre o campo -------------------------
   O `related-widget-wrapper` do Django põe os ícones de lápis/mais/olho ao
   lado do campo. Dentro de uma célula estreita de inline eles montavam em cima
   do próprio campo. Empilhá-los abaixo resolve sem esconder nada. */
.inline-group .related-widget-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  min-width: 0;
}
.inline-group .related-widget-wrapper > select,
.inline-group .related-widget-wrapper > .select2 { flex: 1 1 100%; min-width: 0; }
.inline-group .related-widget-wrapper-link { flex: 0 0 auto; }

/* --- Botão e texto disputando a mesma linha ------------------------------
   "Abrir contrato" ficava por cima da frase que o acompanha. O campo
   somente-leitura passa a ser uma pilha: botão em cima, explicação embaixo. */
.form-row .readonly .button,
.form-row .readonly a.button {
  display: inline-block;
  margin: 0 0 6px;
}
.form-row .readonly {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.form-row .readonly .prefiro-nota,
.form-row .readonly span { max-width: 100%; }

/* --- O vazio no topo da barra lateral ------------------------------------
   O comentário de template multilinha vazava como texto e empurrava o menu
   para baixo. Corrigido no template; a regra abaixo garante que a barra comece
   no topo mesmo que algum texto solto apareça de novo. */
.prefiro-lateral > *:not(nav):not(ul):not(details):not(button) { display: none; }

/* --- Rótulo acima do campo, também nas linhas de vários campos -----------
   O caso da tupla no fieldset (`('origem', 'destino')`) monta
   `.form-row > .flex-container.form-multiline > div > .flex-container.fieldBox`,
   e a regra anterior só alcançava o campo solto. O resultado media 160px de
   rótulo à esquerda para 108px de campo à direita: o nome do campo ocupava
   mais espaço que o valor.

   O seletor precisa do `fieldset.module.aligned` na frente porque o admin
   define a largura do rótulo com `.aligned label { width: 160px }`, e classe
   contra classe a última declarada vence — esta precisa vir depois e com mais
   peso. */
fieldset.module.aligned .form-row .flex-container.fieldBox,
fieldset.module.aligned .form-row > div > .flex-container:not(.form-multiline) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
}
fieldset.module.aligned .form-row label,
fieldset.module.aligned .form-row .fieldBox > label {
  width: auto;
  min-width: 0;
  max-width: 100%;
  float: none;
  padding: 0;
  text-align: left;
}
/* Os campos da tupla dividem a linha por igual, cada um usando a largura
   inteira da sua fatia. */
fieldset.module.aligned .form-row > .flex-container.form-multiline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  align-items: flex-start;
}
fieldset.module.aligned .form-row > .flex-container.form-multiline > div {
  flex: 1 1 200px;
  min-width: 0;
}
fieldset.module.aligned .form-row .fieldBox input:not([type="checkbox"]):not([type="radio"]),
fieldset.module.aligned .form-row .fieldBox select,
fieldset.module.aligned .form-row .fieldBox textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Caixa de seleção continua do tamanho de uma caixa de seleção, com o rótulo
   ao lado — empilhá-la deixaria um quadradinho sozinho numa linha. */
fieldset.module.aligned .form-row .fieldBox.checkbox-row,
fieldset.module.aligned .form-row .checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 7px;
}

/* --- O funil cabe na tela ------------------------------------------------
   Seis colunas de 288px pediam 1824px numa área de 1031px, e o quadro rolava
   de lado. Rolar de lado num kanban é o hábito de quem usa Trello — mas quem
   olha o funil de manhã quer ver **as seis etapas de uma vez**, que é a
   pergunta que o quadro responde. Uma etapa fora da vista é uma etapa que não
   é cobrada.

   As colunas passam a dividir a largura disponível. Ficam estreitas, e o
   cartão foi apertado junto para continuar legível nelas. */
.prefiro-kanban {
  overflow-x: visible;
  flex-wrap: nowrap;
  gap: 10px;
}
.prefiro-coluna {
  flex: 1 1 0;
  min-width: 0;
}
.prefiro-coluna .prefiro-cartao {
  padding: 9px 10px;
  font-size: .82rem;
}
.prefiro-cartao-nome {
  font-size: .84rem;
  overflow-wrap: anywhere;
}
.prefiro-cartao-linha { font-size: var(--texto-nota); overflow-wrap: anywhere; }
.prefiro-cartao-rodape { font-size: var(--texto-legenda); flex-wrap: wrap; gap: 2px 6px; }
.prefiro-cartao-etiquetas .prefiro-marcador { font-size: var(--texto-micro); padding: 0 6px; }

/* Abaixo de 1100px a leitura de seis colunas apertadas piora mais do que a
   rolagem atrapalha — aí o quadro volta a rolar. */
@media (max-width: 1100px) {
  .prefiro-kanban { overflow-x: auto; }
  .prefiro-coluna { flex: 0 0 240px; }
}
/* Na coluna estreita, valor e "estimado" não cabem lado a lado e o `nowrap`
   herdado cortava justamente o número — que é a informação do cartão. A linha
   passa a quebrar, e o valor nunca é o que some. */
.prefiro-coluna .prefiro-cartao-linha { flex-wrap: wrap; }
.prefiro-coluna .prefiro-cartao-linha span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.prefiro-coluna .prefiro-cartao-valor { white-space: nowrap; }
/* A barra de ações em massa do Django ("Ação: … Ir … 0 de 15 selecionados")
   passava 29px da área útil e reabria a rolagem lateral. Ela quebra. */
#changelist .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  max-width: 100%;
  box-sizing: border-box;
}
#changelist .actions label { display: flex; align-items: center; gap: 6px; }
#changelist .actions select { max-width: 260px; }

/* --- O que só aparece em tela menor (1280px) -----------------------------
   Três lugares que ainda rolavam de lado num notebook um pouco menor. */

/* As abas de situação eram uma faixa rolável; agora quebram em duas linhas.
   São sete abas curtas — quebrar custa 30px de altura, e rolar custava a
   última aba, que é sempre a de arquivo. */
.prefiro-abas {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 6px;
}

/* A lista de cartões da coluna do funil rola só na vertical. Na horizontal ela
   não tem para onde rolar: a coluna é a largura, e o cartão se ajusta a ela. */
.prefiro-coluna-lista { overflow-x: hidden; }
.prefiro-coluna-lista > * { min-width: 0; max-width: 100%; }

/* A navegação por data do Django ("‹ Todas as datas · Agosto/2026 · …") é uma
   linha só e empurrava a listagem. */
#changelist .toplinks,
#changelist nav.toplinks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  max-width: 100%;
}

/* O recheio da célula é o mesmo em qualquer largura de tela, e isso é uma
   condição do mecanismo de larguras, não gosto: `larguras_de_coluna.py` soma
   10px de recheio em cada piso que calcula. Um media query que aperta o
   recheio muda o piso sem avisar ninguém — e passa a errar justamente nas
   telas estreitas, que são as que menos têm margem para erro. */

/* A etiqueta tem `nowrap` — e "Família com crianças" (141px) é mais larga que
   o cartão do funil (153px, menos o recheio).
   Aqui havia reticências, com o nome inteiro no `title`. A regra do CRM passou a
   ser não esconder informação em lugar nenhum, e o `title` não conta: ele só
   aparece para quem já desconfia que falta alguma coisa. A etiqueta quebra em
   duas linhas e o cartão fica 16px mais alto — o funil rola na vertical, que é a
   direção em que crescer não custa nada. */
.prefiro-cartao .prefiro-marcador {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  vertical-align: bottom;
}
.prefiro-cartao-etiquetas { min-width: 0; }

/* Últimos sete pixels da listagem de dossiês num 1280: a tabela media 952 para
   uma área de 945. As colunas de data e as de contagem não precisam do que
   pediam — o texto delas já cabe em bem menos. */

/* O cabeçalho da listagem é um link, e link de cabeçalho ordenável do Django
   não quebra. "Data de nascimento" pedia 137px numa coluna de 87 e a tabela
   ganhava 50px de rolagem invisível — a listagem parecia certa e o título da
   coluna estava cortado. O título passa a ocupar duas linhas quando precisa. */
#result_list thead th,
#result_list thead th.sortable { white-space: normal; }
#result_list thead th .text a,
#result_list thead th > a,
#result_list thead th .text {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Os ícones de ordenação são `float: right` dentro do mesmo `<th>`, e o título
   flui por baixo deles em vez de parar antes. Medido: "PRIORIDADE" terminava a
   **um pixel** dos ícones — não colidia por sorte, e qualquer nome de coluna um
   pouco maior colidiria. O modo caixa alta, que é o padrão, deixa tudo mais
   largo e encurta essa folga ainda mais.
   Reservar a faixa faz o título quebrar em duas linhas em vez de correr por
   baixo do ✕. Quebrar é feio uma vez; sobrepor é ilegível sempre. */
/* Os controles de ordenação saem da linha do título.
   -------------------------------------------------------------------------
   Eles são `float: right` dentro do `<th>`, e o título flui **ao lado** deles.
   A primeira tentativa foi reservar a faixa com `padding-right` — e o resultado
   foi o pior defeito desta série de rodadas: numa coluna de 99px, o float
   comia 53 e o recheio outros 39, sobravam 7 pixels para a palavra, e
   "RESPONSAVEL FINANCEIRO" saiu **uma letra por linha**, com o cabeçalho da
   tabela em 268px de altura.

   Reservar largura ao lado do título é competir com ele por um espaço que não
   sobra. A saída é não competir: os ícones descem para uma linha própria,
   encostados à direita, e o título passa a ter a coluna inteira.

   Custa uma linha de altura no cabeçalho, e só nas colunas ordenadas. */
#result_list thead th .sortoptions {
  float: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}
/* E o recheio do cabeçalho passa a ser o mesmo da célula.
   -------------------------------------------------------------------------
   O `<th>` da listagem tem `padding: 0`: quem desenha o respiro é o `<a>` de
   dentro, e o admin do Django lhe dá **10px de cada lado**. Isso torna o
   cabeçalho 8px mais estreito que a célula da mesma coluna, e a conta do
   servidor — que soma 10px de recheio em cada piso — errava exatamente esses
   8px em toda coluna do CRM. "PARCELA" pedia 69 e recebia 64.

   Um recheio só, dos dois lados da tabela, e a conta volta a fechar. */
#result_list thead th,
#changelist #result_list thead th { padding-left: 0; padding-right: 0; }
/* Dois IDs no seletor, e não é firula: o `responsive.css` do admin é carregado
   **depois** da nossa folha e traz `padding: 13px 16px` neste mesmo link. Com
   um ID só, ele vencia por ordem de carregamento — e a coluna "ORDEM" precisava
   de 71px enquanto a conta do servidor reservava 51. */
#changelist #result_list thead th .text a,
#changelist #result_list thead th .text span,
#changelist #result_list thead th > a { padding-left: 5px; padding-right: 5px; }
#result_list thead th .text { padding-right: 0; }

/* --- "Hoje | Agora" ao lado dos campos de data ---------------------------
   O admin escreve esse atalho com uma cor fixa de tema claro (#333) direto na
   folha dele. No tema escuro o separador e o texto ficavam da cor do fundo:
   sumiam. Os links já vinham certos; era o texto solto que não. */
.datetimeshortcuts { color: var(--texto-3); }
.datetimeshortcuts a:link,
.datetimeshortcuts a:visited { color: var(--marca-clara); }

/* Abaixo de 1100px as oito colunas do inline de itens não cabem em nenhuma
   largura de célula razoável. Até aqui elas eram simplesmente cortadas: o
   `overflow: hidden` do quadro comia os últimos pixels da linha sem avisar.
   Passa a rolar dentro do quadro — rolagem é ruim, corte silencioso é pior. */
@media (max-width: 1100px) {
  fieldset.module.prefiro-inline { overflow-x: auto; }
  fieldset.module.prefiro-inline > table { min-width: 760px; }
}

/* --- Seletor de dois painéis (o "Itens cobertos" do recebimento) ----------
   O `widgets.css` do admin pinta o cabeçalho de cada painel com as variáveis
   dele (`--secondary`, `--header-link-color`) e é carregado **depois** do tema,
   pelo Media do próprio widget — classe contra classe, quem vem por último
   ganha. Daí o `#content` na frente: id vence ordem.

   Sem isso o rótulo "Itens cobertos escolhido(s)" saía cinza sobre azul. */
#content .selector-chosen-title,
#content .selector-available-title {
  background: var(--marca);
  color: #ffffff;
}
#content .selector-chosen-title label,
#content .selector-available-title label,
#content .selector-chosen-title .helptext,
#content .selector-available-title .helptext { color: #ffffff; }
#content .selector-available-title { background: var(--superficie-3); color: var(--texto-1); }
#content .selector-available-title label,
#content .selector-available-title .helptext { color: var(--texto-1); }
#content .selector .selector-filter label { color: var(--texto-2); }

/* --- Explicação de um inline ---------------------------------------------
   Mesmo peso visual da `description` de um fieldset, para o olho ler as duas
   como a mesma coisa: um recado do sistema antes do que se preenche. */
.prefiro-inline-descricao {
  margin: 0 0 -6px;
  padding: 12px 20px 0;
  color: var(--texto-2);
  font-size: .86rem;
  line-height: 1.5;
  max-width: 92ch;
}
.prefiro-inline-descricao strong { color: var(--texto-1); }


/* -------------------------------------------------------------------------
   33. Leitura em tabela: faixas, cabeçalho forte e colunas com medida
   -------------------------------------------------------------------------
   Esta seção existe por causa de quatro prints que o Victor mandou. Em todos
   eles a tela não estava *feia*: estava **ilegível**. Vale registrar o
   diagnóstico de cada um, porque a causa não era a que parecia.

   1) "SOLICITANT / E" quebrado no meio da palavra, e caixas de valor mostrando
      "2652.0" cortado. A culpa era de uma linha só: `overflow-wrap: anywhere`
      nas células. Essa propriedade não muda só onde o texto quebra — ela muda
      o **min-content** da célula para a largura de UM caractere. Com isso o
      algoritmo de tabela conclui que qualquer coluna cabe em 12px e reparte a
      largura como bem entende. `break-word` quebra igual quando precisa e não
      mente sobre o tamanho mínimo. Era isso, e só isso.

   2) O botão "Calculadora e itens →" virando um borrão vermelho de três
      linhas. `table-layout: fixed` sem largura declarada divide a largura em
      partes **iguais**: dez colunas, 103px cada, inclusive a do botão e a da
      data. Aqui as colunas passam a ter medida por natureza — número curto,
      dinheiro, data, escolha, texto — e sobra para as que precisam.

   3) Datas lado a lado e abas de fase todas da mesma cor. Sem alternância e
      sem um cabeçalho mais forte, o olho não tem onde se apoiar e lê a tabela
      linha a linha. As faixas alternadas são o recurso que o Victor já usa nas
      planilhas dele; o CRM passa a usar o mesmo.

   4) Densidade. Tudo aqui é um ponto menor que antes — fonte, respiro de
      célula, altura de campo. Não por estética: é o que faz caber sem a
      rolagem que escondia informação.
   ------------------------------------------------------------------------- */

:root,
html[data-theme="light"] {
  /* A faixa alternada. Um tom de marca tão diluído que não compete com nada
     colorido dentro da linha — etiqueta, valor negativo, botão.

     `--faixa-marca` **não** é o mesmo que `--marca-suave`, e não deve ser
     fechado nele. A auditoria de design listou os dois (mais o Névoa do guia)
     como "três vermelhos suaves para unificar"; dois deles fecharam, este não.
     O motivo é o trabalho de cada um: `--marca-suave` é fundo de *pastilha*,
     um retângulo de 20px que precisa se destacar da linha; este é fundo da
     *linha inteira* de uma tabela, e precisa do contrário — sumir por baixo de
     tudo que estiver dentro dela. Igualá-los faria a linha selecionada brigar
     com as próprias etiquetas que ela contém. */
  --faixa: #f7f8fb;
  --faixa-marca: #fdf6f4;
  --cabecalho-tabela: #eceff5;
  --cabecalho-tabela-texto: #3b4254;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --faixa: #1b1e26;
    --faixa-marca: #21191a;
    --cabecalho-tabela: #232733;
    --cabecalho-tabela-texto: #b9c0d0;
  }
}
html[data-theme="dark"] {
  --faixa: #1b1e26;
  --faixa-marca: #21191a;
  --cabecalho-tabela: #232733;
  --cabecalho-tabela-texto: #b9c0d0;
}


/* --- A quebra que arruinava a largura, e quando ela deixa de arruinar -----
   Ver o item (1) acima: `anywhere` diz ao navegador que a largura mínima do
   conteúdo é **um caractere**, e em tabela de largura automática isso permitia
   espremer uma coluna até "2652.0" virar três linhas. Por isso ela saiu.

   Nos inlines, que continuam em `table-layout: auto`, ela continua fora.

   Na listagem, não: desde que o `#result_list` passou a `table-layout: fixed`,
   a largura da coluna é **declarada**, e a largura mínima do conteúdo deixou de
   ter voto nenhum. `anywhere` volta a ser o que ela é quando não mente sobre
   medida — a garantia de que nenhuma palavra longa (um e-mail sem espaços, um
   localizador) vaze da célula. Medido: 6 pixels de vazamento em pessoas, e 16
   em itens de venda, que sumiram com a troca. */
#result_list th,
#result_list td {
  /* `anywhere` quebra a palavra assim que ela não cabe — e foi assim que
     "HELENA ANDRADE NOGUEIRA" virou "HELEN / A / ANDRA / DE / NOGUEI / RA"
     numa coluna de 68px. `break-word` quebra pelo mesmo motivo, mas agora a
     coluna tem a largura da sua maior palavra (ver `larguras_de_coluna.py`),
     então o motivo não acontece: ela é a rede, não o mecanismo. */
  overflow-wrap: break-word;
  word-break: normal;
  /* O número que o servidor declara na coluna é o número que aparece na tela.
     Com `content-box`, que é o padrão do admin, o recheio era somado por
     fora: toda medida calculada saía 10px maior do que o previsto,
     em silêncio. */
  box-sizing: border-box;
}
/* O e-mail é o único conteúdo do CRM sem ponto de quebra nenhum: 286px de uma
   palavra só, mais que qualquer coluna pode dar. Aqui ele ganha permissão
   explícita para quebrar — e quebra no arroba ou no ponto, que é onde alguém
   que lê um e-mail já espera que ele quebre. */
#result_list td[class*="field-email"],
#result_list td[class*="field-usuario"] { overflow-wrap: anywhere; }

/* Quando não houver jeito, que a quebra tenha hífen.
   -------------------------------------------------------------------------
   As colunas são dimensionadas pela maior palavra que devem mostrar, então isto
   quase nunca entra em ação — mas "quase" não é "nunca": o nome de uma etiqueta
   é escrito pela agência e não tem tamanho máximo, e sempre haverá um sobrenome
   maior que a coluna.
   Com hífen, a quebra se lê como escolha tipográfica; sem ele, se lê como o
   defeito que era. Vale só nas células: o cabeçalho **nunca** quebra dentro da
   palavra, com ou sem hífen. */
#result_list td { hyphens: auto; }
#result_list thead th { hyphens: none; }
.inline-group .tabular th,
.inline-group .tabular td {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
/* Cabeçalho de coluna quebra a palavra só em último caso.
   -------------------------------------------------------------------------
   A regra era `overflow-wrap: normal`, com a intenção certa: "SOLICITANTE"
   deve caber ou virar duas linhas **nos espaços**, nunca "SOLICITANT / E".
   Isso vale enquanto existe uma terceira saída. Com `table-layout: fixed` não
   existe: a coluna tem a largura que tem, e a palavra que não cabe ou quebra
   ou **vaza** — e vazar era o que sobrava. Medido a 1280px: "RESPONSAVEL" em
   caixa alta numa coluna de 97px punha 16px para fora do quadro em itens de
   venda, 13 em atendimentos, 6 em pessoas.

   `break-word` é a diferença exata que faltava: ela não quebra por
   conveniência como `anywhere` — quebra **apenas** quando a palavra sozinha
   não cabe na linha. Onde "SOLICITANTE" cabia, continua inteira; onde não
   cabia, vira duas linhas em vez de sair pela direita. */
/* E o título do cabeçalho **nunca** quebra dentro da palavra.
   -------------------------------------------------------------------------
   Esta regra chegou a ser `break-word` numa tentativa de evitar vazamento, e
   foi ela que, junto do recheio acima, produziu a coluna de letras na vertical.
   `break-word` quebra a palavra quando ela não cabe — e quando a coluna tem 7
   pixels, "não cabe" é toda letra a partir da primeira.

   A regra certa é a de sempre: quebrar **nos espaços**, mantendo cada palavra
   inteira e na horizontal. "RESPONSAVEL FINANCEIRO" vira duas linhas;
   "RESPONSAVEL" nunca vira "RESPONSA / VEL".

   Quem garante que a palavra caiba não é a quebra, é a largura da coluna — e
   ela está na seção 37, calculada a partir da maior palavra do cabeçalho
   ("RESPONSAVEL", 86px na fonte do cabeçalho). */
#result_list thead th,
#result_list thead th .text,
#result_list thead th .text a,
#result_list thead th > a {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.inline-group .tabular thead th {
  overflow-wrap: normal;
  word-break: keep-all;
}


/* --- Cabeçalho forte, conteúdo em faixas --------------------------------- */
/* O visual do cabeçalho é comum às duas tabelas; o corpo da letra, não — a
   listagem ficou em 12px e a tabela de dentro do formulário em 11 (03 M6).
   Declarar o tamanho aqui era o que obrigava a seção 37, lá embaixo, a
   declará-lo de novo só para vencer esta regra. */
#result_list thead th,
#result_list thead td,
.inline-group .tabular thead th,
.inline-group .tabular thead td {
  background: var(--cabecalho-tabela);
  color: var(--cabecalho-tabela-texto);
  border-bottom: 2px solid var(--linha-forte);
}
.inline-group .tabular thead th,
.inline-group .tabular thead td {
  font-size: var(--texto-micro);
  letter-spacing: .05em;
}
#result_list thead th a:link,
#result_list thead th a:visited { color: var(--cabecalho-tabela-texto); }
#result_list thead th.sorted,
#result_list thead th.sorted a:link { color: var(--marca-texto); }

/* As faixas. `nth-child` e não `nth-of-type` porque o admin usa `<tr>` puro;
   e a regra precisa vencer a `row1/row2` que o Django ainda escreve. */
/* A FAIXA ALTERNADA É O PADRÃO DE TODA LISTA DO CRM.
   -------------------------------------------------------------------------
   Decisão do Victor, desta rodada, e vale para o sistema inteiro: *"a partir de
   agora vamos adotar como padrão para TODAS as listas deste CRM a alternância
   de cores"*. Ela existia nas listagens do admin e nos inlines; as do painel
   ficaram de fora porque cada uma nasceu numa rodada diferente.

   Estão todas aqui. Quando nascer uma lista nova, o lugar de acrescentá-la é
   este bloco — e a tela `/sistema-visual/` mostra o resultado lado a lado, que
   é onde uma lista sem faixa ficaria óbvia.

   A faixa vai na **unidade que se lê**: a linha da tabela, o grupo do «Meu
   dia», o item do ranking. Zebrar mais fundo que isso faz o olho contar linhas
   de banco em vez de contar o que a lista é sobre. */
#result_list tbody tr:nth-child(odd) > * { background: var(--superficie); }
#result_list tbody tr:nth-child(even) > * { background: var(--faixa); }
.inline-group .tabular tbody tr:nth-child(odd) > td,
.inline-group .tabular tbody tr:nth-child(odd) > th { background: var(--superficie); }
.inline-group .tabular tbody tr:nth-child(even) > td,
.inline-group .tabular tbody tr:nth-child(even) > th { background: var(--faixa); }

/* Hover e seleção continuam vencendo a faixa — são estado, e estado tem de
   aparecer por cima do enfeite. */
#result_list tbody tr:hover > *,
.inline-group .tabular tbody tr:hover > td,
.inline-group .tabular tbody tr:hover > th { background: var(--superficie-3); }
#changelist #result_list tbody tr.selected > * { background: var(--faixa-marca); }
/* A linha vazia que o Django deixa no fim do inline para acrescentar outro
   registro fica visivelmente diferente: é convite, não conteúdo. */
.inline-group .tabular tbody tr.empty-form > td,
.inline-group .tabular tbody tr.empty-form > th { background: var(--superficie-2); }

/* Uma linha marcada para exclusão precisa gritar antes de o operador salvar. */
.inline-group .tabular tbody tr.prefiro-linha-excluir > td { background: var(--erro-suave); }


/* --- As larguras das colunas do inline saíram daqui ----------------------
   Havia onze regras de largura escritas à mão, e o comentário que estava aqui
   dizia o defeito sem perceber: *"basta declarar as curtas; as compridas ficam
   com tudo o que sobrou"*. É a mesma armadilha da listagem — cobre só o que
   alguém lembrou de escrever, e o "resto" pode ser 13px, que foi o que a
   descrição do item de venda chegou a receber.

   Pior: `column-descricao` e `column-titulo` estavam declaradas em 136px, o que
   **competia** com a coluna esponja do `<colgroup>` — a que existe justamente
   para ficar com a sobra.

   Hoje quem declara é `colunas_do_inline`, e os papéis das colunas moram em
   `apps/larguras_de_coluna.py`. O que ficou aqui é o que não é largura. */

/* Marcações de sim/não ficam centradas na coluna. */
.inline-group .tabular td.field-escolhida,
.inline-group .tabular td.field-principal,
.inline-group .tabular td.field-conferido,
.inline-group .tabular td.field-visivel,
.inline-group .tabular td.field-permitido { text-align: center; }

/* Colunas que são um botão (ou dois, empilhados). O botão manda na largura,
   não o contrário. */
/* Dois botões na mesma célula ficam um sobre o outro: lado a lado, cada um
   receberia 60px e o rótulo sumiria. */
.inline-group .tabular td.field-acoes_da_opcao { display: table-cell; }
.inline-group .tabular td.field-acoes_da_opcao .button { margin-bottom: 3px; }
.inline-group .tabular .button.prefiro-botao-fraco {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  color: var(--texto-2);
}
#content .inline-group .tabular a.button.prefiro-botao-fraco:link,
#content .inline-group .tabular a.button.prefiro-botao-fraco:visited { color: var(--texto-2); }
.inline-group .tabular .button.prefiro-botao-fraco:hover {
  border-color: var(--marca);
  color: var(--marca-texto);
}



/* O piso do texto livre — nome, descrição, título — virou o papel "texto" em
   `larguras_de_coluna.py`, e o piso de **qualquer** coluna de inline virou
   `PISO_DO_CAMPO`. O que estava escrito aqui dizia a razão certa e resolvia
   pela metade: em `table-layout: fixed` o `min-width` da célula é ignorado, só
   valem as larguras declaradas — e o que não é declarado divide a sobra, que
   pode ser zero. Foi assim que a descrição do item de venda ficou com 13px. */

/* Nada de campo com 40px: se a coluna apertar mais que isso, a tabela rola
   dentro do quadro e o operador vê o conteúdo inteiro rolando de lado — que é
   ruim, mas menos ruim que ler "265..." e não saber quanto custa.

   O `min-width` por célula que ficava aqui era inerte, e o comentário logo
   acima já dizia por quê: em `table-layout: fixed` a largura mínima da célula
   não entra na conta da coluna. Quem garante o piso hoje é `PISO_DO_CAMPO`, no
   `<colgroup>`, onde a declaração tem efeito. */
.inline-group .tabular table { min-width: 100%; }


/* --- Botão dentro de célula ---------------------------------------------
   Um `.button` do admin nasce com padding de formulário. Numa célula de 120px
   ele quebra em três linhas e vira o borrão vermelho do print. */
.inline-group .tabular .button,
.inline-group .tabular a.button {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: var(--texto-legenda);
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* --- Campos dentro da tabela: mais baixos, com o texto inteiro à vista --- */
.inline-group .tabular input[type="text"],
.inline-group .tabular input[type="number"],
.inline-group .tabular select {
  padding: 5px 7px;
  font-size: .82rem;
  height: auto;
}
.inline-group .tabular textarea { font-size: .82rem; min-height: 54px; height: 54px; }
/* O atalho "Hoje | 📅" do admin ocupava uma linha inteira por campo de data. */
.inline-group .tabular .datetimeshortcuts {
  display: block;
  font-size: var(--texto-micro);
  line-height: 1.3;
  white-space: nowrap;
}
/* Os ícones de adicionar/editar do campo de referência viravam uma fileira de
   cinco emojis embaixo de cada linha. Ficam menores e numa linha só. */
.inline-group .related-widget-wrapper-link img { width: 13px; height: 13px; }
.inline-group .tabular td.original p {
  font-size: var(--texto-legenda);
  line-height: 1.3;
  color: var(--texto-3);
  margin: 0;
}


/* --- A listagem também ganha medida -------------------------------------- */
#result_list th[class*="column-valor"],
#result_list th[class*="column-total"] { text-align: right; }
/* "Família com crianças" é mais larga que a coluna de etiquetas inteira, e a
   pastilha tem `nowrap` por natureza. Aqui ela encolhe com reticências; o nome
   completo fica no `title`, como no cartão do funil. */
#result_list td.field-etiquetas_marcadas .prefiro-marcador {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}


/* --- Abas de situação: dá para ver em qual você está ---------------------
   Todas eram vermelhas e do mesmo peso. A aba aberta passa a ter fundo, e as
   fechadas ficam em texto neutro — o vermelho deixa de ser decoração e volta
   a significar "é aqui". */
.prefiro-abas {
  gap: 2px;
  padding: 4px 4px 0;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-bottom-width: 1px;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.prefiro-aba {
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font-size: .84rem;
}
#changelist .prefiro-abas a.prefiro-aba:hover { background: var(--superficie-3); }
#changelist .prefiro-abas a.prefiro-aba.ativa,
#changelist .prefiro-abas a.prefiro-aba.ativa:link,
#changelist .prefiro-abas a.prefiro-aba.ativa:visited {
  background: var(--marca-suave);
  color: var(--marca-texto);
  border-bottom-color: var(--marca);
}
/* A contagem ao lado do nome da aba é um dado, não parte do rótulo. */
.prefiro-abas .prefiro-aba-total {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--r-cheio);
  background: var(--superficie-3);
  color: var(--texto-2);
  font-size: var(--texto-legenda);
  font-weight: 700;
}
.prefiro-abas .prefiro-aba.ativa .prefiro-aba-total { background: var(--marca); color: #fff; }

/* A trilha de datas do Django ("‹ 2026 · 18 de Agosto · 19 de Agosto") era uma
   fileira de links iguais, sem indicação de onde estava o corte. Cada degrau
   vira uma pastilha, e o "voltar" fica visivelmente à parte. */
#changelist .toplinks,
#changelist nav.toplinks {
  padding: 6px 8px;
  gap: 4px 6px;
  align-items: center;
}
#changelist .toplinks a,
#changelist nav.toplinks a {
  padding: 3px 10px;
  border-radius: var(--r-cheio);
  background: var(--superficie-3);
  color: var(--texto-2);
  font-size: var(--texto-nota);
  font-weight: 600;
}
#changelist .toplinks a:hover { background: var(--marca-suave); color: var(--marca-texto); text-decoration: none; }
#changelist .toplinks .back,
#changelist nav.toplinks .back a { background: transparent; color: var(--texto-3); }


/* --- Etiquetas: o item marcado precisa gritar ----------------------------
   No `<select multiple>` o navegador pinta a seleção com a cor do sistema —
   no Windows, um amarelo-claro sobre texto claro que o Victor descreveu como
   "contraste quase inexistente". Não dá para consertar de fora: o widget do
   CRM passa a ser uma lista de caixas de marcar, desenhada aqui.

   Onde o `<select multiple>` ainda aparecer (telas do Django que não passam
   pelo widget), pelo menos a seleção fica legível. */
select[multiple] option:checked,
select[multiple] option[selected] {
  background: var(--marca) linear-gradient(0deg, var(--marca) 0%, var(--marca) 100%);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-weight: 600;
}
select[multiple] option { padding: 3px 6px; }

/* Cada cor de etiqueta publica o próprio par fundo/texto como variável. É o
   que permite uma regra só desenhar a pastilha em qualquer contexto — sem
   isso, o rótulo dentro de um formulário perde a cor para
   `fieldset.module.aligned .form-row label`, que é mais específica que
   `.prefiro-marcador.cor-vermelho` e pinta tudo de cinza. Variável não entra
   nessa briga: ela é definida no elemento e lida por quem quiser. */
.prefiro-marcador.cor-cinza    { --et-fundo: var(--et-cinza-fundo);    --et-texto: var(--et-cinza-texto); }
.prefiro-marcador.cor-vermelho { --et-fundo: var(--et-vermelho-fundo); --et-texto: var(--et-vermelho-texto); }
.prefiro-marcador.cor-laranja  { --et-fundo: var(--et-laranja-fundo);  --et-texto: var(--et-laranja-texto); }
.prefiro-marcador.cor-verde    { --et-fundo: var(--et-verde-fundo);    --et-texto: var(--et-verde-texto); }
.prefiro-marcador.cor-azul     { --et-fundo: var(--et-azul-fundo);     --et-texto: var(--et-azul-texto); }
.prefiro-marcador.cor-roxo     { --et-fundo: var(--et-roxo-fundo);     --et-texto: var(--et-roxo-texto); }
.prefiro-marcador.cor-rosa     { --et-fundo: var(--et-rosa-fundo);     --et-texto: var(--et-rosa-texto); }
.prefiro-marcador.cor-turquesa { --et-fundo: var(--et-turquesa-fundo); --et-texto: var(--et-turquesa-texto); }

.prefiro-etiquetas-escolha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.prefiro-etiquetas-escolha li { margin: 0; }

/* O seletor carrega `fieldset.module.aligned .form-row` na frente por um
   motivo só: é o peso necessário para vencer a regra que pinta todo `label`
   de formulário de cinza. Sem ele, a pastilha ficava com o fundo da etiqueta
   e o texto da cor errada — que é meio caminho para o problema de contraste
   que se está consertando. */
fieldset.module.aligned .form-row .prefiro-etiquetas-escolha label,
.prefiro-etiquetas-escolha label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 5px 12px 5px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-cheio);
  background: var(--et-fundo, var(--superficie-3));
  color: var(--et-texto, var(--texto-2));
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: box-shadow .12s ease, opacity .12s ease;
}
.prefiro-etiquetas-escolha input { margin: 0; accent-color: var(--marca); }

/* Desmarcada, a pastilha fica apagada e com contorno tracejado: é uma
   possibilidade, não um fato. Marcada, ganha a cor cheia e um anel na cor da
   marca. A diferença tem de ser visível de relance, sem ler nome nenhum — era
   exatamente isso que faltava no `<select multiple>`, onde o item escolhido
   ficava amarelo-claro sobre texto claro. */
.prefiro-etiquetas-escolha label:not(.marcada) {
  opacity: .58;
  border-style: dashed;
  border-color: var(--linha-forte);
}
.prefiro-etiquetas-escolha label:not(.marcada):hover { opacity: .85; }
fieldset.module.aligned .form-row .prefiro-etiquetas-escolha label.marcada,
.prefiro-etiquetas-escolha label.marcada {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--marca);
}
.prefiro-etiquetas-vazio { color: var(--texto-3); font-size: .82rem; }

/* As etiquetas herdadas, onde não se edita: pastilhas e um caminho para o
   lugar onde se muda. Sem o caminho, "não posso editar aqui" vira beco. */
.prefiro-etiquetas-herdadas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.prefiro-etiquetas-herdadas .prefiro-nota { font-size: .76rem; }


/* --- Barra de salvar no começo e no fim ----------------------------------
   O pedido do Victor, com todas as letras: os botões param de acompanhar a
   rolagem e ficam **fixos no início e no fim da página**, logo antes e logo
   depois do conteúdo.

   Havia um motivo para a barra grudada — num dossiê de oito blocos o salvar
   ficava a três telas de distância. Ele deixa de valer quando existe uma barra
   no topo: de qualquer ponto do formulário, salvar está a um `Home` ou um
   `End` de distância, e a tela não perde 48px permanentes. */
.prefiro-rodape-fixo {
  position: static;
  box-shadow: none;
}
.prefiro-barra-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  /* Encosta nas bordas sem passar do recheio do conteúdo: −20px fixos
     faziam a tela rolar de lado onde o recheio é menor (16px no celular,
     18px a 1024px — achado de 03/10/2026). */
  margin: 0 calc(-1 * min(20px, var(--recheio-lateral, 20px))) 16px;
  padding: 9px 20px;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linha-forte);
}
.prefiro-barra-acoes.rodape {
  margin: 18px calc(-1 * min(20px, var(--recheio-lateral, 20px))) -20px;
  border-bottom: 0;
  border-top: 1px solid var(--linha-forte);
}
/* O espaço reservado para a barra grudada não é mais necessário. */
.change-form #content { padding-bottom: 24px; }


/* --- Cálculo ao vivo -----------------------------------------------------
   O resultado do que se está digitando aparece antes de salvar. Enquanto a
   conta está indo ao servidor, o bloco fica levemente apagado: sem isso, um
   número velho na tela por 300ms é lido como número certo. */
.prefiro-ao-vivo { transition: opacity .12s ease; }
.prefiro-ao-vivo.calculando { opacity: .45; }
.prefiro-ao-vivo-aviso {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--r-cheio);
  background: var(--info-suave);
  color: var(--info-texto);
  font-size: var(--texto-legenda);
  font-weight: 700;
  text-transform: none;
  letter-spacing: .04em;
}
.prefiro-ao-vivo-aviso.sujo { background: var(--aviso-suave); color: var(--aviso-texto); }


/* --- Um ponto de densidade a menos em tudo -------------------------------
   Pedido literal: "reduz fonte, ajusta tamanhos de caixas". A base cai de 14
   para 13.5px, e o que é rótulo ou auxiliar cai junto. Abaixo disso a leitura
   piora mais do que o espaço ganho compensa — foi medido em tela, não
   chutado. */
fieldset.module.aligned > .form-row { padding: 7px 18px; }
.module > h2, .module caption, .inline-group h2 { font-size: var(--texto-nota); padding: 11px 18px; }
fieldset .description { margin: 12px 18px 4px; padding: 10px 14px; font-size: .8rem; }
.aligned .form-row label, .aligned .fieldBox > label { font-size: var(--texto-legenda); }
/* 5px de cada lado: é o valor que `larguras_de_coluna.RECHEIO` soma. */
#result_list td, #result_list th { padding: 7px 5px; }
.inline-group .tabular td,
.inline-group .tabular th { padding: 6px 7px; }
/* O corpo, o h1 e o h2 deste passe de densidade foram para a seção 2, onde se
   procura por eles (03 M1). */


/* --- O bloco que se recompõe sozinho ------------------------------------
   A lista do dia é trocada inteira pelo servidor a cada ação concluída. Sem
   nenhuma marcação, a troca é instantânea e indistinguível de um piscar da
   tela — e quem concluiu a tarefa não percebe que a próxima entrou. O fade
   curto é só isto: a diferença entre "mudou" e "não mudou nada". */
@keyframes prefiro-entrando {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.prefiro-entrando { animation: prefiro-entrando .22s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .prefiro-entrando { animation: none; }
}


/* --- Altura de linha: a mesma no cabeçalho e no corpo -------------------
   Recomendação do Carbon Design System, e ela tem razão prática: cabeçalho
   mais alto que a linha faz a tabela parecer ter um título flutuando em cima
   dela, e o olho perde a referência de onde começa o conteúdo. Medido aqui, o
   cabeçalho tinha 56px e as linhas 47.

   A faixa de densidade "compacta" dos sistemas corporativos é 40–44px por
   linha. É onde esta tabela fica agora: cabe mais gente na tela sem o alvo do
   clique virar um fio. */
#result_list thead th,
#result_list thead td { padding-top: 9px; padding-bottom: 9px; }


/* -------------------------------------------------------------------------
   34. Densidade: seis campos sem cinco telas de rolagem
   -------------------------------------------------------------------------
   Medição que originou esta seção, na tela de uma opção de cotação a 1280px:
   **3.883px de altura — 5,4 telas** para preencher meia dúzia de números. Uma
   linha de formulário media 98px para exibir um campo de 32px.

   A causa não era o espaçamento nem a fonte. Eram três coisas, nesta ordem de
   tamanho:

   1) **O texto de ajuda.** O admin escreve o `help_text` de cada campo como um
      parágrafo fixo embaixo dele. Quase todo campo aqui tem ajuda — e ela é
      boa, foi escrita para quem não é do ramo. Mas é lida uma vez. Da segunda
      vez em diante são duas ou três linhas separando um número do seguinte, e
      quarenta campos viram 1.200px de explicação que ninguém está lendo.
      Agora ela se dobra atrás de um "?" no rótulo (ver
      `static/admin/js/prefiro_densidade.js`). O texto continua lá, continua
      alcançável por leitor de tela, e deixa de custar altura permanente.

   2) **A grade larga demais.** `minmax(300px, 1fr)` dava três colunas numa
      área de 943px. Com 230px cabem quatro — e nenhum campo desta tela precisa
      de 300px: são valores, percentuais e datas.

   3) **Respiro somado.** Cada bloco custava 20px de margem, cada cabeçalho
      11px de padding em cima e embaixo, cada linha 7px. Somado em seis blocos
      e quarenta linhas, é meia tela.

   O que **não** encolheu: a `description` do bloco. Ela explica o conjunto, é
   lida antes de preencher, e é o que orienta quem está chegando. Espremer as
   duas coisas deixaria a tela muda — o objetivo é caber, não emudecer.
   ------------------------------------------------------------------------- */

/* --- A ajuda dobrada ------------------------------------------------------ */
.prefiro-ajuda-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 18px e "?" de 11px (03 M6). Era um disco de 15px com a interrogação a
     10px — o menor alvo e o menor texto da tela inteira, e logo no controle
     que existe para quem está com dúvida. */
  width: 18px;
  height: 18px;
  margin-left: 5px;
  padding: 0;
  border: 1px solid var(--linha-campo);
  border-radius: var(--r-cheio);
  background: transparent;
  color: var(--texto-2);
  font-size: var(--texto-micro);
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.prefiro-ajuda-botao:hover {
  border-color: var(--info);
  color: var(--info-texto);
}
.prefiro-ajuda-botao.aberto {
  background: var(--info);
  border-color: var(--info);
  color: #ffffff;
}

/* Aberta, a ajuda aparece como um recado do sistema, e não como mais um
   parágrafo cinza: quem clicou está perguntando alguma coisa, e a resposta
   precisa se distinguir do formulário em volta. */
.aligned .form-row .help.prefiro-ajuda-texto,
.aligned .form-row div.help.prefiro-ajuda-texto {
  margin: 5px 0 2px !important;
  padding: 7px 10px !important;
  border-left: 3px solid var(--info);
  border-radius: var(--r-sm);
  background: var(--info-suave);
  color: var(--texto-2);
  font-size: var(--texto-legenda);
  line-height: 1.45;
}

/* --- A grade mais estreita ----------------------------------------------- */
fieldset.module.aligned {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 18px;
}
@media (max-width: 1100px) {
  fieldset.module.aligned { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

/* Só o que realmente precisa de largura continua ocupando a faixa inteira.
   A regra de `select[multiple]` saiu daqui: o seletor de etiquetas virou
   pastilhas, que quebram sozinhas em quantas linhas precisarem.

   E ela saiu **só para as etiquetas**. Escrita para todo `select[multiple]`,
   ela pegava também o seletor de duas caixas do `filter_horizontal`, que é um
   `select multiple` de cada lado: as duas caixas caíam numa coluna de 230px da
   grade e ficavam com 110px cada — largura em que nenhum nome de item cabe.
   Medido em "Recebimentos → Itens cobertos" antes de corrigir. */
fieldset.module.aligned > .form-row.field-etiquetas:has(select[multiple]) { grid-column: auto; }

/* As duas caixas do `filter_horizontal` precisam da faixa inteira e de um
   mínimo por caixa: abaixo disso o widget existe mas não se usa. */
fieldset.module.aligned > .form-row:has(.selector) { grid-column: 1 / -1; }
#content .selector { gap: 12px; }
#content .selector-available,
#content .selector-chosen { min-width: 260px; }
fieldset.module.aligned > .form-row:has(.prefiro-etiquetas-escolha) { grid-column: 1 / -1; }

/* --- Respiro, um pouco de cada lugar ------------------------------------- */
fieldset.module.aligned > .form-row { padding: 5px 16px; }
.module { margin-bottom: 12px; }
.module > h2,
.module caption,
.inline-group h2 { padding: 8px 16px; }
fieldset.module { padding-bottom: 4px; }
fieldset .description {
  margin: 9px 16px 2px;
  padding: 8px 12px;
  font-size: var(--texto-nota);
  line-height: 1.5;
}
.inline-group { margin: 12px 0; }
.prefiro-inline-descricao { padding: 9px 16px 0; font-size: .8rem; }

/* Campo e rótulo mais justos. O alvo do clique continua com 30px de altura —
   abaixo disso erra-se o campo, e errar custa mais que rolar. */
fieldset.module.aligned > .form-row input,
fieldset.module.aligned > .form-row select {
  padding-top: 5px;
  padding-bottom: 5px;
}
.aligned .form-row > div > .flex-container,
fieldset.module.aligned .form-row .flex-container.fieldBox { gap: 2px; }
.aligned .form-row label,
.aligned .fieldBox > label { line-height: 1.25; }

/* Caixa de texto: quatro linhas nascem, e quem precisar de mais arrasta. Sete
   textareas de 74px eram 520px de tela reservados para texto que quase sempre
   tem duas linhas. */
.aligned .form-row textarea,
.inline-group textarea { min-height: 56px; height: 56px; }

/* O bloco somente-leitura de resultado (o demonstrativo, o resumo, a trilha)
   continua com a faixa inteira: ele é uma tabela, não um campo. */
fieldset.module.aligned > .form-row:has(.prefiro-tabela-painel),
fieldset.module.aligned > .form-row:has(.prefiro-resumo-dossie),
fieldset.module.aligned > .form-row:has(.prefiro-trilha) { grid-column: 1 / -1; }

/* --- As barras de ação, mais discretas ----------------------------------- */
.prefiro-barra-acoes { padding: 7px 20px; margin-bottom: 12px; }
.prefiro-barra-acoes.rodape { margin-top: 14px; }

/* --- O painel também ------------------------------------------------------
   Mesmo princípio: os cartões do painel tinham 20px de respiro entre si e
   16px dentro. Quatro cartões numa linha custavam 60px de branco. */
.prefiro-painel-secao { margin-bottom: 18px; }
.prefiro-painel-secao > h2 { margin-bottom: 8px; }

/* --- A linha de vários campos deixa de comer a faixa inteira --------------
   Aqui estava a maior perda, e ela era invisível: um fieldset agrupa campos
   em tuplas — `('valor_tarifa', 'valor_taxas')` — e a regra anterior dava a
   **faixa inteira** para cada tupla. Numa grade de quatro colunas, uma tupla
   de dois campos gastava quatro colunas para mostrar dois. Os dois blocos da
   calculadora, com oito tuplas cada, custavam 900px por isso.

   Agora a tupla ocupa tantas colunas quanto tem campos. Duas tuplas de dois
   ficam lado a lado; a de três pega três quartos da linha. O agrupamento
   continua legível — os campos de uma tupla seguem juntos — e a tela encolhe
   pela metade.

   `:has()` contando filhos é o que permite distinguir os casos sem tocar em
   nenhum `fieldsets` de admin. */
fieldset.module.aligned > .form-row:has(> .flex-container.form-multiline > div:nth-child(2):last-child),
fieldset.module.aligned > .form-row:has(.fieldBox:nth-child(2):last-child) { grid-column: span 2; }
fieldset.module.aligned > .form-row:has(> .flex-container.form-multiline > div:nth-child(3):last-child) { grid-column: span 3; }

/* Dentro da tupla os campos dividem a fatia por igual. `1 1 200px` fazia o
   segundo campo cair para a linha de baixo quando a fatia tinha 460px. */
fieldset.module.aligned .form-row > .flex-container.form-multiline > div { flex: 1 1 0; min-width: 0; }

/* Caixa de texto: duas colunas bastam. Uma coluna de 230px para escrever
   observação é estreita; a faixa inteira é desperdício. */
fieldset.module.aligned > .form-row:has(textarea) { grid-column: span 2; }

/* --- O `<select>` que o select2 esconde, escondido de verdade -------------
   O admin troca o campo de referência por um select2, e mantém o `<select>`
   original no DOM para leitores de tela. Ele estava sendo desenhado: 40px de
   altura por baixo do widget, em **cada** campo de referência da tela. Numa
   tela com quatro deles, 120px de nada.

   `!important` porque o `!important` do select2 é quem deveria estar fazendo
   isto, e não está — provavelmente por ordem de carga das folhas do admin. */
.form-row select.select2-hidden-accessible,
.related-widget-wrapper select.select2-hidden-accessible {
  position: absolute !important;
  height: 1px !important;
  width: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
}

/* Os ícones de adicionar/ver do campo de referência ficam na mesma linha do
   widget, e não embaixo dele. */
.form-row .related-widget-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.form-row .related-widget-wrapper > .select2,
.form-row .related-widget-wrapper > select { flex: 1 1 auto; min-width: 0; }
.form-row .related-widget-wrapper-link { flex: 0 0 auto; margin: 0; }

/* --- A explicação do bloco, recolhível ------------------------------------
   Ela nasce aberta: é o que orienta quem está aprendendo a tela. Quem já sabe
   fecha uma vez, e fica fechada — a escolha é lembrada por bloco, no navegador
   de cada pessoa. Ver `static/admin/js/prefiro_densidade.js`. */
.prefiro-explicacao {
  grid-column: 1 / -1;
  margin: 9px 16px 2px;
}
.prefiro-explicacao > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  border-radius: var(--r-cheio);
  color: var(--info-texto);
  font-size: var(--texto-legenda);
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.prefiro-explicacao > summary::-webkit-details-marker { display: none; }
.prefiro-explicacao > summary::before {
  content: '▸';
  display: inline-block;
  width: 12px;
  text-align: center;
  transition: transform .12s ease;
}
.prefiro-explicacao[open] > summary::before { transform: rotate(90deg); }
.prefiro-explicacao > summary:hover { background: var(--info-suave); }
/* Dentro do recolhível a explicação não precisa mais da margem própria: quem
   dá o afastamento é o `<details>`. */
.prefiro-explicacao > .description { margin: 2px 0 0; }

/* --- Blocos somente-leitura precisam de largura --------------------------
   Um valor curto ("COT-2026-0012") cabe numa coluna de 230px. Uma frase não —
   e quase todo bloco somente-leitura deste CRM é uma frase: a memória das
   taxas, a origem da alíquota, o resumo da opção. Numa coluna só, cada um
   virava seis linhas.

   A distinção é feita pelo conteúdo: valor cru fica com uma coluna, bloco que
   tem link, parágrafo ou destaque ganha duas. Tabela continua com a faixa
   inteira — ela é o resultado, não um campo. */
fieldset.module.aligned > .form-row:has(.readonly a),
fieldset.module.aligned > .form-row:has(.readonly p),
fieldset.module.aligned > .form-row:has(.readonly strong),
fieldset.module.aligned > .form-row:has(.readonly br) { grid-column: span 2; }
fieldset.module.aligned > .form-row:has(.readonly table) { grid-column: 1 / -1; }

/* --- Ordem importa: o que é faixa inteira volta a ser -------------------
   As regras de `span 2` acima são novas e, por virem depois, venciam as de
   faixa inteira da seção 28 — que têm a mesma especificidade. O resultado
   apareceu medindo: a trilha do fluxo, que é uma tira de três etapas, recebeu
   meia largura e quebrou em 214px de altura.

   Aqui elas voltam a valer. É a regra geral deste arquivo: quem precisa da
   linha toda é declarado por último. */
fieldset.module.aligned > .form-row:has(.prefiro-trilha),
fieldset.module.aligned > .form-row:has(.prefiro-resumo-dossie),
fieldset.module.aligned > .form-row:has(.prefiro-tabela-painel),
fieldset.module.aligned > .form-row:has(.prefiro-etiquetas-escolha),
fieldset.module.aligned > .form-row:has(.readonly table) { grid-column: 1 / -1; }

/* --- As pastilhas de etiqueta ocupam a linha ------------------------------
   O `related-widget-wrapper` do admin envolve o campo, e a lista de pastilhas
   entrava nele como item de flex com largura do conteúdo: 187px numa faixa de
   911px, e as oito etiquetas empilhadas em oito linhas. */
#content .form-row .related-widget-wrapper > .prefiro-etiquetas-escolha,
.form-row .related-widget-wrapper > .prefiro-etiquetas-escolha {
  flex: 1 1 100%;
  width: 100%;
}
#content .prefiro-etiquetas-escolha,
.form-row .prefiro-etiquetas-escolha {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#content .prefiro-etiquetas-escolha > li { list-style: none; margin: 0; width: auto; }

/* --- A trilha do fluxo, numa tira -----------------------------------------
   Três etapas de 89px de altura, com a seta entre elas, davam 214px de banner
   no topo de toda tela do fluxo. Ela é orientação — "você está aqui" — e
   orientação não precisa de um terço da tela. */
.prefiro-trilha { gap: 6px; }
.prefiro-etapa {
  padding: 7px 11px;
  min-width: 0;
}
.prefiro-etapa-numero { font-size: var(--texto-micro); }
.prefiro-etapa-rotulo { font-size: .82rem; }
.prefiro-etapa-detalhe { font-size: var(--texto-legenda); }
.prefiro-etapa-seta { align-self: center; }

/* --- Botão e explicação lado a lado --------------------------------------
   A seção 32 empilhou os dois porque o botão ficava por cima da frase. Empilhar
   resolveu a sobreposição e criou outra conta: quatro blocos de ação no dossiê
   — comprovante, contrato, cobrança, avaliação — a 100px cada. Lado a lado,
   com quebra quando não couber, eles custam 40px. */
fieldset.module.aligned .form-row .readonly:has(.button) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
fieldset.module.aligned .form-row .readonly .button,
fieldset.module.aligned .form-row .readonly a.button { margin: 0; }
fieldset.module.aligned .form-row .readonly:has(.button) .prefiro-nota,
fieldset.module.aligned .form-row .readonly:has(.button) > span { flex: 1 1 220px; }

/* --- A trilha em duas linhas, não em quatro ------------------------------
   Cada etapa era uma coluna: "Etapa 2" em cima, o nome embaixo, o detalhe
   embaixo dele e o botão de ação embaixo de tudo. Quatro linhas empilhadas,
   89px por etapa, 214px de banner no topo de toda tela do fluxo.

   Orientação — "você está aqui, veio dali, vai para lá" — não precisa de um
   terço da tela. O número vira crachá ao lado do nome e o detalhe desce para
   uma segunda linha; a etapa passa a medir o que mede uma linha de tabela. */
.prefiro-etapa {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 7px;
  padding: 7px 12px;
}
.prefiro-etapa-numero {
  order: -1;
  font-size: var(--texto-micro);
  opacity: .8;
}
.prefiro-etapa-nome { font-size: .86rem; }
.prefiro-etapa-detalhe { flex: 1 1 100%; font-size: var(--texto-legenda); line-height: 1.35; }
.prefiro-etapa-acao {
  align-self: center;
  margin-top: 3px;
  padding: 4px 10px;
  font-size: var(--texto-legenda);
}
/* O rótulo "Trilha do fluxo:" acima dela não informa nada que a própria tira
   não diga. Ele custava uma linha em três telas. */
.form-row.field-trilha_do_fluxo > div > .flex-container > label { display: none; }

/* --- O menu recolhido volta a ser um menu --------------------------------
   Recolhido, os rótulos somem e ficam só os ícones. Os grupos não tinham
   nenhum: a regra antiga zerava a fonte do `summary` e desenhava "···" no
   lugar. O resultado era uma coluna de reticências idênticas — não dava para
   saber onde estava Comercial e onde estava Financeiro, que é justamente o que
   um menu precisa responder.

   Agora cada grupo tem o próprio ícone, e é ele que aparece. O nome fica no
   `title`, para quem passar o mouse. */
html.prefiro-lateral-fechada .prefiro-lateral-grupo > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  padding-left: 0;
  padding-right: 0;
}
html.prefiro-lateral-fechada .prefiro-lateral-grupo > summary::before { content: none; }
html.prefiro-lateral-fechada .prefiro-lateral-grupo > summary .prefiro-lateral-icone {
  display: inline-flex;
  color: var(--lateral-texto);
}
html.prefiro-lateral-fechada .prefiro-lateral-grupo[open] > summary .prefiro-lateral-icone {
  color: var(--lateral-texto-forte);
}
/* O `font-size: 15px` e `16px` que havia aqui era o que dava tamanho ao glifo
   Unicode. O ícone agora é SVG com largura e altura próprias (03 M5), e um
   tamanho de fonte não o afeta — a regra só continuaria dando a impressão de
   controlar alguma coisa. Ficou a cor, que é o que de fato muda de estado. */

/* Aberto, o ícone do grupo acompanha o nome sem roubar recuo dos itens. */
.prefiro-lateral-grupo > summary {
  display: flex;
  align-items: center;
  gap: 8px;
}
.prefiro-lateral-grupo > summary .prefiro-lateral-icone {
  width: 16px;
  text-align: center;
  opacity: .75;
}

/* --- Meu dia agrupado por negócio ---------------------------------------
   Cada linha é um cliente; as pendências dele ficam dentro. Sem o recuo e a
   linha de apoio, as pendências de dois clientes vizinhos se misturam e o
   agrupamento não comunica nada. */
/* A faixa alternada do «Meu dia».
   -------------------------------------------------------------------------
   A partir desta rodada, **toda lista do CRM tem faixa alternada** — a decisão
   é do Victor e vale como padrão, não como exceção. A listagem do admin e as
   tabelas do painel já tinham; o «Meu dia» era a que faltava, e é a primeira
   lista que a pessoa lê no dia.

   A faixa vai no *grupo*, e não na pendência: a unidade que se lê aqui é o
   cliente. Zebrar as pendências dentro do grupo faria o olho contar linhas de
   banco em vez de contar clientes. */
.prefiro-dia-negocio {
  display: block;
  /* 10px → 6px (DEBUG 26/09, item 4): o «Meu dia» ocupava a tela inteira.
     Ligeiramente, como foi pedido: o bastante para caber mais negócio por
     dobra, sem que a linha vire alvo difícil de clicar. */
  padding: 6px 12px;
  border-bottom: 1px solid var(--linha);
}
.prefiro-dia-negocio:nth-child(odd) { background: var(--superficie); }
.prefiro-dia-negocio:nth-child(even) { background: var(--faixa); }
.prefiro-dia-negocio:last-child { border-bottom: none; }
.prefiro-dia-negocio:first-child { border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
.prefiro-dia-negocio:last-child { border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }

/* O cabeçalho é o `<summary>` do grupo retraído: ele tem de bastar para decidir
   se vale abrir. */
.prefiro-dia-cabecalho {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
  border-radius: var(--r-sm);
}
/* O triângulo que o navegador desenha sozinho sai: a seta é nossa, alinha com o
   texto e gira. */
.prefiro-dia-cabecalho::-webkit-details-marker { display: none; }
.prefiro-dia-cabecalho::marker { content: ''; }
.prefiro-dia-cabecalho:hover { background: var(--superficie-3); }
.prefiro-dia-cabecalho:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

.prefiro-dia-seta {
  flex: none;
  width: 14px;
  color: var(--texto-3);
  font-weight: 700;
  transition: transform .14s ease;
  transform-origin: 45% 50%;
}
.prefiro-dia-grupo[open] > .prefiro-dia-cabecalho .prefiro-dia-seta {
  transform: rotate(90deg);
}

/* O atraso aparece **fechado**: sem ele, a linha retraída esconderia a única
   coisa que ordena o dia. */
.prefiro-dia-atraso-resumo {
  color: var(--erro-texto);
  font-size: var(--texto-legenda);
  font-weight: 700;
}
.prefiro-dia-cliente {
  font-weight: 700;
  font-size: var(--texto-corpo);
  color: var(--texto);
}
#content .prefiro-dia-cliente:link,
#content .prefiro-dia-cliente:visited { color: var(--texto); }
.prefiro-dia-cliente:hover { color: var(--marca-texto); }
.prefiro-dia-quantas {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: var(--r-cheio);
  background: var(--superficie-3);
  color: var(--texto-2);
  font-size: var(--texto-legenda);
  font-weight: 700;
}
.prefiro-dia-negocio.atrasado .prefiro-dia-quantas {
  background: var(--erro-suave);
  color: var(--erro-texto);
}
.prefiro-dia-pendencias {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--linha);
}
/* Pendência avulsa não tem cabeçalho; sem o recuo ela se alinha com o resto. */
.prefiro-dia-negocio.sozinho .prefiro-dia-pendencias {
  padding-left: 0;
  border-left: none;
}
.prefiro-dia-negocio .prefiro-dia-item { border-bottom: none; padding: 2px 0; }
.prefiro-dia-grupo[open] > .prefiro-dia-cabecalho { margin-bottom: 2px; }

/* --- «Meu dia» recolhível (DEBUG 26/09, item 4) --------------------------
   O título é o `<summary>`: clicar nele recolhe a lista inteira, e o painel
   lembra da escolha. Fechado, os contadores continuam no título. */
.prefiro-meu-dia > .prefiro-meu-dia-topo {
  list-style: none;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.prefiro-meu-dia > .prefiro-meu-dia-topo::-webkit-details-marker { display: none; }
.prefiro-meu-dia > .prefiro-meu-dia-topo::marker { content: ''; }
.prefiro-meu-dia > .prefiro-meu-dia-topo:hover h2 { color: var(--marca-texto); }
.prefiro-meu-dia > .prefiro-meu-dia-topo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.prefiro-meu-dia-topo h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 650;
  margin: 0 0 12px;
  color: var(--texto);
}
.prefiro-meu-dia:not([open]) .prefiro-meu-dia-topo h2 { margin-bottom: 0; }
.prefiro-meu-dia[open] > .prefiro-meu-dia-topo .prefiro-dia-seta { transform: rotate(90deg); }
/* Quantos negócios é informação, não alarme: o vermelho fica para o atraso. */
.prefiro-contador.prefiro-contador-neutro { background: var(--superficie-3); color: var(--texto-2); }

/* --- Pendências de prazo longo ------------------------------------------
   Passaporte e hold vivem no fim do painel, e o cartão diz só quantos são. */
.prefiro-pontuais .prefiro-card-pontual {
  border-style: dashed;
  background: var(--superficie-2);
}
.prefiro-pontuais .prefiro-card-pontual .prefiro-card-valor { color: var(--aviso-texto); }

/* -------------------------------------------------------------------------
   35. Preferências de tela: dicas e caixa alta
   -------------------------------------------------------------------------
   Duas coisas que cada pessoa liga e desliga para si, do mesmo botão no topo.

   O pedido: *"estou achando o CRM muito poluído visualmente por conta do
   excesso de texto, tornando até difícil encontrar as informações que realmente
   importam."* Ele tem razão, e a causa é conhecida: o CRM foi escrito para
   ensinar quem nunca usou um. Isso é bom no primeiro mês e é ruído no sexto —
   e não dá para escolher um dos dois de fábrica, porque a equipe tem gente nos
   dois estágios ao mesmo tempo.
   ------------------------------------------------------------------------- */

/* --- O botão e o menu ---------------------------------------------------- */
.prefiro-preferencias { position: relative; display: inline-flex; }
.prefiro-preferencias-abrir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-cheio);
  background: transparent;
  color: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.prefiro-preferencias-abrir:hover { border-color: rgba(255, 255, 255, .45); }

.prefiro-preferencias-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  width: 288px;
  padding: 6px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-md);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
}
.prefiro-preferencias-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.prefiro-preferencias-item:hover { background: var(--superficie-3); }

/* --- O seletor de tema ---------------------------------------------------
   Três botões lado a lado, e não um `<select>`: são três opções curtas, e ver
   as três de uma vez custa menos que abrir uma lista para descobrir quais são.
   O escolhido fica com o fundo da marca — é estado, e estado tem de aparecer. */
.prefiro-preferencias-grupo {
  margin-top: var(--espaco-2);
  padding: var(--espaco-2) 10px 4px;
  border-top: 1px solid var(--linha);
}
.prefiro-preferencias-rotulo-grupo {
  display: block;
  margin-bottom: 6px;
  color: var(--texto-2);
  font-size: var(--texto-legenda);
  font-weight: 700;
  letter-spacing: .04em;
}
.prefiro-preferencias-opcoes {
  display: flex;
  gap: 4px;
}
.prefiro-preferencias-opcao {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 6px;
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto-2);
  font-size: var(--texto-legenda);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.prefiro-preferencias-opcao:hover { background: var(--superficie-3); color: var(--texto); }
.prefiro-preferencias-opcao.escolhida {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}
.prefiro-preferencias-opcao:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.prefiro-preferencias-item strong { display: block; font-size: .84rem; }
.prefiro-preferencias-item small {
  display: block;
  margin-top: 1px;
  color: var(--texto-2);
  font-size: var(--texto-legenda);
  line-height: 1.4;
}

/* O interruptor: verde e à direita quando ligado. É o desenho que todo mundo
   já sabe ler sem legenda. */
.prefiro-interruptor {
  flex: none;
  position: relative;
  width: 30px;
  height: 17px;
  margin-top: 2px;
  border-radius: var(--r-cheio);
  background: var(--linha-forte);
  transition: background .14s ease;
}
.prefiro-interruptor::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  transition: transform .14s ease;
}
.prefiro-preferencias-item.ligado .prefiro-interruptor { background: var(--ok); }
.prefiro-preferencias-item.ligado .prefiro-interruptor::after { transform: translateX(13px); }

/* --- Dicas desligadas ----------------------------------------------------
   Some o que **ensina** e fica o que **informa**. A distinção importa: a ajuda
   de um campo ensina; o "3 item(ns)" embaixo de uma opção informa, e some junto
   seria tirar dado da tela em nome de tirar texto. */
html.prefiro-sem-dicas .form-row .help,
html.prefiro-sem-dicas .form-row div.help,
html.prefiro-sem-dicas .prefiro-ajuda-botao,
html.prefiro-sem-dicas .prefiro-explicacao,
html.prefiro-sem-dicas fieldset .description,
html.prefiro-sem-dicas .prefiro-inline-descricao,
html.prefiro-sem-dicas #prefiro-primeiros-passos,
/* `:not(.prefiro-painel-data)` porque a data de hoje usava a mesma classe do
   subtítulo e sumia junto com as dicas. Subtítulo é explicação; data é dado,
   e dado não se esconde de quem desligou a explicação. */
html.prefiro-sem-dicas .prefiro-painel-subtitulo:not(.prefiro-painel-data),
html.prefiro-sem-dicas .prefiro-passo-ajuda { display: none !important; }

/* --- Caixa alta ----------------------------------------------------------
   Até 05/10/2026 havia aqui a pintura da tela inteira em maiúsculas (o
   interruptor "Texto em caixa alta"). Saiu por decisão do Victor: a caixa alta
   mora no **dado** de cliente, gravado assim (`apps/caixa_alta.py`), e rótulo,
   menu e botão ficam em caixa normal. */

/* --- O custo de largura da caixa alta -------------------------------------
   Maiúscula é mais larga que minúscula: a mesma listagem que cabia em 1.033px
   passou a pedir 1.112. Medido na listagem de atendimentos a 1366px, com a
   caixa alta ligada — "ETIQUETAS" e "SITUACAO" ganharam 20px cada, e a coluna
   "CRIADO EM" saiu pela direita do quadro.

   Duas coisas, portanto. A primeira: no modo caixa alta, o teto por célula
   aperta na mesma proporção. */
/* Data **com hora** ("27/08/2026 21:08") é mais larga que data só, e a classe
   `nowrap` do Django não a deixa quebrar. Ela precisa dos 120px; apertá-la em
   84 punha os últimos dígitos para fora do quadro. */
/* A célula de data-e-hora pode quebrar em duas linhas se ainda faltar espaço:
   perder a segunda linha da data é pior do que ganhar 14px de altura. */
#result_list td[class*="field-criado"],
#result_list td[class*="_em"] { white-space: normal; }
/* O que estava aqui era `overflow: hidden` com reticências na pastilha de
   situação, para conter o vazamento que a caixa alta provocava. Ele continha —
   escondendo: "EM MONTAGEM" virava "EM MONTA…" e "AGUARDANDO PAGAMENTO" virava
   "AGUAR…", que é a informação mais importante da linha.

   O vazamento tinha outra causa, e ela foi consertada na seção 37: a pastilha
   era `content-box`, então o `max-width: 100%` limitava só o texto e deixava os
   22px de recheio para fora da coluna. Com `border-box` a pastilha cabe, quebra
   em duas linhas quando precisa e não perde uma letra. */


/* A segunda, e a que importa mais: **nunca cortar em silêncio**.
   `overflow: visible` no quadro da listagem foi decisão da seção 29, e ela vale
   enquanto a tabela cabe. Quando não cabe — e é o que a caixa alta acabou de
   provocar —, "visible" não mostra o que sobra: quem corta é o `#content`, sem
   barra, sem aviso, sem nada. A coluna some e a tela parece certa.

   Rolar dentro do quadro é pior que caber e melhor que sumir. */
#changelist .results { overflow-x: auto; }

/* --- E a rolagem tem de se anunciar --------------------------------------
   A regra acima resolveu o sumiço e criou um problema menor no lugar: o quadro
   passou a rolar **sem dizer que rola**. Num mouse de mesa, sem roda
   horizontal, uma rede de segurança invisível não é mais fácil de achar do que
   o corte que ela substituiu.

   Medido com a caixa alta ligada, que é o padrão: a 1366px sobram 25px em
   atendimentos e 58px em itens de venda — pouco, mas é sempre a última coluna.
   A 900px são 380px, e aí é meia tabela.

   Duas dicas, e as duas de graça:

   1. **Sombra na borda que tem conteúdo além dela.** `background-attachment:
      local` no par de gradientes brancos e `scroll` no par de sombras é o
      truque clássico: as sombras só aparecem quando há o que rolar naquele
      lado, e somem sozinhas ao chegar na ponta. Sem JavaScript, sem medir nada.

   2. **Barra sempre visível e estilizada**, como a da lateral já tem. Barra que
      só aparece ao passar o mouse é barra que quem não passou o mouse não sabe
      que existe. */
#changelist .results {
  background-image:
    linear-gradient(to right, var(--superficie), var(--superficie)),
    linear-gradient(to left, var(--superficie), var(--superficie)),
    linear-gradient(to right, rgba(16, 24, 40, .13), rgba(16, 24, 40, 0)),
    linear-gradient(to left, rgba(16, 24, 40, .13), rgba(16, 24, 40, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
#changelist .results::-webkit-scrollbar { height: 10px; }
#changelist .results::-webkit-scrollbar-track {
  background: var(--superficie-3);
  border-radius: var(--r-cheio);
}
#changelist .results::-webkit-scrollbar-thumb {
  background: var(--linha-forte);
  border-radius: var(--r-cheio);
}
#changelist .results::-webkit-scrollbar-thumb:hover { background: var(--texto-3); }
#changelist .results { scrollbar-width: thin; scrollbar-color: var(--linha-forte) var(--superficie-3); }


/* -------------------------------------------------------------------------
   36. Sistema visual: a tela de referência
   -------------------------------------------------------------------------
   Só o andaime — grade das amostras, listas, tamanho das formas. **Nenhum
   componente é redesenhado aqui.** A pastilha desta tela é a `.prefiro-etiqueta`
   de verdade, o cartão é o `.prefiro-card` de verdade, e é essa a única razão
   de a página existir: uma referência que reproduz o componente com estilo
   próprio começa certa e envelhece em silêncio.

   Se alguma regra abaixo passar a pintar um componente, a tela deixou de ser
   referência e virou cópia. É o único jeito de este arquivo estragar. */
.prefiro-sistema-subtitulo {
  margin: var(--espaco-5) 0 var(--espaco-2);
  font-size: var(--texto-nota);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--texto-3);
}
.prefiro-sistema-subtitulo:first-of-type { margin-top: var(--espaco-3); }

.prefiro-sistema-cores {
  /* 215px cortavam `--lateral-texto-forte` por cinco pixels, e o nome do token
     é a única coisa que esta tela existe para dizer. O maior nome em uso pede
     145px mais a amostra, o valor e o recheio. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: var(--espaco-2);
}
.prefiro-sistema-cor {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-1) var(--espaco-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  font-size: var(--texto-legenda);
  min-width: 0;
}
.prefiro-sistema-cor code {
  /* Sem reticências: um nome de token cortado é um token que não dá para
     procurar no arquivo, e procurar no arquivo é o uso desta tela. */
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* A amostra precisa de borda: sem ela, `--superficie` sobre `--superficie`
   é um quadrado invisível — e um token invisível é um token não conferido. */
.prefiro-sistema-amostra {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--r-sm);
  border: 1px solid var(--linha-forte);
}
.prefiro-sistema-valor {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
  font-size: var(--texto-legenda);
}
.prefiro-sistema-valor.ausente { color: var(--erro-texto); font-weight: 700; }

.prefiro-sistema-lista { list-style: none; margin: 0; padding: 0; }
.prefiro-sistema-lista li {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-2) 0;
  border-bottom: 1px solid var(--linha);
}
.prefiro-sistema-lista li:last-child { border-bottom: none; }
.prefiro-sistema-lista code { flex: none; min-width: 130px; font-size: var(--texto-legenda); }
.prefiro-sistema-lista > li > span:not(.prefiro-sistema-valor) { flex: 1; min-width: 0; }
.prefiro-sistema-barra {
  height: 14px;
  background: var(--marca);
  border-radius: 3px;
  flex: none !important;
}

.prefiro-sistema-fileira {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
}
.prefiro-sistema-forma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 56px;
  padding: 0 var(--espaco-3);
  background: var(--superficie);
  border: 1px solid var(--linha);
  font-size: var(--texto-legenda);
}


/* -------------------------------------------------------------------------
   37. A largura das colunas da listagem — não mora mais aqui
   -------------------------------------------------------------------------
   Estava tudo neste bloco: uma lista de larguras em pixel, escrita à mão, para
   as colunas que alguém lembrou de escrever. E o defeito não era de afinação,
   era estrutural — **toda coluna fora da lista repartia o que sobrasse, em
   partes iguais**. Em dossiês sobravam 136px para "CÓDIGO" e "TÍTULO": 68 para
   cada. "PAX", que mostra o número 1, ficava com 56, porque estava na lista.

   O relato: *"a largura deve ser fixada no tamanho da maior palavra da coluna
   e, aí sim, pode ocorrer a quebra. Algumas colunas ficaram com espaço demais,
   como as que contêm números simples, enquanto outras ficaram com espaço de
   menos."*

   Hoje a medida sai de dois lugares que sabem mais que uma folha de estilo:

   - **`apps/larguras_de_coluna.py`** calcula, por coluna, o **piso** (a maior
     palavra do rótulo, medida na fonte real, contra a maior palavra do
     conteúdo do papel) e o **ideal** (o conteúdo típico numa linha só). Sai
     num `<colgroup>`, servido pelo template `admin/change_list_results.html`.
   - **`static/admin/js/prefiro_colunas.js`** reparte a diferença entre piso e
     ideal com a largura real do quadro na mão — que é a única coisa que o
     servidor não tem, porque ela muda quando o menu lateral abre e fecha.

   O que sobrou para o CSS é o que não é largura: o alinhamento do dinheiro à
   direita e a pastilha que quebra dentro da coluna em vez de esticá-la.

   Declarar largura de coluna aqui volta a quebrar o mecanismo — o `<col>` e o
   `th` disputam, e a disputa foi a origem de "a seção 29 declara 84 e a tela
   mostra 100". `tests_rodada_da_largura.py` reprova se voltar; a conta em si
   tem rede em `tests_rodada_das_colunas.py`.
   ------------------------------------------------------------------------- */
#result_list td[class*="field-valor"],
#result_list td[class*="field-total"],
#result_list td[class*="field-margem"],
#result_list td[class*="field-saldo"],
#result_list th[class*="column-valor"],
#result_list th[class*="column-total"],
#result_list th[class*="column-margem"],
#result_list th[class*="column-saldo"] { text-align: right; }

/* A pastilha de situação: "EMITIDO/CONFIRMADO" em caixa alta pede 162px numa
   linha só. Dar isso à coluna sairia da coluna de descrição, e elipse
   esconderia justamente o que a coluna existe para dizer. A pastilha quebra —
   perde a linha única, ganha duas, não perde uma letra.

   Vale para **toda** pastilha da listagem, e não só para as três colunas que
   alguém lembrou de listar. `etiqueta()` emite `prefiro-etiqueta` mais o tom, e
   `etiqueta_por_mapa()` emite só o tom — então uma pastilha em
   `field-etiqueta_classificacao` não casava com nenhum dos seletores antigos e
   vazava 1px por cima da coluna vizinha, sozinha, num canto do CRM. */
#result_list td .prefiro-etiqueta,
#result_list td [class^="prefiro-etiqueta-"],
#result_list td [class*=" prefiro-etiqueta-"] {
  white-space: normal;
  max-width: 100%;
  /* `inline-flex` foi a causa que sobreviveu a duas correções. O texto da
     pastilha é um item de flex anônimo, e item de flex tem `min-width: auto`:
     ele se recusa a ficar menor que a própria frase, e a frase saía por cima da
     coluna vizinha por mais que a pastilha coubesse. Como item anônimo, ele não
     tem seletor — não dá para consertar por dentro.

     Em `inline-block` o texto volta a ser texto e quebra sozinho. O ponto
     colorido vira uma caixa inline antes dele, que é o mesmo desenho. */
  display: inline-block;
  /* Sem esta linha o `max-width: 100%` limitava só o **conteúdo** da pastilha,
     e os 22px de recheio dela ficavam por fora: numa coluna de 84px a pastilha
     saía com 94 e "AGUARDANDO PAGAMENTO" pintava por cima da data ao lado.
     Nenhuma largura de coluna resolveria — o excesso vinha da pastilha. */
  box-sizing: border-box;
}

/* Os marcadores de etiqueta quebram em vez de cortar com reticências.
   -------------------------------------------------------------------------
   No cartão do funil as reticências fazem sentido: lá o cartão inteiro é
   estreito, e o nome inteiro fica no `title`. Na listagem não — a regra do CRM
   é nunca esconder informação, e "FAMÍLIA C…" esconde. Empilhar em duas linhas
   custa 20px de altura numa linha que já tem duas ou três. */
/* Na listagem a pastilha perde o ponto colorido e aperta o recheio.
   -------------------------------------------------------------------------
   A maior palavra de status do CRM é "ATENDIMENTO": 89px na fonte da pastilha.
   Somando os 22px de recheio e os 12 do ponto, a coluna de situação passava a
   pedir **123px** para não quebrar a palavra — e cada pixel ali sai da coluna
   de descrição, que é a que o Victor viu espremida.

   O ponto é decoração redundante: o fundo da pastilha já diz o tom, com a mesma
   cor. Fora ele e com o recheio em 8px, a mesma palavra pede 98 — 25px de volta
   para o título, em toda listagem do CRM, sem perder informação nenhuma.

   Fora da listagem o ponto continua: lá ele aparece sozinho, num resumo ou num
   cabeçalho, onde não custa nada e ajuda a achar o status no meio do texto. */
#result_list td .prefiro-etiqueta::before,
#result_list td [class^="prefiro-etiqueta-"]::before,
#result_list td [class*=" prefiro-etiqueta-"]::before { display: none; }
#result_list td .prefiro-etiqueta,
#result_list td [class^="prefiro-etiqueta-"],
#result_list td [class*=" prefiro-etiqueta-"] {
  padding: 3px 8px;
  font-size: var(--texto-micro);
  /* A pastilha quebra entre palavras, e só. A coluna dela é dimensionada pela
     maior palavra que ela pode conter, então quebrar dentro da palavra seria
     sinal de conta errada — foi o "AGUAR / DANDO / PAGAM / ENTO" que a tela
     mostrou.

     `hyphens` e `break-word` ficam como último recurso, para a palavra que
     nenhuma conta previu ("ACOMPANHAMENTO", 14 letras, 3px acima do piso do
     papel): entre hifenizar e transbordar por cima da coluna vizinha, hifeniza.
     Sem eles, `keep-all` fazia a palavra sair da pastilha. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
#result_list td .prefiro-marcador {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  box-sizing: border-box;
  max-width: 100%;
  /* O nome da etiqueta é escrito pela agência e não tem tamanho máximo: existe
     "INTERNACIONAL" com 95px e pode existir coisa pior. Nenhuma largura de
     coluna garante que caiba, então a coluna é dimensionada pelo caso comum e
     o excepcional quebra — mas com hífen, que é uma quebra que se lê como
     escolha, e não como defeito. */
  hyphens: auto;
}


/* -------------------------------------------------------------------------
   38. O cabeçalho da listagem cabe na coluna
   -------------------------------------------------------------------------
   Com o título proibido de quebrar dentro da palavra (seção 33), a largura da
   coluna passa a ser um compromisso com a **maior palavra do cabeçalho**. A
   conta, medida com a fonte real:

       RESPONSAVEL  86px      FORNECEDOR  81px      FINANCEIRO  73px
       RESULTADO    70px      DESCRICAO   69px      SITUACAO    62px

   "RESPONSAVEL" pedia 86 + 12 de recheio = 98px, numa coluna de 99. Cabia por
   um pixel — e "cabe por um pixel" é o mesmo que não cabe, porque o
   arredondamento de subpixel resolve contra você.

   Duas economias, nenhuma delas visível: o espaçamento entre letras do
   cabeçalho cai de .05em para .02em (em caixa alta, .05em custa 6px numa
   palavra de onze letras) e o recheio horizontal da célula de cabeçalho cai de
   6 para 4px. Juntas devolvem ~7px por coluna. */
#result_list thead th {
  /* 12px (03 M6). Era `.64rem` = 10,24px, escolhido quando encolher a fonte era
     a alavanca mais barata para fazer "RESPONSAVEL" caber na coluna. A conta
     mudou: hoje a régua de `apps/larguras_de_coluna.py` mede o piso pelo
     formato do conteúdo, e o rótulo só manda em algumas colunas — somando as
     listagens inteiras, subir a fonte custou 4px na pior delas, que continua
     cabendo. O que 10px custava era a jornada: este cabeçalho é caixa alta com
     espaçamento entre letras, lido de relance dezenas de vezes por dia.

     ATENÇÃO: este valor é a régua. `larguras_de_coluna.TAMANHO_DO_CABECALHO`
     precisa dizer o mesmo número, e `tests_rodada_das_colunas` compara os dois.
     Mudar um sem o outro faz toda largura de coluna errar sem avisar. */
  font-size: var(--texto-legenda);
  letter-spacing: .02em;
  padding-left: 4px;
  padding-right: 4px;
}

/* Abaixo de 1100px, a tabela ganha um piso e o quadro rola.
   -------------------------------------------------------------------------
   Onze colunas em 759px de área dão 48px por coluna de texto. Não há fonte,
   espaçamento ou arranjo que faça "DESCRICAO" caber em 48px sem quebrar a
   palavra — e quebrar a palavra do cabeçalho foi o defeito que esta seção
   inteira existe para não repetir.

   Então, abaixo de 1100px, a escolha muda: em vez de espremer até o texto
   virar uma coluna de letras, a tabela declara o piso de que precisa e o
   quadro rola. Rolar não é cortar, e a rolagem se anuncia — sombra na borda e
   barra sempre visível, da rodada do handoff.

   Na tela real do Victor (1280) nada disso entra em jogo: lá tudo cabe. */
/* O `min-width` que estava aqui — 940px escritos à mão — saiu: quem o declara
   hoje é o `prefiro_colunas.js`, somando os pisos reais desta listagem. Uma
   listagem de seis colunas não tem por que exigir 940px, e a de onze precisa de
   mais. A fonte do cabeçalho também não muda mais por faixa de largura: ela é
   a régua com que o servidor mediu as palavras, e mudá-la aqui invalidaria a
   conta inteira. */


/* -------------------------------------------------------------------------
   39. Comissões a pagar
   -------------------------------------------------------------------------
   Três classes, e nenhuma delas é decoração.

   A tela soma dinheiro que sai da agência para a mão de alguém, e a leitura que
   ela precisa permitir é comparativa: "quanto para cada um". Por isso tabela e
   não cartão — número em coluna se compara sem o olho saltar — e por isso as
   três marcas abaixo, que são as únicas coisas que a tabela sozinha não diz.
   ------------------------------------------------------------------------- */

/* O valor que ainda **não** é devido, mais fraco que o confirmado.
   Os dois são dinheiro e os dois estão na mesma linha; sem diferença de peso, a
   soma dos dois é o que o olho lê primeiro — e "expectativa somada com dívida"
   é justamente o erro que esta tela existe para não cometer. */
.prefiro-valor-fraco { color: var(--texto-3); }

/* A linha da comissão calculada sem agente definido.
   É dinheiro que está no total e não tem para quem ir. Fica em tom de aviso
   porque é um dado a corrigir, não um agente a pagar. */
.prefiro-tabela-painel tbody tr.prefiro-sem-agente > th,
.prefiro-tabela-painel tbody tr.prefiro-sem-agente > td {
  background: var(--aviso-suave);
  color: var(--aviso-texto);
}
.prefiro-tabela-painel tbody tr.prefiro-sem-agente > th a { color: inherit; }

/* O bloco de explicação em tom de aviso — o `.prefiro-explicacao` normal é
   azul (informa); este é âmbar (pede ação). */
.prefiro-explicacao.prefiro-aviso {
  border-color: var(--aviso);
  background: var(--aviso-suave);
  color: var(--aviso-texto);
}

/* O rodapé da soma tem de se separar das linhas, ou vira mais uma linha. */
.prefiro-tabela-comissoes tfoot th,
.prefiro-tabela-comissoes tfoot td {
  border-top: 2px solid var(--linha-forte);
  font-weight: 600;
}


/* -------------------------------------------------------------------------
   40. Busca: uma linha por pessoa, recolhida
   -------------------------------------------------------------------------
   O relato: *"se buscar alguém nessa barra, como resultado são apresentados
   todos os lugares que essa pessoa aparece em cards separados, o que acaba
   ocupando um espaço absurdo... vai ter muita gente com partes de nomes iguais,
   o que geraria uma montanha de cards."*

   Tabela, e não a lista de `<details>` do «Meu dia», por uma razão específica:
   aqui as linhas se comparam entre si — "é qual das trinta Helenas?" — e
   comparar exige coluna alinhada. No «Meu dia» cada grupo é independente e a
   lista basta.

   A faixa alternada é por **pessoa**, e não por linha: o `<tbody>` inteiro é a
   unidade que se lê, e zebrar as ocorrências separaria visualmente o que é uma
   coisa só. É a mesma regra da seção das faixas — a faixa vai na unidade que se
   lê.
   ------------------------------------------------------------------------- */
.prefiro-tabela-busca {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-nota);
}
.prefiro-tabela-busca thead th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha-forte);
  color: var(--texto-2);
  font-size: var(--texto-legenda);
  font-weight: 700;
  text-align: left;
  letter-spacing: .04em;
}
.prefiro-tabela-busca tbody:nth-of-type(odd) { background: var(--superficie); }
.prefiro-tabela-busca tbody:nth-of-type(even) { background: var(--faixa); }

.prefiro-busca-linha > th,
.prefiro-busca-linha > td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--linha);
  text-align: left;
  font-weight: 400;
  vertical-align: middle;
}
.prefiro-busca-linha > th { font-weight: 600; }
.prefiro-busca-contato,
.prefiro-busca-resumo { color: var(--texto-2); }

/* A coluna da seta tem a largura da seta e mais nada: cada pixel dela sai do
   nome, que é o que se lê. */
.prefiro-busca-abrir { width: 34px; padding-right: 0; }

.prefiro-busca-seta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto-2);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.prefiro-busca-seta:hover { border-color: var(--marca); color: var(--marca-texto); }
.prefiro-busca-seta:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
/* Aberta, a seta aponta para baixo — o mesmo giro do «Meu dia». */
.prefiro-busca-pessoa.aberta .prefiro-busca-seta { transform: rotate(90deg); }

/* --- As ocorrências, quando a linha abre -------------------------------- */
.prefiro-busca-ocorrencia > td { padding: 0 10px 0 0; border: 0; }
.prefiro-busca-ocorrencia:last-child > td { padding-bottom: 6px; }

.prefiro-busca-destino {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  color: var(--texto);
  text-decoration: none;
}
.prefiro-busca-destino:hover { background: var(--superficie-3); }
.prefiro-busca-destino:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }

.prefiro-busca-icone { flex: none; color: var(--texto-3); }
/* O tipo tem largura fixa para que os títulos comecem todos na mesma coluna:
   com "Dossiê" e "Atendimento" soltos, cada linha começava num ponto. */
.prefiro-busca-tipo {
  flex: none;
  width: 92px;
  color: var(--texto-3);
  font-size: var(--texto-legenda);
  letter-spacing: .03em;
}
.prefiro-busca-titulo { font-weight: 600; }
.prefiro-busca-detalhe { color: var(--texto-2); }

.prefiro-busca-aviso { margin: 0 0 10px; }

/* --- "Outros resultados" ------------------------------------------------- */
.prefiro-busca-grupo + .prefiro-busca-grupo { margin-top: 14px; }
.prefiro-busca-grupo h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-size: var(--texto-nota);
  font-weight: 700;
  color: var(--texto-2);
}
.prefiro-busca-grupo h3 a { margin-left: auto; font-weight: 400; }

@media (max-width: 900px) {
  /* Numa tela estreita a coluna de contato é a primeira a sair: o nome e o
     "onde aparece" respondem a pergunta, o CPF só desempata. */
  .prefiro-tabela-busca thead th:nth-child(3),
  .prefiro-busca-contato { display: none; }
  .prefiro-busca-tipo { width: auto; }
}


/* O cartão que conta um problema, e não um número neutro — o fechamento que
   passou do dia combinado. Mesmo tom de aviso da linha sem agente. */
.prefiro-card.prefiro-card-atencao {
  border-color: var(--aviso);
  background: var(--aviso-suave);
}
.prefiro-card.prefiro-card-atencao .prefiro-card-valor,
.prefiro-card.prefiro-card-atencao .prefiro-card-rotulo,
.prefiro-card.prefiro-card-atencao .prefiro-card-nota { color: var(--aviso-texto); }


/* -------------------------------------------------------------------------
   41. Exportar o consolidado

   Os botões ficam no começo da seção, não no fim: a decisão de levar os dados
   embora é tomada ao chegar, e um botão depois de seis gráficos é um botão que
   só quem rola até o fim descobre.

   O `.xlsx` é o principal e o `.csv` é o secundário — os dois com o mesmo peso
   visual ensinariam que são alternativas equivalentes, e não são: um traz o
   consolidado inteiro, o outro traz só o detalhe.
   ------------------------------------------------------------------------- */
.prefiro-consolidado-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.prefiro-consolidado-titulo {
  margin: 0;
  font-size: var(--texto-titulo-bloco, 1.05rem);
  font-weight: 700;
}
.prefiro-consolidado-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

#content .prefiro-consolidado-acoes .button.prefiro-botao-fraco {
  background: var(--superficie-2);
  border: 1px solid var(--linha);
}
#content .prefiro-consolidado-acoes a.button.prefiro-botao-fraco:link,
#content .prefiro-consolidado-acoes a.button.prefiro-botao-fraco:visited {
  color: var(--texto-2);
}
#content .prefiro-consolidado-acoes .button.prefiro-botao-fraco:hover {
  background: var(--superficie-3);
  color: var(--texto);
}


/* -------------------------------------------------------------------------
   42. Os itens da cotação: um bloco por item, e as somas no fim

   A calculadora desceu da opção para o item. Cada item vira um bloco com só os
   campos do seu tipo — e a opção passa a mostrar a soma deles, que é o número
   que vai ao cliente.
   ------------------------------------------------------------------------- */

/* A barra que acrescenta um item já do tipo escolhido. Fica antes do
   "adicionar" do Django, não no lugar dele. */
.prefiro-tipos-de-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 4px;
}
.prefiro-tipos-rotulo {
  font-size: var(--texto-nota);
  color: var(--texto-2);
  font-weight: 700;
  margin-right: 4px;
}
/* A cor do texto **junto** com a do fundo, sempre.
   Escrito só o fundo, o `color: #fff` que o `.button` do tema traz para o
   botão vermelho continuava valendo: dez botões de texto branco sobre fundo
   quase branco, 1,04:1. E `a.button:link` não os alcançava, porque estes são
   `<button>` e não `<a>`. Medido na tela. */
#content .prefiro-tipos-de-item .button.prefiro-botao-fraco {
  background: var(--superficie);
  border: 1px solid var(--linha);
  color: var(--texto);
  padding: 5px 11px;
  font-size: var(--texto-nota);
  font-weight: 600;
}
#content .prefiro-tipos-de-item .button.prefiro-botao-fraco:hover {
  background: var(--marca-suave);
  border-color: var(--marca-clara);
  color: var(--marca-texto);
}

/* -------------------------------------------------------------------------
   43. Um item, um bloco — e dá para ver onde um acaba e o outro começa

   *"A separação entre os itens da cotação não está clara, pois está parecendo
   que tudo pertence ao mesmo formulário. Deve haver distinção de cores entre
   os itens."*

   Ele está certo, e é o mesmo princípio da zebra das listagens: contraste não
   é só entre letra e fundo, é entre **coisas que precisam ser distinguidas**.
   Um inline empilhado do Django desenha os blocos colados, com a mesma cor, e
   quatro itens viram um formulário de cem campos.

   Três marcas, e as três de graça:
   - o bloco ganha borda, cantos e sombra própria — ele é um cartão;
   - os ímpares e os pares alternam o fundo, como a zebra da tabela;
   - o cabeçalho de cada item ganha um traço grosso à esquerda, que é onde o
     olho pousa quando percorre a coluna.
   ------------------------------------------------------------------------- */
.inline-group .prefiro-itens-cotacao > .inline-related {
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  margin: 14px 12px;
  overflow: hidden;
  background: var(--superficie);
}
/* `--superficie-2` sobre `--superficie` dá 1,02:1 — existe no arquivo e não
   existe no olho. A zebra que se enxerga é a `--superficie-3`, a mesma da
   listagem. */
.inline-group .prefiro-itens-cotacao > .inline-related:nth-of-type(even) {
  background: var(--superficie-3);
}
.inline-group .prefiro-itens-cotacao > .inline-related > h3 {
  border-left: 4px solid var(--marca-clara);
  background: var(--superficie-3);
  color: var(--texto);
  font-size: var(--texto-corpo);
  font-weight: 700;
}
/* O item marcado para sair precisa parecer que vai sair. */
.inline-group .prefiro-itens-cotacao > .inline-related.prefiro-vai-sair {
  opacity: .55;
  border-color: var(--erro-linha);
}

/* Os blocos internos do item (voo, custo, pagamento) são subdivisões dele, e
   não itens irmãos: separador fino, sem cartão dentro de cartão. */
.inline-group .prefiro-itens-cotacao .inline-related fieldset.module > h2 {
  background: transparent;
  color: var(--texto-2);
  font-size: var(--texto-nota);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
  border-top: 1px solid var(--linha);
  border-bottom: 0;
  padding: 12px 20px 2px;
}
.inline-group .prefiro-itens-cotacao .inline-related fieldset.module:first-of-type > h2 {
  border-top: 0;
}

/* O tipo do item no cabeçalho do bloco: numa opção com quatro itens, é a
   diferença entre procurar e achar. */
.prefiro-item-tipo { font-weight: 400; color: var(--texto-2); }

/* As somas, no fim. Duas colunas: o rótulo e o número, alinhado à direita
   porque a leitura é de comparação — custo contra venda. */
.prefiro-somas-da-opcao { border-collapse: collapse; }
.prefiro-somas-da-opcao th {
  text-align: left;
  font-weight: 400;
  color: var(--texto-2);
  padding: 3px 18px 3px 0;
}
.prefiro-somas-da-opcao td {
  text-align: right;
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
}
.prefiro-somas-da-opcao .prefiro-soma-sobra th,
.prefiro-somas-da-opcao .prefiro-soma-sobra td {
  border-top: 1px solid var(--linha);
  padding-top: 6px;
}

.prefiro-itens-da-opcao td,
.prefiro-itens-da-opcao th { font-variant-numeric: tabular-nums; }
.prefiro-itens-da-opcao td:not(:first-child) { text-align: right; }

/* Campo escondido pelo tipo do item some de verdade — inclusive a caixa que o
   admin desenha em volta quando dois campos dividem a linha. */
/* `fieldset.module.aligned` é `display: grid`, e uma regra de classe vence o
   `[hidden] { display: none }` que o navegador traz. Resultado: o bloco "Como é
   o voo" continuava na tela de uma hospedagem mesmo com `hidden` marcado — o JS
   fazia a parte dele e o CSS desfazia. Apanhado pelo Victor, na segunda vez.

   Vale para os três: linha, caixa de campo e bloco inteiro. */
.inline-related .form-row[hidden],
.inline-related .fieldBox[hidden],
.inline-related fieldset[hidden],
fieldset.module[hidden] { display: none !important; }

/* A margem do item, ao lado do lucro: o percentual é o que se compara entre
   itens, e o valor sozinho não deixa ver que o aéreo sobra 5% e o hotel 15%. */
.prefiro-margem-do-item { color: var(--texto-2); font-weight: 400; }


/* O "|" entre "Hoje" e o calendário ficava em 1,61:1. Ou se lê, ou se apaga —
   um risco que quase não aparece só suja a linha. */
.datetimeshortcuts { color: var(--texto-3); }

/* O "+ Nova opção" fica acima da tabela, junto da explicação: criar a opção é
   o primeiro gesto de quem monta a cotação, não uma nota de rodapé. */
#content .prefiro-inline-descricao .button.prefiro-nova-opcao {
  float: right;
  margin: -2px 0 8px 12px;
}

/* O percurso, lido de relance: uma linha por sentido. */
.prefiro-trechos {
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
  margin-bottom: 8px;
}
.prefiro-trechos > div { color: var(--texto); }

/* Inline em que a linha não se cria aqui: o "Adicionar outro(a)" que o
   `inlines.js` do Django desenha sozinho some, porque o caminho é outro — o
   botão que cria e já abre a calculadora. Link que existe e não funciona ensina
   que o sistema é quebrado. */
.inline-group:has(.prefiro-sem-adicionar) .add-row { display: none !important; }

/* O "+ Nova opção" saiu do parágrafo de dica: o interruptor "sem dicas" apagava
   o parágrafo e levava o único caminho para criar uma opção junto. O botão é
   caminho, não dica — fica sempre à vista. */
.prefiro-inline-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 12px 0 -4px;
}
#content .prefiro-inline-descricao .button.prefiro-nova-opcao { float: none; margin: 0; }

/* A caixa de taxas no modo "pelos aeroportos": é resultado, não se digita. */
input.prefiro-calculado[readonly] {
  background: var(--superficie-2);
  color: var(--texto-2);
}
.prefiro-memoria-das-taxas { display: inline-block; margin-top: 6px; }

/* As ações de cada etiqueta, na própria linha da listagem. */
.prefiro-acoes-da-linha { display: flex; flex-wrap: wrap; gap: 6px; }
.prefiro-acoes-da-linha form { display: inline; margin: 0; }
.prefiro-acoes-da-linha .button { padding: 3px 10px; font-size: .8rem; }
.prefiro-botao-perigo { color: var(--erro-texto) !important; }

/* O texto do contrato é o documento inteiro: edita-se com espaço de documento. */
textarea.prefiro-texto-longo {
  width: 100%;
  max-width: 100%;
  min-height: 60vh;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
  line-height: 1.55;
  box-sizing: border-box;
}
.form-row.field-clausulas > div,
.form-row.field-clausulas .flex-container { display: block; width: 100%; }

/* As ações que gravam viraram botões POST (06 D07, decisão D5) — criar a
   cotação, gerar e concluir o dossiê. Um `<button>` não herda a fonte nem o
   cursor da página como o `<a>` herdava; sem isto o botão de avançar sairia na
   fonte do sistema, destoando do "Voltar" ao lado. */
button.prefiro-etapa-avancar,
button.prefiro-etapa-acao {
  font-family: inherit;
  cursor: pointer;
}


/* -------------------------------------------------------------------------
   36. As três telas de erro: 404, 403 e 500
   -------------------------------------------------------------------------
   Achado 03 M8. Não havia `404.html`, `403.html` nem `500.html`: com DEBUG
   ligado o CRM mostrava a página técnica do Django, em inglês, com o caminho
   do arquivo e a lista de rotas; em produção, um parágrafo cru sem marca e sem
   nenhum caminho de volta.

   As três páginas são AUTOCONTIDAS de propósito — não estendem o esqueleto do
   admin. A página que existe para quando alguma coisa deu errado não pode
   depender da máquina que pode ser justamente o que deu errado: o 500 é
   renderizado pelo Django sem contexto nenhum e, dependendo da falha, sem
   banco. Um 404 que levanta exceção vira um 500, e aí não sobra nada para
   mostrar a ninguém.

   O que elas usam é só isto: os tokens desta folha, para parecerem o CRM.
   ------------------------------------------------------------------------- */
.prefiro-erro-pagina {
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-5);
  box-sizing: border-box;
}
.prefiro-erro {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  max-width: 560px;
  padding: var(--espaco-6) var(--espaco-5);
  text-align: center;
}
/* A marca fica pequena e acima do assunto: quem chega aqui quer saber o que
   houve, não de quem é o sistema. */
.prefiro-erro-marca {
  color: var(--texto-3);
  font-size: var(--texto-legenda);
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 var(--espaco-4);
  text-transform: none;
}
.prefiro-erro h1 {
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 var(--espaco-3);
}
.prefiro-erro p {
  color: var(--texto-2);
  font-size: var(--texto-corpo-sm);
  line-height: 1.6;
  margin: 0 0 var(--espaco-3);
}
.prefiro-erro p:last-of-type { margin-bottom: var(--espaco-5); }
/* Sem botões — o 404 que o cliente vê — o respiro de baixo vira buraco. */
.prefiro-erro p:last-child { margin-bottom: 0; }
.prefiro-erro-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  justify-content: center;
}
/* Um botão cheio por região, como manda o sistema: "ir para o painel" é a
   saída; as outras são alternativas, não concorrentes. */
.prefiro-erro-acoes a {
  border: 1px solid var(--linha-campo);
  border-radius: var(--r-sm);
  color: var(--texto);
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--espaco-4);
  text-decoration: none;
}
.prefiro-erro-acoes a:hover { background: var(--superficie-3); color: var(--texto); text-decoration: none; }
.prefiro-erro-acoes a.principal {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}
.prefiro-erro-acoes a.principal:hover { background: var(--marca-forte); border-color: var(--marca-forte); color: #fff; }
.prefiro-erro-acoes a:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }


/* -------------------------------------------------------------------------
   37. Painel: o que estava escrito dentro do HTML
   -------------------------------------------------------------------------
   Achado 03 M2. O painel carregava 21 atributos `style=""`. Eles não estão
   errados por serem feios: estão errados porque são invisíveis para quem lê a
   folha de estilo, e porque cada um é uma decisão de desenho que ninguém
   conseguiria encontrar depois — inclusive o `font-size` que fazia o texto
   "últimos 8 meses" caber no lugar de um número.

   Sobraram três, e os três são dado: a cor de cada fatia da rosca e a largura
   de cada barra do ranking vêm do banco, não do desenho. Esses têm de ser
   inline mesmo.
   ------------------------------------------------------------------------- */
.prefiro-legenda-cor-1 { background: var(--gr-1); }
.prefiro-legenda-cor-2 { background: var(--gr-2); }

.prefiro-tabela-painel .prefiro-col-avatar { width: 34px; }
.prefiro-tabela-painel .prefiro-col-barra { width: 38%; }

/* Nota que fecha um bloco: sem margem embaixo, senão sobra um degrau dentro
   do cartão. */
.prefiro-nota-colada { margin: 0; }
/* Subtítulo de um agrupamento dentro do bloco ("Hoje", "Próximos 7 dias"). */
.prefiro-nota-grupo { margin: 0 0 var(--espaco-2); }
.prefiro-nota-grupo-seguinte { margin-top: var(--espaco-4); }

/* Estado vazio das listagens (03 A3). Centralizado e com folga: é a tela
   inteira dizendo uma coisa só, e não uma linha perdida no rodapé. */
.prefiro-vazio {
  margin: 24px 0;
  padding: 40px 24px;
  text-align: center;
  background: var(--superficie);
  border: 1px dashed var(--linha-forte);
  border-radius: 12px;
  color: var(--texto-2);
}
.prefiro-vazio-titulo {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--texto);
}
.prefiro-vazio-texto {
  margin: 0 0 16px;
}


/* =========================================================================
   Onda 2 — fluxos do dia (teclado, toque, celular)

   Tudo o que a frente de fluxos acrescentou mora daqui para baixo, em blocos
   pelo achado que o originou. Só tokens: nenhuma cor, raio ou tamanho novo.
   ========================================================================= */

/* Texto para leitor de tela: fora da vista, dentro da árvore de
   acessibilidade. `display: none` e `visibility: hidden` tirariam das duas. */
.prefiro-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 03 C1: funil sem arrasto ------------------------------------------- */

/* O cartão inteiro acende quando o foco está em qualquer ponto dele. O anel
   do link sozinho marca só o nome; quem usa Alt + seta precisa ver qual
   *cartão* vai andar. */
.prefiro-cartao:focus-within {
  border-color: var(--foco);
  box-shadow: 0 0 0 1px var(--foco), var(--sombra-2);
}

.prefiro-cartao-mover {
  align-self: flex-start;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--linha-campo);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto-2);
  font: inherit;
  font-size: var(--texto-legenda);
  font-weight: 600;
  cursor: pointer;
}
.prefiro-cartao-mover:hover { background: var(--superficie-2); color: var(--texto); }
.prefiro-cartao-mover[aria-expanded="true"] { background: var(--superficie-3); color: var(--texto); }

.prefiro-mover-menu {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  padding: var(--espaco-1);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-sm);
  background: var(--superficie-2);
}
.prefiro-mover-opcao {
  min-height: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: var(--texto-nota);
  text-align: left;
  cursor: pointer;
}
.prefiro-mover-opcao:hover { background: var(--marca-suave); }
.prefiro-mover-opcao[disabled] {
  background: transparent;
  color: var(--texto-2);
  cursor: default;
}

/* Dedo não é cursor: no toque, alvo de 44px (WCAG 2.5.5, e o que Apple e
   Google recomendam). No mouse, o botão fica discreto para não pesar em
   quarenta cartões por coluna. */
@media (pointer: coarse) {
  .prefiro-cartao-mover,
  .prefiro-mover-opcao { min-height: 44px; }
}

/* --- 03 C2: alteração não salva ----------------------------------------- */

/* A marca aparece ao lado do "Salvar", nas duas barras. Cor de aviso, e não de
   erro: nada deu errado ainda. */
.prefiro-pendente {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: 4px 10px;
  border-radius: var(--r-cheio);
  background: var(--aviso-suave);
  color: var(--aviso-texto);
  font-size: var(--texto-legenda);
  font-weight: 600;
}
.prefiro-pendente[hidden] { display: none; }
.prefiro-pendente kbd,
.prefiro-resumo-previa kbd {
  font: inherit;
  font-weight: 700;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 4px;
}

/* --- 03 C2: calculadora da opção em duas colunas ------------------------ */

/* Formulário à esquerda, resumo parado à direita. O resumo tem 248px: cabe
   "R$ 125.000,00" (94px) ao lado do rótulo mais longo em duas linhas, e tira
   da coluna do formulário o mínimo que dá. Medido a 1366 com o menu aberto,
   o formulário fica com ~790px — os blocos de item, que são empilhados, não
   perdem campo; a grade de quatro colunas passa a três. */
.prefiro-calculadora-duas-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: var(--espaco-5);
  align-items: start;
}
.prefiro-calculadora-formulario { min-width: 0; }

.prefiro-resumo-da-opcao {
  position: sticky;
  top: var(--espaco-4);
  /* O resumo nunca pode ser mais alto que a janela: se fosse, a parte de
     baixo ficaria inalcançável justamente por estar fixa. Rola por dentro. */
  max-height: calc(100vh - 2 * var(--espaco-4));
  overflow-y: auto;
  padding: var(--espaco-4);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
}
.prefiro-resumo-titulo {
  margin: 0 0 var(--espaco-3);
  font-size: var(--texto-titulo);
}
.prefiro-resumo-numeros { margin: 0; }
.prefiro-resumo-numeros > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espaco-2);
  padding: 6px 0;
  border-top: 1px solid var(--linha);
}
.prefiro-resumo-numeros > div:first-child { border-top: 0; }
.prefiro-resumo-numeros dt {
  color: var(--texto-2);
  font-size: var(--texto-nota);
}
.prefiro-resumo-numeros dd {
  margin: 0;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
/* Lucro e margem são a pergunta da tela: maiores, e com a cor do resultado. */
.prefiro-resumo-sobra dd { font-size: var(--texto-titulo); color: var(--ok-texto); }
.prefiro-resumo-sobra.negativo dd { color: var(--erro-texto); }

.prefiro-resumo-previa {
  margin: var(--espaco-2) 0 0;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--aviso-suave);
  color: var(--aviso-texto);
  font-size: var(--texto-legenda);
}
.prefiro-resumo-previa[hidden] { display: none; }

.prefiro-resumo-subtitulo {
  margin: var(--espaco-4) 0 var(--espaco-2);
  font-size: var(--texto-legenda);
  font-weight: 650;
  color: var(--texto-2);
  text-transform: none;
  letter-spacing: .04em;
}
.prefiro-resumo-itens {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--texto-nota);
}
.prefiro-resumo-itens li {
  display: flex;
  justify-content: space-between;
  gap: var(--espaco-2);
  padding: 3px 0;
}
.prefiro-resumo-itens a { min-width: 0; overflow-wrap: break-word; }
.prefiro-resumo-itens span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.prefiro-resumo-itens .positivo { color: var(--ok-texto); }
.prefiro-resumo-itens .negativo { color: var(--erro-texto); }

/* Abaixo de 1200px não sobra largura para as duas colunas sem apertar os
   blocos de item. O resumo sobe para o topo, em linha, e deixa de ser fixo —
   fixo no topo de uma tela baixa, ele comeria o formulário. */
@media (max-width: 1199px) {
  .prefiro-calculadora-duas-colunas { grid-template-columns: minmax(0, 1fr); }
  .prefiro-resumo-da-opcao {
    position: static;
    max-height: none;
    order: -1;
  }
  .prefiro-resumo-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0 var(--espaco-4);
  }
  .prefiro-resumo-numeros > div:first-child { border-top: 1px solid var(--linha); }
}

/* --- 03 A4: paleta Ctrl+K ----------------------------------------------- */

/* O nome do grupo dito ao leitor de tela mora dentro da opção, escondido; a
   opção precisa ser o contêiner dele, ou o recorte vaza para a lista. */
.prefiro-paleta-item { position: relative; }
/* O realce da opção marcada também leva um traço à esquerda: fundo rosado
   sozinho some para quem não distingue bem a cor (1.4.1). */
.prefiro-paleta-item.marcado { box-shadow: inset 3px 0 0 var(--marca); }
/* Quatro atalhos no rodapé não cabem numa linha no celular: quebram. */
.prefiro-paleta-rodape { flex-wrap: wrap; row-gap: var(--espaco-1); }

/* --- 03 A6: celular e tablet -------------------------------------------- */

/* O botão «Menu» só existe onde a lateral não cabe. */
.prefiro-menu-botao { display: none; }
.prefiro-menu-fundo { display: none; }

@media (max-width: 767px) {
  /* Cabeçalho em duas linhas: [Menu] marca … ferramentas / busca inteira.
     O recheio lateral é 16px, o mesmo do conteúdo, para as bordas alinharem. */
  #header { padding: 8px 16px; gap: 8px; }
  #branding { display: flex; align-items: center; gap: var(--espaco-2); flex-wrap: wrap; flex: 1 1 100%; }
  #site-name { font-size: 1.05rem; }

  .prefiro-menu-botao {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-2);
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--linha-campo);
    border-radius: var(--r-sm);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: var(--texto-corpo-sm);
    font-weight: 600;
    cursor: pointer;
  }
  /* Três tracinhos desenhados com sombra: não é ícone de destino, e por isso
     não entra no conjunto de `apps/icones.py`, que é um desenho por destino. */
  .prefiro-menu-botao-tracos {
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }

  /* As ferramentas do usuário ocupam a própria linha e quebram; o avatar
     decorativo sai, e o link «Painel» também — ele está no topo da gaveta. */
  #user-tools {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: var(--texto-nota);
  }
  #user-tools .prefiro-link-painel { display: none; }
  .prefiro-saudacao::before { display: none; }

  /* A gaveta: a mesma lateral, fora da vista até o botão chamar.
     `visibility` junto do `transform` tira os links da ordem do Tab enquanto
     ela está fechada — escondida só de vista, o teclado passaria por 25 links
     invisíveis antes de chegar ao conteúdo. */
  .prefiro-lateral,
  html.prefiro-lateral-fechada .prefiro-lateral {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1500;
    width: min(84vw, 320px);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    flex: none;
    padding: 14px 10px 32px;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .2s ease-out, visibility 0s linear .2s;
    box-shadow: none;
  }
  html.prefiro-menu-aberto .prefiro-lateral {
    transform: none;
    visibility: visible;
    transition: transform .2s ease-out, visibility 0s;
    box-shadow: var(--sombra-3);
  }
  html.prefiro-menu-aberto .prefiro-menu-fundo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1499;
    background: rgba(11, 13, 18, .45);
  }
  /* Página parada atrás da gaveta: rolar o menu não pode rolar a cotação. */
  html.prefiro-menu-aberto,
  html.prefiro-menu-aberto body { overflow: hidden; }

  /* O "recolher" é do computador. Na gaveta ele não tem sentido, e a
     preferência gravada no computador não pode virar uma gaveta só de ícones. */
  .prefiro-lateral-recolher { display: none; }
  html.prefiro-lateral-fechada .prefiro-lateral .prefiro-lateral-rotulo,
  html.prefiro-lateral-fechada .prefiro-lateral summary span:not(.prefiro-lateral-icone) {
    display: inline;
  }
  html.prefiro-lateral-fechada .prefiro-lateral-grupo > summary {
    justify-content: space-between;
    padding: 12px 12px 7px;
    font-size: var(--texto-micro);
  }
  html.prefiro-lateral-fechada .prefiro-lateral a { justify-content: flex-start; padding: 9px 12px; }

  /* Alvo de toque: 44px nos itens da gaveta e nos grupos. */
  .prefiro-lateral-item { min-height: 44px; box-sizing: border-box; }
  .prefiro-lateral-grupo > summary { min-height: 40px; box-sizing: border-box; }

  /* Conteúdo com o mesmo recheio de 16px do cabeçalho. */
  #content { --recheio-lateral: 16px; padding: 14px 16px 40px; }
  /* Uma coluna só: os `span 2`/`span 3` do formulário criavam colunas
     implícitas ao lado, e o campo seguinte ia para uma faixa estreita à
     direita. O id no seletor vence os `:has()` sem `!important`. */
  #content fieldset.module.aligned > .form-row { grid-column: 1 / -1; }
  /* O `responsive.css` do admin dá ao campo `calc(100vw - 30px)`, contando
     15px de recheio; aqui o campo mora num cartão e passava 3px da tela. */
  .aligned .form-row > div { width: auto; max-width: 100%; }

  /* Funil: uma coluna quase do tamanho da tela, parando na borda de cada uma.
     Deslizar de lado passa de etapa; o botão «Mover» faz o resto (03 C1). */
  .prefiro-kanban { overflow-x: auto; scroll-snap-type: x mandatory; }
  .prefiro-coluna { flex: 0 0 min(86vw, 320px); max-height: none; }

  /* Os botões do «Meu dia» tinham ~25px: passam no 2.5.8, mas não no dedo. */
  .prefiro-acao { min-height: 40px; padding: 8px 12px; }
  .prefiro-painel-topo { flex-wrap: wrap; gap: var(--espaco-3); }

  /* Barra de salvar: o botão que grava o trabalho é o último lugar para errar
     o toque. */
  .submit-row input[type="submit"] { min-height: 44px; }
}

/* ===================================================================== */
/* Mensagens prontas para o WhatsApp (onda 3)                            */
/* ===================================================================== */
/* A caixa da mensagem é um `textarea` de propósito: `prefiro_tela.js` não
   reescreve o texto dela em caixa alta, e a mensagem vai ao cliente com
   acento e emoji. A fonte é a do sistema, e não monoespaçada: o texto é
   conversa, e é assim que ele vai aparecer no celular. */
.prefiro-mensagem { margin-bottom: var(--espaco-3); }
.prefiro-mensagem-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  flex-wrap: wrap;
}
.prefiro-mensagem-topo h3 { margin: 0; font-size: var(--texto-titulo); }
.prefiro-mensagem-texto {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--espaco-2);
  padding: var(--espaco-3);
  border: 1px solid var(--linha-campo);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  color: var(--texto);
  font-family: inherit;
  font-size: var(--texto-corpo);
  line-height: 1.5;
  resize: vertical;
  white-space: pre-wrap;
}
.prefiro-mensagem-avisos {
  margin: var(--espaco-2) 0 0;
  padding: var(--espaco-2) var(--espaco-3) var(--espaco-2) var(--espaco-5);
  border-radius: var(--r-md);
  background: var(--aviso-suave);
  color: var(--aviso-texto);
}
.prefiro-mensagem-status { min-height: 1.2em; margin: var(--espaco-1) 0 0; }
.prefiro-mensagens-formulario fieldset { border: 0; margin: 0 0 var(--espaco-3); padding: 0; }
.prefiro-mensagens-formulario legend { font-weight: 650; margin-bottom: var(--espaco-2); }
.prefiro-mensagens-formulario ul { list-style: none; margin: 0; padding: 0; }
.prefiro-mensagens-formulario li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2) var(--espaco-4);
  padding: var(--espaco-2) 0;
  border-bottom: 1px solid var(--linha);
}
.prefiro-mensagens-pix { color: var(--texto-2); font-size: var(--texto-legenda); }
.prefiro-mensagens-pix input { margin-left: var(--espaco-2); }
/* Rótulo que existe para o leitor de tela e não ocupa lugar na tela. */
.prefiro-oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Onda 3 · preço nos dois sentidos. A linha da modalidade do item (a que o
   percentual digitado usa) vai em negrito no quadro das quatro modalidades;
   o botão de aplicar a sugestão da nota cheia fica na mesma linha do texto. */
.prefiro-quadro-das-modalidades tr.prefiro-modalidade-atual > td { font-weight: 700; }
.prefiro-quadro-das-modalidades .prefiro-sugestao-nota-cheia { margin: 6px 0 0; }
.prefiro-quadro-das-modalidades .prefiro-sugestao-nota-cheia .button { margin-left: 6px; }

/* O "?" de cada tela: discreto ao lado das ações, e do tamanho de um alvo de
 * clique de verdade — 28px é o mínimo que se acerta sem mirar. */
/* Com o `#content` e o `:link` porque é contra `#content a:link` que ele
 * disputa, algumas linhas acima: um id ganha de qualquer classe, e sem
 * isto o "?" saía na cor de link, gritando ao lado do "Voltar". */
#content .prefiro-acoes-topo a.prefiro-manual-interrogacao:link,
#content .prefiro-acoes-topo a.prefiro-manual-interrogacao:visited,
#content .object-tools a.prefiro-manual-interrogacao:link,
#content .object-tools a.prefiro-manual-interrogacao:visited {
  align-items: center;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  /* `box-sizing` e `padding` explícitos porque na listagem ele herda o
     `.object-tools a`, que tem folga própria: sem isto o círculo virava uma
     pílula de 59px no meio dos botões. */
  box-sizing: border-box;
  color: var(--texto-2);
  display: inline-flex;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  text-decoration: none;
  width: 28px;
}

/* Na listagem os botões vizinhos têm 38px de altura e o círculo tem 28: sem a
   folga ele fica encostado no topo da fileira. Cinco de cada lado é metade da
   diferença — medido na tela de cotações, não arbitrado. */
#content .object-tools a.prefiro-manual-interrogacao { margin: 5px 0; }

#content .prefiro-acoes-topo a.prefiro-manual-interrogacao:hover,
#content .object-tools a.prefiro-manual-interrogacao:hover {
  background: var(--superficie-3);
  color: var(--texto);
}

/* --- Cores dos grupos do menu (DEBUG 26/09, item 1) ----------------------
   A cor mora no título e no ícone do grupo; os subitens continuam cinza,
   como foi pedido. Com o menu recolhido, só o ícone aparece — e é ele que
   leva a cor, que passa a ser a pista principal de onde cada coisa está. */
.prefiro-lateral-grupo--comercial { --cor-do-grupo: var(--grupo-comercial); }
.prefiro-lateral-grupo--operacao { --cor-do-grupo: var(--grupo-operacao); }
.prefiro-lateral-grupo--financeiro { --cor-do-grupo: var(--grupo-financeiro); }
.prefiro-lateral-grupo--clientes { --cor-do-grupo: var(--grupo-clientes); }
.prefiro-lateral-grupo--gestao { --cor-do-grupo: var(--grupo-gestao); }
.prefiro-lateral-grupo--configuracao { --cor-do-grupo: var(--grupo-configuracao); }
.prefiro-lateral-grupo--equipe { --cor-do-grupo: var(--grupo-equipe); }

.prefiro-lateral-grupo > summary,
.prefiro-lateral-grupo > summary:hover,
html.prefiro-lateral-fechada .prefiro-lateral-grupo > summary .prefiro-lateral-icone,
html.prefiro-lateral-fechada .prefiro-lateral-grupo[open] > summary .prefiro-lateral-icone {
  color: var(--cor-do-grupo, var(--lateral-texto-fraco));
}
.prefiro-lateral-grupo > summary .prefiro-lateral-icone { opacity: 1; }
.prefiro-lateral-grupo > summary:hover .prefiro-lateral-rotulo { text-decoration: underline; text-underline-offset: 3px; }

/* O Painel é item principal sem grupo: leva a própria cor, menos quando é a
   tela aberta — aí vale o destaque de "você está aqui", igual aos outros. */
.prefiro-lateral-solto .prefiro-lateral-item:not(.atual),
.prefiro-lateral-solto .prefiro-lateral-item:not(.atual) .prefiro-lateral-icone {
  color: var(--grupo-painel);
}

/* --- Período de cada cartão do «Resultado do mês» (DEBUG 26/09, item 3) ---
   O seletor fica no pé do cartão, discreto: o número continua sendo o que se
   lê primeiro. O "Aplicar" só aparece quando serve — sem JavaScript, ou com as
   datas do período personalizado abertas. */
.prefiro-card-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.prefiro-card-periodo select,
.prefiro-card-periodo input[type="date"] {
  font-size: var(--texto-legenda);
  padding: 2px 6px;
  min-height: 0;
  height: 26px;
  max-width: 100%;
}
.prefiro-card-datas { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.prefiro-card-datas[hidden] { display: none; }
.prefiro-com-js .prefiro-card-periodo:not(.com-datas) .prefiro-card-aplicar { display: none; }
.prefiro-card-intervalo { font-size: var(--texto-legenda); color: var(--texto-3); }
#prefiro-resultado-mes.ocupado .prefiro-kpis { opacity: .55; transition: opacity .15s ease; }

/* --- Captura de opções (onda 4) -------------------------------------------
   A caixa de colar tem de parecer o que é: um lugar onde se solta alguma
   coisa. Sem isto ela era uma frase solta na tela, e ninguém sabia que dava
   para colar ali. */
.prefiro-captura-alvo {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 170px;
  margin: 16px 0 10px;
  padding: 24px;
  border: 2px dashed var(--linha-forte, var(--linha));
  border-radius: var(--r-md);
  background: var(--superficie);
  color: var(--texto-2);
  text-align: center;
  cursor: text;
  caret-color: transparent;
  transition: border-color .15s ease, background-color .15s ease;
}
.prefiro-captura-alvo strong { color: var(--texto); font-size: 1.05rem; }
.prefiro-captura-alvo-icone { font-size: 2rem; line-height: 1; color: var(--marca-texto); }
.prefiro-captura-alvo:hover { border-color: var(--marca); }
.prefiro-captura-alvo:focus,
.prefiro-captura-alvo:focus-visible {
  outline: none;
  border-style: solid;
  border-color: var(--marca);
  background: var(--superficie-3);
}
.prefiro-captura-alvo.lendo { border-style: solid; border-color: var(--ok, var(--marca)); opacity: .8; }
.prefiro-captura-botoes { margin: 0 0 6px; text-align: center; }
#prefiro-captura-botao { font-size: 1rem; padding: 10px 22px; min-height: 42px; }
.prefiro-captura-recado:not(:empty) { color: var(--erro-texto); font-weight: 600; }
.prefiro-captura-ofertas input[type="checkbox"] { width: 18px; height: 18px; }
.prefiro-captura-aviso { color: var(--aviso-texto, var(--texto-2)); }
.prefiro-captura-coberturas { margin: 4px 0; font-size: 0.92em; }
.prefiro-captura-coberturas summary { cursor: pointer; color: var(--texto-2); }
.prefiro-captura-coberturas ul { margin: 4px 0 0; padding-left: 18px; max-height: 240px; overflow-y: auto; }

/* --- A gaveta lateral do funil (05/10/2026) ------------------------------
   O resumo do negócio à direita, por cima do quadro, sem sair dele (inspirada
   no AgentePro). Larga o bastante para ler a observação sem quebrar a cada
   palavra; no celular, a tela inteira. */
.prefiro-gaveta-fundo {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(16, 18, 24, .28);
}
.prefiro-gaveta {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  width: min(440px, 100vw);
  box-sizing: border-box;
  overflow-y: auto;
  background: var(--superficie);
  border-left: 1px solid var(--linha);
  box-shadow: var(--sombra-3);
  padding: 18px 20px 28px;
  display: grid;
  align-content: start;
  gap: 14px;
}
.prefiro-gaveta:focus { outline: none; }
.prefiro-gaveta[hidden], .prefiro-gaveta-fundo[hidden] { display: none; }
html.prefiro-gaveta-aberta body { overflow: hidden; }
.prefiro-gaveta-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.prefiro-gaveta-topo h2 { margin: 2px 0 0; font-size: 1.1rem; }
.prefiro-gaveta-codigo { color: var(--texto-3); font-size: var(--texto-legenda); }
.prefiro-gaveta-fechar {
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--texto-2);
  border-radius: var(--r-sm);
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.prefiro-gaveta-fechar:hover { background: var(--superficie-3); color: var(--texto); }
.prefiro-gaveta-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.prefiro-gaveta-dados {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: var(--texto-corpo-sm);
}
.prefiro-gaveta-dados dt { color: var(--texto-3); }
.prefiro-gaveta-dados dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.prefiro-gaveta-bloco { border-top: 1px solid var(--linha); padding-top: 12px; }
.prefiro-gaveta-bloco h3 { margin: 0 0 6px; font-size: var(--texto-corpo-sm); color: var(--texto-2); }
.prefiro-gaveta-bloco ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; font-size: var(--texto-corpo-sm); }
.prefiro-gaveta-texto { margin: 0; font-size: var(--texto-corpo-sm); white-space: normal; }
.prefiro-gaveta-vazio { margin: 0; color: var(--texto-3); font-size: var(--texto-corpo-sm); }
.prefiro-gaveta-atrasado { color: var(--erro-texto); font-weight: 600; }
@media (max-width: 600px) {
  .prefiro-gaveta-dados { grid-template-columns: 1fr; }
  .prefiro-gaveta-dados dt { margin-top: 4px; }
}

/* --- A bolinha de completude (05/10/2026) --------------------------------
   Ao lado do título do bloco: verde com os obrigatórios preenchidos, âmbar
   quando falta algum. Ver `static/admin/js/prefiro_completude.js`. */
.prefiro-completude {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--ok);
  vertical-align: middle;
}
.prefiro-completude.falta { background: var(--aviso); }

/* --- Data e hora nunca cortadas (06/10/2026) ------------------------------
   "Quase todos os campos para inserção de datas, o texto da data aparece
   cortado." O campo nativo precisa de "dd/mm/aaaa" + o ícone do calendário; num
   bloco apertado ou numa coluna de tabela ele encolhia abaixo disso. A largura
   mínima vai em `em`, e não em px, para acompanhar o tamanho da letra — com a
   escala do Windows e o zoom do Edge também. */
input[type="date"] { min-width: 10em; }
input[type="time"] { min-width: 6.5em; }
input[type="datetime-local"] { min-width: 15em; }

/* --- A faixa de filtros, no alto de verdade (06/10/2026) -----------------
   A seção 29 punha os filtros acima da tabela com `order: -1`, mas o
   `#changelist.filtered` estava em `display: block` — e `order` só vale em
   flex. Os filtros caíam no pé da listagem, e o quadro (`.module`, com
   `overflow: hidden` para arredondar os cantos) cortava o menu aberto: "o
   filtro se torna inútil" (Victor). Em coluna flex, a faixa sobe; com o
   quadro sem corte, o menu abre por cima da tabela. A rolagem lateral da
   tabela continua no próprio contêiner dela, não no quadro. */
#changelist.filtered { display: flex; flex-direction: column; }
#changelist.module { overflow: visible; }
/* O `changelists.css` do Django dá `flex: 0 0 240px` ao filtro (era a largura
   da coluna lateral); em coluna, isso vira 240px de altura. */
#changelist.filtered > #changelist-filter { flex: 0 0 auto; }

/* -------------------------------------------------------------------------
   Caixa da tela (Victor, 06/10/2026): "Clientes todos em caixa alta, o
   restante dos textos devem ser em caixa baixa com primeira letra maiúscula."
   O dado de cliente já vem gravado em maiúscula; nenhum rótulo, cabeçalho de
   coluna, título de bloco ou botão é pintado em maiúscula — nem os do próprio
   Django (cabeçalho de tabela, título de módulo, filtro, botão "Histórico").
   ------------------------------------------------------------------------- */
body :not(input):not(textarea):not(select) { text-transform: none !important; }

/* -------------------------------------------------------------------------
   Permissões do cargo em blocos por área (06/10/2026)
   ------------------------------------------------------------------------- */
.prefiro-sem-rotulo .form-row > div > label,
.prefiro-sem-rotulo .form-row .flex-container > label { display: none; }
.prefiro-sem-rotulo .readonly { margin-left: 0 !important; padding-left: 0; width: 100%; }
.prefiro-areas-de-permissoes { display: grid; gap: 14px; width: 100%; }
.prefiro-grupo-de-permissoes h3 {
  margin: 4px 0 6px; font-size: var(--texto-legenda, .85rem); color: var(--texto-2);
  font-weight: 600; background: none; padding: 0;
}
.prefiro-grupo-de-permissoes { display: grid; gap: 6px; }
details.prefiro-area-de-permissoes {
  border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie);
}
details.prefiro-area-de-permissoes > summary {
  cursor: pointer; padding: 8px 12px; display: flex; gap: 10px; align-items: baseline; list-style: none;
}
details.prefiro-area-de-permissoes > summary::before { content: '▸'; color: var(--texto-3); }
details.prefiro-area-de-permissoes[open] > summary::before { content: '▾'; }
details.prefiro-area-de-permissoes[open] > summary { border-bottom: 1px solid var(--linha); }
.prefiro-permissoes-da-area { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 10px 14px 12px; }
label.prefiro-permissao { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
label.prefiro-permissao.ajustada small { color: var(--texto-3); }

/* E-mail do CRM (06/10/2026) */
.prefiro-email-ok { color: var(--sucesso, #2f855a); }
.prefiro-email-pendente { color: var(--atencao, #b7791f); }
.prefiro-email-como { margin-top: 12px; border: 1px solid var(--linha); border-radius: 8px; padding: 10px 14px; }
.prefiro-email-como ol { padding-left: 1.2em; display: grid; gap: 8px; }
.prefiro-preferencias-nota { margin: 6px 4px 2px; font-size: .8rem; color: var(--texto-2); }

/* «Meu dia»: de quem é o item que não é seu (06/10/2026) */
.prefiro-dia-de { display: inline-block; margin-left: 6px; font-size: var(--texto-micro, .75rem); color: var(--texto-3); }

/* Tabela larga dentro de texto (E-mail do CRM): no celular rola de lado, sem
   alargar a página (verificação geral de 06/10/2026). */
.prefiro-rolagem-lateral { max-width: 100%; overflow-x: auto; }
.prefiro-email-como ol { padding-left: 1.1em; }
.prefiro-email-como ol li { min-width: 0; }


/* «Versão de celular» no cabeçalho (18/10/2026): só em tela estreita, onde o
   CRM completo é a tela da mesa espremida. Destacado como pílula da marca para
   ser achado na primeira visita. */
#user-tools a.prefiro-link-celular { display: none; }
@media (max-width: 767px) {
  #user-tools a.prefiro-link-celular {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
    border-radius: 999px; background: var(--marca); color: #fff; font-weight: 600;
    text-decoration: none; border: 0;
  }
}

/* O login no celular (18/10/2026): é a primeira tela do app instalado. Campos
   e botão com 48px para o dedo, a caixa ocupando a largura, sem as faixas
   vazias do layout de mesa. */
@media (max-width: 767px) {
  body.login { padding: 0; }
  body.login #container { width: auto; max-width: none; min-height: 100vh; min-height: 100dvh; margin: 0;
    border-radius: 0; box-shadow: none; }
  body.login #content { padding: 20px 16px 32px; }
  body.login .form-row { padding: 0 0 14px; }
  body.login .form-row label { display: block; margin-bottom: 6px; font-weight: 600; }
  body.login .form-row input { width: 100%; min-height: 48px; font-size: 16px; padding: 10px 12px; box-sizing: border-box; }
  body.login .submit-row { padding: 8px 0 0; margin: 0; background: none; border: 0; box-shadow: none; }
  body.login .submit-row input[type="submit"] { width: 100%; min-height: 48px; font-size: 16px; margin: 0; }
}