/* ===========================================================================
   Sistema da CN Contingência — folha de estilo
   Redesenho de 2026-08-29, a partir das referências em ../../referencias/.

   A marca é escura por natureza: o símbolo do logo foi desenhado sobre preto, e
   o verde só existe por causa desse fundo. As cores saíram MEDIDAS do arquivo em
   ../../ID Visual/Logo-Whats.png, não escolhidas.

   O que veio da referência principal (NexProp), e por quê:
   · fundo quase preto com brilho ambiente verde nos cantos, não preto chapado
   · cartão de vidro com ARO DE LUZ, mais forte na quina de cima — é o que dá o
     efeito de vidro de verdade, e não de "caixa cinza com blur"
   · verde menta em gradiente nos botões, texto escuro em cima
   · número grande com respiro, rótulo miúdo e calmo por cima dele
   · granulado fino no fundo inteiro, para o escuro não ficar liso demais

   DUAS REGRAS QUE NÃO SE QUEBRAM:

   1. O verde de MARCA (--verde) é ação e identidade: botão, item ativo, brilho.
      As cores de ESTADO do ativo são outra família (--e-*), reservada, e nunca
      se usa uma no lugar da outra. Se todo número da tela fosse verde, nenhum
      seria — e a pergunta que este sistema existe pra responder é "o que está
      apto pra venda".

   2. As cores de estado têm DOIS tons: `--e-<nome>` é o preenchimento de
      gráfico, posicionado dentro da banda de luminosidade que a validação de
      daltonismo exige; `--e-<nome>-txt` é o tom claro do mesmo matiz, para
      texto sobre fundo escuro. São trabalhos diferentes e não se misturam.
      As duas paletas passaram no validador (`validate_palette.js`, modo escuro):
      banda, croma, separação CVD, piso de visão normal e contraste.
   =========================================================================== */

:root {
  /* --- o chão, do mais fundo ao mais alto ---
     Preto quase absoluto com um sopro de verde, não verde escuro. A diferença
     entre #040806 e #061109 parece nada escrita aqui e é a tela inteira: o
     segundo pinta 100% do canvas de verde, e aí o verde da marca não destaca
     mais nada, porque tudo já é ele. */
  --preto: #020403;
  --fundo: #040806;
  --superficie: #0A0E0C;
  --superficie-alta: #101613;
  --superficie-topo: #171E1A;

  --borda: #1B211E;
  --borda-forte: #2A332E;

  /* Cinzas de uma família só, levemente frios pro verde não voltar pelo texto */
  --texto: #E9EEEB;
  --texto-medio: #A2ADA7;
  --texto-suave: #6C7871;

  /* --- marca: ação, identidade, brilho --- */
  --verde: #00CF78;
  --menta: #6FF3C0;
  --verde-fundo: rgba(0, 207, 120, 0.11);
  --verde-borda: rgba(0, 207, 120, 0.34);
  --gradiente-acao: linear-gradient(135deg, var(--menta), var(--verde) 62%, #00A862);

  /* --- estados do ativo: preenchimento de gráfico (validado) --- */
  --e-em_criacao: #727FC4;
  --e-em_aquecimento: #BC8B00;
  --e-apto: #007945;
  --e-vendido: #3A84CA;
  --e-perdido: #CB4E4A;
  /* --- os mesmos estados, tom de texto sobre escuro (todos ≥ 6.8:1) --- */
  --e-em_criacao-txt: #919FE6;
  --e-em_aquecimento-txt: #CA9D33;
  --e-apto-txt: #47BE8B;
  --e-vendido-txt: #60AAF3;
  --e-perdido-txt: #EB827B;

  /* --- esteiras: categórico do donut (ΔE 25.1 visão normal, 22.8 CVD) --- */
  --es-perfil: #00915A;
  --es-pagina: #4A79E8;
  --es-bm: #B08600;

  /* Funil de leads. NÃO é paleta categórica: é uma rampa ORDINAL de um matiz só,
     e a cor diz "quanto o lead avançou", não "qual etapa é esta" — quem diz isso
     é a posição da coluna e o nome escrito nela. Validada no modo ordinal da
     skill de dataviz contra a superfície real (#0F1311): luminosidade monótona,
     degrau mínimo de 0.06 e ponta escura em 3.04:1.
     `fechado` sai da rampa e veste o verde de "deu certo", que é o número que a
     tela existe pra responder. `perdido` fica FORA do quadro de propósito: em
     coluna vizinha do fechado, verde contra vermelho dá ΔE 3.1 sob protanopia —
     a confusão clássica, reprovada. Lead perdido vive na aba própria. */
  --f-novo: #3F5FA8;
  --f-atendimento: #4E77C6;
  --f-proposta: #5F90E0;
  --f-negociacao: #7FB0F5;
  --f-fechado: #007945;
  --f-perdido: #CB4E4A;

  /* Barra de série única. Croma 0.04 de propósito: o comprimento já carrega a
     magnitude, e pintar cada linha de uma cor inventaria categorias onde existe
     uma só. Passa em 3:1 contra a superfície. */
  --barra-neutra: #5C7A8A;

  /* As duas cores que o preenchimento automático do Chrome repinta por cima.
     MEDIDAS do pixel da tela rodando, não escolhidas: são o campo e a pílula da
     entrada já compostos sobre o vidro. Mexeu no fundo do campo, mede de novo. */
  --campo-cheio: #040706;
  --pilula-cheia: #040605;

  --alerta: #EB827B;
  --aviso: #CA9D33;

  /* --- vidro --- */
  --vidro: linear-gradient(158deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 58%);
  --vidro-alto: linear-gradient(158deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02) 58%);
  --desfoque: blur(18px) saturate(1.35);

  /* --- luz e sombra: a sombra carrega o verde do fundo, nunca preto puro --- */
  --sombra: 0 2px 10px -4px rgba(0, 0, 0, 0.75);
  --sombra-alta: 0 32px 70px -24px rgba(0, 0, 0, 0.92);
  /* O brilho verde ficou reservado ao que É ação: botão, seta de entrar,
     seleção. Deixou de acompanhar todo cartão que recebe o mouse. */
  --brilho: 0 0 26px -10px rgba(0, 207, 120, 0.34);
  --brilho-forte: 0 0 38px -8px rgba(0, 207, 120, 0.5);

  --raio: 12px;
  --raio-g: 18px;
  --raio-xg: 26px;

  /* --- movimento --- */
  --mola: cubic-bezier(0.34, 1.4, 0.5, 1);
  --suave: cubic-bezier(0.32, 0.72, 0.28, 1);

  /* --- camadas: escala fechada, sem 9999 solto por aí --- */
  --z-grao: 1;
  --z-menu: 40;
  --z-topo: 30;
  --z-cortina: 35;
  --z-lote: 45;
  --z-modal: 60;
  /* A lista do select fica acima do modal, porque metade dos selects vive
     dentro de um. O aviso fica acima dela: "não consegui gravar" não pode
     nascer atrás de uma lista aberta. */
  --z-escolha: 65;
  --z-aviso: 70;

  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display",
           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }

body {
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Um brilho só, fraco, no canto de cima à esquerda — a mesma direção de luz
     de todo o resto. Eram três, e somados pintavam a tela inteira de verde.
     Aqui ele existe pra dizer de onde vem a luz, não pra colorir o fundo. */
  background-image:
    radial-gradient(900px 520px at 0% -14%, rgba(0, 207, 120, 0.045), transparent 58%);
  background-attachment: fixed;
}

/* Granulado fino por cima de tudo. Escuro liso lê como plástico; o grão devolve
   a textura que o degradê tira. Não recebe clique e não anima. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: var(--z-grao);
  pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

.oculto { display: none !important; }

/* Pular para o conteudo: fica fora da tela ate receber foco pelo teclado. */
.pular {
  position: fixed; top: -60px; left: 12px; z-index: 100;
  padding: 10px 18px; border-radius: 0 0 var(--raio) var(--raio);
  background: var(--gradiente-acao); color: #032012;
  font-weight: 640; font-size: 13.5px; text-decoration: none;
  transition: top 220ms var(--suave);
}
.pular:focus { top: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--verde); }
:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--verde-borda); color: #fff; }

/* Barra de rolagem discreta, na cor do sistema */
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: #3A4740; }
*::-webkit-scrollbar-track { background: transparent; }

/* Os desenhos são do Lucide, e a grade dele é 24 com traço 2. O traço estava em
   1.6 porque os ícones anteriores eram desenhados à mão e cada um pedia uma
   coisa; com uma família só, o número certo é o que a família foi desenhada
   pra ter. Em 18px na tela isso dá 1.5px de traço — mais firme que o de antes,
   que era o que fazia o menu inteiro parecer apagado sobre o fundo escuro. */
.ic {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.num { font-variant-numeric: tabular-nums; }

.rotulo {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--texto-medio);
}

/* ===========================================================================
   VIDRO — a peça central do redesenho
   ===========================================================================
   Não é só `backdrop-filter: blur`. O que faz parecer vidro de verdade é o ARO:
   um contorno de 1px preenchido com um degradê que é quase branco na quina de
   cima e some na de baixo, como luz raspando numa borda real. Feito com máscara
   composta, para o degradê ficar só na moldura e não vazar pro miolo.

   A luz vem sempre de cima e da esquerda, em toda a tela. Sombra e aro seguem
   essa direção; inverter num componente só quebra a ilusão em todos. */
.vidro {
  position: relative;
  background: var(--vidro);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  box-shadow: var(--sombra);
}
.vidro::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  /* Aro de luz branca, não verde: o que dá o efeito de vidro é a LUZ raspando a
     borda, e luz é branca. O verde aqui pintava cada cartão da tela. */
  background: linear-gradient(150deg,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 255, 255, 0.06) 30%,
    rgba(255, 255, 255, 0.02) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* Sem suporte a backdrop-filter, o vidro vira superfície sólida em vez de sumir */
@supports not (backdrop-filter: blur(1px)) {
  .vidro { background: var(--superficie); }
}

/* ===========================================================================
   Movimento
   ===========================================================================
   Entrada escalonada: os blocos sobem em cascata, nunca todos de uma vez. O
   índice vem do HTML (`style="--i:3"`) e vira atraso. Transform e opacity só —
   animar top/height tira a animação da GPU e ela engasga no celular. */
/* Só o `from`, nos dois keyframes: o fim é o valor do próprio elemento. Com um
   `to { opacity: 1; transform: none }` escrito, o `both` deixava esse fim
   aplicado pra sempre por cima da folha — no `surge`,
   `.cartao-socio.desligado { opacity: 0.55 }` media 1 e o `:hover { transform }`
   do card media `none` (QA-11, 2026-09-17); no `surge-lateral`, o
   `translateY(-2px)` do `.cartao-ativo:hover` e do `.cartao-lead:hover` e o
   `translateX(2px)` do item do menu morriam do mesmo jeito (revisão final do
   plano 1, 2026-09-17). A regra que vem junto:
   quem anima com `surge`/`surge-lateral` não pode ter transform de repouso, que
   entraria na interpolação — é o caso do `#barra-lote`, centrado por `translate`. */
@keyframes surge {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes surge-lateral {
  from { opacity: 0; transform: translateX(-10px); }
}
@keyframes pulso-brilho {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.entra {
  animation: surge 520ms var(--suave) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.entra-lateral {
  animation: surge-lateral 420ms var(--suave) both;
  animation-delay: calc(var(--i, 0) * 34ms);
}
/* A entrada anima só na primeira pintura da tela. Da segunda em diante o
   #conteudo veste `data-pintado` (o Estoque põe, em `marcarPintura`; `irPara`
   tira ao trocar de tela) e nada que nasce dentro dele anima: trocar filtro
   repinta KPIs, gráficos, colunas e cartões, e vê-los subir em cascata a
   cada clique cansa em vez de apresentar. `animation: none` aqui é
   comportamento, não token.

   A lista é fechada de propósito — levantada com `grep animation:` em
   2026-09-16, é todo seletor animado que vive dentro do Estoque: `.entra`
   (KPIs, os dois gcard, o vidro da Tabela), `.entra-lateral` (por via das
   dúvidas: hoje só o menu usa), `.coluna` (quadro e quadro do grupo),
   `.cartao-ativo`, `.barra-trilho span` (a barra por esteira). O anel do
   donut cresce por transição, não por animação, e não precisa de regra: sob
   `data-pintado` o `animarDonut` escreve o traço no mesmo tique em que o
   nó nasce, antes do primeiro estilo calculado — não há de onde
   transicionar. Peça nova animada no Estoque entra aqui também. */
#conteudo[data-pintado] .entra,
#conteudo[data-pintado] .entra-lateral,
#conteudo[data-pintado] .coluna,
#conteudo[data-pintado] .cartao-ativo,
#conteudo[data-pintado] .barra-trilho span { animation: none; }
/* A barra de lote vive fora do #conteudo, presa no rodapé; ela sobe quando
   aparece e só troca o texto quando é repintada já na tela. */
#barra-lote.sem-entrada { animation: none; }

/* ===========================================================================
   Entrada e convite
   =========================================================================== */
.portal {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative;
}
.portal-caixa { width: 100%; max-width: 396px; position: relative; }

/* O halo verde atrás do cartão. É o que a referência tem e um cartão escuro
   sobre fundo escuro não tem: alguma coisa dizendo onde está a luz. */
.portal-caixa::before {
  content: ''; position: absolute; inset: -14% -6% 30%;
  background: radial-gradient(58% 58% at 50% 0%, rgba(0, 207, 120, 0.20), transparent 72%);
  filter: blur(48px); pointer-events: none;
  animation: pulso-brilho 7s ease-in-out infinite;
}
.marca-grande {
  display: block; width: 104px; height: auto; margin: 0 auto 26px;
  border-radius: 22px; position: relative;
  box-shadow: 0 0 30px -12px rgba(0, 207, 120, 0.4);
  animation: surge 620ms var(--suave) both;
}
.cartao-portal {
  position: relative;
  border-radius: var(--raio-xg);
  padding: 34px 30px 30px;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018) 55%), rgba(10, 14, 12, 0.78);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  box-shadow: var(--sombra-alta);
  animation: surge 620ms var(--suave) both;
  animation-delay: 70ms;
}
/* O aro do cartão de entrada é mais forte que o dos outros: é a única peça na
   tela, e é dela que sai a leitura de "vidro" antes de qualquer outra coisa. */
.cartao-portal::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(145deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(111, 243, 192, 0.30) 15%,
    rgba(255, 255, 255, 0.05) 46%,
    rgba(255, 255, 255, 0.02) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.portal h1 {
  font-size: 27px; font-weight: 640; letter-spacing: -0.025em;
  text-align: center; text-wrap: balance; line-height: 1.15;
}
.portal .sub {
  text-align: center; color: var(--texto-suave); font-size: 13.5px;
  margin: 7px 0 26px;
}

/* Campo do portal: rótulo miúdo DENTRO da pílula, valor embaixo. É o formato da
   referência, e ele economiza uma linha de altura por campo. */
.campo-pilula {
  position: relative;
  background: rgba(2, 4, 3, 0.7);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 8px 8px 9px 20px;
  margin-bottom: 11px;
  display: flex; align-items: center; gap: 10px;
  transition: border-color 200ms var(--suave), box-shadow 200ms var(--suave), background 200ms var(--suave);
}
.campo-pilula:focus-within {
  border-color: var(--verde-borda);
  background: rgba(2, 4, 3, 0.9);
  box-shadow: 0 0 0 3px rgba(0, 207, 120, 0.11);
}
.campo-pilula > div { flex: 1; min-width: 0; }
.campo-pilula label {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--texto-suave); margin-bottom: 1px;
}
/* Especificidade acima da regra generica de campo, que vem mais abaixo neste
   arquivo: em empate de especificidade vence a ultima, e o input ganhava borda
   e fundo proprios — uma pilula dentro da pilula. */
.campo-pilula > div > input[type] {
  width: 100%; background: none; border: 0; padding: 0; border-radius: 0;
  font-size: 15px; color: var(--texto); line-height: 1.3;
}
.campo-pilula > div > input[type]:focus { outline: none; box-shadow: none; background: none; }
.campo-pilula > div > input[type]::placeholder { color: #4E6656; }
.campo-pilula > div > input[type][readonly] { color: var(--texto-medio); }

/* O botão de entrar: embaixo, largo e com nome.
   Era uma seta redonda ao lado do campo de senha, como na referência. Saiu
   porque a seta não diz o que acontece ao clicar, e quem abre esta tela pela
   primeira vez é alguém que nunca viu o sistema — recebeu um link e uma senha. */
.botao.entrar {
  margin-top: 4px; padding: 15px; font-size: 15.5px; letter-spacing: -0.01em;
}
.botao.entrar .ic { width: 19px; height: 19px; stroke-width: 2.1; }

/* O botão redondo de seta, dentro do último campo — é o enviar da referência. */
.seta-enviar {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 999px; display: grid; place-items: center;
  background: var(--gradiente-acao); color: #032012;
  box-shadow: var(--brilho);
  transition: transform 220ms var(--mola), box-shadow 220ms var(--suave), filter 200ms;
}
.seta-enviar:hover { transform: scale(1.07); box-shadow: var(--brilho-forte); }
.seta-enviar:active { transform: scale(0.95); }
.seta-enviar:disabled { opacity: 0.5; cursor: progress; transform: none; }
.seta-enviar .ic { width: 19px; height: 19px; stroke-width: 2.1; }

.portal .rodape-portal {
  text-align: center; font-size: 12.5px; color: var(--texto-suave); margin-top: 20px;
}
.erro {
  color: var(--alerta); font-size: 13.5px; min-height: 1.25em;
  margin-top: 12px; text-align: center;
}

/* ===========================================================================
   Campos e botões
   =========================================================================== */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], select, textarea {
  width: 100%; padding: 10px 13px;
  background: rgba(2, 4, 3, 0.6);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  transition: border-color 180ms var(--suave), box-shadow 180ms var(--suave), background 180ms var(--suave);
}
input::placeholder, textarea::placeholder { color: #4E6656; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--verde-borda);
  background: rgba(2, 4, 3, 0.9);
  box-shadow: 0 0 0 3px rgba(0, 207, 120, 0.1);
}
select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E8A79' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
  padding-right: 34px;
}
textarea { resize: vertical; min-height: 92px; line-height: 1.55; }

/* ---------------------------------------------------------------------------
   A lista aberta do select
   ---------------------------------------------------------------------------
   O <select> continua sendo o campo: o que está aqui é só o painel que abre no
   lugar da lista do sistema operacional. Ele nasce no <body> e o floating-ui
   escreve `left`, `top`, `min-width` e `max-height` nele — por isso o
   `position: absolute` com `left: 0; top: 0`, que é de onde a conta parte.

   Com a lista aberta o campo veste o mesmo aro verde do foco, pra ficar claro
   de qual dos quatro filtros da faixa aquela lista saiu. */
select.escolha-aberta {
  border-color: var(--verde-borda);
  background-color: rgba(2, 4, 3, 0.9);
  box-shadow: 0 0 0 3px rgba(0, 207, 120, 0.1);
  /* A seta aponta pra cima enquanto está aberta — é um desenho de fundo, então
     ela não gira, se troca. */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236FF3C0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 14.5l-6-6-6 6'/%3E%3C/svg%3E");
}

.escolha-lista {
  position: absolute; left: 0; top: 0; z-index: var(--z-escolha);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 5px; border-radius: var(--raio);
  background: rgba(16, 22, 19, 0.97);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-alta);
  animation: surge 170ms var(--suave) both;
}
.escolha-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 11px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; text-align: left; color: var(--texto-medio);
  transition: background 140ms var(--suave), color 140ms var(--suave);
}
.escolha-item > span {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.escolha-item .ic { width: 15px; color: var(--menta); }
.escolha-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--texto); }
.escolha-item.marcada { color: var(--texto); font-weight: 600; }
/* O item sob o teclado usa o MESMO destaque do que está sob o mouse, e não o
   anel de foco do sistema: dentro de uma lista, o anel desenha um retângulo
   sobre outro retângulo e some no meio dos dois. */
.escolha-item:focus-visible, .escolha-item:focus {
  outline: none; background: var(--verde-fundo); color: var(--texto);
  box-shadow: inset 0 0 0 1px var(--verde-borda);
}
.escolha-item:disabled { opacity: 0.4; cursor: not-allowed; background: none; }
/* O título de um <optgroup> ("Por mês", no período do Estoque): rótulo miúdo
   entre os itens, com um fio em cima separando do grupo anterior. */
.escolha-grupo {
  margin: 5px 0 2px; padding: 7px 11px 3px;
  border-top: 1px solid var(--borda);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--texto-medio);
}

/* ---------------------------------------------------------------------------
   Preenchimento automático do Chrome
   ---------------------------------------------------------------------------
   Aquela barra azul por trás do e-mail e da senha na tela de entrada não era
   seleção de texto: é o Chrome pintando o campo preenchido com um fundo dele,
   num nível que `background` do CSS não alcança. Em tela clara passa como
   amarelo; em tela escura, como este azul.

   O que alcança é uma SOMBRA INTERNA gigante, que repinta a caixa inteira, mais
   o `-webkit-text-fill-color`, porque o texto também vem com cor própria e
   ficaria escuro sobre escuro.

   As cores abaixo não foram escolhidas: foram MEDIDAS do pixel da tela rodando,
   com o campo composto sobre o vidro. Se o fundo do campo mudar, estas mudam
   junto — senão reaparece um retângulo, agora da cor errada.

   `transition: background-color 9999s` é o cinto extra: em versões do Chrome que
   animam o fundo do preenchimento, ele nunca chega a aparecer. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--texto);
  caret-color: var(--texto);
  box-shadow: inset 0 0 0 1000px var(--campo-cheio);
  transition: background-color 9999s ease-in-out 0s;
}
/* O anel de foco tem que sobreviver ao preenchimento automático: sem esta linha
   o campo autopreenchido é o único da tela que não mostra onde está o teclado. */
input:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1000px var(--campo-cheio), 0 0 0 3px rgba(0, 207, 120, 0.1);
}
/* Dentro da pílula da entrada o campo é transparente e quem desenha o fundo é a
   pílula — então a sombra veste a cor dela, e o retângulo some. */
.campo-pilula > div > input[type]:-webkit-autofill,
.campo-pilula > div > input[type]:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1000px var(--pilula-cheia);
}

/* ---------------------------------------------------------------------------
   Marcar e escolher — a caixa de seleção e o rádio
   ---------------------------------------------------------------------------
   Estavam com `accent-color: var(--verde)`, que é a única coisa que o navegador
   deixa mudar num controle nativo: ele repinta o preenchimento e mais nada. A
   forma, o tamanho, o raio do canto, a espessura da borda e o desenho do visto
   continuavam sendo os do Windows — quadrado duro, borda cinza clara, visto
   fino. Numa lista de ativos isso aparecia como uma coluna de quadradinhos
   brancos de sistema operacional ao lado de uma tela inteira desenhada.

   E havia um segundo problema, pior: o quadro do Estoque já tinha um marcador
   PRÓPRIO, o `.marcador`, com canto de 5px, borda de 1.5px e o visto sobre o
   gradiente verde. Então a MESMA ação — marcar um ativo — tinha duas caras: uma
   no quadro e outra na lista, e é a mesma pessoa alternando entre as duas com o
   botão do canto.

   `appearance: none` desliga o desenho do sistema e devolve uma caixa vazia
   para desenhar. O que está aqui é o `.marcador` do quadro, no mesmo tamanho e
   com o mesmo visto, valendo pra toda caixa de seleção do sistema.

   O rádio herda tudo e muda duas coisas: é redondo, e em vez do visto recebe um
   ponto — porque a pergunta dele é outra ("qual destes?"), e forma diferente é
   o que diz isso antes de qualquer texto. */
input[type=checkbox], input[type=radio] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex-shrink: 0; margin: 0;
  display: inline-grid; place-content: center; vertical-align: middle;
  background: rgba(2, 4, 3, 0.55);
  border: 1.5px solid var(--borda-forte);
  cursor: pointer;
  transition: border-color 180ms var(--suave), background 180ms var(--suave),
              box-shadow 180ms var(--suave), transform 180ms var(--mola);
}
input[type=checkbox] { border-radius: 5px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:hover, input[type=radio]:hover {
  border-color: var(--verde-borda); transform: scale(1.1);
}
input[type=checkbox]:checked {
  border-color: var(--verde);
  box-shadow: 0 0 10px -2px var(--verde);
  /* O mesmo visto do `.marcador`, no mesmo tom escuro sobre o verde. */
  background:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23032012' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.6 4.4L19 7'/%3E%3C/svg%3E") center / 11px no-repeat,
    var(--gradiente-acao);
}
input[type=radio]:checked {
  border-color: var(--verde);
  box-shadow: 0 0 10px -2px var(--verde);
  background: rgba(2, 4, 3, 0.55);
}
input[type=radio]:checked::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gradiente-acao);
}
input[type=checkbox]:disabled, input[type=radio]:disabled {
  opacity: 0.4; cursor: not-allowed; transform: none;
}

.botao {
  position: relative; overflow: hidden; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 17px; border-radius: 999px;
  background: var(--gradiente-acao); color: #032012;
  font-weight: 650; font-size: 14px; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, var(--sombra);
  transition: transform 200ms var(--mola), box-shadow 240ms var(--suave), filter 200ms var(--suave);
}
.botao:hover { transform: translateY(-1.5px); box-shadow: var(--brilho-forte); filter: saturate(1.12); }
.botao:active { transform: translateY(0.5px) scale(0.985); }
.botao:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.botao.cheio { width: 100%; padding: 12px; }
.botao.fantasma {
  background: rgba(255, 255, 255, 0.045); color: var(--texto-medio);
  border: 1px solid var(--borda-forte); box-shadow: none;
  backdrop-filter: blur(8px);
}
.botao.fantasma:hover {
  background: rgba(255, 255, 255, 0.085); color: var(--texto);
  border-color: var(--verde-borda); box-shadow: none; filter: none;
}
.botao.perigo { background: rgba(235, 130, 123, 0.1); color: var(--alerta); border: 1px solid rgba(235, 130, 123, 0.3); box-shadow: none; }
.botao.perigo:hover { background: rgba(235, 130, 123, 0.18); box-shadow: none; filter: none; }
.botao.pequeno { padding: 6px 13px; font-size: 13px; }

/* ===========================================================================
   Estrutura: menu · topo · conteúdo
   =========================================================================== */
#app { display: flex; min-height: 100dvh; }

#menu {
  width: 244px; flex-shrink: 0;
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; z-index: var(--z-menu);
  background: linear-gradient(180deg, rgba(14, 19, 16, 0.78), rgba(4, 8, 6, 0.92));
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  border-right: 1px solid var(--borda);
}
.menu-marca {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 18px 18px;
}
.menu-marca img {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
}
.menu-marca strong {
  display: block; font-size: 16.5px; font-weight: 700; letter-spacing: 0.07em;
  line-height: 1.1; color: var(--texto);
}
.menu-marca span {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--texto-suave);
}

#navegacao { flex: 1; overflow-y: auto; padding: 6px 0 16px; }
#navegacao .grupo {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--texto-suave); padding: 18px 20px 7px;
}
#navegacao a {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  margin: 1px 10px; padding: 9px 12px; border-radius: 11px;
  color: var(--texto-medio); text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: background 200ms var(--suave), color 200ms var(--suave), transform 200ms var(--mola);
}
#navegacao a .ic { color: var(--texto-suave); transition: color 200ms var(--suave); }
#navegacao a:hover {
  background: rgba(255, 255, 255, 0.05); color: var(--texto);
  transform: translateX(2px);
}
#navegacao a:hover .ic { color: var(--texto-medio); }
/* O item ativo é uma pílula de vidro com um filete de luz na direita — é como a
   referência marca a página atual, e lê melhor que só pintar o fundo. */
#navegacao a.ativo {
  background: rgba(255, 255, 255, 0.055);
  color: var(--texto); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* O filete verde na direita é o acento. Um traço de 2px marca a página tão bem
   quanto um fundo verde inteiro, e não pinta o menu. */
#navegacao a.ativo::after {
  content: ''; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 17px; border-radius: 2px;
  background: var(--menta); box-shadow: 0 0 9px -1px var(--verde);
}
#navegacao a.ativo .ic { color: var(--menta); }
#navegacao a.adiante { opacity: 0.42; }
#navegacao a.adiante:hover { opacity: 0.72; }

.menu-rodape {
  border-top: 1px solid var(--borda); padding: 11px 12px;
  display: flex; align-items: center; gap: 8px;
}
/* É um <button>: clicar abre "Minha conta", que é onde se troca a própria
   senha. Precisa parecer o bloco de antes, não um botão. */
.quem {
  display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1;
  text-align: left; padding: 5px 6px; margin: -5px -6px; border-radius: 11px;
  transition: background 180ms var(--suave);
}
.quem:hover { background: rgba(255, 255, 255, 0.05); }
.quem .avatar {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06); color: var(--menta);
  font-size: 13px; font-weight: 700;
}
.quem strong { display: block; font-size: 13px; font-weight: 600; }
.quem span { display: block; font-size: 11px; color: var(--texto-suave); text-transform: capitalize; }
.menu-rodape #botao-sair {
  width: 33px; height: 33px; border-radius: 10px; display: grid; place-items: center;
  color: var(--texto-suave);
  transition: background 180ms var(--suave), color 180ms var(--suave), transform 180ms var(--mola);
}
.menu-rodape #botao-sair:hover {
  background: rgba(235, 130, 123, 0.13); color: var(--alerta); transform: scale(1.06);
}

#principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#topo {
  position: sticky; top: 0; z-index: var(--z-topo);
  display: flex; align-items: center; gap: 12px;
  padding: 14px 30px;
  background: rgba(4, 8, 6, 0.76);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--borda);
}
#botao-menu { display: none; color: var(--texto-medio); padding: 4px; }
.migalha { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--texto-suave); }
.migalha .ic { width: 15px; height: 15px; }
.migalha i { font-style: normal; opacity: 0.4; }
.migalha strong { color: var(--texto); font-weight: 600; }
.topo-direita { margin-left: auto; font-size: 12.5px; color: var(--texto-suave); }
.topo-direita::first-letter { text-transform: uppercase; }

#conteudo { flex: 1; padding: 26px 30px 60px; min-width: 0; max-width: 1560px; width: 100%; }
#cortina {
  position: fixed; inset: 0; z-index: var(--z-cortina);
  background: rgba(2, 8, 4, 0.66); backdrop-filter: blur(3px);
}

.topo-tela {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.topo-tela h1 {
  font-size: 25px; font-weight: 650; letter-spacing: -0.028em; line-height: 1.12;
}
.topo-tela p {
  font-size: 13.5px; color: var(--texto-suave); margin-top: 6px;
  max-width: 62ch; text-wrap: pretty;
}
.topo-tela .acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ===========================================================================
   Blocos: KPI, etiqueta, tabela
   =========================================================================== */
.faixa-kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
  gap: 11px; margin-bottom: 20px;
}
/* Coluna, e não bloco solto, por uma razão só: a legenda de baixo é empurrada
   pro pé do cartão com `margin-top: auto`. Sem isso ela ficava colada no número,
   e como umas quebram em duas linhas e outras não ("já com comissões, despesas
   e perdas" contra "no total"), a faixa terminava com seis textos parando em
   alturas diferentes. Encostadas no pé, as seis alinham numa linha só, e a
   faixa lê como uma faixa em vez de seis cartões avulsos. */
.kpi {
  position: relative; overflow: hidden;
  border-radius: var(--raio-g); padding: 15px 16px 16px;
  display: flex; flex-direction: column;
  transition: transform 280ms var(--mola), box-shadow 280ms var(--suave);
}
/* O filete de cor fica na ESQUERDA, não no topo: é como a referência marca o
   cartão, e alinha com a barra lateral do cartão de ativo lá embaixo. */
.kpi::after {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 2px; border-radius: 0 2px 2px 0;
  background: var(--cor, var(--borda-forte));
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.kpi .valor {
  font-size: 30px; font-weight: 650; letter-spacing: -0.035em; line-height: 1.1;
  margin-top: 9px; font-variant-numeric: tabular-nums;
  /* Cinto de segurança: se ainda assim passar, quebra em vez de sumir na borda. */
  overflow-wrap: anywhere;
}
/* Dinheiro grande encolhe em vez de ser cortado. As faixas saem do número de
   caracteres, medido no JS — é o que cabe em cartão de ~180px. */
.kpi .valor.longo { font-size: 25px; }
.kpi .valor.muito-longo { font-size: 21px; letter-spacing: -0.028em; }
.kpi .sub {
  font-size: 12px; color: var(--texto-suave); line-height: 1.4;
  margin-top: auto; padding-top: 6px;
}
.kpi.destaque .valor {
  background: linear-gradient(135deg, var(--menta), var(--verde));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  /* Sem isto a etiqueta senta na linha de base e o espaço do descendente entra
     como altura invisível: dentro de uma tabela, a linha com etiqueta ficava uns
     15px mais alta que a linha sem, e a tabela parecia desalinhada sem motivo. */
  vertical-align: middle;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.6;
  background: rgba(255, 255, 255, 0.045); color: var(--texto-medio);
  border: 1px solid var(--borda); white-space: nowrap;
}
.etiqueta .ponto {
  width: 6px; height: 6px; border-radius: 99px; background: currentColor;
}
.etiqueta.em_criacao     { color: var(--e-em_criacao-txt);     border-color: rgba(145, 159, 230, 0.28); background: rgba(145, 159, 230, 0.09); }
.etiqueta.em_aquecimento { color: var(--e-em_aquecimento-txt); border-color: rgba(202, 157, 51, 0.3);   background: rgba(202, 157, 51, 0.09); }
.etiqueta.apto           { color: var(--e-apto-txt);           border-color: rgba(71, 190, 139, 0.34);  background: rgba(71, 190, 139, 0.1); }
.etiqueta.vendido        { color: var(--e-vendido-txt);        border-color: rgba(96, 170, 243, 0.28);  background: rgba(96, 170, 243, 0.09); }
.etiqueta.perdido        { color: var(--e-perdido-txt);        border-color: rgba(235, 130, 123, 0.3);  background: rgba(235, 130, 123, 0.09); }
.etiqueta.socio          { color: var(--texto-medio);          border-color: var(--borda-forte);        background: rgba(255, 255, 255, 0.06); }

.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dados { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.dados th {
  text-align: left; padding: 11px 13px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--texto-suave); border-bottom: 1px solid var(--borda);
  white-space: nowrap; background: rgba(10, 14, 12, 0.96);
  position: sticky; top: 0; z-index: 2;
  backdrop-filter: blur(8px);
}
/* Célula de tabela não quebra linha, e a tabela rola de lado dentro do cartão
   quando não couber — que é o comportamento padrão do Carbon para tabela de
   dado, e o certo aqui. Quebrando, "Maria Ferreira" virava duas linhas em
   algumas linhas e uma em outras, e a tabela ficava com alturas de linha
   diferentes sem que nenhum dado justificasse — que é a leitura ruim que a
   pessoa sente e não consegue apontar. Rolar de lado é honesto: diz que tem
   mais coluna do que cabe. Quebrar mente sobre a altura da linha.

   `.texto` é a saída para a coluna que existe pra receber texto livre — a
   descrição do lançamento, a observação do lead. Ali quebrar é o certo, porque
   a coluna não tem tamanho previsível. */
table.dados td {
  padding: 10px 13px; border-bottom: 1px solid rgba(26, 51, 35, 0.6);
  vertical-align: middle; white-space: nowrap;
}
table.dados td.texto {
  white-space: normal; min-width: 200px; text-wrap: pretty;
}
table.dados tbody tr { transition: background 160ms var(--suave); }
table.dados tbody tr:hover { background: rgba(255, 255, 255, 0.035); }
table.dados tbody tr.marcada { background: var(--verde-fundo); }
table.dados td.numero { text-align: right; font-variant-numeric: tabular-nums; }
table.dados .id { font-family: var(--mono); font-size: 12px; color: var(--texto-suave); }

.vazio { text-align: center; padding: 48px 20px; color: var(--texto-suave); font-size: 14px; }
.vazio strong { display: block; color: var(--texto-medio); font-size: 15px; margin-bottom: 5px; }

/* ===========================================================================
   Gráficos
   ===========================================================================
   SVG na mão, sem biblioteca: são duas formas, e uma dependência a mais neste
   sistema é superfície de ataque num app que guarda credencial de terceiro.

   As cores saíram do validador de daltonismo (modo escuro, superfície #0B1A12),
   não do olho. Os estados usam o tom de PREENCHIMENTO, e a legenda ao lado usa
   o tom de TEXTO do mesmo matiz — o texto nunca veste a cor da série.

   Toda fatia e toda barra tem rótulo direto e vão de 2px entre os pedaços: é a
   codificação secundária que a separação verde↔âmbar exige. */
/* ---------------------------------------------------------------------------
   `align-items: start` nas grades de dois cartões — a correção que mais mudou
   a tela, e a que menos parece uma decisão de design.
   ---------------------------------------------------------------------------
   O padrão de uma grade é `stretch`: todo item cresce até a altura do vizinho
   mais alto. Em duas colunas com conteúdos de tamanhos diferentes — e aqui elas
   quase nunca têm o mesmo tamanho — isso significa que o cartão mais curto vira
   uma caixa com um buraco embaixo.

   Era visível em quase toda tela: na Visão geral, "Quem produziu hoje" com uma
   frase no meio de 240px de vazio; nos Relatórios, "Ativos vendidos por
   aquecedor" com duas linhas dentro de uma caixa de cinco; no Financeiro,
   "Entradas avulsas" com um lançamento e um palmo de nada abaixo dele.

   Buraco não lê como "aqui tem pouca coisa". Lê como "faltou carregar", e é
   exatamente essa a sensação de tela bagunçada: a pessoa procura o que deveria
   estar ali e não acha, porque nunca houve nada. Com `start` cada cartão tem a
   altura do que ele tem dentro, e dois cartões de alturas diferentes lado a
   lado dizem a verdade — um tem mais conteúdo que o outro.

   Não vale para `.cartoes-socio`: lá são cartões iguais em grade de vários por
   linha, e altura igual por linha é o que faz a grade ler como grade. */
.painel-graficos {
  display: grid; grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 11px; margin-bottom: 20px; align-items: start;
}
.gcard {
  border-radius: var(--raio-g); padding: 17px 18px 18px;
  display: flex; flex-direction: column;
  transition: transform 280ms var(--mola), box-shadow 280ms var(--suave);
}
.gcard:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.gcard > h3 {
  font-size: 13px; font-weight: 620; letter-spacing: -0.01em; margin-bottom: 2px;
}
.gcard > .dica-g { font-size: 11.5px; color: var(--texto-suave); margin-bottom: 15px; }

.donut-caixa { display: flex; align-items: center; gap: 18px; flex: 1; }
.donut { width: 132px; height: 132px; flex-shrink: 0; overflow: visible; }
/* O traco cresce por transicao de stroke-dasharray: o arco nasce em "0 C" e o
   valor real entra no quadro seguinte, com atraso por fatia. E o que faz o anel
   se desenhar em vez de aparecer pronto. */
.donut circle {
  transition: stroke-dasharray 900ms var(--suave), opacity 200ms var(--suave), stroke-width 200ms var(--mola);
}
.donut-caixa:hover circle.fatia { opacity: 0.42; }
.donut-caixa circle.fatia:hover { opacity: 1; stroke-width: 19; }
.donut-centro { text-anchor: middle; }
.donut-centro .n {
  font-size: 25px; font-weight: 650; fill: var(--texto);
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
  dominant-baseline: middle;
}
.donut-centro .r { font-size: 8.5px; fill: var(--texto-suave); letter-spacing: 0.13em; text-transform: uppercase; }

.legenda { display: flex; flex-direction: column; gap: 9px; min-width: 0; flex: 1; }
.legenda li { list-style: none; display: flex; align-items: center; gap: 9px; font-size: 13px; }
.legenda .marca-cor {
  width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0;
  background: var(--c);
}
.legenda .nome { color: var(--texto-medio); flex: 1; min-width: 0; }
.legenda .qtd { font-weight: 640; font-variant-numeric: tabular-nums; }
.legenda .pct { color: var(--texto-suave); font-size: 11.5px; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* ---------------------------------------------------------------------------
   Velas — uma coluna por ação, um grupo por pessoa
   ---------------------------------------------------------------------------
   A altura do gráfico é FIXA (150px), e não proporcional ao maior valor. Com
   altura variável, um dia fraco e um dia forte desenhariam a mesma figura, e a
   comparação de ontem com hoje — que é a que o Marcos faz ao abrir a tela —
   passaria a depender de reparar no eixo em vez de na forma.

   O grupo cresce (`flex: 1 1 0`) mas a vela não: ela tem largura fixa e o grupo
   a centraliza. Com dois aquecedores, o cartão fica largo e as velas não viram
   tábuas; com seis, os grupos apertam até o mínimo e o cartão rola de lado. */
/* O grupo tem a largura do que ele tem dentro (`flex: 0 0 auto`), e não uma
   fatia do cartão. Com `1 1 0` e dois aquecedores, cada grupo ficava com 390px
   e as três velas — 110px — boiavam no meio dele, com um risco de 390px por
   baixo ligando o nome a nada. Encostados à esquerda, os grupos leem como duas
   colunas de um gráfico, que é o que são. Espaço sobrando à direita quando há
   dois aquecedores é a verdade da tela, não um buraco. */
.velas {
  display: flex; gap: 30px; align-items: flex-end;
  padding-top: 4px; overflow-x: auto;
}
.vela-grupo {
  flex: 0 0 auto; min-width: 148px;
  display: flex; flex-direction: column; gap: 12px;
  animation: surge 480ms var(--suave) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.vela-pilha {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 10px; height: 152px;
}
.vela { height: 100%; cursor: help; }

/* Duas coisas moram no trilho, e a ordem delas resolve o problema que a
   primeira versão tinha: o número ficava no alto do gráfico, longe da vela que
   ele conta — os dois zeros do João apareciam lá em cima enquanto os tocos
   deles estavam lá embaixo, e não dava pra saber qual número era de qual.

   Aqui os dois são empilhados de baixo pra cima (`justify-content: flex-end`),
   então o número SOBE JUNTO com a vela e fica sempre encostado no topo dela.
   O `padding-top` é o espaço reservado pra esse número quando a vela é a mais
   alta de todas e encosta no teto — sem ele, o número da maior sairia do
   quadro. E `box-sizing: border-box` é o que faz o `height: 100%` da vela
   medir o que sobra DEPOIS dessa reserva. */
.vela .trilho {
  height: 100%; width: 34px; box-sizing: border-box; padding-top: 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* `flex-shrink: 0` nos dois, e isto não é enfeite: sem ele a conta do gráfico
   sai ERRADA, de um jeito que passa despercebido porque o desenho continua
   plausível.

   O número e a vela são irmãos dentro do trilho. Quando a vela mais alta pede
   os 100% da altura, os dois somados não cabem, e o padrão do flex é encolher
   quem estourou — proporcionalmente ao tamanho de cada um. Então a vela de 100%
   perdia uns 19px e a de 30% não perdia nada, porque essa cabia. As alturas
   deixavam de ser proporcionais aos números, e "o João entregou o dobro do que
   a Maria aqueceu" virava mentira na tela, sem nada parecendo quebrado.

   Sem encolher, a vela cheia ocupa toda a altura útil e o número sobe pro
   espaço reservado pelo `padding-top` do trilho, que existe exatamente pra
   receber ele. Pego pela bateria, medindo a vela mais alta contra a caixa. */
.vela b {
  flex-shrink: 0;
  font-size: 12.5px; font-weight: 640; font-variant-numeric: tabular-nums;
  color: var(--texto); line-height: 1; text-align: center; margin-bottom: 6px;
}
.vela i {
  display: block; width: 100%; height: var(--h, 0%); flex-shrink: 0;
  min-height: 3px; border-radius: 6px 6px 0 0;
  background: var(--c, var(--barra-neutra));
  transform-origin: bottom;
  animation: cresce-alto 620ms var(--suave) both;
  animation-delay: calc(var(--i, 0) * 55ms);
  transition: filter 200ms var(--suave);
}
/* A ação que deu zero fica como toco cinza, e não some: um aquecedor que criou
   trinta e não entregou nenhum é o que mais importa ver, e coluna ausente lê
   como "não tem dado" em vez de "deu zero". */
.vela.zero b { color: var(--texto-suave); font-weight: 500; }
.vela.zero i { background: var(--borda-forte); }
.vela-pilha:hover .vela i { filter: saturate(0.4) brightness(0.72); }
.vela:hover i { filter: none; }

/* O risco de cima é a linha de base do gráfico: as velas nascem nele. */
.vela-quem {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 3px 8px; min-width: 0;
  padding-top: 11px; border-top: 1px solid var(--borda-forte);
}
.vela-quem .avatar {
  width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06); color: var(--menta);
  font-size: 11px; font-weight: 700;
}
.vela-quem strong {
  font-size: 13px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vela-quem .quanto {
  flex-basis: 100%; text-align: center;
  font-size: 11px; color: var(--texto-suave);
}

/* Barra empilhada por esteira */
.barras { display: flex; flex-direction: column; gap: 15px; }
.barra-linha .cabeca {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px;
  font-size: 12.5px;
}
.barra-linha .cabeca strong { font-weight: 600; }
.barra-linha .cabeca .total { margin-left: auto; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.barra-trilho {
  display: flex; gap: 2px; height: 13px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.barra-trilho span {
  display: block; height: 100%; background: var(--c);
  transform-origin: left; animation: cresce 560ms var(--suave) both;
  animation-delay: calc(var(--i, 0) * 38ms);
  transition: filter 200ms var(--suave);
}
.barra-trilho span:first-child { border-radius: 999px 0 0 999px; }
.barra-trilho span:last-child { border-radius: 0 999px 999px 0; }
.barra-trilho:hover span { filter: saturate(0.45) brightness(0.7); }
.barra-trilho span:hover { filter: none; }
@keyframes cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.legenda-estados {
  display: flex; flex-wrap: wrap; gap: 5px 15px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--borda);
}
.legenda-estados li {
  list-style: none; display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--texto-suave);
}
.legenda-estados .marca-cor { width: 8px; height: 8px; border-radius: 2.5px; background: var(--c); }

/* ===========================================================================
   Estoque
   =========================================================================== */
.barra-filtros { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.abas {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--borda);
  backdrop-filter: blur(8px);
}
.abas button {
  padding: 6px 15px; border-radius: 999px; font-size: 13px; font-weight: 550;
  color: var(--texto-suave); white-space: nowrap;
  transition: background 220ms var(--suave), color 220ms var(--suave);
}
.abas button:hover { color: var(--texto-medio); }
.abas button.ativo {
  background: rgba(255, 255, 255, 0.085); color: var(--texto);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
/* A contagem ao lado do nome, nas abas de aquecedor: "Caline 2.776". Menor que
   o nome, porque o nome é a escolha e o número é a nota — mas em --texto-medio,
   que é o piso de contraste do texto pequeno. */
.abas button small {
  margin-left: 6px; font-size: 11px; font-weight: 600;
  color: var(--texto-medio); font-variant-numeric: tabular-nums;
}
/* Caixa que não é caixa: os filhos entram no flex (e na grade do celular)
   como se estivessem soltos, e ela existe só pra ser repintada por dentro. */
.caixa-filtro { display: contents; }
.barra-filtros select, .barra-filtros input { width: auto; min-width: 136px; border-radius: 999px; }
.barra-filtros .busca { min-width: 200px; flex: 1; max-width: 310px; }
/* À direita, o período e as abas de visão: o período é um select como os da
   esquerda (aquecedor, dono), e fica antes das abas. */
.barra-filtros .direita { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* --- o quadro --- */
.quadro {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(202px, 1fr);
  gap: 10px; align-items: start;
  overflow-x: auto; padding-bottom: 12px;
}
.coluna {
  border-radius: var(--raio-g);
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 300px); min-height: 220px;
  transition: box-shadow 260ms var(--suave), transform 260ms var(--mola);
  animation: surge 520ms var(--suave) both;
  animation-delay: calc(var(--i, 0) * 65ms);
}
.coluna > header { padding: 13px 14px 11px; border-bottom: 1px solid var(--borda); flex-shrink: 0; }
.coluna h3 {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cor-txt); display: flex; align-items: center; gap: 8px;
}
.coluna h3 .ponto {
  width: 6px; height: 6px; border-radius: 99px; background: var(--cor-txt);
  flex-shrink: 0;
}
.coluna h3 b {
  margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--texto);
  font-variant-numeric: tabular-nums;
}
/* Uma informação por linha, e cada linha com altura reservada. As cinco colunas
   ficam lado a lado, então o cabeçalho de uma NÃO PODE ter altura diferente do
   da vizinha: era tudo numa linha só, "marcar os 226 · R$ 12.545,00 de custo"
   não cabia na largura da coluna de Vendido, quebrava em duas, e os cartões
   daquela coluna começavam vinte pixels abaixo dos das outras quatro. O quadro
   inteiro parecia torto sem que houvesse nada errado nele. */
.coluna .subtotal { font-size: 11.5px; color: var(--texto-suave); margin-top: 5px; }
.coluna .subtotal > span {
  display: block; min-height: 1.45em;
  overflow: clip; overflow-clip-margin: 4px; text-overflow: ellipsis; white-space: nowrap;
}
.coluna .subtotal .custo { font-variant-numeric: tabular-nums; }
.coluna .pilha { padding: 9px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.coluna.alvo { box-shadow: 0 0 0 1px var(--verde-borda), var(--brilho-forte); transform: scale(1.012); }
.coluna.travada.alvo { box-shadow: 0 0 0 1px rgba(235, 130, 123, 0.45); }

.cartao-ativo {
  position: relative;
  background: rgba(255, 255, 255, 0.038);
  border: 1px solid var(--borda);
  border-radius: 11px; padding: 10px 11px 10px 13px;
  cursor: grab; user-select: none;
  transition: background 200ms var(--suave), border-color 200ms var(--suave),
              transform 220ms var(--mola), box-shadow 220ms var(--suave);
  animation: surge-lateral 380ms var(--suave) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.cartao-ativo::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  border-radius: 0 2px 2px 0; background: var(--cor-txt);
}
.cartao-ativo:hover {
  background: rgba(255, 255, 255, 0.07); border-color: var(--borda-forte);
  transform: translateY(-2px); box-shadow: var(--sombra);
}
.cartao-ativo.marcado {
  background: var(--verde-fundo); border-color: var(--verde-borda);
  box-shadow: 0 0 0 1px rgba(0, 207, 120, 0.16), var(--brilho);
}
/* Duas peças diferentes durante o arrasto, e elas trocaram de papel quando o
   Sortable entrou:

   `.arrastando` é o cartão que vai COM o dedo. Ele tem que parecer levantado da
   mesa — cheio, com sombra e um grau de inclinação, que é o que dá a sensação
   de estar na mão.

   `.fantasma-arrasto` é o buraco que ele deixou, e que anda pelas colunas
   mostrando onde ele vai cair. Esse sim fica apagado: é um lugar, não um
   objeto. Antes o desbotado estava no cartão arrastado, porque na API do HTML
   quem seguia o cursor era uma cópia desenhada pelo navegador, fora do CSS. */
.cartao-ativo.arrastando, .cartao-lead.arrastando, .acesso-cartao.arrastando {
  opacity: 1; cursor: grabbing;
  background: rgba(255, 255, 255, 0.1); border-color: var(--borda-forte);
  transform: rotate(-1.5deg); box-shadow: var(--sombra-alta);
}
.cartao-ativo.fantasma-arrasto, .cartao-lead.fantasma-arrasto, .acesso-cartao.fantasma-arrasto {
  opacity: 0.34;
  background: var(--verde-fundo);
  border: 1px dashed var(--verde-borda);
  box-shadow: none; transform: none;
}
.cartao-ativo.fantasma-arrasto > *, .cartao-lead.fantasma-arrasto > *, .acesso-cartao.fantasma-arrasto > * { visibility: hidden; }
.cartao-ativo .linha1 { display: flex; align-items: center; gap: 8px; }
.cartao-ativo .nome {
  font-size: 13.5px; font-weight: 550; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.cartao-ativo .nome.sem-nome { color: var(--texto-suave); font-family: var(--mono); font-size: 12.5px; }
.cartao-ativo .linha2 {
  display: flex; align-items: center; gap: 7px; margin-top: 7px;
  font-size: 11.5px; color: var(--texto-suave);
}
.cartao-ativo .esteira {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--texto-medio);
}
.cartao-ativo .pessoa {
  margin-left: auto; display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.07); color: var(--texto-medio);
  font-size: 10px; font-weight: 700;
}
.cartao-ativo .cadeado { color: var(--texto-suave); display: inline-flex; }
.cartao-ativo .cadeado .ic { width: 12px; height: 12px; }
/* A lista do Trello em que o card estava e quantos anexos ele tem. A lista é
   a que encolhe quando não cabe: esteira e clipe têm largura fixa. */
.cartao-ativo .esteira, .cartao-ativo .clipe { flex-shrink: 0; }
.cartao-ativo .lista {
  font-size: 11px; color: var(--texto-medio); max-width: 55%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(255, 255, 255, 0.07); border-radius: 4px; padding: 1px 6px;
}
.cartao-ativo .clipe {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--texto-medio); font-variant-numeric: tabular-nums;
}
.cartao-ativo .clipe .ic { width: 12px; height: 12px; }
/* O estado só aparece escrito fora do quadro: lá a coluna já diz. */
.cartao-ativo .estado { display: none; }

.marcador {
  position: relative;
  width: 15px; height: 15px; flex-shrink: 0; border-radius: 5px;
  border: 1.5px solid var(--borda-forte); background: transparent;
  transition: border-color 180ms var(--suave), background 180ms var(--suave), transform 180ms var(--mola);
}
.marcador:hover { border-color: var(--verde-borda); transform: scale(1.14); }
.marcador.ligado {
  border-color: var(--verde); box-shadow: 0 0 10px -2px var(--verde);
  background: var(--gradiente-acao) center / 11px no-repeat;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23032012' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.6 4.4L19 7'/%3E%3C/svg%3E"), var(--gradiente-acao);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 11px, cover;
}
/* O filete pontilhado embaixo é o sublinhado desta peça. Como ela também é usada
   em <a>, o sublinhado do navegador precisa sair — senão vêm dois. */
.so-texto {
  font: inherit; color: var(--texto-suave); text-decoration: none;
  border-bottom: 1px dashed var(--borda-forte);
  transition: color 180ms var(--suave), border-color 180ms var(--suave);
}
.so-texto:hover { color: var(--menta); border-color: var(--verde-borda); }
.coluna .mais {
  margin: 3px 9px 11px; padding: 8px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; color: var(--texto-medio);
  background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--borda-forte);
  transition: color 200ms var(--suave), border-color 200ms var(--suave), background 200ms var(--suave);
}
.coluna .mais:hover { color: var(--menta); border-color: var(--verde-borda); background: var(--verde-fundo); }
/* O pé de "+ perfil" — fica sempre visível embaixo da coluna, nunca dentro da
   `.pilha` que rola: senão ele subiria e desceria junto com os cartões. */
.coluna .pe { padding: 0 9px 9px; flex-shrink: 0; }
.coluna .pe .botao { width: 100%; }

/* --- barra de seleção --- */
/* A centragem mora em `translate`, não em `transform`: `transform` é o que o
   `surge` anima, e um translateX em repouso entraria na interpolação — a barra
   varria de lado (720 → 424 → 437 a 1440) em vez de subir. A propriedade
   `translate`, independente, compõe com a animação e a barra nasce centrada. */
#barra-lote {
  position: fixed; left: 50%; bottom: 22px; translate: -50% 0;
  z-index: var(--z-lote); display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 11px 13px; border-radius: 999px;
  background: rgba(20, 26, 22, 0.9);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  box-shadow: var(--sombra-alta);
  max-width: calc(100vw - 24px);
  animation: surge 340ms var(--mola) both;
}
#barra-lote::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.02));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
#barra-lote .contagem { font-size: 13.5px; font-weight: 600; padding-left: 8px; }
#barra-lote .contagem b { color: var(--menta); font-variant-numeric: tabular-nums; }
#barra-lote select { width: auto; min-width: 168px; }
#barra-lote .separador { width: 1px; height: 22px; background: var(--borda-forte); }

.lista-estoque td.marca { width: 36px; }
/* Tamanho, forma e visto vem da regra geral la de cima. */
.lista-estoque td.marca, .lista-estoque th.marca { line-height: 0; }
.lista-estoque tbody tr { cursor: pointer; }
.lista-estoque .cadeado { color: var(--texto-suave); display: inline-flex; vertical-align: middle; }
.lista-estoque .cadeado .ic { width: 13px; height: 13px; }

/* --- acessos: um card no topo do Estoque, e o painel inteiro num modal ---
   Era uma grade de cartões acima dos indicadores; com os dados reais (duas
   dúzias de acessos) ela empurrava o quadro pra fora da tela. Hoje é um card
   só — "Acessos da equipe · 24 acessos · Caline 14 · Luan 10" —, do desenho
   dos KPIs (vidro, filete à esquerda), clicável inteiro, e a grade vive no
   modal, uma seção por aquecedor. Nada verde aqui: o verde da tela é do
   Novo perfil, no cabeçalho. */
.faixa-acessos { margin-bottom: 20px; }
.faixa-acessos:empty { display: none; }
.acessos-card {
  position: relative; overflow: hidden; width: 100%; min-height: 56px;
  display: flex; align-items: center; gap: 13px; text-align: left;
  border-radius: var(--raio-g); padding: 12px 16px 12px 19px;
  transition: transform 280ms var(--mola), box-shadow 280ms var(--suave);
}
.acessos-card::after {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 2px; border-radius: 0 2px 2px 0; background: var(--borda-forte);
}
.acessos-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.acessos-card .ic-chave { display: inline-flex; color: var(--texto-suave); }
.acessos-card .ic-chave .ic { width: 18px; height: 18px; }
.acessos-card .texto { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acessos-card strong { font-size: 13.5px; font-weight: 620; letter-spacing: -0.01em; }
.acessos-card small {
  font-size: 12px; color: var(--texto-medio); line-height: 1.4;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.acessos-card .abrir {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: 12.5px; font-weight: 600; color: var(--texto-medio); white-space: nowrap;
}
.acessos-card .abrir .ic { width: 15px; height: 15px; }

/* O modal: busca e Adicionar em cima, depois as seções. */
.acessos-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.acessos-topo .busca-acessos {
  flex: 1; width: auto; min-width: 200px; padding: 8px 13px;
  border-radius: 999px; font-size: 13px;
}
.acessos-secao + .acessos-secao { margin-top: 18px; }
.acessos-secao h3 {
  display: flex; align-items: baseline; gap: 7px; margin-bottom: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-medio);
}
.acessos-secao h3 small { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.grade-acessos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
}
.acessos-modal .vazio {
  padding: 15px 18px; text-align: left; text-wrap: pretty;
  border: 1px dashed var(--borda-forte); border-radius: var(--raio);
}
.acesso-cartao {
  position: relative; min-width: 0; min-height: 44px;
  display: flex; align-items: stretch;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 11px;
  transition: background 200ms var(--suave), border-color 200ms var(--suave),
              transform 220ms var(--mola), box-shadow 220ms var(--suave);
}
/* `display: flex` acima venceria o `hidden` do navegador; a busca esconde por ele. */
.acesso-cartao[hidden] { display: none; }
.acesso-cartao:hover {
  background: rgba(255, 255, 255, 0.07); border-color: var(--borda-forte);
  transform: translateY(-2px); box-shadow: var(--sombra);
}
/* O botão que abre é o cartão inteiro; o arrasto (admin) pega no <article>
   por fora dele — botão dentro de botão não é HTML. */
.acesso-cartao .abrir {
  flex: 1; min-width: 0; display: grid;
  grid-template-columns: 17px 1fr; grid-template-rows: auto auto;
  column-gap: 9px; row-gap: 3px; align-items: center; text-align: left;
  padding: 10px 11px 10px 12px; border-radius: inherit;
}
.acesso-cartao .ic-chave { grid-row: 1 / 3; display: inline-flex; color: var(--texto-suave); }
.acesso-cartao .ic-chave .ic { width: 17px; height: 17px; }
.acesso-cartao .titulo {
  min-width: 0; font-size: 13.5px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acesso-cartao .meta {
  min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 20px;
  font-size: 12px; color: var(--texto-medio);
}
.acesso-cartao .meta .anexos { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.acesso-cartao .meta .ic { width: 12px; height: 12px; }
.acesso-cartao .meta .pessoa {
  margin-left: auto; display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.07); color: var(--texto-medio);
  font-size: 10px; font-weight: 700;
}
.acesso-cartao .meta .equipe {
  margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--texto-medio);
}

/* --- visão Listas: o quadro do Trello, por grupo ---
   Dois lados: à esquerda o índice dos grupos de lista (Disponíveis, lotes do
   mês, Reservados, Vendidos, Caíram...), com a contagem de cada um; à direita
   o quadro do grupo aberto — uma `.coluna` por lista, a mesma peça do Quadro,
   rolando de lado dentro do próprio bloco. O índice fica preso enquanto o
   quadro rola, abaixo da barra do topo. */
.listas-trello { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: start; }
.grupos { position: sticky; top: 66px; display: flex; flex-direction: column; gap: 4px; }
.grupos button {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
  min-height: 44px; padding: 7px 12px; text-align: left; border-radius: var(--raio);
  border: 1px solid transparent; color: var(--texto-medio);
  transition: background 200ms var(--suave), border-color 200ms var(--suave), color 200ms var(--suave);
}
.grupos button:hover { background: rgba(255, 255, 255, 0.04); color: var(--texto); }
/* O grupo aberto: o mesmo fundo das abas ativas, com aro — sem verde, que
   aqui é só do "Novo perfil". */
.grupos button.ativo {
  background: rgba(255, 255, 255, 0.085); border-color: var(--borda-forte); color: var(--texto);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
/* Nome em cima, "N listas" embaixo, e o total à direita ocupando as duas
   linhas. As posições são explícitas: o item preso numa linha (o total) é
   colocado ANTES dos automáticos, e sem coluna dita ele tomava a primeira. */
.grupos button .nome {
  grid-column: 1; grid-row: 1; font-size: 13.5px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grupos button .total {
  grid-column: 2; grid-row: 1 / 3; font-size: 13px; font-weight: 600; color: var(--texto-medio);
  font-variant-numeric: tabular-nums;
}
.grupos button small { grid-column: 1; grid-row: 2; font-size: 11px; color: var(--texto-medio); margin-top: 2px; }
.grupos button.ativo .total { color: var(--texto); }
/* No computador o índice é a navegação; o select só existe pro telefone. */
.ir-para-grupo { display: none; }

.quadro-do-grupo {
  display: flex; gap: 12px; align-items: start; min-width: 0;
  overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity;
}
/* `min-width: 0`: item de flex nasce com min-width auto = min-content, e o
   cabeçalho nowrap com um nome de 120 caracteres fazia a coluna ir a 2.100px
   (QA-30). Com zero, a coluna fica nos 250 e o `.nome-lista` reticencia como
   já está escrito. A regra de 640px põe 82vw por cima. */
.quadro-do-grupo .coluna { flex: 0 0 250px; min-width: 0; --cor-txt: var(--texto-medio); }
.quadro-do-grupo .coluna h3 { color: var(--texto-medio); }
.quadro-do-grupo .coluna h3 .nome-lista {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quadro-do-grupo .coluna h3 b { flex-shrink: 0; }
/* Um pontinho por estado, com a contagem — a coluna aqui é uma lista, não um
   estado, e é o pontinho que diz "19 aptos, 2 caíram" sem abrir nada. A cor é
   a de preenchimento do estado (`--e-*`), a mesma da legenda dos gráficos. */
.quadro-do-grupo .coluna .subtotal .pontos { display: flex; gap: 9px; overflow: hidden; }
.ponto-estado {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 11px; color: var(--texto-medio); font-variant-numeric: tabular-nums;
  cursor: help;
}
.ponto-estado i { width: 7px; height: 7px; border-radius: 99px; background: var(--cor); flex-shrink: 0; }
.quadro-do-grupo .vazio.grande {
  width: 100%; padding: 64px 20px;
  border: 1px dashed var(--borda-forte); border-radius: var(--raio);
}
.quadro-do-grupo .vazio.grande small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--texto-medio); }
.quadro-do-grupo .pilha > .vazio { padding: 14px; font-size: 13px; }
/* Dentro da própria coluna o chip da lista só repetiria o cabeçalho, cartão
   por cartão. Some aqui; no Quadro e na Tabela ele continua, porque lá informa. */
.listas-trello .cartao-ativo .lista { display: none; }
/* Fora do quadro de estados não há coluna dizendo o estado: ele entra escrito,
   ao lado da esteira, com a mesma cor do filete da esquerda. */
.listas-trello .cartao-ativo .estado {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cor-txt);
}
.listas-trello .cartao-ativo .estado .ponto { width: 5px; height: 5px; border-radius: 99px; background: currentColor; }

/* ===========================================================================
   Ficha do ativo (modal)
   =========================================================================== */
#fundo-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(2, 8, 4, 0.72); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  overflow-y: auto;
  animation: aparece 220ms var(--suave) both;
}
@keyframes aparece { from { opacity: 0; } }
#modal {
  position: relative;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 52%), rgba(10, 14, 12, 0.94);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  border-radius: var(--raio-xg); box-shadow: var(--sombra-alta);
  width: 100%; max-width: 620px; max-height: calc(100dvh - 44px);
  display: flex; flex-direction: column; overflow: hidden;
  animation: sobe-modal 320ms var(--mola) both;
}
@keyframes sobe-modal { from { opacity: 0; transform: translateY(16px) scale(0.985); } }
#modal::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(148deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.02));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
#modal.largo { max-width: 800px; }
#modal > header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--borda); flex-shrink: 0;
}
#modal > header h2 { font-size: 17.5px; font-weight: 640; letter-spacing: -0.018em; }
#modal > header .fechar {
  margin-left: auto; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; color: var(--texto-suave); font-size: 20px;
  transition: background 180ms var(--suave), color 180ms var(--suave), transform 180ms var(--mola);
}
#modal > header .fechar:hover { background: rgba(255, 255, 255, 0.07); color: var(--texto); transform: rotate(90deg); }
#modal .corpo { padding: 20px 22px; overflow-y: auto; }
#modal > footer {
  display: flex; gap: 9px; justify-content: flex-end;
  padding: 15px 22px; border-top: 1px solid var(--borda); flex-shrink: 0;
}
/* A pergunta "descartar?" no rodapé do modal (QA-27): toma o lado esquerdo, os
   botões de sempre ficam à direita. Sem confirm() do navegador. */
#modal > footer .descarte { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: 13px; color: var(--texto-medio); flex-wrap: wrap; }

.campos { display: grid; gap: 15px; }
.campos.duas { grid-template-columns: 1fr 1fr; }
/* Comprador + número + data, na venda digitada: nome com mais fôlego que os
   outros dois. Empilha a 900px junto com `.duas`, pela mesma regra abaixo. */
.campos.tres { grid-template-columns: 2fr 1fr 1fr; }
/* `> label`, e não `label`: a regra é o RÓTULO do campo — miúdo, em caixa alta,
   cinza —, e um `.campo` costuma ter um segundo <label> lá dentro, que é a
   opção em si. Solto, ele pegava esse segundo também: as três escolhas de nível
   do convite apareciam como "AQUECEDOR / SÓ OS ATIVOS DELE. SEM FINANCEIRO,
   SEM CUSTO, SEM VALOR DE VENDA." — frase inteira em caixa alta, com o
   espaçamento largo de rótulo e no cinza apagado, que é onde ela some. Caixa
   alta é pra três palavras de rótulo, nunca pra uma frase que se lê. */
.campo > label {
  display: block; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--texto-medio);
}
.campo .dica { font-size: 12px; color: var(--texto-suave); margin-top: 6px; text-wrap: pretty; }

.ficha-dados {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 15px 20px; padding: 16px; margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.032);
  border: 1px solid var(--borda); border-radius: var(--raio);
}
.ficha-dados div span { display: block; font-size: 14px; margin-top: 4px; }
.ficha-secao { margin-top: 22px; }
.ficha-secao > h4 {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texto-suave); margin-bottom: 11px;
  display: flex; align-items: center; gap: 10px;
}
.ficha-secao > h4::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--borda), transparent); }

.historico { display: flex; flex-direction: column; }
.historico li {
  list-style: none; display: flex; align-items: baseline; gap: 11px;
  padding: 8px 2px; border-bottom: 1px solid rgba(26, 51, 35, 0.55); font-size: 13.5px;
}
.historico li time { font-family: var(--mono); font-size: 12px; color: var(--texto-suave); flex-shrink: 0; width: 76px; }
.historico li .nota { color: var(--texto-medio); }

.bloco-trello {
  white-space: pre-wrap; font-size: 13px; line-height: 1.65; color: var(--texto-medio);
  background: rgba(2, 4, 3, 0.65); border: 1px dashed var(--borda-forte);
  border-radius: var(--raio); padding: 14px; max-height: 240px; overflow-y: auto;
}

/* ===========================================================================
   O card do ativo — descrição e anexos editáveis no lugar
   ===========================================================================
   O que no Trello é o card. Título e descrição são campos que não parecem
   campo até receberem o mouse: a borda só aparece no hover e no foco, porque
   um card com três caixas desenhadas lê como formulário, e formulário é o que
   o "Editar ficha" era. O verde da tela é UM: o botão Adicionar. O aro de foco
   é o mesmo de todo campo do sistema (--verde-borda) e não conta como acento.
   --------------------------------------------------------------------------- */
.card { display: flex; flex-direction: column; }
#modal .corpo:focus { outline: none; }
/* Fechar com gravação pendente: X e Fechar apagam enquanto ela corre, e o
   card diz "Salvando…" no lugar do "Salvo". Falhou, tudo volta e o texto fica. */
#modal.salvando { cursor: progress; }
/* O Apagar do acesso também apaga: o modal está fechando, não é hora de abrir
   a confirmação. (A confirmação já aberta fica: ela espera a gravação.) */
#modal.salvando [data-fechar], #modal.salvando #card-apagar { opacity: 0.4; pointer-events: none; }

/* O cabeçalho do modal recebe o estado (select ou etiqueta) e o número */
.card-estado {
  width: auto; padding: 6px 30px 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 640; letter-spacing: -0.005em;
  background-color: rgba(255, 255, 255, 0.04); background-position: right 9px center;
}
.card-ref { font-family: var(--mono); font-size: 12px; color: var(--texto-suave); margin-left: 10px; }
#modal.com-card > header h2 { display: flex; align-items: center; min-width: 0; }

.card-titulo {
  width: calc(100% + 16px); margin: -4px -8px 4px;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--texto);
  font-size: 21px; font-weight: 660; letter-spacing: -0.022em; line-height: 1.25;
  transition: border-color 160ms var(--suave), background 160ms var(--suave);
}
.card-titulo::placeholder { color: var(--texto-suave); font-weight: 500; }
.card-titulo:hover:not([readonly]) { border-color: var(--borda-forte); }
.card-titulo:focus { border-color: var(--verde-borda); background: rgba(2, 4, 3, 0.55); box-shadow: none; }
.card-titulo[readonly] { cursor: default; }

.card-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--texto-medio); }
.card-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 22px; }
/* --texto-suave mede 3.98:1 no fundo do modal — abaixo do 4.5:1 do texto
   pequeno (AA). Nos rotulos de chip, que rodam a 11.5-12px, a cor sobe pro
   --texto-medio (7.9:1); o token em si nao muda, porque o resto da tela usa
   --texto-suave em tamanho maior, onde 3:1 basta. */
.card-chip .rotulo { letter-spacing: 0.1em; color: var(--texto-medio); }
.card-aquecedor, .card-dono {
  width: auto; padding: 3px 26px 3px 8px; font-size: 13px; border-radius: 7px;
  background-color: transparent; background-position: right 6px center; background-size: 14px;
  color: var(--texto-medio);
}
.card-aquecedor:hover, .card-dono:hover { border-color: var(--borda-forte); color: var(--texto); }
/* A lista do Trello é campo dentro do chip, com a mesma regra do título: em
   repouso lê como texto; no hover e no foco ganha fundo e borda, pra dizer
   que se digita ali (revisão de design de 2026-09-16 — só com borda, lia
   como texto fixo). Sem `type`, de propósito — a regra geral de
   `input[type=text]` (fundo escuro, borda cheia) não vale aqui. */
.card-lista {
  width: 220px; max-width: 100%; padding: 3px 8px; font-size: 13px; border-radius: 7px;
  background: transparent; border: 1px solid transparent; color: var(--texto-medio);
  transition: border-color 160ms var(--suave), background 160ms var(--suave);
}
.card-lista::placeholder { color: var(--texto-suave); }
.card-lista:hover:not([readonly]) { border-color: var(--borda-forte); background: rgba(255, 255, 255, 0.04); color: var(--texto); }
.card-lista:focus { border-color: var(--verde-borda); background: rgba(2, 4, 3, 0.55); box-shadow: none; color: var(--texto); }
.card-lista[readonly] { cursor: default; }

/* O cabeçalho do card do acesso: a etiqueta com a chave, no lugar do estado */
.etiqueta.acesso .ic { width: 13px; height: 13px; color: var(--texto-suave); }

.card-secao { margin-top: 24px; }
.card-secao > h4, details.card-secao > summary h4 {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 13.5px; font-weight: 640; letter-spacing: -0.005em; color: var(--texto);
}
.card-secao > h4 .ic, details.card-secao > summary h4 .ic { width: 16px; height: 16px; color: var(--texto-suave); }
.card-secao > h4 .botao { margin-left: auto; }
.card-secao .vazio { padding: 14px 4px; text-align: left; }

/* As seções recolhidas — aquecimento, histórico do Trello, atividade. A linha
   inteira é o alvo (44px de altura, o dedo cabe), o resumo vai em --texto-medio
   e some numa elipse quando não cabe, e o chevron gira ao abrir. */
details.card-secao { margin-top: 18px; }
details.card-secao > summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 6px 8px; margin: 0 -8px; cursor: pointer; list-style: none; user-select: none;
  border-radius: 8px;
}
details.card-secao > summary::-webkit-details-marker { display: none; }
details.card-secao > summary h4 { margin-bottom: 0; flex-shrink: 0; }
details.card-secao > summary .resumo {
  flex: 1; min-width: 0; font-size: 12px; color: var(--texto-medio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
details.card-secao > summary::after {
  content: ''; width: 7px; height: 7px; flex-shrink: 0; margin: 0 6px 3px 0;
  border-right: 1.5px solid var(--texto-suave); border-bottom: 1.5px solid var(--texto-suave);
  transform: rotate(45deg); transition: transform 200ms var(--suave);
}
details.card-secao[open] > summary::after { transform: rotate(-135deg); margin: 3px 6px 0 0; }
details.card-secao > summary:hover { background: rgba(255, 255, 255, 0.03); }
details.card-secao > summary:hover::after { border-color: var(--texto); }
details.card-secao > summary:focus-visible { outline: 1px solid var(--verde-borda); outline-offset: 2px; }
details.card-secao[open] > summary { margin-bottom: 4px; }
.card-fechado { display: flex; align-items: center; gap: 10px; }
.card-fechado .ic { color: var(--texto-suave); }
.card-nota { font-size: 12px; color: var(--texto-medio); margin-top: 7px; text-wrap: pretty; }
.card-carregando { padding: 12px 14px; font-size: 13px; color: var(--texto-suave); }
.card-salvo {
  font-size: 11.5px; font-weight: 500; color: var(--texto-suave); margin-left: 2px;
  opacity: 0; transition: opacity 240ms var(--suave);
}
.card-salvo.vendo { opacity: 1; }

/* A descrição é a caixa de credencial: mono, porque "l", "I" e "1" numa senha
   são três letras diferentes e a fonte de texto corrido esconde isso. */
.card-descricao {
  border: 1px solid var(--borda); border-radius: var(--raio); min-height: 72px;
  background: rgba(2, 4, 3, 0.55);
  transition: border-color 160ms var(--suave), box-shadow 160ms var(--suave);
}
.card-descricao:hover { border-color: var(--borda-forte); }
.card-descricao:focus-within { border-color: var(--verde-borda); box-shadow: 0 0 0 3px rgba(0, 207, 120, 0.1); }
.card-descricao textarea {
  display: block; width: 100%; min-height: 0; padding: 12px 14px;
  background: transparent; border: 0; border-radius: inherit; resize: vertical;
  font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--texto);
}
.card-descricao textarea:focus { outline: none; box-shadow: none; background: transparent; }
.card-descricao .vazio { padding: 14px; }
/* Só leitura (o aquecedor no acesso de toda a equipe): a caixa não reage ao
   mouse nem ao foco, porque não há o que editar ali. */
.card-descricao.leitura:hover, .card-descricao.leitura:focus-within { border-color: var(--borda); box-shadow: none; }
.card-descricao.leitura textarea { cursor: default; resize: none; }

.card-adicionar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px; margin-bottom: 10px;
  border: 1px dashed var(--borda-forte); border-radius: var(--raio);
  animation: surge 200ms var(--suave) both;
}
.card-arquivo { cursor: pointer; }
.card-arquivo.enviando { opacity: 0.5; pointer-events: none; }
.card-form-link { display: flex; gap: 6px; flex: 1; min-width: 220px; }
.card-form-link input { flex: 1; min-width: 0; padding: 6px 11px; font-size: 13px; }

.card-anexos { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.card-anexo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 8px 7px 9px; border-radius: var(--raio);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--borda);
}
.card-anexo-icone {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05); color: var(--texto-medio);
}
.card-anexo-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.card-anexo-nome a, .card-anexo-nome > span {
  color: var(--texto); font-size: 13.5px; font-weight: 500; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-anexo-nome a:hover { text-decoration: underline; }
.card-anexo-nome small { font-size: 11.5px; color: var(--texto-medio); }
.card-confirma {
  flex-basis: 100%; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 6px 0 2px; font-size: 12.5px; color: var(--texto-medio);
  animation: surge 180ms var(--suave) both;
}
.card-confirma .botao { margin-left: 2px; }
/* Apagar o acesso fica no canto esquerdo do rodapé, longe do Fechar; a
   confirmação toma o lugar dele, na mesma linha. */
#modal.com-card > footer #card-apagar { margin-right: auto; }
#modal.com-card > footer .card-confirma { flex: 1 1 auto; padding: 0; }

/* Botão só de ícone: baixar e remover. Nasce sem cor — o verde da tela já tem
   dono — e ganha fundo no hover, como o X do modal. */
.botao.icone {
  width: 32px; height: 32px; padding: 6px; border-radius: 9px; flex: 0 0 auto;
  background: none; color: var(--texto-suave); box-shadow: none; border: 0;
}
.botao.icone .ic { width: 17px; height: 17px; }
.botao.icone:hover { background: rgba(255, 255, 255, 0.07); color: var(--texto); transform: none; filter: none; box-shadow: none; }
.botao.icone.card-remover:hover { color: var(--alerta); }

.card-atividade { list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--texto-medio); }
.card-atividade li { line-height: 1.5; text-wrap: pretty; }
.card-atividade strong { color: var(--texto); font-weight: 600; }
.card-atividade em { font-style: normal; color: var(--texto); word-break: break-all; }
.card-atividade time { font-family: var(--mono); font-size: 11.5px; color: var(--texto-medio); margin-left: 6px; white-space: nowrap; }

/* ===========================================================================
   Dica — o balão que explica um elemento
   ===========================================================================
   Quem calcula `left` e `top` é o floating-ui, no JS. Aqui só existe a
   aparência, mais duas linhas que a biblioteca exige: `position: absolute` com
   `left: 0; top: 0`, porque ela posiciona por coordenada absoluta na página, e
   `width: max-content`, porque ela precisa medir o balão no tamanho natural
   antes de decidir se ele cabe. Sem esse par, o balão mede a largura do pai e
   a conta sai errada em toda tela.

   Não recebe clique: o balão nasce embaixo do cursor, e um alvo de mouse ali
   faria o próprio balão disparar o `mouseout` do elemento que o abriu — ele
   piscaria sem parar. */
.dica {
  position: absolute; left: 0; top: 0; width: max-content;
  max-width: 260px; z-index: var(--z-aviso);
  padding: 7px 11px; border-radius: 9px;
  background: rgba(23, 30, 26, 0.97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-alta);
  font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--texto);
  text-wrap: pretty; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 140ms var(--suave), visibility 140ms;
}
.dica.vendo { opacity: 1; visibility: visible; }
.dica-seta {
  position: absolute; width: 8px; height: 8px;
  background: rgba(23, 30, 26, 0.97);
  border-right: 1px solid var(--borda-forte);
  border-bottom: 1px solid var(--borda-forte);
  transform: rotate(45deg);
}
/* A inicial do aquecedor no cartão é o principal lugar onde a dica trabalha:
   ela é a única forma de descobrir de quem é aquele "M". Então ela precisa
   PARECER que responde alguma coisa. */
.cartao-ativo .pessoa { cursor: help; transition: background 180ms var(--suave), color 180ms var(--suave); }
.cartao-ativo .pessoa:hover { background: var(--verde-fundo); color: var(--menta); }
.cadeado[data-dica], .col-dia[data-dica] { cursor: help; }

/* ===========================================================================
   Avisos
   =========================================================================== */
#avisos {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-aviso);
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
  pointer-events: none;
}
.aviso {
  position: relative;
  background: rgba(20, 26, 22, 0.92);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  border-radius: var(--raio); padding: 12px 16px 12px 17px;
  font-size: 13.5px; box-shadow: var(--sombra-alta); max-width: 350px;
  animation: surge 300ms var(--mola) both;
}
.aviso::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  border-radius: 0 2px 2px 0; background: var(--verde); box-shadow: 0 0 10px var(--verde);
}
.aviso.ruim::before { background: var(--alerta); box-shadow: 0 0 10px var(--alerta); }

/* ===========================================================================
   As outras treze telas
   ===========================================================================
   Nada aqui inventa cor nem espaçamento: tudo sai dos tokens que a tela de
   Estoque fixou. O que muda de tela para tela é a FORMA — e a forma segue o
   trabalho que o dado tem que fazer, não o gosto da hora. */

/* Enquanto a tela carrega. Três pontos e nada mais: barra de progresso falsa
   mente sobre o quanto falta, e tela em branco parece defeito. */
.carregando { display: flex; gap: 7px; justify-content: center; padding: 70px 0; }
.carregando span {
  width: 8px; height: 8px; border-radius: 99px; background: var(--borda-forte);
  animation: pulsa-ponto 1s var(--suave) infinite;
}
.carregando span:nth-child(2) { animation-delay: 140ms; }
.carregando span:nth-child(3) { animation-delay: 280ms; }
@keyframes pulsa-ponto {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); background: var(--verde); }
}

.apagado { color: var(--texto-suave); }
.ruim { color: var(--e-perdido-txt); }
h5 { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--texto-suave); }
h5 b { color: var(--texto); font-size: 14px; letter-spacing: -0.01em; text-transform: none; margin-left: 7px; }

/* Variação contra o mês passado. Só aparece quando existe base — "+∞%" sobre um
   mês que não existiu não informa nada. */
.delta { font-size: 12px; font-weight: 600; }
.delta i { font-style: normal; font-weight: 400; color: var(--texto-suave); }
.delta.bom { color: var(--e-apto-txt); }
.delta.ruim { color: var(--e-perdido-txt); }
.delta.igual { color: var(--texto-suave); font-weight: 400; }

/* ---------------------------------------------------------------------------
   Barras de ranking: uma série, uma cor
   ---------------------------------------------------------------------------
   Eram três colunas numa linha só — rótulo · barra · valor —, e é o padrão que
   funciona em cartão largo e desmonta em cartão estreito. Como quase todo
   ranking desta tela mora na coluna de 320px do `painel-graficos`, ou numa das
   metades do `dois-lados`, a barra sobrava com uns 60px: larga demais pra
   sumir, curta demais pra comparar duas linhas. E a nota tinha que ser
   empurrada pra baixo com `margin-top: -5px`, um remendo que deixava o
   espaçamento entre linhas irregular.

   Agora são três faixas empilhadas, que é como o Tabler e o Carbon montam lista
   com barra: NOME e VALOR na primeira, com o valor encostado na direita; a
   BARRA sozinha na segunda, ocupando a largura inteira do cartão; a NOTA na
   terceira. A barra ganha todo o espaço que existe, os valores alinham numa
   coluna só — que é o que permite comparar de relance —, e a mesma peça se lê
   igual num cartão de 240px e num de 900px.

   As áreas são nomeadas de propósito: a nota nem sempre existe, e com áreas a
   linha dela simplesmente não nasce, em vez de virar um vão. */
.ranking { display: flex; flex-direction: column; gap: 15px; }
.ranking li {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "rot val" "trilho trilho" "nota nota";
  align-items: baseline; gap: 6px 12px;
  animation: surge 420ms var(--suave) both; animation-delay: calc(var(--i, 0) * 45ms);
}
/* O rótulo quebra em vez de cortar. Truncar deixava "Compras de ..." e
   "Repasses a s..." — que é justamente a informação de que a linha vive. */
.ranking .rot {
  grid-area: rot; font-size: 13px; color: var(--texto-medio);
  line-height: 1.35; overflow-wrap: anywhere;
}
/* `align-self` explícito: a linha usa `baseline`, e uma caixa vazia como esta
   não tem linha de base pra oferecer — o navegador sintetiza uma, e o
   resultado varia entre eles. */
.ranking .trilho {
  grid-area: trilho; align-self: center;
  height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.045); overflow: hidden;
}
.ranking .trilho i {
  display: block; height: 100%; border-radius: 999px; background: var(--c, var(--barra-neutra));
  transform-origin: left; animation: cresce 620ms var(--suave) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.ranking .val {
  grid-area: val; font-size: 13.5px; font-weight: 640;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--texto);
}
.ranking .nota { grid-area: nota; font-size: 11.5px; color: var(--texto-suave); }

/* --- navegador de mês e período --- */
.nav-mes {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--borda);
  backdrop-filter: blur(8px);
}
.nav-mes strong {
  min-width: 138px; text-align: center; font-size: 13.5px; font-weight: 600;
}
/* Só a primeira letra. `text-transform: capitalize` pegava cada palavra e
   escrevia "Agosto De 2026". */
.nav-mes strong::first-letter { text-transform: uppercase; }
.nav-mes button {
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  color: var(--texto-medio);
  transition: background 180ms var(--suave), color 180ms var(--suave);
}
.nav-mes button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.075); color: var(--texto); }
.nav-mes button:disabled { opacity: 0.28; cursor: not-allowed; }
.par-data {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--texto-suave);
}
.par-data input { width: auto; min-width: 140px; border-radius: 999px; }

/* --- a tira de conta: o número aparece enquanto ele ainda pode corrigir --- */
.tira-conta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline;
  margin-top: 16px; padding: 13px 15px; border-radius: var(--raio);
  background: rgba(2, 4, 3, 0.55); border: 1px solid var(--borda);
  font-size: 13.5px; min-height: 52px;
}
.tira-conta > div { display: flex; flex-direction: column; gap: 3px; }
.tira-conta strong { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tira-conta em { font-style: normal; font-size: 11px; color: var(--texto-suave); }
.tira-conta .destaque strong { color: var(--menta); }
.tira-conta .ruim strong { color: var(--e-perdido-txt); }

/* --- selo de origem: o que veio do assistente aparece marcado --- */
.selo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: rgba(96, 170, 243, 0.1); color: var(--e-vendido-txt);
  border: 1px solid rgba(96, 170, 243, 0.26);
}
.selo .ic { width: 12px; height: 12px; }
tr.do-assistente td:first-child { box-shadow: inset 2px 0 0 var(--e-vendido); }

table.dados.clicavel tbody tr { cursor: pointer; }
table.dados tr.desligada { opacity: 0.48; }
table.dados .acoes-col { text-align: right; white-space: nowrap; }
table.dados .acoes-col .so-texto + .so-texto,
table.dados .acoes-col .so-texto + a { margin-left: 12px; }
table.dados td.ruim, table.dados .ruim { color: var(--e-perdido-txt); }
.so-texto.ruim { color: var(--e-perdido-txt); border-color: rgba(235, 130, 123, 0.32); }
.so-texto.ruim:hover { color: var(--e-perdido-txt); border-color: var(--alerta); }

/* --- estruturas de página --- */
/* Item de grade também nasce com `min-width: auto`: uma tabela larga dentro de
   uma coluna `1fr` estica a coluna em vez de rolar dentro dela, e quem passa a
   rolar de lado é a página inteira. Vale para as duas grades de cartão. */
.painel-duplo > *, .painel-graficos > *, .cartoes-socio > * { min-width: 0; }
.gcard > .rolagem { margin: 0 -4px; padding: 0 4px; }

.painel-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 20px; align-items: start; }
.pilha-secoes { display: flex; flex-direction: column; gap: 11px; margin-bottom: 20px; }
.dois-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.dois-lados > div { display: flex; flex-direction: column; gap: 13px; }
.pe-secao { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borda); display: flex; gap: 9px; }
.secao-larga { margin: 20px 0; }
.ir-adiante {
  display: inline-block; margin-top: 14px; font-size: 12.5px; color: var(--menta);
  text-decoration: none; border-bottom: 1px dashed var(--verde-borda);
}

/* Nota de método: existe porque o Marcos vai perguntar "por que deu esse
   valor", e a resposta tem que estar na tela, não na cabeça de quem construiu. */
.nota-metodo {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 15px 18px; border-radius: var(--raio-g); margin-bottom: 20px;
}
.nota-metodo .ic-nota {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.05); color: var(--texto-suave);
}
.nota-metodo p { font-size: 13px; line-height: 1.7; color: var(--texto-medio); text-wrap: pretty; }
.nota-metodo strong { color: var(--texto); }
.nota-metodo em { font-style: normal; color: var(--texto); font-weight: 600; }

/* --- a escada do resultado: cada linha tira do que veio antes ---
   `.conta-venda` é o mesmo desenho, pro resumo da venda (modal e ficha) — as
   regras abaixo valem pras duas classes, só com o seletor pai trocado. */
.escada, .conta-venda { display: flex; flex-direction: column; }
.escada li, .conta-venda li {
  list-style: none; display: flex; align-items: baseline; gap: 12px;
  padding: 8px 0; font-size: 13.5px; border-bottom: 1px solid rgba(26, 51, 35, 0.5);
}
.escada li span, .conta-venda li span { color: var(--texto-medio); flex: 1; min-width: 0; }
.escada li strong, .conta-venda li strong { font-weight: 640; font-variant-numeric: tabular-nums; white-space: nowrap; }
.escada li.menos strong, .conta-venda li.menos strong { color: var(--texto-suave); }
.escada li.soma { border-top: 1px solid var(--borda-forte); margin-top: 2px; }
.escada li.soma span, .escada li.soma strong { color: var(--texto); font-weight: 640; }
.escada li.total, .conta-venda li.total {
  border-bottom: 0; border-top: 1px solid var(--borda-forte); margin-top: 4px; padding-top: 12px;
}
.escada li.total span, .conta-venda li.total span { color: var(--texto); font-weight: 600; }
.escada li.total strong, .conta-venda li.total strong { font-size: 17px; }
.escada.compacta li { padding: 6px 0; font-size: 12.5px; }
.escada.compacta li.total strong { font-size: 15px; }
/* Lucro Marcos é o único destaque desta tela — verde quando fecha no azul; no
   vermelho, `saldo()` já escreve a cor e o sinal, então só falta o "quando fica
   verde" (o `saldo()` sozinho nunca colore o positivo, de propósito). */
.conta-venda li.total.destaque strong { color: var(--menta); }
.conta-venda li.total.ruim strong { color: var(--e-perdido-txt); }

.fecha-bloco {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda);
  font-size: 13px; color: var(--texto-medio);
}
.fecha-bloco strong { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
.fecha-bloco em { font-style: normal; margin-left: auto; font-size: 11.5px; color: var(--texto-suave); }

/* --- produção: uma linha por pessoa --- */
.pessoas { display: flex; flex-direction: column; gap: 9px; }
.pessoa-linha {
  display: grid; grid-template-columns: minmax(150px, 1fr) 2.4fr minmax(150px, 1fr);
  gap: 18px; align-items: center;
  padding: 14px 16px; border-radius: var(--raio-g);
  background: rgba(255, 255, 255, 0.028); border: 1px solid var(--borda);
  transition: border-color 200ms var(--suave), background 200ms var(--suave);
}
.pessoa-linha:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--borda-forte); }
.quem-linha { display: flex; align-items: center; gap: 11px; min-width: 0; }
.quem-linha .avatar {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06); color: var(--menta);
  font-size: 13px; font-weight: 700;
}
.quem-linha strong { display: block; font-size: 14px; font-weight: 600; }
.quem-linha .apagado { display: block; font-size: 11px; text-transform: capitalize; }
.numeros { display: flex; flex-wrap: wrap; gap: 9px 22px; }
.numeros > div { display: flex; flex-direction: column; gap: 2px; }
.numeros b { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.numeros b.ruim { color: var(--e-perdido-txt); }
.meta-caixa { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; }
.meta-caixa .progresso, .meta-caixa .meta-topo { width: 100%; }
.meta-topo { display: flex; align-items: baseline; gap: 8px; color: var(--texto-suave); }
.meta-topo strong { margin-left: auto; font-size: 14px; color: var(--texto); font-variant-numeric: tabular-nums; }
.meta-topo strong.bateu { color: var(--menta); }
.progresso { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.progresso i {
  display: block; height: 100%; border-radius: 999px; background: var(--gradiente-acao);
  transform-origin: left; animation: cresce 640ms var(--suave) both;
}

/* --- colunas por dia: barra empilhada, ordem do funil sempre --- */
.colunas-dia {
  display: flex; align-items: flex-end; gap: 3px; height: 148px;
  padding-top: 8px; overflow-x: auto;
}
.col-dia { flex: 1 1 0; min-width: 9px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.pilha-dia {
  flex: 1; width: 100%; display: flex; flex-direction: column-reverse; gap: 2px;
  justify-content: flex-start; border-radius: 4px; overflow: hidden;
}
.pilha-dia span {
  display: block; width: 100%; background: var(--c); border-radius: 3px;
  transform-origin: bottom; animation: cresce-alto 520ms var(--suave) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}
@keyframes cresce-alto { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.col-dia:hover .pilha-dia span { filter: brightness(1.25); }
.dia-rot { font-size: 9.5px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* --- escolha do perfil na venda: busca por identificador, um resultado escolhido --- */
.lista-ativos {
  margin-top: 12px; max-height: 230px; overflow-y: auto;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: rgba(2, 4, 3, 0.5);
}
/* Botão, não label: o resultado da busca não tem checkbox, é escolha única —
   os resets abaixo (fundo, borda, fonte) apagam o que o navegador bota em
   todo <button>, pra ele ficar igual à linha de lista que sempre foi. */
.item-ativo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%;
  padding: 8px 12px; font: inherit; text-align: left; color: inherit;
  background: transparent; border: none; border-bottom: 1px solid rgba(26, 51, 35, 0.5);
  font-size: 13px; cursor: pointer;
  transition: background 160ms var(--suave);
}
.item-ativo:hover { background: rgba(255, 255, 255, 0.04); }

.item-ativo .nome { font-weight: 550; flex: 1; min-width: 90px; }

.detalhe-extra { margin-top: 20px; border-top: 1px solid var(--borda); padding-top: 16px; }
.detalhe-extra summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--texto-suave);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.detalhe-extra summary::-webkit-details-marker { display: none; }
.detalhe-extra summary::before {
  content: '+'; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06); font-size: 13px;
}
.detalhe-extra[open] summary::before { content: '−'; }
.detalhe-extra summary:hover { color: var(--texto); }

/* --- leads --- */
.cartao-lead {
  position: relative;
  background: rgba(255, 255, 255, 0.038);
  border: 1px solid var(--borda);
  border-radius: 11px; padding: 11px 12px 11px 14px;
  cursor: grab; user-select: none;
  transition: background 200ms var(--suave), border-color 200ms var(--suave),
              transform 220ms var(--mola), box-shadow 220ms var(--suave);
  animation: surge-lateral 380ms var(--suave) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.cartao-lead::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  border-radius: 0 2px 2px 0; background: var(--cor-txt);
}
.cartao-lead:hover {
  background: rgba(255, 255, 255, 0.07); border-color: var(--borda-forte);
  transform: translateY(-2px); box-shadow: var(--sombra);
}
/* O par arrastando/fantasma do cartão de lead está lá em cima, junto com o do
   cartão de ativo: são o mesmo gesto e a regra é uma só. */
.cartao-lead .nome { font-size: 13.5px; font-weight: 550; }
.cartao-lead .linha2 {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--texto-suave);
}
.cartao-lead .valor { font-weight: 640; color: var(--texto-medio); font-variant-numeric: tabular-nums; }

/* --- a corrente das indicações --- */
.arvore { display: flex; flex-direction: column; gap: 13px; }
.arvore > li { list-style: none; font-size: 13.5px; }
.arvore > li > strong { font-weight: 600; }
.arvore > li > .apagado { font-size: 12px; margin-left: 7px; }
.arvore ul { margin: 7px 0 0 3px; padding-left: 14px; border-left: 1px solid var(--borda-forte); }
.arvore ul li { list-style: none; font-size: 12.5px; color: var(--texto-medio); padding: 3px 0; }
.arvore ul li .apagado { font-size: 11.5px; margin-left: 6px; }

.lista-simples { display: flex; flex-direction: column; }
.lista-simples li {
  list-style: none; display: flex; align-items: center; gap: 12px;
  padding: 8px 0; font-size: 13px; border-bottom: 1px solid rgba(26, 51, 35, 0.5);
}
.lista-simples li span { flex: 1; color: var(--texto-medio); }

/* Números autorizados (tela Assistente): cada número é uma linha com superfície
   própria — número em --texto, 15px, numerais tabulares — porque em .lista-simples
   (texto médio, 13px, filete) o autorizado tinha cara de rodapé e o Yago não
   enxergava nem ele nem o Remover. O selo embaixo diz se o número já vale no
   servidor ("autorizado") ou se ainda espera o Salvar ("ainda não salvo", linha
   tracejada e cor de aquecimento — pendente, não pronto). Remover é botão
   fantasma em cor de texto plena: neutro, sem verde (o verde é do Adicionar e
   do Salvar), e no hover avisa em --alerta que tira alguém da lista. */
.lista-numeros { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.lista-numeros li {
  list-style: none; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--borda-forte);
}
.lista-numeros li.vazia { color: var(--texto-medio); font-size: 13px; background: transparent; border-style: dashed; }
.lista-numeros li.novo { border-style: dashed; }
.lista-numeros .texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lista-numeros .numero { color: var(--texto); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.lista-numeros .estado { font-size: 11px; color: var(--texto-medio); text-transform: uppercase; letter-spacing: 0.07em; }
.lista-numeros li.novo .estado { color: var(--e-em_aquecimento-txt); }
.lista-numeros .remover-numero { color: var(--texto); flex-shrink: 0; }
.lista-numeros .remover-numero:hover { color: var(--alerta); border-color: rgba(235, 130, 123, 0.45); background: rgba(235, 130, 123, 0.1); }

/* --- cartões de sócio --- */
.cartoes-socio {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 11px;
}
.cartao-socio {
  border-radius: var(--raio-g); padding: 16px 17px 17px; cursor: pointer;
  display: flex; flex-direction: column; gap: 15px;
  transition: transform 280ms var(--mola), box-shadow 280ms var(--suave);
}
.cartao-socio:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
/* Sócio desativado fica na tela, apagado como a linha `desligada` da Equipe,
   e clicável — é pelo card que ele religa (QA-11). */
.cartao-socio.desligado { opacity: 0.55; }
.cartao-socio.desligado:hover { opacity: 0.85; }
.cartao-socio header .etiqueta { margin: 4px 0 2px; }
.cartao-socio > header { display: flex; align-items: center; gap: 11px; }
.cartao-socio .avatar {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06); color: var(--menta);
  font-size: 14px; font-weight: 700;
}
.cartao-socio header strong { display: block; font-size: 15px; font-weight: 620; }
.cartao-socio header .apagado { display: block; font-size: 11.5px; margin-top: 2px; }
/* As vendas do mês dentro do card: seis colunas num card de 300px só cabem
   menores, e o que sobra rola dentro da tabela — nunca a página de lado. */
.cartao-socio .rolagem { margin: 0 -4px; padding: 0 4px; }
/* Quatro números numa linha só: no flex, "Perfis vendidos" empurrava o
   quarto pra baixo, sozinho. Rótulo longo quebra em duas linhas. */
.cartao-socio .numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; align-items: end; }
.cartao-socio table.dados { font-size: 12px; }
.cartao-socio table.dados th, .cartao-socio table.dados td { padding: 6px 8px; white-space: nowrap; }

/* --- escolha de nível: o texto explica, o rádio decide --- */
.escolha-nivel { display: flex; flex-direction: column; gap: 8px; }
.opcao-nivel {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  padding: 11px 13px; border-radius: var(--raio);
  background: rgba(255, 255, 255, 0.028); border: 1px solid var(--borda);
  transition: border-color 180ms var(--suave), background 180ms var(--suave);
}
.opcao-nivel:hover { background: rgba(255, 255, 255, 0.05); }
.opcao-nivel input { margin-top: 2px; }
.opcao-nivel:has(input:checked) { border-color: var(--verde-borda); background: var(--verde-fundo); }
.opcao-nivel strong { display: block; font-size: 13.5px; font-weight: 600; }
.opcao-nivel em { display: block; font-style: normal; font-size: 12px; color: var(--texto-suave); margin-top: 3px; text-wrap: pretty; }

.linha-check { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; cursor: pointer; }

.linha-check .dica { flex-basis: 100%; margin: 0; padding-left: 26px; }

/* --- o convite: o envio nunca mente --- */
.caixa-convite {
  margin-top: 18px; padding: 15px; border-radius: var(--raio);
  animation: surge 320ms var(--suave) both;
}
.caixa-convite.saiu { background: var(--verde-fundo); border: 1px solid var(--verde-borda); }
.caixa-convite.falhou { background: rgba(202, 157, 51, 0.06); border: 1px solid rgba(202, 157, 51, 0.3); }
.caixa-convite strong { font-size: 13.5px; }
.caixa-convite.saiu strong { color: var(--menta); }
.caixa-convite.falhou strong { color: var(--e-em_aquecimento-txt); }
.caixa-convite .motivo { font-size: 12.5px; color: var(--texto-medio); margin-top: 6px; text-wrap: pretty; }
.link-convite { display: flex; gap: 8px; margin-top: 12px; }
.link-convite input { font-family: var(--mono); font-size: 12px; }

/* --- assistente --- */
.estado-assistente {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: var(--raio-g); margin-bottom: 20px;
}
.estado-assistente .pino {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--borda-forte);
  color: var(--texto-suave);
}
.estado-assistente .pino.ligado {
  background: var(--verde-fundo); border-color: var(--verde-borda); color: var(--menta);
  box-shadow: var(--brilho);
}
.estado-assistente .pino .ic { width: 21px; height: 21px; }
.estado-assistente .texto { flex: 1; min-width: 220px; }
.estado-assistente .texto strong { font-size: 15px; font-weight: 620; }
.estado-assistente .texto p { font-size: 13px; color: var(--texto-medio); margin-top: 5px; line-height: 1.65; text-wrap: pretty; }
.estado-assistente .acoes-assistente { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }

/* O QR mora fora do cartão de conexão (a caixa dele é branca — o QR precisa
   de fundo claro pra ler — e um vidro escuro por dentro do outro vidro escuro
   lia como erro de contraste, não como caixa própria). */
.qr-caixa { display: flex; justify-content: center; padding: 22px; margin-bottom: 20px; border-radius: var(--raio-g); }
.qr-caixa .qr { width: 240px; height: 240px; border-radius: var(--raio); background: #fff; padding: 10px; }

/* A faixa do teto usa o mesmo tom do estado "em aquecimento" — é aviso, não
   erro nem ação, e por isso não é vermelho nem verde. */
.faixa-teto {
  padding: 10px 14px; margin-bottom: 14px; border-radius: var(--raio);
  background: rgba(202, 157, 51, 0.09); border: 1px solid rgba(202, 157, 51, 0.3);
  color: var(--e-em_aquecimento-txt); font-size: 13px;
}

/* Campo + botão Adicionar na mesma linha (Números autorizados, tela Assistente). */
.linha-adicionar { display: flex; gap: 10px; }
.linha-adicionar input { flex: 1; }

/* ===========================================================================
   Celular
   =========================================================================== */
@media (max-width: 1100px) {
  .painel-graficos { grid-template-columns: 1fr; }
  .painel-duplo { grid-template-columns: 1fr; }
  /* Uma linha de produção com três blocos lado a lado só cabe em tela larga.
     Abaixo disso ela vira três faixas empilhadas, na mesma ordem de leitura. */
  .pessoa-linha { grid-template-columns: 1fr; gap: 13px; }
  .meta-caixa { border-top: 1px solid var(--borda); padding-top: 12px; }
}

@media (max-width: 900px) {
  #menu {
    position: fixed; left: 0; top: 0; width: 272px;
    transform: translateX(-100%);
    transition: transform 300ms var(--suave);
    background: rgba(8, 21, 13, 0.97);
  }
  #menu.aberto { transform: none; box-shadow: var(--sombra-alta); }
  #botao-menu { display: grid; place-items: center; }
  #topo { padding: 12px 16px; }
  #conteudo { padding: 18px 16px 96px; }
  .topo-tela h1 { font-size: 22px; }
  .topo-tela .acoes { margin-left: 0; width: 100%; }
  .topo-tela .acoes .botao { flex: 1; }

  .faixa-kpi {
    display: flex; gap: 9px; overflow-x: auto;
    margin: 0 -16px 18px; padding: 0 16px 5px;
    scroll-snap-type: x proximity; scroll-padding-inline: 16px;
  }
  .kpi { flex: 0 0 auto; min-width: 152px; scroll-snap-align: start; }
  .kpi .valor { font-size: 24px; }

  /* No celular os dois gráficos DO ESTOQUE vão para depois do quadro. No
     computador eles são uma faixa que cabe junto; no telefone empurravam o
     quadro duas telas para baixo — e quem abre o Estoque no celular veio
     trabalhar no quadro, não ver o panorama.

     A regra é pelo id, não pela classe: presa em `.painel-graficos` ela também
     jogava os gráficos do Financeiro e dos Relatórios para o fim da página,
     depois das tabelas, embaralhando a ordem de leitura de telas que não têm
     quadro nenhum. */
  #conteudo { display: flex; flex-direction: column; }
  /* Item de flex nasce com `min-width: auto`, e isso significa "não encolha
     abaixo do teu conteúdo". A faixa de KPIs rola de lado de propósito, mas com
     min-width automático ela esticava o #conteudo até a largura de todos os
     cartões somados — e aí quem rolava de lado era a PÁGINA, arrastando o menu
     e o topo junto. Pego em 2026-08-30 com o Playwright medindo scrollWidth
     contra clientWidth; a olho nu passa, porque o dedo rola e a tela volta. */
  #conteudo > * { min-width: 0; }
  #estoque-graficos { order: 5; margin: 24px 0 0; }
  .donut-caixa { gap: 14px; }
  .donut { width: 116px; height: 116px; }

  /* A barra vira grade de duas colunas, e a `.direita` deixa de ser caixa
     (`display: contents`) pra que o período e as abas de visão entrem na
     grade como os outros. Fica assim: esteira · busca · aquecedor, cada um
     na linha inteira ("Todos os aquecedores" não cabe em meia linha de
     358px); Dono e período lado a lado; as abas de visão fechando. Sem o
     Dono (o aquecedor logado não tem os dois selects), o período fica
     sozinho na linha. */
  .barra-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .barra-filtros .abas { grid-column: 1 / -1; width: 100%; overflow-x: auto; }
  #abas-visao button { flex: 1; }
  .barra-filtros .busca { grid-column: 1 / -1; width: 100%; max-width: none; }
  .barra-filtros select { width: 100%; min-width: 0; }
  .barra-filtros .direita { display: contents; }
  #filtro-aquecedor { grid-column: 1 / -1; }
  .barra-filtros:not(:has(#filtro-dono)) #filtro-periodo { grid-column: 1 / -1; }

  .quadro {
    grid-auto-columns: 81vw; max-height: none;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    margin: 0 -16px; padding: 0 16px 12px;
  }
  .coluna { scroll-snap-align: start; max-height: 66dvh; }

  #barra-lote {
    left: 12px; right: 12px; translate: none; bottom: 12px; border-radius: var(--raio-g);
    display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: center;
  }
  #barra-lote .separador { display: none; }
  #barra-lote .contagem { grid-area: 1 / 1; padding-left: 4px; }
  #barra-lote #lote-limpar { grid-area: 1 / 2; }
  #barra-lote select { grid-area: 2 / 1; width: 100%; min-width: 0; }
  #barra-lote #lote-aquecimento { grid-area: 2 / 2; }

  .campos.duas, .campos.tres { grid-template-columns: 1fr; }
  #modal { max-width: none; max-height: calc(100dvh - 26px); }
  #fundo-modal { padding: 13px; align-items: flex-end; }
  #avisos { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .aviso { max-width: none; }

  /* --- as outras treze no celular --- */
  /* O navegador de mês e o par de datas ocupam a linha inteira: espremidos ao
     lado de um select eles ficam com alvo de toque menor que o dedo. */
  .nav-mes { width: 100%; justify-content: space-between; }
  .nav-mes strong { flex: 1; }
  .par-data { width: 100%; }
  .par-data input { flex: 1; min-width: 0; }
  .barra-filtros .abas[data-atalhos] { grid-column: 1 / -1; }

  .dois-lados { grid-template-columns: 1fr; gap: 24px; }
  /* A escada do resultado não vira duas colunas: ela é uma conta que se lê de
     cima pra baixo, e quebrar isso quebra o raciocínio. */
  .escada li { font-size: 13px; }

  /* O ranking já é empilhado em qualquer largura — no celular só encolhe o
     respiro entre uma linha e outra. */
  /* O ranking já é empilhado em qualquer largura — no celular só encolhe o
     respiro entre uma linha e outra. */
  .ranking { gap: 13px; }
  /* Dois aquecedores têm que caber sem rolar: com 30px de vão e 148px de
     mínimo eles somavam 326px, e a tela do telefone dá 310px de cartão — o
     segundo nome chegava cortado. Com três ou mais, aí sim rola de lado. */
  .velas { gap: 16px; }
  .vela-grupo { min-width: 130px; }
  .vela-pilha { height: 132px; gap: 8px; }
  .vela .trilho { width: 30px; }
  .colunas-dia { height: 124px; }
  .col-dia { min-width: 11px; }
  .cartoes-socio { grid-template-columns: 1fr; }
  .numeros { gap: 8px 18px; }
  .numeros b { font-size: 15px; }

  .link-convite { flex-direction: column; }

  .nota-metodo { padding: 14px; gap: 12px; }
  .estado-assistente .acoes-assistente { width: 100%; }
  .estado-assistente .acoes-assistente .botao { flex: 1; }

  /* Tabela larga rola dentro do próprio bloco. O corpo da página nunca rola de
     lado — é o que separa "tabela grande" de "layout quebrado". */
  table.dados th, table.dados td { padding: 9px 11px; }
  table.dados .acoes-col { text-align: left; }
}

/* No telefone o card do ativo é a tela inteira, como no Trello. Só o card: os
   outros modais seguem como cartão colado embaixo (regra dos 900px acima), e
   este bloco vem DEPOIS daquele de propósito, pra vencer no que repete. */
@media (max-width: 640px) {
  /* --- barra do topo no telefone ---
     A data não é informação de trabalho no bolso, e "CN Contingência" ao lado
     do nome da tela é a marca duplicada com o menu, que já tem o logo. Some os
     dois e sobra ícone + "/" + o nome da tela, uma linha só. O botão do menu
     cresce pro alvo de dedo de 40px — media a 26 × 26, só a caixa do ícone. */
  .topo-direita { display: none; }
  .migalha-marca { display: none; }
  #botao-menu { width: 40px; height: 40px; }

  #fundo-modal:has(> #modal.com-card) { padding: 0; align-items: stretch; }
  #modal.com-card {
    max-width: none; max-height: none; height: 100dvh; border-radius: 0;
  }
  #modal.com-card > header { padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  /* O corpo cresce e o rodapé fica colado embaixo: com as seções recolhidas
     o card ficou curto, e o Fechar flutuando no meio da tela parecia erro. */
  #modal.com-card .corpo { padding: 16px; flex: 1 1 auto; }
  #modal.com-card > footer { padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .card-titulo { font-size: 19px; }
  .card-chips { gap: 6px 14px; font-size: 12.5px; }
  /* Alvo de dedo: os controles dentro dos chips (lista, aquecedor, dono) e os
     botões da confirmação no lugar crescem pra 40px de altura. */
  .card-chip select, .card-chip input { min-height: 40px; }
  .card-confirma .botao { min-height: 40px; }
  /* O resultado da busca de perfil na venda é o alvo do dedo que escolhe o
     que saiu — a mesma régua de 40px. Os botões dos ativos de uma compra, no
     modal da compra, usam a mesma classe e herdam daqui. */
  button.item-ativo { min-height: 40px; }
  /* As abas de esteira da venda e de Compras: o dedo escolhe ali entre Perfil,
     Página e BM antes de escolher o que saiu. */
  #vd-esteira button, #cp-filtro-esteira button { min-height: 40px; }
  /* A linha da compra abre o modal dela: alvo de dedo também, com um pouco
     mais de respiro vertical do que a tabela ganha sozinha. */
  table.dados tr[data-lote] td { padding-top: 13px; padding-bottom: 13px; }
  /* O rodapé com Apagar + confirmação: a pergunta cabe numa linha e os botões
     na de baixo, em vez de estourar a largura. */
  #modal.com-card > footer { flex-wrap: wrap; }
  /* A pergunta "descartar?" (QA-27) no rodapé de qualquer modal, no telefone:
     na mesma linha dos botões ela espremia os quatro — o `stretch` do rodapé
     esticava Cancelar e Registrar em pilares, e "Registrar venda" ficava com
     o texto cortado (79px pra um rótulo que precisa de 120). A pergunta toma
     a linha inteira e os botões de sempre descem, como o `.card-confirma`. */
  #modal > footer:has(.descarte) { flex-wrap: wrap; }
  #modal > footer .descarte { flex-basis: 100%; }
  /* E a pergunta em si numa linha, Continuar e Descartar juntos na de baixo:
     a 302px de vão a frase mais um botão cabiam e o outro caía sozinho. */
  #modal > footer .descarte > span { flex-basis: 100%; }
  /* O campo de link desce pra própria linha: ao lado do botão de arquivo ele
     sobrava com 50px, e link não se cola em 50px. `flex-basis` e não `width`,
     porque num item de flex é a base que manda. */
  .card-form-link { flex: 1 1 100%; min-width: 0; }
  .card-arquivo { flex: 1 1 auto; justify-content: center; }

  /* --- acessos no telefone ---
     O card do topo já é alvo de dedo (56px). No modal, duas colunas de
     cartão (a largura útil dá duas de 150 com o vão); a busca e o Adicionar
     crescem pra 40px. */
  .grade-acessos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .acessos-topo .busca-acessos { min-width: 0; min-height: 40px; }
  .acessos-topo #acesso-novo { min-height: 40px; }
  /* Toda aba e todo select da barra de filtros viram alvo de dedo: aquecedor,
     dono e período são selects, e as abas de esteira e de visão, na mesma
     barra, não podiam ficar menores que os vizinhos. */
  .barra-filtros .abas button { min-height: 40px; }
  .barra-filtros select, .barra-filtros .busca { min-height: 40px; }
  /* "Novo perfil" no topo e "+ perfil" no pé da coluna são os únicos botões
     que criam ativo — os dois viram alvo de dedo, do mesmo jeito que
     #acesso-novo, ali em cima. */
  #novo-perfil, .coluna .pe-coluna { min-height: 40px; }
  /* A caixa de marcar continua com 15px de desenho — só o alvo de toque cresce,
     por um pseudo-elemento que estoura a borda sem mexer no tamanho visível.
     O vão da linha1 cresce de 8 pra 13px pra caber o estouro do ::before sem
     invadir o começo do nome — 13px de vão, 13px de inset, encostando sem
     sobrepor. Sem isto, tocar nas primeiras letras do nome marcava o cartão
     em vez de abrir. */
  .marcador::before { content: ''; position: absolute; inset: -13px; }
  .cartao-ativo .linha1 { gap: 13px; }

  /* --- visão Listas no telefone ---
     O índice de grupos vira um select ("Ir para…") em cima do quadro: 240px
     de coluna fixa não cabem ao lado de nada em 390. O quadro do grupo rola de
     lado de borda a borda, como o Quadro, uma coluna por tela. */
  .listas-trello { grid-template-columns: 1fr; gap: 10px; }
  .grupos { display: none; }
  .ir-para-grupo { display: block; width: 100%; min-height: 44px; }
  .quadro-do-grupo {
    margin: 0 -16px; padding: 0 16px 8px;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  }
  .quadro-do-grupo .coluna { flex-basis: 82vw; min-width: 82vw; scroll-snap-align: start; }
  .quadro-do-grupo .vazio.grande { padding: 40px 16px; }

  /* --- Equipe (e toda tabela com ações) no telefone — QA-15, 2026-09-17 ---
     E-mail e "Entrou em" somem (os dois estão no modal de editar); a coluna de
     ações gruda à direita, com fundo sólido e sombra à esquerda — alcançável
     sem rolar, e a sombra é o sinal de que há coluna atrás; cada ação vira um
     alvo de 40px, uma por linha. A célula continua sem quebrar linha. */
  .so-largo { display: none; }
  table.dados td.acoes-col, table.dados th.acoes-col {
    position: sticky; right: 0; background: var(--superficie-alta);
    box-shadow: -10px 0 12px -10px rgba(0, 0, 0, 0.7);
  }
  table.dados th.acoes-col { z-index: 3; }
  /* A caixa cresce pra 40px; o filete tracejado sai da borda da caixa (ficaria
     20px abaixo do texto) e vai pro sublinhado do próprio texto. */
  table.dados .acoes-col .so-texto {
    display: flex; align-items: center; min-height: 40px;
    border-bottom: 0; text-decoration: underline dashed; text-decoration-color: var(--borda-forte); text-underline-offset: 3px;
  }
  table.dados .acoes-col .so-texto + .so-texto, table.dados .acoes-col .so-texto + a { margin-left: 0; }

  /* --- alvos de dedo que o QA mediu abaixo de 40px (QA-36, 2026-09-17) ---
     Setas de mês, X do modal, ícones de baixar/remover, select de estado do
     card, "marcar os N" e o checkbox da Tabela. O
     `.subtotal .acao` cresce em TODA coluna (com ou sem botão) pros cinco
     cabeçalhos continuarem da mesma altura — é a regra do quadro. O checkbox
     segue com 16px de desenho e ganha área por ::before, como o `.marcador`
     logo acima. */
  .nav-mes button { width: 40px; height: 40px; }
  #modal > header .fechar { width: 40px; height: 40px; }
  .botao.icone { width: 40px; height: 40px; }
  .card-estado { min-height: 40px; }
  .coluna .subtotal .acao { display: flex; align-items: center; min-height: 40px; }
  /* Duas instâncias de `.botao.pequeno` que a própria régua acima deixou de
     fora: "Continuar"/"Descartar" do rodapé da pergunta (QA-27, criada nesta
     rodada) e o "Adicionar" dos anexos do card, ao lado do X e do "Fechar" —
     os dois já de 40px (design review, 2026-09-17, rodada 2). */
  #modal > footer .descarte button { min-height: 40px; }
  #card-adicionar { min-height: 40px; }
  /* O .so-texto do quadro que vira alvo de dedo: a caixa cresce pra 40px e o
     filete tracejado sai da borda da caixa (ficaria 20px abaixo do texto) e
     vai pro sublinhado do próprio texto — o mesmo que a coluna de ações da
     Equipe já faz, logo acima. */
  .coluna .subtotal .acao .so-texto {
    display: inline-flex; align-items: center; min-height: 40px;
    border-bottom: 0; text-decoration: underline dashed; text-decoration-color: var(--borda-forte); text-underline-offset: 3px;
  }
  .lista-estoque td.marca input[type=checkbox], .lista-estoque th.marca input[type=checkbox] { position: relative; }
  .lista-estoque td.marca input[type=checkbox]::before, .lista-estoque th.marca input[type=checkbox]::before { content: ''; position: absolute; inset: -12px; }

  /* --- Assistente no telefone --- QR de 240px centrado (o mesmo tamanho do
     computador — ele precisa ler no papel ou na tela de outro celular, e
     encolher o QR é o único jeito de estragar isso). Salvar cresce pro alvo
     de dedo de 40px. */
  #ass-salvar { min-height: 40px; }
  /* Números autorizados: Adicionar cresce como qualquer outro botão de ação, e
     o Remover (botão fantasma desde 2026-09-21) cresce junto pro alvo de dedo. */
  #ass-adicionar, #ass-numero-novo, .lista-numeros .remover-numero { min-height: 40px; }
}

/* Quem pediu menos movimento recebe menos movimento — inclusive nos gráficos,
   que são o que mais anima nesta tela. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}