/* N4-C: ajustes SÓ para celular (iPhone/Safari). Este arquivo é carregado com media="(max-width: 820px)" e TODA regra abaixo está dentro de um @media:
   em telas grandes (notebook, desktop) nada daqui vale, e o visual de hoje fica idêntico (um teste confere que nenhuma regra fica fora de @media).
   O que resolve:
   - a tela "expandir" ao tocar num campo: o Safari dá zoom em campo com fonte menor que 16px;
   - alvos de toque de pelo menos 44px, sem zoom por toque duplo (touch-action: manipulation);
   - cabeçalho que ocupava quase metade da tela (fixo): no celular ele rola junto com a página;
   - altura de tela com dvh (a barra do Safari aparece e some) e área segura do iPhone (entalhe e barra inferior);
   - botão Sair, avisos da nuvem e aviso flutuante sem se sobreporem nem cobrirem o conteúdo;
   - código/texto longo quebrando linha, tabelas largas rolando só dentro da própria caixa.
   Mesmas cores e fontes da marca: nada é redesenhado. */

@media (max-width: 820px) {
  /* ---- Safari: sem ajuste automático de texto e sem toque azul ---- */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(20, 184, 166, .18); }
  body { overflow-wrap: break-word; }

  /* ---- Campos: fonte >= 16px (o Safari NÃO dá zoom) e altura de toque ---- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]),
  select, textarea { font-size: 16px !important; min-height: 44px !important; }
  textarea { min-height: 120px !important; }
  input[type="date"], input[type="month"], input[type="time"] { min-width: 0; max-width: 100%; }
  .busca input { padding-left: 52px; }

  /* ---- Toque: sem zoom por toque duplo e sem atraso ---- */
  a, button, input, select, textarea, summary, label, [role="button"], .aba, .cartao-acao { touch-action: manipulation; }

  /* ---- Alvos de toque de 44px ---- */
  .topo__menu { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  .marca { min-height: 44px; }
  .busca__lupa { width: 44px; height: 44px; left: 0; }
  .atalhos a { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .funil__etapa { min-height: 44px; display: inline-flex; align-items: center; }
  .pilula, button.pilula, .botao { min-height: 44px; }
  .botao--pequeno { min-width: 44px; }
  .topo__icone { width: 44px; height: 44px; }
  .link-acao { min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
  .botao-icone { min-width: 44px; min-height: 44px; }
  .caixa-check, label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 10px; min-height: 44px; }
  .caixa-check input, input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; flex: none; }
  summary { min-height: 44px; display: flex; align-items: center; }
  /* Link solto no meio do conteúdo: a área de toque cresce (padding) sem mexer no desenho (margem negativa compensa) */
  .conteudo a:not([class]) { padding: 14px 16px; margin: -14px -16px; }
  .link-botao, button.etapa, .etapa { min-height: 44px; }
  a.link-ia { display: inline-flex; align-items: center; min-height: 44px; }
  input[type="file"] { min-height: 44px; padding: 10px 0; font-size: 16px; }
  /* campos dentro de tabelas não podem ficar espremidos (um select chegou a ficar com 31px de largura) */
  td select, td input:not([type="checkbox"]):not([type="radio"]) { min-width: 140px; }
  .login__olho { width: 44px; height: 44px; }
  .login__link { min-height: 44px; display: flex; width: fit-content; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; }

  /* ---- Cabeçalho: no celular ele rola com a página (fixo ocupava quase metade da tela) ---- */
  .topo { position: static; padding-top: env(safe-area-inset-top); }
  .topo__linha { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .atalhos ul { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .marca__pais { display: none; }
  .selo { max-width: 100%; }

  /* ---- Altura de tela: dvh (a barra do Safari aparece e some) ---- */
  .layout, .layout.acoes-recolhidas { min-height: 100dvh; }
  .pagina { min-height: 50svh; }
  .busca__lista { max-height: min(52dvh, 420px); }
  .acoes { height: auto; max-height: 100dvh; padding-top: env(safe-area-inset-top); }
  .acoes__rodape { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .janela { max-height: calc(100dvh - 24px); overflow-y: auto; }

  /* ---- Conteúdo: área segura e espaço no fim para o botão Sair não cobrir nada ---- */
  .conteudo {
    padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  /* ---- Texto e tabelas: nada estoura a tela ---- */
  code, pre, .detalhes__corpo code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
  .rolagem { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; }
  th, td { padding: 10px; }
  .produto-celula strong { max-width: 260px; }
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .barra > .botao, .barra > .pilula { flex: 1 1 auto; justify-content: center; }
  .formulario + .barra, .formulario ~ .barra { margin-top: 18px; }
  .imagem-cnpj { max-width: 100%; }

  /* ---- Camadas fixas: Sair, avisos da nuvem e aviso flutuante em lugares diferentes ---- */
  .porteiro__sair { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); min-height: 44px; min-width: 64px; }
  /* o aviso flutuante usava left:50% + translate, o que limitava a largura a METADE da tela (texto espremido); aqui ele ocupa a largura toda */
  .aviso { bottom: calc(68px + env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); transform: none; max-width: none; border-radius: 18px; text-align: center; }
  .nuvem__avisos { top: calc(8px + env(safe-area-inset-top)); bottom: auto; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); max-height: 60dvh; overflow-y: auto; }
  .nuvem__aviso { padding: 10px 12px; }
  .nuvem__aviso button { min-height: 44px; }
  .nuvem__confirma { min-height: 44px; font-size: 16px; }

  /* ---- Login e redefinição de senha ---- */
  .login__palco {
    padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* Quem usa o dedo não tem "passar o mouse": sem cartões que pulam e ficam presos depois do toque */
@media (max-width: 820px) and (hover: none) {
  .aba:hover, .cartao-acao:hover { transform: none; }
  .pilula:hover, .botao:hover { background: var(--superficie); }
  .botao--primario:hover { background: var(--turquesa-escuro); }
}

/* Telas muito estreitas (iPhone SE e parecidos): um pouco mais de ar no cabeçalho */
@media (max-width: 380px) {
  .marca__nome { font-size: 13px; }
  .topo__linha { gap: 8px; }
}