/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ============================================================
   FORCA DE VENDAS: a folha COMPARTILHADA das 15 telas de celular (10 de Atacado e Distribuicao,
   5 de Balcao). Aqui moram o cabecalho verde escuro, a barra de abas do rodape, os primitivos
   que as 15 telas dividem, e os tokens de cor do modulo. Cada grupo de telas tem a sua folha
   propria por cima desta (fdv-atacado-rede.css, fdv-atacado-pedido.css,
   fdv-atacado-devolucoes.css, fdv-balcao.css) e ela SO acrescenta o que e daquelas telas.

   DE ONDE VEM CADA COR: amostradas com Pillow nos JPEG que o James mandou em 19/09/2026
   (scratchpad/telas-james-forca-de-vendas/), pela MODA de uma regiao lisa e nao por um pixel
   solto, porque JPEG tem ruido de compressao e um pixel so mente. As fichas de extracao, uma por
   tela, estao em scratchpad/fdv-extracao-*.md com a coordenada de cada amostra.

   A MATIZ DOS VERDES MUDOU EM 20/09/2026, e isto nao desfaz a amostragem acima. O que aconteceu:
   a marca JAP Frutas passou a existir como arquivo (ate entao ela so vivia dentro da imagem de
   1024 px que o James fez no ChatGPT), e com ela veio uma cor de marca medida no proprio desenho:
   o verde #709217, que e amarelo-esverdeado. Os verdes destas telas eram azul-esverdeados
   (#023127, #045b38, #16a75f...), da familia teal -- eles sairam do desenho, mas o desenho foi
   feito antes de a marca existir. Entao cada verde daqui foi RE-MATIZADO para a familia da marca
   PRESERVANDO A LUMINANCIA de cada cor, uma a uma: `#023127` virou `#212f02`, `#16a75f` virou
   `#769f15`, e assim por diante. Preservar a luminancia quer dizer que TODO contraste medido
   continua identico ao que era -- o portao de contraste, a hierarquia do desenho e a legibilidade
   nao mudaram um ponto; so o tom mudou.
   O QUE NAO FOI RE-MATIZADO, de proposito: cor em que a MATIZ e o significado. As sete da rosca de
   motivos e as cinco das redes vivem em `assets/dados/avarias-exemplo.js` e nao aqui; nesta folha
   ficaram de fora o teal do PIX, os azuis e as cores de segmento e de galpao. Mudar a matiz delas
   apagaria a diferenca entre duas series, que e a informacao.

   NOMES DIZEM O PAPEL, NAO O TOM (`--fdv-faixa-escura`, nunca `--fdv-verde-1`): e a mesma regra
   de avarias.css, e existe porque o dia em que o verde do cabecalho mudar, o nome continua certo.

   ESTA FOLHA NAO E DE AVARIAS E NAO SE PENDURA NELA. `avarias-celular.css` escopa tudo em
   `.tela-avarias-celular`, e por o modulo de Forca de Vendas la dentro acoplaria dois modulos que
   vao mudar em ritmos diferentes: qualquer ajuste no cabecalho de Avarias mexeria nestas 15
   telas sem ninguem pedir. O que foi copiado daqui de la e a TECNICA, nao as classes, e cada
   lugar onde isso acontece diz de onde veio.
   ============================================================ */

.tela-fdv {
  /* chao e papel */
  --fdv-pagina: #f8f9f6;
  --fdv-cartao: #ffffff;
  --fdv-cartao-fraco: #f5f7f2;
  --fdv-borda: #e8eae2;
  --fdv-borda-forte: #d6d9ce;

  /* as faixas verdes: o cabecalho do aparelho e os botoes primarios */
  --fdv-faixa-escura: #1c2800;
  --fdv-botao: #405b00;
  --fdv-botao-pressionado: #314700;
  --fdv-verde-claro: #eef3e3;
  --fdv-verde-medio: #c0cba7;
  /* A TINTA VERDE QUE ACOMPANHA O TEMA, e ela existe porque `--fdv-botao` nao pode acompanhar.
     `--fdv-botao` e a cor da marca, usada como FUNDO de botao, e cor de marca nao troca com o tema,
     do mesmo jeito que um logotipo nao troca. Mas quando esse mesmo verde e usado como TEXTO sobre
     um fundo claro que escurece no tema escuro, ele vira verde sobre verde. Foi medido: 1,83:1.
     Este token e para o verde usado como TINTA. No claro e o mesmo da marca; no escuro ele clareia. */
  --fdv-verde-tinta: #405b00;

  /* texto.
     NAVY, NAO VERDE, e isso foi MEDIDO depois de eu ter escrito verde de cabeca. Amostrei a tinta
     mais escura de sete blocos de texto nos dois desenhos: o nome da rede da #000037, "Comercial
     Almeida" da #00003e, "R$ 50.000" da #242750, "Revisao do pedido" da #000037. As duas fichas de
     extracao, feitas por quem leu os JPEG sem ver o meu codigo, chegaram no mesmo lugar sozinhas
     (#000030, #282861, #26285d). Tres leituras independentes concordando fecham o assunto.
     O valor aqui e um pouco mais claro que a amostra crua porque a amostra pega o NUCLEO da letra,
     que o JPEG escurece; #131c4d da 15,6:1 sobre o cartao branco e le como o mesmo azul. */
  --fdv-texto: #131c4d;
  --fdv-texto-apoio: #515a7d;
  /* #5f678c, NAO MAIS #6f779c (r38, 27/09/2026, ordem do Carvalho de 26/09 15:25 que manda a regua
     da Apple valer nestas telas): o de antes dava 4,38:1 no cartao branco e 4,06:1 no fundo claro, e
     a regua pede 4,5:1. Este e o mesmo azul acinzentado um passo mais escuro: 5,52:1 no branco e
     4,88:1 no verde-claro #eef3e3, o fundo mais escuro em que ele aparece (cartoes do Balcao). */
  --fdv-texto-rotulo: #5f678c;
  --fdv-texto-claro: #ffffff;
  --fdv-apoio-na-faixa: #c5cbb6;
  /* O LILAS DO SELO DE ICONE dos titulos das telas 7, 9 e 10 do Atacado ("Revisão do pedido",
     "Devoluções por loja", "Devoluções por produto"): nos desenhos cada um desses titulos vem com
     um quadrado de canto arredondado, lilas claro, com o desenho branco dentro. Amostrado #c7bdfa
     por quem extraiu a tela 7. Nao e cor de marca, e sinalizacao de "este e um passo do fluxo", e
     por isso e a mesma nas tres. Quem construiu a tela 7 usou verde por nao haver token e
     reportou; o token existe agora. */
  --fdv-selo-icone: #c7bdfa;
  --fdv-selo-icone-tinta: #3a2f7a;
  /* O laranja da assinatura manuscrita do letreiro. AMOSTRADO e DEPOIS CLAREADO, e vale dizer por
     que: o pixel mais laranja da caligrafia no desenho e #bc6307 (coordenada 223,178 da imagem
     ampliada), e sobre o verde #1c2800 do cabecalho isso da 3,2:1 de contraste. A 10px de letra,
     3,2:1 reprova no WCAG AA, que pede 4,5:1. O desenho pode ter texto que mal se le porque e uma
     imagem; a tela nao pode. #e8952f e o mesmo laranja mais claro e da 6,1:1. E a unica cor deste
     modulo que nao e a amostra crua, e esta e a razao. */
  --fdv-lema: #e8952f;

  /* subir e descer, e os avisos. EM DEVOLUCAO SUBIR E RUIM: quem escolhe a cor e o
     `melhorQuando` de `chipDeVariacao()` (assets/js/grafico.js), nunca a direcao da seta. */
  --fdv-verde-alta: #769f15;
  --fdv-vermelho: #e11d1d;
  --fdv-ambar: #d98324;
  --fdv-ambar-fundo: #fdf3e3;
  --fdv-vermelho-fundo: #fdeaea;
  --fdv-verde-fundo: #eef4de;
  /* A TINTA DE TEXTO DAS CORES DE AVISO (r38, 27/09/2026). As tres cores acima sao IDENTIDADE e
     continuam pintando barra, icone e seta; mas como LETRA elas nao chegam a 4,5:1 (o vermelho da
     4,13:1 no fundo rosado, o ambar 2,65:1 no creme, o verde 3,12:1 no branco), e a ordem do
     Carvalho de 26/09 manda a regua de contraste valer aqui. Entao a letra usa a MESMA matiz um
     passo mais escura no claro (5,0 a 5,8:1) e mais clara no escuro (5,1 a 7,6:1). */
  --fdv-vermelho-texto: #c81a1a;
  --fdv-ambar-texto: #9c5a0e;
  --fdv-verde-texto: #55740c;

  /* Altura do CONTEUDO da barra de baixo, sem o recorte de baixo (a barra de gestos do iPhone).
     Mesmo numero e mesmo raciocinio de `--avc-base-altura` em avarias-celular.css: a altura crua
     medida na imagem mistura escala de imagem gerada por IA com escala de CSS de verdade, e
     escalada para a largura de um iPhone de verdade (390 a 440px) cai na faixa de uma barra de
     abas comum (iOS ~49pt mais respiro, Android ~56-80dp). 60px da folga confortavel para o alvo
     de toque de 40px. */
  --fdv-base-altura: 60px;

  background: var(--fdv-pagina);
  color: var(--fdv-texto);
  /* A raiz vira container de tamanho para as folhas das telas poderem escrever
     `@container (max-width: Npx)` contra ELA, e nao contra a janela: dentro da casca do painel a
     largura util do recipiente nao e a largura do navegador, e media query de janela erraria o
     alvo. Mesma decisao da secao 9 do contrato das telas de celular de Avarias. */
  container-type: inline-size;
  min-height: 100%;
  /* A RESERVA DA BARRA DE BAIXO MUDOU DE LUGAR (r38, 27/09/2026). Ela morava aqui, no fim da tela,
     mas depois da tela o painel ainda desenha o rodape ("Desenvolvido por Carvalho"), e era ELE que
     ficava para sempre embaixo da barra fixa com a pagina rolada ate o fim (regra "cobre" da
     auditoria de tela, nas 15 telas). Aqui fica so o respiro de 16px; a reserva da barra vai para o
     fim da pagina inteira, na regra logo abaixo. */
  padding-bottom: 16px;
}
/* O FIM DA PAGINA RESERVA A BARRA: altura da barra (64px, a maior das duas, a de ate 420px de
   largura) mais o recorte do iPhone. `:has` porque o rodape e da casca e so recebe a reserva quando
   esta tela esta aberta; os numeros sao literais porque `--fdv-base-altura` mora DENTRO da tela e
   nao alcanca o rodape, que e irmao dela. */
.conteudo:has(.tela-fdv) > .rodape {
  padding-bottom: calc(64px + var(--recorte-base) + 8px);
}

/* O TEMA ESCURO SEGUE O MECANISMO DO PAINEL, NUNCA SO O DO NAVEGADOR, e a diferenca entre os dois
   ja custou um portao vermelho neste repositorio (comentario longo em avarias.css, linha 335). O
   painel tem TRES estados, definidos em assets/css/tokens.css e gravados por assets/js/inicio.js:
   `data-tema="claro"` e `data-tema="escuro"` quando a pessoa escolheu, e NENHUM atributo quando
   ela deixou em "auto", e so ai o `prefers-color-scheme` vale. As duas regras abaixo sao as
   MESMAS DUAS de tokens.css, com o mesmo recorte.
   NO ESCURO O CHAO, O CARTAO E A FAIXA DO CABECALHO LEEM OS TOKENS DE SUPERFICIE DO PAINEL (r81,
   03/10/2026): grafite neutro, croma zero. Antes o escuro daqui era verde-oliva por dentro (#101507,
   #191f0b) e, com a casca ao redor ja grafite, a tela inteira parecia um retangulo verde: a queixa do
   Presidente de 02/10/2026, "se colocar modo escuro fica fundo verde". O verde do botao e o lima do
   item ativo da barra de baixo continuam, so como destaque, do mesmo jeito que um logotipo nao troca
   de cor com o tema. Quem mede e a regra `croma` da auditoria de tela, em toda tela. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tela-fdv {
    --fdv-pagina: var(--superficie-0);
    --fdv-cartao: var(--superficie-1);
    --fdv-cartao-fraco: var(--superficie-2);
    --fdv-borda: var(--border);
    --fdv-borda-forte: var(--pontos);
    --fdv-faixa-escura: var(--superficie-2);
    --fdv-botao: var(--marca-solida); /* o botao largo: a tinta de marca da porta, aceita pela regra `croma` */
    --fdv-botao-pressionado: var(--marca-solida-forte);
    --fdv-apoio-na-faixa: var(--muted-foreground);
    --fdv-verde-claro: var(--tom-verde-fundo);
    --fdv-verde-tinta: #b6d964;
    --fdv-texto: var(--foreground);
    --fdv-texto-apoio: var(--muted-foreground);
    --fdv-texto-rotulo: var(--muted-foreground);
    --fdv-ambar-fundo: var(--tom-ambar-fundo);
    --fdv-vermelho-fundo: var(--tom-coral-fundo);
    --fdv-verde-fundo: var(--tom-verde-fundo);
    --fdv-vermelho-texto: var(--tom-coral);
    --fdv-ambar-texto: var(--tom-ambar);
    --fdv-verde-texto: var(--tom-verde);
  }
}
:root[data-tema="escuro"] .tela-fdv {
  --fdv-pagina: var(--superficie-0);
  --fdv-cartao: var(--superficie-1);
  --fdv-cartao-fraco: var(--superficie-2);
  --fdv-borda: var(--border);
  --fdv-borda-forte: var(--pontos);
  --fdv-faixa-escura: var(--superficie-2);
  --fdv-botao: var(--marca-solida); /* o botao largo: a tinta de marca da porta, aceita pela regra `croma` */
  --fdv-botao-pressionado: var(--marca-solida-forte);
  --fdv-apoio-na-faixa: var(--muted-foreground);
  --fdv-verde-claro: var(--tom-verde-fundo);
  --fdv-verde-tinta: #b6d964;
  --fdv-texto: var(--foreground);
  --fdv-texto-apoio: var(--muted-foreground);
  --fdv-texto-rotulo: var(--muted-foreground);
  --fdv-ambar-fundo: var(--tom-ambar-fundo);
  --fdv-vermelho-fundo: var(--tom-coral-fundo);
  --fdv-verde-fundo: var(--tom-verde-fundo);
  --fdv-vermelho-texto: var(--tom-coral);
  --fdv-ambar-texto: var(--tom-ambar);
  --fdv-verde-texto: var(--tom-verde);
}

/* ============================================================
   TETO DE LARGURA PARA TODA FIGURA DAS 15 TELAS.
   O QUE ISTO EVITA, em portugues: uma figura desenhada no tamanho do ARQUIVO em vez do tamanho da
   tela. `assets/img/redes/mix-mateus.png` tem 1000px de largura. Num computador de 1440px isso
   cabe e ninguem ve; num iPhone de 390px a figura empurra a PAGINA INTEIRA para o lado, e quem
   abre arrasta a tela de lado sem entender por que. Teto individual por classe protege so a
   figura que alguem lembrou de proteger; a proxima <img> que entrar nasce sem teto. Esta regra
   pega todas, inclusive as que ainda nao existem. */
.tela-fdv img {
  max-width: 100%;
}

/* ============================================================
   CABECALHO DO APARELHO: botao na esquerda (sanduiche ou seta de voltar), marca CENTRALIZADA,
   sino com contagem na direita.

   O CENTRO E DE VERDADE, e essa e a unica diferenca estrutural relevante para o cabecalho de
   Avarias (que alinha a marca a esquerda): `grid-template-columns: 1fr auto 1fr` com os dois
   lados de mesma largura mantem a marca no meio EXATO mesmo quando o botao da esquerda troca de
   sanduiche (largo) para seta (estreito). Feito com flex e `margin: auto` a marca escorregaria
   alguns pixels a cada troca de tela, e a pessoa que folheia as 10 telas ve a marca tremer.
   ============================================================ */
.fdv-topo {
  align-items: center;
  background: var(--fdv-faixa-escura);
  color: var(--fdv-texto-claro);
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto 1fr;
  padding: 10px 14px;
}
.fdv-topo-marca {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  min-width: 0;
}
/* A MARCA "JAP FRUTAS" DO DESENHO NAO EXISTE como arquivo: o gerador de imagem a inventou. A
   pasta da marca tem duas de verdade (assets/img/redes/LEIA-ME.md), entao aqui vai a marca real e
   as palavras compostas em tipo, que e o que o pedido manda. Nunca um logotipo desenhado a mao. */
.fdv-topo-marca img {
  height: 30px;
  width: auto;
}
.fdv-topo-palavras {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}
.fdv-topo-nome {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.fdv-topo-assinatura {
  color: var(--fdv-apoio-na-faixa);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* A TERCEIRA LINHA DO LETREIRO, "Toneladas de Sabor". No desenho ela e manuscrita em laranja,
   e aqui sai em italico na cor da marca: compor as palavras em TIPO e o que a ordem manda, porque
   o letreiro "JAP FRUTAS" do desenho NAO EXISTE como arquivo (o gerador de imagem o inventou, e
   assets/img/redes/LEIA-ME.md registra isso). Desenhar a mao a caligrafia dele seria fabricar
   marca da empresa do dono, que e exatamente o que nao se faz. */
.fdv-topo-lema {
  color: var(--fdv-lema);
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.fdv-topo-acoes {
  display: flex;
  justify-content: flex-end;
}
.fdv-topo-botao {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  display: flex;
  justify-content: center;
  /* 44x44, NAO 40x40: o piso mudou em 20/09/2026 (scripts/medir-tela-comum.mjs) porque o numero
     antigo nao tinha fonte nenhuma. 44 e o minimo das Human Interface Guidelines da Apple (44x44
     pt) e ja cobre o das Diretrizes Material do Android (48x48 dp fica so 4px acima); e o MENOR
     dos dois pisos de plataforma, entao usar 44 aqui e nao inventar numero. O icone dentro tem
     22px; o resto e area clicavel, que num dedo vale mais do que no olho. */
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  position: relative;
}
.fdv-topo-botao:hover {
  background: rgb(255 255 255 / 12%);
}
.fdv-topo-botao:focus-visible {
  outline: 2px solid var(--fdv-texto-claro);
  outline-offset: 2px;
}
/* `icone()` (assets/js/ui.js) devolve um <svg> SEM largura nem altura, de proposito: quem o usa e
   que manda no tamanho. Contexto sem regra de tamanho ja desenhou icone de 400px neste
   repositorio, e foi visto numa foto de tela montada. Toda folha deste modulo dimensiona os seus. */
.fdv-topo-botao svg {
  height: 22px;
  width: 22px;
}
/* A FRASE HONESTA DO CABECALHO. No fluxo normal, logo abaixo da faixa verde, com a cor da faixa
   para ler como continuacao dela. `:empty` some por completo: ate alguem tocar um botao sem
   destino, ela nao existe na tela nem ocupa um pixel. */
.fdv-topo-aviso {
  background: var(--fdv-faixa-escura);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
  padding: 0 14px 10px;
  text-align: center;
}
.fdv-topo-aviso:empty {
  display: none;
}
.fdv-sino-contagem {
  align-items: center;
  background: var(--fdv-vermelho);
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-size: 11px; /* era 10 ate a r38 (27/09/2026): piso de letra de 11px */
  font-weight: 700;
  justify-content: center;
  min-height: 16px;
  min-width: 16px;
  padding: 0 4px;
  position: absolute;
  right: 2px;
  top: 2px;
}

/* ============================================================
   BARRA DE ABAS DO RODAPE. A PECA MAIS PERIGOSA DESTA FOLHA, e a tecnica e copiada de
   `.avc-base` (avarias-celular.css): o FUNDO desce ate a borda da tela (`inset: auto 0 0 0`, sem
   isso sobra uma tira clara embaixo), e quem devolve o espaco da barra de gestos do iPhone para o
   CONTEUDO e o `padding-bottom: var(--recorte-base)`, que empurra os botoes para cima sem mexer no
   fundo, porque o padding fica DENTRO da caixa que ja vai ate `bottom: 0`. Fora de aparelho com
   recorte, `--recorte-base` vale 0px e nada muda.

   A DIFERENCA PARA AVARIAS E A COR: naqueles desenhos a barra e escura, nestes e BRANCA com o
   item ativo em verde. Isso muda o token, nao a tecnica.
   ============================================================ */
.fdv-base {
  background: var(--fdv-cartao);
  border-top: 1px solid var(--fdv-borda);
  inset: auto 0 0 0;
  padding-bottom: var(--recorte-base);
  position: fixed;
  z-index: 40;
}
.fdv-base-itens {
  display: grid;
  /* Colunas iguais ao NUMERO DE ITENS recebido (o JS grava `--fdv-base-colunas`), nunca um "4"
     cravado aqui: o menu do desenho tem 4 hoje, mas a barra nao pode quebrar sozinha se um quinto
     item aparecer amanha. O 4 do `var(..., 4)` e so o retrato de hoje, para o palco isolado
     desenhar certo antes de o JS rodar. */
  grid-template-columns: repeat(var(--fdv-base-colunas, 4), 1fr);
  min-height: var(--fdv-base-altura);
}
.fdv-base-item {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--fdv-texto-rotulo);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  gap: 3px;
  justify-content: center;
  min-width: 0;
  padding: 6px 2px;
}
.fdv-base-item svg {
  height: 20px;
  width: 20px;
}
.fdv-base-item[aria-current="page"] {
  color: var(--fdv-verde-tinta);
  font-weight: 700;
}
.fdv-base-item:focus-visible {
  outline: 2px solid var(--fdv-botao);
  outline-offset: -2px;
}
.fdv-base-rotulo {
  /* 11px, nao mais 10 (r38, 27/09/2026): o piso de letra da regua da Apple, ordem do Carvalho de 26/09. */
  font-size: 11px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Abaixo de 420px a fileira perde ALTURA, nunca a palavra: rotulo de navegacao cortado
   ("Produt...") deixa de dizer para onde o botao leva, que e a unica funcao dele. E
   `--fdv-base-altura` sobe junto, porque e ela que a raiz da tela usa para reservar o espaco do
   ultimo bloco: subir a barra sem subir a reserva esconderia o fim da tela atras dela, que e
   exatamente o defeito que esta barra existe para evitar. */
@media (max-width: 419.98px) {
  .tela-fdv {
    --fdv-base-altura: 64px;
  }
  .fdv-base-rotulo {
    overflow-wrap: break-word;
    text-align: center;
    text-overflow: clip;
    white-space: normal;
  }
}
/* A FRASE HONESTA DE QUEM NAO TEM DESTINO. Nasce vazia (`:empty` some por completo) e fica
   ANCORADA no proprio `.fdv-base` (`position: absolute`, `bottom: 100%`), nunca dentro da fileira
   de botoes: assim ela nunca disputa altura com a conta de safe-area acima, que e o tipo de
   acoplamento que ja mordeu esta casa uma vez. */
.fdv-base-aviso {
  background: var(--fdv-faixa-escura);
  border-radius: 8px;
  bottom: 100%;
  box-shadow: var(--sombra-md);
  color: #fff;
  font-size: 12px;
  left: 12px;
  margin-bottom: 8px;
  padding: 8px 12px;
  position: absolute;
  right: 12px;
  text-align: center;
}
.fdv-base-aviso:empty {
  display: none;
}

/* ============================================================
   O CORPO: a pilha vertical de blocos entre o cabecalho e a barra de baixo.
   `gap` de 12px e a MEDIDA do desenho (vao entre cartoes sobre a largura util da tela), nao um
   numero bonito: as fichas de extracao trazem a razao medida.
   ============================================================ */
.fdv-corpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

/* ---------- CARTAO BRANCO GENERICO ---------- */
.fdv-cartao {
  background: var(--fdv-cartao);
  border: 1px solid var(--fdv-borda);
  border-radius: 12px;
  min-width: 0;
  padding: 12px;
}

/* ---------- A CABECA DA REDE: marca + nome + regiao + contagem de lojas, e um botao na ponta ----------
   E o bloco que abre as telas 2, 3, 4 e 5 do Atacado, sempre igual, so mudando o botao da direita
   ("Trocar rede" na 2, "Voltar" na 3 e na 5). */
.fdv-cabeca-rede {
  align-items: center;
  background: var(--fdv-cartao);
  border: 1px solid var(--fdv-borda);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}
.fdv-cabeca-rede-marca {
  flex: 0 0 auto;
  max-height: 40px;
  max-width: 56px;
  object-fit: contain;
}
.fdv-cabeca-rede-marca-texto {
  font-size: 13px;
  font-weight: 700;
  max-width: 72px;
}
.fdv-cabeca-rede-texto {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.fdv-cabeca-rede-nome {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}
.fdv-cabeca-rede-apoio {
  color: var(--fdv-texto-apoio);
  font-size: 12px;
  line-height: 1.3;
}

/* ---------- BOTOES ---------- */
.fdv-botao {
  align-items: center;
  background: var(--fdv-botao);
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  /* 44px: minimo das Human Interface Guidelines da Apple (44x44 pt), o menor dos dois pisos de
     plataforma (o Android pede 48x48 dp no Material). Desde 20/09/2026 vale para TODO botao de
     acao do modulo, nao so este -- o piso antigo de "40 para quem so navega" nao tinha fonte
     nenhuma (scripts/medir-tela-comum.mjs), e um botao so de navegar tambem perde a etapa inteira
     quando o dedo erra o toque. */
  min-height: 44px;
  padding: 10px 16px;
  width: 100%;
}
.fdv-botao:hover {
  background: var(--fdv-botao-pressionado);
}
.fdv-botao:focus-visible {
  outline: 2px solid var(--fdv-texto);
  outline-offset: 2px;
}
.fdv-botao svg {
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}
.fdv-botao-vazado {
  background: var(--fdv-cartao);
  border: 1px solid var(--fdv-borda-forte);
  color: var(--fdv-texto);
}
.fdv-botao-vazado:hover {
  background: var(--fdv-cartao-fraco);
}
/* O botao pequeno da ponta de um cabecalho ("Trocar rede", "Voltar", "Ver dados"). Nao e
   `width: 100%`, porque ocupar a linha inteira empurraria o nome da rede para baixo.
   44px DE ALTURA, E ELE JA PASSOU POR 34 E POR 40: eu escrevi 34 achando que "botao que so
   navega" podia ser menor, e o portao desta tarefa me pegou na primeira vez que rodou contra
   tela de verdade ("1 botao menor que o alvo de toque, o primeiro Voltar com 34px"). Depois
   subiu para 40, o piso que o modulo de celular de Avarias usava -- mas esse 40 nunca teve fonte
   nenhuma. Em 20/09/2026 o portao passou a cobrar 44, o minimo de verdade das Human Interface
   Guidelines da Apple (o Android pede 48 no Material, entao 44 e o MENOR dos dois pisos). A razao
   de fundo nao muda por o botao ser secundario: quem erra o toque no "Voltar" perde a etapa do
   pedido que estava montando. Estreito pode; baixo nao. */
.fdv-botao-pequeno {
  font-size: 12px;
  min-height: 44px;
  padding: 6px 12px;
  width: auto;
}

/* ---------- CAMPO DE BUSCA ---------- */
.fdv-busca {
  align-items: center;
  background: var(--fdv-cartao);
  border: 1px solid var(--fdv-borda-forte);
  border-radius: 10px;
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 0 10px;
}
.fdv-busca svg {
  color: var(--fdv-texto-rotulo);
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}
.fdv-busca input {
  background: transparent;
  border: 0;
  color: inherit;
  flex: 1 1 auto;
  font-family: inherit;
  /* 16px E OBRIGATORIO, nao e escolha de estilo: abaixo disso o Safari do iPhone DA ZOOM na
     pagina inteira ao focar o campo, e a pessoa fica com a tela torta. E o mesmo motivo pelo qual
     todo formulario de aplicativo iOS usa 16px no campo de texto. */
  font-size: 16px;
  min-width: 0;
  padding: 10px 0;
}
.fdv-busca input:focus {
  outline: none;
}
/* O FOCO DA BUSCA MORA NA CAIXA (tarefa r32, 26/09/2026): o campo aqui dentro nao tem borda nem
   fundo, entao o contorno dele desenharia um retangulo solto em volta do texto; por isso ele e
   apagado logo acima. Mas apagar sem pôr nada no lugar deixava quem usa o teclado sem saber onde
   esta (a regua da Apple, e o desvio 4 medido pelo CEO em 25/09). O contorno volta na caixa inteira,
   com a mesma cor e espessura do foco do resto do painel (`:focus-visible` em tokens.css). */
.fdv-busca:focus-within {
  border-color: var(--fdv-botao);
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.fdv-busca-fim {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

/* ---------- ABAS SUBLINHADAS ---------- */
.fdv-abas {
  border-bottom: 1px solid var(--fdv-borda);
  display: flex;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.fdv-abas::-webkit-scrollbar {
  display: none;
}
.fdv-aba {
  background: transparent;
  border: 0;
  /* A LINHA DE BAIXO EXISTE SEMPRE, transparente quando a aba nao esta escolhida. Fosse
     `border-bottom` so na ativa, a fileira inteira subiria 3px na troca de aba e o conteudo
     abaixo pularia. Custa nada e evita um tremor que so aparece no dedo. */
  border-bottom: 3px solid transparent;
  color: var(--fdv-texto-apoio);
  cursor: pointer;
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  /* 44px: e um <button role="tab"> de verdade (abasFdv em fdv-casca.js), entao o portao de alvo
     de toque (scripts/medir-tela-comum.mjs) cobra o piso de 44 igual a qualquer outro botao de
     acao, nao os 24px que valem so para botao DENTRO de cabecalho de tabela. */
  min-height: 44px;
  padding: 8px 12px;
  white-space: nowrap;
}
.fdv-aba[aria-selected="true"] {
  border-bottom-color: var(--fdv-botao);
  color: var(--fdv-verde-tinta);
  font-weight: 700;
}
.fdv-aba:focus-visible {
  outline: 2px solid var(--fdv-botao);
  outline-offset: -2px;
}

/* ---------- LINHA COM CHEVRON: a fileira tocavel que abre o detalhe ---------- */
.fdv-linha {
  align-items: center;
  background: var(--fdv-cartao);
  border: 1px solid var(--fdv-borda);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}
.fdv-linha:hover {
  background: var(--fdv-cartao-fraco);
}
.fdv-linha:focus-visible {
  outline: 2px solid var(--fdv-botao);
  outline-offset: 2px;
}
.fdv-linha-inicio {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  min-width: 44px;
}
.fdv-linha-inicio svg {
  height: 24px;
  width: 24px;
}
.fdv-linha-inicio img {
  max-height: 36px;
  max-width: 44px;
  object-fit: contain;
}
.fdv-linha-texto {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.fdv-linha-titulo {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.fdv-linha-apoio {
  color: var(--fdv-texto-apoio);
  font-size: 12px;
  line-height: 1.3;
}
.fdv-linha-fim {
  align-items: flex-end;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.fdv-linha-valor {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.fdv-linha-chevron {
  color: var(--fdv-texto-rotulo);
  flex: 0 0 auto;
}
.fdv-linha-chevron svg {
  height: 18px;
  width: 18px;
}

/* ---------- CARTAO DE INDICADOR: rotulo pequeno, numero grande, apoio embaixo ---------- */
.fdv-indicadores {
  display: grid;
  gap: 8px;
  /* `minmax(0, 1fr)`, nunca `1fr` cru: `1fr` vale `minmax(auto, 1fr)`, e o `auto` deixa um numero
     comprido ("R$ 185.000") esticar a coluna alem da tela, o que faz o celular ROLAR DE LADO. E a
     armadilha ja paga deste repositorio. */
  grid-template-columns: repeat(var(--fdv-indicadores-colunas, 3), minmax(0, 1fr));
}
.fdv-indicador {
  background: var(--fdv-cartao);
  border: 1px solid var(--fdv-borda);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px;
}
.fdv-indicador-rotulo {
  color: var(--fdv-texto-rotulo);
  font-size: 11px;
  line-height: 1.2;
}
.fdv-indicador-valor {
  /* 15px E MEDIDO, NAO ESCOLHIDO: a 390px os tres cartoes dividem (390 - 24 de recuo - 16 de vao)
     / 3 = 116,6px, menos 20px de recheio do cartao, sobram 96,6px de texto. "R$ 155.600" tem 10
     caracteres, e em peso 800 cada um pede por volta de 0,58em, o que da 5,8em: a 17px isso e
     98,6px e QUEBRA EM DUAS LINHAS (visto na foto da prova da casca, 19/09/2026), a 15px da 87px e
     cabe. No desenho do James esse valor esta numa linha so, entao quem estava errado era o 17px. */
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  /* O numero nao pode quebrar no meio ("R$ 155." numa linha e "600" noutra), mas TAMBEM nao pode
     esticar a coluna: sem `overflow-wrap`, um valor mais largo que a coluna vaza para fora e o
     celular rola de lado. Com os dois, ele quebra so quando nao ha mesmo jeito. */
  overflow-wrap: anywhere;
}
.fdv-indicador-valor.destaque-vermelho {
  color: var(--fdv-vermelho-texto);
}
.fdv-indicador-apoio {
  color: var(--fdv-texto-apoio);
  font-size: 11px; /* era 10 ate a r38 (27/09/2026): piso de letra de 11px */
  line-height: 1.25;
}
/* A barrinha de progresso do cartao "Venda do mes" (78% da meta). Fina, dentro do cartao. */
.fdv-progresso {
  background: var(--fdv-borda);
  border-radius: 999px;
  height: 5px;
  overflow: hidden;
  width: 100%;
}
.fdv-progresso > span {
  background: var(--fdv-botao);
  display: block;
  height: 100%;
}

/* ---------- SELO / PILULA DE STATUS ---------- */
.fdv-selo {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 4px;
  line-height: 1.2;
  padding: 3px 8px;
  white-space: nowrap;
}
.fdv-selo.verde {
  background: var(--fdv-verde-fundo);
  color: var(--fdv-verde-texto);
}
.fdv-selo.ambar {
  background: var(--fdv-ambar-fundo);
  color: var(--fdv-ambar-texto);
}
.fdv-selo.vermelho {
  background: var(--fdv-vermelho-fundo);
  color: var(--fdv-vermelho-texto);
}
.fdv-selo.neutro {
  background: var(--fdv-cartao-fraco);
  color: var(--fdv-texto-apoio);
}
/* AZUL, e ele existe porque o desenho tem. A pilula "Pedido em aberto" da tela 2 do Atacado sai
   AZUL na fotografia, e o meu conjunto tinha so verde, ambar, vermelho e neutro: quem construiu a
   tela usou verde por falta de opcao e reportou a diferenca em vez de esconder, que foi o certo.
   O azul aqui e o mesmo navy do texto, rebaixado para fundo de pilula. Nao e "mais uma cor": e um
   ESTADO diferente dos outros tres. Verde e "esta bom", ambar e "olhe isto", vermelho e "esta
   ruim"; azul e "esta em andamento", que e exatamente o que um pedido em aberto e. */
.fdv-selo.azul {
  background: #e7ecfa;
  color: #2b3a7a;
}
.fdv-selo svg {
  height: 13px;
  width: 13px;
}

/* ---------- TABELA QUE ROLA DE LADO ---------- */
.fdv-tabela-caixa {
  min-width: 0;
  overflow-x: auto;
  /* Rolagem horizontal DE VERDADE precisa de largura maxima: sem isto a caixa cresce com a
     tabela, e quem rola de lado e a PAGINA, nao a caixa. */
  width: 100%;
}
.fdv-tabela {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}
/* NO COMPUTADOR A TABELA SOBE PARA 13px (r38, 27/09/2026): e o piso de texto corrido da regua da
   Apple no computador, ordem do Carvalho de 26/09. No celular fica 12px, que ja passa do piso de
   11 e e o que faz as colunas do desenho caberem a 360px. */
@media (min-width: 700px) {
  .fdv-tabela {
    font-size: 13px;
  }
  /* As frases de apoio que a auditoria achou abaixo de 13px no computador, na mesma regra e pelo
     mesmo motivo: a nota com o desenho de informacao (11px), os subtitulos e a data do pedido
     (12px). `.tela-fdv` na frente porque tres delas moram em outras folhas desta pasta. */
  .tela-fdv .fdv-nota,
  .tela-fdv .fdv-subtitulo-secao,
  .tela-fdv .fdv-revisao-subtitulo,
  .tela-fdv .fdv-balcao-pedido-data,
  .tela-fdv .fdv-balcao-dados-extra {
    font-size: 13px;
  }
}
.fdv-tabela th,
.fdv-tabela td {
  border-bottom: 1px solid var(--fdv-borda);
  /* O RECHEIO LATERAL E 5px, NAO 8px, E ISSO E MEDIDA, NAO GOSTO. A 390px as tabelas de 4 e 5
     colunas passavam da area visivel e a ULTIMA coluna nascia fora: 15px escondidos na tela 6
     (o campo de quantidade, que e a razao de existir da tela), 32px na tela 9 (a coluna "%", que
     e o ranking inteiro) e 31px na tela 10 (a coluna de valor). A caixa rola de lado, entao o
     numero era alcancavel, mas o desenho do James mostra TODAS as colunas inteiras, e o padrao
     desta frente e ser identico ao desenho.
     Por que o recheio e nao outra coisa: abreviar o cabecalho mudaria a palavra que o desenho
     escreve, e por uma pista visual de rolagem seria acrescentar elemento que o desenho nao tem,
     as duas proibidas aqui. Tirar 3px de cada lado devolve 6px por coluna, que cobre os tres
     casos. Conferido no navegador depois: scrollWidth passou a caber no clientWidth nas tres. */
  padding: 7px 5px;
  text-align: left;
  white-space: nowrap;
}
.fdv-tabela th {
  background: var(--fdv-cartao-fraco);
  color: var(--fdv-texto-rotulo);
  font-size: 11px;
  font-weight: 700;
  /* SO O CABECALHO PODE QUEBRAR EM DUAS LINHAS, o dado NUNCA (o `nowrap` da regra acima continua
     valendo para `td`). Medido na tela 9 a 390px: as quatro colunas somavam 363px numa area de
     342px, e quem esticava era o TITULO "Devolução (R$)", com 108px, mais largo que o proprio
     numero que ele encima (1.620, 900, 520). Com o titulo preso numa linha, os 21px que sobravam
     saiam da ULTIMA coluna, a do "%", que e justamente o semaforo de cor que da sentido ao
     ranking e ao rodape ("3 lojas acima da meta"). Deixar o titulo quebrar devolve a coluna
     inteira e nao mexe em nenhum numero nem tira palavra nenhuma do desenho. */
  white-space: normal;
  /* SEM `position: sticky`, E ISSO E CONSERTO DE UM DEFEITO MEDIDO, nao esquecimento.
     Eu tinha escrito `position: sticky; top: 0` aqui, com a intencao de o cabecalho acompanhar a
     lista enquanto ela rola. `bash scripts/testar-mobile.sh` reprovou em quatro colunas da tela de
     detalhe do produto, no iPhone 17 Pro Max: "base em 763px, dentro da barra de gestos que comeca
     em 729px". Regra 14 daquele portao: conteudo preso (fixed/sticky) nao pode cair debaixo do
     entalhe nem da barra de gestos.
     E a intencao nunca funcionou, que e o que decide: `.fdv-tabela-caixa` rola no eixo X
     (`overflow-x: auto`) e NAO no Y. Um `sticky` dentro dela nao gruda na caixa, gruda na JANELA,
     e por isso o cabecalho ia parar em qualquer altura da tela, inclusive por baixo da barra de
     gestos do iPhone. Ou seja: o efeito que eu queria nao acontecia, e o efeito que acontecia era
     um defeito.
     E nenhuma tabela deste modulo rola no vertical por conta propria: a mais alta tem dez linhas e
     quem rola e a pagina. Cabecalho grudado so faz sentido dentro de uma caixa que rola no Y, e
     nao ha nenhuma aqui. */
}
.fdv-tabela td.num,
.fdv-tabela th.num {
  text-align: right;
}
.fdv-tabela tbody tr:last-child td {
  border-bottom: 0;
}
.fdv-tabela-total td {
  border-top: 2px solid var(--fdv-borda-forte);
  font-weight: 800;
}

/* ---------- NOTA DE RODAPE COM ICONE DE INFORMACAO ---------- */
.fdv-nota {
  align-items: flex-start;
  color: var(--fdv-texto-apoio);
  display: flex;
  font-size: 11px;
  gap: 6px;
  line-height: 1.35;
}
.fdv-nota svg {
  flex: 0 0 auto;
  height: 14px;
  margin-top: 1px;
  width: 14px;
}
.fdv-nota.alerta {
  background: var(--fdv-ambar-fundo);
  border-radius: 8px;
  color: var(--fdv-ambar-texto);
  font-weight: 600;
  padding: 8px 10px;
}

/* O SELO DE ICONE que abre o titulo das telas 7, 9 e 10 do Atacado: quadrado lilas de canto
   arredondado com o desenho branco dentro. A tinta e escura sobre o lilas claro (7,4:1), nao
   branca: branco sobre #c7bdfa daria 1,9:1 e o desenho sumiria. O desenho do James usa branco,
   e essa e uma das poucas coisas em que a tela nao copia a fotografia, porque copiar produziria um
   icone que nao se ve. */
.fdv-selo-icone {
  align-items: center;
  background: var(--fdv-selo-icone);
  border-radius: 12px;
  color: var(--fdv-selo-icone-tinta);
  display: inline-flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.fdv-selo-icone svg {
  height: 22px;
  width: 22px;
}

/* ---------- TITULO DE SECAO DENTRO DO CORPO ---------- */
.fdv-titulo-secao {
  align-items: center;
  display: flex;
  font-size: 18px;
  font-weight: 800;
  gap: 8px;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
}
.fdv-titulo-secao svg {
  flex: 0 0 auto;
  height: 20px;
  width: 20px;
}
.fdv-subtitulo-secao {
  color: var(--fdv-texto-apoio);
  font-size: 12px;
  line-height: 1.3;
  margin: 0;
}