/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* O que e so de as cinco telas do Balcao.
   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. */

/* ============================================================
   TOKEN NOVO: --fdv-azul-fundo. fdv.css so tem fundo verde/ambar/vermelho; o desenho do Balcao usa
   uma faixa azul clara que nenhum dos tres cobre, e ela se repete em VARIOS blocos (nunca so um):
   o painel de Limite/Utilizado/Vencido e os cartoes "Ultimo pedido"/"Media"/"Compras do mes" do
   passo 2, e a faixa "N itens | N kg" do passo 5. E por isso um TOKEN, nao uma cor solta num
   seletor so.
   AMOSTRADO com Pillow, pela MODA de uma regiao lisa (nunca um pixel solto: JPEG tem ruido), nos
   recortes ampliados 3x de scratchpad/telas-james-forca-de-vendas/WhatsApp Image 2026-09-19 at
   12.03.01 (2).jpeg:
     passo 5, faixa "N itens | N kg": regiao (60,840)-(640,855) do recorte -> moda #f1f5fe (37%)
     passo 2, atras de "Vencido":      regiao (30,660)-(300,675) do recorte -> moda #f2f6ff (33%)
     passo 2, cartao "Compras do mes": regiao (30,940)-(630,955) do recorte -> moda #f0f7ff (26%)
   As tres leituras caem no mesmo tom pastel (a diferenca e ruido de JPEG, nao cor diferente), entao
   viram UM token: o painel secundario padrao das cinco telas, com o mesmo raciocinio dos tres
   "fundo" que fdv.css ja define para verde/ambar/vermelho.
   O ESCURO SEGUE A MESMA REGRA DE fdv.css (linha 83 dali): dois blocos identicos, um para
   `prefers-color-scheme` (so quando ninguem escolheu tema) e um para `data-tema="escuro"`
   explicito. Sem escurecer este token, a faixa pastel ficaria clara sobre fundo escuro e o texto
   perderia contraste. */
.tela-fdv {
  --fdv-azul-fundo: #f1f5fe;
}
/* No escuro o painel fica no grafite da casa (--superficie-2), sem o azul-ardosia que ocupava 29% da tela de
   credito (critico K17, 03/10/2026): a cor fica para o selo e o icone. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tela-fdv {
    --fdv-azul-fundo: var(--superficie-2);
  }
}
:root[data-tema="escuro"] .tela-fdv {
  --fdv-azul-fundo: var(--superficie-2);
}

/* ============================================================
   O AVISO HONESTO LOCAL, reaproveitado pelas cinco telas (fdv-balcao-*.js) para os cliques sem
   destino: "Venda a vista (novo cliente)", "Ver dados" nao muda o rotulo mas usa aria-expanded,
   leitor de codigo de barras, "Ver pedidos do cliente", e a rota de avanco/volta quando
   rotas.modulo() ainda nao registrou o proximo passo. MESMA CARA do `.fdv-base-aviso` de fdv.css
   (faixa escura, texto branco), mas SEM a ancora `position: absolute` daquele -- aqui o aviso mora
   dentro do proprio corpo da tela, perto do controle que o disparou, entao ele empurra o layout em
   vez de flutuar por cima dele. `:empty` some por completo, do mesmo jeito que o de fdv.css. */
.fdv-balcao-aviso {
  background: var(--fdv-faixa-escura);
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  padding: 8px 12px;
  text-align: center;
}
.fdv-balcao-aviso:empty {
  display: none;
}

/* ============================================================
   LISTA DE LINHAS (clientes no passo 1, produtos no passo 3). So o espacamento vertical: cada linha
   ja se estiliza sozinha (linhaComChevron() no passo 1; div a mao no passo 3, comentada la). */
.fdv-balcao-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* ---------- PASSO 2: bloco do cliente (cabecalho + "Ver dados") ---------- */
.fdv-balcao-cliente-linha {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}
/* O BLOCO QUE "VER DADOS" ABRE E FECHA: CNPJ e o codigo por extenso. Nasce com `hidden` (o JS
   alterna `.hidden`), separado do cabecalho por um traco fino -- a mesma ideia de `.fdv-nota`, so
   que sem o icone de informacao, porque aqui quem abre ja sabe o que vai ver. */
.fdv-balcao-dados-extra {
  border-top: 1px solid var(--fdv-borda);
  color: var(--fdv-texto-apoio);
  font-size: 12px;
  margin-top: 10px;
  padding-top: 10px;
}
.fdv-balcao-dados-extra p {
  margin: 0 0 4px;
}
.fdv-balcao-dados-extra p:last-child {
  margin-bottom: 0;
}
.fdv-balcao-dados-extra b {
  color: var(--fdv-texto);
}
.fdv-balcao-observacoes-texto {
  color: var(--fdv-texto-apoio);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

/* ============================================================
   O PAINEL SECUNDARIO (--fdv-azul-fundo por padrao, `.verde` troca para --fdv-verde-claro): usado
   nas telas 2, 4 e 5 para agrupar numeros que no desenho NAO tem a borda branca do `.fdv-cartao`
   comum -- so o fundo pastel arredondado. Reaproveita `indicadorFdv()` por dentro (o `data-valor`
   que o portao confere continua saindo dali), so que sem a casca branca/bordada que aquele
   componente carrega por padrao: por isso o reset de `.fdv-indicador` aqui embaixo. */
.fdv-balcao-painel {
  background: var(--fdv-azul-fundo);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}
.fdv-balcao-painel.verde {
  background: var(--fdv-verde-claro);
}
.fdv-balcao-painel .fdv-indicador,
.fdv-balcao-totais .fdv-indicador {
  background: transparent;
  border: 0;
  padding: 0;
}
/* "Ultimo pedido" (passo 2) tem DUAS linhas de apoio (peso e data). indicadorFdv() so aceita UMA
   string de apoio; em vez de reescrever o primitivo compartilhado por causa de uma tela, o `\n` que
   fdv-balcao-credito.js manda dentro dessa string vira quebra de linha REAL, mas SO dentro de um
   painel do Balcao -- as outras 14 telas nunca usam esta classe, entao `.fdv-indicador-apoio` de
   fdv.css continua de uma linha so em todo o resto do modulo. */
.fdv-balcao-painel .fdv-indicador-apoio {
  white-space: pre-line;
}
/* O DESTAQUE DE UMA CELULA SO, dentro de uma fileira que divide o mesmo painel: "Disponivel" no
   passo 2, "Valor total" no passo 4. indicadorFdv() nao aceita uma classe extra no `<div>` de fora,
   entao quem chama envolve o indicador com esta classe (`h("div", {class:"fdv-balcao-destaque"},
   indicadorFdv(...))`) em vez de inventar um segundo componente de indicador so para o caso
   destacado. */
.fdv-balcao-destaque {
  background: var(--fdv-verde-claro);
  border-radius: 8px;
  padding: 6px 8px;
}
.fdv-balcao-vencido-linha {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

/* ============================================================
   PASSO 3: faixa do cliente + credito, busca com leitor de codigo de barras, lista de produtos com
   o contador de quantidade, e o par "Repetir ultimo pedido"/"Limpar".
   ============================================================ */
.fdv-balcao-faixa-cliente {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}
.fdv-balcao-faixa-cliente-nome {
  font-size: 16px;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdv-balcao-linha-busca {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.fdv-balcao-linha-busca .fdv-busca {
  flex: 1 1 auto;
  min-width: 0;
}
/* O BOTAO DO LEITOR DE CODIGO DE BARRAS: 44x44 (o mesmo alvo de toque do `.fdv-busca` ao lado, que
   ja tem 44px de altura por causa do padding do campo) -- exatamente o piso de toque que
   scripts/medir-tela-comum.mjs cobra de todo botao de acao (minimo das Human Interface Guidelines
   da Apple), desde antes de o piso do resto do modulo subir de 40 para 44 em 20/09/2026. */
.fdv-balcao-leitor {
  align-items: center;
  background: var(--fdv-cartao);
  border: 1px solid var(--fdv-borda-forte);
  border-radius: 10px;
  color: var(--fdv-texto-rotulo);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.fdv-balcao-leitor:hover {
  background: var(--fdv-cartao-fraco);
}
.fdv-balcao-leitor:focus-visible {
  outline: 2px solid var(--fdv-botao);
  outline-offset: 2px;
}
.fdv-balcao-leitor svg {
  height: 18px;
  width: 18px;
}

/* A LINHA DE PRODUTO: reaproveita `.fdv-linha` (fdv.css) por cima de um `<div>`, nao de um botao
   proprio (o comentario no topo de fdv-balcao-produtos.js explica o porque: o contador de
   quantidade e dois <button>, e botao dentro de botao e HTML invalido). `.fdv-linha` traz
   cursor:pointer e hover escuro pensados para um <button> clicavel; as duas regras abaixo cancelam
   os dois, porque a LINHA em si nao faz nada -- so os botoes "-" e "+" de dentro fazem. */
.fdv-balcao-produto-linha {
  cursor: default;
}
.fdv-balcao-produto-linha:hover {
  background: var(--fdv-cartao);
}
/* A FIGURA DO PRODUTO: o desenho usa foto de fruta, que este painel nao tem (decisao registrada no
   topo do .js). `.fdv-linha-inicio` (fdv.css) ja reserva o espaco e centraliza; esta classe so
   acrescenta o circulo claro e o tamanho da letra do emoji. */
.fdv-balcao-emoji {
  align-items: center;
  background: var(--fdv-cartao-fraco);
  border-radius: 999px;
  display: flex;
  font-size: 20px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  width: 40px;
}

/* O CONTADOR DE QUANTIDADE. O BOTAO INTEIRO (`.fdv-balcao-contador-botao`) TEM 44x44px: e o piso
   de toque que scripts/medir-tela-comum.mjs cobra de todo botao de acao desde 20/09/2026 (o
   minimo das Human Interface Guidelines da Apple, o menor dos dois pisos de plataforma -- o
   numero era 40 ate essa data, e nao tinha fonte nenhuma. O desenho do James mostra o circulo bem
   menor que isso, mas desenho nao e dedo, e errar o toque no "-" tira um item do pedido sem
   querer). O circulo colorido que o desenho MOSTRA e so o `<span>` de dentro
   (`.fdv-balcao-contador-marca`, 30px, decorativo): o padding transparente ao redor dele, dentro
   do botao de 44px, e quem recebe o clique. */
.fdv-balcao-contador {
  align-items: center;
  display: flex;
  gap: 0;
}
.fdv-balcao-contador-botao {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
}
.fdv-balcao-contador-botao:disabled {
  cursor: not-allowed;
}
.fdv-balcao-contador-botao:focus-visible {
  outline: 2px solid var(--fdv-botao);
  outline-offset: -2px;
}
.fdv-balcao-contador-marca {
  align-items: center;
  border-radius: 999px;
  display: flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.fdv-balcao-contador-marca svg {
  height: 15px;
  width: 15px;
}
.fdv-balcao-contador-menos .fdv-balcao-contador-marca {
  background: var(--fdv-cartao);
  border: 1px solid var(--fdv-borda-forte);
  color: var(--fdv-texto-apoio);
}
.fdv-balcao-contador-botao:disabled .fdv-balcao-contador-marca {
  opacity: 0.4;
}
.fdv-balcao-contador-mais .fdv-balcao-contador-marca {
  background: var(--fdv-botao);
  color: #fff;
}
.fdv-balcao-contador-valor {
  font-size: 16px;
  font-weight: 800;
  min-width: 22px;
  text-align: center;
}

/* "Repetir ultimo pedido" e "Limpar" lado a lado. `minmax(0, 1fr)` e nao `1fr` cru: e a mesma
   armadilha de sempre, um rotulo comprido nao pode esticar a coluna e rolar o celular de lado. */
.fdv-balcao-duas-colunas {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ============================================================
   PASSO 4: a tabela de itens ja usa `.fdv-tabela`/`caixaDeTabelaFdv()` sem nada de novo. Os totais
   e o painel de impacto reaproveitam `.fdv-balcao-painel`/`.fdv-balcao-destaque` acima.
   ============================================================ */
.fdv-balcao-revisao-cartao {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fdv-balcao-impacto-titulo {
  align-items: center;
  color: var(--fdv-texto);
  display: flex;
  font-size: 14px;
  font-weight: 800;
  gap: 6px;
}
.fdv-balcao-impacto-titulo svg {
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}
.fdv-balcao-selo-central {
  display: flex;
  justify-content: center;
}
/* O CAMPO DE OBSERVACOES QUE "Observações (opcional)" ABRE. 16px de letra E OBRIGATORIO (regra 8
   do contrato): abaixo disso o Safari do iPhone da zoom na pagina inteira ao focar o campo. */
.fdv-balcao-observacoes-campo {
  background: var(--fdv-cartao);
  border: 1px solid var(--fdv-borda-forte);
  border-radius: 10px;
  box-sizing: border-box;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  min-width: 0;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}
.fdv-balcao-observacoes-campo:focus {
  border-color: var(--fdv-botao);
  outline: none;
}

/* ============================================================
   PASSO 5: o circulo de sucesso, as duas faixas de resumo e a linha do tempo.
   ============================================================ */
/* O CIRCULO VERDE COM O CHECK. E A EXCECAO EXPLICITA do contrato ("nenhum svg com mais de 60px de
   altura, tirando o circulo de sucesso da tela 5"): 72px de circulo, 36px de desenho por dentro. */
.fdv-balcao-sucesso {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
  text-align: center;
}
.fdv-balcao-sucesso-marca {
  align-items: center;
  background: var(--fdv-botao);
  border-radius: 999px;
  color: #fff;
  display: flex;
  height: 72px;
  justify-content: center;
  width: 72px;
}
.fdv-balcao-sucesso-marca svg {
  height: 36px;
  width: 36px;
}
.fdv-balcao-sucesso-texto {
  color: var(--fdv-texto);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}
.fdv-balcao-resumo-pedido {
  align-items: center;
  min-width: 0;
  text-align: center;
}
.fdv-balcao-pedido-numero {
  color: var(--fdv-texto);
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}
.fdv-balcao-pedido-data {
  color: var(--fdv-texto-apoio);
  font-size: 12px;
  margin: 0;
}
.fdv-balcao-resumo-linha1 {
  color: var(--fdv-texto-apoio);
  font-size: 13px;
  margin: 0;
}
.fdv-balcao-resumo-valor {
  color: var(--fdv-texto);
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}
/* O BLOCO DO CLIENTE NA CONFIRMACAO NAO FAZ NADA (so mostra nome e codigo), por isso e um <div> com
   as classes de `.fdv-linha` reaproveitadas por cima (ver o comentario em
   fdv-balcao-confirmado.js) -- e por isso tambem as duas regras abaixo cancelam o cursor de mao e o
   hover escuro que `.fdv-linha` supoe para um botao clicavel de verdade. */
.fdv-balcao-cliente-resumo {
  cursor: default;
}
.fdv-balcao-cliente-resumo:hover {
  background: var(--fdv-cartao);
}

/* A LINHA DO TEMPO. `<ol>` porque a ordem dos tres passos importa (e e exatamente o que uma lista
   ORDENADA anuncia para quem usa leitor de tela); a cor de cada marca e o `tom` do proprio dado
   (verde/ambar/neutro), nunca lida "de olho" no desenho. So o item sem `.fdv-balcao-linha-do-tempo-
   linha` (o ultimo) fica sem o traco abaixo dele. */
.fdv-balcao-linha-do-tempo {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}
.fdv-balcao-linha-do-tempo-item {
  display: flex;
  gap: 12px;
  min-width: 0;
}
.fdv-balcao-linha-do-tempo-marca-coluna {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
}
.fdv-balcao-linha-do-tempo-marca {
  align-items: center;
  border-radius: 999px;
  display: flex;
  flex: 0 0 auto;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.fdv-balcao-linha-do-tempo-marca svg {
  height: 16px;
  width: 16px;
}
.fdv-balcao-linha-do-tempo-marca.verde {
  background: var(--fdv-botao);
  color: #fff;
}
.fdv-balcao-linha-do-tempo-marca.ambar {
  background: var(--fdv-cartao);
  border: 2px solid var(--fdv-ambar);
  color: var(--fdv-ambar-texto);
}
.fdv-balcao-linha-do-tempo-marca.neutro {
  background: var(--fdv-cartao-fraco);
  border: 2px solid var(--fdv-borda-forte);
  color: var(--fdv-texto-apoio);
}
.fdv-balcao-linha-do-tempo-linha {
  background: var(--fdv-borda-forte);
  flex: 1 1 auto;
  margin: 2px 0;
  min-height: 18px;
  width: 2px;
}
.fdv-balcao-linha-do-tempo-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 18px;
}
.fdv-balcao-linha-do-tempo-texto b {
  font-size: 14px;
}
.fdv-balcao-linha-do-tempo-texto span {
  color: var(--fdv-texto-apoio);
  font-size: 12px;
}
.fdv-balcao-linha-do-tempo-item:last-child .fdv-balcao-linha-do-tempo-texto {
  padding-bottom: 0;
}