/* ============================================================
   CELULAR E TABLET
   ============================================================
   O sistema foi desenhado para tela grande: barra lateral fixa de 220px,
   caixa com dois painéis lado a lado, tabelas largas. Medido a 375px, 14
   das 18 telas transbordavam a largura — o painel de busca do caixa ficava
   inteiro fora da tela.

   Este arquivo é a camada que faz o mesmo sistema caber na mão. Vem DEPOIS
   de app.css de propósito: aqui só existe regra dentro de @media, então
   nada daqui toca o computador.

   Três faixas:
     até 1024px  tablet deitado e notebook pequeno — barra lateral só com
                 ícones (regra que já existia em app.css, a 900px)
     até 760px   TELEFONE — a barra lateral vira gaveta, o caixa vira um
                 painel só, tabela rola na horizontal
     até 400px   telefone pequeno — aperta espaçamento e fonte

   Princípio: nada é escondido por ser "secundário". Tudo o que existe no
   computador existe no celular — muda só como cabe. Quem está no balcão
   precisa da mesma tela que o dono vê em casa.
   ============================================================ */

/* ============================================================
   TELEFONE
   ============================================================ */
@media (max-width: 760px) {

  /* ---- 1. Barra de cima + gaveta de navegação ----
     A lateral de 220px comia metade da tela. Vira gaveta que desliza, e o
     que fica sempre visível é uma barra fina com o botão de menu e o nome
     da tela em que a pessoa está — sem isso ela se perde, porque o menu
     deixou de estar à vista. */
  /* Reexibe o que base.css esconde fora do celular. */
  #barra-mobile, #caixa-abas { display: flex; }

  #barra-mobile {
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    padding: 0 12px;
    background: var(--cor-fundo-card);
    border-bottom: 1px solid var(--cor-borda);
    z-index: 500;
  }

  #btn-menu {
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    background: transparent;
    color: var(--cor-texto);
    border-radius: 10px;
  }
  #btn-menu:active { background: var(--cor-overlay-hover); }

  #barra-mobile-titulo {
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* A gaveta. Fora da tela por padrão; `#app.menu-aberto` traz. */
  #sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 272px;
    max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 600;
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }
  #app.menu-aberto #sidebar { transform: none; }

  /* Quem pede menos movimento no sistema operacional recebe a gaveta
     aparecendo direto, sem deslizar. Vale também como rede de segurança:
     a gaveta nunca depende de uma animação terminar pra ficar usável. */
  @media (prefers-reduced-motion: reduce) {
    #sidebar { transition: none; }
  }

  /* Dentro da gaveta o menu volta a ter texto (a regra de 1024px esconde),
     e cada item vira alvo de toque de verdade. */
  #sidebar .logo-text,
  #sidebar .logo-sub,
  .nav-item span:not(.icon) { display: inline; }
  #sidebar .logo { justify-content: flex-start; }
  .nav-section { display: block; }
  .nav-item {
    justify-content: flex-start;
    padding: 14px 16px;
    min-height: 48px;
    font-size: 15px;
  }

  /* Fundo escuro atrás da gaveta: fecha ao tocar, e deixa claro que o
     resto da tela está esperando. */
  #menu-fundo {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 550;
  }
  #app.menu-aberto #menu-fundo { display: block; }

  #conteudo { padding-top: 54px; }

  /* O botão de tema é position:fixed no canto; sem isto ele cobriria o
     título da barra. Encaixa dentro dela. */
  .btn-tema {
    top: 7px;
    right: 8px;
    width: 40px;
    height: 40px;
    z-index: 520;
  }

  /* ---- 2. Cabeçalho de tela ----
     Ele tem título à esquerda e botões à direita, numa linha só. Com três
     botões (Produtos, Despesas) isso chegava a 700px. Agora quebra. */
  .pg-header {
    padding: 10px 56px 10px 14px;  /* 56 à direita: o botão de tema mora lá */
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 10px;
  }
  .pg-header h1 { font-size: 17px; }
  /* O grupo de ações do cabeçalho é um .flex aninhado (Produtos tem três
     botões, Despesas tem filtro de mês mais três). Sem quebrar ESSE
     também, o .pg-header quebrava mas a fileira de dentro continuava
     saindo da tela — era o que sobrava em 5 telas depois da primeira
     passada. */
  .pg-header .flex {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    justify-content: stretch;
  }
  .pg-header .btn { flex: 1 1 auto; justify-content: center; }
  .pg-header .flex > label { flex: 1 1 100%; }
  .pg-header input[type="month"],
  .pg-header input[type="date"],
  .pg-header select { flex: 1 1 100%; width: 100% !important; }
  .pg-body { padding: 14px; }

  /* ---- 3. Tabelas ----
     Histórico de Vendas chegava a 809px. Em vez de esconder coluna (quem
     está no celular precisa do mesmo dado), a tabela rola sozinha na
     horizontal, dentro do próprio quadro. */
  .tabela {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tabela thead,
  .tabela tbody {
    display: table;
    width: 100%;
    min-width: 560px;  /* abaixo disso as colunas se esmagam e perdem sentido */
  }
  .tabela th, .tabela td { padding: 10px 12px; font-size: 13px; }

  /* ---- 4. Grades de número viram coluna ---- */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 12px; }
  .stat-card .stat-valor { font-size: 24px; }

  /* ---- 5. Janelas (modais) ----
     São 28, quase todas com largura fixa no próprio HTML (420 a 720px).
     O !important existe porque a largura está inline no elemento — sem
     ele, nenhuma regra daqui venceria. */
  .modal-overlay { padding: 10px; align-items: flex-start; }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    margin-top: 10px;
    padding: 18px 16px;
  }
  .modal h2 { font-size: 18px; margin-bottom: 14px; }
  /* Par de botões do rodapé de formulário: um por linha, dedão alcança. */
  .modal .flex.gap-2 { flex-wrap: wrap; }
  .modal .flex.gap-2 > .btn { flex: 1 1 100%; }

  /* ---- 6. Alvo de toque ----
     44px é o mínimo confortável para o dedão; e campo com fonte menor que
     16px faz o iPhone dar zoom sozinho ao focar, desalinhando a tela. */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; padding: 8px 14px; }
  .btn-lg { min-height: 50px; }
  input, select, textarea { font-size: 16px; min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { min-height: 0; width: 20px; height: 20px; }

  /* ---- 7. Barras de filtro e ação no corpo da tela ----
     Vários `.flex gap-1/gap-2` com campo + botões numa linha só. */
  /* Qualquer fileira do corpo da tela, em qualquer nível. `flex-wrap`
     só muda alguma coisa quando o conteúdo NÃO cabe — numa fileira que
     já cabia, nada acontece. Por isso pode ser amplo: é o jeito de pegar
     também as fileiras aninhadas, como os filtros de status do Delivery,
     que a regra anterior (só filho direto) deixava passar. */
  .pg-body .flex { flex-wrap: wrap; }
  .pg-body .flex > input[type="search"],
  .pg-body .flex > input[type="text"] { flex: 1 1 100%; }

  /* ---- 8. CAIXA RÁPIDO ----
     Era dois painéis lado a lado; o da direita (busca) ficava fora da
     tela. No celular eles viram um só, e a pessoa alterna. Quem manda por
     padrão é a BUSCA: no celular não existe leitor de código de barras
     físico, então achar o produto é o passo que mais se repete.
     O rodapé com total e Pagar fica fixo, sempre à mão. */
  #pg-caixa.ativa { flex-direction: column; position: relative; }

  #painel-venda, #painel-busca {
    width: 100%;
    max-width: 100%;
    border-right: none;
  }
  /* O painel da venda NÃO some: ele encolhe. No modo Buscar fica só a
     faixa de dinheiro no pé da tela — total e Pagar — e no modo Carrinho
     ele cresce e mostra a lista inteira.
     A primeira versão disto escondia o painel inteiro, e o preço foi alto:
     a pessoa passa 90% do tempo buscando, e nesse tempo o quanto deu e o
     botão de cobrar simplesmente não existiam na tela. Pra cobrar: trocar
     de painel, achar o Pagar, tocar.
     `order` põe a busca em cima sem mexer no HTML (no documento o painel
     da venda vem primeiro). */
  #pg-caixa #painel-busca { display: flex; flex-direction: column; order: 1; flex: 1; min-height: 0; }
  #pg-caixa #painel-venda  { display: flex; order: 2; flex: none; }
  #pg-caixa.ver-carrinho #painel-busca { display: none; }
  #pg-caixa.ver-carrinho #painel-venda { flex: 1; min-height: 0; }

  /* No modo Buscar, do painel da venda só fica a faixa de dinheiro. O
     número da venda, o Cliente, o Nova e os dois cancelamentos ficam a um
     toque, na aba Carrinho — que é onde eles são usados de verdade. */
  #pg-caixa:not(.ver-carrinho) #painel-venda-header,
  #pg-caixa:not(.ver-carrinho) #lista-itens,
  #pg-caixa:not(.ver-carrinho) #btn-nova-venda,
  #pg-caixa:not(.ver-carrinho) #btn-cancelar-venda,
  /* `!important` porque este link carrega `style="display:block"` no
     próprio elemento, e estilo inline vence qualquer folha sem ele — sem
     isto o "Cancelar uma venda já concluída" ficava espremido dentro da
     faixa de dinheiro, ao lado do botão Pagar. */
  #pg-caixa:not(.ver-carrinho) #link-cancelar-concluida { display: none !important; }

  #pg-caixa:not(.ver-carrinho) #rodape-venda {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
  }
  #pg-caixa:not(.ver-carrinho) #total-venda { flex: 1; margin: 0; text-align: left; font-size: 26px; }
  #pg-caixa:not(.ver-carrinho) #acoes-venda { display: flex; flex: none; gap: 8px; }

  /* O campo de bipagem sai do celular. Dois motivos, e o segundo é o que
     pesa: (1) num telefone não há leitor de código de barras pra ele
     receber, e a busca por nome ao lado faz o mesmo trabalho; (2) ele era
     a fonte de um teclado que não fechava — `focarCampo()` roda depois de
     QUALQUER mexida no carrinho, e um ouvinte de `blur` devolvia o foco
     sozinho, então o teclado subia por cima do total e do Pagar e voltava
     quando a pessoa tocava fora. Com o campo em display:none, focar nele
     não faz nada e o ouvinte nunca dispara: conserta sem tocar no JS. */
  #pg-caixa #campo-leitura-wrap { display: none; }

  /* A instrução do atalho numérico é de teclado físico: no celular gasta
     duas linhas sem servir pra nada. */
  #busca-rapida > .text-muted.text-sm { display: none; }

  /* Faixa que alterna entre os dois, com o total sempre visível. */
  #caixa-abas {
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cor-borda);
    background: var(--cor-fundo-card);
    flex: none;
  }
  #caixa-abas button {
    flex: 1;
    min-height: 42px;
    border-radius: 10px;
    background: var(--cor-fundo-input);
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto);
    font-size: 14px;
    font-weight: 600;
  }
  #caixa-abas button.ativa {
    background: rgba(155,208,52,.15);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
  }

  /* A linha do item tinha nome, preço, quantidade, valor e remover numa
     linha só — não cabe. Vira duas linhas: nome em cima, controles
     embaixo. */
  /* Duas fileiras com lugar marcado, sem mexer no HTML — os cinco filhos
     já são filhos diretos da linha. Em cima o nome e o ✕ (no canto, longe
     dos números, pra dedão grande não remover item sem querer); embaixo
     preço, quantidade e o valor encostado à direita, alinhado com o total. */
  .item-venda {
    display: grid;
    grid-template-columns: 88px 60px 1fr 44px;
    grid-template-areas:
      "nome  nome nome  del"
      "preco qtd  valor valor";
    column-gap: 8px;
    row-gap: 8px;
    padding: 12px 10px;
  }
  .item-venda-nome  { grid-area: nome; font-size: 14px; }
  .item-venda-preco { grid-area: preco; }
  .item-venda-qtd   { grid-area: qtd; }
  .item-venda-valor { grid-area: valor; font-size: 16px; text-align: right; align-self: center; }
  .item-venda-del   { grid-area: del; min-width: 44px; min-height: 44px; align-self: start; }
  /* 44px e 16px de fonte: o mesmo alvo decidido lá em cima. A regra
     anterior daqui rebaixava pra 40/15 e fazia o iPhone dar zoom ao focar. */
  .item-venda-preco, .item-venda-qtd { min-height: 44px; font-size: 16px; }

  #campo-leitura { font-size: 16px; }
  #resultado-busca { grid-template-columns: 1fr; }
  #total-venda { font-size: 30px; }

  /* ---- 9. COMANDAS ---- */
  #comandas-grid { grid-template-columns: 1fr !important; }
  #painel-comanda { width: 100%; max-width: 100%; }
  #comandas-detalhe-view { flex-direction: column; }

  /* ---- 10. MONTAGEM DO COPO ----
     A janela já encolhia a 640px; a 375 o rodapé com extras, total e dois
     botões ainda brigava por espaço. O total fica colado embaixo,
     visível enquanto a pessoa rola as opções com o cliente ao lado. */
  /* Duas classes pra vencer o `.modal { padding; margin-top }` genérico
     acima: a montagem já dá o próprio respiro no cabeçalho e no rodapé,
     e o acolchoado extra empurrava o rodapé pra fora da tela.
     `100dvh` é a altura REALMENTE visível no celular; `100vh` no iPhone
     conta a tela com a barra do navegador escondida (~12% a mais), e era
     por isso que o total e o botão nasciam cortados embaixo. */
  .modal.mont-modal {
    padding: 0;
    margin-top: 0;
    overflow: hidden;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }

  /* O cabeçalho volta a ser LINHA. O @media 640px do app.css empilha nome,
     preço e campo de quantidade, gastando ~173px de altura fixa — mais da
     metade do que sobra pra lista na tela onde rolar é justamente o custo. */
  .mont-cab {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 10px;
  }
  .mont-cab > div:first-child { min-width: 0; }  /* deixa o nome encolher em vez de empurrar */
  .mont-qtd { flex: none; align-items: flex-end; }

  .mont-corpo { padding: 0 14px 8px; overflow-x: hidden; }
  .mont-grupo { padding: 0 0 14px; }

  /* O cabeçalho do grupo gruda no topo enquanto aquele grupo está em
     tela: a regra ("até 3 · 2 grátis") e o contador ficam parados na
     frente dos olhos. Sem isso eles rolavam pra fora nos primeiros
     toques, e a pessoa escolhia sem saber quantas ainda pode nem quantas
     ainda são de graça — e a opção apagada por ter batido o máximo ficava
     sem explicação nenhuma na tela. */
  .mont-grupo-cab {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--cor-fundo-card);
    padding: 12px 0 8px;
  }
  .mont-grupo-contador { font-size: 13px; padding: 4px 12px; }

  /* Duas colunas de propósito (uma só dobraria a rolagem), mas por dentro
     o botão empilha: o nome usa a largura inteira em cima, o preço embaixo.
     Lado a lado, "Leite condensado" e "Chocolate maltado" estouravam a
     coluna — e como o corpo rola, isso virava rolagem LATERAL. */
  .mont-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
  .mont-opcao {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
    padding: 8px 10px;
    min-height: 52px;
    font-size: 13px;
  }
  .mont-opcao-nome { min-width: 0; overflow-wrap: anywhere; }

  .mont-rodape {
    position: sticky;
    bottom: 0;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 12px 14px;
  }
  .mont-total { font-size: 23px; }

  /* `order` inverte a ordem visual sem tocar no HTML: o aviso de "falta
     escolher" sobe pra ACIMA dos botões. Antes ele ficava embaixo do
     botão verde desabilitado — a pessoa tocava no botão morto e a
     explicação estava abaixo, pequena, encostada na direita. */
  .mont-acoes { order: 1; grid-column: 1 / -1; display: flex; gap: 8px; }
  .mont-aviso { order: 0; min-height: 0; text-align: center; }

  /* Cancelar joga a montagem inteira fora e não tem desfazer. Metade da
     largura pra ele, com uma mão, em pé, é convite a toque errado:
     confirmar é o gesto fácil, desistir exige mirar. */
  #montagem-cancelar { flex: 0 0 96px; min-height: 48px; }
  #montagem-confirmar { flex: 1; min-height: 52px; }

  /* ---- 11. DELIVERY ---- */
  .pedido-itens { font-size: 13px; }
  #delivery-lista .card .flex { flex-wrap: wrap; gap: 8px; }
  #delivery-lista .card .btn { flex: 1 1 auto; }

  /* ---- 12. Calendário de diárias ----
     Sete colunas em 375px dão 50px por dia: aperta, mas tirar coluna
     quebraria a semana. Só encolhe o texto. */
  .calendario-diarias .dia-cel { font-size: 12px; padding: 6px 2px; }
}

/* ============================================================
   TELEFONE PEQUENO (iPhone SE e parecidos)
   ============================================================ */
@media (max-width: 400px) {
  .pg-body { padding: 12px 10px; }
  .pg-header { padding: 10px 52px 10px 12px; }
  .pg-header h1 { font-size: 16px; }
  /* A busca de produto fica em UMA coluna por fileira larga: nome à
     esquerda, preço à direita, alvo que o dedão acerta em pé sem mirar.
     Em duas colunas estreitas o nome de produto de açaiteria quebrava em
     três linhas e as fileiras ficavam desencontradas. */
  #resultado-busca { grid-template-columns: 1fr; }
  #total-venda { font-size: 26px; }
  .modal { padding: 16px 12px; }
}

/* ============================================================
   TABLET
   ============================================================
   Entre 761 e 1024 o desenho de tela grande serve: dois painéis no caixa
   cabem, tabela cabe. Só a barra lateral vira ícones (já era assim a
   900px em app.css; subimos para 1024 porque o iPad deitado tem 1024 e
   com a barra de 220px o caixa ficava espremido).
   ============================================================ */
@media (min-width: 761px) and (max-width: 1024px) {
  #sidebar { width: 60px; }
  #sidebar .logo-text, #sidebar .logo-sub, .nav-item span:not(.icon) { display: none; }
  #sidebar .logo { justify-content: center; }
  .nav-item { justify-content: center; padding: 12px 8px; min-height: 46px; }
  .nav-section { display: none; }

  #painel-venda { width: 320px; }
  /* Tablet é tela de toque: o alvo cresce mesmo sobrando espaço. */
  .btn { min-height: 42px; }
  input, select, textarea { min-height: 42px; }
  .mont-opcao { min-height: 46px; }
}