/* © 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. */
/* ============================================================
   DEVOLUCOES E AVARIAS, CELULAR (tarefa b32). So o que esta tela precisa e as outras quatro nao
   tem: os quatro cartoes de numero com pele propria, as pilulas de filtro, o par de colunas das
   duas fileiras de graficos, a lista de "Devolucoes por Rede"/"Produtos com Mais Devolucao", o
   alternador Valor/Volume, e a faixa "Entrega Padrao JAP".

   O RESTO JA VEM PRONTO: `tela-avarias` traz avarias.css inteiro (cores amostradas pixel a pixel
   das FOTOGRAFIAS DE COMPUTADOR), e `tela-avarias-celular` traz avarias-celular.css (o cabecalho
   preto, a faixa de titulo, a barra de abas do rodape, o painel branco com icone em circulo, a
   pilula de percentual). As cores NOVAS abaixo (o fundo de cada cartao, o vermelho/rosa das
   barras, as cinco cores da rosca de Motivo) foram amostradas da FOTOGRAFIA DE CELULAR desta
   tela (scratchpad/avarias-extracao-mobile-devolucoes.md, Camada 3), que e diferente das tres
   fotografias de computador -- por isso nao sao os tokens `--avarias-*` que ja existem, e por
   isso ficam em hexadecimal direto, do mesmo jeito que avarias.css ja faz para as cores dos
   graficos daquelas tres telas (a cor de uma barra ou de uma fatia e IDENTIDADE do dado, nunca
   uma variavel de tema).
   ============================================================ */

/* ============================================================
   UM DEFEITO ACHADO NA CASCA, CONSERTADO SO PELO LADO DE FORA (nao edito avarias-celular-casca.js
   nem avarias-celular.css nesta rodada). O MESMO DEFEITO, e O MESMO CONSERTO, que a tela irma
   `avarias-celular-conta-corrente.css` ja documentou primeiro: `faixaTitulo()` poe icone + titulo
   + caixa de periodo numa UNICA linha flexivel, e a caixa de periodo (dois `<input type=date>`)
   NAO ENCOLHE (a propria casca marca o ultimo filho `flex: none`). Um critico de contexto limpo
   achou aqui a mesma sobreposicao que a tela irma ja tinha achado: com "Devoluções e Avarias" +
   o subtitulo inteiro (bem mais longo que so o titulo: "Acompanhe as devoluções por período,
   rede, produto e responsável."), a coluna de texto ficava espremida e o texto TRANSBORDAVA por
   cima da caixa de periodo -- nao erro de cor, sobreposicao de verdade, dois textos ilegiveis um
   em cima do outro. O CONSERTO E O MESMO: `flex-wrap` na propria faixa deixa a caixa de periodo
   cair para a linha de baixo, largura cheia, quando nao cabe do lado do titulo (o mesmo principio
   da secao 9 do contrato, aplicado entre titulo e periodo em vez de entre duas colunas). */
[data-tela="avarias-celular-devolucoes"] .avc-faixa-titulo {
  flex-wrap: wrap;
  row-gap: 10px;
}
[data-tela="avarias-celular-devolucoes"] .avc-faixa-titulo-texto {
  min-width: 170px;
}
[data-tela="avarias-celular-devolucoes"] .avc-faixa-titulo > .av-periodo {
  flex-basis: 100%;
}

/* ---------- aviso do filtro (regra 10 do contrato: o que nao recalcula, a tela diz) ---------- */
.avcd-aviso-filtro {
  padding: 0 var(--av-recuo);
}

/* ============================================================
   OS QUATRO CARTOES DE NUMERO. Larguras DESIGUAIS na fileira de quatro, medidas na ficha (Camada
   1): a proporcao e 1,21 : 1,21 : 1 : 1,12 -- e "fr" carrega essa razao sem precisar do px
   absoluto do mockup (que foi desenhado numa tela de 932px e a de verdade tem 390 a 440px).

   P0 ACHADO POR UM CRITICO DE CONTEXTO LIMPO, E O MEU PRIMEIRO CONSERTO TROCOU UM DEFEITO POR
   OUTRO: a fileira de QUATRO ficava fixa em toda largura, e a 390-440px cada cartao sobra so
   ~35-50px para o valor -- pouco ate para "1.182", e bem pouco para "R$ 28.430,00". Eu tinha
   consertado o VAZAMENTO (o numero saindo do proprio cartao) com `overflow-wrap: anywhere`, e
   isso trocou "numero cortado" por "numero quebrado no meio dos digitos" ("R$ 28" / ".430," /
   "00") -- os digitos continuam todos la, mas o numero principal da tela em tres linhas nao e o
   que a foto pede, e nao e uma leitura decente.
   A SAIDA, que o proprio critico apontou: a fileira EMPILHA, do mesmo jeito que o par de paineis
   (secao 9 do contrato). Nao ha um numero redondo aqui: MEDIDO com screenshot de verdade (a
   metrica de linhas por `getClientRects().length` MENTIU nesta tela especifica -- contava "1"
   onde a foto mostrava tres linhas, aparentemente por causa de como o motor agrupa retangulos
   quando a quebra e por `overflow-wrap: anywhere` no meio de uma palavra/espaco-sem-quebra, entao
   toda medida abaixo foi CONFERIDA OLHANDO O PIXEL, nao só o numero de retangulos): a 620px o
   VALOR ja cabe numa linha so nos quatro cartoes (so o ROTULO mais longo, "% Devolução (Valor)",
   ainda quebra em duas linhas, o que ja e o comportamento aceito desta tela); a 700px os quatro
   cartoes ficam identicos a fotografia, rotulo incluido. Escolhido 700px, o MESMO numero do par
   de paineis abaixo (secao "AS DUAS FILEIRAS..."): e o ponto onde as duas coisas desta tela que
   precisavam de mais respiro (a fileira de KPIs e o par Rede/Motivo) ficam confortaveis ao mesmo
   tempo, e reaproveitar o mesmo numero medido evita um segundo numero magico sem necessidade.

   ABAIXO DE 700px (ou seja, em QUALQUER largura de celular real: nenhuma das seis do portao passa
   disso), os quatro cartoes viram DUAS LINHAS DE DOIS -- a mesma ordem do DOM que a foto ja tem
   (Volume+Valor na primeira, %+Entregas na segunda), entao nenhum `grid-template-areas` nem
   reordenacao e necessario: duas colunas iguais colocam os quatro filhos nessas duas linhas
   sozinhas. Cada cartao ganha o DOBRO ou mais de largura da fileira de quatro (150+px contra
   35-50px), e o valor cabe numa linha so ate em 300px de largura de tela inteira, MEDIDO. */
.avcd-kpis {
  container-type: inline-size;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 10px var(--av-recuo) 0;
}
@container (min-width: 700px) {
  .avcd-kpis {
    /* `minmax(0, Nfr)`, NUNCA so `Nfr`: uma faixa `fr` sozinha nasce com minimo AUTO, entao o
       conteudo mais largo de um cartao (o chip de variacao ou o "vs. mes anterior") EMPURRA a
       coluna alem da fracao pedida, e a fileira fica maior que a tela -- a mesma armadilha ja
       paga no relatorio da tarefa b31. O `minmax(0, ...)` prende o piso da coluna em zero, e quem
       encolhe por dentro dela e o TEXTO (com `overflow`/`text-overflow`, abaixo), nunca a coluna. */
    grid-template-columns: minmax(0, 1.21fr) minmax(0, 1.21fr) minmax(0, 1fr) minmax(0, 1.12fr);
  }
}
/* Estas telas SAO CLARAS nas quatro fotografias que nao sao a do promotor (o contrato so preve
   tema escuro para aquela), entao o fundo de cada cartao e uma cor DE MARCA fixa, e nao um token
   que troca com o tema do painel -- o mesmo raciocinio que ja vale para `--avc-topo` em
   avarias-celular.css: sao identidade da fotografia, nao um efeito de superficie que deva escurecer
   com o tema do computador. */
.avcd-kpi {
  align-items: center;
  border-radius: 14px;
  container-type: inline-size;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  padding: 10px;
}
.avcd-kpi-icone {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: none;
  height: clamp(28px, 9cqi, 38px);
  justify-content: center;
  width: clamp(28px, 9cqi, 38px);
}
.avcd-kpi-icone svg {
  height: 55%;
  width: 55%;
}
/* `grid-template-columns: minmax(0, 1fr)` EXPLICITO, e nao so `min-width: 0` no proprio elemento
   -- esta e a CAUSA DE VERDADE do P0 do "R$ 28.430,C" que eu tinha marcado como resolvido: o
   `min-width: 0` no CONTAINER e no FILHO (`.avcd-kpi-valor`, abaixo) protege as duas CAIXAS, mas
   sem uma faixa de grade DECLARADA aqui, este container cai na coluna implicita "auto", que se
   dimensiona pelo CONTEUDO (o texto inteiro, sem quebrar) e IGNORA quanto espaco a caixa de fora
   realmente tem -- medido: o `<span>` do valor saia 15px mais largo que o proprio
   `.avcd-kpi-corpo`, o pai dele. `minmax(0, 1fr)` crava a faixa no piso certo, e so ENTAO o
   `min-width: 0` do item consegue fazer efeito e o texto quebra em vez de vazar. */
.avcd-kpi-corpo {
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
/* O ROTULO QUEBRA EM DUAS LINHAS, NUNCA CORTA COM RETICENCIAS: medido no navegador em 390px, "Volume
   Devolvido" e "% Devolução (Valor)" nao cabem numa linha so dentro do cartao mais estreito (o
   terceiro, 1fr contra 1,21fr dos dois primeiros) nem no piso de 9px do `clamp` abaixo -- e o nome
   do cartao e a unica coisa que diz o que aquele numero e. Cortar "Volume D…" deixa a tela mais
   pobre do que a fotografia (que escreve o rotulo inteiro, em fonte maior, num cartao 2,4x mais
   largo); duas linhas de 9px continuam legiveis e nao mentem sobre o nome do indicador. */
.avcd-kpi-rotulo {
  color: #444839;
  font-size: clamp(11px, 5.4cqi, 11.5px);
  font-weight: 600;
  line-height: 1.15;
}
/* P0 ACHADO POR UM CRITICO DE CONTEXTO LIMPO: "R$ 28.430,00" saia cortado em "R$ 28.430,C" no
   cartao "Valor Devolvido". A CAUSA nao era o `clamp` (que ja usa `cqi`, a largura do proprio
   cartao): era a FALTA de `min-width: 0` aqui. `.avcd-kpi-corpo` (pai, `display: grid`) e um
   `min-width: 0` na PROPRIA caixa, mas isso nao desce para os FILHOS -- item de grid nasce com
   `min-width: auto`, ou seja "nunca menor que o texto mais comprido sem quebra", e "R$ 28.430,00"
   sem essa trava recusava encolher e vazava para fora do cartao (que so tem ~45-50px sobrando
   depois do icone), sem cortar NADA visualmente na tela: o numero so continuava desenhado por
   cima do cartao vizinho, ate a borda dele, e ninguem consegue ler "...,00" ali. Mesmo criterio
   de sempre (perde altura, nunca numero): com `min-width: 0` o valor quebra no unico espaco que
   tem ("R$" numa linha, "28.430,00" na de baixo) quando o cartao for estreito demais para as
   duas palavras juntas. */
/* `overflow-wrap: anywhere` E O QUE FALTAVA, e so apareceu medindo o HTML de verdade, nao o CSS:
   `brl()` (ui.js, via `Intl.NumberFormat`) escreve "R$" e o numero separados por ESPACO SEM
   QUEBRA (` `, nao um espaco comum) -- e um comportamento do PROPRIO Intl do navegador, para
   o cifrao nunca ficar orfao do valor numa quebra normal de texto. `white-space: normal` sozinho
   nao ajuda quando a string inteira nao tem NENHUM ponto de quebra valido (o espaco que existe e
   exatamente o que foi marcado como "nunca quebre aqui"): sem outro lugar para respirar, o
   navegador desenha a linha inteira e deixa o excesso vazar para fora da caixa, mesmo com
   `min-width: 0` no lugar certo. `overflow-wrap: anywhere` e o mecanismo do proprio CSS para essa
   situacao exata -- so entra em acao quando NAO HA outro ponto de quebra, e so entao quebra em
   QUALQUER caractere (inclusive dentro do espaco sem quebra), exatamente o mesmo recurso ja usado
   em `.hbarra-rotulo` para "Vanguarda" (uma palavra so, sem espaco nenhum). */
.avcd-kpi-valor {
  color: #1c1f15;
  font-size: clamp(12px, 8.6cqi, 18px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* MEDIDO no painel de verdade a 440px (achado que meu proprio olho nao pegou numa captura de
   tela): com `white-space: nowrap` + reticencias, "Meta ≤ 1,5%" (49px de texto) nao cabia nos 43px
   do cartao mais estreito e perdia o PROPRIO NUMERO que o cartao existe para mostrar -- o mesmo
   defeito, pior, no "vs. mês anterior" do chip de variacao (55 a 76px de texto contra 43 a 50px de
   caixa). MESMO CRITERIO do rotulo, acima: entre cortar o texto e o cartao crescer um pouco mais
   alto, quem perde e a ALTURA, nunca a palavra. `max-width: 100%` continua (o texto nao pode negar
   a largura do cartao), so a reticencia e o `nowrap` e que saem. */
.avcd-kpi-meta {
  color: #57692d;
  font-size: clamp(11px, 4.8cqi, 11px);
  font-weight: 700;
  max-width: 100%;
}
.avcd-kpi .chip-variacao {
  max-width: 100%;
}
.avcd-kpi .chip-base {
  max-width: 100%;
  white-space: normal;
}
/* O CARTAO E CLARO, e `.chip-base` (avarias.css) foi escrito para o cartao ESCURO do computador:
   la o cinza-esverdeado claro (`--avarias-apoio-na-faixa`) contrasta com o fundo verde-quase-preto;
   aqui, em cima de rosa ou menta claro, ele ficaria quase invisivel. Escopado por `data-tela` para
   nao mudar o cartao da tela de computador, que continua precisando do tom claro dele. */
[data-tela="avarias-celular-devolucoes"] .avcd-kpi .chip-base {
  color: #5d6254;
}
/* O MESMO PROBLEMA DO `.chip-base` ACIMA, so que no `.chip-variacao` (o "12,3%"/seta), e achado
   por fora: `avarias.css` ja escreve `.chip-variacao.ruim{color:var(--avarias-vermelho)}` /
   `.bom{color:var(--avarias-verde-alta)}`, mas `assets/css/fdv-atacado-pedido.css` (outro modulo,
   nao meu nesta rodada) declara um `.chip-variacao.ruim`/`.bom` PROPRIO, com a MESMA
   especificidade (duas classes) e carregado DEPOIS -- e o dele aponta para `--fdv-vermelho`/
   `--fdv-verde-alta`, tokens que so existem dentro de `.tela-fdv` (nunca em `.tela-avarias`).
   Um `var()` que nao resolve invalida a propria declaracao, e `color` (propriedade herdada) cai
   para o valor HERDADO -- aqui, o texto quase-branco do tema escuro do painel (`--avarias-texto`),
   sobre o fundo rosa/menta claro do cartao: contraste 1.0-1.1:1, medido pelo portao de tema
   escuro. MESMO padrao ja usado em avarias-celular-inicio.css (`.chip-variacao.ruim`/`.bom`
   escopados por `data-tela`): aqui basta a MESMA variavel que `avarias.css` ja pretendia usar,
   so que com especificidade maior (`[data-tela=...]` sobe pra tres selecionadores) pra vencer a
   colisao com o modulo de FDV sem precisar mexer em nenhum arquivo dele. */
[data-tela="avarias-celular-devolucoes"] .chip-variacao.ruim {
  color: var(--avarias-vermelho-texto);
}
[data-tela="avarias-celular-devolucoes"] .chip-variacao.bom {
  color: var(--avarias-verde-texto);
}

/* ============================================================
   AS QUATRO PILULAS DE FILTRO. Cada uma e um <select> DE VERDADE, sem decoracao nenhuma, cobrindo
   a pilula inteira com opacidade zero -- e nao um menu escrito a mao. O que aparece por cima
   (icone, rotulo pequeno, valor em negrito, seta) e so a pele; quem recebe o toque, o teclado e o
   seletor nativo do telefone e o <select>. E a mesma tecnica que qualquer <select> "bonito" usa
   sem precisar reescrever ARIA de combobox nem fechar dropdown ao clicar fora, porque nao ha
   dropdown nenhum escrito por este arquivo: o do sistema operacional que abre.
   ============================================================ */
.avcd-filtros {
  display: grid;
  gap: 8px; /* era 6 ate a r38 (27/09/2026): o vao entre duas pilulas nao desce de 8px */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 10px var(--av-recuo);
}
.avcd-filtro,
.avcd-mais-filtros {
  align-items: center;
  background: var(--avarias-cartao);
  border: 1px solid var(--avarias-borda);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 4px;
  min-height: 48px;
  min-width: 0;
  padding: 6px 6px 6px 8px;
  position: relative;
}
.avcd-filtro-icone {
  color: var(--avarias-texto);
  flex: none;
  height: 15px;
  width: 15px;
}
.avcd-filtro-textos {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.avcd-filtro-rotulo {
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avcd-filtro-valor {
  color: var(--avarias-texto);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Nao ha "seta para baixo" no conjunto compartilhado de icones (secao 2.3 do contrato): o mesmo
   chevron que abre uma linha ("proximo") deitado de lado, com `rotate(90deg)`, e o desenho de
   disclosure sem desenhar um icone novo. */
.avcd-filtro-seta {
  color: var(--muted-foreground);
  flex: none;
  height: 12px;
  transform: rotate(90deg);
  width: 12px;
}
/* AQUI O ROTULO E A UNICA LINHA DE TEXTO DA PILULA (a ficha: "Mais filtros" nao tem uma segunda
   linha de valor embaixo, ao contrario das outras tres) -- entao ele nao pode herdar o
   `white-space: nowrap` da classe base, pensada para o rotulinho curto ("Rede", "Loja") das
   outras pilulas. MEDIDO a 440px: "Mais filtros" (55px) nao cabia nos 49px da pilula e cortava
   em reticencias; aqui tambem vale perder altura, nunca a palavra. */
.avcd-mais-filtros .avcd-filtro-rotulo {
  color: var(--avarias-texto);
  font-size: 11px;
  font-weight: 700;
  overflow: visible;
  white-space: normal;
}
.avcd-filtro select {
  cursor: pointer;
  font-size: 16px; /* piso da regra 4 do portao de celular: select abaixo disso, o iPhone da zoom sozinho */
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}
.avcd-filtro:focus-within {
  outline: 2px solid var(--avarias-verde-na-faixa);
  outline-offset: 1px;
}

/* ============================================================
   AS ABAS (a fileira de secao, com 5, e a fileira de responsavel, com 8) REAPROVEITAM `.av-abas`/
   `.av-aba` (avarias.css) inteiras, sem CSS novo para a pele nem para a altura: o `@media
   (max-width: 1024px)` que ja existe em avarias.css (linha ~1723) cobre a altura de 40px e a
   fonte de 16px dos campos em QUALQUER largura de celular, cinco telas incluidas -- conferi isso
   so depois de o coordenador medir no painel de verdade e desmentir o que eu tinha escrito aqui
   antes (que a altura vinha curta): eu tinha lido so a regra BASE de `.av-aba`, sem ter visto essa
   segunda regra, mais abaixo no arquivo, que sobrescreve exatamente o que faltava. Fica a licao:
   media query no fim de um arquivo de 1700 linhas nao aparece na primeira leitura.

   O QUE SOBRA DE VERDADE E SO A LARGURA: `.av-abas` tem `flex-wrap: wrap` e cada `.av-aba` tem
   `flex: 1 1 auto`, pensados para OITO colunas dividirem uma fileira larga de computador. Num
   telefone, cinco pilulas (ou oito, na fileira de Responsavel) OU QUEBRAM em varias linhas
   (empurrando a pagina para baixo) OU, se `flex:1 1 auto` vencer o quebra-linha, ESPREMEM cada
   pilula ate cortar a palavra -- medido pelo portao de celular de verdade, a fileira inteira
   ficava mais larga que a tela em 420 e 440px. A leitura fiel de uma fileira de abas que nao cabe
   e ROLAR DE LADO DENTRO DA CAIXA (a mesma tecnica da tabela larga, secao 4.2 do contrato), nunca
   cortar aba nem reordenar: por isso `flex-wrap: nowrap` + `overflow-x: auto`, com cada `.av-aba`
   de volta ao proprio tamanho natural (`flex: none`, `white-space: nowrap` para o rotulo nao
   quebrar dentro da pilula), e a aba clicada rola ate ficar visivel (a mesma ideia de
   `assets/js/ui.js`, funcao `abas()`, que centraliza a aba ativa numa lista que rola).

   Corrigido SO dentro desta tela (escopado por `data-tela`, e nao em avarias-celular.css, que nao
   e meu nesta rodada): as outras quatro telas de celular que tambem usam `.av-abas` herdam o
   MESMO problema de largura, e o relatorio desta tarefa registra isso para quem cuida da casca
   consertar uma vez so, em vez de cinco. */
[data-tela="avarias-celular-devolucoes"] .av-abas {
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 4px var(--av-recuo) 8px;
}
[data-tela="avarias-celular-devolucoes"] .av-aba {
  flex: none;
  white-space: nowrap;
}

/* ============================================================
   AS DUAS FILEIRAS DE DOIS PAINEIS (Rede + Motivo, depois Produtos + Evolucao). SECAO 9 DO
   CONTRATO: o par nasce lado a lado, como no desenho, e so empilha abaixo da largura em que PARA
   DE SER LEGIVEL -- medida no navegador, nunca a da JANELA (`.avcd-par` e `container-type:
   inline-size`, entao a media abaixo pergunta a largura do proprio conteudo, nao a da tela).

   O NUMERO ANTIGO (340px) ESTAVA ERRADO, e um critico de contexto limpo provou isso com a foto do
   cartao "Devolucoes por Rede" ao lado do numero cortado na tela: a 390px de tela (a MAIS ESTREITA
   que o portao exige), 340px de container e MENOR que a largura util da propria tela -- ou seja,
   o par nunca empilhava em NENHUM aparelho de celular, e os cinco valores de "Devolucoes por Rede"
   saiam com os centavos cobertos pelo painel de Motivo do lado. A conta que faltou fazer da
   primeira vez: a fileira "Devolucoes por Rede" tem SEIS pecas de informacao por linha (marca,
   nome, barra, valor, chip, chevron, ver o comentario grande logo abaixo), e SEIS pecas com
   largura minima cada uma somam bem mais do que os ~185px que 340px de container davam para o
   painel de Rede sozinho (340 x 1,27/2,27, a fracao dele no par).

   O NUMERO NOVO, MEDIDO: reproduzi a tecnica das telas irmas (Inicio mediu 500px, Por Produto
   mediu 560px) -- forcei duas colunas em toda largura e fui subindo o container ate o TRILHO
   (a barra em si, a UNICA parte desta fileira que existe para ser medida a olho, regra 5.1 do
   contrato) parar de ficar preso no proprio piso minimo (24px) e comecar a responder ao espaco de
   verdade: em 700px de container o trilho ainda esta no piso (24px, mas ja proporcional, ver
   abaixo); em 760px ele ja cresceu para 38px, e a 800px chega a 60px, uma barra que se
   compara a olho sem esforco. 700px e o primeiro numero redondo nessa faixa, com folga suficiente
   para a rosca de Motivo (o outro elemento sensivel do par) tambem respirar. Abaixo de 700px de
   container o par empilha, o que cobre as SEIS larguras que o proprio portao de celular exige
   (390/640/820/1440/420/440) -- nenhuma delas passa de 700px de container mesmo somando as duas
   colunas do `.recipiente`, entao nestas telas o par SEMPRE fica empilhado, que e o comportamento
   fiel: o desenho do James so tem espaco para duas colunas numa imagem de 932px, nao num
   celular de verdade. */
.avcd-pares {
  display: grid;
  gap: 10px;
  padding: 0 var(--av-recuo) 10px;
}
.avcd-par {
  container-type: inline-size;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@container (min-width: 700px) {
  .avcd-par {
    /* `minmax(0, ...)` nas duas faixas, pelo mesmo motivo de `.avcd-kpis` acima: sem o piso em
       zero, um painel com conteudo largo (a tabela de "Produtos com Mais Devolucao", por exemplo)
       empurra a propria coluna alem da fracao pedida. */
    grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr);
  }
}

/* "Devolucoes por Rede": cada linha ganha, a ESQUERDA do rotulo, a marca da rede (a mesma classe
   de avarias-celular-casca.js), e a DIREITA do chip de variacao, o chevron que abre a rede.

   P1 ACHADO POR UM CRITICO DE CONTEXTO LIMPO, E ESTE ERA GRAVE, E CUSTOU DUAS TENTATIVAS ATE
   ACHAR O CAMINHO CERTO -- as duas primeiras ficam registradas aqui porque a proxima pessoa a
   mexer nesta linha vai tropecar nas MESMAS se tentar de novo.

   A CAUSA: `.hbarra` (grafico.js/avarias.css) usa `grid-template-columns: subgrid` para se
   encaixar nas QUATRO faixas de `.grafico-hbarras` (`minmax(46px,auto) minmax(56px,1fr) auto
   auto`, para [rotulo, trilho, valor, chip]). Pendurar a marca da rede e o chevron como filhos
   NORMAIS de `.hbarra` fazia a linha ter seis filhos contra so quatro faixas: por posicao, a
   marca tomava a faixa do ROTULO, o rotulo tomava o `1fr` que era do TRILHO, e o trilho ia parar
   numa faixa `auto` sem ninguem pedindo espaco para ele. Medido: Atacadao (R$ 4.980) e Vanguarda
   (R$ 2.430), 2,05x de diferenca no valor, desenhando o MESMO traco de 2px.

   TENTATIVA 1, redefinir seis faixas (dar ao trilho um `minmax(*, 1fr)` de novo): o trilho ficou
   TRAVADO no proprio piso em QUALQUER largura de painel testada (158 a 405px) -- um teste
   ISOLADO, fora desta pagina, com a MESMA estrutura (subgrid, dois niveis de `container-type:
   inline-size` aninhados, cinco linhas) respondeu CERTO, entao o problema e uma interacao
   especifica desta pagina que nao consegui isolar, nao um limite generico do subgrid.
   TENTATIVA 2, tirar marca/chevron do grid com `position: absolute` e reservar o espaco deles por
   `padding` no proprio `.hbarra`: o trilho continuou preso num numero fixo -- o palpite e que
   `padding` no elemento que faz `subgrid` conflita com onde as faixas herdadas realmente
   desenham (as faixas sao posicionadas no sistema de coordenadas do PAI, e o padding desloca so a
   caixa de conteudo do FILHO), mas nao cheguei a confirmar a causa exata.

   A SAIDA: esta linha NAO usa `grid-template-columns: subgrid` -- e um FLEX comum, montado em
   avarias-celular-devolucoes.js (funcao `montarPainelRede`), reaproveitando as MESMAS classes
   visuais de `barrasHorizontais` para o CSS sair identico (`.hbarra`, `.hbarra-rotulo`,
   `.hbarra-trilho`, `.hbarra-preenche`, `.hbarra-fim`, `.hbarra-valor`) -- so a caixa que as
   organiza e outra, e o TRILHO e o UNICO item com `flex-grow`, que e a mesma regra de sempre
   (regra 5.1 do contrato: a barra e o unico pedaco desta linha que existe para ser medido a
   olho, entao e ela que fica com o espaco de sobra; as outras cinco pecas pegam so o que o
   proprio conteudo pede). */
.avcd-hbarras-flex {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
[data-tela="avarias-celular-devolucoes"] .hbarra {
  align-items: center;
  display: flex;
  gap: 6px;
}
/* TETO PROPRIO PARA A MARCA NESTA LINHA DENSA: a regra geral da casca (`.avc-marca-rede`, em
   avarias-celular.css) da ate 72px de largura (o suficiente para uma marca-texto tipo "Mix
   Mateus" por extenso). Nesta linha ha SEIS pecas de informacao dividindo 158 a 440px, e o logo,
   sozinho, e o UNICO pedaco puramente decorativo (o NOME por extenso, ao lado dele, ja diz qual
   rede e -- encolher o logo largo nao perde informacao nenhuma). Por isso, so aqui, o teto cai
   para 28px: a imagem continua com `object-fit: contain` (herdado), entao so encolhe dentro do
   proprio quadrado, nunca distorce. */
/* LARGURA CRAVADA (`width: 28px`, nao so `max-width`), TERCEIRO PEDACO A PRECISAR DISSO: as cinco
   marcas sao arquivos de PNG com proporcao PROPRIA (Mix Mateus mais larga, outras mais quadradas),
   entao `object-fit: contain` com `flex: none` (que so tira o item de esticar, sem travar o
   tamanho) deixava cada `<img>` com a largura NATURAL DELA -- de novo, o trilho de cada linha
   herdando uma sobra diferente. `width` fixo forca a MESMA caixa nas cinco, e `object-fit: contain`
   (herdado da casca) encaixa a imagem sem esticar dentro dela, com folga em volta quando a imagem
   for mais estreita que 28px. */
[data-tela="avarias-celular-devolucoes"] .hbarra .avc-marca-rede {
  flex: none;
  height: 20px;
  width: 28px;
}
/* A VANGUARDA NAO TEM ARQUIVO DE LOGO (secao 3.1 do contrato: id da bandeira sem PNG
   correspondente), entao `marcaDaRede` troca a `<img>` por este `<span>` com o nome em tipo -- E
   FOI ISSO QUE ESCONDEU O QUARTO PEDACO DA MEDICAO: o `<span>` nao herda o `width: 28px` acima (e
   outra classe), entao "Vanguarda" por extenso tomava a largura do proprio texto, e SO a linha
   dela ficava com o trilho preso no piso enquanto as outras quatro ja tinham crescido. Mesma
   largura cravada das outras quatro, com reticencias se "Vanguarda" nao couber em 9px de fonte --
   o nome por extenso continua ao lado, no rotulo, entao nada se perde. */
[data-tela="avarias-celular-devolucoes"] .hbarra .avc-marca-rede-texto {
  display: inline-block;
  flex: none;
  font-size: 11px; /* era 9 ate a r38 (27/09/2026): piso de letra de 11px */
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 28px;
}
/* O ROTULO NAO CRESCE (`flex-grow: 0`): quem cresce e o TRILHO, abaixo. O rotulo so ENCOLHE
   (`flex-shrink`, com `min-width: 0` para a trava classica de flexbox nao entrar em acao) e, sem
   espaco, corta em reticencias -- `title` (que `montarPainelRede` ja escreve) continua trazendo o
   nome inteiro no toque longo/hover. Nao e o mesmo tratamento do `.hbarra-rotulo` de dentro do
   `.avcd-motivo` nem de tabelas: aqui o teto de 84px e o que sobra depois de marca+trilho+valor+
   chip+chevron numa fileira que so tem ~330-380px de sobra mesmo no melhor caso, entao reticencias
   sao a troca certa (a regra 5 do contrato proibe INVENTAR um nome curto de bandeira, nao proibe
   truncar visualmente com o nome inteiro continuando acessivel via `title`). */
/* LARGURA FIXA (`flex: 0 0 84px`), NUNCA "auto"/"encolhe pelo proprio conteudo" -- e essa e a
   PARTE QUE FALTAVA na primeira versao desta linha em flexbox, achada so ao MEDIR (nao dava para
   ver isto olhando o CSS): sem `.hbarra` compartilhar faixas de grade (o subgrid que esta tela
   parou de usar, ver o comentario grande acima), cada `.hbarra` e um FLEXBOX INDEPENDENTE das
   outras quatro -- se o rotulo encolhe/cresce pelo PROPRIO texto ("Assaí", curto, sobra mais
   espaco vs. "Mix Mateus", longo, sobra menos), o TRILHO de cada linha fica com uma largura
   DIFERENTE, e a razao entre duas barras deixa de ser a razao entre os dois numeros -- exatamente
   a regressao que o portao de geometria pegou (razao do valor 6,69, razao do desenho caindo para
   3,3 nas larguras mais folgadas). A largura do rotulo tem de ser a MESMA nas cinco linhas para o
   trilho de todas ficar do mesmo tamanho, e so uma largura FIXA (nao dependente do texto de cada
   linha) garante isso. */
/* 64px CORTAVA "Mix Mate…" e "Vang…" com reticencias -- medido pelo critico: o texto precisa de
   66px, 2px a mais do que a faixa cravada tinha. 70px da folga de verdade (nao só o minimo exato
   que voltaria a cortar no primeiro nome um pouco mais comprido). */
[data-tela="avarias-celular-devolucoes"] .hbarra-rotulo {
  flex: 0 0 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* O TRILHO E A UNICA FAIXA QUE CRESCE. `flex-basis: 24px` e so o ponto de partida do calculo (o
   `flex-grow: 1` e quem decide o tamanho final, absorvendo toda sobra); o piso de 24px em
   `min-width` e o que a regra 5 do contrato pede (uma barra abaixo disso deixa de ser comparavel
   a olho), e so se torna o tamanho de fato num painel tao estreito que nem a fileira inteira
   caberia sem rolar -- que e exatamente o caso que a secao 9 (par empilha abaixo da largura
   medida) existe para nunca deixar chegar a esta linha. */
[data-tela="avarias-celular-devolucoes"] .hbarra-trilho {
  flex: 1 1 24px;
  min-width: 24px;
}
/* O VALOR E O CHIP TAMBEM PRECISAM DE LARGURA FIXA, PELO MESMO MOTIVO DO ROTULO -- e este foi o
   SEGUNDO round de medicao, depois do rotulo ja ter sido corrigido: com o rotulo fixo, a
   proporcao ficou perfeita ENQUANTO o trilho estava preso no proprio piso (24px, onde as cinco
   linhas empatam de qualquer jeito), mas voltou a errar assim que o trilho comecou a crescer
   (razao do desenho caindo para ~4,1 a 5,4 contra 6,69 do valor). A causa era a MESMA, um nivel
   adiante: "R$ 12.450,00" e "R$ 1.860,00" tem larguras DIFERENTES (o valor de cada linha, por
   definicao, muda), e com `.hbarra-fim`/`.chip-variacao` no proprio tamanho de conteudo, a linha
   com o numero mais curto sobrava mais espaco para o SEU trilho do que a linha com o numero mais
   longo -- de novo, cinco flexbox independentes sem faixa compartilhada. `flex: 0 0 <Npx>` cravado
   (a largura do maior valor/chip das cinco linhas, com folga) resolve nas duas colunas do mesmo
   jeito que resolveu no rotulo: nao e "encolher pelo texto", e uma coluna do MESMO tamanho nas
   cinco linhas, entao o trilho (unica faixa que cresce) fica igual nas cinco tambem.

   OS DOIS NUMEROS (104px, 50px) SAO O TERCEIRO round, medido no PAINEL DE VERDADE a 390px (o
   portao das cinco telas abre exatamente nesta largura): com 98px/48px "R$ 12.450,00" (a linha
   Mix Mateus, o UNICO valor com cinco digitos antes da virgula) media 101,81px de verdade, e
   "▼12,4%" (Vanguarda) media 49,19px -- os dois um triz mais largos que a faixa cravada, o
   suficiente para CADA UM daqueles dois furar o proprio flex-basis e roubar 1 a 4px do trilho SO
   daquela linha. 104px e 50px dao folga para o maior valor e o maior chip das cinco caberem SEM
   PRECISAR ENCOLHER a 390px -- so que "sem precisar encolher" e "sem PODER encolher" sao coisas
   diferentes, e a linha abaixo escrevia a segunda quando so tinha testado a primeira.

   O QUE ESTAVA ESCRITO AQUI ATE UM CRITICO REJULGAR E ACHAR ERRADO ("foi o que fechou a igualdade
   perfeita nas cinco"): so era verdade a 390px. De 400 a 440px o `.chip-variacao` de "Mix Mateus"
   ("▲18,6%") tem `min-content` de 50,91px, ACIMA da faixa cravada de 50px -- e faltava exatamente
   o `min-width: 0` que `.hbarra-rotulo` (acima) ja tem: sem ele, item de flex nao aceita encolher
   abaixo do proprio conteudo, MESMO com `flex-basis` menor, e os 0,91px que faltam saem do
   TRILHO daquela linha (e so daquela), quebrando a igualdade entre as cinco. A mesma armadilha,
   pela terceira vez neste arquivo (rotulo, corpo do KPI, e agora aqui); a licao que fica e conferir
   `min-width: 0` em TODO `flex: 0 0 <Npx>` desta tela, nao so nos que ja deram problema. */
[data-tela="avarias-celular-devolucoes"] .hbarra-fim {
  flex: 0 0 104px;
  min-width: 0;
}
[data-tela="avarias-celular-devolucoes"] .hbarra .chip-variacao {
  flex: 0 0 50px;
  min-width: 0;
}
[data-tela="avarias-celular-devolucoes"] .hbarra .avcd-chevron {
  flex: none;
}
/* NUM PAR ESTREITO O CHIP DESCE PARA BAIXO DO VALOR (r38, 27/09/2026). As seis pecas da linha (marca
   28, rotulo 70, trilho 24 no piso, valor 104, chip 50, seta 44, e cinco vaos de 6) pedem 350px, e
   a 360 de largura o painel so tem 310: a PAGINA rolava de lado 16px (regra "largura" da auditoria
   de tela). Aqui a linha vira grade de duas fileiras: tudo na mesma ordem na de cima, e o chip na
   de baixo, embaixo do proprio valor. As colunas continuam CRAVADAS e iguais nas cinco linhas, entao
   o trilho (a unica que cresce) continua do mesmo tamanho em todas (a regra do comentario acima). */
@container (max-width: 375.98px) {
  [data-tela="avarias-celular-devolucoes"] .hbarra {
    display: grid;
    grid-template-areas: "marca rotulo trilho fim seta" ". . . chip seta";
    grid-template-columns: 28px 70px minmax(24px, 1fr) 104px 44px;
    row-gap: 2px;
  }
  [data-tela="avarias-celular-devolucoes"] .hbarra > :first-child {
    grid-area: marca;
  }
  [data-tela="avarias-celular-devolucoes"] .hbarra > .hbarra-rotulo {
    grid-area: rotulo;
  }
  [data-tela="avarias-celular-devolucoes"] .hbarra > .hbarra-trilho {
    grid-area: trilho;
  }
  [data-tela="avarias-celular-devolucoes"] .hbarra > .hbarra-fim {
    grid-area: fim;
  }
  [data-tela="avarias-celular-devolucoes"] .hbarra > .chip-variacao {
    grid-area: chip;
  }
  [data-tela="avarias-celular-devolucoes"] .hbarra > .avcd-chevron {
    grid-area: seta;
  }
}
.avcd-lista-lojas {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.avcd-lista-lojas li {
  border-bottom: 1px solid var(--avarias-borda);
  font-size: 12.5px;
  padding: 6px 2px;
}

/* Chevron redondo que abre o detalhe de uma linha (rede ou produto). 44x44 de AREA de toque, o
   piso da Apple HIG e do WCAG 2.2 AA (fonte completa no comentario de `.avc-topo-botao`,
   avarias-celular.css), mesmo com o desenho do icone bem menor por dentro. */
.avcd-chevron {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--muted-foreground);
  cursor: pointer;
  display: flex;
  flex: none;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.avcd-chevron:hover {
  background: var(--avarias-cabecalho-coluna);
}
.avcd-chevron svg {
  height: 16px;
  width: 16px;
}

/* "Devolucoes por Motivo": rosca a esquerda, legenda a direita, do mesmo jeito que a ficha
   descreve. `flex-wrap` (e nao outro `@container`) resolve sozinho: dentro do painel que ja
   participa do par acima, a rosca tem piso de largura (`.grafico-rosca` cresce livre) e a legenda
   quebra para baixo dela quando o espaco não fecha, sem precisar de uma segunda media de conteiner
   aninhada dentro da primeira. */
.avcd-motivo {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.avcd-motivo .grafico-rosca {
  flex: 1 1 110px;
  min-width: 110px;
}
.avcd-motivo .av-legenda {
  flex: 1 1 140px;
  min-width: 140px;
}

/* "Produtos com Mais Devolucao": alternador Valor(R$)/Volume(kg) no cabecalho do painel. */
.avcd-toggle {
  background: var(--avarias-cabecalho-coluna);
  border-radius: 8px;
  display: flex;
  gap: 2px;
  padding: 2px;
}
/* 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). */
.avcd-toggle-item {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--avarias-texto);
  cursor: pointer;
  flex: 1 1 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  min-height: 44px;
  padding: 4px 6px;
}
.avcd-toggle-item.ativo {
  background: #334802;
  color: #fff;
}

/* A lista "Produtos com Mais Devolucao": linha com selo de posicao, emoji, nome, valor, percentual
   e chevron -- e uma LISTA (a ficha descreve linha com divisor fino, nao uma tabela com
   cabecalho), entao o markup e `role="list"`/`role="listitem"`, nao `<table>`. */
.avcd-lista-linhas {
  display: grid;
  gap: 2px;
}
.avcd-linha-produto {
  align-items: center;
  border-bottom: 1px solid var(--avarias-borda);
  display: grid;
  gap: 8px;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
  min-width: 0;
  padding: 7px 0;
}
.avcd-linha-produto:last-child {
  border-bottom: 0;
}
.avcd-linha-emoji {
  font-size: 16px;
  line-height: 1;
}
.avcd-linha-nome {
  color: var(--avarias-texto);
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avcd-linha-valor {
  color: var(--avarias-texto);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.avcd-linha-pct {
  color: var(--muted-foreground);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

/* `min-width: 0` TEM DE DESCER ATE A CAIXA DA TABELA, PAI POR PAI -- e nao so na propria caixa.
   Achado pelo portao de celular de verdade: `.avc-painel-corpo` (avarias-celular.css) ja e
   `min-width: 0`, mas isso protege so A SI MESMA, nao os FILHOS dela. O filho direto aqui e um
   `<div>` sem classe (o `elTabelaRespCorpo` do modulo, so um porta-retrato para o `replaceChildren`
   trocar a tabela pela sub-aba escolhida) -- como item de grid ele nasce com o minimo AUTO de
   sempre, deixa a tabela de 7 colunas empurrar a LARGURA DELE, e so entao `.av-tabela-caixa`
   recebe espaco de sobra para rolar dentro: a `overflow-x:auto` dela (avarias.css) so cumpre o
   papel se o pai ja estiver preso na largura do cartao. E o mesmo defeito, um nivel acima, do que
   ja tinha sido pago na tarefa b31 (relatorio daquela rodada, defeito 4: "consertar so a coluna
   empurra o estouro um nivel para dentro"). O seletor generico (`> *`) cobre este `<div>` sem
   precisar de uma classe nova so para isso. */
[data-tela="avarias-celular-devolucoes"] .avc-painel-corpo > * {
  min-width: 0;
}

/* ============================================================
   "Devolucoes por Responsavel". O cabecalho (icone + titulo + "Ver todos") e escrito nesta tela
   (nao por `painelCelular`, da casca): aquela funcao so desenha um CHEVRON no atalho, sem rotulo
   visivel do lado, e o desenho desta secao tem o texto "Ver todos" por escrito. As classes
   `.avc-painel-cabeca`/`.avc-painel-icone`/`.avc-painel-titulos` (avarias-celular.css) sao as
   MESMAS que `painelCelular` usaria, entao o cartao sai identico ao das outras secoes.
   ============================================================ */
.avcd-resp-vertodos {
  align-items: center;
  display: flex;
  flex: none;
  gap: 2px;
  margin-left: auto;
  /* nunca mais largo que o cabecalho (r38, 27/09/2026): aberto, a nota "Esta lista ja mostra tudo..."
     entra aqui dentro e, sem teto, esticava o bloco ate 300px e a PAGINA rolava de lado a 360 (367px) */
  max-width: 100%;
  min-width: 0;
}
/* o cabecalho deste painel quebra linha: aberto, o "Ver todos" com a nota desce para baixo do titulo
   em vez de espremer o titulo a zero */
.avc-painel-cabeca:has(> .avcd-resp-vertodos) {
  flex-wrap: wrap;
}
/* O BOTAO REAPROVEITADO (`botaoVerTodos`, da casca) nasce como pilula verde de largura cheia
   (`.av-ver-todos`, avarias.css) -- certa para o rodape de uma lista, errada para um cabecalho
   estreito. Aqui ele vira texto simples, do tamanho do proprio rotulo: o COMPORTAMENTO (o
   `aria-expanded` e a nota que aparece) continua sendo o mesmo de sempre, so a pele muda, e ela
   muda so AQUI dentro (escopado por `data-ver-todos`), nunca para as listas que usam a pilula
   cheia noutro lugar do modulo. */
[data-ver-todos="responsaveis"] .av-ver-todos {
  background: transparent;
  border-radius: 6px;
  color: var(--avarias-texto);
  font-size: 12px;
  min-height: 44px;
  padding: 4px 2px;
  width: auto;
}
[data-ver-todos="responsaveis"] .av-ver-todos:hover {
  filter: none;
  text-decoration: underline;
}
.avcd-resp-vertodos-seta {
  color: var(--muted-foreground);
  flex: none;
  height: 14px;
  width: 14px;
}
[data-ver-todos="responsaveis"] .av-painel-apoio {
  grid-column: 1 / -1;
  padding: 0 var(--av-recuo) 6px;
}

/* MEDIDO no painel de verdade a 440px: 36px de altura, abaixo do piso de 44x44 que a Apple HIG e o
   WCAG 2.2 AA pedem para alvo de toque (fonte completa no comentario de `.avc-topo-botao`,
   avarias-celular.css; o Android/Material Design pede 48x48, um degrau acima). */
.avcd-botao-ver {
  background: #2b3c02;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  min-height: 44px;
  min-width: 44px;
  padding: 6px 14px;
}
.avcd-botao-ver:hover {
  filter: brightness(1.12);
}

/* ============================================================
   FAIXA "Entrega Padrao JAP". Cor de marca fixa (mint claro, medido na ficha), pelo mesmo motivo
   dos quatro cartoes: e identidade da fotografia, nao superficie que deva trocar com o tema.
   ============================================================ */
.avcd-banner {
  align-items: center;
  background: #f1f7e3;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  gap: 10px;
  /* 8px em cima, nao mais 4 (r38, 27/09/2026): o banner ficava a 4px do cartao de cima */
  margin: 8px var(--av-recuo) 12px;
  padding: 12px;
  text-align: left;
  width: calc(100% - 2 * var(--av-recuo));
}
.avcd-banner-icone {
  align-items: center;
  background: var(--avarias-faixa-escura);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: none;
  height: 34px;
  justify-content: center;
  width: 34px;
}
.avcd-banner-icone svg {
  height: 17px;
  width: 17px;
}
.avcd-banner-texto {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}
.avcd-banner-texto b {
  color: #2a370a;
  font-size: 12.5px;
  font-weight: 700;
}
.avcd-banner-texto span {
  color: #4a572d;
  font-size: 11px;
}
.avcd-banner-link {
  align-items: center;
  color: #2a370a;
  display: flex;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  gap: 2px;
}
.avcd-banner-link svg {
  height: 13px;
  width: 13px;
}

/* ============================================================
   r81 (03/10/2026): O ESCURO SEM PASTEL. Os quatro cartoes de numero e a faixa "Entrega Padrao JAP" eram sempre
   claros ("identidade da fotografia", comentarios acima), e no escuro viravam manchas rosa e menta claras sobre o
   grafite, com croma acima do teto de 0,012. No escuro leem agora o grafite e os tons de assunto do painel; o
   circulo do icone segue na cor de cada cartao. No claro nada mudou.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .avcd-kpi {
    background: var(--superficie-2) !important; /* o fundo vem escrito em linha, do JS: so !important o vence */
  }
  :root:not([data-tema="claro"]) .avcd-kpi-rotulo,
  :root:not([data-tema="claro"]) .avcd-kpi .chip-base,
  :root:not([data-tema="claro"]) [data-tela="avarias-celular-devolucoes"] .avcd-kpi .chip-base {
    color: var(--muted-foreground);
  }
  :root:not([data-tema="claro"]) .avcd-kpi-valor {
    color: var(--foreground);
  }
  :root:not([data-tema="claro"]) .avcd-kpi-meta {
    color: var(--tom-verde);
  }
  :root:not([data-tema="claro"]) .avcd-banner {
    background: var(--tom-verde-fundo);
  }
  :root:not([data-tema="claro"]) .avcd-banner-texto b,
  :root:not([data-tema="claro"]) .avcd-banner-link {
    color: var(--foreground);
  }
  :root:not([data-tema="claro"]) .avcd-banner-texto span {
    color: var(--muted-foreground);
  }
}
:root[data-tema="escuro"] .avcd-kpi {
  background: var(--superficie-2) !important; /* o fundo vem escrito em linha, do JS: so !important o vence */
}
:root[data-tema="escuro"] .avcd-kpi-rotulo,
:root[data-tema="escuro"] .avcd-kpi .chip-base,
:root[data-tema="escuro"] [data-tela="avarias-celular-devolucoes"] .avcd-kpi .chip-base {
  color: var(--muted-foreground);
}
:root[data-tema="escuro"] .avcd-kpi-valor {
  color: var(--foreground);
}
:root[data-tema="escuro"] .avcd-kpi-meta {
  color: var(--tom-verde);
}
:root[data-tema="escuro"] .avcd-banner {
  background: var(--tom-verde-fundo);
}
:root[data-tema="escuro"] .avcd-banner-texto b,
:root[data-tema="escuro"] .avcd-banner-link {
  color: var(--foreground);
}
:root[data-tema="escuro"] .avcd-banner-texto span {
  color: var(--muted-foreground);
}