/* ============================================================================
   FASE 2 — Recursos curados mobile-first (Medicamentos, Calculadoras, Documentos)
   TUDO sob @media (max-width:640px): só afeta o celular; o desktop fica intocado.
   ============================================================================ */
@media (max-width: 640px) {

    /* ── Parte 1 — Higiene do shell: elimina o overflow horizontal ──
       Culpado único medido: .header-actions-group (8 botões em nowrap, ~465px numa
       tela de 390px). Deixamos a barra de ações QUEBRAR e os divisores verticais
       somem ao quebrar (ficariam tortos). Mata o scroll horizontal em todo o app. */
    .header-actions-group {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.3rem 0.4rem;
        max-width: 100%;
    }
    .header-actions-group .header-divider-v { display: none; }

    /* Rede de segurança: nada deve gerar scroll horizontal no celular. */
    body { max-width: 100%; overflow-x: hidden; }

    /* ── Parte 2 — Medicamentos (busca + detalhe + calculadora, tudo dentro de #tab-meds) ──
       O auto-zoom do iOS dispara ao focar qualquer campo < 16px. Subir os campos da
       aba para 16px elimina o zoom (a busca era 14px). Escopo #tab-meds → cobre a
       busca, os campos da calculadora pediátrica e quaisquer inputs da aba; NÃO toca
       o grid de exames da consulta (que fica no desktop). */
    #tab-meds input,
    #tab-meds select,
    #tab-meds textarea { font-size: 16px !important; }
    /* Busca com alvo de toque confortável. */
    #tab-meds input[type="text"],
    #tab-meds input[type="search"] { min-height: 44px; }

    /* ── Parte 3 — Documentos (atestado, declaração, solicitação, requisição) ──
       O empilhamento em 1 coluna dos geradores já é tratado pelo CSS do componente
       (≤860px). Aqui resta o anti-zoom do iOS nos campos. O gerador docg-* e a
       solicitação de exames renderizam dentro de #tab-documentos; a Requisição de
       Mamografia abre numa tab-content própria (#requisicao-mmo, campos .rmmo-field).
       Cobrimos ambos. */
    #tab-documentos input,
    #tab-documentos select,
    #tab-documentos textarea,
    #gerador-documento input,
    #gerador-documento select,
    #gerador-documento textarea,
    #requisicao-mmo input,
    #requisicao-mmo select,
    #requisicao-mmo textarea,
    #solicitacao-exames input,
    #solicitacao-exames select,
    #solicitacao-exames textarea,
    .docg-form input,
    .docg-form select,
    .docg-form textarea,
    .rmmo-field { font-size: 16px !important; }
}