/* ===================================================================
   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: os técnicos usam o portal majoritariamente pelo celular,
   em campo, às vezes de luva e com rede ruim. As prioridades são:
     1. área de toque confortável (mín. 44px, recomendação da Apple);
     2. nada de layout em colunas espremidas;
     3. tabelas largas com rolagem horizontal em vez de estourar a tela.
   =================================================================== */


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

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

  /* ---------- ALVO DE TOQUE: TRÊS TAMANHOS, SÓ TRÊS ----------
     Antes cada tela escolhia o seu: havia 52, 48, 46, 44, 40 e 34px
     convivendo, 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 (Concluir checklist,
                 Gerar relatórios): o técnico chega nela depois de rolar tudo
       --tap     TODO botão e TODO campo de formulário
       --tap-xs  controles compactos sobre a foto e chips de filtro; não são
                 ações plenas e não cabem em 48px sem cobrir a imagem */
  :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,
     de padding de 8/11px herdado do desktop.

     O prefixo `body` NÃO é decorativo: várias destas classes (.btn-ok,
     .btn-acao, .btn-danger…) são definidas em <style> dentro do próprio
     template, que aparece DEPOIS deste arquivo no documento e venceria no
     empate de especificidade. `body .btn-ok` (0,1,1) passa na frente de
     `.btn-ok` (0,1,0) sem precisar de !important. */
  body .btn, body .btn-wine, body .btn-ghost, body .btn-ok, body .btn-mini,
  body .btn-del, body .btn-danger, body .btn-sg, body .btn-primary,
  body .btn-acao, body .btn-vinc, body .lote-btn, body .big-dl {
    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 eles ficam lado a lado
     e estreitos. Empilhados e com a largura toda, colam um no outro. */
  .acts, .adm-acts, .btn-row, .facts, .admin-actions,
  .topo .acoes, .sede .acoes, .os-import-head { gap: 10px; }

  /* botão de voltar: o alvo real é só o texto, pequeno demais para o polegar.
     O padding cria a área de toque sem deslocar o texto (margem negativa). */
  .voltar { min-height: var(--tap); padding: 0 12px 0 0; font-size: 14px; }

  /* ---------- CABEÇALHO: menu hambúrguer ----------
     No desktop os 5 links ficam lado a lado na barra. No celular não cabem
     (Relatórios/Painel caíam para fora e criavam faixa vazia rolável). 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; }
  .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: 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; }

  /* ---------- CHECKLIST: a tela mais usada em campo ---------- */
  /* botões C / N/C / N/A: alvo de toque de 48px, para uso com luva */
  .seg label {
    padding: 14px 6px;
    min-height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
  }
  .item { padding: 14px; }
  .item .txt { font-size: 15px; line-height: 1.45; }

  /* campos de texto com 16px: abaixo disso o iOS dá zoom sozinho
     ao focar o campo, e a tela "pula" na cara do técnico */
  input[type="text"], input[type="password"], input[type="number"],
  select, textarea {
    font-size: 16px;
    min-height: var(--tap);
  }
  /* o campo de sistema selecionado é uma div: acompanha a mesma altura */
  .fbox input[type=text], .fbox select { height: var(--tap) !important; }
  textarea { min-height: 90px; }

  /* OS e Data lado a lado ficam apertados: empilha.
     Antes estas regras caçavam o atributo `style` (`div[style*="display:flex"]`)
     como filho direto do <form> — e nunca casavam, porque a linha mora dentro
     do <fieldset>. Com as classes do template, casam.

     Prefixo `body` pelo mesmo motivo da regra base dos botões: `.chk-data`
     é declarada no <style> do próprio chk_form, que aparece depois deste
     arquivo no documento e venceria o empate de especificidade. */
  body .chk-linha { flex-direction: column; }
  body .chk-data { width: 100%; }

  /* alvo de toque generoso: o botão fica no fim do formulário, e o técnico
     chega nele depois de rolar os 23 ou 28 itens */
  .btn-gen { min-height: var(--tap-lg); font-size: 16px; }

  /* "Abrir ocorrência" dentro do checklist: desde a remoção do campo de
     prioridade (07/2026) a linha já é de coluna única no desktop. A regra
     fica como garantia — o !important é necessário porque o template define
     a mesma regra em <style> no body, que vence na ordem do documento. */
  .oc-campos .oc-linha { grid-template-columns: 1fr !important; }

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

  /* ---------- checklist: home e sede ---------- */
  /* botões Mensal / Trim. (chk_admin reaproveita .men/.tri para cor) */
  .cond-row .btn, .btn.men, .btn.tri { min-height: var(--tap); }

  /* ---------- admin de checklists ---------- */
  .adm-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .adm-acts { width: 100%; flex-wrap: wrap; }
  .adm-acts .btn, .adm-acts button { min-height: var(--tap); }
  .admin-actions { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* ---------- OCORRÊNCIAS ---------- */
  /* seletor Sede / Sistema / Condensadora: 2 colunas viram 1 */
  .frow { grid-template-columns: 1fr !important; }
  .oc-kpis { grid-template-columns: repeat(3, 1fr) !important; gap: 7px; }
  /* .oc-card / .oc-titulo: o CARD DA LISTA tem @media próprio dentro de
     oc_lista.html (estrutura de 4 faixas: identidade, título, local,
     pessoas). Estas duas regras seguem valendo como piso e para o
     .oc-titulo do DETALHE, que é outro elemento com o mesmo nome de classe. */
  .oc-card { padding: 15px; }
  .oc-titulo { font-size: 15px; line-height: 1.3; }
  .facts { flex-direction: column; }
  .facts .btn-wine, .facts .btn-ghost { width: 100%; text-align: center; }
  /* ---------- AUTOSAVE: o aviso de falha precisa ser VISTO ----------
     O texto do atendimento agora grava sozinho. No desktop um "salvo" discreto
     basta. No celular, em campo, o estado que importa é o DIRTY: "sem conexão —
     o texto continua aqui". A 11px e translúcido ele passa batido, e o técnico
     sai achando que salvou. Aqui o aviso de falha vira uma faixa legível.
     O "salvo" continua discreto: sucesso não precisa gritar. */
  .save-hint { font-size: 12.5px; }
  .save-hint.dirty {
    display: block; padding: 9px 11px; border-radius: 8px;
    background: rgba(224,149,42,.14); border: 1px solid rgba(224,149,42,.5);
    font-weight: 600; line-height: 1.45;
  }
  .fstatus.dirty {
    display: block; padding: 9px 11px; border-radius: 8px;
    background: rgba(224,149,42,.14); border: 1px solid rgba(224,149,42,.5);
    font-weight: 600; line-height: 1.45;
  }

  /* aviso do que falta para finalizar: texto longo, tela estreita */
  .oc-aviso { font-size: 12px; line-height: 1.5; padding: 11px 12px; }

  .thumb { width: 88px; height: 88px; }

  /* ---------- CONTROLES SOBRE A FOTO (celular) ----------
     No desktop o X (excluir), o ↻ (substituir) e as setas ◀▶ têm ~21px de
     altura — menos da metade dos 44px que este arquivo estabelece. Com o
     mouse isso passa; no celular, com luva e a miniatura reduzida para 88px,
     são quatro alvos minúsculos sobre a mesma foto. E errar o X APAGA a foto.

     Aqui eles viram alvos de 34px. Não chegam a 44 de propósito: quatro
     alvos de 44px não cabem numa miniatura de 88px sem cobrir a imagem que
     o técnico precisa ver para decidir. 34px é o maior valor que preserva a
     foto legível — e o X continua tendo confirmação antes de apagar. */
  .thumb-del, .thumb-sub {
    min-width: var(--tap-xs); min-height: var(--tap-xs);
    display: flex; align-items: center; justify-content: center;
    padding: 0; font-size: 13px;
  }
  .thumb-nav button {
    min-width: var(--tap-xs); min-height: var(--tap-xs);
    display: flex; align-items: center; justify-content: center;
    padding: 0; font-size: 14px;
  }
  /* a barra de setas ocupa a largura toda: separa ◀ e ▶ ao máximo, para o
     polegar não pegar a errada */
  .thumb-nav { bottom: 3px; padding: 0 3px; }
  /* Ações do gestor (Gerar relatório / Reabrir / Baixar fotos / Excluir):
     todos os controles com a MESMA largura e altura. "Gerar relatório" é um
     <a class="btn-ok btn-sm"> — por isso precisa entrar aqui junto dos
     button/.btn-ghost, senão fica pequeno e destoa dos demais. O btn-sm
     encolhia o padding/fonte; anulamos no mobile para uniformizar. */
  .acts { flex-wrap: wrap; }
  .acts form { width: 100%; }
  .acts button, .acts .btn-ghost, .acts .btn-ok, .acts > a.btn-mini {
    width: 100%; min-height: var(--tap); justify-content: center; box-sizing: border-box; }
  .acts .btn-ok.btn-sm svg { width: 16px; height: 16px; }
  .box .acts form[style*="margin-left:auto"] { margin-left: 0 !important; }

  /* ---------- PAINEL DO GESTOR ---------- */
  .ctrl-grid { grid-template-columns: 1fr; }

  /* ---------- SISTEMAS E CONDENSADORAS ---------- */
  /* 4 colunas fixas (modelo/tag/local/botões) não cabem: empilha tudo */
  .cond-row, .add-cond { grid-template-columns: 1fr !important; gap: 10px; }
  .cond-row > div[style*="display:flex"] { justify-content: flex-end; }
  .sys-name-form { flex-direction: column; align-items: stretch; min-width: 0; }
  .sys-name-form .btn-mini { width: 100%; }
  .sys-head { flex-direction: column; align-items: stretch; }
  .sys-head .inline-f { margin-left: 0 !important; }
  .sys-head .inline-f button { width: 100%; }
  .btn-mini { min-height: var(--tap) !important; }
  .site-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; }
  .site-tab { white-space: nowrap; }

  /* ---------- ORDENS DE SERVIÇO ---------- */
  /* (a lista em si virou .os-row, com @media próprio no gestor_os.html) */
  .os-import-head { flex-direction: column; align-items: stretch; }
  .os-import-head form, .os-import-head button { width: 100%; }
  /* barra de competência: ver .period-form (componente único) */

  /* "Definir todas da competência como:" — no desktop é rótulo + 3 botões
     largos em linha. No celular os botões (padding 24px) estouravam e
     quebravam torto. Vira: rótulo em cima, 3 botões dividindo a largura
     igualmente numa grade. Como os <form> usam display:contents, quem
     recebe o grid é a própria .os-bar e cada .lote-btn é um item. */
  .os-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .os-bar .lote-lbl { grid-column: 1 / -1; margin: 0 0 2px; }
  .os-bar .lote-btn { width: 100%; padding: 0 8px; height: var(--tap); font-size: 12px; }

  /* botões por sede dentro do cabeçalho recolhível (Galpão T.I., MG09…).
     O template já quebra .s-acts para width:100% no @media dele; aqui damos
     grid de 3 colunas para "Semestral" parar de estourar a página.
     (os <form> são display:contents, então o grid vai no .s-acts) */
  .os-sec .s-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .os-sec .s-acts .btn-sg { width: 100%; padding: 0 4px; height: var(--tap); font-size: 11px; }
  /* nome da sede pode ter 2 linhas (Centro Logístico) sem empurrar o número */
  .os-sec > summary { flex-wrap: wrap; }
  .os-sec .s-nome { flex: 1; min-width: 0; }

  /* ---------- OCORRÊNCIA: cabeçalho do card ----------
     Título longo empurrava o "Editar" (margin-left:auto) para uma segunda
     linha desalinhada dos badges. No celular: título ocupa a linha inteira;
     os dois badges e o Editar ficam na linha de baixo, com o Editar à direita
     e verticalmente alinhado aos badges.
     Escopo: página de DETALHE da ocorrência (oc_detalhe.html). O card da
     lista não usa mais .oc-head. */
  .oc-head { align-items: center; }
  .oc-head .oc-titulo { flex-basis: 100%; margin-bottom: 2px; }
  .oc-head .btn-mini { align-self: center; }

  /* ---------- CENTRAL DE DADOS ---------- */
  .stats { grid-template-columns: 1fr 1fr; }
  /* linha de competência: o resumo ("N checklists · N ocorrências…") é longo
     demais para uma linha só. Quebra: checkbox + nome + tag + backup na
     primeira linha, resumo na segunda (order joga o resumo para o fim). */
  .comp-row { flex-wrap: wrap; row-gap: 4px; }
  .comp-row .comp-meta { order: 1; flex-basis: 100%; margin-left: 0; text-align: left; }
  .comp-row .comp-dl { margin-left: auto; min-height: var(--tap);
    display: inline-flex; align-items: center; }
  .big-dl { width: 100%; justify-content: center; box-sizing: border-box; }
  .btn-danger { width: 100%; }

  /* ---------- USUÁRIOS ---------- */
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .u-row-top { flex-direction: column; align-items: stretch; }
  .u-row-top .btn-row { margin-left: 0 !important; }

  /* ---------- RELATÓRIOS ---------- */
  /* cards de unidade lado a lado espremem "Centro Logístico": 1 por linha.
     !important pelo mesmo motivo do .frow (template redefine no body). */
  .unidades { grid-template-columns: 1fr !important; }
  .rel-actions .run { width: 100%; min-height: var(--tap-lg); }

  /* Painel da competência: o seletor + resumo não cabem na mesma linha no
     celular. Empilha e joga o resumo para baixo do select. */
  .period-form { flex-direction: column; align-items: stretch; }
  .period-form .period-select { width: 100%; min-width: 0; min-height: var(--tap); }
  .period-form .resumo { margin-left: 0; min-width: 0; text-align: left; }

  /* Linha da sede: nome + badges + ações não cabem lado a lado. As ações vão
     para a linha de baixo, full-width, com alvo de toque confortável. */
  .sede { align-items: flex-start; }
  .sede .grow { flex: 1 1 100%; }
  .sede .acoes { flex: 1 1 100%; }
  .sede .acoes .btn { flex: 1; justify-content: center; }

  /* Revisão do rascunho: o topo tem título + até 4 ações. No celular elas
     não cabem lado a lado do título — empilha e deixa os botões full-width,
     com alvo de toque confortável. */
  .topo { flex-direction: column; align-items: stretch; }
  .topo .acoes { flex-direction: column; align-items: stretch; }
  .topo .acoes form { width: 100%; }
  .topo .acoes .btn { width: 100%; justify-content: center; }

  /* Cabeçalho do sistema: tag + nome + badges estouram a largura. Deixa as
     badges quebrarem para a linha de baixo em vez de espremer o nome. */
  .sis .cab { flex-wrap: wrap; }
  .sis .nome { flex: 1 1 100%; }

  /* Item do checklist: o texto do item some se o switch OK/NC disputar a
     linha. Empilha, com o switch alinhado à direita. */
  .item { flex-wrap: wrap; }
  .item .txt { flex: 1 1 100%; }
  .item .sw { margin-left: auto; }
  .item .sw button { min-height: var(--tap-xs); padding: 6px 16px; }

  .rodape { flex-direction: column; align-items: stretch; gap: 10px; }
  .rodape .btn { justify-content: center; }
  .filtros { gap: 6px; }
  .filtro { min-height: var(--tap-xs); }
}


/* ====================== CELULAR ESTREITO ====================== */
@media (max-width: 380px) {
  .oc-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .stats { grid-template-columns: 1fr; }
  .hero h1 { font-size: 23px; }
  .seg label { font-size: 14px; padding: 14px 3px; }
}


/* =================== 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, .ctrl:hover, .oc-card:hover, .dl:hover {
    transform: none;
  }
}