/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* O que e so de as telas 8, 9 e 10 do Atacado (devolucoes da rede, por loja e por produto).
   Os tokens de cor, o cabecalho, a barra de baixo e os primitivos moram em assets/css/fdv.css, que
   o index.html carrega ANTES desta folha. Aqui so entra o que aquelas telas tem de proprio, e
   sempre pelo token (--fdv-*), nunca por um hex cru: hex cru nao muda no tema escuro e o texto
   some no fundo. */

/* ============================================================
   BASE DOS GRAFICOS NOVOS (rosca, colunas com linha) DENTRO DO MODULO FDV.

   POR QUE ISTO MORA AQUI E NAO EM assets/css/grafico.js/componentes.css: `assets/js/grafico.js` e
   do painel inteiro, mas o CSS de cada tipo de grafico mora hoje SO em avarias.css (comentario la:
   "no dia em que outra tela pedir um deles, esta parte sobe para componentes.css"). Estas tres
   telas sao as PRIMEIRAS do modulo FDV a pedir rosca()/colunasComLinha() (conferido: nenhum outro
   fdv*.css e fdv*.js usa essas classes), entao a folha compartilhada nao tinha nada para elas.

   O GAP MEDIDO: avarias.css estiliza `.grafico-colunas-linha .grade-linha`, `.chip-variacao.bom`,
   `.chip-variacao.ruim` e `.chip-base` com tokens `--avarias-*`, que so existem DENTRO de
   `.tela-avarias` (conferido em avarias.css: `--avarias-grade`/`--avarias-apoio-na-faixa` nascem
   la, nao em :root). Fora daquele escopo esses `var()` nao resolvem, a declaracao inteira e
   ignorada, e o resultado e invisivel: grade sem cor (linha que nao aparece) e chip "bom"/"ruim"
   com a cor de texto padrao (a diferenca vermelho/verde do desenho some). Isto afeta QUALQUER tela
   fdv que use chipDeVariacao (fdv-rede-visao.js, que nao e minha, ja usa), nao so estas tres -- por
   isso o conserto abaixo escopa em `.tela-fdv` (a raiz de TODAS as 15 telas), nao em `.fdv-devolucoes`:
   e a mesma correcao, so que no lugar certo para valer no modulo inteiro, do jeito que o proprio
   comentario de avarias.css preve ("sobe" quando outra tela pedir). Nao editei avarias.css: cor de
   outro modulo e dele.

   O BLOCO DE `.grafico-colunas-linha` (grade/rotulo-y/rotulo-x) FICA AQUI MESMO SEM NENHUMA DAS
   MINHAS TRES TELAS USAR colunasComLinha HOJE: a tela 8 chegou a usar essa funcao numa primeira
   versao e trocou para colunasRotuladas() (comentario grande em fdv-devolucoes.js explica o porque
   -- o desenho do James nao tem eixo). Removi so o cosmetico que so fazia sentido com aquele
   grafico (linha tracejada, pontos escondidos); o conserto de token continua de pe porque e
   infraestrutura do modulo inteiro, nao desta tela, e a proxima tela fdv que pedir colunasComLinha
   encontra a cor certa pronta. */
.tela-fdv .grafico-colunas-linha .grade-linha {
  stroke: var(--fdv-borda);
  stroke-width: 1;
}
.tela-fdv .grafico-colunas-linha .rotulo-y {
  fill: var(--fdv-texto-rotulo);
}
.tela-fdv .grafico-colunas-linha .rotulo-x,
.tela-fdv .grafico-colunas-rotuladas .rotulo-x {
  fill: var(--fdv-texto-rotulo);
}
.tela-fdv .chip-variacao.ruim {
  color: var(--fdv-vermelho-texto);
}
.tela-fdv .chip-variacao.bom {
  color: var(--fdv-verde-texto);
}
.tela-fdv .chip-base {
  color: var(--fdv-texto-rotulo);
}
.tela-fdv .grafico-rosca .rosca-centro,
.tela-fdv .grafico-rosca .rosca-centro-apoio {
  fill: var(--fdv-texto);
}

/* ============================================================
   NOVOS TOKENS DESTA FOLHA, os dois que o desenho pede e que nao existem em fdv.css.

   `--fdv-emblema-fundo`/`--fdv-emblema-icone`: o selo lilas quadrado com o desenho dentro, no alto
   das telas 9 e 10 (amostrado por MODA de uma regiao lisa do proprio JPEG, nunca um pixel solto --
   scratchpad/telas-james-forca-de-vendas/WhatsApp Image 2026-09-19 at 12.03.01 (1).jpeg, banda
   (770,560)-(815,600), moda #c0baea). E a UNICA cor fora da paleta --fdv-* (que e toda verde) que
   o desenho pede aqui, entao vira token novo em vez de hex cru espalhado. O desenho AI-generated
   desenhou uma forma ambigua dentro do circulo branco (nem aperto de mao nem losango reconheciveis
   de verdade); o icone que cada tela usa e o mais proximo do CATALOGO (loja/produtos), nao uma
   copia a mao dessa forma -- comentario no arquivo de cada tela explica a troca. */
.tela-fdv {
  --fdv-emblema-fundo: #c0baea;
  --fdv-emblema-icone: #4c46a8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tela-fdv {
    --fdv-emblema-fundo: #34306e;
    --fdv-emblema-icone: #c9c4f2;
  }
}
:root[data-tema="escuro"] .tela-fdv {
  --fdv-emblema-fundo: #34306e;
  --fdv-emblema-icone: #c9c4f2;
}

/* ============================================================
   A PILULA DE PERIODO (telas 8, 9 e 10). Fechada, e a pilula clara do desenho: calendario + o mes
   + uma seta fina (o desenho tem um "v" pequeno na ponta, reaproveitado de icone("proximo")
   deitado 90 graus, em vez de desenhar uma seta nova). Um toque abre as duas datas reais, so
   leitura -- ver o comentario de `pilulaDePeriodo()` em cada um dos tres arquivos desta pasta para
   o porque (scripts/testar-documentacao.sh cobra a prova no ARQUIVO, nao na palavra de quem
   escreveu).

   `av-periodo` (avarias.css) nasceu para a FAIXA ESCURA do computador: borda verde-escura, texto
   branco, `display:grid` de duas linhas (rotulo em cima, campos embaixo). Aqui o cartao e CLARO e
   a pilula e uma linha so, entao `.fdv-periodo` reescreve tudo por baixo -- nunca editar
   avarias.css, que e de outro modulo (a mesma regra do bloco acima). */
.fdv-periodo-disclosure {
  flex: 0 0 auto;
  position: relative;
}
.fdv-periodo {
  align-items: center;
  background: var(--fdv-cartao);
  border: 1px solid var(--fdv-borda-forte);
  border-radius: 8px;
  color: var(--fdv-texto);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  list-style: none;
  /* 44px de altura (r38, 27/09/2026): com 38px a pilula ficava abaixo do piso de toque da Apple. */
  min-height: 44px;
  padding: 8px 10px;
  white-space: nowrap;
}
.fdv-periodo::-webkit-details-marker {
  display: none;
}
.fdv-periodo:hover {
  background: var(--fdv-cartao-fraco);
}
.fdv-periodo:focus-visible {
  outline: 2px solid var(--fdv-botao);
  outline-offset: 2px;
}
.fdv-periodo svg {
  color: var(--fdv-texto-apoio);
  flex: 0 0 auto;
  height: 15px;
  width: 15px;
}
.fdv-periodo-seta svg {
  color: var(--fdv-texto-rotulo);
  height: 11px;
  transform: rotate(90deg);
  transition: transform var(--fdv-transicao, 0.15s ease);
  width: 11px;
}
.fdv-periodo-disclosure[open] .fdv-periodo-seta svg {
  transform: rotate(-90deg);
}
/* Os dois campos reais, SO LEITURA: provam a janela exata sem fingir que trocam o mes (so existe
   UM mes no modulo de exemplo).
   NO FLUXO, NAO MAIS SOLTA POR CIMA (r38, 27/09/2026). Ate aqui a caixa era `position: absolute`
   ancorada na direita da pilula, para abrir sem empurrar nada. A 360px a pilula desce para a
   esquerda do cabecalho e a caixa, presa na direita dela, nascia de -97 a 193px: a metade da
   esquerda fora da tela; e no computador ela cobria os tres cartoes de numero logo abaixo. No
   fluxo ela abre embaixo da pilula, empurra os cartoes e nunca passa da borda. */
.fdv-periodo-campos {
  background: var(--fdv-cartao);
  border: 1px solid var(--fdv-borda);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
}
/* FECHADA, A CAIXA NAO EXISTE: o <details> fechado esconde o conteudo, mas o Chromium ainda da a ela
   uma caixa de 156x98 no lugar onde abriria, por cima do terceiro cartao de numero, e o portao de
   caixa encostada (scripts/testar-colisao.mjs) mede essa caixa (r38, 27/09/2026). */
.fdv-periodo-disclosure:not([open]) > .fdv-periodo-campos {
  display: none;
}
.fdv-periodo-campos input {
  background: var(--fdv-cartao-fraco);
  border: 1px solid var(--fdv-borda);
  border-radius: 6px;
  color: var(--fdv-texto);
  color-scheme: light dark;
  font-family: inherit;
  /* 16px minimo (regra 8 do contrato): abaixo disso o Safari do iPhone da zoom na tela inteira ao
     focar. Mesmo campo sendo so-leitura, ele continua focavel por teclado e leitor de tela. */
  font-size: 16px;
  min-width: 0;
  padding: 4px 6px;
  width: 132px;
}

/* ============================================================
   TELA 8: bloco de titulo "Devolucoes: <rede>" com a pilula de periodo na ponta, o aviso "Acima da
   meta" em vermelho dentro do terceiro cartao, e o cosmetico do grafico de evolucao.
   ============================================================ */
.fdv-devolucoes-cabeca {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
.fdv-devolucoes-titulo-bloco {
  min-width: 0;
}
.fdv-devolucoes-titulo {
  color: var(--fdv-texto);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}
.fdv-devolucoes-subtitulo {
  color: var(--fdv-texto-apoio);
  font-size: 13px;
  line-height: 1.3;
  margin: 4px 0 0;
}
/* O "Acima da meta" do terceiro cartao (regra: cor vem da comparacao com a meta -- ver o
   comentario em fdv-devolucoes.js). Reaproveita o tamanho de .fdv-indicador-apoio, so troca a cor. */
.fdv-indicador-aviso {
  color: var(--fdv-vermelho-texto);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}
.fdv-indicador-aviso.ok {
  color: var(--fdv-verde-texto);
}
/* NEUTRO (conserto C, achado 4 da auditoria de 19/09/2026): quando nao ha percentual para comparar
   com a meta (rede recem cadastrada, periodo sem fechamento), o aviso nao pode sair vermelho nem
   verde -- as duas cores SAO uma opiniao ("acima" ou "dentro" da meta), e sem numero dos dois
   lados da conta a tela nao tem opiniao nenhuma para dar. */
.fdv-indicador-aviso.neutro {
  color: var(--fdv-texto-apoio);
}

/* A LINHA DE META por cima do grafico de evolucao ("Meta / 2,0%" no desenho do James). E HTML,
   nunca um elemento novo dentro do <svg> de colunasRotuladas() -- ver o comentario grande de
   `posicionarLinhaDeMeta()` em fdv-devolucoes.js para a conta que acha o `top` em pixel.

   A COLUNA DO ROTULO E RESERVADA DE VERDADE, NUNCA UMA MARGEM POR CIMA: `.fdv-evolucao-grafico` e
   um flex row com DUAS caixas -- `.fdv-evolucao-grafico-area` (o grafico + a linha, `flex:1 1
   auto`) e `.fdv-evolucao-coluna-meta` (so o rotulo, 40px fixos). Como colunasRotuladas() mede a
   largura de VERDADE do proprio container (ResizeObserver) para desenhar as quatro colunas, ela
   redesenha AUTOMATICAMENTE dentro dos 40px a menos -- a barra de Setembro nunca chega perto da
   coluna do rotulo, sem precisar adivinhar margem nenhuma (a primeira versao So recuava a LINHA
   46px e deixava o GRAFICO do mesmo jeito, e a barra de Setembro colidia com a caixa do rotulo:
   medido com getBoundingClientRect() das duas, `rotuloSobrepoeBarraDeSetembro: true`). */
.fdv-evolucao-grafico {
  display: flex;
  gap: 4px;
}
.fdv-evolucao-grafico-area {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
.fdv-evolucao-coluna-meta {
  flex: 0 0 40px;
  position: relative;
}
.fdv-evolucao-linha-meta {
  border-top: 1px dashed var(--fdv-verde-medio);
  left: 0;
  position: absolute;
  right: 0;
}
.fdv-evolucao-rotulo-meta {
  color: var(--fdv-verde-texto);
  display: flex;
  flex-direction: column;
  font-size: 11px; /* era 10 ate a r38 (27/09/2026): piso de letra de 11px da regua da Apple */
  font-weight: 700;
  left: 0;
  line-height: 1.2;
  position: absolute;
  right: 0;
  text-align: right;
  /* Centralizado NA linha (nao abaixo dela): translateY(-50%) sobre o mesmo `top` que a linha usa. */
  transform: translateY(-50%);
  white-space: nowrap;
}

/* O AVISO GERAL DA TELA 8 SO EXISTE QUANDO HA TEXTO. `.fdv-nota.alerta` (fdv.css, nao e meu) poe
   fundo ambar e padding SEMPRE, mesmo vazio -- visto na primeira foto do palco: uma tira ambar sem
   letra nenhuma sobrando embaixo dos tres atalhos, porque `avisoGeral` nasce como `<p>` vazio e so
   ganha texto se `avisar()` disparar (o que hoje nunca acontece, as tres rotas existem). `:empty`
   escapa por ser SO da minha classe, nunca tocando a regra `.fdv-nota.alerta` compartilhada. */
.fdv-devolucoes-aviso:empty {
  display: none;
}

/* ============================================================
   TELAS 9 E 10: cabecalho com o emblema lilas + titulo, e a tabela.
   ============================================================ */
.fdv-devolucoes-secao-cabeca {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}
.fdv-devolucoes-secao-icone {
  align-items: center;
  background: var(--fdv-emblema-fundo);
  border-radius: 14px;
  display: flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.fdv-devolucoes-secao-icone svg {
  color: var(--fdv-emblema-icone);
  height: 20px;
  width: 20px;
}
.fdv-devolucoes-secao-texto {
  min-width: 0;
}
.fdv-devolucoes-secao-titulo {
  color: var(--fdv-texto);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}
.fdv-devolucoes-secao-apoio {
  color: var(--fdv-texto-apoio);
  font-size: 13px;
  margin: 2px 0 0;
}

/* ---------- cabecalho ordenavel, comum as telas 9 e 10 ---------- */
.fdv-tabela th[data-ordenavel] {
  padding: 0;
}
.fdv-tabela .fdv-ordenar {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  gap: 3px;
  /* 1px de margem de cada lado (r38, 27/09/2026): os botoes de ordenar de duas colunas vizinhas
     encostavam um no outro (0px), e o da coluna "%" tem so 37px de largura a 360 (regra "grudados"
     da auditoria de tela). Alargar a coluna para 44 empurrava a ultima coluna para fora da caixa. */
  margin: 0 1px;
  padding: 7px 8px;
  width: calc(100% - 2px);
}
.fdv-tabela .fdv-ordenar svg {
  flex: 0 0 auto;
  height: 11px;
  width: 11px;
}
.fdv-tabela th[aria-sort] {
  background: var(--fdv-verde-claro);
}
.fdv-tabela th[aria-sort] .fdv-ordenar {
  color: var(--fdv-verde-tinta);
}

/* percentual colorido pela comparacao com a meta (vermelho acima, ambar perto, verde abaixo --
   ver o comentario em fdv-devolucoes-loja.js e fdv-devolucoes-produto.js para o limite do ambar) */
.fdv-tabela .destaque-vermelho {
  color: var(--fdv-vermelho-texto);
  font-weight: 700;
}
.fdv-tabela .destaque-ambar {
  color: var(--fdv-ambar-texto);
  font-weight: 700;
}
.fdv-tabela .destaque-verde {
  color: var(--fdv-verde-texto);
  font-weight: 700;
}

/* ============================================================
   TELA 10: o bloco ambar "Principais motivos da devolucao" com a pizza e a legenda.
   ============================================================ */
.fdv-motivos-bloco {
  background: var(--fdv-ambar-fundo);
  border-radius: 12px;
  padding: 12px;
}
.fdv-motivos-corpo {
  align-items: center;
  display: flex;
  gap: 16px;
}
.fdv-motivos-pizza {
  flex: 0 1 140px;
  min-width: 0;
}
.fdv-motivos-legenda {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.fdv-motivos-linha {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}
.fdv-motivos-bolinha {
  border-radius: 999px;
  flex: 0 0 auto;
  height: 10px;
  width: 10px;
}
.fdv-motivos-rotulo {
  color: var(--fdv-texto);
  flex: 1 1 auto;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdv-motivos-percentual {
  color: var(--fdv-texto-apoio);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
}
/* A 390px a pizza empilha ACIMA da legenda em vez de espremer as duas lado a lado: 140px de disco
   + qualquer legenda de "Avaria no transporte" nao cabem juntas na largura util do celular sem
   passar pela regra 7 do contrato (min-width:0 nao basta quando o SOMA das duas partes fixas
   ultrapassa 390px). */
@container (max-width: 420px) {
  .fdv-motivos-corpo {
    flex-direction: column;
  }
  .fdv-motivos-pizza {
    flex-basis: auto;
    width: 100%;
  }
}

/* r81 (03/10/2026): o bloco "Principais motivos da devolucao" ocupa um terco da tela; com o ambar do tom de assunto de fundo ele
   virava um bloco marrom grande no escuro. No escuro leva o grafite do painel; o ambar fica nos selos pequenos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tela-fdv .fdv-motivos-bloco {
    background: var(--superficie-2);
  }
}
:root[data-tema="escuro"] .tela-fdv .fdv-motivos-bloco {
  background: var(--superficie-2);
}