/* ===================================================================
   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.

   Contexto: o instalador usa o app majoritariamente pelo celular, em
   obra, às vezes de luva e com rede ruim. As prioridades são:
     1. área de toque confortável;
     2. nada de layout em colunas espremidas;
     3. campo de texto que não faça o iOS dar zoom sozinho.
   =================================================================== */


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

  /* ---------- ALVO DE TOQUE: TRÊS TAMANHOS, SÓ TRÊS ----------
     Antes cada trecho deste arquivo escolhia o seu: conviviam 52, 48,
     46, 44, 40 e 34px, 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
       --tap     TODO botão e TODO campo de formulário
       --tap-xs  controle compacto que divide espaço com uma imagem;
                 não é ação plena e não cabe em 48px sem cobri-la */
  :root { --tap-lg: 54px; --tap: 48px; --tap-xs: 34px; }

  /* 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 8/11px herdado do desktop.

     O prefixo `body` NÃO é decorativo. `.x-btn` é definida no <style>
     do próprio obra_detalhe.html, que aparece DEPOIS deste arquivo no
     documento e venceria o empate de especificidade. `body .x-btn`
     (0,1,1) passa na frente de `.x-btn` (0,1,0) sem precisar de
     !important. */
  body .btn, body .btn-wine, body .btn-ghost, body .btn-primary,
  body .btn-del, body .x-btn {
    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; }

  /* Respiro entre botões: 8px basta no desktop, onde ficam lado a lado
     e estreitos. Empilhados e com a largura toda, colam um no outro. */
  .btn-row { gap: 10px; }

  /* ---------- estrutura geral ---------- */
  .wrap { padding-left: 14px; padding-right: 14px; }
  .hero h1 { font-size: 26px; line-height: 1.15; }

  /* Link de voltar: o alvo real é só o texto, pequeno demais para o
     polegar. O padding cria a área de toque sem deslocar o texto. */
  .crumb a { min-height: var(--tap); display: inline-flex;
    align-items: center; padding-right: 12px; font-size: 14px; }

  /* ---------- CABEÇALHO: menu hambúrguer ----------
     No desktop os links ficam lado a lado na barra. No celular não
     cabem. 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; }
  .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); }

  /* 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; min-height: var(--tap);
    display: flex; align-items: center; }
  .topbar .nav a.on { background: rgba(13,43,82,.08); }
  /* "Sair" no rodapé do menu, destacado em vinho */
  .topbar .nav a.logout-in-menu { display: flex; justify-content: center;
    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 ----------
     16px de fonte: abaixo disso o iOS dá zoom sozinho ao focar o campo,
     e a tela "pula" na cara do instalador. */
  input[type="text"], input[type="password"], input[type="number"],
  input[type="email"], select, textarea {
    font-size: 16px;
    min-height: var(--tap);
  }
  textarea { min-height: 90px; }

  /* Campos em duas ou três colunas não cabem: uma por linha. */
  .grid2, .grid3 { grid-template-columns: 1fr; }

  /* Linha de cabeçalho do cadastro de usuários: título e botões não
     cabem lado a lado. */
  .u-row-top { flex-direction: column; align-items: stretch; }
  .u-row-top .btn-row { margin-left: 0 !important; }

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

  /* ---------- OBRA: cabeçalho do sistema ----------
     Tag, nome e modelo estouram a largura. Empilha em vez de espremer
     o nome do sistema. */
  .sys-head { flex-direction: column; align-items: stretch; }

  /* ---------- FOTOS ---------- */
  .thumb { width: 88px; height: 88px; }
  /* O ✕ de descartar uma foto ainda não enviada divide espaço com a
     própria miniatura de 88px. Aqui vale --tap-xs e não --tap: um alvo
     de 48px cobriria metade da imagem que o instalador precisa ver
     para decidir se descarta. */
  .thumb-sel .thumb-x { width: var(--tap-xs); height: var(--tap-xs);
    font-size: 13px; }

  /* ---------- filtros de etapa (lista de obras) ---------- */
  .filtros { gap: 6px; }
  .filtros a { min-height: var(--tap-xs); display: inline-flex;
    align-items: center; }
}


/* ====================== CELULAR ESTREITO ====================== */
@media (max-width: 380px) {
  .hero h1 { font-size: 23px; }
}


/* =================== 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 { transform: none; filter: none; }
}