/**
 * NES — Camada Mobile UX (celular e tablet)
 * -------------------------------------------------------------------------
 * Camada ADITIVA de experiência móvel: só age em telas ≤820px ou entrada por
 * toque. Não altera o desktop, não muda regra clínica, não remove nada.
 *
 * Correções de causa raiz (auditoria 2026-07-07, larguras 320–1024px):
 *  1. Áreas de toque ≥44px (btn-sm/xs 33px; fechar modais 26×22; toggle 22×22)
 *  2. iOS: inputs <16px provocam zoom automático ao focar
 *  3. Teclado móvel cobrindo modais: alturas em dvh (viewport dinâmico)
 *  4. ≤480px: modais em tela cheia (melhor aproveitamento, menos scroll)
 *  5. Rolagem suave por toque em contêineres de tabela
 * ------------------------------------------------------------------------- */

/* ── Toque e leitura (celular + tablet + qualquer dispositivo de toque) ──── */
@media (max-width: 820px), (pointer: coarse) {

  /* 1. Área de toque mínima de 44px nos controles de ação */
  .btn.btn-sm, .btn.btn-xs,
  .nes-hrp-atalho,
  .cid-toolbar button, .cid-btn-ghost, .cid-btn-primary,
  .fm-bib-item .btn,
  .fm-comp-footer .btn,
  [data-rx-item-salvar],
  .rx-int-toolbar .btn {
    min-height: 44px;
  }

  .cid-x, .fm-bib-x, #toggle-pass,
  .fm-comp-acoes .btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 2. iOS não dá zoom quando o campo tem ≥16px */
  #rx-modal-item-form input,
  #rx-modal-item-form select,
  #rx-modal-item-form textarea,
  #fm-bib-modal input,
  #nes-central-impressao input,
  .fm-comp-table input,
  .fm-comp-table select {
    font-size: 16px !important;
    min-height: 42px;
  }

  /* 5. Rolagem por toque suave nos contêineres roláveis */
  .fm-table-wrap, .cid-body, .fm-bib-lista, .rx-modal-item, .nes-hub-body {
    -webkit-overflow-scrolling: touch;
  }

  /* Toolbar do receituário nunca estoura: quebra em linhas */
  .rx-int-toolbar { flex-wrap: wrap; gap: 8px; }

  /* Card resumo do paciente: blocos confortáveis ao toque */
  #nes-home-resumo-paciente .nes-hrp-bloco { padding: 10px 14px; }
}

/* ── 3. Teclado móvel: viewport dinâmico (dvh) quando suportado ────────────
   Nota: prefixo `body` eleva a especificidade acima dos <style> injetados
   pelos módulos (mesma especificidade perderia por ordem no documento). */
@supports (height: 100dvh) {
  @media (max-width: 820px) {
    body #nes-central-impressao .cid-modal { max-height: 92dvh; }
    body #fm-bib-modal .fm-bib-box { max-height: 92dvh; }
    body #rx-modal-item-backdrop .rx-modal-item,
    body #rx-modal-item-backdrop .rx-modal-item--formula { max-height: 92dvh; }
  }
}

/* ── 4. Celulares (≤480px): modais em tela cheia, atalhos em grade ───────── */
@media (max-width: 480px) {
  body #nes-central-impressao { padding: 0; }
  body #nes-central-impressao .cid-modal { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }

  body #fm-bib-modal { padding: 0; }
  body #fm-bib-modal .fm-bib-box { width: 100vw; max-height: 100dvh; border-radius: 0; }

  body #rx-modal-item-backdrop .rx-modal-item,
  body #rx-modal-item-backdrop .rx-modal-item--formula {
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* Atalhos do resumo em grade 2 colunas (menos rolagem, alvos maiores) */
  body #nes-home-resumo-paciente .nes-hrp-atalhos { display: grid; grid-template-columns: 1fr 1fr; }
  body #nes-home-resumo-paciente .nes-hrp-atalho { width: 100%; }

  /* Fórmula: célula de ações do componente sempre visível */
  .fm-comp-table th, .fm-comp-table td { padding: 6px 5px; }
}

/* ── Tablets (768–1024px): aproveitar largura sem esticar linhas ─────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  #nes-home-resumo-paciente .nes-hrp-grid { grid-template-columns: repeat(3, 1fr); }
  #nes-central-impressao .cid-modal { width: min(760px, 92vw); }
}