/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ============================================================
   AS CINCO TELAS VITRINE DO GRUPO JAP (T033, r98, 04/10/2026): Vendas, Quem mais compra, O que vende, Compras e Riscos.
   So o que as pecas da r95 (assets/css/vitrine.css) nao trazem e estas telas precisam. NENHUMA COR ESCRITA: tudo sai
   dos tokens, entao claro e escuro trocam sozinhos. Carregada logo depois de vitrine.css; tirar a linha do index.html
   devolve o desenho da r95 sem estas regras.
   ============================================================ */

/* os selos de estado do produto (no vermelho, falta custo, gira mais que rende) e a fatia do total, colados na barra
   do ranking e na linha da tabela: quebram de linha juntos, nunca empurram a barra */
.selos-do-produto {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-1);
}
.grafico-hbarras .hbarra-apoio .selos-do-produto {
  justify-content: flex-end;
}

/* o halter do terceiro risco cabe num terco do cartao: a regua ocupa a largura toda */
.riscos-halter .gr-hal {
  width: 100%;
}

/* NO CELULAR, OS LADRILHOS DE APOIO ANDAM EM PARES (R6 secao 1: "4 cartoes de numero empilhados ocupam quase duas
   telas"): o heroi fica sozinho na largura toda e os outros dividem a linha de dois em dois. So na grade que tem
   heroi (as telas vitrine); o numero encolhe com o cartao, nunca corta. */
@container conteudo (max-width: 599.98px) {
  .grade:has(> .indicador.vt-heroi) > .indicador.lado:not(.vt-heroi) {
    grid-column: span 6;
  }
  /* o piso de 12 px e o da regua da Apple (letra nunca abaixo de 11 px): sem ele, a 390 o 12cqi dava 10,68 px (06/10) */
  .grade:has(> .indicador.vt-heroi) > .indicador.lado:not(.vt-heroi) .indicador-valor .numero {
    font-size: clamp(12px, 12cqi, 24px);
  }
}

/* AS RESSALVAS DE VENDAS EM TINTA CHEIA (regua da Apple, 04/10/2026): o cinza de apoio de `.aviso-dados ul` sobre o
   fundo de alerta media 4,43:1 em 13 px no tema claro, abaixo do 4,5:1 de texto. A linha leva numero (o que ficou
   fora), entao sai na cor do texto. */
.ressalvas-vendas ul {
  color: var(--foreground);
}

/* A FOTO DA FRUTA ANTES DO NOME, nas listas de produto das telas da JAP fora das cinco do James (Perdas, Riscos; r102,
   07/10/2026, o Carvalho: "coloque as fotos das frutas tambem nas telas da jap onde diz respeito a elas"). Redonda e
   de 24 px (a `.fruta-foto` de jap-analise.css tem 28); produto SEM foto nao desenha nada, mas o espaco dela fica, vazio,
   para o nome alinhar com os que tem. A foto e enfeite: o nome continua escrito ao lado. */
.produto-com-foto {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}
.produto-com-foto > .fruta-foto,
.produto-com-foto > .fruta-vazia {
  flex: none;
  height: 24px;
  width: 24px;
}