/* © 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 CASCA COMPARTILHADA das cinco telas de celular do modulo de Avarias (tarefa b32): o
   cabecalho preto do topo, a faixa de titulo, a barra de abas do rodape, e os primitivos que
   assets/js/telas/avarias-celular-casca.js exporta (painel, chip de percentual, selo de
   posicao, marca de rede). Cada uma das cinco telas tem a SUA PROPRIA folha
   (avarias-celular-<tela>.css) para o que so ela usa; aqui mora so o que as cinco dividem.

   ESTE ARQUIVO HERDA avarias.css INTEIRO, e disso de proposito: a raiz de cada tela leva as duas
   classes (`tela-avarias tela-avarias-celular`), entao `.av-painel`, `.av-tabela-caixa`,
   `.av-periodo`, `.av-logo`, `.av-ver-todos` e as cores `--avarias-*` (todas amostradas pixel a
   pixel das FOTOGRAFIAS DE COMPUTADOR do James) ja chegam prontas. O que fica aqui e SO o que
   muda no celular: a barra de baixo, o cabecalho do aparelho, e os poucos elementos que nao tem
   equivalente na tela de computador (o sino com contagem, o bloco de usuario, os dois avatares do
   promotor).

   DE ONDE VEM CADA COR NOVA. As identidades do cabecalho, da faixa de titulo e da barra de baixo
   (`--avc-topo`, `--avc-faixa-titulo`, `--avc-base`, `--avc-base-ativo`, `--avc-avatar`) NAO SAO
   as mesmas variaveis do desktop (`--avarias-faixa-escura` etc.): foram amostradas de fotografias
   DIFERENTES (as cinco telas de celular, nao as tres de computador), e o contrato desta rodada
   manda usar a cor medida, nunca uma parecida de outro lugar. Fonte:
   scratchpad/avarias-extracao-mobile-inicio.md (secao 3, a ficha mais completa, cobre as quatro
   telas claras) e scratchpad/avarias-extracao-mobile-promotor.md (secao 3, a variante escura).
   Elas NAO MUDAM COM O TEMA do painel pelo mesmo motivo de --avarias-faixa-escura em avarias.css:
   sao identidade, como o logotipo -- so o CHAO da pagina e o FUNDO dos blocos brancos mudam, e
   esses dois continuam vindo de --avarias-pagina/--avarias-cartao, que ja fazem essa troca
   sozinhos (avarias.css, :root[data-tema] e @media prefers-color-scheme).
   r81 (03/10/2026), ORDEM DO PRESIDENTE de 02/10 ("se colocar modo escuro fica fundo verde"): a regra
   acima valia ate aqui para o CABECALHO, a faixa de titulo e a barra de baixo, e deixava as cinco telas
   com um retangulo verde-oliva por dentro no escuro. No escuro eles leem agora os degraus de superficie do
   painel (grafite neutro, croma zero), em um bloco unico logo abaixo da raiz; o lima do item ativo e o
   logotipo seguem como destaque. No claro nada mudou.
   ============================================================ */

.tela-avarias-celular {
  --avc-topo: #131a02;
  --avc-faixa-titulo: #182201;
  --avc-base: #192301;
  --avc-base-ativo: #2c3f01;
  --avc-avatar: #344a00;
  --avc-vermelho: var(--avarias-vermelho);
  /* Altura do CONTEUDO da barra de baixo, sem o recorte de baixo (a barra de gestos do iPhone).
     Nao e a altura medida crua da ficha (143px sobre um quadro de 1566px, ou seja, ~9% da altura
     da tela): aquele numero mistura escala de imagem gerada por IA com escala de CSS de verdade,
     e escalando pela largura real de um iPhone (390 a 440px) ele cai bem perto de 60-70px, que e
     tambem a faixa de uma barra de abas de aplicativo comum (iOS ~49pt + respiro, Android
     ~56-80dp). 60px da folga confortavel para o alvo de toque de 40px da regra 5 do portao. */
  --avc-base-altura: 60px;
  /* SECAO 9 do contrato: o par de colunas lado a lado de cada tela empilha por @container (a
     largura do RECIPIENTE), nunca por media query de janela. Aqui e onde a raiz de toda tela de
     celular vira um container de tamanho, para as cinco telas poderem escrever
     `@container (max-width: Npx) {...}` contra este elemento sem precisar declarar o proprio
     container cada uma na sua folha. */
  container-type: inline-size;
  /* 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). Aqui fica so o respiro de 16px; a reserva vai para o fim da pagina, logo
     abaixo. */
  padding-bottom: 16px;
}
/* r81: o escuro das cinco telas de celular, sem o verde-oliva fixo de antes (ver o cabecalho do arquivo). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tela-avarias-celular {
    --avc-topo: var(--superficie-2);
    --avc-faixa-titulo: var(--superficie-3);
    --avc-base: var(--superficie-2);
    --avc-base-ativo: var(--superficie-3);
    --avc-avatar: var(--superficie-3);
  }
}
:root[data-tema="escuro"] .tela-avarias-celular {
  --avc-topo: var(--superficie-2);
  --avc-faixa-titulo: var(--superficie-3);
  --avc-base: var(--superficie-2);
  --avc-base-ativo: var(--superficie-3);
  --avc-avatar: var(--superficie-3);
}

/* O FIM DA PAGINA RESERVA A BARRA: 74px (a altura dela abaixo de 420px de largura, a maior das
   duas) mais o recorte do iPhone. Literal porque `--avc-base-altura` mora dentro da tela e nao
   alcanca o rodape, que e irmao dela; `:has` porque o rodape e da casca e so recebe a reserva
   quando uma destas telas esta aberta. */
.conteudo:has(.tela-avarias-celular) > .rodape {
  padding-bottom: calc(74px + var(--recorte-base) + 8px);
}

/* ============================================================
   TETO DE LARGURA PARA TODA FIGURA DAS CINCO TELAS -- a regra que faltava (tarefa h03).

   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
   o James arrasta a tela de lado sem entender por que.

   POR QUE ELA PRECISA EXISTIR, se hoje nenhuma das cinco rola de lado (medido em 19/09/2026,
   390px e 440px, nos dois temas): porque hoje elas se seguram por tetos INDIVIDUAIS --
   `.avc-marca-rede` tem `max-width: 72px`, `.avc-pessoa-avatar svg` tem `width: 22px`, e assim
   por diante. Teto individual protege a figura que ALGUEM LEMBROU de proteger. A proxima <img>
   que entrar em qualquer uma das cinco telas nasce sem teto nenhum, e o defeito volta -- com a
   diferenca de que, da proxima vez, ele chega junto com uma tela nova e ninguem liga uma coisa
   a outra. Esta regra faz o teto ser o PADRAO, e nao uma lembranca.

   ESPECIFICIDADE ZERO, DE PROPOSITO (`:where()`): assim TODA regra ja escrita neste modulo
   continua ganhando desta. Sem o `:where()`, `.tela-avarias-celular img` (0,1,1) venceria
   `.avc-marca-rede` (0,1,0) e trocaria a altura cravada de 20px por `height: auto`, mudando a
   linha inteira do Top 5. Com `:where()` a regra vale (0,0,0): ela so age onde NINGUEM disse
   nada, que e exatamente o caso que ela existe para cobrir.

   `height: auto` SO NA <img>, nunca no <svg>: `<img>` precisa dele para manter a proporcao
   quando o teto de largura morde (sem ele a figura achata). Um `<svg>` de icone costuma ter
   largura e altura cravadas em par, e trocar a altura por `auto` num deles o faria colapsar --
   `icone()` devolve svg SEM tamanho de proposito (armadilha ja paga, secao 2.3 do contrato).

   E SE UM BLOCO PRECISAR SER MAIS LARGO DE PROPOSITO? Ele rola DENTRO do proprio recipiente,
   com `overflow-x: auto`, como a tabela ja faz. O corpo da pagina nunca rola de lado -- e a
   regra da casa, e `passoDaRolagemLateral` (scripts/testar-tela-avarias-celular.mjs) so acusa
   um elemento largo quando NENHUM pai dele rola.
   ============================================================ */
:where(.tela-avarias-celular) :where(img, svg) {
  max-width: 100%;
}
:where(.tela-avarias-celular) :where(img) {
  height: auto;
}

/* ============================================================
   TOPO: sanduiche + marca + sino + bloco de usuario (ou os dois blocos de pessoa, no promotor).
   Fundo escuro FIXO nos dois temas do painel (e identidade, ver cabecalho do arquivo), e
   `padding-top` devolve o espaco da Dynamic Island/entalhe em quem tem: sem isto, o conteudo do
   cabecalho nasce por baixo do recorte em todo iPhone com notch, porque `viewport-fit=cover`
   (index.html) manda a pagina desenhar de ponta a ponta.
   ============================================================ */
.avc-topo {
  align-items: center;
  background: var(--avc-topo);
  color: #fff;
  display: flex;
  gap: 8px;
  padding: calc(8px + var(--recorte-topo)) 10px 8px;
}
/* A MARCA CRESCE PARA OCUPAR O ESPACO ENTRE O SANDUICHE E AS ACOES. Selecionada por filho direto
   de `.avc-topo` para nunca alcancar o `.av-logo` da tela de COMPUTADOR (que mora dentro de
   `.av-cabecalho`, outro pai) -- as duas telas usam a mesma classe de estilo, nunca a mesma regra
   de layout. */
.avc-topo > .avc-topo-marca {
  flex: 1 1 auto;
  min-width: 0;
}
/* ABAIXO DE 400px O CABECALHO APERTA OS RESPIROS, NUNCA O CONTEUDO (r38, 27/09/2026). A 375 e a
   360 os tres blocos (menu, letreiro, sino e pessoa) somavam 378px e a PAGINA rolava de lado (391px
   numa tela de 375, 390 numa de 360; regra "largura" da auditoria de tela). Tirando 4px de cada
   vao e de cada recheio lateral, cabem sem cortar letra nem desenho. */
@media (max-width: 400px) {
  .avc-topo {
    gap: 4px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .avc-topo > .avc-topo-marca {
    padding-left: 8px;
    padding-right: 8px;
  }
  .avc-topo-acoes > .avc-usuario {
    padding-left: 4px;
    padding-right: 4px;
  }
}
.avc-topo-acoes {
  align-items: center;
  display: flex;
  flex: none;
  gap: 4px;
}
/* BOTAO-BASE dos tres controles do cabecalho (sanduiche, sino, usuario). 44x44 no minimo: NAO e
   um numero medido no dedo, e o tamanho de alvo de toque que a Apple pede na Human Interface
   Guidelines (44x44pt) e que o WCAG 2.2 (criterio 2.5.8, AA) tambem aceita como piso -- o Android
   (Material Design) pede 48x48dp, um degrau acima; 44 e o minimo que os dois aceitam. O numero
   antigo (40x40) nao tinha fonte nenhuma por tras, so "pareceu dar" num teste manual -- o portao
   de celular (scripts/medir-tela-comum.mjs) passou a cobrar 44x44 em todo botao de ACAO por causa
   disso. Os tres SAO botoes de verdade (regra 9 do contrato), mesmo quando o toque so revela uma
   frase honesta em vez de navegar -- ver o comentario de `avisoSemDestino` no arquivo JS, que
   explica por que nenhum dos tres tem destino real dentro do painel hoje. */
.avc-topo-botao {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  gap: 6px;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 6px 8px;
}
.avc-topo-botao:hover {
  background: rgba(255, 255, 255, 0.12);
}
.avc-topo-botao:focus-visible {
  outline: 2px solid var(--avarias-verde-na-faixa);
  outline-offset: 2px;
}
/* ARMADILHA JA PAGA (secao 2.3 do contrato): `icone()` devolve um svg SEM tamanho de proposito.
   Toda chamada nova precisa da PROPRIA regra de tamanho, ou ele sai gigante e empurra a pagina. */
.avc-topo-botao svg {
  flex: none;
  height: 22px;
  width: 22px;
}
.avc-sino {
  position: relative;
}
.avc-sino-contagem {
  align-items: center;
  /* #c62a24 e nao o vermelho da marca (r38, 27/09/2026): o "3" branco sobre #e63a33 dava 4,19:1 e a
     regua pede 4,5:1; o mesmo vermelho um passo mais escuro da 5,59:1. */
  background: #c62a24;
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  min-width: 16px;
  padding: 0 4px;
  position: absolute;
  right: 2px;
  top: 2px;
}
.avc-usuario-texto {
  display: grid;
  line-height: 1.15;
  text-align: right;
}
.avc-usuario-texto b {
  font-size: 12px;
  font-weight: 700;
}
.avc-usuario-texto span {
  font-size: 11px;
  opacity: 0.82;
}
/* Os dois avatares do promotor: um cheio (Promotor), um vazado/contorno (Coordenador), a mesma
   silhueta de pessoa (`icone("cliente")`, o unico icone de pessoa do conjunto compartilhado). */
.avc-pessoas {
  display: grid;
  gap: 3px;
}
.avc-pessoa {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.avc-pessoa-avatar {
  align-items: center;
  background: var(--avc-avatar);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: none;
  height: 22px;
  justify-content: center;
  width: 22px;
}
.avc-pessoa-avatar svg {
  height: 13px;
  width: 13px;
}
.avc-pessoa-avatar-vazado {
  background: transparent;
  border: 1.5px solid #fff;
}
.avc-pessoa-texto {
  display: grid;
  line-height: 1.05;
  text-align: right;
}
/* O CARGO SAI EM CAIXA NORMAL, e a linha `text-transform: uppercase` foi TIRADA daqui em
   19/09/2026 (tarefa b33), depois de a prova lado a lado mostrar a diferenca.

   O desenho do James escreve "Promotor" e "Coordenador" em caixa normal, e a ficha de extracao
   confirma: a secao de tipografia dela lista, pelo nome, os UNICOS textos em caixa alta daquela
   tela ("REDE ATENDIDA", o selo do logo, e a palavra "OCORRENCIAS" dentro de "Total de
   OCORRENCIAS"). Cargo nao esta nessa lista. O dado tambem nasce em caixa normal
   (`rotuloCargo: "Promotor"`, em assets/dados/avarias-exemplo.js): era so estilo, e estilo que
   gritava mais do que a foto pede.

   Caixa alta em rotulo de 9px e um padrao comum e defensavel, e foi por isso que entrou. Nao vale
   aqui pelo mesmo motivo que nada mais vale neste modulo: a fotografia e a especificacao. Quem
   quiser o caixa alta de volta muda o DESENHO primeiro.

   So a tela do promotor usa este bloco: `blocoPessoa()` (avarias-celular-casca.js, linha 161) e
   chamado num lugar so, a linha 177, com o promotor e o coordenador de `promotorQuinzena`. */
.avc-pessoa-texto b {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.82;
}
.avc-pessoa-texto span {
  font-size: 12px;
  font-weight: 700;
}

/* ============================================================
   FAIXA DE TITULO: icone grande + titulo/subtitulo empilhados + a caixa de periodo (ou `fim`).
   Fundo escuro, tambem identidade fixa nos dois temas.
   ============================================================ */
.avc-faixa-titulo {
  align-items: center;
  background: var(--avc-faixa-titulo);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 14px 12px;
}
.avc-faixa-titulo-icone {
  color: #fff;
  flex: none;
  height: 26px;
  width: 26px;
}
/* `flex-basis: 0` (o `0` depois dos dois `1`), E NAO `auto`, E O QUE EVITA UM ESTOURO DE VERDADE:
   MEDIDO no iPhone Air emulado de verdade (Playwright `devices["iPhone Air"]`, que carrega
   `defaultBrowserType: "webkit"` e muda como o Chromium desenha um `<input type="date">` nativo),
   com `flex: 1 1 auto` o algoritmo de flex usava a largura do TEXTO DO TITULO para decidir quanto
   sobrava para a caixa de periodo -- e "Devoluções e Recuperações" e comprido o bastante para nao
   sobrar espaco nenhum. Os dois `<input type="date">` nao encolhem (regra do navegador, um
   componente nativo tem piso proprio), entao a caixa de periodo vazava 2px para fora da tela
   (`.av-periodo` com `right: 422px` numa janela de 420px) -- 2px que bastam para o Chromium
   reportar `window.innerHeight` maior do que `document.documentElement.clientHeight` naquele
   aparelho especifico, e ISSO por sua vez fazia a regra 14 (base da barra) parecer 4px alem do
   limite, num defeito que na verdade nasce aqui, no titulo, nao na barra de baixo -- prova de que
   um estouro de 2px na largura pode disfarcar de estouro na altura em outro lugar da mesma tela.
   Com `flex-basis: 0`, o titulo entra no calculo de quebra valendo perto de zero e so CRESCE
   depois que a caixa de periodo (que nao encolhe, `flex: none` abaixo) ja tomou o espaco dela --
   o titulo fica mais estreito e quebra em mais linhas, o que e aceitavel (a fotografia mostra
   titulo e subtitulo empilhados, nunca disse quantas linhas). `flex-wrap: wrap` no pai continua
   como rede de seguranca para um titulo tao curto que nem essa conta bastasse. */
.avc-faixa-titulo-texto {
  display: grid;
  flex: 1 1 0;
  gap: 2px;
  min-width: 0;
}
.avc-faixa-titulo-texto h1 {
  font-size: clamp(15px, 4.4vw, 18px);
  font-weight: 800;
  margin: 0;
}
.avc-faixa-titulo-texto p {
  color: #dae1cb;
  font-size: clamp(11px, 3.2vw, 12.5px);
  margin: 0;
}
/* O QUE ENTRA NA DIREITA: por padrao (o `fim` que a tela do promotor poe no lugar da caixa de
   periodo, por exemplo o chip de meta) so encolhe se precisar e nunca estica -- a fotografia do
   promotor mostra esse chip do LADO do titulo, na mesma linha, e ele e pequeno o bastante para
   caber sem drama nenhum. Quem chama `faixaTitulo({ fim })` com um elemento largo demais e
   responsavel por dar a ele um tamanho razoavel, do mesmo jeito que `titulo`/`subtitulo` ja
   confiam que ninguem manda uma frase de 500 caracteres. */
.avc-faixa-titulo > *:last-child:not(.avc-faixa-titulo-texto) {
  flex: 0 1 auto;
  min-width: 0;
}
/* A CAIXA DE PERIODO (`.av-periodo`, o que `montarPeriodo()` desenha) E DIFERENTE, e vai para a
   PROPRIA LINHA sempre, embaixo de icone e titulo -- `flex-basis: 100%` num container em
   `flex-wrap: wrap` e o jeito padrao de forcar um item para uma linha nova, e aqui isso NAO E
   CAPRICHO DE LAYOUT, e o conserto de um estouro medido de verdade, especifico da caixa de
   periodo (nao do `fim` generico, que continua na regra de cima).
   TRES TENTATIVAS MAIS FRACAS FICARAM PARA TRAS, cada uma medida e descartada, porque a proxima
   pessoa que mexer aqui nao caia na mesma: (1) so `flex: none` na caixa de periodo -- ela nunca
   encolhia e vazava a tela; (2) `flex-basis: 0` so no bloco de titulo, esperando que o
   `flex-wrap: wrap` do pai jogasse periodo para a segunda linha sozinho quando nao coubesse --
   MEDIDO no Chromium (`devices["iPhone Air"]` do Playwright) que isso nao quebra linha nenhuma:
   os dois ficam na MESMA linha, o titulo e espremido a forca ("Devoluções e Recuperações" vira
   uma coluna de 44px de largura, uma letra por linha) e como os dois sao centralizados na
   vertical (`align-items: center`) o titulo, agora violentamente alto, EMPURRA a caixa de
   periodo para cima dele -- as duas caixas se sobrepondo na tela, achado so ao OLHAR A FOTO,
   nunca nos numeros (a pagina nao rola de lado nem estoura os 40px de alvo de toque, os dois
   portoes ficam verdes com a tela ilegivel); (3) deixar `.av-periodo` encolher
   (`flex: 0 1 auto; min-width: 0`, a MESMA regra generica de cima, sem a linha propria) e confiar
   no `.av-periodo-campos{flex-wrap:wrap}` que avarias.css ja da de graca (o mesmo
   `@media max-width:760px` que ajusta a tela de computador encolhida, e o seletor la nao e
   restrito a ela) -- MEDIDO que a caixa so encolhe ~64px (354 para 290) antes de parar (e o piso
   pratico de dois `<input type="date">` mostrando uma data inteira cada), e o titulo continua
   sem espaco (so 44px), a MESMA sobreposicao.
   O TITULO E O QUE JA ESTA CORRETO SOZINHO (`flex: 1 1 0`, acima): ele cresce para caber a
   LINHA INTEIRA quando periodo desce, e encolhe/quebra em mais linhas de texto (o que e normal
   e legivel, nao sobreposto) quando o titulo por si so e comprido. */
.avc-faixa-titulo > .av-periodo {
  flex-basis: 100%;
}
/* SUPRIME O ICONE NATIVO DO SEGUNDO `<input type="date">` (E DO PRIMEIRO), que o proprio
   navegador desenha sozinho na ponta de todo campo de data. ACHADO OLHANDO O PALCO (a propria
   secao "COMO VOCE PROVA" do contrato manda tirar foto e OLHAR): com os dois campos nativos MAIS
   o `icone("calendario")` que este arquivo desenha entre eles (`faixaTitulo()`, imitando
   `montarPeriodo()` de assets/js/telas/avarias.js), a linha de periodo saia com TRES icones de
   calendario -- um do navegador colado no fim do primeiro campo, o meu logo em seguida, e outro
   do navegador colado no fim do segundo campo. A fotografia do James mostra UM icone so. Isto e
   so meu (a marcacao e a de `faixaTitulo()`, meu arquivo), entao resolvo aqui: escondo o icone
   nativo dos dois campos e deixo so o `icone("calendario")` que eu mesmo desenho.
   /!\ O MESMO PADRAO (input + icone("calendario") + input) esta identico dentro de
   `montarPeriodo()` em assets/js/telas/avarias.js, que nao e meu para editar nesta rodada -- se o
   mesmo icone triplicado aparecer la, e o mesmo defeito, so que naquele arquivo. Registrado no
   relatorio final. */
.avc-faixa-titulo .av-periodo input::-webkit-calendar-picker-indicator {
  display: none;
}

/* ============================================================
   BARRA DE ABAS DO RODAPE. A PECA MAIS PERIGOSA DA CASCA (secao 4.1 do contrato, regra 14 do
   portao): 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)` -- o padding empurra os botoes para cima, o fundo
   continua ate a borda 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 (mesmo mecanismo de
   `--recorte-topo`, ja documentado em tokens.css). Prova de que a regra morde:
   scratchpad/_b32-casca-medir.mjs, rodado com `QUEBRAR_CSS='.avc-base{padding-bottom:0
   !important}'` para confirmar que o portao acusa vermelho quando este padding falta.
   ============================================================ */
.avc-base {
  background: var(--avc-base);
  inset: auto 0 0 0;
  padding-bottom: var(--recorte-base);
  position: fixed;
  z-index: 40;
}
.avc-base-itens {
  display: grid;
  /* Colunas iguais ao NUMERO DE ITENS recebido (o JS grava --avc-base-colunas), nao um "5"
     cravado aqui: os dois menus de exemplo tem 5 hoje, mas a barra nao pode quebrar sozinha se um
     sexto item aparecer amanha. O 5 do `var(..., 5)` e so o retrato de hoje, para o palco isolado
     funcionar mesmo sem o JS ter rodado ainda. */
  grid-template-columns: repeat(var(--avc-base-colunas, 5), 1fr);
  min-height: var(--avc-base-altura);
}
.avc-base-item {
  align-items: center;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  justify-content: center;
  min-width: 0;
  padding: 4px 2px;
}
/* `aria-disabled`, NUNCA `disabled`: o item sem destino continua focavel e continua respondendo
   ao toque com a frase honesta (regra 9 do contrato) -- um `<button disabled>` de verdade sairia
   do foco por Tab e o toque nao dispararia nada, que e exatamente o "controle pintado" que a
   regra proibe. A opacidade so avisa ao olho; quem usa leitor de tela ja ouve "desativado" pelo
   atributo, e a frase que aparece ao tocar completa os dois. */
.avc-base-item[aria-disabled="true"] {
  opacity: 0.62;
}
.avc-base-item:focus-visible {
  outline: 2px solid var(--avarias-verde-na-faixa);
  outline-offset: -2px;
}
/* O RECHEIO LATERAL DA PILULA E DE 4px, E NAO DE 12px, E ISSO FOI MEDIDO, nao escolhido por
   gosto. Num iPhone 17 Pro Max (440px) a barra tem cinco colunas de 88px; com 12px de cada lado
   sobravam 55px para o rotulo, e "Conta Corrente" precisa de 77px. Resultado medido na tela de
   verdade: quatro dos cinco rotulos saiam cortados com reticencias ("Conta C...", "Documen...",
   "Oportuni..."). Com 4px sobram 76px, e ai o que fecha a conta e o tamanho da letra, logo abaixo.
   A pilula do item ativo continua visivel: quem a desenha e o fundo mais claro, nao o recheio. */
.avc-base-pilula {
  align-items: center;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 100%;
  padding: 6px 4px;
}
.avc-base-item[aria-current="page"] .avc-base-pilula {
  background: var(--avc-base-ativo);
}
.avc-base-pilula svg {
  flex: none;
  height: 22px;
  width: 22px;
}
/* 10px, E O PORQUE E UMA MEDICAO SEGUIDA DE UMA REFERENCIA. A medicao: a 11px, "Conta Corrente"
   ocupa 77px e "Oportunidades" 74px, e a coluna do iPhone 17 Pro Max so oferece 76px depois do
   conserto do recheio acima -- os dois saiam cortados. A 10px eles caem para ~70px e cabem
   inteiros, numa linha so, como na fotografia do James. A referencia: a barra de abas do proprio
   iOS escreve o rotulo em 10pt, entao isto nao e letra miuda inventada por aperto, e o tamanho que
   o aparelho usa nesse lugar exato.
   O corte com reticencias FICA, mas como ultimo recurso e nao como mecanismo: se alguem
   acrescentar um sexto item ou um rotulo mais longo, e melhor cortar do que empurrar a barra e
   estourar a conta da area segura. O que nao pode e o corte ser o estado NORMAL, que era o caso. */
.avc-base-rotulo {
  font-size: 11px;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* NO CELULAR MAIS ESTREITO, O ROTULO QUEBRA EM DUAS LINHAS EM VEZ DE CORTAR. Medido a 390px, que
   e o menor aparelho que o portao visita: a coluna oferece 61px de rotulo, e "Conta Corrente"
   precisa de 70px e "Oportunidades" de 68px, mesmo ja com a letra em 10px e o recheio em 4px.
   Encolher mais a letra nao resolve (a 9px "Conta Corrente" ainda pede 63px) e passa a ser letra
   miuda de verdade.
   Entao aqui a tela PERDE ALTURA, nunca a palavra: e o mesmo criterio aplicado no resto deste
   modulo, e o motivo e que um rotulo de navegacao cortado ("Conta C...", "Oportunid...") deixa de
   dizer para onde o botao leva, que e a unica funcao dele.
   A 420px e acima nada disso vale: a fileira volta a ser uma linha so, como na fotografia.
   `--avc-base-altura` SOBE JUNTO, e isso nao e detalhe: e ela que a raiz da tela usa para reservar
   o espaco do ultimo bloco acima da barra (`padding-bottom`, no alto deste arquivo). Subir a barra
   sem subir a reserva esconderia o fim da tela atras dela, que e o defeito que esta barra existe
   para evitar. */
@media (max-width: 419.98px) {
  .tela-avarias-celular {
    --avc-base-altura: 74px;
  }
  /* O RECHEIO LATERAL DO ITEM VAI A ZERO AQUI, e isso e o que evita a quebra. Medido em
     20/09/2026 pelo portao novo `scripts/testar-quebra-de-linha.mjs`: a 390px o item tem 78px e o
     rotulo recebia 66px, enquanto "Oportunidades" pede 67,6px numa linha -- faltavam 1,6px e a
     palavra partia ao meio ("Oportuni / dades"), que e pior que as duas saidas que o comentario
     acima ja pesou. Os 2px de cada lado nao separam nada: quem separa um item do outro e o espaco
     vazio de 10px que sobra em volta do icone. */
  .avc-base-item {
    padding-left: 0;
    padding-right: 0;
  }
  /* COM A LETRA EM 11 px (r38, o piso da regua) "Oportunidades" pede ~74 px e a coluna igual tem 73:
     a palavra voltava a partir ao meio (testar-quebra-de-linha, R1). A coluna agora nunca fica mais
     estreita que a palavra mais comprida do proprio rotulo, e o que sobra continua dividido por igual. */
  .avc-base-itens {
    grid-template-columns: repeat(var(--avc-base-colunas, 5), minmax(min-content, 1fr));
  }
  .avc-base-rotulo {
    hyphens: none;
    line-height: 1.15;
    overflow-wrap: normal;
    text-align: center;
    text-overflow: clip;
    white-space: normal;
  }
}

/* A FRASE HONESTA DE QUEM NAO TEM DESTINO. Nasce vazia (`:empty` some por completo, ver abaixo) e
   fica ANCORADA no proprio `.avc-base` (`position: absolute`, `bottom: 100%`), nunca dentro da
   fileira de botoes -- assim ela nunca disputa altura com a math de safe-area acima, que e
   exatamente o tipo de acoplamento que ja mordeu esta casa uma vez. */
.avc-base-aviso {
  background: var(--avc-base-ativo);
  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;
}
.avc-base-aviso:empty {
  display: none;
}

/* ============================================================
   PAINEL: reaproveita `.av-painel` (fundo, borda, raio, padding e a grade auto/1fr/auto que ja
   cabe cabeca/corpo/pe, secao 2.1 do contrato). Nao reaproveita `.av-painel-cabeca`: aquela regra
   empurra o ULTIMO filho para a direita com `:last-child:not(:first-child)`, pensada para o
   cabecalho de tres filhos fixos da Analise por Produto, e aqui o chevron de atalho e OPCIONAL --
   com dois filhos (icone + titulos, sem chevron) aquela regra empurraria o bloco de titulos
   inteiro para a ponta direita. As tres linhas de flex abaixo sao mais baratas do que brigar de
   especificidade com uma regra escrita para outro caso.
   ============================================================ */
.avc-painel-cabeca {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}
.avc-painel-icone {
  align-items: center;
  background: var(--avarias-faixa-escura);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: none;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.avc-painel-icone svg {
  height: 16px;
  width: 16px;
}
.avc-painel-titulos {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}
.avc-painel-titulos h2 {
  font-size: clamp(13px, 3.8vw, 15px);
  font-weight: 700;
  margin: 0;
}
.avc-painel-complemento {
  color: var(--muted-foreground);
  font-size: 0.85em;
  font-weight: 500;
}
.avc-painel-subtitulo {
  color: var(--muted-foreground);
  font-size: clamp(11px, 3.2vw, 12px);
  margin: 0;
}
/* Botao de verdade, 44x44 (Apple HIG e WCAG 2.2 AA pedem esse minimo; Android pede 48x48, ver o
   comentario de `.avc-topo-botao` acima com a fonte completa) mesmo com o icone visivel sendo
   menor: a AREA de toque nao pode encolher para o tamanho do desenho. */
.avc-painel-atalho {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--avarias-texto);
  cursor: pointer;
  display: flex;
  flex: none;
  height: 44px;
  justify-content: center;
  margin-left: auto;
  width: 44px;
}
.avc-painel-atalho:hover {
  background: var(--avarias-cabecalho-coluna);
}
.avc-painel-atalho:focus-visible {
  outline: 2px solid var(--avarias-verde-na-faixa);
  outline-offset: 2px;
}
.avc-painel-atalho svg {
  height: 16px;
  width: 16px;
}
.avc-painel-corpo {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.avc-painel-pe {
  border-top: 1px solid var(--avarias-borda);
  padding-top: 8px;
}

/* ============================================================
   OS DEMAIS PRIMITIVOS COMPARTILHADOS.
   ============================================================ */
/* Chip de percentual (tabelas do promotor e das lojas). Bom/ruim reaproveita os MESMOS tokens
   semanticos globais que o resto do painel ja usa para status (tokens.css: --ok/--ok-fundo,
   --perigo/--perigo-fundo) -- eles ja trocam sozinhos entre os dois temas do painel, o que uma
   cor nova cravada aqui nao faria sem eu reescrever a mesma logica de novo (o "terceiro caminho"
   que o contrato pede para evitar). */
.avc-chip-percentual {
  border-radius: 999px;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  white-space: nowrap;
}
.avc-chip-percentual.bom {
  background: var(--ok-fundo);
  color: var(--ok);
}
.avc-chip-percentual.ruim {
  background: var(--perigo-fundo);
  color: var(--perigo);
}
/* SEM DADO NAO E RUIM (achado 8 da auditoria de 19/09/2026): uma loja sem venda medida no periodo
   (loja pequena, ou recem vinculada ao promotor) nao pode sair pintada de vermelho so porque a
   divisao que gera o percentual nao tinha denominador -- isso mostrava "Infinity%" com cor de
   alerta, como se a loja estivesse em crise, quando na verdade ninguem mediu nada ainda. `--muted`/
   `--muted-foreground` (tokens.css) sao os mesmos tons neutros que o resto do painel ja usa para
   "isto nao e nem bom nem ruim, so nao existe". */
.avc-chip-percentual.sem-dado {
  background: var(--muted);
  color: var(--muted-foreground);
}
.avc-selo-posicao {
  align-items: center;
  background: var(--avarias-cabecalho-coluna);
  border-radius: 50%;
  color: var(--avarias-texto);
  display: inline-flex;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  width: 22px;
}
/* A marca de uma rede: teto de altura E de largura (a mesma armadilha que `.av-logo img` ja
   resolve em avarias.css -- sem o teto de largura, o texto alternativo de uma imagem que falha
   estoura a celula/linha onde a marca mora). */
.avc-marca-rede {
  display: inline-block;
  height: 20px;
  max-width: 72px;
  object-fit: contain;
  vertical-align: middle;
  width: auto;
}
.avc-marca-rede-texto {
  color: inherit;
  font-weight: 600;
}

/* O TEXTO CORRIDO DAS CINCO TELAS NO COMPUTADOR (r38, 27/09/2026): a ordem do Carvalho de 26/09 manda
   a regua da Apple valer tambem no computador, e ela pede texto corrido de 13px ou mais. Todo <p>
   destas telas era de 11,5 a 12,5px (subtitulos, lemas, "Importante"); no computador todos vao a
   13, e no celular nada muda. O texto do banner "Entrega Padrao JAP" e um <span> e vai junto. */
@media (min-width: 700px) {
  .tela-avarias.tela-avarias-celular p,
  .tela-avarias.tela-avarias-celular td,
  .tela-avarias.tela-avarias-celular .avcd-banner-texto span {
    font-size: 13px;
  }
}

/* OS CARTOES DE NUMERO DE TRES TELAS NAO MUDAM COM O TEMA (fundos rosa, menta e creme medidos na
   foto, identidade como o letreiro), entao a seta "vs. mes anterior" dentro deles fica SEMPRE com a
   tinta do tema claro (r38, 27/09/2026). A tinta de texto do escuro (avarias.css) e para papel que
   escurece; aqui ela dava 2,0 a 2,8:1 sobre o cartao que continua claro. No claro: 4,6 a 5,1:1. */
.tela-avarias-celular :is(.avcd-kpi, .avcc-kpi, .avcp-kpi) .chip-variacao.ruim {
  color: #c62a24;
}
.tela-avarias-celular :is(.avcd-kpi, .avcc-kpi, .avcp-kpi) .chip-variacao.bom {
  color: #55740c;
}

/* r81 (03/10/2026): no escuro os tres cartoes de numero deixam de ser pastel (ver avarias-celular-*.css), entao a seta de cima
   volta a ler a tinta de texto do escuro, em vez da tinta escura fixa do claro (que sobre o grafite media 2,2 a 2,9:1). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tela-avarias-celular :is(.avcd-kpi,
  :root:not([data-tema="claro"]) .avcc-kpi,
  :root:not([data-tema="claro"]) .avcp-kpi) .chip-variacao.ruim {
    color: var(--avarias-vermelho-texto);
  }
  :root:not([data-tema="claro"]) .tela-avarias-celular :is(.avcd-kpi,
  :root:not([data-tema="claro"]) .avcc-kpi,
  :root:not([data-tema="claro"]) .avcp-kpi) .chip-variacao.bom {
    color: var(--avarias-verde-texto);
  }
}
:root[data-tema="escuro"] .tela-avarias-celular :is(.avcd-kpi,
:root[data-tema="escuro"] .avcc-kpi,
:root[data-tema="escuro"] .avcp-kpi) .chip-variacao.ruim {
  color: var(--avarias-vermelho-texto);
}
:root[data-tema="escuro"] .tela-avarias-celular :is(.avcd-kpi,
:root[data-tema="escuro"] .avcc-kpi,
:root[data-tema="escuro"] .avcp-kpi) .chip-variacao.bom {
  color: var(--avarias-verde-texto);
}