/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ============================================================
   AVARIAS E DEVOLUCOES: o visual das tres telas de computador, e os desenhos novos de grafico.

   DE ONDE VEM CADA COR DAQUI. Nao de escolha minha e nao da paleta do painel: cada hexadecimal
   abaixo foi AMOSTRADO PIXEL A PIXEL das tres fotografias que o James mandou em 18/09/2026, com
   Pillow, e esta anotado nas fichas de extracao (scratchpad/avarias-extracao-desktop-*.md). O
   padrao desta rodada, nas palavras do Carvalho, e que a tela saia IDENTICA a fotografia, e uma
   cor "parecida" tirada dos tokens do painel nao passaria nisso.

   POR QUE ISSO NAO BRIGA COM O TEMA DO PAINEL. As cores da marca e as das series (o verde do
   cabecalho, o vermelho do alerta, as cinco cores das redes, as sete da rosca de motivos) sao
   IDENTIDADE: nao mudam com o tema, do mesmo jeito que o logotipo nao muda. O que muda no escuro
   e so o chao da pagina e o fundo dos cartoes brancos, logo abaixo, para o texto continuar
   legivel. Quem trocar uma cor de serie aqui muda o que o portao compara com a foto.

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

   ONDE MORA O QUE. Este arquivo tem duas partes, e elas sao de donos diferentes:
     1. OS DESENHOS DE GRAFICO (rosca, barras horizontais, colunas com segundo eixo, colunas
        rotuladas, barra de celula). O codigo deles esta em `assets/js/grafico.js`, que e do
        painel inteiro -- o CSS mora aqui porque hoje so estas telas os usam. No dia em que outra
        tela pedir um deles, esta parte sobe para assets/css/componentes.css, junto de `.grafico`.
     2. A CASCA DAS TRES TELAS.
   ============================================================ */

/* ============================================================
   PARTE 1: OS DESENHOS DE GRAFICO
   ============================================================ */

/* ---------- rosca ---------- */
.grafico-rosca {
  position: relative;
  width: 100%;
}
.grafico-rosca svg {
  display: block;
  width: 100%;
  overflow: visible;
}
/* A TINTA DO TEXTO DE GRAFICO SAI DO TOKEN DO TEMA, e esta linha nasceu de um defeito P0 medido em
   20/09/2026 por `scripts/testar-tela-avarias-celular.mjs`: no tema escuro, OITO numeros da tela
   `avarias-celular-devolucoes` sumiam -- "R$ 28.430", "Total", "18,2 mil", "Jan", "21,5 mil",
   "Fev", "25,3 mil", "Mar", todos em `rgb(0, 0, 0)` sobre `rgb(11, 32, 22)`, contraste 1,23:1.
   A causa nao era cor errada: era AUSENCIA de cor. `<text>` de SVG nasce com `fill: black` por
   padrao, e estas regras so diziam `font-family` e `font-size`. No tema claro o preto funcionava
   por acidente (cartao claro); no escuro o cartao vira #181e0a e o preto desaparece.
   O numero mais importante do grafico deixava de existir para quem olha, sem um erro no console e
   sem nenhum portao de layout reclamar: caixa com tamanho, texto no DOM, tudo "certo". */
.grafico-rosca text {
  fill: var(--avarias-texto);
  font-family: var(--fonte);
}
/* O TRILHO E O QUE SOBRA quando nao ha o que repartir, e nesse caso ele E a resposta: um anel
   cinza inteiro, sem fatia nenhuma, diz "nao houve" sem inventar numero. */
.grafico-rosca .rosca-trilho {
  stroke: var(--border);
}
.grafico-rosca .rosca-fatia {
  transition: opacity var(--rapido) ease;
}
.grafico-rosca:hover .rosca-fatia {
  opacity: 0.78;
}
.grafico-rosca .rosca-fatia:hover {
  opacity: 1;
}
.grafico-rosca .rosca-centro {
  fill: var(--foreground);
  font-size: 15px;
  font-weight: 800;
}
.grafico-rosca .rosca-centro-apoio {
  fill: var(--muted-foreground);
  font-size: 11px;
  font-weight: 500;
}

/* ---------- fileira de barras horizontais ---------- */
/* AS QUATRO COLUNAS SAO DA FILEIRA INTEIRA, NAO DE CADA LINHA, e isto nasceu de um defeito
   MEDIDO: com cada linha sendo um `flex` proprio, a coluna do valor ficava mais larga na linha do
   maior numero ("R$ 10.120,00") do que nas outras ("R$ 3.590,00"), entao o TRILHO daquela linha
   ficava mais curto. Resultado na tela: a barra de R$ 10.120,00 media 182px e a de R$ 6.410,00
   media 121px, razao de 1,508, quando os numeros estao na razao de 1,579. A barra maior parecia
   4,5% menor do que deveria, e uma barra que nao e proporcional ao numero e um grafico mentindo.
   `subgrid` resolve na raiz: as quatro faixas nascem na FILEIRA e cada linha as herda, entao todo
   trilho tem exatamente a mesma largura e a razao entre duas barras e a razao entre os numeros.
   (`display: contents` faria o mesmo e apagaria o papel de lista de cada linha nos leitores de
   tela; subgrid mantem a linha como elemento de verdade.) */
.grafico-hbarras {
  display: grid;
  gap: 14px;
  /* O PISO DE 56px NO TRILHO, e ele nasceu de uma foto: num painel estreito o rotulo e o valor
     ("R$ 10.120,00") comiam a linha inteira e a barra virava um risco de quatro pixels. Barra que
     nao da para comparar a olho nao e grafico, e uma barra de 4px ao lado de outra de 2px nao diz
     nada. Com o piso, quem cede espaco e o ROTULO (que ja trunca com reticencias) e nao a barra,
     que e a unica parte da linha que existe para ser medida. */
  grid-template-columns: minmax(46px, auto) minmax(56px, 1fr) auto auto;
  width: 100%;
}
.hbarra {
  /* PELO CENTRO, nunca pela linha de base: o trilho e uma caixa sem texto, entao ele nao tem
     linha de base de verdade e `baseline` o joga para um lugar arbitrario. */
  align-items: center;
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
/* `min-width: 0` E O CONSERTO DA ARMADILHA NUMERO UM DO FLEXBOX (lista do Philip Walton): item
   flexivel nasce com `min-width: auto`, que quer dizer "nunca menor que a palavra mais comprida
   aqui dentro". Sem isto, nome de loja comprido recusa encolher e quem fica sem espaco e a
   BARRA -- o unico pedaco da linha que precisa de espaco para dizer alguma coisa. */
.hbarra-rotulo {
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
  max-width: 130px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hbarra-trilho {
  background: var(--muted);
  border-radius: 4px;
  height: 26px;
  min-width: 0;
  overflow: hidden;
}
.hbarra-preenche {
  border-radius: 4px;
  height: 100%;
}
.hbarra-fim {
  display: grid;
  justify-items: end;
  text-align: right;
}
.hbarra-valor {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 800;
}
.hbarra-apoio {
  color: var(--muted-foreground);
  font-size: 12px;
}

/* ---------- chip de variacao ---------- */
/* O CHIP E UMA GRADE DE DUAS LINHAS, e nao uma linha de texto: no desenho o "vs. mes anterior"
   fica EMBAIXO do "▲ 12,5%", nunca ao lado. Em linha unica ele empurrava o numero para a
   esquerda do cartao e virava um rodape de cinco palavras coladas no percentual. */
.chip-variacao {
  align-items: center;
  column-gap: 3px;
  display: inline-grid;
  font-size: 13px;
  font-weight: 700;
  grid-template-columns: auto auto;
  justify-content: start;
  white-space: nowrap;
}
.chip-variacao.ruim {
  color: var(--avarias-vermelho-texto);
}
.chip-variacao.bom {
  color: var(--avarias-verde-texto);
}
.chip-seta {
  font-size: 11px;
  line-height: 1;
}
.chip-base {
  color: var(--avarias-apoio-na-faixa);
  font-size: 11px;
  font-weight: 400;
  grid-column: 1 / -1;
}

/* ---------- colunas com linha num segundo eixo ---------- */
.grafico-colunas-linha,
.grafico-colunas-rotuladas {
  position: relative;
  width: 100%;
}
.grafico-colunas-linha svg,
.grafico-colunas-rotuladas svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.grafico-colunas-linha text,
.grafico-colunas-rotuladas text {
  fill: var(--avarias-texto);
  font-family: var(--fonte);
  font-size: 11px;
}
.grafico-colunas-linha .grade-linha {
  stroke: var(--avarias-grade);
  stroke-width: 1;
}
.grafico-colunas-linha .rotulo-x {
  fill: var(--muted-foreground);
}

/* ---------- colunas rotuladas ---------- */
.grafico-colunas-rotuladas .coluna-valor {
  fill: var(--foreground);
  font-size: 13px;
  font-weight: 800;
}
.grafico-colunas-rotuladas .coluna-apoio {
  fill: var(--muted-foreground);
  font-size: 11px;
  font-weight: 600;
}
.grafico-colunas-rotuladas .coluna-nome {
  fill: var(--foreground);
  font-size: 11px;
  font-weight: 600;
}

/* ---------- barra fina dentro de celula de tabela ----------
   ALTURA CRAVADA, e e o ponto todo deste desenho: ela nao pode mexer na altura da linha da
   tabela. Uma tabela de dez linhas com barra em cada uma, onde a barra empurra a linha, deixa de
   ser tabela densa. */
.barra-celula {
  background: transparent;
  border-radius: 3px;
  height: 10px;
  overflow: hidden;
  width: 100%;
}
.barra-celula-preenche {
  border-radius: 3px;
  height: 100%;
}

/* ============================================================
   PARTE 2: A CASCA DAS TRES TELAS

   AS MEDIDAS SAO PROPORCOES, NAO PIXELS DO DESENHO. As fotografias tem 1536 x 1024 px e a area de
   conteudo do painel, num monitor de 1440, tem ~1184 px: copiar pixel cravado deixaria tudo
   grande demais. O que foi copiado das fichas e a RAZAO entre os blocos (a faixa de cartoes vale
   0,0928 da altura, a coluna da esquerda vale 0,42 da largura, o vao entre cartoes vale 0,005 da
   largura) e e isso que as grades abaixo reproduzem. Cor, por outro lado, e copiada crua: cor nao
   tem proporcao.
   ============================================================ */

/* ---------- as cores das tres telas, amostradas pixel a pixel das fotografias ----------
   NOMES DIZEM O PAPEL, NAO O TOM ("--avarias-faixa-escura", nao "--avarias-verde-1"): o dia em
   que o James trocar o verde, quem edita procura pelo papel. */
.tela-avarias {
  /* chao e papel */
  --avarias-pagina: #f6f8f2;
  --avarias-cartao: #fefefe;
  --avarias-cabecalho-coluna: #f5f6f8;
  --avarias-linha-destacada: #fee8ea;
  /* Aviso de recorte incompleto (mes parcial). AMBAR, nunca vermelho: nao ha nada errado, ha um
     mes que ainda nao acabou. Vermelho aqui gastaria o alarme de que a tela vai precisar no dia
     em que houver problema de verdade. */
  --av-aviso-fundo: #fff8e6;
  --av-aviso-borda: #efd79e;
  --av-aviso-texto: #63490a;
  /* OS QUATRO FUNDOS CLAROS QUE FALTAVAM VIRAR TOKEN, e o portao de tema escuro foi quem achou:
     escritos crus, eles continuavam claros no escuro enquanto o texto por cima virava claro
     tambem, e o contraste caia para 1,01:1 -- ou seja, texto invisivel. Medido em seis lugares:
     a linha realcada da tabela de fornecedores, as duas faixas de titulo da Analise por Produto,
     e o botao de ordenacao nao escolhido. */
  --avarias-linha-destacada-verde: #e5f2c6;
  --avarias-faixa-debito: #ffebed;
  --avarias-faixa-credito: #ecf3dd;
  --avarias-botao-inativo: #fbfcfa;
  --avarias-borda: #e9ebe3;

  /* as faixas escuras: cabecalho, rodape e os cartoes de numero */
  --avarias-faixa-escura: #212f02;
  --avarias-cartao-escuro: #253401;
  --avarias-cartao-escuro-credito: #2a3a03;
  --avarias-botao: #3e5704;
  --avarias-botao-linha: #3e5900;
  --avarias-logo-fundo: #000000;

  /* texto */
  --avarias-texto: #1b230b;
  --avarias-texto-claro: #ffffff;
  --avarias-apoio-na-faixa: #c5cbb6;
  --avarias-texto-linha: #293238;

  /* subir e descer. EM DEVOLUCAO, SUBIR E RUIM: a cor vem de `melhorQuando`, nunca da seta. */
  --avarias-vermelho: #e63a33;
  --avarias-verde-alta: #769f15;
  /* A TINTA DE TEXTO DO SOBE-E-DESCE (r38, 27/09/2026). As duas cores acima sao identidade e
     continuam pintando barra, seta e icone; como LETRA sobre papel claro elas nao chegam a 4,5:1
     (o vermelho da 4,19:1 no branco, o verde 3,12:1), e a ordem do Carvalho de 26/09 manda a regua
     de contraste valer nestas telas. Mesma matiz, um passo mais escura no claro (5,6:1 e 5,4:1) e
     mais clara no escuro, logo abaixo. Nas faixas escuras (`.av-kpi`) a letra continua com as de
     cima, que la passam. */
  --avarias-vermelho-texto: #c62a24;
  --avarias-verde-texto: #55740c;
  --avarias-verde-na-faixa: #8cbb20;
  --avarias-brilho-vermelho: #521517;
  --avarias-brilho-verde: #354b00;
  --avarias-grade: #f1f3ed;
  --avarias-ouro: #f9c337;
}

/* ---------- TODO ICONE PRECISA DE TAMANHO, E ESTE CSS NAO DAVA ----------
   DEFEITO REAL, visto numa foto da tela montada em 19/09/2026: o `$` do cabecalho da janela, o
   icone de documento e o de camadas sairam com QUATROCENTOS PIXELS de altura, empurrando o
   conteudo da janela pagina abaixo. A causa: `icone()` (assets/js/ui.js) devolve um `<svg>` com
   `viewBox` e SEM largura nem altura, de proposito -- quem o usa e que manda no tamanho. O painel
   inteiro faz isso desde sempre, cada contexto com a sua regra (`.btn svg`, `.cartao-cab > svg`,
   `.busca svg`...). Estas telas nasceram sem nenhuma, e um `<svg>` sem tamanho dentro de uma
   caixa flexivel ocupa tudo o que puder.

   A LISTA E DOS CONTEXTOS, e nao um `svg` solto, por um motivo que custaria caro: os GRAFICOS
   tambem sao `<svg>`, e uma regra geral os encolheria para 16px. Contexto novo que precisar de
   icone entra aqui; ficar de fora aparece na hora, porque o icone volta a crescer. */
.tela-avarias :is(.av-lema, .av-periodo, .av-filtro, .av-botao, .av-ver-todos, .av-botao-linha, .av-botao-claro, .av-lateral-item, .av-dado, .av-secao-aviso, .av-painel-cabeca, .av-bloco-cabeca, .av-janela-cabeca, .av-fechar, .av-janela-pe, .av-aviso, .av-rodape-selo, .av-rodape-texto, .av-tabela) svg {
  flex: none;
  height: 16px;
  width: 16px;
}
/* os que sao maiores por desenho, cada um com a sua medida */
.tela-avarias .av-kpi-icone svg,
.tela-avarias .av-secao-icone svg,
.tela-avarias .av-painel-marca svg,
.tela-avarias .av-aviso-marca svg,
.tela-avarias .av-trofeu {
  flex: none;
  height: 55%;
  width: 55%;
}
.tela-avarias .av-secao-icone svg,
.tela-avarias .av-painel-marca svg,
.tela-avarias .av-aviso-marca svg {
  height: 15px;
  width: 15px;
}
.tela-avarias .av-trofeu {
  height: clamp(22px, 2vw, 30px);
  width: clamp(22px, 2vw, 30px);
}

/* ---------- a moldura da tela ----------
   FULL BLEED DE VERDADE: o cabecalho e o rodape do desenho sangram de ponta a ponta, sem recuo
   lateral, e o corpo entre eles tem 0,0091 L de recuo. O painel envolve a tela num `.recipiente`
   que ja tem recuo proprio, entao o negativo abaixo o desfaz -- e ele e em `--av-recuo` para nao
   ficarem dois numeros dizendo a mesma coisa em lugares diferentes. */
.tela-avarias {
  --av-recuo: clamp(10px, 0.95vw, 16px);
  /* minimo 9px, nao mais 6 (r38, 27/09/2026): o vao entre dois cartoes nao desce de 8px (regra
     "vao" da auditoria de tela); a 1440 ele dava 7,9px. */
  --av-vao: clamp(9px, 0.62vw, 10px);
  background: var(--avarias-pagina);
  color: var(--avarias-texto);
  display: grid;
  gap: 0;
  margin: calc(-1 * var(--av-recuo));
  padding: 0;
}
/* O TEMA ESCURO SEGUE O MECANISMO DO PAINEL, e nao o do navegador, e a diferenca entre os dois
   custou um portao vermelho. O painel tem TRES estados, definidos em assets/css/tokens.css e
   gravados por assets/js/inicio.js: `data-tema="claro"` e `data-tema="escuro"` quando a pessoa
   escolheu, e NENHUM atributo quando ela deixou em "auto" (so ai vale o `prefers-color-scheme`).
   E o padrao de quem nunca escolheu e `data-tema="claro"`.

   O QUE ACONTECIA com um `@media (prefers-color-scheme: dark)` solto, MEDIDO pelo portao: num
   navegador em modo escuro o painel ficava CLARO (porque `inicio.js` carimbou "claro") e so as
   cores DESTAS telas viravam escuras. O rotulo das barras saia em #1f2413, que e o texto do tema
   claro, sobre um cartao #181e0a, que e o fundo do tema escuro: contraste 1,07:1, texto invisivel.

   As duas regras abaixo sao as MESMAS DUAS de tokens.css, com o mesmo recorte, e e por isso que
   estas telas nao tem como divergir do resto do painel.
   NO ESCURO A PAGINA, O CARTAO, A FAIXA DO CABECALHO E OS CARTOES DE NUMERO LEEM OS TOKENS DE SUPERFICIE
   DO PAINEL (r81, 03/10/2026): grafite neutro, croma zero. Antes eram verde-oliva por dentro (#0f1406,
   #181e0a, #212f02) e, com a casca ao redor ja grafite, a tela inteira parecia um retangulo verde: a
   queixa do Presidente de 02/10/2026, "se colocar modo escuro fica fundo verde". O aviso de mes
   parcial usa o ambar semantico (`--tom-ambar*`). As cores de serie continuam identidade, do mesmo
   jeito que um logotipo nao muda de cor com o tema. Quem mede o croma e a regra `croma` da auditoria
   de tela, em toda tela. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tela-avarias {
    --avarias-pagina: var(--superficie-0);
    --avarias-cartao: var(--superficie-1);
    --avarias-cabecalho-coluna: var(--superficie-2);
    --avarias-linha-destacada: var(--tom-coral-fundo);
    --avarias-linha-destacada-verde: var(--tom-verde-fundo);
    --avarias-faixa-debito: var(--tom-coral-fundo);
    --avarias-faixa-credito: var(--tom-verde-fundo);
    --avarias-botao-inativo: var(--superficie-2);
    --avarias-borda: var(--border);
    --avarias-faixa-escura: var(--superficie-2);
    --avarias-cartao-escuro: var(--superficie-3);
    --avarias-cartao-escuro-credito: var(--superficie-3);
    --avarias-apoio-na-faixa: var(--muted-foreground);
    --avarias-grade: var(--border);
    --avarias-texto: var(--foreground);
    --avarias-texto-linha: var(--foreground);
    --av-aviso-fundo: var(--tom-ambar-fundo);
    --av-aviso-borda: var(--pontos);
    --av-aviso-texto: var(--tom-ambar);
    --avarias-vermelho-texto: var(--tom-coral);
    --avarias-verde-texto: var(--tom-verde);
  }
}
:root[data-tema="escuro"] .tela-avarias {
  --avarias-pagina: var(--superficie-0);
  --avarias-cartao: var(--superficie-1);
  --avarias-cabecalho-coluna: var(--superficie-2);
  --avarias-linha-destacada: var(--tom-coral-fundo);
  --avarias-linha-destacada-verde: var(--tom-verde-fundo);
  --avarias-faixa-debito: var(--tom-coral-fundo);
  --avarias-faixa-credito: var(--tom-verde-fundo);
  --avarias-botao-inativo: var(--superficie-2);
  --avarias-borda: var(--border);
  --avarias-faixa-escura: var(--superficie-2);
  --avarias-cartao-escuro: var(--superficie-3);
  --avarias-cartao-escuro-credito: var(--superficie-3);
  --avarias-apoio-na-faixa: var(--muted-foreground);
  --avarias-grade: var(--border);
  --avarias-texto: var(--foreground);
  --avarias-texto-linha: var(--foreground);
  --av-aviso-fundo: var(--tom-ambar-fundo);
  --av-aviso-borda: var(--pontos);
  --av-aviso-texto: var(--tom-ambar);
  --avarias-vermelho-texto: var(--tom-coral);
  --avarias-verde-texto: var(--tom-verde);
}

/* r81: o menu lateral que a tela desenha por dentro era #233101 (verde-oliva fixo); no escuro le o grafite do painel. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tela-avarias .av-lateral {
    background: var(--superficie-2);
  }
}
:root[data-tema="escuro"] .tela-avarias .av-lateral {
  background: var(--superficie-2);
}

/* ---------- cabecalho sangrado ---------- */
.av-cabecalho {
  align-items: center;
  background: var(--avarias-faixa-escura);
  color: var(--avarias-texto-claro);
  display: grid;
  gap: clamp(12px, 1.6vw, 28px);
  grid-template-columns: auto 1fr auto auto;
  padding: 10px var(--av-recuo);
}
/* O BLOCO PRETO DO LOGO. No desenho ele e um retangulo preto com a marca "JAP FRUTAS" dentro, e
   ESSA MARCA NAO EXISTE: o gerador de imagem a inventou. A pasta da marca tem duas de verdade
   (assets/img/redes/), entao aqui vai a marca real com as palavras compostas em tipo, que e o que
   o pedido manda -- nunca um logotipo desenhado a mao. */
.av-logo {
  align-items: center;
  align-self: stretch;
  background: var(--avarias-logo-fundo);
  border-radius: 4px;
  display: flex;
  gap: 8px;
  padding: 6px 12px;
}
/* TETO DE LARGURA, e nao so de altura. Quando o arquivo do logotipo nao carrega, o navegador
   desenha o TEXTO ALTERNATIVO no lugar da imagem, e ele nao obedece a altura: a caixa preta
   inchou e comeu metade do cabecalho na primeira foto. Com o teto, uma imagem que falta encolhe
   em vez de estourar o desenho. */
.av-logo img {
  display: block;
  font-size: 9px;
  height: clamp(26px, 2.4vw, 36px);
  max-width: clamp(60px, 7vw, 110px);
  object-fit: contain;
  overflow: hidden;
  width: auto;
}
.av-logo-palavras {
  display: grid;
  line-height: 1.05;
}
.av-logo-nome {
  color: #fff;
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.av-logo-assinatura {
  color: #bfd292;
  font-size: clamp(7px, 0.62vw, 9px);
  letter-spacing: 0.02em;
}
.av-logo-selo {
  color: #dae1cb;
  font-size: clamp(7px, 0.6vw, 9px);
  letter-spacing: 0.08em;
}
/* `min-width: 0` PARA O TITULO PODER ENCOLHER: sem ele o `1fr` do meio nunca fica menor que a
   frase mais comprida, e quem cede espaco sao os vizinhos -- o titulo saia em tres linhas com o
   logotipo espremido do lado. `text-wrap: balance` reparte as duas linhas em vez de deixar uma
   palavra sozinha embaixo, quando ele precisa mesmo quebrar. */
.av-titulo {
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 0;
  text-align: center;
}
.av-titulo h1 {
  text-wrap: balance;
}
.av-titulo h1 {
  font-size: clamp(19px, 2.1vw, 31px);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
}
.av-titulo p {
  color: #dae1cb;
  font-size: clamp(11px, 1.15vw, 17px);
  margin: 0;
}
.av-lema {
  align-items: center;
  display: flex;
  gap: 10px;
}
.av-lema-texto {
  display: grid;
  font-size: clamp(11px, 0.95vw, 14px);
  line-height: 1.35;
}
.av-lema-texto b {
  font-weight: 700;
}
.av-periodo {
  border: 1px solid #59741b;
  border-radius: 6px;
  display: grid;
  gap: 2px;
  padding: 6px 12px;
}
.av-periodo-rotulo {
  color: #dae1cb;
  font-size: 11px;
}
.av-periodo-campos {
  align-items: center;
  display: flex;
  gap: 6px;
}
.av-periodo input {
  background: transparent;
  border: 0;
  color: #fff;
  color-scheme: dark;
  font-family: inherit;
  font-size: clamp(11px, 1vw, 14px);
  padding: 0;
}
.av-periodo input:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--avarias-verde-na-faixa);
  outline-offset: 2px;
}
/* ESCONDE O CALENDARIO QUE O PROPRIO NAVEGADOR DESENHA na ponta de CADA campo de data. FOTOGRAFADO
   em scratchpad/_b32-periodo-avarias.png: com os dois indicadores nativos MAIS o icone que
   `montarPeriodo()` (e as telas irmas) desenham entre os campos, a linha saia com TRES icones de
   calendario -- a fotografia do James (scratchpad/_b32-periodo-avarias-celular-inicio.png) tem UM
   so. So esconder os dois, sem outro jeito de abrir o calendario, criaria um segundo defeito
   (ver `.av-periodo-abrir` abaixo): por isso as duas regras andam juntas, uma nunca sem a outra. */
.av-periodo input::-webkit-calendar-picker-indicator {
  display: none;
}
/* O BOTAO QUE SUBSTITUI O INDICADOR ESCONDIDO ACIMA. No Chromium, com MOUSE, quem abre o
   calendario e exatamente aquele indicador nativo -- clicar no texto do campo nao abre nada.
   Escondê-lo sem dar outro alcance deixaria o James sem jeito de abrir o calendario no
   computador; este botao chama `showPicker()` no campo de inicio, o mesmo alcance que o
   indicador tinha. Reseta a aparencia padrao de `<button>` para o icone ficar identico ao
   desenho parado que havia antes (mesma cor herdada, mesmo tamanho de 16px, dado pela regra de
   icones deste arquivo).

   A ALTURA REAL DO BOTAO PRECISA CHEGAR A 44px (numero subiu de 40 para 44 em 20/09/2026, conserto
   F da auditoria: `scripts/medir-tela-comum.mjs` passou a exigir 44x44, e 40 nunca teve fonte
   nenhuma), mas SEM empurrar `.av-periodo-campos` para uma linha mais alta -- a faixa de periodo
   ja e apertada no celular, e uma caixa de periodo mais alta reabriria a sobreposicao com o titulo
   que a ficha de extracao mobile documentou e corrigiu (ver o comentario grande de
   `.avc-faixa-titulo > .av-periodo` em avarias-celular.css). MEDIDO (scratchpad/_b32-calendario-
   sonda-margem-negativa.mjs) que um `::after` absoluto NAO resolve: `getBoundingClientRect()` do
   proprio botao, que e o que o portao le, ignora pseudo-elemento por fora do fluxo -- so cresce
   com padding de verdade. A saida e o padding de verdade (14px em cima e embaixo, que fecha 16px
   do icone + 14+14 = 44px) somado a uma margem negativa do mesmo tamanho (-12px em cima e embaixo),
   que devolve a CONTRIBUICAO do botao na linha do flex ao valor de antes (20px, os mesmos 16px do
   icone com os 2px de padding que ja existiam) -- o botao mede 44px sozinho, mas a linha ao redor
   dele nao muda nem 1px.

   SO O EIXO VERTICAL MUDA, e ISTO E UM CORTE DELIBERADO (ponytail: teto conhecido). O portao agora
   cobra largura tambem (44px, nao so altura), e este botao continua com ~20px de largura -- abaixo
   do minimo. NAO alarguei: repetir o mesmo truque de margem negativa no eixo horizontal invadiria
   os 6px de vao ATE OS DOIS CAMPOS DE DATA VIZINHOS e ficaria sobrepondo a caixa deles (medido:
   com padding de 14px dos dois lados e margem de -12px para compensar, a sobra invade 6px dentro
   de cada `<input type=date>` ao lado -- clique perto da borda do campo passaria a abrir o
   calendario em vez de focar o campo). Consertar direito pede redesenhar a faixa de periodo inteira
   (dar mais respiro entre os tres controles, ou tirar o icone do meio da fileira), decisao de quem
   for mexer no layout do cabecalho -- nao cabe dentro de um ajuste de CSS pontual. */
.av-periodo-abrir {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: -12px 0;
  /* 6px dos lados, nao mais 2 (r38, 27/09/2026): o botao fica com 28px de largura, o piso de clique
     do computador, SEM margem negativa de lado; quem cede e a fileira, que fica 8px mais larga, e
     nao os campos vizinhos (o problema descrito no comentario acima). */
  padding: 14px 6px;
}
.av-periodo-abrir:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--avarias-verde-na-faixa);
  outline-offset: 2px;
}

/* ---------- a fileira de filtros ----------
   COLUNAS DE LARGURA IGUAL, e o botao de largura fixa colado a direita: e o que a ficha mediu
   (oito colunas de ~155px mais um botao de ~125px). `repeat(auto-fit, minmax(...))` faz as oito
   caberem e quebrarem sozinhas quando a tela estreita, sem media query por quantidade. */
.av-filtros {
  align-items: end;
  background: var(--avarias-cartao);
  border-bottom: 1px solid var(--avarias-borda);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  padding: 10px var(--av-recuo);
}
.av-filtro {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.av-filtro > span {
  color: var(--avarias-texto);
  font-size: clamp(11px, 0.85vw, 12px);
  font-weight: 600;
}
.av-filtro select {
  background: var(--avarias-cartao);
  border: 1px solid #daded2;
  border-radius: 5px;
  color: var(--avarias-texto);
  font-family: inherit;
  font-size: clamp(11px, 0.9vw, 13px);
  min-width: 0;
  padding: 7px 8px;
  width: 100%;
}
.av-botao {
  align-items: center;
  background: var(--avarias-botao);
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  padding: 9px 16px;
}
.av-botao:hover {
  filter: brightness(1.14);
}
.av-botao:focus-visible {
  outline: 2px solid var(--avarias-verde-na-faixa);
  outline-offset: 2px;
}

/* ---------- a faixa de cartoes de numero ---------- */
.av-kpis {
  display: grid;
  gap: var(--av-vao);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  padding: var(--av-vao) var(--av-recuo);
}
/* O CARTAO E UM CONTAINER, e o numero dele mede pela largura DO CARTAO. Defeito visto na foto:
   "R$ 125.430,50" saiu como "R$ 125.430,5" e "R$ 78.250,00" como "R$ 78.250,0" -- cortados no meio
   do centavo. A causa e a mesma de sempre: o tamanho vinha de `1.5vw`, que pergunta a largura da
   JANELA. Num navegador de 1440px isso da 21,6px, e o cartao tem 190px porque sao SEIS cartoes
   dividindo o que sobra depois do menu. Numero de dinheiro cortado e pior que numero pequeno: o
   James le "R$ 125.430,5" e nao tem como saber que faltou um algarismo.
   `cqi` e 1% da largura do container, entao agora o numero encolhe com o cartao e nao com a tela. */
.av-kpi {
  align-items: center;
  background: var(--avarias-cartao-escuro);
  border-radius: 7px;
  color: #fff;
  container-type: inline-size;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 10px 12px;
  position: relative;
}
.av-kpi.credito {
  background: var(--avarias-cartao-escuro-credito);
}
/* O BRILHO ATRAS DO ICONE. No desenho e um halo radial, vermelho nos cartoes de debito e verde
   nos de credito, e ele fica ATRAS do icone, nao em volta do cartao. Em `::before` para nao
   entrar na conta do grid e nao empurrar nada. */
.av-kpi-icone {
  align-items: center;
  border-radius: 50%;
  display: flex;
  flex: 0 0 auto;
  height: clamp(32px, 3vw, 44px);
  justify-content: center;
  position: relative;
  width: clamp(32px, 3vw, 44px);
}
.av-kpi-icone::before {
  background: radial-gradient(circle, var(--avarias-brilho-verde) 0%, transparent 72%);
  border-radius: 50%;
  content: "";
  inset: -30%;
  position: absolute;
}
.av-kpi.debito .av-kpi-icone::before {
  background: radial-gradient(circle, var(--avarias-brilho-vermelho) 0%, transparent 72%);
}
.av-kpi-icone svg {
  height: 55%;
  position: relative;
  width: 55%;
}
.av-kpi-corpo {
  display: grid;
  gap: 1px;
  min-width: 0;
}
/* PALAVRA COMPRIDA NO ROTULO QUEBRA DENTRO DO CARTAO (r38, 27/09/2026): com o rotulo e o pe no piso
   de 11px (eram 9 e 9,5), o cenario "gigante" do portao de cenarios passou 2px da borda do cartao,
   que corta (`overflow: hidden`). So as duas linhas de texto; o numero continua inteiro. */
.av-kpi-rotulo {
  overflow-wrap: anywhere;
}
/* O PE LEVA DINHEIRO ("R$ 8.620,00"), e `anywhere` partia o numero ao meio e separava o R$ do valor (r128, 09/10/2026,
   testar-quebra-de-linha.mjs na Analise por Produto a 1024px). `break-word` so quebra a palavra que nao cabe sozinha
   numa linha: o numero desce inteiro, e a palavra comprida do cenario "gigante" continua quebrando dentro do cartao
   (o `min-width: 0` do corpo deixa a coluna encolher). */
.av-kpi-pe {
  overflow-wrap: break-word;
}
.av-kpi-rotulo {
  color: #e4e9da;
  font-size: clamp(11px, 5.6cqi, 12px);
  font-weight: 600;
}
.av-kpi-valor {
  font-size: clamp(13px, 9.2cqi, 22px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.av-kpi-valor.destaque-verde,
.av-kpi-segundo.destaque-verde {
  color: #9bda78;
}
.av-kpi-segundo {
  font-size: clamp(11px, 7.4cqi, 17px);
  font-weight: 700;
}
.av-kpi-pe {
  color: var(--avarias-apoio-na-faixa);
  font-size: clamp(11px, 5cqi, 11px);
}
/* Dentro da faixa escura o chip nao pode usar o vermelho de fundo claro: ele some. */
.av-kpi .chip-variacao.ruim {
  /* #ff7a70, nao mais #f31a1d (r38, 27/09/2026): no cartao escuro de credito o vermelho de antes dava
     2,9 a 3,2:1, e a regua pede 4,5:1; o mesmo vermelho mais claro da 4,85:1 no pior dos cartoes. */
  color: #ff7a70;
}
.av-kpi .chip-variacao.bom {
  color: #8dc900;
}
.av-kpi .chip-base {
  color: var(--avarias-apoio-na-faixa);
}
.av-kpi-rosca {
  align-items: center;
  display: flex;
  gap: 10px;
}
.av-kpi-rosca .grafico-rosca {
  flex: 0 0 auto;
  width: clamp(44px, 4vw, 60px);
}
/* O CARTAO DE % RECUPERACAO SEM NUMERO, quando o filtro de Fornecedor/Comprador esta ativo
   (achado 5 da auditoria de 19/09/2026, conserto em avarias-conta-corrente.js). Sem anel e sem
   segunda coluna: `.av-kpi` normal reserva a coluna `auto` do icone/anel, e um cartao com so a
   frase de explicacao dentro dela ficaria com o rotulo ilhado numa faixa estreita. Aqui a grade
   vira uma coluna so, do tamanho do cartao inteiro. */
.av-kpi.av-kpi-sem-numero {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- paineis brancos ---------- */
/* A FILEIRA DE PAINEIS E UMA FILEIRA, E ESTA REGRA NAO DIZIA ISSO. Defeito visto na foto da tela
   de Devolucoes e Avarias: os quatro paineis de grafico e os quatro de pessoas sairam um EMBAIXO
   do outro, e a pagina foi de 1024px para 3621px de altura. A regra tinha `display: grid` e
   nenhuma coluna, o que em grade quer dizer UMA coluna. O desenho tem quatro.

   `auto-fit` com piso de 250px, e nao "quatro colunas" cravadas, por duas razoes: a fileira de
   graficos tem quatro paineis e a de pessoas tambem, mas nada garante que a proxima tenha -- e
   numa largura em que quatro nao cabem, quatro colunas de 140px seriam quatro paineis ilegiveis
   em vez de dois legiveis. O piso de 250px e a largura em que uma mini-tabela de cinco colunas
   ainda cabe sem rolar.
   A fileira e um CONTAINER para os paineis dentro dela poderem se reorganizar pela largura que
   receberam de verdade, e nao pela da janela do navegador. */
.av-paineis {
  container-type: inline-size;
  display: grid;
  gap: var(--av-vao);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  padding: var(--av-vao) var(--av-recuo);
}
/* Painel que precisa de fileira inteira (um grafico largo, uma tabela de muitas colunas) pede. */
.av-paineis > .av-painel.largura-toda {
  grid-column: 1 / -1;
}
.av-painel {
  background: var(--avarias-cartao);
  border: 1px solid var(--avarias-borda);
  border-radius: 7px;
  display: grid;
  gap: 8px;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  padding: 10px 12px;
}
/* O `min-width: 0` TEM DE DESCER, e nao basta no painel. Corrigir so a coluna empurrava o estouro
   um nivel para dentro: a janela parou de passar da pagina e passou a deixar os botoes "Abrir
   Nota" pendurados para fora dela. Todo elemento de grade e de caixa flexivel nasce com minimo
   AUTO -- ou seja, nunca menor que o conteudo --, entao o conserto tem de valer para cada degrau
   entre a coluna e a tabela. `:where()` nao soma especificidade nenhuma, entao nada aqui atropela
   uma regra escrita de proposito mais abaixo. */
.tela-avarias :where(.av-coluna, .av-painel, .av-janela, .av-bloco, .av-dado, .av-janela-resumo, .av-bloco-corpo, .av-tabela-caixa, .av-painel-cabeca, .av-kpi, .av-kpi-corpo, .av-legenda, .av-legenda-linha) > * {
  min-width: 0;
}
.tela-avarias :where(.av-janela, .av-bloco, .av-coluna, .av-tabela-caixa) {
  min-width: 0;
}
/* O ICONE ABRACA O TITULO, E O CONTROLE VAI PARA A DIREITA. Com `justify-content: space-between`
   e tres filhos (icone, titulo, botao de ordenar), o espaco sobrava ENTRE o icone e o titulo, e o
   cabecalho saia com o emblema solto numa ponta -- diferente da fotografia, onde os dois estao
   colados. Apontado por quem construiu a Analise por Produto, que nao podia consertar porque o
   arquivo nao e dele. `margin-left: auto` no ULTIMO filho, e so quando ele nao e tambem o
   primeiro, empurra so o controle: com dois filhos (icone e titulo) nada e empurrado, com tres o
   terceiro encosta na direita. Nao precisa de classe nova nem de estilo em linha. */
.av-painel-cabeca {
  align-items: start;
  display: flex;
  /* QUEBRA QUANDO NAO CABE (r38, 27/09/2026): a 360px os botoes "Valor (R$)" e "Volume (kg)" ao
     lado do titulo passavam 6px da borda do cartao (regra "vaza" da auditoria de tela). Quebrando,
     eles descem inteiros para a linha de baixo; onde cabe, nada muda. */
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}
.av-painel-cabeca > :last-child:not(:first-child) {
  margin-left: auto;
}
.av-painel h2,
.av-painel h3 {
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 700;
  margin: 0;
}
.av-painel-apoio {
  color: var(--muted-foreground);
  display: block;
  font-size: clamp(11px, 0.82vw, 12px);
  font-weight: 400;
}

/* ---------- legenda de rosca: ponto, nome, e o numero encostado a direita ---------- */
.av-legenda {
  display: grid;
  gap: 6px;
  min-width: 0;
}
/* O NOME DA FATIA NAO PODE SAIR COMO "Boni…". Foi o que a primeira foto mostrou: num painel
   estreito a coluna do valor levava tudo e sobravam quatro letras para o nome, que e justamente a
   parte que diz o que a fatia e. O piso de 84px garante o nome; quem cede espaco e o valor, que
   ja tem o proprio numero grande e pode quebrar a porcentagem para a linha de baixo. */
.av-legenda-linha {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 8px minmax(84px, 1fr) auto;
}
.av-legenda-ponto {
  border-radius: 50%;
  height: 8px;
  width: 8px;
}
.av-legenda-nome {
  color: var(--avarias-texto);
  font-size: clamp(11px, 0.85vw, 12px);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* NA FORMA EMPILHADA O NOME QUEBRA EM VEZ DE TRUNCAR, e essa e a diferenca que importa: o nome da
   fatia E a informacao da legenda. "Bonifi…" nao diz nada, e uma legenda que nao diz o que a fatia
   e nao e legenda. Duas linhas custam 13px de altura; truncar custa o sentido. */
.av-legenda.empilhada .av-legenda-nome {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.av-legenda-valor {
  font-size: clamp(11px, 0.85vw, 12px);
  font-weight: 700;
}
.av-legenda-valor small {
  color: var(--muted-foreground);
  display: block;
  font-size: 0.85em;
  font-weight: 400;
}

/* ---------- AS DUAS FORMAS DE LEGENDA, e o desenho usa UMA DE CADA ----------
   Nao e gosto: sao dois blocos diferentes nos desenhos do James, e copiar so uma delas deixa a
   outra tela diferente da foto.

   PADRAO, em uma linha (tela "Devolucoes e Avarias", rosca de Motivos): ponto, nome, e a
   porcentagem encostada a direita. Cabe porque aquele painel e largo e o valor e curto ("38,2%").

   `.empilhada`, em duas linhas (tela "Conta Corrente", rosca de Tipo de Credito): ponto e nome em
   cima, valor e porcentagem embaixo. E o que o desenho tem, e e o que cabe: naquele painel o nome
   e comprido ("Bonificacao (produto)") e o valor tambem ("R$ 8.500,00 (42,3%)"), e os dois na
   mesma linha so caberiam truncando o nome, que e justamente a parte que diz o que a fatia e. */
.av-legenda.empilhada {
  gap: 10px;
}
.av-legenda.empilhada .av-legenda-linha {
  column-gap: 8px;
  grid-template-columns: 8px minmax(0, 1fr);
  row-gap: 1px;
}
.av-legenda.empilhada .av-legenda-valor {
  grid-column: 2;
  text-align: left;
}
.av-legenda.empilhada .av-legenda-valor small {
  display: inline;
  margin-left: 3px;
}

/* A ROSCA A ESQUERDA E A LEGENDA A DIREITA, quando as duas moram no mesmo painel. E o arranjo do
   desenho da Conta Corrente, e ele nasce sozinho de quem tem os dois elementos irmaos: nao ha
   classe nova para o construtor lembrar de por. Abaixo de 320px o painel volta a empilhar, porque
   ai a rosca ficaria com 90px e a legenda com 100px, e nenhuma das duas serviria para nada. */
.av-painel:has(> .grafico-rosca + .av-legenda) {
  align-items: center;
  /* O PISO PASSOU DE 120 PARA 168px NA INTEGRACAO DA PUBLICACAO 1 (03/10/2026): a letra minima de grafico agora e 12 px
     (r84-graficos), e "Total Recuperado" a 12 px pede um buraco de uns 96 px, que so existe numa rosca de uns 168 px; com
     120 px o rotulo saia cortado ("Total Recup...") e testar-avarias-contra-o-desenho reprovava.
     O PISO ANTIGO, de 120px, NAO E ESTETICA: o rotulo do centro ("R$ 20.240,00") tem de caber no BURACO
     da rosca, que e `2*raio - espessura`. Com 96px de largura o buraco fica em ~44px e o texto
     sai por cima do anel nas duas pontas -- e o proprio portao reprova isso (o passo "o texto do
     centro cabe no buraco"). 120px de rosca dao ~68px de buraco, que e o que aquele texto pede. */
  grid-template-columns: minmax(168px, 38%) minmax(0, 1fr);
  grid-template-rows: auto auto;
}
.av-painel:has(> .grafico-rosca + .av-legenda) > .av-painel-cabeca {
  grid-column: 1 / -1;
}
@container (max-width: 320px) {
  .av-painel:has(> .grafico-rosca + .av-legenda) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- tabelas ----------
   CABECALHO QUE GRUDA E ROLAGEM HORIZONTAL PROPRIA: a tabela de ocorrencias do desenho tem QUINZE
   colunas, e quinze colunas nao cabem em monitor nenhum sem rolar. Quem rola e a caixa da tabela,
   nunca o corpo da pagina: `overflow-x: auto` aqui dentro e o que impede a pagina inteira de
   ganhar barra horizontal, que e o defeito classico de tabela larga. */
.av-tabela-caixa {
  border-radius: 6px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}
.av-tabela {
  border-collapse: collapse;
  font-size: clamp(11px, 0.85vw, 12.5px);
  width: 100%;
}
.av-tabela th,
.av-tabela td {
  border-bottom: 1px solid var(--avarias-borda);
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
}
/* O ROTULO DE COLUNA NUMERICA EM NO MAXIMO DUAS LINHAS (r38): com a letra no piso de 11 px, "Valor
   Recuperado (R$)" caia em tres linhas a 390 e "Vol. Dev. (t)" em tres a 1024 (testar-quebra-de-linha,
   R2). A coluna fica pelo menos do tamanho das duas primeiras palavras; a unidade desce sozinha. */
.av-tabela[data-tabela="fornecedores"] th.num {
  min-width: 10.2em; /* "Valor Recuperado" inteiro na primeira linha, com os 8 px de recheio de cada lado */
}
.av-tabela:is([data-tabela="top-produtos"], [data-tabela="ranking-lojas"]) th.num {
  min-width: 5em;
}
/* e nessas duas tabelas estreitas o recheio lateral vai a 5 px, para a coluna do produto nao pagar a
   largura que o rotulo ganhou ("JAP Tomate Longa Vida" em tres linhas a 1024, R2) */
.av-tabela:is([data-tabela="top-produtos"], [data-tabela="ranking-lojas"]) :is(th, td) {
  padding-inline: 5px;
}
/* CELULA COM BOTAO GANHA 9px EM CIMA E EMBAIXO (r38, 27/09/2026): o botao tem moldura e canto
   redondo, e com 6px ele ficava a 7px da linha da fileira vizinha (regra "linha" da auditoria de
   tela, piso de 8px). So estas celulas; a tabela de texto continua com a altura do desenho. */
.av-tabela td:has(> .av-botao-claro, > .av-botao-linha, > .av-chip-tipo, > .avc-chip-percentual, > .avcd-botao-ver, > .avcc-acao-doc) {
  padding-block: 9px;
}
/* O TITULO DA COLUNA QUEBRA EM DUAS LINHAS; O NUMERO NUNCA. Decisao do Carvalho em 19/09/2026,
   depois de ele fotografar "100,0%" cortado pela borda do cartao.
   MEDIDO antes de mexer, na Analise por Produto em 1440px: a tabela de creditos pedia 720px e o
   cartao oferecia 537px, e o gordo eram os TITULOS numa linha so, "Volume Creditado" com 144px,
   "Valor do Credito" com 136px, "% do Total (R$)" com 103px. As colunas "Fornecedores" e "Acoes"
   ficavam inteiras fora da vista. Nao cabia em largura nenhuma: nem em 1536 (a largura do proprio
   desenho do James), nem em 1920.
   `white-space: normal` SO no `th` do cabecalho: a celula de dado continua `nowrap`, senao
   "R$ 1.320,00" partiria no meio, que e pior que qualquer aperto.
   O QUE CUSTA: o cabecalho da tabela fica com duas linhas de altura onde o desenho tem uma. Foi a
   troca escolhida: duas linhas de titulo contra um numero pela metade. */
.av-tabela thead th {
  white-space: normal;
}
/* NOME COMPRIDO TRUNCA, NUNCA ESTICA A COLUNA (achado 12 da auditoria de 19/09/2026). Um nome real
   do Sankhya ("SUPERMERCADO X LTDA FILIAL 27 TERESINA PI") nao tinha teto de largura aqui: uma
   celula de texto sem teto estica a coluna inteira e empurra os numeros das colunas vizinhas para
   fora da parte visivel da tabela -- a MESMA familia de defeito que `.hbarra-rotulo`, la em cima,
   ja resolveu na barra horizontal (mesmo trio de propriedades: teto de largura, esconder o que
   sobra, reticencias no lugar).
   SO NAS CELULAS DE TEXTO, por isso o `:not()` duplo: a de numero (`.num`) tem de caber INTEIRA
   (e a regra logo acima, "titulo quebra, numero nunca", ja garante isso do outro lado), e a
   centralizada (`.centro`) so guarda contagem, sinal ou um botao de acao pequeno, nunca um nome.
   O `title` com o texto inteiro fica no HTML de quem monta a celula (os tres .js deste modulo),
   para o nome que sumiu continuar alcancavel passando o mouse -- combinado aqui porque CSS sozinho
   nao sabe qual e o texto original de um `<button>` ou `<span>` truncado por dentro da celula. */
.av-tabela td:not(.num):not(.centro) {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* O CINZA-AZULADO DAS LINHAS NORMAIS E DO DESENHO, amostrado pixel a pixel (#293238), e ele nao e
   o mesmo preto-esverdeado dos titulos. A diferenca e pequena e proposital: ela e o que faz a
   linha REALCADA, que sai em quase preto e em negrito, saltar da tabela. Igualar os dois apaga o
   realce sem apagar nenhuma regra, e ninguem descobre olhando o CSS. */
.av-tabela tbody td {
  color: var(--avarias-texto-linha);
}
.av-tabela tbody tr.destaque td,
.av-tabela tbody tr.destaque-verde td,
.av-tabela tfoot td,
.av-tabela tr.total td {
  color: var(--avarias-texto);
}
.av-tabela thead th {
  background: var(--avarias-cabecalho-coluna);
  color: var(--avarias-texto);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
}
/* A fileira de grupos de coluna ("Credito Recebido", "Composicao do Credito") fica ACIMA da
   fileira de nomes, entao ela precisa de um `top` proprio: as duas grudam, uma embaixo da outra. */
.av-tabela thead tr.av-grupo-colunas th {
  border-bottom: 1px solid var(--avarias-borda);
  text-align: center;
}
.av-tabela td.num,
.av-tabela th.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.av-tabela td.centro,
.av-tabela th.centro {
  text-align: center;
}
.av-tabela tbody tr:hover td {
  background: color-mix(in srgb, var(--avarias-cabecalho-coluna) 60%, transparent);
}
.av-tabela tbody tr.destaque td {
  background: var(--avarias-linha-destacada);
  font-weight: 700;
}
.av-tabela tbody tr.destaque-verde td {
  background: var(--avarias-linha-destacada-verde);
  font-weight: 700;
}
.av-tabela tfoot td,
.av-tabela tr.total td {
  background: var(--avarias-cabecalho-coluna);
  border-top: 2px solid var(--avarias-borda);
  font-weight: 800;
}
.av-tabela .vermelho {
  color: var(--avarias-vermelho-texto);
  font-weight: 700;
}
/* A CELULA COM BARRA: a barra fica ATRAS do numero no desenho, encostada a esquerda, e o numero
   alinhado a direita. Grid de duas faixas, e a barra nunca muda a altura da linha.

   `tabular-nums` NAO E ENFEITE TIPOGRAFICO: e o que faz a barra nao mentir, e entrou em
   19/09/2026 depois de um critico de contexto limpo MEDIR a diferenca. Com o algarismo de largura
   variavel (o padrao da fonte), "31,4%" e "15,5%" ocupam larguras DIFERENTES, e como a segunda
   faixa deste grid e `auto`, ela nasce de um tamanho por linha. Sobra um `1fr` diferente em cada
   linha, ou seja, **cada barra e desenhada numa regua diferente**.
   Medido na tela de Inicio a 390px, antes do conserto: trilhos de 30,84px, 28,00px e 31,25px para
   as tres linhas de fornecedor; a razao desenhada entre a primeira e a segunda deu 1,694 quando a
   razao dos numeros e 1,534, um erro de 10,4%. Quem le a tabela pela barra via o Igarashi 18% acima
   do Werhmans quando a diferenca real e 32%.
   Com `tabular-nums` todo algarismo tem a mesma largura, os rotulos de mesmo tamanho de texto
   passam a ocupar a mesma largura, e as barras voltam para a mesma regua.
   E a MESMA familia de defeito que a tarefa b31 ja pagou nas barras horizontais, onde o conserto
   foi `subgrid`: faixa que nasce do conteudo de cada linha nunca compara linha com linha. */
.av-celula-barra {
  align-items: center;
  display: grid;
  font-variant-numeric: tabular-nums;
  gap: 8px;
  grid-template-columns: minmax(28px, 1fr) auto;
}
.av-botao-linha {
  background: var(--avarias-botao-linha);
  border: 0;
  border-radius: 4px;
  /* 28px de altura no minimo (r38, 27/09/2026): o piso de clique da regua da Apple no computador;
     com 27 ficava abaixo. No celular a regra de ate 760px, mais abaixo, sobe para 44. */
  min-height: 28px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(11px, 0.75vw, 11px);
  font-weight: 600;
  padding: 4px 10px;
  white-space: nowrap;
}
.av-botao-linha:hover {
  filter: brightness(1.18);
}
.av-botao-linha:focus-visible {
  outline: 2px solid var(--avarias-verde-na-faixa);
  outline-offset: 2px;
}
.av-botao-claro {
  background: var(--avarias-cartao);
  border: 1px solid #d1d5c7;
  border-radius: 4px;
  min-height: 28px; /* r38: piso de clique de 28px no computador, como .av-botao-linha acima */
  color: var(--avarias-texto);
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(11px, 0.75vw, 11px);
  font-weight: 600;
  padding: 4px 10px;
  white-space: nowrap;
}
.av-botao-claro:hover {
  background: var(--avarias-cabecalho-coluna);
}
/* O ANEL DE FOCO VERDE TAMBEM AQUI. Este botao era o unico clicavel destas telas sem regra de
   `:focus-visible` propria, entao quem navega por teclado via o anel padrao do navegador nele e o
   verde do painel em todos os vizinhos. Foi apontado por quem construiu a tela, e e defeito meu:
   quatro botoes da tela de Devolucoes usam esta classe (Voltar, as duas acoes de linha, e o nome
   da rede na tabela de ocorrencias). */
.av-botao-claro:focus-visible {
  outline: 2px solid var(--avarias-botao);
  outline-offset: 2px;
}
/* O NOME DA LINHA COMO BOTAO DE TEXTO. Parece o nome e se comporta como botao: sem moldura, sem
   mudar a altura da linha, mas alcancavel por teclado e anunciado como botao pelo leitor de tela.
   Existe porque a tela de Analise por Produto PROMETE, por escrito, que clicar no produto abre o
   detalhamento -- e a unica forma de abrir era um botao na ultima coluna, que numa tabela que rola
   de lado nasce fora da parte visivel. */
.av-abrir-linha {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  /* A AREA DE CLIQUE TEM 28px DE ALTURA SEM MUDAR A ALTURA DA LINHA (r38, 27/09/2026): 4px de
     recheio em cima e embaixo e a mesma margem negativa devolvem o espaco. Antes eram 20px, abaixo
     do piso de clique do computador. */
  margin-block: -4px;
  padding: 4px 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 2px;
}
.av-abrir-linha:hover {
  text-decoration-color: currentColor;
}
.av-abrir-linha:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--avarias-botao);
  outline-offset: 2px;
}

/* A CAIXA QUE ROLA TEM DE PARECER QUE ROLA. No macOS a barra de rolagem so aparece DEPOIS que a
   pessoa ja rolou, entao uma tabela cortada e indistinguivel de uma tabela que acaba ali: medido
   por um critico de contexto limpo, `barraOcupaAltura: 0`, `maskImage: none`, nenhum pseudo-
   elemento. O degrade na borda direita e a pista, e ele SOME quando a rolagem chega ao fim, porque
   uma pista que fica quando nao ha mais nada e ruido que ensina a ignorar a pista.
   `scroll-timeline` ainda nao e suficientemente portavel; o truque abaixo e o classico de fundo
   fixo mais fundo rolante (`background-attachment: local`), que funciona em todo navegador atual e
   nao precisa de JavaScript nenhum. */
.av-tabela-caixa {
  background:
    linear-gradient(to right, var(--avarias-cartao) 30%, transparent) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--avarias-cartao) 30%, transparent) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(10, 40, 25, 0.16), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(10, 40, 25, 0.16), transparent) right center / 12px 100% no-repeat scroll;
  background-color: var(--avarias-cartao);
  scrollbar-width: thin;
}

.av-ponto-equipe {
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin-right: 5px;
  vertical-align: middle;
  width: 8px;
}

/* ---------- botao "Ver todos", largura do painel ---------- */
.av-ver-todos {
  align-items: center;
  background: var(--avarias-botao);
  border: 0;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: clamp(11px, 0.82vw, 12px);
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  /* 8px acima (r38, 27/09/2026): o botao vem logo depois da ultima linha da tabela, e a 1px da
     linha dela ficava encostado (regra "linha" da auditoria de tela, piso de 8px). */
  margin-top: 8px;
  padding: 7px 12px;
  width: 100%;
}
.av-ver-todos:hover {
  filter: brightness(1.14);
}
.av-ver-todos:focus-visible {
  outline: 2px solid var(--avarias-verde-na-faixa);
  outline-offset: 2px;
}

/* ---------- a fileira "Pessoas e Equipes" ---------- */
.av-secao-cabeca {
  align-items: center;
  display: flex;
  gap: 10px;
  padding: 4px var(--av-recuo) 0;
}
/* O ICONE E O BOTAO NAO ENCOLHEM (r38, 27/09/2026): a 1024 e a 768 o flex espremia os dois (o
   icone ficava com 15px e o "Entenda os vinculos", de 109px de texto, numa caixa de 53), o texto do
   botao passava da borda e a PAGINA rolava de lado (1.053px numa tela de 1.024). Quem cede agora e
   o aviso do meio, que ja tem `min-width: 0` e quebra em mais linhas. */
.av-secao-cabeca > .av-secao-icone,
.av-secao-cabeca > .av-botao-claro {
  flex: none;
}
.av-secao-cabeca h2 {
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: 800;
  margin: 0;
}
.av-secao-icone {
  align-items: center;
  background: var(--avarias-faixa-escura);
  border-radius: 7px;
  color: #fff;
  display: flex;
  height: clamp(26px, 2.2vw, 32px);
  justify-content: center;
  width: clamp(26px, 2.2vw, 32px);
}
.av-secao-aviso {
  align-items: center;
  color: var(--muted-foreground);
  display: flex;
  flex: 1 1 auto;
  font-size: clamp(11px, 0.78vw, 11.5px);
  gap: 6px;
  min-width: 0;
}

/* ---------- rodape sangrado ---------- */
/* O RODAPE NAO TEM COLUNAS IGUAIS, e isso e do desenho. O remate do trofeu e mais largo que os
   selos do meio, e na tela de Devolucoes o primeiro selo tambem e. Com `grid-auto-columns: 1fr`
   os sete blocos saiam com a mesma largura e os dois maiores ficavam espremidos, com o texto do
   trofeu quebrando em tres linhas. Aqui cada selo cresce o quanto o texto dele pede e o remate
   fica no tamanho dele, encostado a direita. */
.av-rodape {
  align-items: center;
  background: var(--avarias-faixa-escura);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 18px);
  margin-top: var(--av-vao);
  padding: 12px var(--av-recuo);
}
.av-rodape-selo {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
}
.av-rodape-selo + .av-rodape-selo {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: clamp(8px, 1vw, 18px);
}
.av-rodape-texto {
  display: grid;
  min-width: 0;
}
.av-rodape-texto b {
  font-size: clamp(11px, 0.85vw, 12.5px);
  font-weight: 700;
}
.av-rodape-texto span {
  color: var(--avarias-apoio-na-faixa);
  font-size: clamp(11px, 0.78vw, 11.5px);
}
.av-rodape-remate {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  margin-left: auto;
}
.av-rodape-remate .av-rodape-texto b,
.av-rodape-remate .av-rodape-texto span {
  color: var(--avarias-ouro);
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 800;
}
.av-trofeu {
  color: var(--avarias-ouro);
  flex: 0 0 auto;
}

/* ============================================================
   O QUE SO A CONTA CORRENTE TEM: barra lateral e a janela do fornecedor
   ============================================================ */

/* A BARRA LATERAL E DA TELA, NAO DO PAINEL. Ela esta desenhada dentro da fotografia, com sete
   itens que sao os sete assuntos da conta corrente -- nao e o menu do Intel Ceasa, que continua
   a esquerda dela. Duas navegacoes lado a lado seria confuso em qualquer outra tela; aqui e o
   que o desenho tem, e o desenho manda no layout. Medida da ficha: 0,1172 da largura. */
.av-com-lateral {
  display: grid;
  /* 11,72% e a medida da ficha, e ela entra como PORCENTAGEM e nao como fracao: `0.1172fr` ao
     lado de `1fr` nao vale 11,72% da largura, vale 10,5% -- o `fr` reparte o que SOBRA depois dos
     minimos, e as duas contas so coincidem por acaso. O piso de 132px existe porque abaixo disso
     "Créditos Recebidos" quebra em tres linhas. */
  grid-template-columns: minmax(132px, 11.72%) minmax(0, 1fr);
  min-height: 0;
}
/* OS ITENS FICAM NO ALTO E O PE NO PE, e o vazio fica no MEIO. Com `grid-template-rows: 1fr auto`
   a primeira faixa recebia a sobra inteira e os sete itens se espalhavam por mil pixels de altura,
   um longe do outro. O `auto 1fr auto` poe a sobra numa faixa vazia do meio, que e onde o desenho
   a tem. */
.av-lateral {
  align-content: start;
  background: #233101;
  color: #fff;
  display: grid;
  gap: 4px;
  grid-template-rows: auto 1fr auto;
  padding: 10px 8px 14px;
}
.av-lateral-itens {
  align-content: start;
}
.av-lateral-itens {
  display: grid;
  gap: 2px;
}
.av-lateral-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  color: #dfe5d2;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: clamp(11px, 0.85vw, 12.5px);
  gap: 8px;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}
.av-lateral-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.av-lateral-item[aria-current="page"] {
  background: #364d00;
  border-left-color: #b0d35e;
  color: #fff;
  font-weight: 700;
}
.av-lateral-item:focus-visible {
  outline: 2px solid #b0d35e;
  outline-offset: -2px;
}
.av-lateral-item small {
  color: #bac3a5;
  display: block;
  font-size: 0.85em;
}
.av-lateral-pe {
  color: #fff;
  display: grid;
  gap: 8px;
  padding: 10px;
}
.av-lateral-pe b {
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 700;
}
.av-lateral-pe span {
  color: #bac3a5;
  font-size: clamp(11px, 0.85vw, 13px);
}

/* AS DUAS COLUNAS DO CORPO. A ficha mediu 0,4193 L para a esquerda e 0,4642 L para a direita:
   quase meio a meio, com leve vantagem para a janela. Quando a janela esta fechada, a esquerda
   toma a largura toda -- senao sobraria metade da tela em branco. */
/* `minmax(0, ...)` E O QUE IMPEDE A COLUNA DE ESTOURAR, e foi defeito visto na foto: a janela do
   fornecedor passava da borda direita da pagina, com o botao de fechar e os tres "Abrir Nota"
   pendurados para fora, e a tabela da esquerda saia cortada no meio de um valor em reais
   ("R$ 6.320,0"). A causa e a mesma dos itens flexiveis: uma faixa `fr` tambem nasce com minimo
   AUTO, ou seja, nunca menor que o conteudo dela -- e uma tabela de sete colunas com valores em
   reais nao encolhe sozinha. `minmax(0, Nfr)` troca esse minimo por zero, e ai a faixa manda no
   conteudo em vez do contrario. */
.av-duas-colunas {
  align-items: start;
  display: grid;
  gap: var(--av-vao);
  grid-template-columns: minmax(0, 0.4193fr) minmax(0, 0.4642fr);
  padding: 0 var(--av-recuo);
}
.av-duas-colunas.sem-janela {
  grid-template-columns: minmax(0, 1fr);
}
/* A COLUNA E UM CONTAINER, e isso conserta um erro de raciocinio que estava em todo este arquivo:
   as media queries perguntavam a largura da JANELA DO NAVEGADOR para decidir se dois paineis cabem
   lado a lado. Nao e ela que manda. MEDIDO nesta tela: navegador de 1440px, e a coluna da esquerda
   com 420px, porque o menu do painel come 256px e a janela do fornecedor come metade do resto. A
   media query via 1440, achava que havia espaco de sobra, e punha a rosca e as barras lado a lado
   em 200px cada -- rosca de 76px e legenda com o nome truncado em "Bonifi…".
   Com `container-type: inline-size` a pergunta passa a ser a certa: "quanto ESTA coluna tem". */
.av-coluna {
  container-type: inline-size;
  display: grid;
  gap: var(--av-vao);
  min-width: 0;
}
@media (max-width: 1100px) {
  .av-duas-colunas {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A JANELA DO FORNECEDOR. No desenho ela e um painel flutuante com sombra que avanca alguns
   pixels sobre a coluna da esquerda -- e nao uma caixa modal que escurece o resto. Fica no fluxo,
   com sombra, exatamente assim. */
.av-janela {
  background: var(--avarias-cartao);
  max-width: 100%;
  border: 1px solid var(--avarias-borda);
  border-radius: 8px;
  box-shadow: var(--sombra-lg);
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
}
.av-janela-cabeca {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.av-janela-cabeca h2 {
  align-items: center;
  display: flex;
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 700;
  gap: 8px;
  margin: 0;
}
.av-fechar {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  min-height: 28px; /* r38: piso de clique do computador; tinha 26 */
  padding: 4px 8px;
}
.av-fechar:hover {
  background: var(--avarias-cabecalho-coluna);
  color: var(--avarias-texto);
}
.av-fechar:focus-visible {
  outline: 2px solid var(--avarias-botao);
  outline-offset: 2px;
}
.av-janela-resumo {
  align-items: center;
  background: var(--avarias-botao-inativo);
  border-radius: 6px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  padding: 10px 12px;
}
.av-dado {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.av-dado > span {
  color: var(--muted-foreground);
  font-size: clamp(11px, 0.76vw, 11px);
}
.av-dado > b {
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 700;
}
.av-bloco {
  border: 1px solid var(--avarias-borda);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}
.av-bloco-cabeca {
  align-items: center;
  display: flex;
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 700;
  gap: 8px;
}
.av-bloco-corpo {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.av-verde {
  color: var(--avarias-verde-texto); /* era #73981d, 3,34:1 no branco (r38) */
  font-weight: 700;
}
.av-janela-pe {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

/* ---------- abas em pilula ---------- */
.av-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* era 6 ate a r38 (27/09/2026): o vao entre dois botoes nao desce de 8px */
}
/* NO CELULAR A FILEIRA DE ABAS ROLA DE LADO EM VEZ DE QUEBRAR (r38, 27/09/2026): a 360px as quatro
   abas do "Tipo de lancamento" saiam em duas linhas de duas (regra "fileira" da auditoria de tela,
   o defeito da foto do Carvalho de 26/09). Numa linha so, a que nao cabe fica a um arrasto. */
@media (max-width: 760px) {
  .av-abas {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .av-abas > .av-aba {
    flex: none;
  }
}
.av-aba {
  background: var(--avarias-botao-inativo);
  border: 1px solid var(--avarias-borda);
  border-radius: 5px;
  color: var(--avarias-texto);
  cursor: pointer;
  flex: 1 1 auto;
  font-family: inherit;
  font-size: clamp(11px, 0.85vw, 12.5px);
  font-weight: 600;
  padding: 7px 12px;
}
.av-aba[aria-selected="true"] {
  background: #293a02;
  border-color: #293a02;
  color: #fff;
}
.av-aba:focus-visible {
  outline: 2px solid var(--avarias-botao);
  outline-offset: 2px;
}

/* ---------- chip de tipo de credito ----------
   AS TRES COMBINACOES DE FUNDO E TEXTO SAO DO DESENHO, e o texto escuro de cada uma foi
   amostrado junto do fundo: trocar so o fundo por um tom do painel quebraria o contraste que a
   ficha ja mediu. */
.av-chip-tipo {
  border-radius: 4px;
  display: inline-block;
  font-size: clamp(11px, 0.78vw, 11.5px);
  font-weight: 600;
  padding: 3px 9px;
  white-space: nowrap;
}
.av-chip-tipo.bonificacao {
  background: #d7f199;
  color: #34460a;
}
.av-chip-tipo.desconto-nf {
  background: #e3dcfd;
  color: #182045;
}
.av-chip-tipo.verba {
  background: #feeda0;
  color: #293205;
}

/* ============================================================
   O QUE SO A ANALISE POR PRODUTO TEM
   ============================================================ */

/* DUAS COLUNAS IGUAIS, medido 739 contra 736 px de 1536: e um para um, e os 3px sao ruido de
   medicao. O detalhamento de baixo comeca na MESMA altura nos dois lados, mesmo com a tabela da
   esquerda terminando antes -- por isso as duas fileiras sao grades separadas, e nao uma coluna
   continua de cada lado. */
.av-par {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 0 var(--av-recuo);
}
/* 560px e a conta, nao um numero bonito: dois paineis precisam de ~260px cada para caber uma rosca
   de 120px ao lado de uma legenda que escreva "Bonificação (produto)" inteiro, mais os 18px de vao
   e o respiro interno. Abaixo disso um dos dois perde a informacao, e dois paineis ilegiveis lado
   a lado valem menos que um legivel em cima do outro. A media query fica como rede para quem
   estiver fora de um container. */
@container (max-width: 560px) {
  .av-par {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1000px) {
  .av-par {
    grid-template-columns: minmax(0, 1fr);
  }
}
.av-painel.debito > .av-painel-cabeca {
  background: var(--avarias-faixa-debito);
  border-radius: 6px;
  margin: -10px -12px 0;
  padding: 10px 12px;
}
.av-painel.credito > .av-painel-cabeca {
  background: var(--avarias-faixa-credito);
  border-radius: 6px;
  margin: -10px -12px 0;
  padding: 10px 12px;
}
.av-painel-marca {
  align-items: center;
  border-radius: 50%;
  display: flex;
  flex: 0 0 auto;
  height: 26px;
  justify-content: center;
  width: 26px;
}
.av-painel.debito .av-painel-marca {
  background: #78181d;
  color: #fff;
}
.av-painel.credito .av-painel-marca {
  background: #3e5704;
  color: #fff;
}

/* ---------- o par de botoes "Ordenar por" ---------- */
.av-ordenar {
  align-items: center;
  display: flex;
  gap: 8px; /* era 6 ate a r38 (27/09/2026): o vao entre dois botoes nao desce de 8px */
}
.av-ordenar > span {
  color: var(--muted-foreground);
  font-size: clamp(11px, 0.78vw, 11.5px);
}
.av-ordenar button {
  background: var(--avarias-botao-inativo);
  border: 1px solid var(--avarias-borda);
  border-radius: 5px;
  color: var(--avarias-texto);
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(11px, 0.8vw, 12px);
  font-weight: 600;
  padding: 5px 12px;
}
.av-ordenar button[aria-pressed="true"] {
  background: #253402;
  border-color: #253402;
  color: #fff;
}
.av-ordenar button:focus-visible {
  outline: 2px solid var(--avarias-botao);
  outline-offset: 2px;
}

/* ---------- as duas caixas de aviso acima do rodape ---------- */
.av-avisos {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
  padding: var(--av-vao) var(--av-recuo);
}
@media (max-width: 1000px) {
  .av-avisos {
    grid-template-columns: 1fr;
  }
}
.av-aviso {
  align-items: start;
  background: var(--avarias-cartao);
  border: 1px solid var(--avarias-borda);
  border-radius: 6px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  padding: 10px 12px;
}
.av-aviso-marca {
  align-items: center;
  background: var(--avarias-faixa-escura);
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}
.av-aviso b {
  font-size: clamp(11px, 0.85vw, 12.5px);
}
.av-aviso ul {
  display: grid;
  gap: 3px;
  list-style: disc;
  margin: 3px 0 0;
  padding-left: 16px;
}
.av-aviso li {
  color: var(--avarias-texto);
  font-size: clamp(11px, 0.8vw, 12px);
}

/* ---------- estado vazio e estado de falha, honestos ----------
   TODA TELA DESTE MODULO PRECISA DOS DOIS. Tabela sem linha e rosca sem fatia nao podem sair como
   um quadro em branco: o dono le quadro em branco como "nao carregou" e para de confiar. */
.av-vazio {
  color: var(--muted-foreground);
  display: grid;
  font-size: clamp(11px, 0.85vw, 12.5px);
  gap: 4px;
  justify-items: center;
  padding: 18px 12px;
  text-align: center;
}
.av-vazio b {
  color: var(--avarias-texto);
  font-size: clamp(11px, 0.95vw, 14px);
}

@media (prefers-reduced-motion: reduce) {
  .grafico-rosca .rosca-fatia {
    transition: none;
  }
}

/* ============================================================
   O CELULAR E O TABLET: estas tres telas sao DESENHO DE COMPUTADOR, e mesmo assim nao podem
   QUEBRAR no telefone.

   O que este bloco NAO e: a versao de celular. O James desenhou telas de celular proprias, com
   outro layout e outra barra de navegacao, e elas sao a tarefa b32, em `avarias-celular-*`.

   O que este bloco E: o minimo para que quem abrir `#/avarias` num telefone veja a tela inteira em
   vez de uma pagina rolando de lado. MEDIDO por `scripts/testar-mobile.sh` antes deste bloco
   existir: em 390px o cabecalho, a fileira de filtros e a de cartoes saiam com 499px de largura, e
   a PAGINA inteira ganhava barra horizontal -- 932 problemas de layout nas tres telas.

   A causa e sempre a mesma e vale escrita: grade com coluna `auto` nao encolhe. O cabecalho tinha
   quatro colunas (`auto 1fr auto auto`), e tres delas se recusam a ficar menores que o conteudo,
   entao a soma delas virava o piso da tela. No telefone as quatro viram linhas empilhadas.
   ============================================================ */
@media (max-width: 760px) {
  .tela-avarias {
    --av-recuo: 10px;
    --av-vao: 8px;
  }
  /* o cabecalho vira quatro linhas empilhadas, na mesma ordem em que ele se le */
  .av-cabecalho {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    row-gap: 10px;
  }
  .av-logo {
    justify-self: start;
  }
  .av-titulo {
    justify-items: start;
    text-align: left;
  }
  .av-periodo {
    justify-self: stretch;
  }
  .av-periodo-campos {
    flex-wrap: wrap;
  }
  .av-periodo input {
    min-width: 0;
  }
  /* filtros e cartoes: dois por linha em vez de oito e seis */
  .av-filtros {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  }
  .av-kpis {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  }
  .av-paineis {
    grid-template-columns: minmax(0, 1fr);
  }
  /* a barra lateral da Conta Corrente vira uma fileira que rola, acima do conteudo: no telefone
     ela nao pode comer um oitavo da largura, e esconde-la tiraria a navegacao da tela */
  .av-com-lateral {
    grid-template-columns: minmax(0, 1fr);
  }
  .av-lateral {
    grid-template-rows: auto;
    overflow-x: auto;
    padding: 8px var(--av-recuo);
  }
  .av-lateral-itens {
    display: flex;
    gap: 6px;
  }
  .av-lateral-item {
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 6px;
    white-space: nowrap;
  }
  .av-lateral-item[aria-current="page"] {
    border-bottom-color: #b0d35e;
    border-left-color: transparent;
  }
  .av-lateral-item small {
    display: none;
  }
  .av-lateral-pe {
    display: none;
  }
  /* o rodape empilha em vez de espremer sete blocos numa linha */
  .av-rodape {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .av-rodape-selo + .av-rodape-selo {
    border-left: 0;
    padding-left: 0;
  }
  .av-rodape-remate {
    margin-left: 0;
  }
  /* a janela do fornecedor deixa de ser coluna e vira bloco de largura cheia */
  .av-duas-colunas,
  .av-duas-colunas.sem-janela,
  .av-par,
  .av-avisos {
    grid-template-columns: minmax(0, 1fr);
  }
  .av-janela-resumo,
  .av-bloco-corpo {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr));
  }
  .av-secao-cabeca {
    flex-wrap: wrap;
  }

}

/* ---------- O QUE E DO DEDO, E NAO DO TAMANHO DA TELA ----------
   Estas duas regras moram num corte MAIS LARGO que o de cima (1024px em vez de 760px), e a
   diferenca nao e detalhe: em 760px a tela EMPILHA, mas o tablet de 820px continua em duas
   colunas e continua sendo tocado com o dedo. O portao de celular mede as duas coisas separadas, e
   foi ele que mostrou o buraco: com as duas regras no mesmo bloco de 760px, sobravam 25 problemas,
   todos em 820px e todos destes dois tipos. Layout responde a largura; dedo responde a aparelho. */
@media (max-width: 1024px) {
  /* CAMPO COM 16px, E NAO MENOS, e o motivo nao e estetica: abaixo disso o Safari do iPhone DA
     ZOOM SOZINHO ao focar o campo, a pagina salta, e a pessoa fica com a tela ampliada sem ter
     pedido. E regra do aparelho, nao do desenho. Aqui eram 11px vindos do `clamp` do computador. */
  .tela-avarias .av-filtro select,
  .tela-avarias .av-periodo input {
    font-size: 16px;
  }

  /* ALVO DE TOQUE DE 44x44. O dedo nao tem a mira do ponteiro, e um botao de 21px de altura no meio
     de um bloco denso e um botao que erra. No computador eles continuam compactos, como o desenho
     tem. `.av-dado a` esta na lista porque o link do comprovante, dentro da janela do fornecedor,
     era o unico alvo que sobrava abaixo do minimo: 21px medidos.

     POR QUE 44 E NAO 40, E POR QUE TEM LARGURA AGORA (conserto de 20/09/2026, achado F da
     auditoria): `scripts/medir-tela-comum.mjs` subiu a exigencia para 44x44 -- e o proprio
     comentario dele explica por que 40 nunca teve fonte nenhuma (o portao cobrava altura sem
     cobrar largura, e um botao de 44 de alto por 24 de largo continua sendo um alvo que a mao
     erra). `min-width` entra pela mesma razao que `min-height` ja estava aqui. */
  .tela-avarias :is(.av-botao, .av-botao-linha, .av-botao-claro, .av-ver-todos, .av-aba, .av-ordenar button, .av-lateral-item, .av-fechar, .av-dado a) {
    align-content: center;
    min-height: 44px;
    min-width: 44px;
  }
}
/* `.av-abrir-linha` FICA DE FORA DESTA LISTA, DE PROPOSITO, e isto e um corte deliberado, nao um
   esquecimento (ponytail: registrado para quem for medir depois). Ele e o nome do produto/
   fornecedor virando link DENTRO de uma celula de tabela densa (ver o comentario grande sobre ele,
   mais abaixo em ".av-abrir-linha"): e exatamente o caso que o WCAG 2.5.8 chama de "alvo dentro de
   uma frase ou bloco de texto" e isenta do minimo de 44px, porque forcar 44px de altura ali
   estufaria CADA LINHA da tabela e destruiria a densidade que a fotografia do James pede.
   `scripts/medir-tela-comum.mjs` ainda nao sabe distinguir esse caso (ele mede todo `<button>` da
   pagina, sem a excecao de "esta dentro de texto corrido"), entao ele vai acusar este botao como
   pequeno demais ate esse conhecimento entrar no proprio portao -- teto conhecido, e a correcao e
   la, nao aqui: encolher este link para caber 44px destruiria a tabela que ele mora. */

/* ---------- O VAO ENTRE AS DUAS FILEIRAS DE PAINEIS ----------
   DEFEITO REAL, achado pelo Carvalho numa foto da tela em 19/09/2026: na Analise por Produto o
   painel "Produtos / Operacoes que Geraram Creditos" e o "Tomate: Detalhamento dos Creditos
   Recebidos" ficavam ENCOSTADOS, com folga de ZERO pixel. Medido no navegador: o primeiro termina
   em bottom=940 e o segundo comeca em top=940, em 1440, 1280, 1024, 768 e 390px.
   A CAUSA: `.tela-avarias` e um grid com `row-gap: 0`, e cada bloco se separa pelo proprio
   respiro. `.av-par` tem `padding: 0 var(--av-recuo)`, ou seja, respiro nenhum em cima nem
   embaixo. Na coluna da ESQUERDA isso nao aparecia por sorte: o painel de la e mais baixo que a
   fileira, entao sobrava vao. Na coluna da DIREITA, onde o painel define a altura da fileira, as
   duas caixas se tocavam.
   18px e o mesmo vao que o proprio `.av-par` usa entre as suas duas colunas: o espaco entre os
   paineis passa a ser igual nos dois sentidos.
   O seletor e `+`, entao so alcanca uma SEGUNDA fileira seguida, que so a Analise por Produto tem:
   nenhuma outra tela do modulo muda de lugar por causa desta regra.
   O portao que pega isso sozinho daqui pra frente e `scripts/testar-colisao.mjs`. */
.av-par + .av-par {
  padding-top: 18px;
  /* A FILEIRA DE DETALHE PASSA A EMPILHAR, UM CARTAO POR LINHA. Decisao do Carvalho em 19/09/2026.
     MEDIDO antes de mexer: as tabelas de detalhe pedem de 619 a 747px e o cartao so oferece 537px
     em 1440, 585px em 1536 e 649px em 1920. Ou seja, elas NAO cabem em largura nenhuma, nem na
     largura do proprio desenho do James: a ultima coluna ficava cortada pela borda do cartao e
     "100,0%" aparecia como "100,0". A tabela rolava de lado, entao o numero nao se perdia, mas
     quem batia o olho via numero pela metade.
     Empilhada, a fileira de detalhe recebe os 1145px de largura util em 1440, e a maior tabela
     (747px) cabe inteira com folga.
     O QUE ISSO CUSTA, e esta dito porque e uma divergencia deliberada: no desenho do James os dois
     cartoes de detalhe aparecem LADO A LADO. A fileira de CIMA continua lado a lado como no
     desenho; so a de baixo empilha. */
  grid-template-columns: minmax(0, 1fr);
}


/* ---------- AVISO DE MES PARCIAL ----------
   So aparece quando o ultimo mes medido ainda esta correndo. Fica ACIMA dos cartoes de proposito:
   quem abre uma tela de qualidade le o numero grande primeiro e vai embora, e aviso no pe do
   documento chega depois da conclusao errada.
   Ambar, nunca vermelho: nao ha nada errado, ha um recorte incompleto, e alarme falso gasta a
   confianca que o alarme de verdade vai precisar. */
.av-aviso-parcial {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  /* 10px em cima (r38, 27/09/2026): no celular a caixa ficava a 0px da linha de baixo da fileira
     de filtros (regra "linha" da auditoria de tela, piso de 8px). */
  margin: 10px 20px 14px;
  padding: 12px 14px;
  border: 1px solid var(--av-aviso-borda);
  border-radius: 10px;
  background: var(--av-aviso-fundo);
  color: var(--av-aviso-texto);
  font-size: 13px;
  line-height: 1.5;
}
.av-aviso-parcial svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.av-aviso-parcial b { font-weight: 650; }

/* ============================================================
   A REGUA DA APPLE NO COMPUTADOR (r38, 27/09/2026). Ordem do Carvalho de 26/09, 15:25: os achados
   de computador da r32 valem nestas telas, e ela SUPERA, so nestas reguas, a decisao de 18/09 de a
   tela ser identica a fotografia. Duas mudancas, as menores que passam:
     1. todo `font-size` abaixo de 11px, nesta folha e nas de celular de Avarias, subiu para 11px
        (piso de letra); nos `clamp()` subiu so o minimo, o resto da escala ficou;
     2. aqui embaixo, texto corrido de TABELA a 13px a partir de 700px de largura (piso de texto
        corrido no computador). No celular a tabela fica no piso de 11, que e o que faz as colunas
        do desenho caberem a 360px.
   ============================================================ */
/* O TEXTO MIUDO ENTRE PARENTESES ("(51,9%)", "(com desconto)") e 0,85 da letra do pai: com o pai a
   11px ele caia para 9,4px. Nunca abaixo de 11 (r38, 27/09/2026). */
.tela-avarias small {
  font-size: max(11px, 0.85em);
}
@media (min-width: 700px) {
  .tela-avarias td,
  .tela-avarias .av-vazio,
  .tela-avarias .av-secao-aviso,
  .tela-avarias .av-painel-apoio,
  .tela-avarias .av-aviso li {
    font-size: 13px;
  }
  /* o subtitulo do cabecalho verde e texto corrido de 55 letras: 13px no minimo, e a escala por
     largura de tela continua dali para cima */
  .tela-avarias .av-titulo p {
    font-size: clamp(13px, 1.15vw, 17px);
  }
  /* o campo de data do cabecalho: 28px de altura, o piso de clique do computador (tinha 23) */
  .tela-avarias .av-periodo input {
    min-height: 28px;
  }
  /* o link do comprovante na janela do fornecedor: 28px de altura (tinha 21) */
  .tela-avarias .av-dado a {
    align-items: center;
    display: inline-flex;
    min-height: 28px;
  }
}

/* ============================================================
   A VITRINE DA TELA GRANDE (r98, programa 017, 04/10/2026; R6 secao 7, item 11)
   A tela grande de Avarias deixou a faixa escura do desenho e veste a pele da casa (cartao, indicador, barras e tabela
   de ui.js e grafico.js, com vitrine.css por cima). Estas regras so desfazem a moldura antiga para ESTA tela (as
   outras nove de Avarias continuam com a dela) e arrumam as pecas proprias: a fileira de filtros, o detalhe da rede e o
   link da rede na tabela. Nenhuma cor escrita: tudo sai dos tokens. */
.tela-avarias.av-vitrine {
  background: none;
  color: var(--foreground);
  margin: 0;
}
.av-vitrine .av-filtros-vitrine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.av-vitrine .av-filtros-vitrine .seletor {
  max-width: 100%;
  min-width: min(220px, 100%);
}
.av-vitrine .av-comparacao {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.av-vitrine .av-base {
  color: var(--muted-foreground);
  font-size: 13px;
}
.av-vitrine .av-filiais {
  display: grid;
  gap: 12px;
}
.av-vitrine .av-filiais-cab {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
/* a rede que se toca: o piso de alvo da casa (28 px no mouse, 44 px no dedo, regua da Apple) */
.av-vitrine .av-clicavel {
  cursor: pointer;
  border-radius: var(--radius-sm);
  min-height: 28px;
}
.av-vitrine .av-clicavel:focus-visible,
.av-vitrine .av-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.av-vitrine .av-link {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-height: 28px;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}
@media (pointer: coarse) {
  .av-vitrine .av-link,
  .av-vitrine .av-clicavel {
    min-height: 44px;
  }
}
/* OS NUMEROS DE CIMA EM DUAS COLUNAS no tablet e no celular: um por linha, os oito ocupavam quase duas telas de
   celular. O total (o numero grande) continua com a linha inteira. */
@container conteudo (max-width: 979.98px) {
  .av-vitrine .av-cartoes > .col-3 {
    grid-column: span 6;
  }
  .av-vitrine .av-cartoes > .col-3.vt-heroi {
    grid-column: 1 / -1;
  }
}
@container conteudo (max-width: 599.98px) {
  .av-vitrine .av-filtros-vitrine .seletor {
    flex: 1 1 100%;
  }
}

/* ============================================================
   O PADRAO DO JAMES NAS TELAS DE DESENHO DE AVARIAS (r102, 07/10/2026)
   O Carvalho, 07/10: "achei as telas novas horriveis, prefiro as telas do james, com cores nos cards e degrades". Esta
   parte so MUDA A APARENCIA (nenhum numero, texto ou conta): os cartoes de numero da Conta Corrente e da Analise por
   Produto saem do verde-oliva escuro e viram cartoes COLORIDOS com degrade (coral onde e debito, verde onde e credito,
   azul, turquesa e violeta por posicao nos que nao tem sentido), a pastilha do icone fica cheia, e a tabela fica
   zebrada com o cabecalho tingido. Tudo le os tokens `--tom-*` (tokens.css, contraste ja medido): claro e escuro trocam
   sozinhos. Tirar ESTE bloco devolve o desenho de antes, byte a byte.
   ============================================================ */
.tela-avarias {
  /* o cabecalho e a linha realcada da tabela, tingidos de verde da porta (so no claro: os dois blocos do escuro, acima,
     tem mais peso e seguem com o grafite do painel, croma zero) */
  --avarias-cabecalho-coluna: color-mix(in srgb, var(--primary) 8%, var(--avarias-cartao));
  --avarias-linha-par: color-mix(in srgb, var(--foreground) 3%, var(--avarias-cartao));
  /* o icone branco sobre a pastilha cheia; no escuro o tom e claro e o icone leva a cor do fundo (os blocos abaixo) */
  --avarias-tinta-pastilha: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tela-avarias {
    --avarias-tinta-pastilha: var(--background);
  }
}
:root[data-tema="escuro"] .tela-avarias {
  --avarias-tinta-pastilha: var(--background);
}

/* ---------- o cartao de numero: colorido, com degrade ---------- */
.tela-avarias .av-kpi {
  --av-tom: var(--tom-azul);
  --av-tom-fundo: var(--tom-azul-fundo);
}
.tela-avarias .av-kpi.debito {
  --av-tom: var(--tom-coral);
  --av-tom-fundo: var(--tom-coral-fundo);
}
.tela-avarias .av-kpi.credito {
  --av-tom: var(--tom-verde);
  --av-tom-fundo: var(--tom-verde-fundo);
}
/* sem sentido de bom ou ruim (o cartao nao e debito nem credito): azul, turquesa e violeta, de tres em tres. Nunca verde,
   coral ou ambar por rodizio: essas tres cores querem dizer bom, ruim e atencao. */
.tela-avarias .av-kpi:not(.debito):not(.credito):nth-child(3n + 2) {
  --av-tom: var(--tom-turquesa);
  --av-tom-fundo: var(--tom-turquesa-fundo);
}
.tela-avarias .av-kpi:not(.debito):not(.credito):nth-child(3n + 3) {
  --av-tom: var(--tom-violeta);
  --av-tom-fundo: var(--tom-violeta-fundo);
}
.tela-avarias .av-kpi,
.tela-avarias .av-kpi.credito {
  background: linear-gradient(135deg, var(--av-tom-fundo) 0%, color-mix(in srgb, var(--av-tom-fundo) 40%, var(--avarias-cartao)) 100%);
  border: 1px solid color-mix(in srgb, var(--av-tom) 24%, transparent);
  color: var(--avarias-texto);
  /* o anel de recuperacao: o arco cheio no tom do cartao e o resto no mesmo tom bem claro (antes eram dois verdes de fundo escuro) */
  --avarias-verde-na-faixa: var(--av-tom);
  --avarias-verde-alta: color-mix(in srgb, var(--av-tom) 26%, var(--avarias-cartao));
}
/* a pastilha do icone: cheia, 10 px de canto, degrade do tom, icone branco (no escuro, na cor do fundo) */
.tela-avarias .av-kpi-icone {
  background: linear-gradient(135deg, var(--av-tom), color-mix(in srgb, var(--av-tom) 70%, #000));
  border-radius: 10px;
  color: var(--avarias-tinta-pastilha);
  height: clamp(34px, 3vw, 40px);
  width: clamp(34px, 3vw, 40px);
}
.tela-avarias .av-kpi-icone::before {
  display: none;
}
.tela-avarias .av-kpi-rotulo {
  color: var(--avarias-texto);
}
.tela-avarias .av-kpi-valor.destaque-verde,
.tela-avarias .av-kpi-segundo.destaque-verde {
  color: var(--avarias-verde-texto);
}
.tela-avarias .av-kpi-pe,
.tela-avarias .av-kpi .chip-base {
  color: var(--muted-foreground);
}
/* a seta e a porcentagem seguem na cor do SENTIDO (bom verde, ruim coral), agora na tinta de texto do claro e do escuro */
.tela-avarias .av-kpi .chip-variacao.ruim {
  color: var(--avarias-vermelho-texto);
}
.tela-avarias .av-kpi .chip-variacao.bom {
  color: var(--avarias-verde-texto);
}

/* ---------- o painel de seção: branco, a pastilha do titulo cheia ---------- */
.tela-avarias .av-painel.debito > .av-painel-cabeca {
  background: linear-gradient(135deg, var(--tom-coral-fundo) 0%, color-mix(in srgb, var(--tom-coral-fundo) 40%, var(--avarias-cartao)) 100%);
}
.tela-avarias .av-painel.credito > .av-painel-cabeca {
  background: linear-gradient(135deg, var(--tom-verde-fundo) 0%, color-mix(in srgb, var(--tom-verde-fundo) 40%, var(--avarias-cartao)) 100%);
}
.tela-avarias .av-painel-marca,
.tela-avarias .av-secao-icone {
  border-radius: 10px;
  color: var(--avarias-tinta-pastilha);
  height: 32px;
  width: 32px;
}
.tela-avarias .av-painel-marca svg,
.tela-avarias .av-secao-icone svg {
  height: 18px;
  width: 18px;
}
.tela-avarias .av-painel.debito .av-painel-marca {
  background: linear-gradient(135deg, var(--tom-coral), color-mix(in srgb, var(--tom-coral) 70%, #000));
  color: var(--avarias-tinta-pastilha);
}
.tela-avarias .av-painel.credito .av-painel-marca {
  background: linear-gradient(135deg, var(--tom-verde), color-mix(in srgb, var(--tom-verde) 70%, #000));
  color: var(--avarias-tinta-pastilha);
}
.tela-avarias .av-secao-icone {
  background: linear-gradient(135deg, var(--tom-azul), color-mix(in srgb, var(--tom-azul) 70%, #000));
}

/* ---------- a tabela: compacta, zebrada, cabecalho tingido (a linha ja era baixa, 6 px) ---------- */
.tela-avarias .av-tabela thead th {
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 600;
}
.tela-avarias .av-tabela tbody tr:nth-child(even):not(.destaque):not(.destaque-verde):not(:hover) td {
  background: var(--avarias-linha-par);
}
.tela-avarias .av-tabela td.num,
.tela-avarias .av-tabela th.num {
  font-family: var(--fonte-numero);
}

/* ---------- a foto da fruta antes do nome (so as 12 frutas; sem foto, o espaco vazio alinha os nomes) ---------- */
.tela-avarias .produto-com-foto {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}
.tela-avarias .produto-com-foto > .fruta-foto,
.tela-avarias .produto-com-foto > .fruta-vazia {
  flex: none;
  height: 24px;
  width: 24px;
}
/* o nome que nao cabe na celula perde o fim com reticencias, como antes de a foto entrar */
.tela-avarias .produto-com-foto > .produto-nome {
  min-width: 0;
}
.tela-avarias .produto-com-foto > .produto-nome,
.tela-avarias .produto-com-foto > .av-abrir-linha {
  /* sem `min-width: 0` no botao: o piso de 44 px de toque (regra do celular acima) tem de continuar valendo nele; com
     `overflow: hidden` o item flexivel ja encolhe ate la */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* a celula com foto leva 8 px em cima e embaixo: com os 6 px da tabela a foto de 24 px ficava a 7 px da linha de cima (a regra "linha"
   da auditoria de tela pede 8) */
.tela-avarias .av-tabela td:has(> .produto-com-foto) {
  padding-block: 8px;
}