/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* O que e so de as telas 1, 2 e 3 do Atacado (escolher a rede, visao da rede, produtos da rede).
   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. */

/* ============================================================
   TELA 1, "fdv-rede": a UNICA das tres cuja pagina inteira e verde escuro, nao o cinza claro
   padrao de fdv.css. Amostrado por MODA (Pillow, regiao lisa, nunca um pixel so) no recorte 3x do
   desenho ampliado salvo durante a extracao: caixa (0,200)-(30,260) do PNG deu rgb(0,42,32), que
   bate EXATO com --fdv-faixa-escura ja definido em fdv.css -- por isso reaproveita o token em vez
   de duplicar a cor. Nas telas 2 e 3 a pagina volta a ser --fdv-pagina (o cabecalho e que e
   escuro), entao este bloco fica so aqui. */
.fdv-rede {
  background: var(--fdv-faixa-escura);

  /* A faixa clara do rodape ("Relacionamentos que geram..."), amostrada por moda na caixa
     (550,1930)-(900,1990) do mesmo recorte: rgb(187,220,203) = #ced9b5. Mais saturado que
     --fdv-verde-claro (#eef3e3, quase branco): e um verde que so aparece nesta faixa, sobre um
     fundo que e SEMPRE escuro (tema claro ou escuro, porque a pagina inteira desta tela e a faixa
     escura, invariavel com o tema -- ver o comentario dela acima). Por isso este token, como
     --fdv-faixa-escura, NAO muda no tema escuro: contraste calculado uma vez, vale para os dois. */
  --fdv-rede-faixa-clara: #ced9b5;
}
.fdv-rede-saudacao {
  color: var(--fdv-texto-claro);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fdv-rede-ola {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}
.fdv-rede-pergunta {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
}
.fdv-rede-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* A faixa verde do rodape (tela 1) reusa o "tom" de notaFdv() -- mesma tecnica de `.fdv-nota.alerta`
   em fdv.css, so que a folha e a cor moram aqui porque so esta tela usa tom="verde". */
.fdv-nota.verde {
  background: var(--fdv-rede-faixa-clara);
  border-radius: 10px;
  /* `--fdv-botao` e nao `--fdv-verde-tinta`: o fundo desta faixa nao muda com o tema, entao a letra
     tambem nao pode mudar (a tinta clara do escuro dava 1,09:1 aqui, medido na r38). */
  color: var(--fdv-botao);
  font-weight: 700;
  padding: 12px 14px;
}
.fdv-nota.verde svg {
  height: 22px;
  width: 22px;
}

/* ============================================================
   ESTADO VAZIO E AVISO, REUSADOS NAS TRES TELAS. `.fdv-rede-aviso` segue a MESMA tecnica de
   `.fdv-base-aviso` em fdv.css (`:empty { display:none }`, texto trocado no proximo quadro para o
   aria-live anunciar de novo), mas como elemento normal do fluxo, nao `position:absolute`: aquela
   classe e ancorada em `.fdv-base` especificamente, e reusa-la fora dali quebraria o posicionamento. */
.fdv-rede-vazio {
  padding: 14px 12px;
}
.fdv-rede-aviso {
  margin: 0;
}
.fdv-rede-aviso:empty {
  display: none;
}

/* ============================================================
   CARTAO "VENDA DO MES" (tela 2): a barra de progresso de indicadorFdv() so desenha a barra, sem
   numero do lado. Para repetir o "78%" do desenho na MESMA linha da barra, os dois sao montados
   juntos no slot `fim`, reaproveitando .fdv-progresso (que ja existe em fdv.css) dentro de uma
   linha flex propria -- sem tocar a casca. */
.fdv-indicador-progresso-linha {
  align-items: center;
  display: flex;
  gap: 6px;
}
.fdv-indicador-progresso-linha .fdv-progresso {
  flex: 1 1 auto;
}
.fdv-indicador-progresso-pct {
  color: var(--fdv-texto-apoio);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
}

/* ============================================================
   TELA 2, aba "Lojas da rede": busca + "Selecionar todas" na mesma linha.
   ============================================================ */
.fdv-rede-aba-conteudo[data-aba-conteudo="lojas"] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fdv-rede-busca-linha {
  display: flex;
  gap: 8px;
}
.fdv-rede-busca-linha .fdv-busca {
  flex: 1 1 auto;
  min-width: 0;
}
.fdv-rede-selecionar-todas {
  align-items: center;
  background: var(--fdv-verde-claro);
  border: 0;
  border-radius: 10px;
  /* --texto, nao --botao: esta pilula fica sobre --fdv-verde-claro, que O TEMA ESCURO troca para
     um verde quase preto (fdv.css). --fdv-texto troca junto (claro no tema escuro), --fdv-botao
     nao -- usar --botao aqui deixaria o texto ilegivel no escuro (verde sobre verde quase preto). */
  color: var(--fdv-texto);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  white-space: nowrap;
}
.fdv-rede-selecionar-todas-icone {
  align-items: center;
  background: var(--fdv-botao);
  border-radius: 999px;
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  height: 20px;
  justify-content: center;
  width: 20px;
}
.fdv-rede-selecionar-todas-icone svg {
  height: 12px;
  width: 12px;
}

/* A lista de lojas e UM cartao continuo (linhas com borda embaixo), nao cartoes separados: e o
   que o desenho mostra, diferente das fileiras de .fdv-linha (tela 1) que sao cartoes proprios. */
.fdv-rede-lojas-lista {
  background: var(--fdv-cartao);
  border: 1px solid var(--fdv-borda);
  border-radius: 12px;
  overflow: hidden;
}
.fdv-rede-loja-linha {
  align-items: center;
  border-bottom: 1px solid var(--fdv-borda);
  cursor: pointer;
  display: flex;
  /* 8px, nao 10: a 390px, com os 10 nomes reais da bandeira Mateus, o mais longo ("Mateus São
     Cristóvão") pedia 141px e so sobravam 135px depois do checkbox + compra + status. Cada px de
     vao entre os 4 blocos da linha e 3px a menos pro nome (3 vaos), entao apertar o vao e o jeito
     mais barato de fechar 6px sem mexer em fonte nem em padding da linha inteira. */
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
}
.fdv-rede-loja-linha:last-child {
  border-bottom: 0;
}
.fdv-rede-loja-linha:hover {
  background: var(--fdv-cartao-fraco);
}
/* Caixa de selecao NATIVA com accent-color, nao um widget desenhado a mao: ponytail, ganha
   teclado e leitor de tela de graca (rung 4, "recurso nativo cobre isso"), o preco e nao copiar o
   quadrado 100% igual ao desenho em todo navegador. Se isso importar mais que a cor certa algum
   dia, o proximo passo e <input> escondido + <span> customizado. */
.fdv-rede-loja-linha input[type="checkbox"] {
  accent-color: var(--fdv-botao);
  flex: 0 0 auto;
  height: 22px;
  margin: 0;
  width: 22px;
}
.fdv-rede-loja-texto {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.fdv-rede-loja-nome {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdv-rede-loja-cidade {
  color: var(--fdv-texto-apoio);
  font-size: 11px;
}
.fdv-rede-loja-compra,
.fdv-rede-loja-status {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2px;
}
.fdv-rede-loja-rotulo {
  color: var(--fdv-texto-rotulo);
  font-size: 11px; /* era 10 ate a r38 (27/09/2026): piso de letra de 11px da regua da Apple */
  line-height: 1.15;
  white-space: nowrap;
}
/* Depois de trocar data() por diaMes() (11/09, sem ano), o ROTULO "Última compra" passou a ser
   mais largo que o proprio valor (64px contra 33px, medido no navegador) -- entao ele, e nao mais
   a data, e quem ditava a largura da coluna e roubava espaco do nome da loja. So aqui ele quebra
   em duas linhas (max-width do tamanho da palavra mais larga), porque so aqui o rotulo e mais
   largo que o valor; em "Status" e o oposto (o selo e que manda), entao aquele continua numa linha. */
.fdv-rede-loja-compra .fdv-rede-loja-rotulo {
  max-width: 48px;
  white-space: normal;
}
.fdv-rede-loja-data {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* ============================================================
   PRODUTO: emoji num circulo claro (tela 2 simplificada e tela 3 cheia usam a MESMA figura) e o
   botao redondo de "+" (so na tela 3, que e quem adiciona ao pedido).
   ============================================================ */
.fdv-produto-emoji {
  align-items: center;
  background: var(--fdv-cartao-fraco);
  border-radius: 999px;
  display: flex;
  flex: 0 0 auto;
  font-size: 24px;
  height: 48px;
  justify-content: center;
  line-height: 1;
  width: 48px;
}
/* 44x44: piso de toque de todo botao de acao (scripts/medir-tela-comum.mjs, 20/09/2026), o minimo
   das Human Interface Guidelines da Apple. O circulo do desenho e menor, mas ele e botao de
   adicionar produto ao pedido -- errar o toque aqui e nao adicionar o produto sem perceber. */
.fdv-produto-mais {
  align-items: center;
  background: var(--fdv-botao);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}
.fdv-produto-mais:hover {
  background: var(--fdv-botao-pressionado);
}
.fdv-produto-mais:focus-visible {
  outline: 2px solid var(--fdv-texto);
  outline-offset: 2px;
}
.fdv-produto-mais svg {
  height: 20px;
  width: 20px;
}

/* Texto de uma linha de produto: nome + preco/kg + (se houver) a linha vermelha da quarta-feira.
   Reusado pela lista completa da tela 3 (.fdv-rede-produto-linha) e pela aba simplificada da
   tela 2 (.fdv-rede-produto-simples), para as duas nunca divergirem em como mostram o mesmo dado. */
.fdv-rede-produto-texto {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fdv-rede-produto-nome {
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdv-rede-produto-preco {
  color: var(--fdv-texto);
  font-size: 13px;
  font-weight: 600;
}
.fdv-rede-produto-quarta {
  color: var(--fdv-vermelho-texto);
  font-size: 12px;
  font-weight: 700;
}
.fdv-rede-produtos-lista,
.fdv-rede-aba-conteudo[data-aba-conteudo="produtos"] {
  background: var(--fdv-cartao);
  border: 1px solid var(--fdv-borda);
  border-radius: 12px;
  overflow: hidden;
}
.fdv-rede-produto-linha,
.fdv-rede-produto-simples {
  align-items: center;
  border-bottom: 1px solid var(--fdv-borda);
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
}
.fdv-rede-produto-linha:last-child,
.fdv-rede-produto-simples:last-child {
  border-bottom: 0;
}

/* r81 (03/10/2026): a faixa verde do rodape era um verde-claro fixo (#ced9b5) e, no escuro, uma tira clara com matiz sobre o grafite.
   No escuro leva o tom de assunto verde do painel. No claro nada mudou. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .fdv-nota.verde {
    background: var(--tom-verde-fundo);
    color: var(--tom-verde);
  }
}
:root[data-tema="escuro"] .fdv-nota.verde {
  background: var(--tom-verde-fundo);
  color: var(--tom-verde);
}