/* ============================================================
   PADRÃO VISUAL PINAUTO — a folha desta aplicação

   Esta folha NÃO inventa um visual: reproduz o que já está no ar em
   controladoria.pinauto.com.br, com os valores tirados do `painel.css`,
   `app.css` e `fpa.css` REAIS (lidos do pacote do sistema). Nada aqui foi
   escolhido por gosto — cada cor e cada medida tem origem.

   PARECIDO NA APARÊNCIA, SOZINHO NO ASSUNTO — 18/09/2026
   ------------------------------------------------------
   A comissão é aplicação própria. O VERDE, as medidas, os cartões e as tabelas
   continuam os mesmos do outro sistema porque quem usa isto usa os dois no
   mesmo dia, e trocar de aba do navegador não deveria ser trocar de mundo.

   MAS A FOLHA VESTE UM PRODUTO SÓ. Esta é a regra que vale daqui para a frente
   e que orientou a limpeza de 18/09: nada aqui nomeia, descreve ou desenha o
   outro sistema. Saíram no mesmo dia a etiqueta `.produto` (que anunciava
   "mesmo banco e mesmas contas do Sistema Consolidado" na barra lateral das
   duas telas, o dia inteiro), o menu sanfonado `.nav-group`/`.nav-caret`, a
   pílula `.usuario` do topo deles e as cores `.marca-fiat/jeep/byd` — 40
   linhas que NENHUM HTML daqui usava. Quem identifica o produto agora é uma
   coisa só: o subtítulo do logo, "COMISSÃO DE VEÍCULOS".

   Estilo que chega junto com uma tela que não existe é dívida: um dia alguém
   o encontra, conclui que o controle é para usar, e o outro app volta pela
   porta dos fundos. A regra que segura o resto é a mesma: esta aplicação
   NUNCA pinta um link que ela não sabe abrir.

   OS NOMES DE CLASSE SÃO OS MESMOS DE LÁ — `.app`, `.sidebar`, `.nav`,
   `.content`, `.card`, `.kpi`, `.pill`, `.tbl` —, e ficam. O motivo original
   (poder trocar esta folha pela de lá) morreu com a decisão; o motivo que
   sobrou é mais forte: renomeá-los obrigaria a reescrever dois `.js` de 50 KB
   já validados sem mudar um pixel. Nome de classe não aparece na tela; nome
   de produto aparece — e é por isso que um foi embora e o outro ficou.

   O `app.css` do sistema avisa, e vale repetir aqui: "redefinir essas classes
   mudaria a aparência de telas já validadas — e 'só o visual' é exatamente
   como se perde a confiança num número que continua certo."
   ============================================================ */

:root {
    /* Verdes EXATOS do painel.css */
    --primary-color: #17614a;
    --primary-dark: #0f4d3a;
    --primary-light: #3fae86;
    --acc-green: #1f7a4d;
    --verde-faixa: #15803d;      /* o fim do degradê da faixa de seção */

    --bg: #f0f2f5;
    --panel: #ffffff;
    --panel-2: #f9f9f9;
    --line: #e3e6ea;
    --bord: #e6ecf2;
    --text: #333333;
    --muted: #666666;
    --success: #27ae60;
    --warning: #f39c12;
    --error: #e74c3c;

    --radius: 12px;
    --sombra-card: 0 4px 16px rgba(15, 77, 58, .10), 0 1px 3px rgba(0, 0, 0, .06);
    --sombra-card-hover: 0 8px 26px rgba(15, 77, 58, .16), 0 2px 6px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ============================================================
   A CASCA
   ============================================================ */
/* `minmax(0, 1fr)`, NUNCA `1fr` puro: item de grade tem `min-width: auto`, que
   é o conteúdo máximo. Com `1fr`, uma tabela de 10 colunas empurrava a coluna
   de conteúdo para 1.031px numa janela de 737px e a PÁGINA INTEIRA passava a
   rolar de lado — junto com a barra de "Apurado em". O `overflow-x` do `.rolagem`
   só funciona depois que o pai aceita encolher. */
.app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }

.sidebar { display: flex; flex-direction: column; background: var(--primary-dark); color: #fff; }

/* O MENU FICA, E A BARRA DE CIMA ROLA — 29/09/2026, pedido do dono do projeto.
   Até aqui era o contrário: a barra do topo grudava (248 px numa janela de 674,
   37% da tela) e o menu tinha a altura da página inteira — o "Sair" e o
   "apurado em" do rodapé dele só apareciam depois de rolar 53 vendedores.

   O requisito que fazia a barra grudar (a data à vista) continua cumprido no
   computador (acima de 1.000 px): o rodapé do menu leva o carimbo de data —
   "apurado em" na Prévia, "números da carga de" em Minha comissão
   e Minha loja —, e agora ele não sai da tela.

   ATÉ 1.000 PX NÃO CUMPRE: o menu vira uma faixa em cima, o rodapé some (ver
   "ESTREITO", abaixo) e a data fica só na barra de cima, que rola com a página.
   Faixa grudada come a tela do celular, e o preço é a data sair de vista ali
   depois da primeira rolagem.

   O `100dvh` vem depois do `100vh`, que é o que o navegador sem `dvh` usa: no
   tablet, com a barra de endereço à mostra, `100vh` é maior que a janela e o
   "Sair" do fim do menu ficaria embaixo da dobra. */
@media (min-width: 1001px) {
    .sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; align-self: start; }
    .nav { min-height: 0; }
}

.sidebar-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 18px 16px 14px;
}

.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; line-height: 1.1; }
.logo-marca {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 8px; background: #fff; color: var(--primary-dark);
    font-weight: 900; font-size: 17px;
}
/* O SUBTÍTULO VIROU "COMISSÃO DE VEÍCULOS" em 18/09/2026, quando a etiqueta
   `.produto` saiu da barra: passou a ser o ÚNICO lugar que diz de que é este
   app, e "COMISSÃO" sozinho deixaria de pé a pergunta "comissão de quê?" numa
   concessionária que também comissiona peças e serviços.

   O `letter-spacing` caiu de .14em para .09em POR MEDIDA, não por gosto. Com
   .14em o subtítulo ocupa 135px, não cabe no espaço do logo e quebra em duas
   linhas; com .09em ocupa 125,5px e o conjunto (logo 169,5 + gap 10 + botão
   30 = 209,5) cabe nos 218px úteis da barra de 250px, com 8,5px de folga.
   Mexer em qualquer um dos três — largura da barra, tamanho da fonte ou o
   espaçamento — devolve a quebra. */
.logo small {
    display: block; font-size: 9.5px; font-weight: 600;
    letter-spacing: .09em; line-height: 1.25; opacity: .72;
}

.sidetoggle {
    background: transparent; border: 0; cursor: pointer;
    color: rgba(255, 255, 255, .8); font-size: 20px; line-height: 1;
    padding: 2px 6px; border-radius: 6px;
}
.sidetoggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---- navegação ---- */
.nav { padding: 12px 8px; overflow-y: auto; flex: 1; }

.nav a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 12px; margin: 2px 0; border-radius: 6px;
    color: rgba(255, 255, 255, .82); text-decoration: none; font-size: 13px;
}
.nav a:hover { background: rgba(255, 255, 255, .12); }
.nav a.active { background: #fff; color: var(--primary-dark); font-weight: 600; }
/* O link com `hidden` (o "Minha comissão" de quem é só gerente): sem isto, o
   `display: flex` acima vence o `hidden` do navegador e o link aparece. */
.nav a[hidden] { display: none; }

/* O rodapé que diz de quando é o dado. Mais apagado de propósito: é carimbo de
   data, não título — não pode competir com o nome do app nem com a navegação. */
.sidebar-foot {
    padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, .52);
}

/* A LINHA DE SESSÃO é separada do rodapé de procedência de propósito: as duas
   dizem coisas diferentes (de quando é o número / quem está lendo) e a faixa
   estreita esconde só a primeira. "Sair" é link, não botão com cara de ação
   perigosa: sair não perde nada, e esconder a saída é o que faz gente deixar a
   sessão aberta num computador de loja. */
.sidebar-sessao {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 10px 16px 14px; border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, .52);
}
.sidebar-sessao .quem { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.sidebar-sessao a {
    color: rgba(255, 255, 255, .8); text-decoration: underline;
    text-underline-offset: 2px; cursor: pointer; flex: 0 0 auto;
}
.sidebar-sessao a:hover { color: #fff; }
/* Sem `config.js` a aplicação não fala com o Supabase: lê o JSON que o
   exportador escreveu. Isso NÃO É LOGIN DESLIGADO — é não haver servidor com
   quem autenticar. Dizer isso na barra evita a conclusão mais cara possível:
   achar que a tela do localhost é a tela que a Controladoria vai abrir. */
.sidebar-sessao.local { color: rgba(255, 255, 255, .45); }
.sidebar-foot strong { display: block; color: rgba(255, 255, 255, .88); font-weight: 600; }

/* ============================================================
   O TOPO — título, filtros inline e a procedência à direita
   ============================================================ */
/* A BARRA NÃO GRUDA MAIS — 29/09/2026. De 18 a 29/09 ela grudava, porque a
   data de referência tinha de continuar à vista depois de rolar 53 vendedores
   (devolução que chega depois muda o passado, e o número copiado hoje não se
   reproduz amanhã sem a data). Com 248 px de altura, grudada ela tomava um
   terço da tela. No computador (acima de 1.000 px) a data continua à vista: no
   rodapé do menu, que agora fica (ver o bloco `min-width: 1001px`, acima). Até
   1.000 px o rodapé está escondido, e a data fica só aqui, na barra que rola. */
.topo {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 13px 24px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.topo h1 { margin: 0; font-size: 21px; font-weight: 600; color: var(--text); }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filtro { display: inline-flex; align-items: center; gap: 7px; }
.filtro > label {
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
}
.filtro select {
    padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--panel); color: var(--text);
    font: 600 13px/1 inherit; font-family: inherit; cursor: pointer;
}

/* "Base: ..." — a procedência. É o equivalente ao "apurado em" da comissão, e
   por isso vive no topo, alinhada à direita. Desde 29/09/2026 a barra de cima
   rola com a página, e a procedência rola com ela: quem fica à vista, no
   computador (acima de 1.000 px), é o carimbo do rodapé do menu, que repete a
   data daqui. Até 1.000 px este bloco é a única data da tela. */
.procedencia { margin-left: auto; font-size: 12px; color: var(--muted); text-align: right; }
.procedencia strong { color: var(--text); font-weight: 600; }

/* Fonte que falhou NOMEIA A FONTE na própria linha, com a hora. Cor sozinha
   não é aviso: é decoração — e diagnóstico que exige clique não acontece. */
.proc-erro { color: #c1121f; font-weight: 600; }

/* A IDADE DO ARQUIVO, um degrau abaixo do resto do bloco. Ela não é do mesmo
   assunto das outras linhas: elas descrevem a APURAÇÃO (janela, competência,
   horizonte), esta descreve o ARQUIVO que a tela está lendo. Fica discreta
   porque na maioria dos dias não diz nada de novo — e presente porque no dia em
   que o exportador não rodar, é a única linha da tela que denuncia.
   O "discreta" era opacidade de 66%, que levava o #666 a #9a9a9a: 2,81:1 sobre o
   branco, em 11,5px — abaixo dos 4,5:1 do AA justamente na linha que denuncia
   o arquivo velho. O degrau agora é só o tamanho; a cor é a do bloco (5,74:1). */
.proc-idade { font-size: 11.5px; margin-top: 2px; }

/* A busca e o botão de exportar moram entre os filtros, no topo. */
.filtro input[type="date"] {
    padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--panel); color: var(--text);
    font: 13px/1 inherit; font-family: inherit;
}
.filtro .ate { font-size: 12px; color: var(--muted); }
.filtro .limpar { font-size: 12px; color: var(--primary-dark); }
.filtro input[type="search"] {
    padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--panel); color: var(--text);
    font: 13px/1 inherit; font-family: inherit; min-width: 230px;
}
.botao {
    padding: 7px 14px; border: 1px solid var(--primary-dark); border-radius: 8px;
    background: var(--primary-dark); color: #fff; cursor: pointer;
    font: 600 12.5px/1 inherit; font-family: inherit;
}
.botao:hover { background: var(--primary-color); }

.content { padding: 24px; }

/* ---- abas ---- */
.abas { display: flex; gap: 6px; margin-bottom: 18px; }
.aba {
    background: #eef3f8; color: var(--primary-dark);
    border: 1px solid #d5dee8; border-radius: 8px;
    padding: 8px 17px; font: 600 13px/1 inherit; font-family: inherit; cursor: pointer;
}
.aba.ativa { background: var(--primary-dark); color: #fff; border-color: var(--primary-dark); }

/* ============================================================
   KPI — barra colorida de 4px à esquerda, valor grande verde
   ============================================================ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }

.kpi {
    background: var(--panel); border: 1px solid var(--bord); border-radius: var(--radius);
    padding: 18px; position: relative; overflow: hidden;
}
.kpi::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--primary-light);
}
.kpi.k2::before { background: #4a8f7a; }
.kpi.k3::before { background: var(--warning); }
.kpi.k4::before { background: var(--primary-color); }
.kpi.k5::before { background: var(--primary-dark); }

.kpi .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.kpi .val { font-size: 23px; font-weight: 700; color: var(--primary-dark); }
.kpi .val.pos { color: var(--success); }
.kpi .val.neg { color: var(--error); }
.kpi .sub { font-size: 12px; margin-top: 6px; color: var(--muted); }
.kpi .sub.ok { color: var(--acc-green); }
.kpi .sub.ruim { color: var(--error); }

/* ============================================================
   SEÇÃO — a faixa verde em degradê que sangra até a borda
   ============================================================ */
.card {
    background: var(--panel); border: 1px solid var(--bord); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--sombra-card);
    transition: box-shadow .18s ease; margin-bottom: 18px;
}
.card:hover { box-shadow: var(--sombra-card-hover); }

.card h3 {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 16.5px; color: #fff;
    background: linear-gradient(90deg, var(--primary-dark) 0%, var(--verde-faixa) 100%);
    margin: -18px -18px 16px; padding: 13px 18px;
    border-radius: 12px 12px 0 0;
}
.card h3 .tag {
    font-size: 10px; background: rgba(255, 255, 255, .20); color: #eafaf0;
    padding: 3px 8px; border-radius: 20px; font-weight: 600;
}

/* A nota de rodapé que explica a conta — o sistema usa muito, e é o que evita
   a pergunta "de onde saiu esse número". */
.card .nota { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ============================================================
   TABELA
   ============================================================ */
.tbl {
    width: 100%; border-collapse: collapse; background: var(--panel);
    border-radius: 10px; overflow: hidden; font-size: 13.5px;
}
/* O CABEÇALHO DA TABELA NÃO GRUDA, E ISSO É ESCOLHA. `position: sticky` aqui
   só funcionaria se a tabela não estivesse dentro do `.rolagem` — e o
   `.rolagem` existe porque 10 colunas não cabem em notebook de 1.512px, e
   rolagem horizontal de PÁGINA é o jeito mais rápido de uma tela parecer
   quebrada (é o que o próprio `app.css` da casa avisa). Desde 29/09/2026
   nenhuma das duas gruda: no computador (acima de 1.000 px) quem fica à vista é
   o menu da esquerda, com a data no rodapé; até 1.000 px nada fica, e a data
   rola com a barra de cima. Deixar o `sticky` aqui seria uma regra que parece
   funcionar e não funciona: pior que não ter. */
.tbl th {
    text-align: left; padding: 10px 12px; background: var(--primary-dark); color: #fff;
    font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
    white-space: nowrap; z-index: 3;
}
.tbl td { padding: 9px 12px; border-bottom: 1px solid #eef2f0; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #f7faf9; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.sub td { font-weight: 700; background: #f7fafc; color: var(--primary-dark); border-top: 1px solid var(--bord); }
.tbl tfoot td { font-weight: 700; background: var(--panel-2); color: var(--primary-dark); border-top: 2px solid var(--bord); }

/* ============================================================
   PÍLULAS — o vocabulário de estado
   ============================================================ */
.pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.pill.ok { background: #e3f5ef; color: var(--acc-green); }
.pill.warn { background: #fdf0d5; color: #9c6b00; }
.pill.bad { background: #fbe4e6; color: #c1121f; }

/* ============================================================
   O QUE É SÓ DA COMISSÃO — classe nova só para o que não existe lá
   ============================================================ */

/* A barra de meta. É o elemento mais acionável da tela: o teste de meta é
   tudo-ou-nada no mês, então quem está perto muda o percentual de TODAS as
   linhas ao bater. A barra existe para essa distância ser vista, não lida. */
.meta-barra {
    position: relative; height: 6px; border-radius: 3px;
    background: #e8ece9; overflow: hidden; min-width: 90px;
}
.meta-barra i { display: block; height: 100%; border-radius: 3px; background: var(--primary-color); }
.meta-barra.bateu i { background: var(--success); }
.meta-barra.perto i { background: var(--warning); }

/* O percentual aplicado. 8% e 10% não podem se confundir de relance — é a
   diferença de 25% na comissão do mês inteiro. */
.regra { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 11.5px; font-weight: 700; background: #eef3f0; color: var(--primary-color); }
.regra.acima { background: #e3f5ef; color: var(--acc-green); }

/* PENDENTE não é erro: é um número que ainda vai mudar porque falta dado.
   Amarelo de atenção, nunca vermelho. */
.pendente {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 7px; border-radius: 5px;
    background: #fdf0d5; border: 1px solid #f0d795; color: #9c6b00;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.pendente::before { content: '!'; font-weight: 900; }

/* SEM CADASTRO É PENDÊNCIA — 29/09/2026. Até aqui era vermelho ("cadastro
   inválido"): linha rosada presa no topo, duas pílulas vermelhas por linha e o
   cartão em cor de erro. Na virada de todo mês o vendedor novo ainda não está no
   cadastro, e a tela parecia quebrada. O vermelho fica para o que invalida o
   número inteiro (o cadastro não carregado, `.aviso-filtros.grave`). */
.kpi.atencao::before { background: var(--warning); }
.nao-calculada { color: var(--muted); }

/* O par "8% → 10%" na mesma célula. O teste é tudo-ou-nada e retroativo: o
   segundo número é o que a linha inteira passa a valer se a meta for batida. */
.seta-pct { color: var(--muted); font-size: 11.5px; font-weight: 600; }

/* A venda que a busca encontrou. Achar o chassi é a tarefa número um da
   Controladoria; depois de achado, ele tem de saltar da tabela. */
.tbl table.interna tr.achado > td { background: #fff4cc; font-weight: 600; }

/* Aviso de topo, colado no que ele fala — padrão `.aviso-filtros` da casa. */
.aviso-filtros {
    margin: 0 0 16px; padding: 10px 13px;
    background: #fff8e1; border: 1px solid #f0d795; border-left: 4px solid #d99a1e;
    border-radius: 5px; color: #6b4e0a; font-size: 12.5px; line-height: 1.5;
}

/* GRAVE é o que invalida o número, não o que o deixa impreciso: cadastro não
   carregado põe 0% em todo mundo sem uma linha pendente sequer. */
.aviso-filtros.grave {
    background: #fdeced; border-color: #f3c9c5; border-left-color: #c1121f; color: #7a1420;
}

/* OK é a confirmação de uma AÇÃO que a pessoa pediu — hoje só a planilha do DP
   (25/09/2026), que diz quantos vendedores e quanto saiu. Verde da casa, e
   nunca para estado do dado: o amarelo e o vermelho acima continuam sendo os
   únicos avisos sobre o número. */
.aviso-filtros.ok {
    background: #e3f5ef; border-color: #b9e2d3; border-left-color: var(--acc-green); color: #14512f;
}


/* A tabela rola DENTRO dela, não arrastando a página inteira. Rolagem
   horizontal de página é o jeito mais rápido de uma tela parecer quebrada. */
.rolagem { overflow-x: auto; }

/* ------------------------------------------------------------
   ESTREITO — a barra lateral vira uma faixa, não um bloco

   A primeira versão desta regra punha a barra em `position: sticky` numa
   coluna só. Com 800px de largura ela ocupava 400px de altura, empurrava a
   tabela para fora da vista e a página inteira passava a rolar de lado: a
   tela parecia travada, mesmo funcionando.

   A NAVEGAÇÃO NÃO SOME — mudou em 18/09/2026. A regra antiga escondia `.nav`
   abaixo de 1000px, e era defensável enquanto só UMA tela era alcançável e o
   resto do menu era decoração. Agora são várias páginas reais: esconder a
   navegação no celular deixa a pessoa sem como ir de uma à outra.

   O que sai na faixa estreita é o rodapé de procedência — o "Base:" do topo
   já diz a data, e repetir a mesma data duas vezes num celular custa a altura
   de uma linha da tabela. A linha de sessão fica: quem está logado precisa
   poder sair de qualquer largura.
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .sidebar { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px; padding-right: 12px; }
    .sidebar-topo { padding: 10px 14px; }
    .nav { display: flex; gap: 4px; padding: 8px 0; flex: 1; overflow-x: auto; }
    .nav a { margin: 0; white-space: nowrap; }
    .sidebar-foot { display: none; }
    .sidebar-sessao { border-top: 0; padding: 8px 0; white-space: nowrap; }
    .topo { gap: 10px; padding: 12px 16px; }
    .topo h1 { font-size: 18px; width: 100%; }
    .procedencia { margin-left: auto; }
    .content { padding: 16px; }
    .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .kpi { padding: 14px; }
    .kpi .val { font-size: 19px; }
}

@media (max-width: 620px) {
    .nav a { padding: 7px 10px; font-size: 12.5px; }
    .procedencia { width: 100%; text-align: left; margin-left: 0; }
}

/* ============================================================
   INTERAÇÃO — o que responde ao clique, e o que não responde
   ============================================================ */

/* Linha que abre o detalhe. A seta gira em vez de trocar de caractere: sinaliza
   estado sem mudar a largura da célula (e sem sacudir a tabela inteira). */
.tbl tr.abre { cursor: pointer; }
.tbl tr.abre .seta {
    display: inline-block; width: 12px; color: var(--muted);
    transition: transform .15s ease;
}
.tbl tr.abre.aberta .seta { transform: rotate(90deg); color: var(--primary-color); }
/* O BOTÃO DO NOME, que é quem abre o detalhe (a linha deixou de ser
   `role=button`). Sem cara de botão — a célula continua parecendo a mesma —,
   mas com o foco visível que a linha nunca teve. */
.abre-bt {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.abre-bt:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; border-radius: 3px; }
.tbl tr.abre.aberta > td { background: #eef3f0; font-weight: 600; }

.tbl tr.detalhe > td { background: #f7faf9; padding: 12px 16px 14px 34px; }
.tbl table.interna { box-shadow: none; border: 1px solid var(--bord); font-size: 12.5px; }
.tbl table.interna th { position: static; background: var(--primary-color); font-size: 10.5px; }
.tbl table.interna td { padding: 6px 10px; }

/* AS VENDAS COM AS COLUNAS DA ABA FILTRO — 01/10/2026. Por padrão, só as 10 que o dono escolheu: as
   outras 20 têm a classe `extra` e ficam escondidas até o "Mostrar todas as colunas" pôr
   `todas-colunas` no `#tela`. Aí a tabela fica mais larga que o cartão e rola para o lado DENTRO do
   `.rolagem` (a caixa do detalhe), nunca a página. No padrão o cabeçalho quebra a linha (os títulos
   longos, como "Margem antes do ajuste", não alargam a coluna); com todas, não quebra. */
#tela:not(.todas-colunas) table.vendas .extra { display: none; }
/* A CAIXA DO DETALHE ROLA, E NÃO A TABELA DOS VENDEDORES. Ela mora numa célula (`tr.detalhe > td`), e
   célula de tabela cresce para caber o que tem dentro: com as 30 colunas, a célula alargava a tabela
   inteira, e Loja, Margem e Comissão dos vendedores saíam da tela (medido no navegador em 01/10/2026,
   a 1512 px). Com largura zero e mínimo de 100%, a caixa não empurra a célula: fica da largura dela, e
   o `overflow-x` do `.rolagem` rola só as vendas. */
.tbl tr.detalhe > td > .rolagem { width: 0; min-width: 100%; }
.tbl table.vendas th { white-space: normal; vertical-align: bottom; }
#tela.todas-colunas .tbl table.vendas th { white-space: nowrap; }
.tbl table.vendas td.modelo { white-space: normal; min-width: 120px; }
.tbl table.vendas td.chassi .nf { display: block; color: var(--muted); font-size: 11px; }
.tbl table.vendas .sem-fonte { color: var(--muted); }
.tbl table.vendas .a-apurar { color: #9c6b00; }
.barra-colunas { display: flex; justify-content: flex-end; margin: 0 0 8px; }

/* Cabeçalho ordenável. A seta só aparece na coluna atual — três seções de
   ordenação simultâneas seriam três perguntas sem resposta. */
.tbl th.ord { cursor: pointer; user-select: none; }
/* O cabeçalho é verde-escuro: o contorno escuro da casa sumiria nele. Branco
   por dentro da célula, que é onde o olho está. */
.tbl th.ord:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.tbl th.ord:hover { background: var(--primary-color); }
.tbl th.ord.atual { background: var(--primary-color); }
.seta-ord { font-size: 9px; opacity: .9; }

/* A barra recolhe. É a única coisa que o `.sidetoggle` faz, e vale por si:
   numa tela de 10 colunas, 250px de barra são 250px que a tabela não tem.

   RECOLHIDA NÃO É SUMIDA — 29/09/2026. Era `0 1fr` com `overflow: hidden`: a
   coluna de 0 px escondia junto o próprio botão ☰, que mora dentro da barra, e o
   menu só voltava recarregando a página. Agora sobra uma faixa de 52 px só com o
   botão (o logo, o menu, o rodapé e a sessão saem; a barra e o topo dela ficam).
   `minmax(0, 1fr)`, como na `.app`: com `1fr` puro a tabela larga empurra a
   coluna. Até 1.000 px a barra é uma faixa em cima, e recolhida ela continua
   uma faixa em cima, só com o botão — e não uma coluna de 52 px ao lado. */
.app.recolhida { grid-template-columns: 52px minmax(0, 1fr); }
.app.recolhida .sidebar { overflow: hidden; }
.app.recolhida .logo,
.app.recolhida .nav,
.app.recolhida .sidebar-foot,
.app.recolhida .sidebar-sessao { display: none; }
.app.recolhida .sidebar-topo { justify-content: center; padding: 18px 0 14px; }
@media (max-width: 1000px) {
    .app.recolhida { grid-template-columns: minmax(0, 1fr); }
    .app.recolhida .sidebar-topo { justify-content: flex-start; padding: 10px 14px; }
}

/* A pendência que vale para a competência inteira aparece UMA vez, acima do
   detalhe — e discreta. Ela não é um alerta sobre aquela venda; é contexto.

   ERA AMARELA ATÉ 21/09/2026, e o comentário acima já dizia por que não devia:
   "não é um alerta; é contexto". Medido com os 53 vendedores abertos, ela
   aparecia em 53 DE 53 — o frete não tem fonte para NENHUMA venda, então a nota
   é universal por construção. Amarelo que aparece em 100% dos casos não avisa
   nada: ele só gasta a cor que o `piso`, o `bateu` e a `janela encerrada`
   precisam para significar alguma coisa. O texto continua idêntico. */
.nota-detalhe {
    margin: 0 0 10px; padding: 7px 11px;
    background: var(--bg); border-left: 3px solid var(--bord); border-radius: 4px;
    color: var(--muted); font-size: 12px; line-height: 1.45;
}

/* ============================================================
   FORMULÁRIO — o que a casa ainda não tinha (etapa 5, 18/09/2026)

   Até aqui as telas de comissão só LIAM: a folha tinha `.filtro select`,
   `.botao` e mais nada. A primeira escrita foi o lançamento de ajuste (a tela
   saiu em 30/09/2026); hoje estas classes servem ao Cadastro, às Metas e aos
   Acessos. Escrita precisa de campo, de rótulo e de um botão que se recusa a
   ser clicado.

   Tudo abaixo é CLASSE NOVA — nenhuma regra de cima foi alterada, então a
   prévia continua pintando exatamente como pintava. As cores saem das mesmas
   variáveis; o amarelo de `.pendente` e o de `.aviso-filtros` NÃO são reusados
   aqui, porque na casa eles significam "número que ainda vai mudar porque falta
   dado" — e uma gravação não é isso. Gastar o amarelo com o que é
   normal é como o olho aprende a pular o amarelo que importa.
   ============================================================ */

/* A grade do formulário: campos lado a lado enquanto couberem. */
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 4px 0 0; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo.largo { grid-column: 1 / -1; }
.campo > label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.campo input, .campo select, .campo textarea {
    font: inherit; font-size: 13px; color: var(--text);
    padding: 8px 10px; border: 1px solid var(--bord); border-radius: 7px;
    background: #fff; width: 100%; box-sizing: border-box;
}
.campo textarea { resize: vertical; min-height: 62px; line-height: 1.45; }
/* O FOCO TEM DE SE VER. O contorno era zerado, e sobrava só a borda #3fae86 —
   2,76:1 sobre o branco, abaixo dos 3:1 que o contorno de foco pede. O
   contorno escuro da casa dá 9,8:1; a borda verde e a sombra continuam como
   enfeite. */
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: 2px solid var(--primary-dark); outline-offset: 1px;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(63, 174, 134, .18);
}
/* A dica do campo é do CAMPO, não do número: diz o que digitar, uma linha. */
.campo .dica { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* Botão que não pode ser clicado tem de PARECER que não pode. */
.botao:disabled, .botao[disabled] { opacity: .45; cursor: not-allowed; background: var(--muted); }
.botao.secundario { background: #fff; color: var(--primary-color); border: 1px solid var(--bord); }
.botao.secundario:hover { background: var(--panel-2); }
.botao.mini { padding: 4px 10px; font-size: 11.5px; }
.botao.perigo { background: #fff; color: #c1121f; border: 1px solid #f3c9c5; }
.botao.perigo:hover { background: #fdeced; }

/* A barra de ações do formulário. O rótulo do botão repete o que ele grava,
   então ele é largo de propósito. */
.acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* A COLUNA DO "ESCOLHER" NÃO PODE SAIR DA TELA. Medido em ~780px (computador
   de loja não é largo): a tabela rolava de lado e o botão da linha — o passo
   obrigatório do fluxo — ficava à direita, fora da vista. `sticky` na última
   coluna resolve sem mexer no HTML. Hoje são as tabelas do Cadastro.

   A regra leva uma CLASSE PRÓPRIA (`.fixa-ultima`) em vez de valer para toda
   `.tbl`: a prévia tem tabelas largas cuja última coluna é número, e grudá-la
   mudaria uma tela validada sem ninguém ter pedido.

   O `overflow: visible` NÃO É DESCUIDO: `.tbl` tem `overflow: hidden` para
   arredondar os cantos, e `overflow` diferente de `visible` num ancestral
   transforma a própria tabela no container de rolagem do `sticky` — que então
   não gruda em nada. O canto arredondado desta tabela sai do `.rolagem`. */
.rolagem .tbl.fixa-ultima { overflow: visible; }
.rolagem .tbl.fixa-ultima th:last-child,
.rolagem .tbl.fixa-ultima td:last-child { position: sticky; right: 0; z-index: 2; }
.rolagem .tbl.fixa-ultima tbody td:last-child {
  background: var(--panel); box-shadow: -6px 0 6px -6px rgba(16,24,40,.18);
}
.rolagem .tbl.fixa-ultima tbody tr:hover td:last-child { background: #f7faf9; }

/* OS PADRÕES ASSUMIDOS (bloco `decisoes`), no fim da prévia e recolhidos: é
   registro para quem confere, não leitura de todo dia. */
.card details.decisoes summary { cursor: pointer; font-size: 12.5px; color: var(--primary-color); font-weight: 600; }
.card details.decisoes summary:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
.decisoes-lista { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; }
.decisoes-lista dt { font-weight: 600; color: var(--text); margin-top: 8px; }
.decisoes-lista dd { margin: 2px 0 0; color: var(--muted); }

/* ============================================================
   LOGIN — a tela que passou a ser nossa (18/09/2026)

   Enquanto a comissão ia virar página do Sistema Consolidado, quem autenticava
   era a casca deles. Como aplicação própria, o login é daqui — contra o MESMO
   Supabase Auth, as mesmas contas, as mesmas senhas.

   É ONDE A APLICAÇÃO SE APRESENTA: a marca, o nome do produto grande e os
   campos, e só. As frases da conta, acima dos campos, e o rodapé saíram em
   29/09/2026 porque carregavam o cartão; a dica da conta aparece na recusa da
   senha errada. Dentro do app o assunto é comissão e só.

   O fundo é o verde da casa em degradê, não o `--bg` cinza: é a única tela do
   app sem barra lateral, e sem o verde ela não se parece com nada.
   ============================================================ */
.tela-login {
    min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background: linear-gradient(160deg, var(--primary-dark), var(--primary-color) 55%, var(--acc-green));
}
.cx-login {
    width: 100%; max-width: 380px; background: var(--panel);
    border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    padding: 26px 26px 22px;
}
.cx-login .marca { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.cx-login .marca .logo-marca { background: var(--primary-dark); color: #fff; }
.cx-login .marca b { font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.cx-login h1 { margin: 10px 0 2px; font-size: 19px; color: var(--primary-dark); }
/* No login o formulário vem logo depois do título (29/09/2026): este é o respiro
   que a frase da conta dava. Na `senha.html` a frase continua entre os dois, e
   isto não pega. */
.cx-login h1 + form { margin-top: 18px; }
/* A frase acima dos campos (desde 29/09/2026, só na `senha.html`). É instrução
   de preenchimento, não explicação de filosofia. */
.cx-login .conta { margin: 0 0 18px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cx-login .campo + .campo { margin-top: 12px; }
.cx-login .botao { width: 100%; margin-top: 18px; justify-content: center; }
/* A recusa aparece ACIMA do botão, onde o olho já está, e NOMEIA a causa:
   "senha errada" e "conta desativada" pedem coisas opostas de quem lê — uma se
   resolve digitando de novo, a outra só com o administrador. */
.cx-login .recusa {
    margin: 16px 0 0; padding: 9px 12px; border-radius: 8px;
    background: #fdecea; border-left: 3px solid var(--error);
    color: #8a1c13; font-size: 12.5px; line-height: 1.45;
}
.cx-login .recusa strong { display: block; }

/* ============================================================
   A TELA DO VENDEDOR — "Minha comissão" (27/09/2026)
   ============================================================
   Classes novas, todas `vd-`: nada do que a Prévia usa muda. */

/* O aviso fixo do topo: não é alerta (amarelo é pendência), é o combinado —
   a tela mostra, quem paga é o fechamento da Controladoria. */
.vd-nota-previa {
    margin: 0 0 16px; padding: 9px 13px; border-radius: 5px;
    background: var(--panel-2); border: 1px solid var(--bord); color: var(--muted);
    font-size: 12.5px; line-height: 1.5;
}

/* A frase que motiva: quanto a meta ou o bônus ainda valem. */
.vd-salto { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--acc-green); font-weight: 600; }
.kpi .meta-barra { margin-top: 10px; }

.vd-chassi { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* As parcelas da folha, abertas sob demanda. */
.vd-detalhe summary { cursor: pointer; color: var(--primary-dark); font-size: 12px; white-space: nowrap; }
.vd-parcelas {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px 14px;
    margin: 8px 0 4px; font-size: 12.5px;
}
.vd-parcelas > div { display: flex; justify-content: space-between; gap: 14px; }
.vd-parcelas dt { color: var(--muted); }
.vd-parcelas dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Na tabela, as parcelas abrem numa faixa da largura toda, em colunas. */
.vd-abrir { color: var(--primary-dark); font-size: 12px; white-space: nowrap; }
.tbl tr.vd-parcelas-linha .vd-parcelas {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 36px; margin: 0;
}

/* No computador, a tabela; no celular, um cartão por venda. As duas saem da
   mesma lista (`vendedor.js`), e só uma aparece. */
.vd-cartoes { display: none; }
.vd-cartao { border: 1px solid var(--bord); border-radius: 8px; padding: 12px 14px; background: #fff; }
.vd-cartao-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.vd-cartao-topo strong { font-size: 16px; color: var(--primary-dark); white-space: nowrap; }
.vd-cartao-modelo { font-weight: 600; min-width: 0; }
.vd-cartao-linha { font-size: 12.5px; color: var(--muted); margin: 4px 0 2px; }

.vd-ajustes { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }

@media (max-width: 700px) {
    .vd-tabela { display: none; }
    .vd-cartoes { display: grid; gap: 10px; }
}
/* ============================================================
   O PORTAL DO VENDEDOR — as quatro seções (30/09/2026)
   ============================================================
   O desenho do "app do colaborador" com a paleta e a fonte da casa: nenhuma cor
   nova. Os tons claros são os que o arquivo já usa (o `#e3f5ef` do `.pill.ok`, o
   `#b9e2d3` e o `#14512f` do `.aviso-filtros.ok`); os escuros, os tokens. O anel
   é um `conic-gradient` (sem SVG), com o ângulo no `style` do elemento. */
.vd-secao[hidden] { display: none; }
.vd-titulo-secao { margin: 4px 0 2px; font-size: 20px; color: var(--primary-dark); }
.vd-sub-secao { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.vd-saudacao { margin: 4px 0 14px; font-size: 22px; line-height: 1.25; color: var(--primary-dark); }
.vd-sem-venda { margin: -6px 0 14px; color: var(--muted); }

/* O "VER COMO" do administrador (30/09/2026): a faixa de cima, que diz de quem é
   o portal que ele está vendo. Tracejada, como o que não é do vendedor. */
.vd-ver-como {
    margin: 0 0 16px; padding: 12px 14px; border-radius: 8px;
    border: 1px dashed var(--primary-light); background: var(--panel);
}
.vd-ver-como-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vd-ver-como label { font-weight: 700; color: var(--primary-dark); }
.vd-ver-como select { min-height: 44px; min-width: 0; max-width: 100%; flex: 1 1 240px; font: inherit; }
.vd-ver-como p { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }

/* O seletor de meses do portal (06/10/2026): o mesmo feitio do "ver como". */
.vd-mes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.vd-mes label { font-weight: 700; color: var(--primary-dark); }
.vd-mes select { min-height: 44px; min-width: 0; max-width: 100%; flex: 1 1 200px; font: inherit; }

/* A barra de "atualizado às": a hora da tela, que não é a hora do número. */
.vd-atualizacao {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin: 0 0 16px; font-size: 12.5px; color: var(--muted);
}

/* Duas colunas na tela larga (7 + 5 do desenho); uma até 1.100 px, onde o
   conteúdo (a tela menos o menu de 250 px) já não cabe em duas. */
.vd-grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px; align-items: start; }
.vd-grade > .card, .vd-lado > .card { margin-bottom: 0; }
.vd-lado { display: grid; gap: 18px; }
.vd-grade + .vd-atalhos, .vd-grade + .card, .vd-grade + .nota { margin-top: 18px; }

.vd-rotulo { display: block; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--acc-green); }
.vd-valor-grande { display: block; font-size: 40px; line-height: 1.1; font-weight: 800; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.vd-valor-medio { display: block; font-size: 26px; line-height: 1.2; font-weight: 800; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.vd-sub { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }

/* A meta: o anel e os números do lado. */
.vd-meta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.vd-anel { position: relative; width: 180px; height: 180px; border-radius: 50%; flex-shrink: 0; }
.vd-anel-miolo {
    position: absolute; inset: 18px; border-radius: 50%; background: var(--panel);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.vd-anel-miolo strong { font-size: 38px; line-height: 1; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.vd-anel-miolo span { font-size: 12px; color: var(--muted); margin-top: 4px; }
.vd-numeros { margin: 0; display: grid; gap: 12px; flex: 1 1 200px; }
.vd-par dt { font-size: 12px; color: var(--muted); }
.vd-par dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.vd-par dd small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }

/* A trilha de níveis. */
.vd-nivel-atual { font-size: 24px; font-weight: 800; color: var(--primary-dark); }
.vd-niveis { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.vd-nivel {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px;
    padding: 8px 10px; border-radius: 8px; border: 1px solid var(--bord); font-size: 13px;
}
.vd-nivel-nome { font-weight: 700; min-width: 76px; }
.vd-nivel-limite { color: var(--muted); flex: 1 1 auto; }
.vd-nivel-situacao { margin-left: auto; text-align: right; color: var(--muted); }
.vd-nivel.atingido { background: #e3f5ef; border-color: #b9e2d3; }
.vd-nivel.atingido .vd-nivel-situacao { color: var(--acc-green); }
.vd-nivel.atual { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.vd-nivel.atual .vd-nivel-limite, .vd-nivel.atual .vd-nivel-situacao { color: #fff; }
.vd-nivel.proximo { border-style: dashed; border-color: var(--primary-light); }
.vd-nivel.proximo .vd-nivel-situacao { color: var(--primary-dark); font-weight: 600; }
.vd-nivel-mini { margin-top: 6px; font-weight: 600; color: #fff; }

/* Os atalhos do Início. */
.vd-atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.vd-atalho {
    display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: 16px 18px;
    background: var(--panel); border: 1px solid var(--bord); border-radius: var(--radius);
    box-shadow: var(--sombra-card); text-decoration: none; color: var(--text);
}
.vd-atalho:hover { box-shadow: var(--sombra-card-hover); }
.vd-atalho:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
.vd-atalho-valor { font-size: 22px; font-weight: 800; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.vd-atalho-ver { font-size: 12.5px; font-weight: 600; color: var(--acc-green); }

/* O cartão de destaque (a comissão, a posição): o verde escuro da casa. */
.vd-destaque { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.vd-destaque .vd-rotulo, .vd-destaque .vd-sub { color: #e3f5ef; }
.vd-destaque .vd-valor-grande { color: #fff; }
.vd-destaque .vd-par dt { color: #e3f5ef; }
.vd-destaque .vd-par dd, .vd-destaque .vd-par dd small { color: #fff; }
.vd-destaque .nota { color: #e3f5ef; }
.vd-estado { margin: 16px 0; padding: 12px 14px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; }
.vd-estado.bloqueado { border: 1px dashed var(--primary-light); color: #fff; }
.vd-estado.liberado { background: #e3f5ef; color: #14512f; font-weight: 600; }
.vd-conta { border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 14px; }

/* O simulador. */
.vd-sim-titulo { display: block; margin: 6px 0; font-size: 20px; font-weight: 800; color: var(--primary-dark); }
.vd-sim-extra { display: block; font-size: 28px; font-weight: 800; color: var(--acc-green); font-variant-numeric: tabular-nums; }
.vd-sim-regua { width: 100%; min-height: 44px; margin: 6px 0; accent-color: var(--primary-color); }
.vd-sim-botoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vd-sim-botoes .botao { min-height: 44px; justify-content: center; padding: 0 6px; }
.vd-sim-botoes .botao[aria-pressed="true"] { background: var(--primary-color); color: #fff; }
.vd-sim-resultado { margin-top: 16px; padding: 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--bord); }
/* Quebra de linha no celular estreito: o selo do "+ R$" vazava do cartão e a página rolava de lado. */
.vd-sim-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 6px 10px; }
.vd-sim-comissao { display: block; font-size: 28px; font-weight: 800; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.vd-sim-delta {
    padding: 4px 10px; border-radius: 999px; background: var(--primary-dark); color: #fff;
    font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.vd-sim-frase { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #fff; font-weight: 600; font-size: 13px; }
.vd-sim-frase.bate { background: #e3f5ef; color: #14512f; }

/* Os carros: a grade de vagas (vendido cheio, próxima tracejada). */
.vd-vagas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.vd-vaga { height: 40px; border-radius: 10px; border: 2px dashed var(--bord); }
.vd-vaga.vendido { background: var(--primary-color); border: 2px solid var(--primary-color); }

/* O ranking: o pódio e a lista de quem está perto. */
.vd-podio { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; justify-content: center; gap: 12px; flex-wrap: wrap; }
.vd-degrau { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 150px; text-align: center; }
.vd-degrau-nome { font-weight: 700; color: var(--primary-dark); }
.vd-degrau-carros { font-size: 12.5px; color: var(--muted); }
.vd-degrau-bloco {
    width: 100%; margin-top: 6px; border-radius: 10px 10px 0 0; padding-top: 12px;
    background: var(--primary-color); color: #fff; font-size: 30px; font-weight: 800;
}
.vd-degrau.pos1 .vd-degrau-bloco { height: 150px; background: var(--primary-dark); }
.vd-degrau.pos2 .vd-degrau-bloco { height: 110px; }
.vd-degrau.pos3 .vd-degrau-bloco { height: 80px; background: var(--acc-green); }
.vd-voce {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    background: var(--primary-dark); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.vd-degrau .vd-voce { margin-left: 0; }
.vd-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vd-rank-linha {
    display: grid; grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px; border: 1px solid var(--bord); font-size: 13.5px;
}
.vd-rank-linha.eu { background: #e3f5ef; border-color: #b9e2d3; font-weight: 700; }
.vd-rank-pos { font-weight: 800; color: var(--primary-dark); }
.vd-rank-barra { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.vd-rank-barra i { display: block; height: 100%; background: var(--primary-color); }
.vd-rank-carros { white-space: nowrap; color: var(--muted); }

@media (max-width: 1100px) {
    .vd-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
    .vd-app { grid-template-rows: auto 1fr; }
}
/* No celular, que é onde o vendedor mais abre a página: tudo numa coluna, e o
   menu das quatro seções numa faixa de abas só dele (antes, com um link só, ele
   sumia). Só nesta página (`vd-app`): a Prévia continua como está. */
@media (max-width: 620px) {
    .vd-app .sidebar { justify-content: space-between; }
    .vd-app .nav { order: 3; flex: 1 0 100%; padding: 0 12px 8px; }
    .vd-app .nav a { min-height: 44px; }
    .vd-app .kpis { grid-template-columns: minmax(0, 1fr); }
    .vd-meta { justify-content: center; }
    .vd-anel { width: 150px; height: 150px; }
    .vd-valor-grande { font-size: 32px; }
    .vd-degrau { width: 30%; min-width: 96px; }
}

/* ============================================================
   A TELA DO GERENTE — "Minha loja" (28/09/2026)
   Classes `gr-`; os carros usam as `vd-` de "Minha comissão" (o carros.js).
   ============================================================ */
.gr-situacao {
    display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600;
    background: var(--panel-2); color: var(--muted); white-space: nowrap;
}
.gr-situacao.ok { background: #e6f4ea; color: var(--acc-green); }
.gr-situacao.perto { background: #fff4cc; color: #7a5b00; }
.gr-situacao.falta { background: #fff6f6; color: #a33; }
.gr-meta { min-width: 180px; }
.gr-meta .meta-barra { margin-top: 5px; }
.gr-abrir { color: var(--primary-dark); font-size: 12px; white-space: nowrap; }
.tbl tr.gr-carros > td { padding: 10px 12px 14px 20px; }
/* Os carros abertos não mexem na largura das colunas da equipe: a caixa não pede
   largura (width 0) e ocupa a célula inteira (min-width 100%); o que não couber
   rola dentro dela. Sem isto, abrir as parcelas quebrava o nome em duas linhas. */
.gr-carros-caixa { width: 0; min-width: 100%; overflow-x: auto; }

/* No computador, a tabela da equipe; no celular, um cartão por vendedor. */
.gr-cartoes { display: none; }
.gr-cartao { border: 1px solid var(--bord); border-radius: 8px; padding: 12px 14px; background: #fff; }
.gr-cartao-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.gr-cartao-topo strong { font-size: 16px; color: var(--primary-dark); white-space: nowrap; }
.gr-cartao-nome { font-weight: 600; min-width: 0; }
.gr-cartao-linha { font-size: 12.5px; color: var(--muted); margin: 4px 0; line-height: 1.7; }
.gr-cartao details summary { cursor: pointer; color: var(--primary-dark); font-size: 12px; }

@media (max-width: 700px) {
    .gr-equipe { display: none; }
    .gr-cartoes { display: grid; gap: 10px; }
}
/* No celular: os quadros um embaixo do outro, e o menu (que pode ter dois links,
   para quem também é vendedor) numa linha só dele. Só nesta página (`gr-app`). */
@media (max-width: 620px) {
    .gr-app .kpis { grid-template-columns: minmax(0, 1fr); }
    .gr-app .sidebar { justify-content: space-between; }
    .gr-app .nav { order: 3; flex: 1 0 100%; padding: 0 12px 8px; }
}
/* Com a barra em cima (até 1000px), ela fica com a altura dela mesmo na página
   curta (a recusa, o "carregando"): sem isto, a grade da `.app`, que tem a
   altura da tela, esticava as duas linhas e a barra ocupava meia tela. */
@media (max-width: 1000px) {
    .gr-app { grid-template-rows: auto 1fr; }
}

/* O "esqueci a senha" do login (27/09/2026): um link, não um segundo botão. */
.cx-login .esqueci { margin: 14px 0 0; text-align: center; }
.cx-login .link {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--primary-dark); font-size: 12.5px; text-decoration: underline;
}
.cx-login .link:disabled { color: var(--muted); cursor: default; }
/* A confirmação do pedido: é resposta a uma ação, não recusa. */
.cx-login .enviado {
    margin-top: 14px; padding: 10px 12px; border-radius: 6px; font-size: 12.5px; line-height: 1.45;
    background: #e3f5ef; border: 1px solid #b9e2d3; color: #14512f;
}
.cx-login .enviado strong { display: block; }

/* ============================================================
   O CADASTRO DE VENDEDOR (29/09/2026)
   ============================================================
   Só o que a página nova e o link dela na Prévia pedem; as tabelas, os campos, os
   botões e os avisos são os de sempre. */

/* O link do cartão "Sem cadastro" da Prévia, "cadastrar": do alerta direto à
   página onde ele se resolve. Verde da casa e sublinhado — sem o azul do
   navegador, que destoa do cartão. */
.kpi a.ir {
    display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600;
    color: var(--primary-dark); text-decoration: underline;
}
.kpi a.ir:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; border-radius: 3px; }

/* O filtro do cadastro vigente, entre o texto da seção e a tabela. */
.cad-filtro { margin: 14px 0; }

/* O FORMULÁRIO NA LINHA NÃO SAI DA VISTA. As duas tabelas usam `.fixa-ultima` (o
   Cadastrar, o Trocar a regra e o Encerrar ficam na última coluna, e num
   notebook de meia tela ela rolava para fora), e o formulário abre numa linha
   que atravessa a tabela toda. Essa linha é a última célula de si mesma e não
   pode grudar: sem a regra abaixo herdava o `sticky`, o fundo branco e a sombra
   da coluna. O formulário mora numa caixa que cola na borda esquerda e tem a
   largura do que se enxerga do `.rolagem` (o `cadastro.js` a mede ao abrir): com a
   tabela rolada para o lado, ele continua onde a pessoa está olhando. */
.rolagem .tbl.fixa-ultima tbody tr.detalhe td.cad-td {
    position: static; box-shadow: none; background: #f7faf9; padding: 12px 0 14px;
}
.cad-caixa { position: sticky; left: 0; box-sizing: border-box; max-width: 100%; padding: 0 16px; }

/* ============================================================
   AS METAS DO MÊS (29/09/2026)
   ============================================================
   Só o que a página nova e o documento para assinatura pedem; os cartões, as
   tabelas, os campos, os botões e os avisos são os de sempre. As classes são
   `mt-`. NENHUM ESTILO SAI DO JS COMO ATRIBUTO: a CSP das páginas não deixa
   `style="..."`, e o visual do documento é tudo classe, daqui. */

/* O mês, no topo do primeiro cartão: o seletor e a linha do lançamento. */
.mt-filtro-mes { margin: 4px 0 12px; }
.mt-lancado { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.mt-lancado.ok { color: var(--acc-green); font-weight: 600; }

/* A marca nova, ao lado do botão que a acrescenta. */
.mt-nova { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.mt-nova .campo { flex: 0 1 260px; }

/* A tabela das regras: a marca é um seletor, e a meta a gravar um campo. */
.mt-marca-sel, .mt-meta {
    padding: 5px 8px; border: 1px solid var(--bord); border-radius: 6px;
    background: #fff; color: var(--text); font: inherit; font-size: 13px;
}
.mt-meta { width: 9.5em; text-align: right; font-variant-numeric: tabular-nums; }
.mt-marca-sel:focus, .mt-meta:focus {
    outline: 2px solid var(--primary-dark); outline-offset: 1px; border-color: var(--primary-light);
}
/* O que a pessoa digitou (e não a proposta nem o que estava gravado) ganha a borda verde da casa; o que
   não é um valor, o vermelho. O mesmo vale para o campo do índice de uma marca. */
.mt-meta.editada { border-color: var(--primary-light); background: #f3fbf7; }
.mt-meta.invalida, .campo input.invalida { border-color: #c1121f; background: #fdeced; }
.mt-sem-meta { color: var(--muted); font-style: italic; font-size: 12px; }
/* Embaixo da meta anterior, quando ela é a mesma versão da vigente: "anterior: a de Agosto/2026". */
.mt-ant-de {
    display: block; max-width: 12em; margin: 2px 0 0 auto; white-space: normal;
    color: var(--muted); font-size: 11.5px; font-weight: 400; line-height: 1.3;
}
.mt-sobe { color: var(--acc-green); font-weight: 600; }
.mt-desce { color: var(--error); font-weight: 600; }

/* O documento para assinatura, aberto na página: o cartão, a barra (que não se imprime) e as folhas. */
.mt-doc-barra { margin-bottom: 14px; }
.mt-folhas { display: grid; gap: 18px; }
.mt-folha {
    background: #fff; border: 1px solid var(--bord); border-radius: 8px; padding: 28px 32px; color: #000;
}
.mt-folha-titulo { margin: 0 0 4px; font-size: 18px; }
.mt-folha-regra { margin: 0 0 18px; font-size: 15px; font-weight: 600; color: var(--muted); }
.mt-folha-metas { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.mt-folha-metas th, .mt-folha-metas td {
    padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px;
}
.mt-folha-metas th { width: 46%; font-weight: 600; }
.mt-folha-ciente { margin: 22px 0 6px; font-weight: 600; font-size: 14px; }
.mt-assinaturas { width: 100%; border-collapse: collapse; }
.mt-assinaturas th {
    text-align: left; padding: 6px 8px; color: var(--muted); font-size: 12px;
    text-transform: uppercase; letter-spacing: .03em;
}
/* A identificação da folha (mês, regra, meta atual, "ciente"), na primeira linha do `thead`: o navegador repete o
   `thead` em cada página impressa, então a página 2 de uma folha longa também diz de que meta o vendedor está ciente.
   Não é título de coluna: sem caixa alta, preta, no tamanho do texto da folha. */
.mt-assinaturas th.mt-ident {
    color: #000; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
    padding: 0 8px 8px; border-bottom: 1px solid #000;
}
.mt-assinaturas td { padding: 0 8px; height: 40px; vertical-align: bottom; font-size: 13.5px; }
.mt-assinaturas .mt-nome { width: 34%; padding-bottom: 4px; }
/* A linha de assinatura e a de data são a borda de baixo da célula vazia, e não um texto de sublinhados. */
.mt-assinatura, .mt-data { border-bottom: 1px solid #000; }
.mt-data { width: 18%; }

/* A IMPRESSÃO MOSTRA SÓ O DOCUMENTO — e só com ele aberto: a página põe `mt-com-documento` no `body` ao abri-lo
   e a tira ao fechá-lo, então imprimir a página sem o documento imprime a página, como sempre. Com ele
   aberto somem o menu, o topo, os cartões e a barra do documento, e sobram as folhas, cada uma numa página. */
@media print {
    body.mt-com-documento { background: #fff; }
    body.mt-com-documento .app { display: block; }
    body.mt-com-documento .sidebar,
    body.mt-com-documento .topo,
    body.mt-com-documento .mt-cartao,
    body.mt-com-documento .mt-aviso-topo,
    body.mt-com-documento .mt-doc > h3,
    body.mt-com-documento .mt-doc-barra { display: none !important; }
    body.mt-com-documento .content { padding: 0; }
    body.mt-com-documento .mt-doc { border: 0; box-shadow: none; margin: 0; padding: 0; }
    .mt-folhas { display: block; }
    .mt-folha { border: 0; border-radius: 0; padding: 0; margin: 0; break-after: page; page-break-after: always; }
    .mt-folha:last-child { break-after: auto; page-break-after: auto; }
    /* A folha com mais nomes do que cabem numa página: o `thead` (a identificação da folha e os títulos das colunas)
       se repete no alto de cada página, e uma linha de assinatura não se parte entre duas. */
    .mt-assinaturas thead { display: table-header-group; }
    .mt-assinaturas tr { break-inside: avoid; page-break-inside: avoid; }
}