/* © 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. */
/* ============================================================
   AUDITORIA DE VENDAS: o aplicativo de celular do vendedor do restaurante "Seu Texas" (dentro do
   shopping "Polo Piaui Center") e o painel de computador do gestor. Cinco telas, tarefa m01.

   DE ONDE VEM CADA COR: nao de escolha minha e nao da paleta do painel. Cada hexadecimal abaixo
   foi AMOSTRADO PIXEL A PIXEL das duas fotografias que o James mandou por WhatsApp em 17/09/2026,
   com Pillow, e esta anotado em `scratchpad/m01-extracao-auditoria.md`, que e o contrato visual
   desta tela. Onde a ficha nao deu um hex exato (ela mesma marca isso, "verde bem claro" sem
   numero, por exemplo), a escolha abaixo diz que e interpretacao, e por que.

   POR QUE ISSO NAO SE PENDURA EM avarias.css NEM EM fdv.css (comentario identico ao de
   index.html, repetido aqui porque quem abre este arquivo direto precisa da mesma razao): este e
   um PRODUTO diferente, com marca propria (a flor do shopping, o cowboy do restaurante), e herdar
   a paleta de outro modulo e exatamente como uma tela deixa de ser identica a fotografia.

   OS GRAFICOS (rosca, colunas rotuladas, chip de variacao) NAO GANHAM CSS AQUI, DE PROPOSITO: as
   classes `.grafico-rosca`, `.grafico-colunas-rotuladas` e `.chip-variacao` ja tem tipografia e
   comportamento definidos em `assets/css/avarias.css` (carregado pelo painel inteiro, sempre,
   junto com este arquivo), e sao globais (nao escopadas em `.tela-avarias`) -- o proprio
   comentario de la avisa que isso e de proposito: "no dia em que outra tela pedir um deles, esta
   parte sobe para componentes.css". Redesenhar aqui duplicaria a tecnica para ela divergir depois.
   A UNICA excecao sao tres variaveis que aquele CSS consome mas SO DEFINE dentro de
   `.tela-avarias` (`--avarias-vermelho`, `--avarias-verde-alta`, `--avarias-apoio-na-faixa`, usadas
   por `.chip-variacao`): como a nossa raiz e outra, elas precisam ser definidas de novo aqui, com
   os MESMOS nomes (e' o contrato daquele componente), para o chip de variacao da tela 5 nao
   desenhar sem cor. Ver o bloco de tokens compartilhados abaixo.

   RAIZ UNICA PARA AS CINCO TELAS: `.tela-auditoria-venda`, com um modificador de dispositivo
   (`.avd-celular` nas quatro do telefone, `.avd-computador` na do painel) para as regras que so
   valem de um lado. `data-tela="auditoria-venda-xxx"` (exigido pelo portao) tambem funciona como
   seletor quando uma regra e de UMA tela so, sem precisar inventar uma classe nova para isso.
   ============================================================ */

/* ---------- tokens compartilhados pelas cinco telas ---------- */
.tela-auditoria-venda {
  box-sizing: border-box;
  min-height: 100%;
  /* A largura util aqui e a do `.recipiente`, nao a da janela: um `@media` de janela mediria a
     barra lateral do painel junto. Mesma tecnica de `.tela-fdv` (fdv.css) e `.tela-avarias`. */
  container-type: inline-size;
  color: var(--av-texto);

  /* chao e tinta, medidos nas duas fotografias */
  --av-creme-celular: #f7f2ee;
  --av-creme-computador: #f8f5f0;
  --av-cartao: #fefefe;
  --av-borda: #e7ded4;
  --av-texto: #1f1f1f;
  --av-texto-apoio: #55585c;
  --av-raio: 16px;

  /* ---------- A COR DE MARCA VEM DO SISTEMA, NAO DO DESENHO (corrigido em 20/09/2026) ----------
     /!\ O QUE ESTAVA AQUI ERRADO, e vale mais que o conserto: estes tokens guardavam os MARROMS
     medidos nas fotos que o James mandou (#542712 no botao, #3A281C na barra lateral, #7E4F3B nas
     barras do grafico), com um comentario longo explicando que eram "tres marrons de marca
     distintos". Nao eram marca nenhuma. Estas cinco telas sao do POLO PIAUI CENTER, cuja marca de
     verdade -- o logotipo que o Carvalho mandou no mesmo dia -- e AZUL-MARINHO #3C418A com petalas
     em degrade, e nao tem um marrom sequer. O desenho de tela mostra COMO a marca foi aplicada
     (por quem desenhou a tela), nunca QUAL e a marca. A mesma licao ja esta escrita no topo de
     assets/css/sistemas/sistema-polo.css, que tambem nasceu errado pelo mesmo caminho.
     O CONSERTO NAO E TROCAR MARROM POR AZUL, e nao depender mais de cor escrita aqui: os tokens
     apontam para a paleta do SISTEMA em que a tela esta (`body[data-porta]`, assets/css/sistemas/).
     Dentro do Polo sai marinho; no Painel Intel sai o verde do Intel; e o tema escuro ja vem de
     graca, porque as tres folhas de sistema redefinem `--primary` no escuro com contraste medido.
     O `#fff` dos botoes virou `var(--primary-foreground)` pelo mesmo motivo: no escuro o Polo
     inverte (fundo claro, tinta escura) e texto branco fixo sumiria. */
  --av-acao: var(--marca-solida); /* FUNDO de botao: marca solida, nao troca com o tema */
  --av-acao-texto: var(--primary); /* a MESMA cor usada como LETRA sobre o papel: essa troca */
  --av-acao-pressionado: var(--marca-solida-forte);
  --av-marrom-marca: var(--marca-solida-forte); /* a barra lateral da tela do gestor */
  --av-vermelho-fab: #f13923;
  /* O nome da loja no alto da tela: e a marca escrita, entao e a cor do sistema. */
  --av-azul-loja: var(--primary);

  /* verde de "isto foi automatico, confie": a faixa de sucesso da tela 3, a "Segmentacao" logo
     abaixo dela (a ficha diz que e "o mesmo verde bem claro"), e os dois indicadores em destaque
     da tela 4. Nenhuma das tres fichas da um hex exato para o texto/traco verde (so descreve
     "verde saturado"): a escolha abaixo e a mesma tinta que `--avarias-verde-alta` usa no resto do
     painel para "numero bom", por consistencia de vocabulario visual, nao por medicao nesta foto. */
  --av-verde-fundo: #f1f5e6;
  --av-verde-tinta: #567311;

  /* AS TRES VARIAVEIS QUE `.chip-variacao` (avarias.css) EXIGE, redefinidas aqui: ver o comentario
     grande no topo do arquivo. Mesmos nomes, mesmos valores do resto do painel (nao e uma cor
     nova: e a MESMA regra de "sobe e e bom = verde, sobe e e ruim = vermelho" que todo o painel
     usa), porque a semantica de alta/baixa e do painel inteiro, nao desta marca. */
  --avarias-verde-alta: #769f15;
  --avarias-vermelho: #e63a33;
  --avarias-apoio-na-faixa: var(--av-texto-apoio);
}
.tela-auditoria-venda * {
  box-sizing: border-box;
}
.tela-auditoria-venda img {
  max-width: 100%;
}
/* `:where(.tela-auditoria-venda)` EM VEZ DE `.tela-auditoria-venda` NO RESET: `:where()` sempre
   conta ZERO de especificidade, entao este reset ("todo botao nasce sem o cinza nativo do
   sistema") vale MENOS do que qualquer classe deste arquivo (`.avd-botao-primario`, `.avd-aba`...),
   sempre, sem depender da ORDEM em que as regras aparecem no arquivo.
   /!\ ISTO E CONSERTO DE UM DEFEITO DE VERDADE, visto na primeira foto tirada desta tela: sem o
   `:where()`, o seletor `.tela-auditoria-venda button` (uma classe + um elemento) tem MAIS
   especificidade do que `.avd-botao-primario` (uma classe so) -- e ESPECIFICIDADE MAIOR VENCE
   INDEPENDENTE DA ORDEM NO ARQUIVO. O resultado: o botao "Entrar" saia sem o marrom nenhum, so
   texto solto, porque `background: none` daqui vencia `background: var(--av-acao)` daquele. O
   mesmo apagava a borda de "Escolher da galeria". Um portao que so mede TAMANHO E TEXTO nunca
   pegaria isso -- so a foto pegou. */
:where(.tela-auditoria-venda) button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
:where(.tela-auditoria-venda) input,
:where(.tela-auditoria-venda) select {
  font: inherit;
}
/* `icone()` (assets/js/ui.js) devolve um <svg> SEM largura nem altura, de proposito -- quem usa
   e que manda no tamanho, e contexto sem essa regra ja desenhou icone de 400px neste repositorio.
   Uma regra por familia de botao, mais abaixo, cobre cada um; esta e so a rede de seguranca. */
.tela-auditoria-venda svg {
  flex-shrink: 0;
}

/* NO ESCURO, SO O CHAO MUDA -- o papel e a tinta de texto. Desde a r84 (03/10/2026) o chao, o cartao, a borda e o
   texto SAO os do grafite neutro de tokens.css (`--background`, `--card`, `--border`, `--foreground`,
   `--muted-foreground`, `--tom-verde*`), e nao mais o marrom quente de antes (#17120e, #241c17: croma acima do
   teto de 0,012 que o Presidente pediu para o escuro de TODAS as portas). O creme do CLARO continua o da marca.
   A cor de MARCA nao aparece mais aqui de
   proposito: ela vem de `--primary` (assets/css/sistemas/), que ja tem o proprio valor de escuro
   medido. Ate 20/09/2026 estas duas listas reescreviam `--av-azul-loja` e `--av-acao-texto` a mao,
   e com a marca vindo do sistema isso passaria por cima dela calado. O que muda e o papel
   branco, que cega no escuro, e o texto, que precisa continuar legivel. Duas regras, e as DUAS
   MESMAS de tokens.css/fdv.css/avarias.css (mesmo recorte: `prefers-color-scheme` quando a pessoa
   deixou em automatico, e o atributo explicito por cima). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tela-auditoria-venda {
    --av-creme-celular: var(--background);
    --av-creme-computador: var(--background);
    --av-cartao: var(--card);
    --av-borda: var(--border);
    --av-texto: var(--foreground);
    --av-texto-apoio: var(--muted-foreground);
    --av-verde-fundo: var(--tom-verde-fundo);
    --av-verde-tinta: var(--tom-verde);
  }
}
:root[data-tema="escuro"] .tela-auditoria-venda {
  --av-creme-celular: var(--background);
  --av-creme-computador: var(--background);
  --av-cartao: var(--card);
  --av-borda: var(--border);
  --av-texto: var(--foreground);
  --av-texto-apoio: var(--muted-foreground);
  --av-verde-fundo: var(--tom-verde-fundo);
  --av-verde-tinta: var(--tom-verde);
}

/* r81 (03/10/2026), O ESCURO SEM BEGE E SEM PASTEL: o botao "Fotografar cupom" era um bege fixo (#cfc3b4) e os quatro
   cartoes de "Comprovantes e Auditoria" eram pasteis claros escritos em linha pelo JS; no escuro viravam manchas
   claras com matiz sobre o grafite (croma acima do teto de 0,012 do Presidente). No escuro leem o grafite e os tons
   de assunto do painel (verde, neutro, coral, ambar, na ordem do JS), e o texto deles o texto do tema. O `!important`
   existe porque o fundo dos quatro cartoes vem em linha, do `comprovante()` de auditoria-venda-painel.js. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .avd-foto-cupom {
    background: var(--superficie-3);
    color: var(--foreground);
  }
  :root:not([data-tema="claro"]) .avd-foto-cupom:hover {
    background: var(--superficie-2);
  }
  :root:not([data-tema="claro"]) .avd-comprovante-cartao {
    color: var(--foreground);
  }
  :root:not([data-tema="claro"]) .avd-comprovante-apoio {
    color: var(--muted-foreground);
  }
  :root:not([data-tema="claro"]) .avd-comprovante-cartao:nth-child(1) {
    background: var(--tom-verde-fundo) !important;
  }
  :root:not([data-tema="claro"]) .avd-comprovante-cartao:nth-child(2) {
    background: var(--superficie-3) !important;
  }
  :root:not([data-tema="claro"]) .avd-comprovante-cartao:nth-child(3) {
    background: var(--tom-coral-fundo) !important;
  }
  :root:not([data-tema="claro"]) .avd-comprovante-cartao:nth-child(4) {
    background: var(--tom-ambar-fundo) !important;
  }
}
:root[data-tema="escuro"] .avd-foto-cupom {
  background: var(--superficie-3);
  color: var(--foreground);
}
:root[data-tema="escuro"] .avd-foto-cupom:hover {
  background: var(--superficie-2);
}
:root[data-tema="escuro"] .avd-comprovante-cartao {
  color: var(--foreground);
}
:root[data-tema="escuro"] .avd-comprovante-apoio {
  color: var(--muted-foreground);
}
:root[data-tema="escuro"] .avd-comprovante-cartao:nth-child(1) {
  background: var(--tom-verde-fundo) !important;
}
:root[data-tema="escuro"] .avd-comprovante-cartao:nth-child(2) {
  background: var(--superficie-3) !important;
}
:root[data-tema="escuro"] .avd-comprovante-cartao:nth-child(3) {
  background: var(--tom-coral-fundo) !important;
}
:root[data-tema="escuro"] .avd-comprovante-cartao:nth-child(4) {
  background: var(--tom-ambar-fundo) !important;
}

/* ============================================================
   PARTE 1: AS QUATRO TELAS DE CELULAR (Acesso, Lancamento, Confirmacao, Vendas do Dia).
   ============================================================ */
.tela-auditoria-venda.avd-celular {
  background: var(--av-creme-celular);
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.35;
  min-height: 100%;
}

/* ---------- cabecalho do aparelho (tela 2, 3 e 4; a tela 1 nao tem, e a porta do fluxo) ---------- */
.avd-topo {
  align-items: center;
  background: var(--av-creme-celular);
  display: flex;
  gap: 10px;
  padding: 14px 16px 6px;
}
.avd-topo-voltar {
  align-items: center;
  border-radius: 999px;
  display: flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.avd-topo-voltar:hover {
  background: rgb(0 0 0 / 6%);
}
.avd-topo-voltar:focus-visible {
  outline: 2px solid var(--av-acao);
  outline-offset: 2px;
}
.avd-topo-voltar svg {
  height: 20px;
  width: 20px;
}
.avd-topo-marcas {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}
/* A fileira de data da tela 4 ("17/09/2026", com calendario) fica no fim do cabecalho, empurrada
   pelo `margin-left: auto` -- e nao um quarto item que disputa espaco com as marcas. */
.avd-topo-data {
  margin-left: auto;
}

/* ---------- as duas marcas, compostas em TIPO (regra do Carvalho: nenhum logo falso, nenhum
   circulo colorido com letra -- nem o shopping nem o restaurante tem arquivo de logo aqui) ---------- */
.avd-logo-loja,
.avd-logo-restaurante {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
  min-width: 0;
}
.avd-logo-loja-nome {
  color: var(--av-azul-loja);
  font-size: 13px;
  font-weight: 800;
}
.avd-logo-loja-selo {
  color: var(--av-texto-apoio);
  font-size: 11px; /* r84: era 8 px; a regua da Apple pede 11 no minimo (o lema do logotipo e texto de verdade) */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.avd-logo-restaurante-nome {
  color: var(--av-texto);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.avd-logo-restaurante-selo {
  color: var(--av-texto-apoio);
  font-size: 11px; /* r84: era 8 px; a regua da Apple pede 11 no minimo (o lema do logotipo e texto de verdade) */
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- corpo (coluna unica, o mesmo recipiente das quatro telas) ---------- */
.avd-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 18px;
  min-width: 0;
  padding: 12px 16px 28px;
}
.avd-titulo {
  color: var(--av-texto);
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}
.avd-subtitulo {
  color: var(--av-texto-apoio);
  font-size: 13px;
  line-height: 1.4;
  margin: 4px 0 0;
}
.avd-secao-rotulo {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
}

/* ---------- cartao generico branco ---------- */
.avd-cartao {
  background: var(--av-cartao);
  border-radius: var(--av-raio);
  min-width: 0;
  padding: 16px;
}

/* ---------- campo de formulario (Usuario, Senha) ---------- */
.avd-campo {
  align-items: center;
  background: var(--av-cartao);
  border: 1px solid var(--av-borda);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 0 14px;
}
.avd-campo svg {
  color: var(--av-texto-apoio);
  height: 18px;
  width: 18px;
}
.avd-campo input {
  background: none;
  border: 0;
  color: var(--av-texto);
  flex: 1;
  height: 52px;
  min-width: 0;
  outline: none;
}
.avd-campo input::placeholder {
  color: var(--av-texto-apoio);
}
.avd-campo-alternar {
  align-items: center;
  border-radius: 999px;
  display: flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.avd-campo-alternar svg {
  height: 18px;
  width: 18px;
}
.avd-campo:focus-within {
  border-color: var(--av-acao);
  /* O CONTORNO DE 2px, como no resto do painel (r38, 27/09/2026; achado 9 da r32): so a cor da borda
     mudava, e isso quase nao se ve. */
  outline: 2px solid var(--av-acao-texto);
  outline-offset: 2px;
}

/* ---------- botoes ---------- */
.avd-botao-primario {
  align-items: center;
  background: var(--av-acao);
  border-radius: 12px;
  color: var(--marca-solida-tinta);
  display: flex;
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  transition: background var(--av-rapido, 0.15s) ease;
}
.avd-botao-primario:hover {
  background: var(--av-acao-pressionado);
}
.avd-botao-primario:focus-visible {
  outline: 2px solid var(--av-texto);
  outline-offset: 2px;
}
/* O ESTADO "AINDA NAO PODE CONTINUAR" DO DESENHO, NAO UM BOTAO MORTO: a foto de Lancamento mostra
   "Continuar" apagado porque nada foi escolhido ainda -- e a regra funcional desta tarefa diz que
   ele so acende quando canal E forma de pagamento estao marcados. `disabled` de verdade (nao so
   uma classe pintada) tira o foco por teclado de um botao que nao faz nada, o que e o
   comportamento certo, nao um efeito colateral. */
.avd-botao-primario:disabled {
  background: #cbb9ac;
  color: #fff9;
  cursor: not-allowed;
}
.avd-botao-primario svg {
  height: 18px;
  width: 18px;
}
.avd-botao-secundario {
  align-items: center;
  background: var(--av-cartao);
  border: 1px solid var(--av-borda);
  border-radius: 12px;
  color: var(--av-texto);
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
}
.avd-botao-secundario:hover {
  background: var(--av-borda);
}
.avd-botao-secundario svg {
  height: 18px;
  width: 18px;
}
/* `align-items:center` + `min-height:40px` dao o ALVO DE TOQUE de 40px (regra 10 do contrato) sem
   engordar a LETRA: o texto continua pequeno e sublinhado como na foto, so a area clicavel cresce
   para cima e para baixo dele -- medido pelo portao no botao inteiro, nunca so no texto. */
.avd-link {
  align-items: center;
  color: var(--av-texto);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  margin: 0 auto;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- nota de rodape com icone (informacao) ---------- */
.avd-nota {
  align-items: flex-start;
  color: var(--av-texto-apoio);
  display: flex;
  font-size: 12px;
  gap: 8px;
  margin: 0;
}
.avd-nota svg {
  flex-shrink: 0;
  height: 15px;
  margin-top: 1px;
  width: 15px;
}

/* ---------- avisos ao-vivo (aria-live), invisivel ate ter texto ---------- */
.avd-aviso {
  color: var(--av-texto-apoio);
  font-size: 12px;
  margin: 0;
  min-height: 0;
}
.avd-aviso:empty {
  display: none;
}

/* ---------- rodape com a fachada do shopping ao entardecer ----------
   NAO HA ARQUIVO DE FOTO DO SHOPPING NESTE REPOSITORIO (conferido em assets/img/): as duas fotos
   do James mostram a mesma fachada real do Polo Piaui Center, mas fabricar uma imagem
   fotorrealista de um predio de verdade que nao existe no disco seria inventar um documento, nao
   compor em tipo -- pior do que o logo falso que a regra 7 ja proibe. ponytail: o gradiente abaixo
   e o retrato HONESTO do "ainda nao temos o arquivo", com a mesma frase da foto por cima; o
   upgrade e directo quando a foto de verdade chegar, so trocar `background` por
   `background-image: url(...)` neste seletor. */
.avd-rodape-foto {
  background: linear-gradient(180deg, #2b3a55 0%, #6b4a52 45%, #c97a4a 75%, #e8a45c 100%);
  color: #fff;
  display: flex;
  align-items: flex-end;
  min-height: 120px;
  padding: 16px;
}
.avd-rodape-foto-frase {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgb(0 0 0 / 45%);
}

/* ============================================================
   TELA 1, ACESSO: coluna centralizada, sem cabecalho de aparelho (e a porta do fluxo).
   ============================================================ */
[data-tela="auditoria-venda-acesso"] .avd-corpo {
  gap: 22px;
  padding-top: 40px;
}
.avd-acesso-marcas {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
[data-tela="auditoria-venda-acesso"] .avd-logo-loja,
[data-tela="auditoria-venda-acesso"] .avd-logo-restaurante {
  align-items: center;
  text-align: center;
}
[data-tela="auditoria-venda-acesso"] .avd-logo-loja-nome {
  font-size: 22px;
}
[data-tela="auditoria-venda-acesso"] .avd-logo-loja-selo {
  font-size: 10px;
}
[data-tela="auditoria-venda-acesso"] .avd-logo-restaurante-nome {
  font-size: 19px;
}
[data-tela="auditoria-venda-acesso"] .avd-logo-restaurante-selo {
  font-size: 10px;
}
.avd-acesso-titulos {
  text-align: center;
}
.avd-acesso-titulos .avd-titulo {
  font-size: 24px;
}
.avd-acesso-titulos .avd-subtitulo {
  font-size: 14px;
}
.avd-acesso-formulario {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.avd-acesso-formulario .avd-botao-primario {
  margin-top: 4px;
}
[data-tela="auditoria-venda-acesso"] .avd-rodape-foto {
  margin-top: auto;
}

/* ============================================================
   TELA 2, LANCAMENTO DE VENDA.
   ============================================================ */
.avd-foto-cupom {
  align-items: center;
  background: #cfc3b4;
  border-radius: var(--av-raio);
  color: #4a4136;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 160px;
  padding: 20px;
  width: 100%;
}
.avd-foto-cupom:hover {
  background: #c4b7a5;
}
.avd-foto-cupom svg {
  height: 34px;
  width: 34px;
}
.avd-foto-cupom-titulo {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.avd-foto-cupom-instrucao {
  font-size: 12px;
}
/* GRADES QUE NAO ROLAM DE LADO: `minmax(0, 1fr)`, nunca `1fr` sozinho -- e a armadilha mais
   repetida deste repositorio (item 5 do contrato desta tarefa). Sem o `minmax(0, ...)` uma coluna
   com conteudo largo (o rotulo "Outros Delivery" ou "Cartao de Credito", que nao quebra por ser
   uma so palavra-chave curta na segunda linha) empurra a grade inteira para fora dos 390px. */
.avd-grade-canal {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.avd-grade-pagamento {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@container (min-width: 360px) {
  .avd-grade-pagamento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.avd-botao-canal {
  align-items: center;
  border-radius: 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  min-height: 64px;
  justify-content: center;
  padding: 10px 4px;
  text-align: center;
  /* A COR VEM DO PROPRIO BOTAO (`background-color` em linha, de `canal.cor`), nunca cravada aqui:
     e o mesmo hex que a tela 5 busca por `canalId` (comentario no modulo de dado). */
  outline-offset: 2px;
}
.avd-botao-canal[aria-pressed="true"] {
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 65%);
}
.avd-botao-canal svg {
  height: 22px;
  width: 22px;
}
/* O IFOOD NAO TEM ICONE (nao existe "logo-ifood" no catalogo de assets/js/ui.js, e chamar
   `icone()` com um nome que nao existe cai calado no desenho do painel -- regra 7 desta tarefa
   manda compor em TIPO em vez disso). O nome do canal cresce para ocupar o lugar do desenho. */
.avd-botao-canal.avd-botao-canal--tipo {
  /* 19px, nao mais 15 (r38, 27/09/2026): o branco sobre o vermelho do iFood da 4,29:1, abaixo dos
     4,5:1 da letra comum; a 19px em negrito a letra e "grande" para a WCAG (18,66px em negrito) e o
     piso vira 3:1. O nome ocupa o lugar do desenho que os outros dois canais tem, e cabe. */
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.avd-botao-pagamento {
  align-items: center;
  background: var(--av-cartao);
  border: 1px solid var(--av-borda);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  min-height: 64px;
  justify-content: center;
  padding: 8px 4px;
  text-align: center;
}
.avd-botao-pagamento svg {
  height: 20px;
  width: 20px;
}
.avd-botao-pagamento[aria-pressed="true"] {
  background: var(--av-marrom-marca);
  border-color: var(--av-marrom-marca);
  color: var(--marca-solida-tinta);
}
.avd-secao {
  display: flex;
  flex-direction: column;
}

/* ============================================================
   TELA 3, CONFIRMACAO DO REGISTRO.
   ============================================================ */
.avd-confirma-grade {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
}
/* PLACEHOLDER HONESTO DA FOTO DO CUPOM: nao existe arquivo de imagem do cupom real neste
   repositorio (a foto do James mostra um exemplo digitado por ela, nao um arquivo que possamos
   copiar), e desenhar um recibo fajuto com os itens abaixo seria fabricar um documento -- a mesma
   razao que barra a foto do shopping. ponytail: bloco neutro com o icone de nota fiscal, ceiling
   claro (a foto de verdade vem da camera do celular, tirada na tela 2, e o Zama liga essa URL
   aqui no dia da integracao). */
.avd-foto-recibo {
  align-items: center;
  background: repeating-linear-gradient(135deg, #efe9e0, #efe9e0 10px, #e6ded2 10px, #e6ded2 20px);
  border: 1px solid var(--av-borda);
  border-radius: 12px;
  color: var(--av-texto-apoio);
  display: flex;
  justify-content: center;
  min-height: 150px;
}
.avd-foto-recibo svg {
  height: 40px;
  width: 40px;
}
.avd-status-bloco {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.avd-selo-sucesso {
  align-items: center;
  background: var(--av-verde-fundo);
  border-radius: 10px;
  color: var(--av-verde-tinta);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  padding: 8px 10px;
}
.avd-selo-sucesso svg {
  height: 15px;
  width: 15px;
}
.avd-linha-campo {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}
.avd-linha-campo-texto {
  min-width: 0;
}
.avd-linha-campo-rotulo {
  align-items: center;
  color: var(--av-texto-apoio);
  display: flex;
  font-size: 11px;
  gap: 5px;
}
.avd-linha-campo-rotulo svg {
  height: 12px;
  width: 12px;
}
.avd-linha-campo-valor {
  font-size: 14px;
  font-weight: 700;
}
.avd-linha-campo-editar {
  align-items: center;
  border-radius: 999px;
  display: flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.avd-linha-campo-editar:hover {
  background: rgb(0 0 0 / 6%);
}
.avd-linha-campo-editar svg {
  color: var(--av-texto-apoio);
  height: 15px;
  width: 15px;
}
.avd-valor-total {
  border-top: 1px solid var(--av-borda);
  padding-top: 8px;
}
.avd-valor-total .avd-linha-campo-valor {
  font-size: 20px;
}
/* "Itens identificados" e uma <table> de verdade (ver o comentario no topo de
   auditoria-venda-confirmacao.js: e o que deixa o portao aceitar "Valor total" como um numero
   CALCULADO, nao cravado), mas sem nenhum tracado de grade -- por isso o proprio elemento
   `table[data-tabela="itens-identificados"]` ganha o reset aqui, em vez de uma classe nova. */
/* `table-layout: fixed` E O QUE IMPEDE A PAGINA DE ROLAR DE LADO. Medido em 20/09/2026 pelo
   cenario `gigante`: com nome de item comprido a tabela pediu 426px numa tela de 390px, e como ela
   nao esta dentro de nenhuma caixa com rolagem, quem rolava era a pagina inteira.
   Com layout fixo a coluna nao cresce pelo conteudo: quem tem de caber e o texto, e o nome do item
   (a unica coluna larga) quebra em duas linhas em vez de esticar a tabela. `max-width: 100%` fecha
   a conta: a tabela nunca passa da largura do cartao. */
table[data-tabela="itens-identificados"] {
  border-collapse: collapse;
  max-width: 100%;
  table-layout: fixed;
  width: 100%;
}
/* A coluna do nome e a unica que pode quebrar: quantidade e valor sao curtos e ficam numa linha. */
table[data-tabela="itens-identificados"] td:first-child {
  overflow-wrap: break-word;
}
table[data-tabela="itens-identificados"] td {
  padding: 6px 0;
  vertical-align: middle;
}
table[data-tabela="itens-identificados"] td:last-child {
  text-align: right;
}
.avd-item-linha {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}
.avd-item-emoji {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}
.avd-item-nome {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avd-item-quantidade {
  color: var(--av-texto-apoio);
  flex-shrink: 0;
  font-size: 12px;
}
.avd-item-valor {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}
.avd-segmentacao {
  background: var(--av-verde-fundo);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.avd-segmentacao-titulo {
  font-size: 12px;
  font-weight: 700;
}
.avd-segmentacao-linha {
  align-items: center;
  display: flex;
  gap: 8px;
}
.avd-segmentacao-emoji {
  font-size: 15px;
  line-height: 1;
}
.avd-segmentacao-nome {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
}
.avd-segmentacao-pct {
  color: var(--av-verde-tinta);
  font-size: 12px;
  font-weight: 700;
  width: 38px;
}
.avd-segmentacao-valor {
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  width: 66px;
}

/* ============================================================
   TELA 4, VENDAS DO DIA.
   ============================================================ */
.avd-topo-data-campo {
  align-items: center;
  background: var(--av-cartao);
  border: 1px solid var(--av-borda);
  border-radius: 10px;
  display: flex;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  position: relative;
}
.avd-topo-data-campo svg {
  height: 15px;
  pointer-events: none;
  width: 15px;
}
.avd-topo-data-campo span {
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}
/* O `<input type="date">` DE VERDADE FICA POR CIMA, TRANSPARENTE, E OCUPA A CAIXA INTEIRA: e o
   mesmo truque de "usar o widget nativo do sistema operacional sem redesenhar um calendario a
   mao" que qualquer seletor de data honesto usa -- ganha teclado, teclado numerico no celular e
   leitor de tela de graca, e o preco e nao pintar cada dia do mes com a cor da marca. */
.avd-topo-data-campo input {
  cursor: pointer;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}
.avd-indicadores-2x2 {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.avd-indicador {
  background: var(--av-cartao);
  border-radius: var(--av-raio);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
}
.avd-indicador.avd-indicador--destaque {
  background: var(--av-verde-fundo);
}
.avd-indicador-rotulo {
  align-items: center;
  color: var(--av-texto-apoio);
  display: flex;
  font-size: 11px;
  gap: 6px;
  justify-content: space-between;
}
.avd-indicador-rotulo svg {
  height: 14px;
  width: 14px;
}
.avd-indicador-valor {
  font-size: 20px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avd-indicador-editar {
  align-items: center;
  border-radius: 999px;
  display: flex;
  flex-shrink: 0; /* com "Valor médio por venda" a 390 px a fileira espremia o alvo para 35 px; quem quebra é o rótulo */
  height: 44px;
  justify-content: center;
  width: 44px;
  /* NEGATIVO PARA NAO EMPURRAR O CARTAO: 40px de alvo de toque (regra 10) dentro de um cartao de
     indicador que so tem ~24px de altura de sobra ao lado do rotulo faria o botao vazar do
     cartao. A margem negativa mantem o alvo de toque inteiro sem aumentar a caixa do cartao. */
  margin: -8px -6px -8px 0;
}
.avd-indicador-editar svg {
  color: var(--av-texto-apoio);
  height: 13px;
  width: 13px;
}
.avd-indicador-apoio {
  color: var(--av-texto-apoio);
  font-size: 12px;
  font-weight: 600;
}
/* A FILEIRA DE ABAS ROLA DE LADO EM VEZ DE EMPURRAR A PAGINA. Medido em 20/09/2026 pelo cenario
   `gigante` do portao de cenarios: com muitos canais de venda a fileira virou 35.064px de largura
   numa tela de 390px, e quem rolava de lado era a PAGINA INTEIRA -- o cabecalho, os cartoes e a
   tabela andavam junto, e o dedo nao achava mais o conteudo. Com `overflow-x: auto` quem rola e
   so a fileira; `flex: 0 0 auto` impede a aba de encolher ate virar um toco ilegivel, e
   `scrollbar-width: none` tira a barra cinza do meio da tela (o dedo arrasta, nao precisa dela). */
.avd-abas {
  display: flex;
  gap: 8px; /* era 6 ate a r38 (27/09/2026): o vao entre duas abas nao desce de 8px */
  overflow-x: auto;
  scrollbar-width: none;
  /* `align-items: stretch` E `min-height` JUNTOS: com `overflow-x: auto` o navegador reserva uma
     faixa para a barra de rolagem e a fileira encolheu 1px, deixando a aba com 44x43px -- o portao
     de alvo de toque pegou na mesma corrida. O piso na FILEIRA garante os 44px mesmo com a
     reserva, e a aba estica para acompanhar. */
  align-items: stretch;
  min-height: 44px;
}
.avd-abas::-webkit-scrollbar {
  display: none;
}
.avd-aba {
  background: var(--av-borda);
  border-radius: 10px;
  flex: 0 0 auto;
  /* 44px DE PISO DE LARGURA, e o numero vem do portao: ele le ALTURA x LARGURA, e "iFood" saiu
     44x43 -- alto certo, 1px estreito demais para o dedo. Rotulo curto num botao com 6px de
     recheio de cada lado nao chega aos 44px da norma da Apple sozinho.
     `max(44px, max-content)` NAO SERVE, e eu tentei: `max-content` e palavra de tamanho
     intrinseco, nao cabe dentro de `max()`, entao o navegador DESCARTA a declaracao inteira em
     silencio. Medido: `getComputedStyle(...).minWidth` voltou `auto`, ou seja, a regra nao existia.
     Com `min-width: 44px` e `flex: 0 0 auto` a aba cresce com o texto e nunca desce dos 44. */
  min-width: 44px;
  font-size: 12px;
  font-weight: 700;
  min-height: 44px;
  padding: 0 6px;
  text-align: center;
}
.avd-aba[aria-selected="true"] {
  background: var(--av-acao);
  color: #fff;
}
.avd-tabela-scroll {
  border-radius: var(--av-raio);
  min-width: 0;
  overflow-x: auto;
}
.avd-tabela-vendas {
  background: var(--av-cartao);
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}
.avd-tabela-vendas th {
  color: var(--av-texto-apoio);
  font-size: 11px;
  font-weight: 700;
  padding: 10px 8px;
  text-align: left;
  text-transform: uppercase;
}
.avd-tabela-vendas td {
  border-top: 1px solid var(--av-borda);
  padding: 9px 8px;
  white-space: nowrap;
}
.avd-tabela-vendas tbody tr {
  width: 100%;
}
/* A LINHA INTEIRA E O BOTAO QUE ABRE O DETALHE, entao ela obedece o alvo de toque de 44px como
   qualquer botao. Medido em 20/09/2026 por `bash scripts/testar-mobile.sh`: as linhas saiam com
   37 e 38px, e foram 20 das 74 reprovacoes do portao de celular. O dedo erra a linha e abre a de
   cima ou a de baixo, que nesta tela quer dizer abrir a venda errada.
   O piso vai no `td` e nao no `tr`: `min-height` nao se aplica a linha de tabela (o mesmo capitulo
   17.5.2 do CSS que ja me pegou hoje na largura de coluna). Com 13px de recheio em cima e embaixo
   a linha fecha 44px com a fonte atual. */
.avd-tabela-vendas .avd-linha-clicavel td {
  padding-bottom: 13px;
  padding-top: 13px;
}
.avd-tabela-vendas .avd-linha-clicavel {
  cursor: pointer;
}
.avd-tabela-vendas .avd-linha-clicavel:hover {
  background: rgb(0 0 0 / 3%);
}
.avd-pagamento-icone {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}
.avd-pagamento-icone svg {
  color: var(--av-texto-apoio);
  height: 13px;
  width: 13px;
}
.avd-tabela-seta {
  background: none;
  color: var(--av-texto-apoio);
  height: 32px;
  width: 24px;
}
.avd-tabela-seta svg {
  height: 14px;
  width: 14px;
}
.avd-vazio-tabela {
  color: var(--av-texto-apoio);
  font-size: 12px;
  padding: 18px 10px;
  text-align: center;
}

/* ---------- barra de baixo com o "+" elevado (so a tela 4 tem) ---------- */
.avd-base {
  background: var(--av-cartao);
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  left: 0;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  position: sticky;
  right: 0;
  z-index: 2;
}
/* O FIO DE CIMA DA BARRA, EM DOIS PEDACOS (r38, 27/09/2026). Ate aqui era `border-top` na barra
   inteira, e o "+" elevado (52px, subindo 20px acima da barra) ficava com o fio passando por dentro
   dele. Agora o fio para a 8px de cada lado do botao, o menor vao que a auditoria de tela aceita. A
   conta do meio: o "+" e o segundo de quatro itens iguais, entao o centro dele fica a 37,5% da
   largura util (a barra tem 8px de recheio de cada lado) e ele tem 26px de raio. */
.avd-base-fio {
  background: var(--av-borda);
  height: 1px;
  position: absolute;
  top: 0;
}
.avd-base-fio--antes {
  left: 0;
  width: calc(8px + (100% - 16px) * 0.375 - 26px - 8px);
}
.avd-base-fio--depois {
  left: calc(8px + (100% - 16px) * 0.375 + 26px + 8px);
  right: 0;
}
.avd-base-item {
  align-items: center;
  color: var(--av-texto-apoio);
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 600;
  gap: 3px;
  min-height: 40px;
  min-width: 0;
  padding: 2px 2px;
}
.avd-base-item[aria-current="page"] {
  color: var(--av-texto);
}
.avd-base-item svg {
  height: 20px;
  width: 20px;
}
.avd-base-fab {
  align-items: center;
  background: var(--av-vermelho-fab);
  border-radius: 999px;
  color: #fff;
  display: flex;
  height: 52px;
  justify-content: center;
  margin: -30px auto 0;
  width: 52px;
}
.avd-base-fab svg {
  height: 24px;
  width: 24px;
}
.avd-base-fab-rotulo {
  font-size: 11px;
  font-weight: 600;
  margin-top: 3px;
  text-align: center;
}

/* ============================================================
   PARTE 2: A TELA 5, PAINEL DE COMPUTADOR (Visao Geral).

   A 900px E O CORTE ENTRE "DASHBOARD COM SIDEBAR" E "COLUNA UNICA", e e uma escolha, nao uma
   medida da foto: a fotografia do James so mostra este painel num monitor largo (1536px). Abaixo
   de 900px nao ha um segundo desenho para copiar, entao a alternativa e a mesma regra 5 do
   contrato desta tarefa (nada rola de lado): sidebar e conteudo empilham em vez de tentar caber
   289px de sidebar espremendo um dashboard de quatro colunas num celular de 390px. */
.tela-auditoria-venda.avd-computador {
  background: var(--av-creme-computador);
}
.avd-shell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
@container (min-width: 900px) {
  .avd-shell {
    display: grid;
    grid-template-columns: minmax(220px, 18%) minmax(0, 1fr);
  }
}
.avd-sidebar {
  background: var(--av-marrom-marca);
  color: #f3ece5;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 16px;
}
.avd-sidebar .avd-logo-loja-nome {
  color: #fff;
  font-size: 15px;
}
.avd-sidebar .avd-logo-loja-selo {
  color: rgb(255 255 255 / 65%);
  font-size: 11px; /* r84: era 8 px; a regua da Apple pede 11 no minimo (o lema do logotipo e texto de verdade) */
}
.avd-sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.avd-sidebar-item {
  align-items: center;
  border-radius: 10px;
  color: rgb(255 255 255 / 78%);
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
}
.avd-sidebar-item:hover {
  background: rgb(255 255 255 / 8%);
}
.avd-sidebar-item[aria-current="page"] {
  background: rgb(255 255 255 / 14%);
  color: #fff;
}
.avd-sidebar-item svg {
  flex-shrink: 0;
  height: 17px;
  width: 17px;
}
.avd-sidebar .avd-rodape-foto {
  border-radius: 12px;
  margin-top: auto;
}
.avd-sidebar .avd-aviso {
  color: rgb(255 255 255 / 75%);
}

.avd-conteudo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 18px 20px 28px;

  /* PALETA DA TELA 5, alem dos tokens compartilhados no topo do arquivo: as fatias de rosca de
     "Forma de Pagamento" e "Segmento", e a barra de "Evolucao das Vendas".
     AS FATIAS DE ROSCA CONTINUAM MEDIDAS NA FICHA, e isso e certo: ali a cor separa CATEGORIA
     (Pix de Credito, Comida de Bebida), nao marca nenhuma. Duas roscas com a cor do sistema
     seriam duas roscas de uma cor so.
     /!\ A BARRA, NAO. Ela era o QUARTO marrom do desenho (#7E4F3B) e nao separa categoria: e uma
     serie unica, "quantas vendas por hora". Cor unica de grafico e cor de MARCA, e a marca do
     Polo e azul-marinho -- por isso ela passou a sair da paleta do sistema em 21/09/2026. Foi a
     foto que denunciou: a barra lateral ja estava marinho e o grafico continuava marrom, na
     mesma tela.
     r81 (03/10/2026): de `--marca-solida` para `--primary`. A tinta de marca nao troca com o tema e, no escuro, o
     marinho #3c418a media 1,88:1 contra o cartao grafite (a regua de marca de grafico pede 3:1). `--primary` e a cor
     de INTERFACE da mesma porta, que clareia no escuro com o contraste medido (assets/css/sistemas/): fica a cor
     do sistema, so que legivel nos dois temas. */
  --av-grafico-barra: var(--primary);
  --av-forma-pix: #04a68f;
  --av-forma-credito: #037cf1;
  --av-forma-debito: #cf8023; /* era #ff9e2b (2,05:1 no branco); #cf8023 da 3,10:1 no branco e 5,49:1 no cartao escuro (r81) */
  --av-forma-dinheiro: #5b9726;
  --av-forma-vale: #8c939d;
  --av-segmento-comidas: #e83b4f;
  --av-segmento-bebidas: #d07e38; /* era #fe9a44; 3,12:1 no branco e 5,46:1 no cartao escuro (r81) */
  --av-segmento-outros: #8c939d; /* era #9aa0a9 (2,61:1 no branco); 3,07:1 no branco e 5,5:1 no cartao escuro (r81) */
}
/* Empilha os quatro blocos de grade (kpis/roscas/linha3/linha2) com o MESMO respiro que ja separa
   o cabecalho deles -- sem esta regra os quatro colariam uns nos outros, porque o `gap` de
   `.avd-conteudo` so vale entre filhos DIRETOS, e este bloco e um filho so. */
.avd-conteudo-corpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.avd-cabecalho-desktop {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
}
.avd-cabecalho-desktop .avd-titulo {
  font-size: 23px;
}
.avd-cabecalho-desktop .avd-subtitulo {
  font-size: 12px;
  margin-top: 2px;
}
.avd-cabecalho-acoes {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
}
.avd-selo-periodo,
.avd-selo-usuario {
  align-items: center;
  background: var(--av-cartao);
  border: 1px solid var(--av-borda);
  border-radius: 10px;
  display: flex;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  position: relative;
}
.avd-selo-periodo svg,
.avd-selo-usuario-avatar {
  color: var(--av-texto-apoio);
  flex-shrink: 0;
  height: 18px;
  width: 18px;
}
.avd-selo-usuario-avatar {
  align-items: center;
  background: var(--av-marrom-marca);
  border-radius: 999px;
  color: #fff;
  display: flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.avd-selo-texto {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 1.25;
}
.avd-selo-texto b {
  font-size: 13px;
}
/* O BOTAO DO CALENDARIO DE DENTRO DO CAMPO SAI (r84): ele era a quarta parada do Tab, e nela o navegador nao marca
   `:focus` nem `:focus-visible` no campo, entao o anel sumia (regua da Apple: foco sem sinal). O calendario abre no
   clique em qualquer ponto do selo (`showPicker`, em auditoria-venda-painel.js), e o teclado edita dia, mes e ano. */
.avd-selo-periodo input::-webkit-calendar-picker-indicator {
  display: none;
}
.avd-selo-periodo input {
  cursor: pointer;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

/* ---------- fileiras de grade da tela 5, com as PROPORCOES medidas na ficha ----------
   `minmax(0, ...)` em toda coluna, sempre -- a mesma regra do celular vale aqui: uma coluna sem
   isso nao encolhe abaixo do proprio conteudo, e o texto de tabela empurra o cartao vizinho. */
.avd-kpis {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
.avd-roscas,
.avd-linha3,
.avd-linha2 {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
  .avd-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (min-width: 900px) {
  .avd-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .avd-roscas {
    /* medido: ~30% / 35% / 35% */
    grid-template-columns: minmax(0, 30fr) minmax(0, 35fr) minmax(0, 35fr);
  }
  .avd-linha3 {
    /* medido: ~41% / 23% / 35% */
    grid-template-columns: minmax(0, 41fr) minmax(0, 23fr) minmax(0, 35fr);
  }
  .avd-linha2 {
    /* medido: ~66% / 34%, perto de 2:1 */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.avd-kpi {
  align-items: flex-start;
  background: var(--av-cartao);
  border-radius: var(--av-raio);
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 16px;
}
.avd-kpi-icone {
  align-items: center;
  border-radius: 999px;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.avd-kpi-icone svg {
  height: 20px;
  width: 20px;
}
.avd-kpi-texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.avd-kpi-rotulo {
  color: var(--av-texto-apoio);
  font-size: 12px;
}
.avd-kpi-valor {
  font-size: 22px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avd-kpi-rodape {
  color: var(--av-texto-apoio);
  font-size: 11px;
}

.avd-cartao-titulo {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.avd-cartao-titulo h2 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
.avd-ver-todas {
  align-items: center;
  color: var(--av-acao-texto);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  gap: 4px;
  min-height: 44px;
}
.avd-ver-todas svg {
  height: 13px;
  width: 13px;
}
.avd-seletor-grafico {
  background: var(--av-cartao);
  border: 1px solid var(--av-borda);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  height: 32px;
  padding: 0 8px;
}

/* ---------- rosca + legenda ---------- */
.avd-rosca-legenda {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.avd-legenda-linha {
  align-items: center;
  display: flex;
  font-size: 12px;
  gap: 8px;
  min-width: 0;
}
.avd-legenda-ponto {
  border-radius: 999px;
  flex-shrink: 0;
  height: 8px;
  width: 8px;
}
.avd-legenda-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avd-legenda-pct {
  color: var(--av-texto-apoio);
  width: 42px;
}
.avd-legenda-num {
  font-weight: 700;
  text-align: right;
  width: 56px;
}

/* ---------- fluxo de pessoas: estado vazio de verdade, nao "carregando" ---------- */
.avd-fluxo-vazio {
  align-items: center;
  color: var(--av-texto-apoio);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-height: 160px;
  padding: 12px;
  text-align: center;
}
.avd-fluxo-vazio svg {
  color: var(--av-borda);
  height: 34px;
  width: 34px;
}
.avd-fluxo-vazio p {
  font-size: 12px;
  margin: 0;
  max-width: 30ch;
}
.avd-fluxo-vazio p:first-of-type {
  color: var(--av-texto);
  font-weight: 700;
}

/* ---------- tabela "Vendas por Usuario", com linha de total ---------- */
.avd-tabela-usuario {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}
.avd-tabela-usuario th {
  color: var(--av-texto-apoio);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  text-align: left;
  text-transform: uppercase;
}
.avd-tabela-usuario th.num,
.avd-tabela-usuario td.num {
  text-align: right;
}
.avd-tabela-usuario td {
  border-top: 1px solid var(--av-borda);
  padding: 8px 8px;
}
.avd-tabela-usuario tr[data-linha="total"] td {
  border-top: 2px solid var(--av-borda);
  font-weight: 800;
}

/* ---------- ultimas vendas: pilulas de canal/segmento, cor por categoria ---------- */
.avd-tabela-ultimas {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}
.avd-tabela-ultimas th {
  color: var(--av-texto-apoio);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  text-align: left;
  text-transform: uppercase;
}
.avd-tabela-ultimas td {
  border-top: 1px solid var(--av-borda);
  padding: 8px 8px;
  white-space: nowrap;
}
.avd-pilula {
  border-radius: 999px;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
}
.avd-comprovante-doc {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.avd-comprovante-doc svg {
  color: var(--av-texto-apoio);
  height: 14px;
  width: 14px;
}

/* ---------- comprovantes e auditoria: 2x2 de cartoes coloridos ---------- */
.avd-comprovantes-grade {
  display: grid;
  gap: 10px;
  /* DUAS COLUNAS SO QUANDO CADA CARTAO TEM 110px (r38, 27/09/2026): a 1024 o cartao ficava com 98px
     e "manualmente" (a palavra mais comprida de "Vendas digitadas manualmente") passava 2px da borda
     dele (regra "vaza" da auditoria de tela). Abaixo disso os quatro cartoes empilham; acima, nunca
     passam de duas colunas (a metade da largura e o piso de cada uma). */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(110px, calc((100% - 10px) / 2))), 1fr));
}
/* COR DE TEXTO FIXA, NUNCA `var(--av-texto)`: os quatro fundos claros destes cartoes (passados em
   linha, por `comprovante()` em auditoria-venda-painel.js) sao identidade, iguais aos das pilulas
   de canal/segmento -- nao trocam de tom no escuro. Se o texto usasse a variavel adaptavel da
   pagina, no escuro ele viraria CLARO sobre um fundo que continua CLARO: foi exatamente o defeito
   visto na primeira foto em tema escuro, os quatro cartoes ilegiveis. */
.avd-comprovante-cartao {
  border-radius: 12px;
  color: #1f1f1f;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px;
}
.avd-comprovante-rotulo {
  align-items: center;
  display: flex;
  font-size: 11px;
  font-weight: 600;
  gap: 6px;
}
.avd-comprovante-rotulo svg {
  height: 14px;
  width: 14px;
}
.avd-comprovante-valor {
  font-size: 18px;
  font-weight: 800;
}
.avd-comprovante-apoio {
  /* fixo, mesma razao do `color` de `.avd-comprovante-cartao` logo acima: fundo que nao troca de
     tema nao pode usar uma cor de texto que troca. */
  color: #55585c;
  font-size: 11px;
}
/* ---------- alvo de toque em touch, o mesmo mecanismo do resto do painel
   (componentes.css:669, `@media (pointer: coarse)`) -- botao que ja mede 40px no dedo continua do
   mesmo tamanho no mouse; o que cresce e so quem dependia so do padding para chegar la. ---------- */
@media (pointer: coarse) {
  .avd-sidebar-item,
  .avd-ver-todas {
    min-height: 44px;
  }
}

/* O QUE A LEITURA AUTOMATICA SOMOU, ao lado do titulo "Itens identificados". So aparece quando
   difere do total do cupom, e e discreto de proposito: o numero grande continua sendo o do cupom
   (o que o cliente pagou), e este e o segundo numero que explica por que a pessoa esta conferindo. */
.avd-secao-rotulo .avd-secao-soma {
  color: var(--av-texto-apoio);
  float: right;
  font-size: 12px;
  font-weight: 600;
}

/* CAMPO DE FORMULARIO COM 16px, E ISSO NAO E ESCOLHA DE ESTILO: E O QUE IMPEDE O IPHONE DE DAR
   ZOOM SOZINHO. O Safari do iOS aumenta a pagina inteira quando a pessoa toca num campo com letra
   menor que 16px, e a tela salta de lugar no meio do preenchimento. O painel inteiro ja usa 16 nos
   campos por esse motivo; estas telas nasceram fora do padrao.
   Medido em 20/09/2026 por `bash scripts/testar-mobile.sh`: 56 das 74 reprovacoes do portao de
   celular eram campos destas telas com 11, 12, 13 ou 14 pixels.
   A regra fica no FIM do arquivo de proposito: ela tem a mesma especificidade das regras de cada
   campo (0,1,1), entao quem decide e a ordem, e no fim ela ganha de todas sem precisar de
   `!important`. O tamanho VISUAL dos rotulos e dos numeros ao redor nao muda; muda so a letra
   dentro do campo que a pessoa toca. */
.tela-auditoria-venda input,
.tela-auditoria-venda select,
.tela-auditoria-venda textarea {
  font-size: 16px;
}

/* ============================================================
   A REGUA DA APPLE (r38, 27/09/2026), ordem do Carvalho de 26/09 15:25.
   1. O FOCO DO CAMPO DE DATA ESCONDIDO. Nas telas 4 e 5 o <input type="date"> fica transparente por
      cima da caixa (o truque do widget nativo, comentado acima), e o Tab caia nele sem nada acender
      (achado 9 da r32). A caixa que o envolve ganha o contorno de 2px quando o campo recebe o foco
      pelo teclado. `:focus-visible`, e nao `:focus-within`: no toque e no clique o calendario abre e
      o contorno nao precisa aparecer.
   2. NO COMPUTADOR, TEXTO CORRIDO DE 13px: as tabelas, os subtitulos e as frases de apoio eram de 11
      e 12px. No celular nada muda.
   ============================================================ */
.avd-topo-data-campo:has(input:focus-visible),
/* `:focus` e nao `:focus-visible` (r84): o campo de data tem QUATRO paradas do Tab (dia, mes, ano e o botao do calendario), e
   na quarta o navegador nao marca `:focus-visible` no campo, entao o anel sumia exatamente no botao do calendario. O
   anel mora no rotulo porque o campo e transparente por cima dele. */
.avd-selo-periodo:has(input:focus) {
  outline: 2px solid var(--av-acao-texto);
  outline-offset: 2px;
}
@media (min-width: 700px) {
  .tela-auditoria-venda td,
  .tela-auditoria-venda p:not([class]),
  .tela-auditoria-venda .avd-cabecalho-desktop .avd-subtitulo,
  .tela-auditoria-venda .avd-aviso,
  .tela-auditoria-venda .avd-nota {
    font-size: 13px;
  }
}

/* O GRAFICO DA EVOLUCAO NO CELULAR (r84): com 14 horas num cartao de 330 px, cada coluna tem 21 px e o rotulo "08h" encolhia
   para 8 px (a regua da Apple pede 11). Em vez de encolher a letra, a coluna ganha 32 px e o grafico rola de lado
   DENTRO do cartao (a pagina nao rola). No computador o cartao e largo e nada muda. */
.avd-rolagem-x {
  overflow-x: auto;
  scrollbar-width: thin;
}
@media (max-width: 699.98px) {
  .avd-rolagem-x > .grafico-colunas-rotuladas {
    min-width: calc(var(--colunas, 14) * 32px);
  }
}