/* ===================================================================
   A RÉGUA DO PAINEL — tokens (25/08)
   -------------------------------------------------------------------
   O painel é IRMÃO do aplicativo, não outro produto: o verde #0E7C4F segue
   sendo o ACENTO ÚNICO e o botão segue sólido com texto branco. O que mudou
   aqui não é a paleta — é a RÉGUA.

   Antes deste bloco o painel tinha 22 tamanhos de fonte diferentes (211 deles
   cravados no meio das telas), 20 valores de espaçamento sem escala e 11 tons
   de verde inventados em rgba(). Isso não é falta de gosto: é falta de escala.
   Cada tela nova nascia um pouco diferente da anterior porque não havia de onde
   copiar o valor certo.

   A direção é "o livro-caixa": a SincRota existe para DUAS COLUNAS FECHAREM.
   Por isso o NÚMERO é a assinatura — dinheiro tem fonte, peso e alinhamento
   próprios, e é a coisa mais bem-desenhada da tela. É identidade e é função:
   coluna de dinheiro alinha como num livro-caixa.
   =================================================================== */

/* A fonte da marca. HOSPEDADA POR NÓS (ver main.py): o IP de quem trabalha na
   empresa não vai para um terceiro, e uma tela que lida com dinheiro não fica
   dependendo de servidor de fora. Variável 400–700 num arquivo só, 34 KB.
   `swap` = o texto aparece na hora com a fonte do sistema e troca quando a
   Archivo chega; nunca uma tela em branco esperando fonte. */
@font-face{
  font-family:"Archivo";
  src:url("/estatico/archivo.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---------- a rampa do verde ----------
     Os 11 rgba() improvisados viraram cinco degraus com nome. O 600 é o
     #0E7C4F de sempre — nada mudou de cor, mudou de endereço. */
  --verde-50:#EAF3EE;
  --verde-100:#CFE3D8;
  --verde-300:#7FBFA0;
  --verde:#0E7C4F;            /* 600 — o acento único */
  --verde-700:#0B6440;
  --verde-800:#0A4A32;
  --verde-topo:#0C4A37;       /* topo do gradiente da marca */
  /* ⚠️ O VERDE TEM DOIS PAPÉIS E ELES NÃO SÃO O MESMO TOM.
     `--verde` é o acento de TEXTO e borda: no escuro ele precisa CLAREAR para se separar do
     fundo. `--verde-solido` é o preenchimento ATRÁS DE TEXTO BRANCO (botão, chip ligado,
     selo da marca): esse precisa ser ESCURO o bastante para o branco passar na WCAG.
     Usar um só quebrava o botão no escuro — branco sobre #3FB07A dá 2,73, e o rótulo do
     botão principal ficava difícil de ler. Aqui #0E7C4F dá 5,23 nos dois temas.
     ⛔ A regra do dono não mudou: botão SÓLIDO com TEXTO BRANCO. O que mudou é o tom do
        preenchimento no escuro, não o texto. */
  --verde-solido:#0E7C4F;
  --verde-solido-2:#0B6440;   /* o mesmo, ao passar o mouse / pressionar */
  --verde-claro:#CFE9DD;      /* texto sobre o verde */

  /* ---------- os neutros ----------
     Puxam de leve para o verde em vez de cinza de fábrica. Ninguém percebe;
     todo mundo sente que foi escolhido. */
  --bg:#F5F7F5;               /* o chão */
  /* O MESMO chão com alfa zero. Existe para degradê de esmaecer (a barra fixa do montar):
     `transparent` puro é preto transparente e o Safari desenha a franja acinzentada no
     meio do caminho. Fade tem que ir da cor para ELA MESMA. */
  --bg-0:rgba(245,247,245,0);
  --surface:#FFFFFF;          /* o cartão */
  --surface-2:#FAFBFA;        /* cabeçalho de tabela, recuo dentro do cartão */
  --ink:#12211B;              /* tinta primária */
  --ink-2:#5B6B63;            /* tinta secundária (contraste AA) */
  /* ⚠️ ESTE VALOR É O MÍNIMO QUE PASSA NA WCAG AA (4,69 sobre o chão, 5,05 sobre o cartão).
     A primeira versão era #8A968F e dava 2,85 — eu tinha clareado o rótulo por elegância e
     quebrado a leitura de quem enxerga menos. Não clarear sem medir: a hierarquia entre
     `--ink-2` e `--ink-3` vem do TAMANHO, do PESO e do versalete, não de apagar a cor. */
  --ink-3:#64726B;            /* rótulo, legenda, o que só orienta */
  --hairline:#E4E9E6;         /* divisor e borda de 1px */
  --hairline-2:#EFF2F0;       /* divisor DENTRO de lista densa (mais leve) */
  /* ⭐ A SETA DO SELECT É TOKEN, não desenho cravado no componente (dono, 22/09).
     Ela vive numa data-URI, e data-URI não lê variável CSS — então quem troca de tema é
     ELA, aqui, como qualquer outra cor. Cravada no componente, ficaria com a cor de um
     tema só e sumiria no outro. A cor é a do `--ink-3` de cada tema. */
  --seta-select:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2364726B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ---------- estados do ciclo (CoresStatus do app) ----------
     Cor de estado SIGNIFICA. Nunca decora. */
  --feito:#2E9E5B;            /* acerto feito */
  --feito-50:#E8F5ED;
  /* A TINTA da etiqueta sobre o tom 50. O `--feito` puro dava 3,04 sobre o próprio fundo
     claro — a etiqueta "No pano" era bonita e mal legível, e isso é anterior à régua. */
  --feito-ink:#1B6E3C;
  --avencer:#E08A1E;          /* a vencer / falta marcar */
  --avencer-ink:#8A5104;      /* o mesmo âmbar, legível como texto */
  --avencer-50:#FBF3E6;
  --ficha:#7E57C2;            /* ficha de cobrança */
  --ficha-50:#F0EBF9;
  --ficha-ink:#6F45B8;        /* mesma história: o roxo puro dava 4,46 sobre o tom 50 */
  --proximo:#6E6E73;          /* ciclo à frente */
  --divida:#A8403A;           /* dívida — tijolo calmo, NÃO o alarme */
  --perda:#7E22CE;            /* perda por golpe — série do gráfico e status de pano */
  /* Série de gráfico que não é estado do ciclo (compras de estoque). Fica aqui para
     sobreviver ao modo escuro — cravada em hexadecimal ela virava azul-marinho sobre
     fundo escuro. O tom CLARO é o que já rodava; só o escuro é novo. */
  --serie-compras:#2563EB;
  /* A faixa de pendência (dados fiscais). Âmbar quente, não vermelho: é pendência, não erro. */
  --aviso-bg:#FFF7ED; --aviso-borda:#FDBA74; --aviso-ink:#7C2D12;
  --divida-50:#F9EDEC;
  --erro:#D93025;

  /* ---------- a paleta do MAPA ----------
     🔴 ESTES QUATRO NÃO SEGUEM O TEMA, e é de propósito. Os ladrilhos do OpenStreetMap são
     SEMPRE claros — no modo escuro, o JS lia os tokens CLAREADOS (que existem para
     contrastar com o fundo escuro do painel) e pintava a pastilha do número de verde-claro
     com texto branco em cima: 2,38 a 3,25 de contraste, contra os 4,5 que este projeto
     exige. Medido na auditoria de 23/09, nos quatro representantes.
     Os valores são os que passam com BRANCO por cima, no claro e no escuro, porque o fundo
     deles é o ladrilho e não o painel. E o `--avencer` de tela (#E08A1E) reprovava até no
     claro (2,68) — por isso aqui ele é o tom de TINTA. */
  --mapa-1:#0E7C4F;   /* 5,23 */
  --mapa-2:#6F45B8;   /* 5,62 */
  --mapa-3:#2563EB;   /* 5,17 */
  --mapa-4:#8A5104;   /* 6,90 */
  --mapa-alerta:#A8403A;  /* 6,07 — a parada que vendeu e não pagou */

  /* ---------- tipografia ----------
     Sete degraus resolvem tudo o que o painel precisa dizer. Os 22 tamanhos
     soltos vêm todos para cá. */
  --fonte:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --fonte-marca:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fonte-cod:ui-monospace,Menlo,Consolas,monospace;

  --t-display:30px;   /* o número grande — dinheiro em bloco de destaque */
  --t-titulo:24px;    /* título da página */
  --t-secao:16px;     /* cabeça de cartão, título de seção */
  --t-corpo:14.5px;   /* o texto das listas e tabelas */
  --t-base:15px;      /* formulário e texto corrido */
  --t-apoio:12.5px;   /* subtítulo, legenda */
  --t-rotulo:11px;    /* VERSALETE espaçado: coluna, rótulo de bloco */

  /* ---------- espaço ----------
     Oito valores. É o que impede a próxima tela de nascer torta. */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px;
  --e5:20px; --e6:24px; --e7:32px; --e8:48px;

  /* ---------- forma ---------- */
  --r-p:8px;          /* pequeno: etiqueta, código */
  --r-m:12px;         /* médio: botão, campo */
  --r-g:16px;         /* grande: cartão, bloco de número */
  --r-full:999px;

  /* ---------- profundidade ----------
     O cartão era branco puro sobre cinza, SEM borda e SEM sombra. No celular a
     lista agrupada do iOS funciona assim porque os cantos da tela seguram o
     cartão. Num monitor de 1320px ele some no fundo, e a página passa a
     impressão de que o CSS não carregou. É a mudança que mais muda a percepção.
     Um sopro, não um drop-shadow de 2014. */
  --sombra-1:0 1px 2px rgba(18,33,27,.045);
  --sombra-2:0 1px 2px rgba(18,33,27,.045), 0 4px 14px rgba(18,33,27,.05);
  --sombra-pop:0 10px 34px rgba(18,33,27,.13);
  --sombra-btn:0 1px 2px rgba(10,74,50,.22);

  /* ---------- foco ----------
     Só DUAS telas de 45 definiam anel de foco. Quem usa Tab no escritório ficava
     perdido — e é gente lançando dinheiro. Agora é um token, e vale em tudo. */
  --foco:0 0 0 3px rgba(14,124,79,.20);          /* reserva */
  --foco:0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent);
}

/* ═══════════════ MODO ESCURO (25/08) ═══════════════
   Paleta própria, não inversão burra: o verde clareia para continuar legível sobre
   o escuro, e o chão fica verde-esverdeado bem fundo em vez de cinza morto.

   ⚠️ A REGRA QUE EVITA A TELA ILEGÍVEL: aqui só se REDEFINE token. Nenhuma cor pode
   nascer dentro deste bloco — cor definida só aqui não existe no modo claro, e a
   tela sai com o texto de um tema sobre o fundo do outro. Se você precisar de uma
   cor nova, ela nasce no :root lá em cima e é REDEFINIDA aqui. */
/* ═══════════════ MODO ESCURO — TRÊS ESTADOS (dono 25/08) ═══════════════
   O painel seguia SÓ o tema do aparelho. Agora a pessoa escolhe: claro, escuro, ou seguir o
   sistema. Isso obriga a paleta escura a existir em DOIS lugares, e é aí que mora o defeito
   clássico — a tela com o texto de um tema sobre o fundo do outro:

   1. `@media (prefers-color-scheme: dark)` com `:not([data-theme="light"])` — segue o
      aparelho, MAS a escolha explícita "claro" ganha de um sistema escuro;
   2. `:root[data-theme="dark"]` — a escolha explícita "escuro" ganha de um sistema claro.

   ⚠️ OS DOIS BLOCOS TÊM DE SER IDÊNTICOS. Como o CSS não deixa uma regra valer dentro e fora
   de uma media query ao mesmo tempo, a duplicação é inevitável — então ela é GUARDADA POR
   TESTE (`test_contraste_do_painel.py::test_os_dois_blocos_escuros_sao_identicos`). Editar um
   e esquecer o outro derruba a suíte. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --verde-50:#152A21;
    --verde-100:#1B3A2C;
    --verde-300:#2E7A55;
    --verde:#3FB07A;
    --verde-700:#5FC492;
    --verde-800:#8FD9B4;
    /* ⚠️ NÃO clareia: é o preenchimento atrás do texto BRANCO. Ver o comentário no claro. */
    --verde-solido:#0E7C4F;
    --verde-solido-2:#0B6440;
    --verde-topo:#0C4A37;
    --verde-claro:#CFE9DD;

    --bg:#0E1512;
    --bg-0:rgba(14,21,18,0);
    --surface:#161E1A;
    --surface-2:#1B2420;
    --ink:#E8EFEA;
    --ink-2:#9AAAA1;
    --ink-3:#8A9C92;   /* AA: 5,87 no cartão, 5,49 no recuo (o #6E7F76 dava 3,76) */
    --hairline:#25302B;
    --hairline-2:#1F2925;
    --seta-select:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A9C92' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --feito:#4FBE7B;      --feito-50:#15291D;   --feito-ink:#4FBE7B;
    --avencer:#D79A3C;    --avencer-ink:#E0AC5C;  --avencer-50:#2A2113;
    --ficha:#A98BE0;      --ficha-50:#221C33;   --ficha-ink:#A98BE0;
    --proximo:#8A968F;
    --divida:#D4736C;     --divida-50:#2A1917;
    --perda:#B98BEA;
    --serie-compras:#7FA9F0;
    --aviso-bg:#2A1A0C; --aviso-borda:#7C4A1D; --aviso-ink:#FED7AA;
    --erro:#F0645A;

    --sombra-1:0 1px 2px rgba(0,0,0,.35);
    --sombra-2:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.30);
    --sombra-pop:0 10px 34px rgba(0,0,0,.50);
    --sombra-btn:0 1px 2px rgba(0,0,0,.40);
    --foco:0 0 0 3px rgba(63,176,122,.28);
  }
}
:root[data-theme="dark"]{
    --verde-50:#152A21;
    --verde-100:#1B3A2C;
    --verde-300:#2E7A55;
    --verde:#3FB07A;
    --verde-700:#5FC492;
    --verde-800:#8FD9B4;
    /* ⚠️ NÃO clareia: é o preenchimento atrás do texto BRANCO. Ver o comentário no claro. */
    --verde-solido:#0E7C4F;
    --verde-solido-2:#0B6440;
    --verde-topo:#0C4A37;
    --verde-claro:#CFE9DD;

    --bg:#0E1512;
    --bg-0:rgba(14,21,18,0);
    --surface:#161E1A;
    --surface-2:#1B2420;
    --ink:#E8EFEA;
    --ink-2:#9AAAA1;
    --ink-3:#8A9C92;   /* AA: 5,87 no cartão, 5,49 no recuo (o #6E7F76 dava 3,76) */
    --hairline:#25302B;
    --hairline-2:#1F2925;
    --seta-select:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A9C92' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --feito:#4FBE7B;      --feito-50:#15291D;   --feito-ink:#4FBE7B;
    --avencer:#D79A3C;    --avencer-ink:#E0AC5C;  --avencer-50:#2A2113;
    --ficha:#A98BE0;      --ficha-50:#221C33;   --ficha-ink:#A98BE0;
    --proximo:#8A968F;
    --divida:#D4736C;     --divida-50:#2A1917;
    --perda:#B98BEA;
    --serie-compras:#7FA9F0;
    --aviso-bg:#2A1A0C; --aviso-borda:#7C4A1D; --aviso-ink:#FED7AA;
    --erro:#F0645A;

    --sombra-1:0 1px 2px rgba(0,0,0,.35);
    --sombra-2:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.30);
    --sombra-pop:0 10px 34px rgba(0,0,0,.50);
    --sombra-btn:0 1px 2px rgba(0,0,0,.40);
    --foco:0 0 0 3px rgba(63,176,122,.28);
}
    *{box-sizing:border-box}
    body{
      margin:0; background:var(--bg); color:var(--ink);
      font:400 var(--t-base)/1.55 var(--fonte);
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }
    /* Números alinham como num livro-caixa — igual ao app (tabular em tudo). */
    .num, table, input{font-variant-numeric:tabular-nums}
    a{color:var(--verde)}

    /* ---------- O NÚMERO É A ASSINATURA ----------
       A SincRota existe para DUAS COLUNAS FECHAREM. Então dinheiro tem fonte, peso e
       alinhamento próprios: Archivo, tabular, apertado. É identidade e é função — coluna
       de dinheiro alinha como num livro-caixa, e a vírgula de uma linha cai embaixo da
       vírgula da outra. Usar em VALOR, não em texto que por acaso tem número. */
    .cifra{font-family:var(--fonte-marca); font-weight:600; letter-spacing:-.02em;
           font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}

    /* O ANEL DE FOCO, num lugar só. Antes existia em 2 telas de 45 — quem usa Tab no
       escritório ficava perdido, e é gente lançando dinheiro. */
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
    summary:focus-visible, [tabindex]:focus-visible{
      outline:2px solid var(--verde); outline-offset:2px; border-radius:var(--r-p)}

    /* ---------- estrutura: barra lateral + conteúdo ---------- */
    .app{display:flex; min-height:100vh}
    .lateral{
      width:236px; flex:none; background:var(--surface); border-right:1px solid var(--hairline);
      padding:16px 10px; display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100vh;
    }
    .marca{display:flex; align-items:center; gap:10px; padding:8px 10px 18px}
    .marca .selo{width:32px; height:32px; border-radius:8px; flex:none; display:grid; place-items:center;
                 background:linear-gradient(135deg,var(--verde-topo),var(--verde-solido))}
    .marca .selo svg{width:19px; height:19px; display:block}
    .marca .quem{min-width:0}          /* deixa o nome longo truncar em vez de empurrar */
    .marca .n,.marca .s{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .marca .n{font-family:var(--fonte-marca); font-size:var(--t-base); font-weight:600;
              line-height:1.25; letter-spacing:-.015em}
    .marca .s{font-size:var(--t-apoio); color:var(--ink-2); line-height:1.3}
    .nav{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px;
         text-decoration:none; color:var(--ink-2); font-size:var(--t-corpo); min-height:44px}
    .nav:hover{background:var(--bg); color:var(--ink)}
    .nav-on,.nav-on:hover{background:var(--bg); color:var(--verde); font-weight:600}
    /* Ícone do menu: TRAÇO monocromático, herda a cor do item. Sóbrio de propósito —
       cor no menu não significa nada; nas listas, sim (lá o quadradinho fica). Caixa
       fixa de 22px e viewBox 24 em todos: eles alinham no mesmo eixo, sem dança. */
    .nav-rot{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    /* O botão que dobra a lateral. Mora na marca, e some no celular (lá a lateral já é uma
       barra horizontal). */
    .dobrar{flex:none; margin-left:auto; width:28px; height:28px; padding:0; border:0;
            background:none; border-radius:8px; color:var(--ink-3); cursor:pointer;
            display:grid; place-items:center}
    .dobrar:hover{background:var(--bg); color:var(--ink)}
    /* ⚠️ SEM `outline:none`. Este era o ÚNICO controle do painel que abria mão do anel
       global, e o substituto dava 1,37:1 — abaixo dos 3,0 da WCAG 1.4.11 (auditoria 23/09).
       Os campos que também usam `--foco` se safam porque ganham `border-color` junto; este
       tem `border:0`. A régua de `:focus-visible` (a de cima, com o comentário sobre "gente
       lançando dinheiro") vale para ele como para todo mundo. */
    .dobrar:focus-visible{box-shadow:var(--foco)}
    .dobrar svg{width:18px; height:18px; display:block; fill:none; stroke:currentColor;
                stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
    .nav .ico{width:22px; height:22px; display:grid; place-items:center; flex:none}
    .nav .ico svg{width:20px; height:20px; display:block; fill:none; stroke:currentColor;
                  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
    /* 🔴 A LISTA É QUEM ROLA, E O "SAIR" NÃO ANDA (dono, 23/09).
       A lateral é `height:100vh` e tem 15 itens. Numa janela baixa — ou com a faixa da
       visita/fiscal empurrando — a coluna inteira transbordava, e `margin-top:auto` não
       encosta o rodapé no fundo VISÍVEL: ele descia para fora da tela junto com o menu.
       ⚠️ `min-height:0` não é enfeite: sem ele um item flex não encolhe abaixo do próprio
       conteúdo, a rolagem nunca acontece e o transbordo volta igual. */
    .lateral .menu{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column;
                   gap:2px;
      /* A SOMBRA QUE DIZ QUE HÁ MAIS COISA ABAIXO. Com o rodapé fixo, o documento passou a
         ter exatos 100vh: só rola quem põe o ponteiro EM CIMA da lateral — e no macOS a
         barra é invisível em repouso. Abaixo de ~873px de janela (quase todo notebook) os
         dois últimos itens ficavam sem pista nenhuma de que existem (auditoria 23/09).
         O truque do `background-attachment:local` mostra a sombra SÓ quando há transbordo. */
      background:
        linear-gradient(var(--surface) 30%, transparent) top / 100% 14px no-repeat local,
        linear-gradient(transparent, var(--surface) 70%) bottom / 100% 14px no-repeat local,
        radial-gradient(farthest-side at 50% 0,
          color-mix(in srgb, var(--ink) 12%, transparent), transparent)
          top / 100% 7px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%,
          color-mix(in srgb, var(--ink) 12%, transparent), transparent)
          bottom / 100% 7px no-repeat scroll}
    .lateral .rodape{flex:none; padding:14px 10px 4px; border-top:1px solid var(--hairline)}
    .lateral .rodape button{background:none; border:0; padding:0; color:var(--ink-2);
                            font:500 14px/1 inherit; cursor:pointer}

    /* `margin:0 auto`: em tela LARGA o conteúdo é capado em 1320 e CENTRALIZA no espaço à
       direita da barra (antes ficava colado à esquerda, com um vazião à direita — feio). Em
       tela até 1320 o flex:1 faz ele ocupar tudo; no celular (media < 820) idem. Dono pediu
       1320 (13/08) pra as tabelas largas respirarem mais, ainda com folga dos dois lados. */
    /* ═══════════ A FAIXA DE ÍCONES (dono, 23/09) ═══════════
       *"quero poder esconder o menu principal lateral — isso abre mais espaço para a
       visualização da central de controle."* São 236px que voltam para o conteúdo.
       O estado mora no `<html data-menu="fino">`, posto ANTES da pintura (base.html), e
       é lembrado em `localStorage` — o mesmo desenho do tema. */
    [data-menu="fino"] .lateral{width:64px; padding:16px 8px}
    [data-menu="fino"] .nav-rot{display:none}
    [data-menu="fino"] .lateral .nav{justify-content:center; padding:9px 0; gap:0}
    [data-menu="fino"] .marca{flex-wrap:wrap; justify-content:center; gap:10px; padding:8px 0 14px}
    [data-menu="fino"] .marca .quem{display:none}
    [data-menu="fino"] .dobrar{margin-left:0}
    [data-menu="fino"] .dobrar svg{transform:rotate(180deg)}
    [data-menu="fino"] .lateral .rodape{padding:14px 0 4px; text-align:center}
    .conteudo{flex:1; min-width:0; padding:24px 28px 48px; max-width:1320px; margin:0 auto}
    /* ⚠️ `center`, não `flex-start`: a ação do cabeçalho fica ao lado de um TÍTULO,
       não de um campo. Com `flex-start` o botão encostava no topo e um botão de 48px
       dominava um título de 22px. (Nos FILTROS é o contrário e continua certo: lá o
       botão fica ao lado de um `input`, que também tem 48px, e o formulário alinha
       por baixo — encolher aquele botão é que quebraria.) */
    .cab{display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:20px}
    .cab h1{font-family:var(--fonte-marca); font-size:var(--t-titulo); font-weight:700;
            margin:0 0 3px; letter-spacing:-.03em; line-height:1.15}
    .cab .sub{font-size:var(--t-apoio); color:var(--ink-2)}
    /* Sobrancelha do cabeçalho: onde a página se situa ("Semana 34 · 18–23 ago"). */
    .cab .olho{display:block; font-size:var(--t-rotulo); font-weight:600; letter-spacing:.14em;
               text-transform:uppercase; color:var(--verde); margin-bottom:7px}
    .cab .acoes{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
    .voltar{font-size:var(--t-apoio); color:var(--ink-2); text-decoration:none;
            display:inline-block; margin-bottom:6px}

    /* ---------- quadradinho do ícone (assinatura do app) ---------- */
    .q{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none}
    .q svg{width:18px; height:18px; display:block}   /* display:block tira o espaço da linha de base */
    /* ⚠️ A TINTA DERIVA DO TOKEN (color-mix), não de um rgba com o tom claro cravado: no
       modo escuro o ícone clareia e o fundo dele tem que clarear junto, senão fica verde
       claro sobre verde escuro — legível, mas sujo. O rgba fica como RESERVA: navegador que
       não entenda `color-mix` simplesmente ignora a linha seguinte e usa o valor antigo. */
    .q-verde{background:rgba(14,124,79,.16);
             background:color-mix(in srgb, var(--verde) 16%, transparent)}
    .q-verde svg{fill:var(--verde)}
    .q-feito{background:rgba(46,158,91,.16);
             background:color-mix(in srgb, var(--feito) 16%, transparent)}
    .q-feito svg{fill:var(--feito)}
    .q-avencer{background:rgba(224,138,30,.16);
               background:color-mix(in srgb, var(--avencer) 16%, transparent)}
    .q-avencer svg{fill:var(--avencer)}
    .q-ficha{background:rgba(126,87,194,.16);
             background:color-mix(in srgb, var(--ficha) 16%, transparent)}
    .q-ficha svg{fill:var(--ficha)}
    .q-cinza{background:rgba(110,110,115,.16);
             background:color-mix(in srgb, var(--proximo) 16%, transparent)}
    .q-cinza svg{fill:var(--proximo)}

    /* ---------- cartão agrupado (iOS): branco, sem sombra ---------- */
    /* ⚠️ FIO + SOPRO DE SOMBRA (25/08). O cartão era branco puro sobre cinza, sem borda e
       sem sombra. No celular a lista agrupada do iOS funciona assim porque os cantos da tela
       seguram o cartão; num monitor de 1320px ele some no fundo e a página passa a impressão
       de que o CSS não carregou. Esta é a mudança que mais muda a percepção. */
    .cartao{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-g);
            overflow:hidden; margin-bottom:var(--e6); box-shadow:var(--sombra-1)}
    .cartao .cabeca{padding:var(--e4) var(--e5) var(--e3); border-bottom:1px solid var(--hairline);
                    display:flex; align-items:center; justify-content:space-between; gap:var(--e3)}
    .cartao .cabeca h2{font-family:var(--fonte-marca); font-size:var(--t-secao); font-weight:600;
                       margin:0; letter-spacing:-.015em}
    .cartao .corpo{padding:var(--e5)}
    .grupo-tit{font-size:var(--t-rotulo); font-weight:600; letter-spacing:.13em;
               text-transform:uppercase; color:var(--ink-3); margin:var(--e7) var(--e1) var(--e3)}
    .ajuda{font-size:var(--t-apoio); color:var(--ink-2); margin:var(--e1) 0 0; max-width:68ch}

    .linha{display:flex; align-items:center; gap:var(--e3); padding:14px var(--e5);
           border-top:1px solid var(--hairline-2)}
    .linha:first-child{border-top:0}
    .linha .t{font-size:var(--t-corpo); font-weight:600}
    .linha .s{font-size:var(--t-apoio); color:var(--ink-2); margin-top:2px}
    .linha .v{margin-left:auto; font-family:var(--fonte-marca); font-size:var(--t-base);
              font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
    a.linha{text-decoration:none; color:inherit}
    a.linha:hover{background:var(--bg)}
    .chev{color:var(--ink-3); font-size:20px; margin-left:var(--e1); line-height:1}

    /* ---------- blocos de número ---------- */
    .tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:8px}
    /* Grade TRAVADA em 3 colunas (Visão geral, modo joias): 6 tiles = 3+3, sem o
       órfão que o auto-fit deixava numa linha sozinha (dono 14/08). */
    .tiles-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:8px}
    .tile{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-g);
          padding:var(--e4) var(--e5); box-shadow:var(--sombra-1)}
    /* Rótulo em VERSALETE espaçado: ele orienta, não compete com o número. */
    .tile .r{font-size:var(--t-rotulo); font-weight:600; letter-spacing:.11em;
             text-transform:uppercase; color:var(--ink-3)}
    .tile .v{font-family:var(--fonte-marca); font-size:var(--t-display); font-weight:700;
             letter-spacing:-.035em; margin-top:9px; line-height:1;
             font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
    /* O "R$" encolhe e acinzenta: o que importa é a cifra. */
    .tile .v small{font-family:var(--fonte); font-size:var(--t-corpo); font-weight:600;
                   color:var(--ink-3); letter-spacing:0; margin-right:3px; vertical-align:.14em}
    /* Uma linha de CONTEXTO: "R$ 12.480" sozinho não diz nada; "de 9 clientes" diz. */
    /* ⚠️ `.s` É O NOME QUE O PAINEL USA — é o mesmo de `.linha .s` e `.escolha .s`: "a
       explicação". Vinte e tantos blocos de número em 10 telas já escreviam `class="s"` e
       ficavam SEM FORMATAÇÃO NENHUMA, porque `.tile` só definia `.r` e `.v`. Renderizava
       texto cru desde sempre, e ninguém viu — nem eu, que passei o dia nestas telas: só
       apareceu quando o teste de classe órfã varreu os templates.
       O `.d` continua valendo porque eu o usei antes de descobrir a convenção. */
    .tile .s,.tile .d{font-size:var(--t-apoio); color:var(--ink-2); margin-top:7px}
    .v-pos{color:var(--feito)} .v-neg{color:var(--divida)} .v-gold{color:var(--avencer-ink)}
/* ⭐ LANÇAMENTO CANCELADO (dono, 03/09). A classe `riscado` nasceu em 20/08 e nunca teve
   regra: a linha errada de R$ 58.660 aparecia IDÊNTICA à certa de R$ 5.866, na tela de
   dinheiro — quem olhava de relance não distinguia qual valia. Achada pelo instrumento
   de classe órfã, depois de ele mesmo ganhar a checagem de classe dentro de `{% if %}`.
   ⚠️ Não é estorno: dinheiro nenhum volta. É o registro errado sendo riscado, com a
   linha certa ao lado — por isso RISCO + cinza, e não vermelho: vermelho aqui viraria
   dívida, que é outra coisa. */
.riscado{text-decoration:line-through; color:var(--ink-2); opacity:.75}

    /* ---------- tabela (telas densas) ---------- */
    .rolagem{overflow-x:auto}
    table{width:100%; border-collapse:collapse}
    /* Cabeçalho com chão próprio e GRUDADO no topo: numa lista de 61 peças, saber qual
       coluna é qual no meio da rolagem não é luxo. */
    thead th{font-size:var(--t-rotulo); font-weight:600; letter-spacing:.13em;
             text-transform:uppercase; color:var(--ink-3); text-align:left;
             padding:11px var(--e5); background:var(--surface-2);
             border-bottom:1px solid var(--hairline); position:sticky; top:0; z-index:1}
    td{padding:13px var(--e5); border-top:1px solid var(--hairline-2); font-size:var(--t-corpo)}
    tbody tr:first-child td{border-top:0}
    tbody tr:hover{background:var(--surface-2)}
    /* Coluna à direita é coluna de NÚMERO — ganha a fonte do dinheiro por padrão. */
    .dir{text-align:right}
    td.dir{font-family:var(--fonte-marca); font-weight:600; letter-spacing:-.02em;
           font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}

    /* ---------- pílulas ---------- */
    /* ETIQUETA, não cápsula. Ela classifica uma linha — é etiqueta de pasta, não pílula de
       rede social. E os tons agora vêm das rampas, não de opacidade chutada. */
    .pill{font-size:var(--t-rotulo); font-weight:600; letter-spacing:.05em; text-transform:uppercase;
          padding:5px 9px; border-radius:7px; display:inline-block; white-space:nowrap}
    .p-feito{background:var(--feito-50); color:var(--feito-ink)}
    .p-avencer{background:var(--avencer-50); color:var(--avencer-ink)}
    .p-divida{background:var(--divida-50); color:var(--divida)}
    .p-ficha{background:var(--ficha-50); color:var(--ficha-ink)}
    .p-neutra{background:var(--surface-2); color:var(--ink-2); border:1px solid var(--hairline)}

    /* ---------- botões ---------- */
    /* ⚠️ Centralização por FLEXBOX, não por line-height: com box-sizing:border-box a borda
       do .btn-fantasma comia 1px do line-height e o texto ficava fora do centro vertical.
       inline-flex + align/justify center centra H e V independentemente de borda/altura. */
    /* ⚠️ O botão continua SÓLIDO com texto branco. Isso não se reabre. */
    .btn{min-height:44px; padding:0 18px; border:0; border-radius:var(--r-m); cursor:pointer;
         background:var(--verde-solido); color:#fff; font:600 var(--t-base)/1.2 var(--fonte);
         white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center;
         justify-content:center; text-align:center; box-shadow:var(--sombra-btn);
         transition:background .12s ease}
    .btn:hover{background:var(--verde-solido-2)}
    .btn:active{background:var(--verde-solido-2); filter:brightness(.92)}
    .btn-fantasma{background:var(--surface); color:var(--verde); border:1px solid var(--hairline);
                  box-shadow:none}
    .btn-fantasma:hover{background:var(--verde-50); border-color:var(--verde-100)}
    .btn-mini{min-height:34px; padding:0 14px; font-size:var(--t-corpo); border-radius:var(--r-p)}
    .btn:disabled{opacity:.4; cursor:default; box-shadow:none}
    .btn:disabled:hover{background:var(--verde-solido)}
    /* Menu de AÇÕES por linha (lista densa, ex.: Pessoas): um <details> NATIVO que abre um
       popover à direita. Consolida "Dar cargo" + Desligar/Reativar num controle só, SEMPRE
       na mesma coluna — some a borda torta que ações soltas de largura variável causavam. */
    details.menu-acoes{position:relative}
    details.menu-acoes>summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center;
      gap:6px; min-height:34px; padding:0 12px; border:1px solid var(--hairline); border-radius:10px;
      background:var(--surface); color:var(--ink); font-size:var(--t-corpo); font-weight:500;
      white-space:nowrap}
    details.menu-acoes>summary::-webkit-details-marker{display:none}
    details.menu-acoes>summary::marker{content:""}
    details.menu-acoes[open]>summary{border-color:var(--verde); color:var(--verde)}
    .menu-pop{position:absolute; right:0; top:calc(100% + 6px); background:var(--surface);
      border:1px solid var(--hairline); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.10);
      min-width:190px; z-index:20; padding:6px; text-align:left}
    .menu-pop .cab{font-size:var(--t-rotulo); font-weight:600; text-transform:uppercase;
                   color:var(--ink-3); letter-spacing:.13em; padding:6px 12px 3px}
    .menu-pop form{margin:0}
    .menu-pop button{display:block; width:100%; text-align:left; background:none; border:0; padding:9px 12px;
      border-radius:8px; font:500 14px/1.2 inherit; cursor:pointer; color:var(--ink); white-space:nowrap}
    .menu-pop button:hover{background:var(--bg)}
    .menu-pop button.rem{color:var(--divida)}
    /* O menu também abre LINK (ex.: reimprimir o papel da retirada) — mesma pinta do botão,
       para a lista de ações não ter dois estilos na mesma caixa. */
    .menu-pop a{display:block; padding:9px 12px; border-radius:8px; font:500 14px/1.2 inherit;
                color:var(--ink); text-decoration:none; white-space:nowrap}
    .menu-pop a:hover{background:var(--bg)}
    /* E CAMPO DE TEXTO (o motivo do cancelamento): na célula da tabela ele colapsava num oval
       (achado do dono, 09/09); aqui tem largura de verdade. */
    .menu-pop .menu-campo{display:block; width:calc(100% - 24px); margin:2px 12px 8px;
      padding:8px 10px; border:1px solid var(--hairline); border-radius:8px;
      background:var(--bg); color:var(--ink); font:400 14px/1.2 inherit}
    .menu-pop .sep{height:1px; background:var(--hairline); margin:5px 6px}
    /* Ação secundária DISCRETA em forma de link (ex.: "trocar para Interior"): é texto
       clicável, não um botão do sistema. Documentado para não voltar a nascer inline. */
    .link-acao{background:none; border:0; padding:0; font-size:var(--t-apoio); color:var(--ink-2);
               cursor:pointer; text-decoration:underline}
    /* Texto secundário pequeno (13px, cor secundária) para uso SOLTO em tabelas/labels,
       onde `.marca .s` (escopado à barra) não alcança. */
    .txt-s{font-size:var(--t-apoio); color:var(--ink-2)}
    /* Título de SEÇÃO dentro do corpo de um cartão (17px). Igual ao `.cartao .cabeca h2`,
       mas usável solto no `.corpo` sem precisar do wrapper `.cabeca`. */
    .tit-secao{font-family:var(--fonte-marca); font-size:var(--t-secao); font-weight:600;
               margin:0 0 6px; letter-spacing:-.015em}
    /* Ações inline de uma LINHA de tabela (Editar/Remover): texto colorido, sem sublinhado
       e sem cara de botão. Verde = ação; `.rem` = remover (tijolo). Reutilizável em toda
       lista densa do painel — é o "modelo" das telas. */
    .acao-linha{background:none; border:0; padding:0; cursor:pointer; font:500 14px/1 inherit;
                color:var(--verde); text-decoration:none; white-space:nowrap}
    .acao-linha.rem{color:var(--divida)}
    /* Código próprio da peça em célula de tabela (monoespaçado, discreto). */
    /* Código próprio da peça: monoespaçado, com chão discreto — ele é uma ETIQUETA de
       patrimônio, não texto corrido. */
    .cod{font-family:var(--fonte-cod); font-size:var(--t-apoio); color:var(--ink-3);
         background:var(--surface-2); border:1px solid var(--hairline-2);
         padding:2px 6px; border-radius:var(--r-p)}
    /* ---------- MATRIZ DE CAPACIDADE (dono 25/08) ----------
       *"Isso está ocupando muita tela; compacte invertendo o que é coluna e linha, e ajeita
       essas tags uma em cima da outra, está com cara de bagunça."*

       A categoria vira COLUNA e a medida vira LINHA: 8 linhas viram 3, e a altura cai de
       ~620 px para ~150 px.

       ⭐ E as tags SOMEM. Aquela pilha ("Trava em PULSEIRA CORRENTE PINGENTE…") existia só
       porque a tabela não mostrava onde estava o gargalo — era a mesma informação, repetida
       embaixo porque não cabia em cima. Agora a coluna travada se marca sozinha, e a
       informação fica onde a pessoa já está olhando. */
    .cap{display:grid; grid-template-columns:210px 1fr; gap:var(--e6); align-items:start}
    @media (max-width:900px){.cap{grid-template-columns:1fr}}
    .cap-hero .r{font-size:var(--t-rotulo); font-weight:600; letter-spacing:.11em;
                 text-transform:uppercase; color:var(--ink-3)}
    .cap-hero .n{font-family:var(--fonte-marca); font-size:56px; font-weight:700;
                 letter-spacing:-.04em; line-height:.95; margin-top:8px;
                 font-variant-numeric:tabular-nums}
    .cap-hero .n small{font-family:var(--fonte); font-size:var(--t-secao); font-weight:600;
                       color:var(--ink-2); letter-spacing:0; margin-left:6px}
    .cap-hero .d{font-size:var(--t-apoio); color:var(--ink-2); margin-top:10px}

    table.matriz{width:100%; border-collapse:collapse}
    table.matriz th,table.matriz td{text-align:right; padding:10px 12px;
      font-variant-numeric:tabular-nums; white-space:nowrap}
    table.matriz thead th{font-size:var(--t-rotulo); font-weight:600; letter-spacing:.09em;
      text-transform:uppercase; color:var(--ink-3); background:var(--surface-2);
      border-bottom:1px solid var(--hairline); position:sticky; top:0}
    /* O nome da MEDIDA fica grudado à esquerda: com muitas categorias a tabela rola na
       horizontal, e rolar sem saber qual linha é qual não serve para nada. */
    table.matriz th.eixo,table.matriz td.eixo{text-align:left; font-size:var(--t-rotulo);
      font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
      background:var(--surface); position:sticky; left:0; z-index:1;
      border-right:1px solid var(--hairline)}
    table.matriz td{font-family:var(--fonte-marca); font-weight:600; letter-spacing:-.02em;
      font-size:var(--t-corpo); color:var(--ink); border-top:1px solid var(--hairline-2)}
    /* "Rende" é a linha que decide: é o MENOR dela que vira o número de panos. */
    table.matriz tr.linha-rende td{font-size:var(--t-secao); font-weight:700;
      border-top:1px solid var(--hairline)}
    table.matriz tr.linha-rende td.eixo{font-size:var(--t-rotulo)}
    table.matriz .trava{background:var(--avencer-50)}
    table.matriz td.trava.rende,table.matriz thead th.trava{color:var(--avencer-ink)}
    .cap-nota{font-size:var(--t-apoio); color:var(--ink-2); margin:var(--e4) 0 0}
    .cap-nota .marca-trava{display:inline-block; width:10px; height:10px; border-radius:3px;
      background:var(--avencer-50); border:1px solid var(--avencer);
      vertical-align:-1px; margin-right:5px}

    /* ---------- PAINEL EMBUTIDO NA LISTA (editar/repor uma linha) ----------
       O dono olhou o "editar" do catálogo e disse que faltava modelagem — e estava certo,
       embora o medidor de estilo inline dissesse que a tela estava limpa. O problema não era
       estilo: era ESTRUTURA. O formulário mora dentro de um <td>, então herdava o recuo da
       célula e ficava pendurado embaixo de um cabeçalho de colunas (PEÇA/PREÇO/CUSTO/COFRE)
       que, ali, não descreve mais nada.

       A forma resolve: o painel deixa de parecer célula e passa a parecer o que é — uma
       gaveta aberta DENTRO da lista. Chão recuado, fio em volta, e uma faixa verde na
       esquerda dizendo "é esta linha que está aberta". */
    tr.edicao > td{background:var(--surface-2); padding:0; border-top:0}
    .gaveta{border:1px solid var(--hairline); border-left:3px solid var(--verde);
            border-radius:var(--r-m); background:var(--surface); margin:var(--e3);
            padding:var(--e5); box-shadow:var(--sombra-1)}
    .gaveta > .tit-secao{margin:0 0 var(--e4)}
    /* O bloco do estoque fica separado do resto por um fio — são duas ações diferentes:
       corrigir o cadastro da peça e mexer no que tem no cofre. */
    .gaveta .estoque{margin-top:var(--e5); padding-top:var(--e4);
                     border-top:1px solid var(--hairline)}

    /* Cabeçalho de GRUPO dentro de uma tabela agrupada (catálogo por categoria, etc.). */
    tr.grupo-cat td{background:var(--surface-2); font-size:var(--t-rotulo); font-weight:600;
                    letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
                    padding:9px var(--e5)}
    /* Menu horizontal de PÍLULAS de filtro (categorias do catálogo, etc.). Uma linha só,
       ARRASTÁVEL com o mouse (segura-e-puxa; JS na tela) e por toque no celular. Reutilizável. */
    .chips{display:flex; gap:8px; overflow-x:auto; padding:2px; cursor:grab; user-select:none;
           scrollbar-width:thin; -webkit-overflow-scrolling:touch}
    .chips.arrastando{cursor:grabbing}
    .chips::-webkit-scrollbar{height:6px}
    .chips::-webkit-scrollbar-thumb{background:var(--hairline); border-radius:999px}
    .chip{flex:none; padding:8px 14px; border-radius:999px; border:1px solid var(--hairline);
          background:var(--surface); color:var(--ink); text-decoration:none; font-size:var(--t-corpo);
          font-weight:500; white-space:nowrap}
    .chip .c{color:var(--ink-2); font-weight:400}
    .chip-on{background:var(--verde-solido); border-color:var(--verde-solido); color:#fff}
    .chip-on .c{color:rgba(255,255,255,.75)}

    /* ---------- formulário ---------- */
    /* O rótulo de campo do painel — 95 usos em 23 telas. Solto do <label> porque ele
       também aparece fora de um (cabeçalho de coluna de formulário, bloco de leitura). */
    .rot,label .rot{display:block; font-size:var(--t-rotulo); font-weight:600; letter-spacing:.09em;
               text-transform:uppercase; color:var(--ink-3); margin-bottom:7px}
    /* ⚠️ 16px no campo NÃO é escolha de estilo: abaixo disso o Safari do iPhone dá zoom
       sozinho ao focar, e a tela pula na mão de quem está lançando. Não reduzir. */
    /* 🔴 A APARÊNCIA NATIVA DO SELECT IGNORA A ALTURA (dono, 22/09): *"veja o tamanho dessas
       caixas de dropdown, elas estão finas, deixe da mesma altura dos botões e demais campos"*.
       O `min-height:44px` abaixo SEMPRE esteve aqui — medido no Chromium, o select já dava 44px.
       No macOS o desenho é nativo (a seta dupla empilhada) e a altura é do sistema, não do CSS.
       Desligar `appearance` devolve a caixa ao CSS; como isso também apaga a seta nativa, ela é
       redesenhada — sem ela o campo perde a única marca de que é escolha, e não texto. São 39
       selects (33 arquivos), e por isso o conserto mora AQUI e não numa tela. */
    input,select{width:100%; min-height:44px; padding:0 14px; border:1px solid var(--hairline);
                 border-radius:var(--r-m); font-size:16px; background:var(--surface);
                 color:var(--ink); font-family:inherit; transition:border-color .12s ease,
                 box-shadow .12s ease}
    /* 🔴 ESTA REGRA VEM **DEPOIS** DE `input,select`, E A ORDEM É O CONSERTO (auditoria 22/09).
       Ela nasceu ANTES, e um revisor mediu no Chromium o estrago: `select` e `input,select` têm
       a MESMA especificidade, então vence a última do arquivo — e a de baixo usa dois ATALHOS
       (`padding:` e `background:`) que zeram as longhands de cima. Sobrevivia só o
       `appearance:none`, que APAGA a seta nativa. Resultado medido: o select ficava sem seta
       NENHUMA — pior do que antes da mudança, e visualmente igual a um campo de texto.

           antes do commit ....  padding-right 14px | background-image none | appearance auto
           com a regra ANTES ..  padding-right 14px | background-image none | appearance none  ← sem seta
           com ela DEPOIS .....  padding-right 40px | background-image url(data:…) | none

       ⚠️ E o erro tem endereço: a maquete que o dono aprovou escrevia a regra DEPOIS, e ali o
       cascade funcionava. Ao trazê-la para cá eu a pus antes e nunca remedi contra o arquivo
       real — a maquete provou o DESENHO, não o CSS entregue. */
    select{-webkit-appearance:none; appearance:none; padding-right:40px;
           background-image:var(--seta-select); background-repeat:no-repeat;
           background-position:right 14px center}
    input:focus,select:focus{outline:0; border-color:var(--verde); box-shadow:var(--foco)}
    input:focus-visible,select:focus-visible{outline:0}

    /* A faixa dos dados fiscais pendentes — âmbar, não vermelha: é pendência, não erro.
       ⚠️ As cores agora são TOKEN (--aviso-*), não hexadecimal com um bloco escuro à parte.
       O padrão antigo é o que produz tela ilegível: quem acrescentasse uma regra aqui e
       esquecesse do bloco escuro deixava texto de um tema sobre o fundo do outro. Com token,
       esquecer é impossível — só existe um lugar. */
    .faixa-fiscal{display:flex; gap:var(--e3); align-items:center; justify-content:space-between;
                  flex-wrap:wrap; margin:0 0 var(--e4); padding:13px var(--e4);
                  border-radius:var(--r-m); background:var(--aviso-bg);
                  border:1px solid var(--aviso-borda); color:var(--aviso-ink);
                  font-size:var(--t-corpo)}
    .faixa-fiscal a{color:var(--aviso-ink); font-weight:700; text-decoration:underline;
                    white-space:nowrap}

    /* ---------- o OLHINHO da senha (dono 24/08) ----------
       Nasceu de um caso real: a primeira empresa a se cadastrar sozinha errou a senha no
       cadastro e ficou trancada fora do painel no mesmo dia. O formulário pede a senha DUAS
       vezes e compara — então o mesmo engano (capslock, corretor do celular) entra nas duas,
       a comparação aprova, e ninguém vê. Conferir com os olhos é o que faltava.
       Fica em `base.html` e vale para TODA tela de senha, inclusive as que ainda não existem. */
    .campo-senha{position:relative}
    .campo-senha input{padding-right:52px}
    .olho{position:absolute; right:6px; top:50%; transform:translateY(-50%);
          width:40px; height:40px; min-height:0; padding:0; border:0; background:none;
          display:grid; place-items:center; cursor:pointer; color:var(--ink-2); border-radius:10px}
    .olho:hover{color:var(--ink); background:var(--surface-2, rgba(0,0,0,.04))}
    .olho:focus-visible{outline:2px solid var(--verde); outline-offset:2px}
    .olho svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
              stroke-linecap:round; stroke-linejoin:round}
    input[type=checkbox],input[type=radio]{width:18px; height:18px; min-height:0; padding:0;
                                           border:0; flex:none; accent-color:var(--verde)}

    /* ---------- ESCOLHA: caixa/rádio com título e explicação ----------
       O padrão das telas de decisão (Configurações, pasta de viagem, montar semanas). Existia
       OITO vezes montado à mão, com o mesmo `style=` copiado em cada uma — e o `style` do
       próprio radio repetia o que a regra acima já fazia.
       Segue o vocabulário que o painel já usa em `.linha`: `.t` é o que é, `.s` explica. */
    .escolha{display:flex; gap:var(--e3); align-items:flex-start; cursor:pointer}
    /* 3px alinha a caixa com a primeira LINHA do título, não com o topo da caixa de texto. */
    .escolha input[type=checkbox],.escolha input[type=radio]{margin-top:3px}
    .escolha .txt{width:100%}
    .escolha .t{display:block; font-size:var(--t-corpo); font-weight:600}
    .escolha .s{display:block; font-size:var(--t-apoio); color:var(--ink-2); margin-top:3px}
    /* Enquanto a escolha está marcada, o bloco inteiro fica levemente aceso — dá para ver
       QUAL opção está valendo sem procurar a bolinha. */
    .escolha:hover .t{color:var(--verde)}

    /* ESCOLHA EM CARTÃO: a mesma coisa, mas cada opção é um bloco clicável e a escolhida
       ACENDE. Existia 6 vezes em Configurações, cada uma com o mesmo `style=` gigante mais
       um condicional Jinja para pintar a borda.

       ⚠️ Quem acende agora é o `:has(input:checked)`, não o Jinja — e isso CONSERTA um
       defeito: o condicional era avaliado no servidor, com o valor SALVO. Clicar em outra
       opção não movia o verde; ele só pulava depois de salvar e recarregar a página. Quem
       estava configurando via a bolinha numa opção e o destaque em outra. Com o CSS, o
       destaque segue o clique na hora. */
    .escolha-cartao{display:flex; gap:var(--e3); align-items:flex-start; padding:var(--e4);
                    border:1px solid var(--hairline); border-radius:var(--r-m);
                    background:var(--surface); cursor:pointer; margin-bottom:10px}
    .escolha-cartao:last-of-type{margin-bottom:0}
    .escolha-cartao input[type=checkbox],.escolha-cartao input[type=radio]{margin-top:3px}
    .escolha-cartao .txt{width:100%}
    .escolha-cartao .t{display:block; font-size:var(--t-corpo); font-weight:600}
    .escolha-cartao .s{display:block; font-size:var(--t-apoio); color:var(--ink-2); margin-top:3px}
    .escolha-cartao:hover{border-color:var(--verde-100)}
    .escolha-cartao:has(input:checked){border-color:var(--verde);
                    box-shadow:0 0 0 2px rgba(14,124,79,.15);
                    box-shadow:0 0 0 2px color-mix(in srgb, var(--verde) 18%, transparent)}

    /* O PORTÃO DO REPRESENTANTE — cada resposta é um formulário próprio (POST distinto), então
       não dá para usar .escolha-cartao, que é um radio dentro de UM formulário. Aqui cada opção
       é botão + a explicação embaixo: o dono parou no portão antigo justamente porque os botões
       vinham sozinhos, sem dizer o que cada um significava. */
    .opcoes-portao{display:grid; gap:var(--e3); margin-top:var(--e4)}
    .opcoes-portao form{border:1px solid var(--hairline); border-radius:var(--r-m);
                    background:var(--surface); padding:var(--e4); margin:0}
    .opcoes-portao form:hover{border-color:var(--verde-100)}
    .opcoes-portao .txt-s{margin:10px 0 0}
    /* O campo que acompanha a resposta: número curto, colado no botão dele. */
    .campo-portao{display:block; margin-top:var(--e3)}
    .campo-portao input{width:96px; text-align:right; margin-top:4px}
    .campo-portao .txt-s{display:block; margin-top:6px}
    .escolha-cartao:has(input:focus-visible){box-shadow:var(--foco)}

    /* Texto secundário SOLTO, a utilidade mais pedida do painel (56 usos inline). */
    .fraco{color:var(--ink-2)}

    /* ---------- INTERRUPTOR DE TEMA (dono 25/08) ----------
       Mora em Configurações. Já esteve no rodapé da barra lateral e não coube: em 236 px os
       três botões saíam com larguras diferentes e a coisa parecia torta.

       ⚠️ TRÊS PARTES IGUAIS (`1fr`), não largura pelo texto. Medido no navegador: "CLARO"
       dava 62 px e "SISTEMA" 76 — o verde não batia com a grade. Uma captura reduzida não
       mostra 14 px de diferença; só a medição mostra.

       ⚠️ E o arredondamento vai nos BOTÕES DAS PONTAS, não num `overflow:hidden` no grupo. Com
       o recorte, o fundo do botão ativo era cortado pela borda INTERNA e sobrava um fio claro
       entre o verde e a borda — que é o que parecia o verde escapando da caixa. */
    .tema{display:grid; grid-template-columns:repeat(3,1fr);
          border:1px solid var(--hairline); border-radius:var(--r-m);
          background:var(--surface); max-width:420px}
    .tema button{background:none; border:0; border-left:1px solid var(--hairline);
                 padding:11px 8px; cursor:pointer; min-height:0;
                 font:600 var(--t-corpo)/1 var(--fonte); color:var(--ink-2);
                 transition:background .12s ease, color .12s ease}
    .tema button:first-child{border-left:0;
                 border-radius:calc(var(--r-m) - 1px) 0 0 calc(var(--r-m) - 1px)}
    .tema button:last-child{border-radius:0 calc(var(--r-m) - 1px) calc(var(--r-m) - 1px) 0}
    .tema button:hover{background:var(--surface-2); color:var(--ink)}
    .tema button[aria-pressed="true"]{background:var(--verde-solido); color:#fff}

    /* ---------- MENU HORIZONTAL DE ABAS (dono 25/08) ----------
       Nasceu de uma pergunta dele: *"cadê a config de não permitir peça com o mesmo valor?"*
       Estava a 2.615 px do topo de uma página de 4.320, entre 11 cartões soltos. *"O cara tem
       que exercitar pra entender, e isso não é bom."*

       ⚠️ QUEM ESCONDE É O `display:none`, e isso é DE PROPÓSITO: campo escondido CONTINUA
       sendo enviado no POST (só campo `disabled` fica de fora). É o que permite manter os
       formulários exatamente como estão — a aba é só uma lente sobre a mesma página, não um
       recorte do que se salva. Trocar isto por algo que remova o campo do envio reabriria o
       defeito de 23/08, quando metade das Configurações não salvava com a suíte verde. */
    .abas{display:flex; gap:2px; border-bottom:1px solid var(--hairline); margin:0 0 var(--e6);
          overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
    .abas::-webkit-scrollbar{display:none}
    .abas a{flex:none; padding:12px 18px; font-size:var(--t-corpo); font-weight:600;
            color:var(--ink-2); text-decoration:none; border-bottom:2px solid transparent;
            margin-bottom:-1px; white-space:nowrap; display:flex; align-items:center; gap:8px;
            transition:color .12s ease, border-color .12s ease}
    .abas a:hover{color:var(--ink)}
    .abas a.on{color:var(--verde); border-bottom-color:var(--verde)}
    .abas a .n{font-size:var(--t-rotulo); font-weight:600; color:var(--ink-3);
               background:var(--surface-2); border:1px solid var(--hairline);
               border-radius:var(--r-full); padding:1px 7px;
               font-variant-numeric:tabular-nums}
    .abas a.on .n{color:var(--verde); background:var(--verde-50); border-color:var(--verde-100)}

    /* A LENTE. Server-rendered: sem JavaScript a aba certa já vem aberta pelo `?aba=`. */
    .com-abas [data-aba]{display:none}
    .com-abas[data-aba-ativa="dinheiro"] [data-aba="dinheiro"],
    .com-abas[data-aba-ativa="semana"]   [data-aba="semana"],
    .com-abas[data-aba-ativa="clientes"] [data-aba="clientes"],
    .com-abas[data-aba-ativa="catalogo"] [data-aba="catalogo"]{display:block}

    /* A barra do Salvar acompanha a rolagem: numa aba longa, o botão não fica lá embaixo. */
    .salvar-barra{position:sticky; bottom:0; margin-top:var(--e6); z-index:5;
                  background:linear-gradient(180deg,var(--bg-0),var(--bg) 40%);
                  padding:var(--e5) 0 var(--e3); display:flex; align-items:center;
                  justify-content:space-between; gap:var(--e4); flex-wrap:wrap}
    .campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
    .nota{font-size:var(--t-apoio); color:var(--ink-2); margin-top:var(--e3)}

    /* ---------- chave liga/desliga (o interruptor do iOS) ----------
       Uma caixa de marcar NUA não diz "liga/desliga" — diz "marque se quiser".
       Aqui a diferença importa: é ela que ativa a comissão em degrau da empresa
       inteira. A caixa real fica invisível por cima do trilho (continua sendo o
       alvo do clique e do teclado); o trilho é só o desenho. */
    .chave{position:relative; display:inline-flex; align-items:center; flex:none}
    .chave-switch{position:absolute; inset:0; width:100%; height:100%; margin:0;
                  opacity:0; cursor:pointer; z-index:1}
    .chave-trilho{width:51px; height:31px; border-radius:999px; background:var(--hairline);
                  transition:background .18s ease; flex:none; display:block}
    .chave-trilho::after{content:""; display:block; width:27px; height:27px; margin:2px;
                         border-radius:50%; background:#fff; transition:transform .18s ease;
                         box-shadow:0 1px 3px rgba(0,0,0,.25)}
    /* O mesmo motivo do botão: a bolinha do interruptor é BRANCA sobre este trilho. */
    .chave-switch:checked + .chave-trilho{background:var(--verde-solido)}
    .chave-switch:checked + .chave-trilho::after{transform:translateX(20px)}
    .chave-switch:focus-visible + .chave-trilho{outline:2px solid var(--verde); outline-offset:2px}

    /* ---------- avisos ---------- */
    .erro,.ok,.atencao{border-radius:var(--r-m); padding:var(--e3) var(--e4);
                       font-size:var(--t-corpo); margin-bottom:var(--e4); border:1px solid}
    .erro{background:rgba(217,48,37,.10); border-color:rgba(217,48,37,.30); color:var(--erro);
          background:color-mix(in srgb, var(--erro) 10%, transparent);
          border-color:color-mix(in srgb, var(--erro) 32%, transparent)}
    .ok{background:rgba(46,158,91,.10); border-color:rgba(46,158,91,.35); color:var(--ink);
        background:color-mix(in srgb, var(--feito) 10%, transparent);
        border-color:color-mix(in srgb, var(--feito) 35%, transparent)}
    .atencao{background:rgba(224,138,30,.10); border-color:rgba(224,138,30,.35); color:var(--ink);
             background:color-mix(in srgb, var(--avencer) 10%, transparent);
             border-color:color-mix(in srgb, var(--avencer) 35%, transparent)}
    .portao{border:1px solid var(--hairline); border-left:3px solid var(--avencer);
            border-radius:var(--r-m); background:var(--surface-2); padding:var(--e4)}

    .vazio{padding:var(--e7) var(--e4); text-align:center; color:var(--ink-2);
           font-size:var(--t-corpo)}


    /* ═══════════════════════════════════════════════════════════════════════
       A CENTRAL DE CONTROLE (§9az, dono 23/09) — o kanban dos representantes.

       ⚠️ TODO nome nasce com o prefixo `cc-`, e não por capricho: dos nomes naturais
       desta tela, SETE já existiam no painel (`.q`, `.chip`, `.linha`, `.txt`, `.rot`,
       `.chips`, `.cabeca`). `.q` é o quadradinho do ícone — 30×30 com `place-items:center`
       — e usá-lo num texto empilhava cada palavra numa linha. É a memória
       `colisao-de-classe-no-painel`, medida antes de escrever.
       ═══════════════════════════════════════════════════════════════════════ */

    /* o menu horizontal da própria tela */
    .cc-abas{display:flex; gap:2px; border-bottom:1px solid var(--hairline);
             margin:0 0 var(--e5); overflow-x:auto}
    .cc-aba{flex:none; display:flex; align-items:center; gap:7px; padding:11px 16px 12px;
            font-size:var(--t-corpo); font-weight:600; color:var(--ink-2);
            text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;
            white-space:nowrap; border-radius:var(--r-p) var(--r-p) 0 0; min-height:44px}
    .cc-aba:hover{color:var(--ink); background:var(--surface-2)}
    .cc-aba-on,.cc-aba-on:hover{color:var(--verde); border-bottom-color:var(--verde);
                                background:none}
    .cc-aba svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9;
                stroke-linecap:round; stroke-linejoin:round; flex:none}

    /* peças comuns */
    .cc-rot{font-size:var(--t-rotulo); font-weight:600; letter-spacing:.09em;
            text-transform:uppercase; color:var(--ink-3)}
    .cc-av{width:34px; height:34px; border-radius:var(--r-full); background:var(--verde-solido);
           color:#fff; font-family:var(--fonte-marca); font-weight:600; font-size:15px;
           line-height:34px; text-align:center; flex:none}
    .cc-sinal{width:7px; height:7px; border-radius:var(--r-full); display:inline-block; flex:none}
    .cc-sinal-on{background:var(--feito); box-shadow:0 0 0 3px var(--feito-50)}
    .cc-sinal-morno{background:var(--avencer); box-shadow:0 0 0 3px var(--avencer-50)}
    .cc-sinal-frio{background:var(--proximo); box-shadow:0 0 0 3px var(--hairline)}
    .cc-barra{height:7px; border-radius:var(--r-full); background:var(--hairline);
              overflow:hidden}
    .cc-barra i{display:block; height:100%; background:var(--feito);
                border-radius:var(--r-full)}
    .cc-pino{color:var(--verde); flex:none}
    .cc-onde{display:flex; align-items:center; gap:7px; font-size:var(--t-apoio);
             color:var(--ink-2)}
    .cc-onde b{color:var(--ink)}
    .cc-nota-col{margin-top:var(--e3); font-size:var(--t-apoio); color:var(--ink-3);
                 line-height:1.45}
    .cc-nota-col b{color:var(--ink-2)}

    /* ── O KANBAN: coluna fixa, faixa que rola PARA O LADO ── */
    .cc-kan{display:flex; gap:var(--e4); overflow-x:auto; padding-bottom:var(--e3);
            align-items:flex-start}
    .cc-col{flex:0 0 306px; background:var(--surface); border:1px solid var(--hairline);
            border-radius:var(--r-g); box-shadow:var(--sombra-2); overflow:hidden}
    .cc-col-topo{display:block; padding:var(--e4); text-decoration:none;
                 border-bottom:1px solid var(--hairline); background:var(--surface-2)}
    .cc-col-topo:hover{background:var(--bg)}
    .cc-col-quem{display:flex; align-items:center; gap:10px}
    .cc-col-nome{display:block; font-family:var(--fonte-marca); font-weight:600; font-size:15px;
                 line-height:1.2; color:var(--ink); overflow:hidden; text-overflow:ellipsis;
                 white-space:nowrap}
    .cc-col-sub{display:flex; align-items:center; gap:6px; margin-top:3px; font-size:11.5px;
                color:var(--ink-3)}
    .cc-col-semana{display:flex; align-items:center; justify-content:space-between; gap:8px;
                   margin-top:var(--e3)}
    .cc-col-semana .txt-s{font-size:11.5px; text-align:right}
    .cc-col-corpo{padding:var(--e4)}
    .cc-prog{display:flex; align-items:baseline; justify-content:space-between;
             margin-bottom:7px}
    .cc-prog b{font-family:var(--fonte-marca); font-weight:700; font-size:21px; line-height:1;
               color:var(--ink); font-variant-numeric:tabular-nums}
    .cc-prog span{font-size:var(--t-apoio); color:var(--ink-2); font-weight:400}
    .cc-tres{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:var(--e4)}
    .cc-tres>div{background:var(--surface-2); border:1px solid var(--hairline);
                 border-radius:var(--r-m); padding:9px 6px; text-align:center}
    .cc-r{font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
          color:var(--ink-3); line-height:1.25}
    .cc-v{font-family:var(--fonte-marca); font-weight:700; font-size:14.5px; line-height:1.2;
          margin-top:4px; font-variant-numeric:tabular-nums}
    .cc-col-corpo .cc-onde{margin-top:var(--e4); padding-top:var(--e3);
                           border-top:1px solid var(--hairline-2)}
    .cc-sem-semana{padding:var(--e5) var(--e4); text-align:center; color:var(--ink-3);
                   font-size:var(--t-corpo); line-height:1.6}

    /* os cartões do dia */
    .cc-cards{display:flex; flex-direction:column; gap:7px; padding:0 var(--e4) var(--e4)}
    .cc-card{border:1px solid var(--hairline); border-left:3px solid var(--proximo);
             border-radius:var(--r-m); padding:9px 11px; background:var(--surface)}
    .cc-card.cc-acerto{border-left-color:var(--feito)}
    .cc-card.cc-entrega{border-left-color:var(--verde)}
    .cc-card.cc-alerta{border-left-color:var(--divida); background:var(--divida-50)}
    .cc-card.cc-cobranca{border-left-color:var(--avencer)}
    .cc-ch{display:flex; justify-content:space-between; gap:8px; font-size:11px;
           font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3)}
    .cc-cn{font-size:13.5px; font-weight:600; line-height:1.3; color:var(--ink); margin-top:5px}
    .cc-cq{font-size:11.5px; color:var(--ink-2); margin-top:2px}
    .cc-cq b{color:var(--ink); font-variant-numeric:tabular-nums}
    .cc-neg{color:var(--divida); font-weight:600}
    .cc-mais{display:block; text-align:center; padding:11px; font-size:var(--t-apoio);
             font-weight:600; color:var(--verde); text-decoration:none;
             border-top:1px solid var(--hairline)}
    .cc-mais:hover{background:var(--verde-50)}

    /* ── OS AVISOS: no RODAPÉ (dono 23/09) ──
       A faixa nasceu no topo e comia a altura da tela: *"vamos retirar essas informações daí
       de cima, estão ocupando tela, vamos deixar embaixo"*. O kanban é o que ele abre a
       página para ver. E o título é seco — *"retire palavreado de IA"*. */
    .cc-acoes-topo{background:var(--surface); border:1px solid var(--hairline);
                   border-radius:var(--r-g); box-shadow:var(--sombra-1); overflow:hidden}
    .cc-acao{display:flex; gap:var(--e3); align-items:flex-start; padding:var(--e3) var(--e5);
             border-bottom:1px solid var(--hairline-2)}
    .cc-acao:last-child{border-bottom:0}
    .cc-tag{flex:none; margin-top:1px; padding:5px 8px; border-radius:var(--r-p);
            font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
    .cc-t-amb{background:var(--avencer-50); color:var(--avencer-ink)}
    .cc-t-div{background:var(--divida-50); color:var(--divida)}
    .cc-acao .cc-txt{font-size:var(--t-corpo); color:var(--ink); line-height:1.45}
    .cc-acao .cc-txt span{color:var(--ink-2)}


    /* ── A TELA DE UM REPRESENTANTE (§9az, Parte 2): o dia dele inteiro ── */
    .cc-raia{background:var(--surface); border:1px solid var(--hairline);
             border-radius:var(--r-g); box-shadow:var(--sombra-2); overflow:hidden}
    .cc-raia-topo{display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap;
                  padding:var(--e4) var(--e5); background:var(--surface-2);
                  border-bottom:1px solid var(--hairline)}
    .cc-raia-quem{flex:1; min-width:180px}
    .cc-raia-nome{font-family:var(--fonte-marca); font-weight:600; font-size:var(--t-secao);
                  line-height:1.2; color:var(--ink)}
    .cc-raia-sub{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:3px;
                 font-size:var(--t-apoio); color:var(--ink-3)}
    .cc-raia-semana{text-align:right}
    .cc-raia-semana .txt-s{display:block; margin-top:4px}
    .cc-raia-corpo{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr)}
    .cc-raia-esq{padding:var(--e5); border-right:1px solid var(--hairline); min-width:0}
    .cc-raia-dir{padding:var(--e5); min-width:0}
    .cc-prog-n{font-family:var(--fonte-marca); font-weight:700; font-size:var(--t-display);
               line-height:1; color:var(--ink); margin:var(--e2) 0 var(--e3);
               font-variant-numeric:tabular-nums}
    .cc-prog-n small{font-family:var(--fonte); font-weight:600; font-size:var(--t-corpo);
                     color:var(--ink-2)}
    .cc-raia-esq .cc-tres{margin-top:var(--e4)}

    /* a linha do tempo */
    .cc-lt{list-style:none; margin:0; padding:0; position:relative}
    .cc-lt:before{content:""; position:absolute; left:47px; top:6px; bottom:6px; width:2px;
                  background:var(--hairline)}
    .cc-lt .cc-passo{position:relative; display:grid; grid-template-columns:40px 1fr;
                     gap:var(--e4); padding:0 0 var(--e4)}
    .cc-lt .cc-passo:last-child{padding-bottom:0}
    .cc-lt .cc-h{font-size:var(--t-apoio); font-weight:600; line-height:1.5; text-align:right;
                 color:var(--ink-3); padding-top:2px; font-variant-numeric:tabular-nums}
    .cc-lt .cc-ev{position:relative; padding-left:var(--e4)}
    .cc-lt .cc-ev:before{content:""; position:absolute; left:-1px; top:6px; width:9px;
                         height:9px; border-radius:var(--r-full); background:var(--surface);
                         border:2px solid var(--proximo); transform:translateX(-3px)}
    .cc-lt .cc-acerto .cc-ev:before{border-color:var(--feito); background:var(--feito)}
    .cc-lt .cc-entrega .cc-ev:before{border-color:var(--verde); background:var(--surface)}
    .cc-lt .cc-alerta .cc-ev:before{border-color:var(--divida); background:var(--divida)}
    .cc-lt .cc-cobranca .cc-ev:before{border-color:var(--avencer); background:var(--surface)}
    .cc-lt .cc-vao .cc-ev:before{display:none}
    .cc-lt .cc-vao{padding-bottom:var(--e3)}
    .cc-lt .cc-o{font-size:var(--t-corpo); font-weight:600; line-height:1.35; color:var(--ink)}
    .cc-lt .cc-q{font-size:var(--t-apoio); color:var(--ink-2); margin-top:2px}
    .cc-lt .cc-q b{color:var(--ink); font-variant-numeric:tabular-nums}
    /* ⭐ O SELO DA CLIENTE (§9ba) — o que ELA disse, ao lado do nome dela. A palavra sai de
       `confirmacao_da_cliente`, a mesma que a ficha escreve. */
    .cc-lt .cc-o{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
    .cc-selo{flex:none; font-size:var(--t-rotulo)}
    .cc-fala{font-style:italic; color:var(--ink-3)}
    .cc-sil{font-size:var(--t-apoio); color:var(--ink-3); font-style:italic}

    .cc-faltam{margin-top:var(--e4); padding-top:var(--e3);
               border-top:1px solid var(--hairline-2)}
    .cc-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--e2)}
    .cc-chip{display:inline-block; padding:3px 10px; border-radius:var(--r-full);
             border:1px solid var(--hairline); background:var(--surface-2);
             font-size:var(--t-apoio); color:var(--ink-2); text-decoration:none}
    .cc-chip:hover{border-color:var(--verde-300); color:var(--ink)}
    .cc-chip b{color:var(--ink); font-weight:600}


    /* ── O MAPA (§9az, Parte 2b) ──
       Leaflet hospedado aqui (dono 23/09: *"vai com a (a)"*), ladrilhos do
       `tile.openstreetmap.org` — o mesmo provedor que o aplicativo já usa. */
    .cc-mapa{margin-top:var(--e4); border:1px solid var(--hairline);
             border-radius:var(--r-m); background:var(--surface-2); overflow:hidden}
    .cc-tela{width:100%; height:230px}
    .cc-mapa-grande{margin:0; border:0; border-radius:0;
                    border-top:1px solid var(--hairline)}
    .cc-mapa-grande .cc-tela{height:560px}
    .cc-mapa-pe{display:flex; align-items:center; gap:var(--e2); padding:9px var(--e3);
                border-top:1px solid var(--hairline); font-size:var(--t-apoio);
                color:var(--ink-2)}
    .cc-mapa-pe b{color:var(--ink)}
    .cc-mapa-pe2{font-size:11.5px; color:var(--ink-3);
                 border-top:1px dashed var(--hairline)}
    /* O número da parada. Desenhado pelo JS como `divIcon`, então a cor de FUNDO vem de lá
       (é a do representante); aqui fica a forma. */
    .cc-numero{width:22px; height:22px; border-radius:var(--r-full); border:2px solid #fff;
               color:#fff; font-family:var(--fonte-marca); font-weight:700; font-size:11px;
               line-height:22px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.35)}
    .cc-n-ult{width:28px; height:28px; line-height:28px; font-size:13px}
    .cc-leg{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e4);
            padding:var(--e3) var(--e5); font-size:var(--t-apoio); color:var(--ink-2)}
    .cc-leg span{display:flex; align-items:center; gap:7px}
    .cc-bola{width:11px; height:11px; border-radius:var(--r-full); display:inline-block;
             flex:none; background:var(--proximo)}
    /* As quatro cores da legenda são as MESMAS que o `central-mapa.js` usa, na mesma ordem —
       ele as lê dos tokens em tempo de execução para acompanhar o modo escuro. */
    /* As quatro da legenda são as MESMAS do mapa, e pelo mesmo motivo não seguem o tema:
       um ponto de uma cor na legenda e de outra no mapa não é legenda. */
    .cc-bola-0{background:var(--mapa-1)}
    .cc-bola-1{background:var(--mapa-2)}
    .cc-bola-2{background:var(--mapa-3)}
    .cc-bola-3{background:var(--mapa-4)}
    .cc-bola-vazia{background:var(--surface); border:2px solid var(--proximo)}
    /* O Leaflet dentro da régua do painel: fundo e fonte nossos, crédito discreto. */
    .leaflet-container{background:var(--surface-2); font-family:var(--fonte)}
    .leaflet-control-attribution{font-size:9.5px!important}


    /* ── AS ABAS DA MERCADORIA (§9az, Parte 3): Estoque · Panos · Balcão ── */
    .cc-blocos{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
               gap:var(--e4)}
    .cc-bloco{background:var(--surface); border:1px solid var(--hairline);
              border-radius:var(--r-g); box-shadow:var(--sombra-1); padding:var(--e5);
              min-width:0}
    .cc-bloco h3{margin:0 0 var(--e3); font-size:var(--t-rotulo); font-weight:600;
                 letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
    .cc-destaque{font-family:var(--fonte-marca); font-weight:700; font-size:26px;
                 line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
    .cc-selo-fonte{margin-top:var(--e2); font-size:var(--t-apoio); color:var(--ink-3);
                   line-height:1.45}
    .cc-linha{display:flex; align-items:baseline; justify-content:space-between;
              gap:var(--e3); padding:7px 0; font-size:var(--t-corpo);
              border-bottom:1px solid var(--hairline-2)}
    .cc-linha:last-child{border-bottom:0}
    .cc-linha b{font-family:var(--fonte-marca); color:var(--ink);
                font-variant-numeric:tabular-nums}

    @media (max-width:820px){
      .app{flex-direction:column}
      .lateral{width:auto; height:auto; position:static; flex-direction:row; overflow-x:auto;
               border-right:0; border-bottom:1px solid var(--hairline)}
      /* ⚠️ Só a MARCA some no celular. O rodapé fica: é onde vivem o interruptor de tema e
         o Sair — que, escondido, deixava o celular sem como sair do painel. */
      .lateral .marca{display:none}
      .cc-raia-corpo{grid-template-columns:1fr}
      .cc-raia-esq{border-right:0; border-bottom:1px solid var(--hairline)}
      /* A lista vira a própria barra horizontal; o rodapé continua ao lado dela. */
      .lateral .menu{flex:1; flex-direction:row; overflow-x:auto; overflow-y:visible;
                     min-height:0}
      /* ⚠️ A FAIXA FINA NÃO VALE AQUI. Abaixo de 820px a lateral já é uma barra deitada —
         uma lateral de 64px no celular seria um toco. O botão some junto. */
      .dobrar{display:none}
      [data-menu="fino"] .lateral{width:auto; padding:0}
      [data-menu="fino"] .nav-rot{display:inline}
      [data-menu="fino"] .lateral .nav{justify-content:flex-start; padding:9px 10px; gap:12px}
      .lateral .rodape{margin-top:0; padding:8px 10px; border-top:0; border-left:1px solid var(--hairline);
                       display:flex; align-items:center; gap:12px; flex:none}
      .conteudo{padding:20px 16px 40px}
      .tiles-3{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:520px){ .tiles-3{grid-template-columns:1fr} }
    .faixa-visita{position:sticky; top:0; z-index:50; display:flex; gap:14px;
                  align-items:center; justify-content:space-between; flex-wrap:wrap;
                  padding:10px 18px; background:#8A4B00; color:#fff; font-size:var(--t-corpo)}
    /* ⚠️ O marrom é PROPOSITALMENTE o mesmo nos dois temas: esta faixa existe para o dono
       nunca esquecer que está dentro do painel de outra empresa. Ela não se camufla. */
    .faixa-visita b{font-weight:600}
    .faixa-visita button{border:1px solid rgba(255,255,255,.55); background:transparent;
                         color:#fff; border-radius:var(--r-p); padding:6px 12px; font-size:var(--t-corpo);
                         cursor:pointer}
    .faixa-visita button:hover{background:rgba(255,255,255,.14)}


/* ═══════════════════════════════════════════════════════════════════════════
   OS DIAS TRABALHADOS — a aba Semana (§9ba, dono 24/09)

   > *"o interessante aqui é mostrar tbm o que ele fez na semana e nao so o que fez no dia"*

   A tela diária é inútil metade do tempo: às 7h da manhã ela diz "nada sincronizado hoje", e
   foi assim que o dono a abriu. A pasta É a semana — esta é a unidade da operação.
   ⚠️ Prefixo `cc-hist-`, e não `cc-sem-`: `.cc-sem-semana` já existe e quer dizer "SEM
   semana". Dois prefixos parecidos com sentidos opostos é colisão esperando acontecer.
   ═══════════════════════════════════════════════════════════════════════════ */
.cc-hist{background:var(--surface); border:1px solid var(--hairline);
    border-radius:var(--r-g); padding:var(--e5); margin-bottom:var(--e5);
    box-shadow:var(--sombra-1)}
.cc-hist-topo{display:flex; align-items:center; gap:var(--e4); flex-wrap:wrap;
    padding-bottom:var(--e4); border-bottom:1px solid var(--hairline);
    margin-bottom:var(--e5)}
.cc-hist-quem{flex:1; min-width:150px}
.cc-hist-nome{display:block; font:700 var(--t-secao)/1.25 var(--fonte); color:var(--ink);
    text-decoration:none}
.cc-hist-nome:hover{color:var(--verde)}

/* ⚠️ NÃO CRAVE 7 (auditoria de 24/09): a semana QUINZENAL emite 14 quadradinhos, e um
   `repeat(7,1fr)` os espremia em duas fileiras de larguras diferentes. O comentário do
   template insiste em não cravar o tamanho da semana; o CSS cravava. */
.cc-hist-dias{display:grid; gap:7px;
    grid-template-columns:repeat(auto-fit, minmax(118px, 1fr))}
.cc-hist-d{display:block; padding:10px 11px 11px; border:1px solid var(--hairline);
    border-radius:var(--r-m); background:var(--surface-2); text-decoration:none;
    color:inherit; min-width:0}
.cc-hist-d:hover{border-color:var(--verde); background:var(--verde-50)}
.cc-hist-cab{display:flex; align-items:baseline; justify-content:space-between; gap:4px;
    margin-bottom:8px}
.cc-hist-cab span{font:700 var(--t-rotulo)/1 var(--fonte); color:var(--ink-3);
    text-transform:uppercase; letter-spacing:.06em}
.cc-hist-cab b{font:700 var(--t-titulo)/1 var(--fonte); color:var(--ink);
    font-variant-numeric:tabular-nums}

/* A barra é proporcional ao MAIOR dia DELE — não a uma meta que ninguém combinou. */
.cc-hist-bar{height:4px; border-radius:var(--r-full); background:var(--hairline-2);
    margin-bottom:9px; overflow:hidden}
.cc-hist-bar i{display:block; height:100%; border-radius:var(--r-full); background:var(--verde)}

.cc-hist-fez{font:400 var(--t-apoio)/1.35 var(--fonte); color:var(--ink-2); margin-bottom:3px}
.cc-hist-fez b{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.cc-hist-nada{color:var(--ink-3)}
.cc-hist-val{display:block; font:700 var(--t-corpo)/1.3 var(--fonte); color:var(--verde-700);
    font-variant-numeric:tabular-nums}
.cc-hist-val span{font:400 var(--t-rotulo)/1 var(--fonte); color:var(--ink-3);
    display:block; margin-bottom:1px}
.cc-hist-val-n{font-weight:400; font-size:var(--t-apoio); color:var(--ink-3)}
.cc-hist-jan{margin-top:6px; font:400 var(--t-rotulo)/1.3 var(--fonte); color:var(--ink-3);
    font-variant-numeric:tabular-nums}

.cc-hist-hoje{border-color:var(--verde); border-width:2px; padding:9px 10px 10px;
    background:var(--surface)}
.cc-hist-hoje .cc-hist-cab b{color:var(--verde-700)}
.cc-hist-frente{background:transparent; border-style:dashed; opacity:.62}
.cc-hist-mudo .cc-hist-cab b{color:var(--ink-3)}

.cc-hist-pe{display:flex; align-items:flex-start; justify-content:space-between;
    gap:var(--e5); flex-wrap:wrap; margin-top:var(--e5); padding-top:var(--e4);
    border-top:1px solid var(--hairline)}
.cc-hist-soma{flex:1; min-width:230px; font:400 var(--t-corpo)/1.45 var(--fonte);
    color:var(--ink-2)}
.cc-hist-soma b{color:var(--ink); font-weight:700}
.cc-hist-tres{flex:none; min-width:280px; margin:0}

/* ---------- a faixa que navega entre os dias, na tela diária ---------- */
.cc-faixa{display:flex; align-items:center; gap:4px; flex-wrap:wrap;
    margin:0 0 var(--e5); padding:7px 9px; background:var(--surface-2);
    border:1px solid var(--hairline); border-radius:var(--r-g)}
.cc-faixa-rot{font:700 var(--t-rotulo)/1 var(--fonte); color:var(--ink-3);
    text-transform:uppercase; letter-spacing:.06em; margin-right:5px; padding:0 3px}
.cc-fx{display:flex; align-items:baseline; gap:6px; padding:6px 11px;
    border-radius:var(--r-p); text-decoration:none; color:var(--ink-2);
    font:400 var(--t-apoio)/1 var(--fonte)}
.cc-fx:hover{background:var(--verde-50); color:var(--ink)}
.cc-fx b{font:700 var(--t-corpo)/1 var(--fonte); color:var(--verde-700);
    font-variant-numeric:tabular-nums}
.cc-fx span{white-space:nowrap}
.cc-fx > span:last-child{color:var(--ink-3)}
.cc-fx-on{background:var(--verde); color:#fff}
.cc-fx-on b, .cc-fx-on > span:last-child{color:#fff}
.cc-fx-on:hover{background:var(--verde-800); color:#fff}
.cc-fx-frente{opacity:.5}
.cc-faixa-mais{margin-left:auto; padding:6px 10px; font:600 var(--t-apoio)/1 var(--fonte);
    color:var(--verde-700); text-decoration:none; white-space:nowrap}
.cc-faixa-mais:hover{text-decoration:underline}

@media (max-width:620px){
  .cc-hist-tres{min-width:0; width:100%}
}