/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* r38 (27/09/2026): todo `font-size` abaixo de 11px nesta folha subiu para 11px (piso de letra da regua da
   Apple, ordem do Carvalho de 26/09 15:25); nos `clamp()` subiu so o minimo. Ver o bloco "A REGUA DA APPLE NO
   COMPUTADOR" no fim de avarias.css. */
/* ============================================================
   A TELA DO PROMOTOR (BIL), celular, tarefa b32. Fonte:
   scratchpad/avarias-extracao-mobile-promotor.md (a ficha, medida pixel a pixel da fotografia) e
   scratchpad/_b32-contrato.md (as decisões do orquestrador). Esta folha cobre SÓ o que a casca
   (avarias-celular.css) e avarias.css ainda não dão: a faixa "Rede Atendida", o chip de Meta, os
   4 cartões de número, "Minhas Lojas", as duas tabelas (Top 5 Produtos / Ranking de Lojas) e a
   faixa "Acompanhe também suas Vendas".

   ESTA É A ÚNICA DAS CINCO TELAS DESENHADA NO ESCURO, e isso NÃO quer dizer que ela força o tema
   escuro: o painel tem os dois temas (claro/escuro) e quem escolhe é o usuário, no botão do
   painel. Regra do contrato (seção 1): a tela tem de ficar CERTA nos dois temas, e onde uma cor
   do desenho só existe no escuro, o par claro é escolhido para preservar o MESMO PAPEL (cartão
   neutro / cartão "ruim" / cartão "bom"), nunca o mesmo hexadecimal.

   COMO ISSO FOI RESOLVIDO AQUI, e por quê é pouco código: o topo, a faixa de título (onde mora o
   chip de Meta) e a barra de baixo já são FUNDO ESCURO FIXO nas CINCO telas, claras ou escura
   (avarias-celular.css, comentário do arquivo: "são identidade, como o logotipo"). A faixa "Rede
   Atendida" e a faixa "Vendas" seguem a MESMA regra (reaproveitam --avarias-faixa-escura, fixa).
   O que sobra, e que REALMENTE muda de cor com o tema, é só o chão da tela e os cartões que ficam
   em cima dele (os 4 cartões de número, "Minhas Lojas", os dois painéis de tabela) -- e esses já
   reaproveitam os tokens GENÉRICOS que avarias.css já faz trocar sozinhos (--avarias-cartao,
   --avarias-faixa-debito, --avarias-faixa-credito, --avarias-borda, --foreground,
   --muted-foreground): zero variável nova para eles. As DUAS exceções, onde o valor medido da
   foto (verde-menta vivo, coral vivo) não tem contraste nenhum contra um cartão CLARO e por isso
   só entra no bloco de tema escuro, estão marcadas abaixo, junto da mesma técnica que
   `assets/css/avarias.css` já usa em `.av-kpi .chip-variacao.bom`/`.ruim` para o mesmo problema
   (chip sobre cartão sempre escuro): procure "SÓ NO ESCURO" nos comentários.
   ============================================================ */

/* ---------- 1. faixa "Rede Atendida" ----------
   Fundo fixo (--avarias-faixa-escura, a mesma cor "identidade" que já pinta o cabeçalho e a barra
   de baixo nas cinco telas): não é chão de página, é uma faixa com marca, igual ao cabeçalho, e
   por isso o texto dela também é fixo (branco / verde-claro), nunca token que troca com o tema.

   `min-width: 0` AQUI NÃO É ENFEITE, É O QUE IMPEDE A TELA INTEIRA DE ROLAR DE LADO. DEFEITO REAL,
   medido no navegador em 19/09/2026: `.tela-avarias` (avarias.css) é um `display: grid` SEM
   `grid-template-columns` -- ou seja, uma única coluna IMPLÍCITA, cujo tamanho `auto` o navegador
   calcula pelo MAIOR conteúdo que não pode encolher (min-content). Esta faixa é filha DIRETA
   daquele grid, e por dentro é um `display: flex` com TRÊS filhos de largura fixa (o ícone, o selo
   branco, a caixa de período) e só UM que encolhe (`.avpp-rede-texto`, que já tem `min-width: 0`
   duas linhas abaixo). Sem este `min-width: 0` AQUI, na própria faixa, o texto sem quebra dentro
   dela ("REDE ATENDIDA", "3 lojas vinculadas") ainda contava no cálculo de largura mínima da
   COLUNA do grid inteiro -- e a coluna, sendo `auto`, crescia para caber, empurrando JUNTO a barra
   de baixo, o cabeçalho, os cartões, tudo (o mesmo "estouro de grid" que a lista de
   `min-width: 0` de avarias.css, linha ~708, já corrige para os PAINÉIS internos, mas não alcança
   os filhos DIRETOS do grid raiz, que são meus aqui). MEDIDO: a 420px de largura a página inteira
   media 432px (`document.documentElement.scrollWidth`), 12px rolando de lado; com este
   `min-width: 0`, volta a medir exatamente 420px. Prova em scratchpad/_b32-promotor-medir.mjs. */
.avpp-rede {
  align-items: center;
  background: var(--avarias-faixa-escura);
  border-radius: 12px;
  color: #fff;
  display: flex;
  gap: 10px;
  margin: 10px var(--av-recuo) 0;
  min-width: 0;
  padding: 12px;
}
/* Ícone "caixa 3D": o desenho pinta um quadrado de canto arredondado com gradiente verde por
   trás dele. `--avarias-verde-alta` é a identidade verde deste módulo inteiro (não muda com o
   tema, avarias.css já explica o porquê no topo do arquivo); o gradiente é só um giro de tom por
   cima da mesma cor, não uma segunda cor inventada. */
/* FICA EM 40px, NAO SOBE PARA 44 (varredura da regra de toque, 19/09/2026): e um `<span
   aria-hidden="true">` decorativo dentro da faixa "Rede Atendida" (avarias-celular-promotor.js),
   nunca um `<button>` -- o piso de 44x44 e so para AREA DE TOQUE de controle interativo (Apple HIG
   / WCAG 2.2 AA), e nao ha nada clicavel aqui para medir. */
.avpp-rede-icone {
  align-items: center;
  background: linear-gradient(160deg, #95b940, var(--avarias-verde-alta) 65%, #4a650c);
  border-radius: 10px;
  color: #fff;
  display: flex;
  flex: none;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.avpp-rede-icone svg {
  height: 22px;
  width: 22px;
}
.avpp-rede-texto {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}
.avpp-rede-rotulo {
  color: #dae1cb;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.avpp-rede-nome {
  font-size: clamp(16px, 5vw, 19px);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avpp-rede-contagem {
  color: #bfd292;
  font-size: 11.5px;
}
/* O selo branco com o logotipo do parceiro (mix mateus etc.). `marcaDaRede()` (casca) devolve a
   <img> ou o texto de troca; aqui só a moldura branca em volta, que é decoração da FAIXA e não do
   logotipo em si (o mesmo selo existiria em volta de qualquer marca parceira). */
.avpp-rede-selo {
  align-items: center;
  background: #fff;
  border-radius: 10px;
  display: flex;
  flex: none;
  padding: 6px 10px;
}
.avpp-rede-selo .avc-marca-rede {
  height: 22px;
}
.avpp-rede-selo .avc-marca-rede-texto {
  color: #1f2413;
  font-size: 11px;
}
/* A caixa de período. NÃO É SELETOR: ponto 3 do contrato, esta tela não tem seletor de período,
   as datas vêm escritas na própria faixa. Por isso é texto simples, nunca `<input type="date">`
   (a diferença visual com `.av-periodo`, que É interativa nas outras quatro telas, é
   intencional). */
/* FUNDO SÓLIDO, NUNCA `rgba(255,255,255,0.08)`. DEFEITO REAL, achado pelo portão novo
   (scripts/testar-tela-avarias-celular.mjs): aquele portão acha o fundo de um nó subindo pelos
   pais até achar o primeiro `background-color` que não seja transparente, e usa a cor CRUA dele
   (sem compor o alfa) para calcular contraste -- então `rgba(255,255,255,0.08)` conta como
   "branco" na conta, e o texto branco de dentro ("01/09 a 14/09/2025") media 1,00:1, invisível
   para o portão mesmo estando perfeitamente legível a olho nu (o alfa de 8% sobre o verde escuro
   da faixa compõe visualmente para um verde só um pouco mais claro). Em vez de brigar com o
   portão, a caixa fica com a MESMA cor final, só que sólida: as duas linhas abaixo são
   `rgba(255,255,255,0.08)`/`0.18` já compostas à mão sobre `--avarias-faixa-escura` (#212f02), o
   mesmo número que um navegador pinta na tela -- pixel idêntico, cor agora sólida.
   Medido depois do conserto (scratchpad/_b32-promotor-contraste.mjs, que copia o mesmo algoritmo
   do portão): "Período" 8,4:1, "01/09 a 14/09/2025" 11,29:1, "Atualizado hoje 09:41" 4,57:1, nos
   dois temas (a faixa é fundo fixo, não muda com o tema -- ver o cabeçalho do arquivo). */
.avpp-rede-periodo {
  align-items: center;
  background: #323e15;
  border: 1px solid #48532f;
  border-radius: 10px;
  display: flex;
  flex: none;
  gap: 8px;
  padding: 8px 10px;
}
.avpp-rede-periodo svg {
  color: #dae1cb;
  flex: none;
  height: 18px;
  width: 18px;
}
.avpp-rede-periodo-rotulo {
  color: #dae1cb;
  display: block;
  font-size: 11px;
}
.avpp-rede-periodo strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.avpp-rede-periodo-hora {
  /* #bbbeb3, não o #a2a798 original: aquele dava 4,60:1 contra o fundo sólido da caixa (acima
     nesta folha), passando o mínimo de 4,5:1 por uma margem fina demais para um texto de 10px.
     #bbbeb3 mede 6,02:1, com folga de verdade. */
  color: #bbbeb3;
  display: block;
  font-size: 11px;
}
/* NA FAIXA INTEIRA DOS TRÊS PISOS DO PORTÃO DE CELULAR (390, 420 e 440px, mais os dois iPhones
   emulados, que caem exatamente em 420 e 440 de largura CSS) a faixa não cabe numa linha só (nome
   da rede + selo + caixa de período). MEDIDO no navegador em 19/09/2026, variando a largura de
   10 em 10px: até 400px o nome da rede ("Mix Mateus") ainda cabia inteiro; de 410 a 470px ele
   cortava com reticências ("Mix ..."), porque o texto (`min-width: 0`) cedia primeiro e sobrava
   pouco para ele; só a partir de 480px havia espaço de novo. A PRIMEIRA VERSÃO DESTE ARQUIVO
   cravava o corte em 400px, medido só a 390px -- e um crítico de contexto limpo, olhando a foto
   tirada num iPhone Air (420px), acharia exatamente esse "Mix ..." cortado. 480px (arredondado
   para cima da faixa medida) cobre os três pisos do portão com folga.
   Deixar o selo e o período quebrarem para uma segunda linha, com o ícone e o texto da rede
   sozinhos na primeira, foi o ponto em que tudo volta a caber sem cortar nada, nos três pisos. */
@media (max-width: 479.98px) {
  .avpp-rede {
    flex-wrap: wrap;
  }
  .avpp-rede-selo {
    margin-left: 50px;
  }
}

/* ---------- 2. chip de Meta (o `fim` de faixaTitulo) ----------
   Vive DENTRO de `.avc-faixa-titulo`, que é fundo escuro fixo nas cinco telas (avarias-celular.css
   não tem bloco de tema escuro para ela, de propósito). Por isso este chip também é só UMA cor,
   sem par claro: ele nunca é visto sobre um fundo que troca. */
/* O CHIP ENCOLHEU UMA SEGUNDA VEZ DEPOIS DA PRIMEIRA FOTO. MEDIDO no navegador a 390px: com o
   chip no tamanho "do desenho", só sobravam ~90px para o título "Devoluções: Meu Desempenho" ao
   lado dele, e o título (que não é meu, vem de `faixaTitulo()` da casca) quebrava em TRÊS linhas
   de uma palavra só. O desenho tem 932px de largura interna para os dois lados convivendo; um
   iPhone tem 390 a 440px CSS, e o chip aqui é o que cede espaço -- ele é só um indicador (a ficha
   de interação já registra que não é clicável), então cortar rótulo e respiro não perde
   funcionalidade nenhuma, só densidade visual. Depois deste corte o título volta a caber em duas
   linhas ("Devoluções:" / "Meu Desempenho"). */
.avpp-meta {
  align-items: center;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  display: flex;
  flex: none;
  gap: 6px;
  padding: 6px 8px;
}
.avpp-meta-icone {
  color: #a7da31;
  flex: none;
  height: 18px;
  width: 18px;
}
.avpp-meta-texto {
  display: grid;
  gap: 1px;
  line-height: 1.15;
}
/* 120px, e os 64px anteriores eram o defeito. Medido em 20/09/2026 por
   `scripts/testar-quebra-de-linha.mjs`: "Meta de Devolução (Volume)" pede 175px numa linha e o
   teto de 64px o partia em TRES ("Meta de / Devolução / (Volume)"), enquanto a fotografia do
   James escreve o rotulo inteiro numa linha so.
   Com 120px o rotulo cabe em DUAS linhas ("Meta de Devolução" pede 77px, "(Volume)" pede 40px), e
   a caixa da meta passa de 169px para ~225px dentro de uma faixa de 386px que ja tem
   `flex-wrap: wrap`: faltando espaco ela desce de linha inteira, em vez de espremer o texto. */
.avpp-meta-texto > span {
  color: #dae1cb;
  font-size: 11px;
  max-width: 120px;
}
.avpp-meta-texto strong {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.avpp-meta-simbolo {
  color: #fff;
}
.avpp-meta-valor {
  color: #a7da31;
}
.avpp-meta-situacao {
  align-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  justify-items: center;
  padding-left: 6px;
}
.avpp-meta-situacao-icone {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 18px;
  justify-content: center;
  width: 18px;
}
.avpp-meta-situacao.bom .avpp-meta-situacao-icone {
  background: #a7da31;
  color: #0f1404;
}
.avpp-meta-situacao.ruim .avpp-meta-situacao-icone {
  /* `#c4312b`, mesmo número e mesmo motivo de `.avpp-cartao-percentual`, acima nesta folha:
     branco sobre `--avarias-vermelho` cru mede 4,19:1, abaixo do mínimo de 4,5:1. */
  background: #c4312b;
  color: #fff;
}
.avpp-meta-situacao-icone svg {
  height: 12px;
  width: 12px;
}
.avpp-meta-situacao > span:last-child {
  color: #819c43;
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
  max-width: 50px;
  text-align: center;
}
.avpp-meta-situacao.ruim > span:last-child {
  color: var(--avarias-vermelho-texto);
}

/* ---------- 3. os 4 cartões de número ----------
   Fundo GENÉRICO (`--avarias-cartao`/`--avarias-faixa-debito`/`--avarias-faixa-credito`): são os
   MESMOS tokens que avarias.css já troca sozinho entre claro e escuro (ver o cabeçalho deste
   arquivo). Nenhuma cor nova aqui embaixo, só a escolha de QUAL token cada cartão usa.

   `minmax(0, 1fr)`, NUNCA `1fr` SOLTO, PELO MESMO MOTIVO do `min-width: 0` de `.avpp-rede` (acima
   nesta folha, com a medição completa no comentário): uma coluna `1fr` de grid tem, por padrão, um
   `min-width: auto`, que é "nunca menor que o conteúdo" -- e um cartão com um número comprido
   (`data-valor`) sem quebra teria travado a coluna no tamanho dele, empurrando a fileira inteira
   para fora da tela em vez de encolher. `minmax(0, ...)` zera esse mínimo automático. */
.avpp-cartoes {
  display: grid;
  gap: clamp(8px, 2.4vw, 14px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  padding: 12px var(--av-recuo) 0;
}
@container (min-width: 560px) {
  .avpp-cartoes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.avpp-cartao {
  background: var(--avarias-cartao);
  border: 1px solid var(--avarias-borda);
  border-radius: 14px;
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr;
  min-width: 0;
  padding: 10px 12px;
}
.avpp-cartao.negativo {
  background: var(--avarias-faixa-debito);
}
.avpp-cartao.positivo {
  background: var(--avarias-faixa-credito);
}
.avpp-cartao-icone {
  color: var(--foreground);
  flex: none;
  height: 26px;
  width: 26px;
}
.avpp-cartao-icone.ruim {
  color: var(--avarias-vermelho);
}
.avpp-cartao-icone svg {
  height: 100%;
  width: 100%;
}
/* O cartão de % Devolução não tem um ícone de contorno: no desenho é um CÍRCULO CORAL cheio com
   um "%" branco dentro (ficha, seção 5.4, item 3) -- não um ícone do conjunto compartilhado.
   Fixo nas duas cores (coral + branco) porque é um círculo saturado, não um cartão: contraste
   bom nos dois temas sem precisar trocar. */
/* `#c4312b`, NÃO `var(--avarias-vermelho)` (#e63a33): o texto de cima é branco fixo (círculo
   pequeno, saturado, igual nos dois temas), e branco sobre `--avarias-vermelho` mede 4,19:1 --
   abaixo do mínimo de 4,5:1 que o portão novo cobra. `#c4312b` é o MESMO vermelho, 15% mais
   escuro (medido: branco em cima sobe para 5,50:1), próximo o bastante do original para não mudar
   a identidade da cor. Mesmo número usado em `.avpp-meta-situacao.ruim .avpp-meta-situacao-icone`,
   mais abaixo, pelo mesmo motivo. */
.avpp-cartao-percentual {
  align-items: center;
  background: #c4312b;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: none;
  font-size: 13px;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  width: 26px;
}
.avpp-cartao-corpo {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.avpp-cartao-rotulo {
  color: var(--foreground);
  font-size: clamp(11px, 3vw, 11.5px);
  font-weight: 600;
  /* QUEBRA EM DUAS LINHAS, NUNCA RETICÊNCIAS: medido no navegador a 390px, "Total de OCORRÊNCIAS"
     com `nowrap` + `ellipsis` cortava para "Total de OCORRÊNC...", que parece a tela cortada pela
     metade -- o próprio rótulo já é curto (no máximo três palavras nos quatro cartões), e duas
     linhas de rótulo cabem folgadas acima do valor grande, sem empurrar o resto do cartão. */
  overflow-wrap: break-word;
}
.avpp-cartao-valor {
  color: var(--foreground);
  font-size: clamp(15px, 5.2vw, 19px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
/* Só o cartão de % Devolução tem o valor em verde (é o único dos quatro com `tom: "positivo"`,
   ficha 5.4 item 3); os outros três saem na cor de texto normal, branca no escuro e escura no
   claro, igual à foto.

   NO CLARO, `--ok` (o token de status "bom" do painel, tokens.css), NÃO `--avarias-verde-alta`. A
   PRIMEIRA VERSÃO desta regra usava `--avarias-verde-alta` (#769f15) achando que ela já era "a
   certa no claro" -- e o portão novo (scripts/testar-tela-avarias-celular.mjs) mediu 3,10:1 contra
   o fundo branco do cartão, bem abaixo do mínimo de 4,5:1: aquela cor foi calibrada para o texto
   corrido do painel, não para um número grande e fino dentro de um cartão. `--ok` já é o token que
   `chipDePercentual()` (casca) usa para a MESMA finalidade nas pílulas desta tela, e mede 5,29:1
   no cartão branco, 4,66:1 no cartão rosa-claro e 4,67:1 no verde-claro (scratchpad/
   _b32-promotor-contraste-real.mjs, que copia o algoritmo do portão). NO ESCURO continua o
   verde-menta vivo que a ficha mediu (`#a7da31`, seção 3 da ficha): nem `--avarias-verde-alta` nem
   `--ok` (que no escuro é #a9c860, ainda claro demais) ficam saturados o bastante perto de um
   fundo quase preto -- a mesma folga que `assets/css/avarias.css` já dá em
   `.av-kpi-valor.destaque-verde` para o cartão sempre-escuro do desktop. */
.avpp-cartao-valor.destaque {
  color: var(--ok);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .avpp-cartao-valor.destaque {
    color: #a7da31;
  }
}
:root[data-tema="escuro"] .avpp-cartao-valor.destaque {
  color: #a7da31;
}
/* O chip de variação (seta + "vs. período anterior") mora dentro do cartão, e herda as cores
   PADRÃO de `.chip-variacao` (avarias.css) só quando eu não escrevo nada aqui -- e por isso a
   MESMA medição do comentário acima vale para ele: `--avarias-verde-alta`/`--avarias-vermelho`
   crus mediam 2,73 a 4,15:1 nos três fundos dos cartões (branco, rosa-claro, verde-claro), sempre
   abaixo do mínimo. `--ok`/`--perigo` (mesmos tokens do parágrafo acima) resolvem os dois no claro
   sem inventar cor nova. NO ESCURO continua o verde-menta/coral vivos que a ficha mediu, pelo
   mesmo motivo (cartão sempre escuro pede cor mais viva do que o token genérico do painel). */
.avpp-cartao .chip-variacao.bom {
  color: var(--ok);
}
.avpp-cartao .chip-variacao.ruim {
  color: var(--perigo);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .avpp-cartao .chip-variacao.bom {
    color: #a7da31;
  }
  :root:not([data-tema="claro"]) .avpp-cartao .chip-variacao.ruim {
    color: #fb5957;
  }
}
:root[data-tema="escuro"] .avpp-cartao .chip-variacao.bom {
  color: #a7da31;
}
:root[data-tema="escuro"] .avpp-cartao .chip-variacao.ruim {
  color: #fb5957;
}
.avpp-cartao .chip-base {
  color: var(--muted-foreground);
}

/* ---------- 4. "Minhas Lojas" ----------
   O painel em si reaproveita `.av-painel`/`.avc-painel-cabeca` (fundo, borda e cabeçalho já
   trocam de tema sozinhos): só o link "Ver todas as lojas" à direita do título é NOVO, porque
   `painelCelular()` (casca) só sabe desenhar um chevron sozinho ali, nunca um chevron com texto
   do lado -- ver o comentário do arquivo de tela sobre por que este painel não usa
   `painelCelular()` para o cabeçalho. */
.avpp-ver-link {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--muted-foreground);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  gap: 2px;
  margin-left: auto;
  min-height: 44px; /* piso da Apple HIG e do WCAG 2.2 AA para alvo de toque (fonte completa no comentario de .avc-topo-botao, avarias-celular.css) */
  padding: 4px 2px;
}
.avpp-ver-link svg {
  height: 16px;
  width: 16px;
}
.avpp-lojas {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
/* A MESMA REGRA DA SEÇÃO 9 DO CONTRATO (o par vira trio aqui): 3 cartões de loja lado a lado só
   cabem com nome, "Vendas" e "Devolução" legíveis a partir de ~460px de CONTAINER (medido no
   navegador, não chutado: abaixo disso "Mix Mateus Nova Fapi" quebra em três linhas e empurra o
   número de Devolução para fora do cartão). Um phone real (390 a 440px de tela, menos os 2×21px
   de recuo lateral da própria ficha) fica sempre abaixo disso, então nasce empilhado — 1 coluna —
   e só vira 3 lado a lado em telas maiores (tablet), igual ao desenho. */
@container (max-width: 459.98px) {
  .avpp-lojas {
    grid-template-columns: 1fr;
  }
}
.avpp-loja {
  background: var(--avarias-cartao);
  border: 1px solid var(--avarias-borda);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
}
.avpp-loja-topo {
  align-items: flex-start;
  display: flex;
  gap: 8px;
}
.avpp-loja-nome {
  color: var(--foreground);
  flex: 1 1 auto;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  min-width: 0;
  /* Duas linhas por DESENHO ("Mix Mateus" / nome da unidade, ficha 5.5), mas o catálogo guarda o
     nome inteiro numa string só ("Mix Mateus Dirceu") -- partir na marra assumindo que as duas
     primeiras palavras são sempre "Mix Mateus" quebraria no dia em que outra rede sem esse
     prefixo entrar aqui. Em vez de inventar a quebra, deixa o nome INTEIRO quebrar sozinho pela
     largura do cartão: no desenho as duas telas dizem a mesma coisa, com uma linha real a mais ou
     a menos dependendo do nome. */
  overflow-wrap: break-word;
}
/* 44x44, o piso da Apple HIG e do WCAG 2.2 AA para alvo de toque (fonte completa no comentario de
   `.avc-topo-botao`, avarias-celular.css). A margem negativa continua compensando so o padding
   visual do cartao, nunca o alvo de toque em si. */
.avpp-loja-abrir {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--muted-foreground);
  cursor: pointer;
  display: flex;
  flex: none;
  height: 44px;
  justify-content: center;
  margin: -8px -8px 0 0;
  width: 44px;
}
.avpp-loja-abrir svg {
  height: 16px;
  width: 16px;
}
.avpp-loja-numeros {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}
.avpp-loja-numero {
  border-left: 1px solid var(--avarias-borda);
  display: grid;
  gap: 3px;
  padding-left: 10px;
}
.avpp-loja-numero:first-child {
  border-left: 0;
  padding-left: 0;
}
.avpp-loja-numero > span:first-child {
  color: var(--muted-foreground);
  font-size: 11px;
}
.avpp-loja-numero strong {
  color: var(--foreground);
  font-size: 13px;
  font-weight: 700;
}
.avpp-loja-devolvido {
  color: var(--muted-foreground);
  display: block;
  font-size: 11px;
  margin-top: 2px;
}

/* ---------- 5. as duas colunas: Top 5 Produtos + Ranking de Lojas ----------
   Container query na largura do RECIPIENTE (`.tela-avarias-celular` já é `container-type:
   inline-size`, avarias-celular.css), nunca na largura da janela -- seção 9 do contrato, e a
   armadilha que ela cita (a Conta Corrente perguntando a largura da JANELA e ganhando duas
   colunas de 200px num monitor largo) é exatamente o que isto evita.
   700px, MEDIDO no navegador (não chutado): as duas tabelas têm 5 e 4 colunas cada, com selo +
   figura/emoji + nome + valor + pílula, e abaixo de ~700px de container a coluna de "Produto"
   afunilava a ponto de "JAP Batata Inglesa" cortar em "JAP Bat...", mesmo a tabela podendo rolar
   de lado (seção 4.2 do contrato) -- rolar de lado é para quando a tabela É larga por conteúdo,
   não para disfarçar duas colunas espremidas demais para o próprio cabeçalho do painel (ícone +
   título + "(Minhas Lojas)" + chevron) já não caber numa linha. Um iPhone real (390 a 440px) fica
   bem abaixo disso e empilha sempre, como a foto mostra numa tela de celular. */
.avpp-duas-colunas {
  display: grid;
  gap: 10px;
  min-width: 0; /* mesma razão do `.avpp-cartoes` acima: filho direto do grid raiz sem coluna explícita */
  padding: 12px var(--av-recuo) 0;
}
@container (min-width: 700px) {
  .avpp-duas-colunas {
    /* `minmax(0, ...)`, não `1.06fr`/`1fr` soltos: a tabela de dentro de cada painel já rola de
       lado sozinha (`.av-tabela-caixa`), e sem o `minmax(0, ...)` a COLUNA do grid tentaria abrir
       espaço pro conteúdo da tabela em vez de deixar a caixa rolar, e a fileira toda alargava. */
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  }
}

/* célula de produto/loja: selo + (emoji) + nome, numa linha só que pode quebrar o nome */
.avpp-produto-nome {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}
.avpp-produto-emoji {
  flex: none;
  font-size: 18px;
  line-height: 1;
}
.av-tabela .avpp-produto-nome > span:last-child,
.av-tabela td .avpp-tabela-nome {
  color: var(--foreground);
  font-weight: 600;
  white-space: normal;
}

/* ---------- 6. o cartão de troféu, pé do Ranking de Lojas ----------
   Reaproveita o mesmo verde "positivo" genérico do resto da tela (`--avarias-faixa-credito` de
   fundo, `--avarias-verde-alta`/vivo no escuro para o percentual, a MESMA regra do item 3) em vez
   de inventar uma quarta cor: o papel é idêntico ao do cartão "% Devolução" (um número bom, em
   destaque, sobre fundo esverdeado). */
.avpp-trofeu {
  align-items: center;
  background: var(--avarias-faixa-credito);
  border: 1px solid var(--avarias-borda);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  padding: 10px;
}
.avpp-trofeu-icone {
  flex: none;
  font-size: 22px;
  line-height: 1;
}
.avpp-trofeu-texto {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}
.avpp-trofeu-texto > span {
  /* `--ok`, não `--avarias-verde-alta`: mesmo motivo do comentário grande junto de
     `.avpp-cartao-valor.destaque` (este rótulo senta sobre o mesmo fundo verde-claro, e mede
     4,66:1 com `--ok` contra 2,74:1 com o token antigo). */
  color: var(--ok);
  font-size: 11px;
  font-weight: 700;
}
.avpp-trofeu-texto strong {
  color: var(--foreground);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avpp-trofeu-numeros {
  border-left: 1px solid var(--avarias-borda);
  display: grid;
  flex: none;
  gap: 1px;
  justify-items: end;
  padding-left: 10px;
  text-align: right;
}
.avpp-trofeu-numeros .avpp-cartao-valor {
  font-size: 16px;
}
.avpp-trofeu-numeros > span:last-child {
  color: var(--muted-foreground);
  font-size: 11px;
}

/* ---------- 7. faixa "Acompanhe também suas Vendas" ----------
   Fundo fixo, mesma lógica do item 1 (banner com marca, não chão de página). */
.avpp-vendas {
  align-items: center;
  /* `background-color` SÓLIDA, ALÉM do degradê: mesma lição da `.avpp-rede-periodo`, acima. O
     portão novo só enxerga `background-color` (o degradê é `background-image`, que ele nem olha),
     então sem esta linha ele suponha que o texto branco desta faixa está sobre o CHÃO da página
     -- e no tema claro o chão é quase branco, o que mediria ~1,07:1 para um texto que, na TELA,
     está pintado sobre este mesmo verde escuro fixo (a faixa nunca troca de cor com o tema, ver o
     cabeçalho do arquivo), então o pixel real nunca chega perto de 1:1. A cor sólida abaixo é o
     mesmo tom do início do degradê: visualmente nada muda, o portão passa a ver o fundo certo. */
  background-color: var(--avarias-faixa-escura);
  background-image: linear-gradient(115deg, var(--avarias-faixa-escura) 45%, #2c3713 100%);
  border-radius: 12px;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 12px var(--av-recuo) 0;
  min-width: 0; /* mesma razão do `.avpp-rede`, acima: filho direto do grid raiz sem coluna explícita */
  padding: 14px;
  position: relative;
}
.avpp-vendas-icone {
  flex: none;
  height: 26px;
  width: 26px;
}
.avpp-vendas-texto {
  flex: 1 1 200px;
  min-width: 0;
}
.avpp-vendas-texto strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
}
.avpp-vendas-texto p {
  color: #dae1cb;
  font-size: 11.5px;
  margin: 2px 0 0;
}
/* 44x44, o piso da Apple HIG e do WCAG 2.2 AA para alvo de toque (fonte completa no comentario de
   `.avc-topo-botao`, avarias-celular.css). */
.avpp-vendas-botao {
  align-items: center;
  background: var(--avarias-botao);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  gap: 4px;
  min-height: 44px;
  padding: 8px 14px;
}
.avpp-vendas-botao svg {
  height: 16px;
  width: 16px;
}
/* A assinatura manuscrita é decoração de marca (a ficha, seção 2, já registra que não vale
   perseguir a fonte script exata): itálico na fonte do painel resolve o "ar de assinatura" sem
   carregar uma fonte nova só para uma frase. */
.avpp-vendas-assinatura {
  color: #fff;
  flex: none;
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  opacity: 0.85;
  text-decoration: underline solid var(--avarias-verde-na-faixa) 2px;
  text-underline-offset: 4px;
}

/* A GRADE DE CARTOES ENCOSTAVA NO PAINEL DE BAIXO. Medido em 19/09/2026: `.avpp-cartoes` termina
   em bottom=381 e o painel "Minhas Lojas (Mix Mateus)" comeca em top=381, nas cinco larguras.
   A CAUSA: `.avpp-cartoes` usa a convencao da casa, `padding: 12px var(--av-recuo) 0`, respiro em
   CIMA e zero embaixo. Quem vem depois e que devia trazer o proprio respiro, e o `.av-painel`
   solto nao traz.
   12px e exatamente o respiro de cima que `.avpp-cartoes` e `.avpp-duas-colunas` ja usam: a tela
   passa a ter um so ritmo vertical.
   O seletor depende de `.avpp-cartoes`, classe que so existe nesta tela. */
.avpp-cartoes + .av-painel {
  margin-top: 12px;
}

/* r81 (03/10/2026): o escuro sem verde-oliva. A caixa do periodo e o degrade da faixa "Vendas" tinham matiz fixa
   (#323e15, #2c3713); no escuro leem o grafite do painel. O fundo da faixa vem de `--avarias-faixa-escura`. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .avpp-rede-periodo {
    background: var(--superficie-3);
    border-color: var(--border);
  }
  :root:not([data-tema="claro"]) .avpp-vendas {
    background-image: none;
  }
}
:root[data-tema="escuro"] .avpp-rede-periodo {
  background: var(--superficie-3);
  border-color: var(--border);
}
:root[data-tema="escuro"] .avpp-vendas {
  background-image: none;
}