/* © 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. */
/* ============================================================
CONTA CORRENTE DE DEVOLUCOES E RECUPERACOES, no celular (tarefa b32). So o que esta tela usa e
que nao existe em avarias.css nem em avarias-celular.css: os quatro cartoes de numero do topo,
os tres filtros em caixa propria, o alternador Valor/Volume, a tabela de nove colunas com duas
colunas fixas ao rolar, o cabecalho da janela de detalhe e os tres cartoes de resumo dela.
O QUE NAO ESTA AQUI, DE PROPOSITO, PORQUE JA EXISTE: `.av-painel`, `.av-tabela`/`.av-tabela-caixa`
(cabecalho grudado e rolagem lateral prontos), `.av-periodo`, `.av-abas`/`.av-aba`,
`.av-chip-tipo` (as tres cores de Bonificacao/Desconto/Verba, ja amostradas da tela de
computador desta MESMA conta corrente), `.av-vazio`, `.av-painel-apoio`, `destaque-verde`, e as
classes `avc-*` da casca partilhada (avarias-celular.css). Procurei cada uma antes de escrever
regra nova (secao 2.1 do contrato); reescrever qualquer uma delas aqui seria a segunda copia da
mesma regra, que e como elas divergem com o tempo.
DE ONDE VEM CADA COR NOVA: scratchpad/avarias-extracao-mobile-conta-corrente.md, secao 3, tirada
por contagem de pixel da fotografia desta tela. NAO sao os tokens `--avarias-*` do arquivo
principal (esses vem das TRES fotos de computador); sao proprios desta tela, porque foram
medidos numa foto diferente. Igual a avarias-celular.css ja explica para o topo/faixa/base: sao
IDENTIDADE (a cor de um cartao "Saldo a Recuperar", pessego claro, e uma escolha do desenho, nao
um efeito de tema), e por isso NAO trocam com o modo escuro do painel -- so o texto e as bordas
dos elementos que eu de fato construo do zero (filtro, alternador) seguem o tema, porque esses
sim sao superficie neutra, nao marca.
============================================================ */
/* ============================================================
UM DEFEITO ACHADO NA CASCA, CONSERTADO SO PELO LADO DE FORA (nao edito avarias-celular-casca.js
nem avarias-celular.css nesta rodada; escrito no relatorio tambem).
`faixaTitulo()` poe icone + titulo + caixa de periodo numa UNICA linha flexivel, e a caixa de
periodo (dois ``) NAO ENCOLHE (o proprio CSS da casca marca o ultimo filho
`flex: none`). O titulo desta tela e o mais comprido dos quatro que usam periodo ("Conta
Corrente de Devoluções e Recuperações", 44 caracteres): MEDIDO no palco desta tarefa a 390px, a
coluna do titulo sobrava com 22px de largura (a caixa de periodo sozinha toma 290px dos 386px
uteis), e o texto do titulo TRANSBORDAVA por cima da caixa de periodo -- nao um erro de cor, uma
sobreposicao de verdade, dois textos ilegiveis um em cima do outro.
O CONSERTO, sem tocar na casca: `flex-wrap` na PROPRIA faixa (a classe e generica,
`.avc-faixa-titulo`, mas esta regra so vale DENTRO desta tela por causa do seletor
`[data-tela=...]`) deixa a caixa de periodo cair para a linha de baixo quando nao cabe do lado
do titulo -- o mesmo principio da secao 9 do contrato ("o par so empilha abaixo da largura em
que ele para de ser legivel"), so que entre titulo e periodo em vez de duas colunas de grafico. */
[data-tela="avarias-celular-conta-corrente"] .avc-faixa-titulo {
flex-wrap: wrap;
row-gap: 10px;
}
[data-tela="avarias-celular-conta-corrente"] .avc-faixa-titulo-texto {
min-width: 170px; /* medido: da folga para o titulo respirar antes de decidir empilhar o periodo */
}
/* Quando o periodo cai para a linha de baixo, ele fica LARGURA CHEIA (nunca colado na ponta
esquerda, sozinho): mais facil de tocar, e e como o resto desta tela trata controle empilhado. */
[data-tela="avarias-celular-conta-corrente"] .avc-faixa-titulo > .av-periodo {
flex-basis: 100%;
}
[data-tela="avarias-celular-conta-corrente"] {
/* Os quatro cartoes do topo: fundo claro + circulo do icone, um par por `tom`
(negativo/positivo/alerta). Cartoes 2 e 3 tem o MESMO `tom` ("positivo") nos dados, e a ficha
mediu fundos quase identicos entre eles (#f1f8e1 e #f3f9e4) e icones da "mesma familia"
(#476403 e #3f5903) -- por isso um par so de variaveis cobre os dois, em vez de inventar uma
quarta variante para uma diferenca que a propria ficha chama de ruido de JPEG. */
--acc-kpi-bg-negativo: #fceeee;
--acc-kpi-icone-negativo: #911424;
--acc-kpi-bg-positivo: #f1f8e1;
--acc-kpi-icone-positivo: #476403;
--acc-kpi-bg-alerta: #fbebde;
--acc-kpi-icone-alerta: #ae4321;
/* A pilula ativa do alternador e das abas do detalhe: o mesmo verde quase preto do cartao de
titulo desta tela (`#243301`, ver avarias-celular.css), repetido aqui porque este arquivo nao
importa variavel de outro -- CSS nao tem import de token entre arquivos sem duplicar o valor. */
--acc-pilula-ativa: #243301;
}
/* ============================================================
OS QUATRO CARTOES DO TOPO (bloco 3 do desenho)
============================================================ */
.avcc-kpis {
display: grid;
gap: 10px;
/* DOIS POR LINHA NO CELULAR, quatro quando o recipiente permitir (tablet, ou a mesma tela dentro
de um contexto mais largo): 4 colunas de 150px exigem ~636px so de cartao, que nenhum iPhone
entrega. `auto-fit`/`minmax` decide pela LARGURA DE VERDADE, nunca por um numero de tela
chutado -- a mesma logica da secao 9 do contrato, so que aplicada a cartoes de numero em vez
de par de grafico. */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
padding: 12px 16px 4px;
}
.avcc-kpi {
align-items: center;
background: var(--acc-kpi-bg-positivo);
border-radius: 12px; /* medido: ~12px nos cartoes de numero, secao 4 da ficha */
display: flex;
gap: 10px;
min-width: 0;
padding: 12px;
}
.avcc-kpi--negativo {
background: var(--acc-kpi-bg-negativo);
}
.avcc-kpi--alerta {
background: var(--acc-kpi-bg-alerta);
}
.avcc-kpi-icone {
align-items: center;
background: var(--acc-kpi-icone-positivo);
border-radius: 50%;
color: #fff;
display: flex;
flex: none;
height: 34px;
justify-content: center;
width: 34px;
}
.avcc-kpi--negativo .avcc-kpi-icone {
background: var(--acc-kpi-icone-negativo);
}
.avcc-kpi--alerta .avcc-kpi-icone {
background: var(--acc-kpi-icone-alerta);
}
.avcc-kpi-icone svg {
height: 18px;
width: 18px;
}
/* `min-width: 0` E OBRIGATORIO AQUI: `.avcc-kpi-corpo` e o SEGUNDO filho de um `display: flex`
(`.avcc-kpi`), e todo item flexivel nasce com `min-width: auto` -- "nunca menor que a palavra
mais comprida dentro dele" (a mesma armadilha que `.hbarra-rotulo`, em avarias.css, ja documenta
pelo nome). Sem isto, o rotulo "% Recuperação (Valor)" empurrava o cartao inteiro para fora da
coluna de 150px do grid, e a pagina ganhava rolagem lateral -- MEDIDO no palco desta tarefa. */
.avcc-kpi-corpo {
display: grid;
gap: 2px;
min-width: 0;
}
/* SEM `nowrap`/ellipsis: MEDIDO no palco desta tarefa que "% Recuperação (Valor)" (o rotulo mais
comprido dos quatro) cortava em "% Recuperação (…" numa coluna de 150px -- e o rotulo de um
cartao e informacao, nao decoracao; escondendo a metade dele com reticencias, so sobrava a
metade que menos importa. Deixar quebrar linha custa uma segunda linha de altura no cartao (o
grid do cartao ja acomoda isso sozinho) e nunca esconde palavra nenhuma.
COR FIXA, NUNCA `var(--avarias-texto)`: esse token troca para quase-branco (#ecf0e4) no tema
escuro do painel, PARA CONTRASTAR COM O FUNDO ESCURO DAS TELAS DE COMPUTADOR -- mas o fundo
deste cartao e uma identidade fixa (o rosa/menta/pessego da propria ficha, nunca escurece, ver o
comentario do topo do arquivo). MEDIDO no palco desta tarefa: com a variavel, o rotulo virava
quase-branco sobre um fundo quase-branco no tema escuro, contraste ~1:1, texto invisivel -- o
MESMO defeito que o comentario de avarias.css (dark-theme, "1,07:1, texto invisivel") ja
registra ter acontecido uma vez neste projeto; aqui aconteceu de novo, num cartao novo. */
.avcc-kpi-rotulo {
color: #1b230b;
font-size: clamp(11px, 3.2vw, 12px);
font-weight: 600;
}
/* PRETO PURO, e nao `--avarias-texto` (um verde bem escuro): a ficha mediu especificamente `#000`
nos valores destes cartoes, diferente do navy/verde que o resto da tela usa -- e como sao
cartoes de fundo claro (nunca escuro, nunca trocando com o tema, ver o comentario do topo do
arquivo), o contraste continua alto nos dois temas do painel. */
.avcc-kpi-valor {
color: #000;
font-size: clamp(14px, 4.6vw, 17px);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.15;
}
.avcc-kpi-secundario {
color: #000;
font-size: clamp(12px, 3.8vw, 14px);
font-weight: 700;
}
/* Cor fixa, mesma razao de `.avcc-kpi-rotulo` acima: este texto vive no MESMO cartao de fundo
fixo, e `var(--avarias-texto)` o apagaria no tema escuro do painel. */
.avcc-kpi-meta {
color: #1b230b;
font-size: clamp(11px, 3.4vw, 12px);
font-weight: 600;
}
/* A LINHA "vs. mes anterior" DO CHIP DE VARIACAO, ACHADA POR UM CRITICO A 1,48:1 DE CONTRASTE (o
minimo AA para texto de 11px e 4,5:1) -- PRATICAMENTE INVISIVEL, nos dois temas do painel, nos
tres cartoes que tem chip de variacao. A causa e a MESMA dos quatro consertos acima
(`.avcc-kpi-rotulo/-valor/-secundario/-meta`), so que faltou fazer no chip: `chipDeVariacao()`
(grafico.js) poe essa linha em `.chip-base`, e esta folha nao tinha NENHUMA regra para
`.chip-base` -- entao vale `avarias.css:162` (`color: var(--avarias-apoio-na-faixa)`), escrita
para o cartao ESCURO do computador (`.av-kpi`), nunca para um cartao de fundo CLARO FIXO como o
meu. Mesmo remendo: cor fixa, nunca a variavel que troca para quase-branco no escuro. As tres
telas irmas desta rodada (avarias-celular-devolucoes.css, -inicio.css, -promotor.css) ja tem o
mesmo remendo para o mesmo defeito nos cartoes delas. */
.avcc-kpi .chip-base {
color: #1b230b;
}
/* O NUMERO DO CHIP ("12,3%") TINHA O MESMO DEFEITO DA LINHA DE APOIO ACIMA, so que a causa nao
era falta de regra: `avarias.css` ja escreve `.chip-variacao.ruim{color:var(--avarias-vermelho)}`
/ `.bom{color:var(--avarias-verde-alta)}`, mas `assets/css/fdv-atacado-pedido.css` (outro
modulo, nao meu nesta rodada) declara um `.chip-variacao.ruim`/`.bom` PROPRIO, MESMA
especificidade (duas classes), carregado DEPOIS -- e aponta para `--fdv-vermelho`/
`--fdv-verde-alta`, que so existem dentro de `.tela-fdv`. Um `var()` que nao resolve invalida a
declaracao inteira, e `color` cai para o herdado (o texto quase-branco do tema escuro do
painel) sobre o fundo claro fixo do cartao -- medido pelo portao de tema escuro. Escopado por
`data-tela` (tres selecionadores) pra vencer a colisao sem mexer no arquivo do outro modulo. */
[data-tela="avarias-celular-conta-corrente"] .chip-variacao.ruim {
color: var(--avarias-vermelho-texto);
}
[data-tela="avarias-celular-conta-corrente"] .chip-variacao.bom {
color: var(--avarias-verde-texto);
}
/* ============================================================
OS TRES FILTROS (bloco 4): caixa propria com icone + rotulo/valor em duas linhas + chevron.
`.av-filtro` (herdada) nao serve de base aqui porque naquela classe o rotulo fica FORA da caixa
do