/* ===================================================================
   mobile.css — ajustes para celular.

   REGRA DE OURO: todo o conteúdo deste arquivo vive dentro de uma
   @media (max-width: ...). Em telas de desktop nenhuma regra daqui é
   aplicada, então a aparência no computador continua exatamente a
   mesma de antes.

   O arquivo cobre as telas do Hub: orçamentos, catálogo e painel do
   gestor.

   Contexto de uso do Hub: a Adriana e o Heverton lançam orçamento do
   escritório; o Pedro (gestor) revisa e aprova pelo CELULAR. Então a
   prioridade aqui é o painel do gestor — "Abrir e revisar", aprovar e
   rejeitar precisam de alvo de toque confortável e sem ambiguidade.
   Prioridades:
     1. área de toque confortável (mín. 44px, recomendação da Apple);
     2. nada de layout em colunas espremidas;
     3. ações destrutivas nunca coladas às inofensivas.
   =================================================================== */


/* ============================ CELULAR ============================ */
@media (max-width: 640px) {

  /* ---------- ALVO DE TOQUE: TRÊS TAMANHOS, SÓ TRÊS ----------
     Antes cada tela escolhia o seu: conviviam 52, 48, 46 e 44px, e botões
     vizinhos saíam com alturas diferentes. Aqui ficam definidos os únicos
     valores permitidos no celular. O resto do arquivo referencia estas
     variáveis, nunca um número solto.

       --tap-lg  ação principal no fim de uma tela longa (gerar orçamento,
                 aprovar, rejeitar): chega-se nela depois de rolar tudo
       --tap     todo botão e todo campo de formulário
       --tap-xs  ações compactas dentro de uma linha de lista (editar,
                 copiar, excluir), que não cabem em 48px sem quebrar a linha */
  :root { --tap-lg: 52px; --tap: 48px; --tap-xs: 44px;
          /* no dedo, os controles da barra sobem para o alvo de toque:
             o botão já tinha min-height var(--tap) e ficaria mais alto que
             o campo se a altura comum continuasse nos 44px do ponteiro. */
          --h-ctrl: var(--tap); }

  /* Regra base: um botão é um botão, tenha a classe que tiver. Altura única,
     conteúdo centralizado e folga lateral de 16px. O aperto vinha daqui, do
     padding de 8px herdado do desktop.

     O prefixo `body` NÃO é decorativo: várias telas redefinem estas classes
     em <style> dentro do próprio template, que aparece DEPOIS deste arquivo
     no documento e venceria o empate. `body .btn-gen` (0,1,1) passa na frente
     de `.btn-gen` (0,1,0) sem precisar de !important. */
  body .btn, body .btn-wine, body .btn-ghost, body .btn-primary,
  body .btn-gen, body .btn-pdf, body .btn-act, body .btn-del,
  body .btn-rejeitar, body .btn-sm {
    min-height: var(--tap);
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; padding-left: 16px; padding-right: 16px;
    font-size: 14px; box-sizing: border-box;
  }
  /* .btn-sm encolhe fonte e padding no desktop; no celular isso reintroduz o
     botão espremido no meio dos irmãos. Anulado. */
  body .btn-sm { padding: 0 16px; font-size: 14px; }

  /* ---------- estrutura geral ---------- */
  .wrap { padding-left: 14px; padding-right: 14px; }
  /* botão de voltar: o alvo real é só o texto, pequeno demais para o polegar.
     O padding à direita cria a área de toque sem deslocar o texto nem mudar o
     respiro de baixo, que é o mesmo de todas as telas. */
  .voltar { min-height: var(--tap); font-size: 14px; padding-right: 12px; }
  .hero h1 { font-size: 26px; line-height: 1.15; }
  h2.page-t { font-size: 22px; }

  /* ---------- CABEÇALHO: menu hambúrguer ----------
     No desktop os links ficam lado a lado na barra. No celular não cabem
     (o nome do usuário + "Painel do gestor" com badge estouram a largura).
     Aqui a barra fica com: logo à esquerda · nome do usuário + ☰ à direita;
     e os links viram um painel que desliza da direita. Tudo em CSS, sem JS:
     um checkbox oculto (#nav-toggle) guarda o estado aberto/fechado. */
  .topbar { gap: 10px; padding: 10px 14px; }
  .topbar .tb-logo img { height: 32px; }
  .topbar .right { gap: 10px; }
  .topbar a.logout { display: none; }          /* "Sair" vai para dentro do menu */
  .topbar .whoami { font-size: 11px; text-align: right; line-height: 1.25; }

  /* o botão ☰ */
  .burger { display: flex; flex-direction: column; justify-content: center;
    gap: 4px; width: 42px; height: 42px; padding: 9px; cursor: pointer;
    border-radius: 8px; border: 1px solid rgba(13,43,82,.18); flex: none;
    position: relative; }
  .burger span { display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--ink); transition: transform .2s, opacity .2s; }
  /* animação ☰ → ✕ quando aberto */
  .nav-toggle:checked ~ .topbar .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle:checked ~ .topbar .burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .topbar .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* badge de pendências espelhado no hambúrguer: com o menu fechado, é o
     único lugar onde o gestor vê que há orçamento esperando por ele.
     Some quando o menu abre — lá dentro o badge do link já aparece. */
  .burger-dot { position: absolute; top: -5px; right: -5px; min-width: 17px;
    height: 17px; padding: 0 4px; border-radius: 20px; background: var(--wine);
    color: #fff; font-size: 10px; font-weight: 700; font-style: normal;
    line-height: 17px; text-align: center; box-sizing: border-box;
    transition: opacity .2s; }
  .nav-toggle:checked ~ .topbar .burger .burger-dot { opacity: 0; }

  /* painel deslizante com os links */
  .topbar .nav {
    position: fixed; top: 0; right: 0; z-index: 60;
    height: 100dvh; width: min(78vw, 300px);
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 74px 16px 24px; background: var(--paper);
    box-shadow: -8px 0 30px rgba(0,0,0,.28);
    transform: translateX(100%); transition: transform .25s ease;
    overflow-y: auto;
  }
  .nav-toggle:checked ~ .topbar .nav { transform: translateX(0); }
  .topbar .nav a { font-size: 16px; padding: 13px 14px; border-radius: 8px;
    border: none; white-space: nowrap; }
  .topbar .nav a.on { background: rgba(13,43,82,.08); }
  /* o badge de pendências herda margin-left:5px do desktop, que na fonte de
     16px do menu cola no texto ("Painel do gestor2"). Empurra para a direita
     da linha, como contagem, e dá folga. */
  .topbar .nav a .badge-pend { margin-left: 8px; padding: 2px 8px; font-size: 12px; }
  /* "Sair" no rodapé do menu, destacado em vinho */
  .topbar .nav a.logout-in-menu { display: block; margin-top: auto;
    color: var(--wine); border: 1px solid rgba(139,26,43,.35); text-align: center; }

  /* overlay escuro atrás do painel.
     display:block reverte o `display:none` do style.css (que esconde o
     overlay no desktop); aqui ele existe, mas fica invisível/inerte via
     opacity+visibility até o menu abrir. */
  .nav-overlay { display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(0,0,0,.45); opacity: 0; visibility: hidden;
    transition: opacity .25s; }
  .nav-toggle:checked ~ .nav-overlay { opacity: 1; visibility: visible; }
  /* a topbar (sticky, z-index:20) precisa ficar ACIMA do overlay (z-index:50)
     quando o menu está aberto — senão o overlay cobre os links e engole o
     toque. Fixa no topo e sobe o z-index. */
  .nav-toggle:checked ~ .topbar { z-index: 55; }

  /* ---------- campos de formulário ----------
     campos de texto com 16px: abaixo disso o iOS dá zoom sozinho ao focar
     o campo, e a tela "pula" na cara do usuário */
  input[type="text"], input[type="password"], input[type="number"],
  input[type="date"], input[type="email"], select, textarea {
    font-size: 16px;
    min-height: var(--tap);
  }
  textarea { min-height: 90px; }
  .btn-gen { min-height: var(--tap-lg); font-size: 16px; }

  /* ---------- cards da home ---------- */
  .apps-grid { grid-template-columns: 1fr; }
  .app-card { padding: 22px 18px; }

  /* ---------- painel do gestor: grade de controles ----------
     Mesmos números dos cards da home, logo acima: em coluna única o alvo de
     toque ocupa a largura toda e o nome do destino não quebra em duas linhas. */
  .ctrl-grid { grid-template-columns: 1fr; }
  .ctrl { padding: 22px 18px; }

  /* ---------- PAINEL DO GESTOR (a tela mais usada no celular) ----------
     O Pedro aprova daqui. "Abrir e revisar" e "Ver PDF atual" empilham,
     full-width, com alvo generoso — são a ação principal da tela. */
  .btn-row { flex-wrap: wrap; }
  /* Os botões de aprovação vivem no .lr-acts, dentro da linha e à direita.
     No celular não cabem dois rótulos lado a lado ("Abrir e revisar" e "Ver
     PDF atual"), então cada um ocupa a largura toda: são a ação principal
     desta tela. O .btn-row cobre o formulário de editar resposta, que abre
     dentro do mesmo card.

     O alvo são .btn-wine e .btn-ghost, que /orcamentos não usa no .lr-acts:
     lá são .btn-pdf e .btn-act, e a regra não os alcança. */
  .orc-card .lr-acts { width: 100%; }
  .orc-card .lr-acts .btn-wine, .orc-card .lr-acts .btn-ghost,
  .orc-card .btn-row .btn-wine, .orc-card .btn-row .btn-ghost {
    width: 100%; min-height: var(--tap); box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; }

  /* Mesma regra para os formulários em .panel, que é outro caso: Salvar e
     Cancelar de Cadastros e do formulário de cliente também empilham. */
  .panel .btn-row .btn-wine, .panel .btn-row .btn-ghost {
    width: 100%; min-height: var(--tap); box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; }

  /* decisão do gestor: aprovar/rejeitar empilhados e altos. Ação com
     consequência não pode ter alvo apertado nem vizinho colado. */
  .decisao-btns { flex-direction: column; gap: 10px; }
  .decisao-btns .btn-gen, .decisao-btns .btn-rejeitar { min-height: var(--tap-lg); }

  /* ---------- LISTA DE ORÇAMENTOS ----------
     .list-row é flex (main | valor | ações). No celular vira empilhado:
     nome+data em cima, valor e ações na linha de baixo. */
  .list-row { flex-wrap: wrap; row-gap: 10px; padding: 14px; }
  .lr-main { flex-basis: 100%; min-width: 0; }
  .lr-title { font-size: 15px; line-height: 1.3; }
  .lr-val { font-size: 16px; }
  /* flex-wrap: as ações da linha do catálogo passaram a ser QUATRO (editar
     · copiar · fixar · lixeira). Sem o wrap, o flex encolhe o primeiro botão
     até cortar o rótulo DENTRO dele: num iPhone SE o "Editar" virava um
     retângulo de 44px com a palavra partida. Quebrar em duas linhas mantém
     todo rótulo legível. */
  .lr-acts { margin-left: auto; flex-wrap: wrap; row-gap: 7px; }
  .lr-acts .btn-act, .lr-acts .btn-ghost, .lr-acts button {
    min-height: var(--tap-xs); min-width: var(--tap-xs); }

  /* bloco de solicitação/resposta abaixo do card */
  .resp-box { padding: 12px 14px; }
  .resp-line { font-size: 13px; }
  .resp-when { display: block; margin-left: 0; margin-top: 2px; }

  /* ---------- FILTROS (orçamentos e histórico do gestor) ----------
     busca + status + mês + botões em linha não cabem: a busca ocupa a
     largura toda e os selects dividem a linha de baixo. */
  /* 8px, e não os 6px do ponteiro: aqui os controles EMPILHAM (o .ac-field
     abaixo vira 100%), então o gap é respiro vertical, não vão lateral. */
  .filtros { gap: 8px; }
  .filtros .ac-field { flex-basis: 100%; min-width: 0; }
  .filtros select { flex: 1; min-width: 0; min-height: var(--tap); }
  .filtros .btn-ghost { min-height: var(--tap); flex: none; }

  /* ---------- agrupamento por mês ---------- */
  /* a altura vem do --h-ctrl, igual à do campo de busca logo acima */
  .mes-head { padding: 0 12px; box-sizing: border-box; }

  /* ---------- CATÁLOGO: serviços e peças ----------
     3 botões (editar · copiar · lixeira) + nome + valores não cabem em
     linha. Empilha: dados em cima, ações na linha de baixo à direita,
     com a lixeira mantendo a folga do "copiar". */
  .lr-acts .btn-sm { min-height: var(--tap-xs); padding: 0 12px; }
  .dup-tag { display: inline-block; margin-left: 0; margin-top: 4px; }

  /* ---------- FORMULÁRIO DE ORÇAMENTO ---------- */
  .grid2, .grid3 { grid-template-columns: 1fr; }
  /* autocomplete: o botão "+ Novo" ao lado da busca espreme o campo */
  .ac-wrap { flex-direction: column; align-items: stretch; }
  .ac-novo { width: 100%; justify-content: center; min-height: var(--tap); }
  .ac-list { max-height: 260px; }
  .ac-item { padding: 13px 14px; }

  /* estado vazio do painel */
  .empty-ok { padding: 28px 16px; }

  /* ---------- USUÁRIOS ---------- */
  .u-row-top { flex-direction: column; align-items: stretch; }
  .u-row-top .btn-row { margin-left: 0 !important; }
}


/* ====================== CELULAR ESTREITO ====================== */
@media (max-width: 380px) {
  .hero h1 { font-size: 23px; }
  .lr-acts { width: 100%; justify-content: flex-end; }
  .filtros select { flex-basis: 100%; }
}


/* =================== TOQUE (independe da largura) ===================
   Aparelhos sem mouse: remove o hover, que em touch fica "grudado"
   depois do toque. Não afeta desktop, que tem ponteiro fino. */
@media (hover: none) and (pointer: coarse) {
  .app-card:hover, .list-row:hover, .mes-head:hover, .btn-act-edit:hover {
    transform: none;
  }
}