/* celular-casa.css — a casa no celular: Android e iPhone (07/10/2026).
   Entra em TODA tela da Banca por celular.py. Só age em tela estreita: o
   computador do consultório não muda. Os consertos de uma tela só usam
   body[data-tela="<endereço>"] (/banca/hidoctor → banca-hidoctor). */

@media (max-width: 600px) {
  /* 1. o iPhone amplia a tela sozinho quando o campo tem letra < 16 px — e
        não desfaz: o médico fica com a tela torta depois de digitar */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select, textarea { font-size: 16px !important; }

  /* 2. imagem e vídeo nunca passam da largura da tela */
  img, video { max-width: 100%; height: auto; }

  /* 3. texto pré-formatado quebra em vez de empurrar a tela para o lado */
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }

  /* «← Voltar à Ficha Clínica» (voltar-para-a-banca.js) fica fixo no canto: não passa da tela */
  #voltar-para-banca { max-width: calc(100vw - 24px); }
}

/* 4. o dedo precisa de alvo: botão com pelo menos 40 px de altura no toque, e a
      caixinha de marcar (13 px de fábrica) com 22 px — o rótulo ao lado também
      marca. LARGURA mínima, não: medido em 07/10/2026, «min-width» trocava o
      «auto» das abas da Prescrição (o tamanho do texto) por 40 px e elas
      encolhiam umas por cima das outras. */
@media (max-width: 600px) and (pointer: coarse) {
  button, select, input[type=submit], input[type=button], [role=button] { min-height: 40px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
}

/* ── consertos de uma tela só ───────────────────────────────────────── */
@media (max-width: 600px) {
  /* Início: 🎙️, ⚙️ e «Sair» ficam fixos no alto e cobriam o nome do médico */
  body[data-tela="home"] .header { padding-top: 40px; }

  /* Tempo da Semana: a régua dos 7 dias rola dentro dela, não a tela inteira */
  body[data-tela="tempo"] .pt-semana { overflow-x: auto; }
  body[data-tela="tempo"] .pt-dias { grid-template-columns: repeat(7, minmax(44px, 1fr)); overflow-x: auto; }

  /* Importar do HiDoctor: a tabela rola dentro dela */
  body[data-tela="banca-hidoctor"] table { display: block; max-width: 100%; overflow-x: auto; }

  /* Dúvidas: o campo (agora em 16 px) e «Guardar e pesquisar» empilham em vez de vazar */
  body[data-tela="duvidas"] .captura { flex-wrap: wrap; }
  body[data-tela="duvidas"] .captura input { flex: 1 1 100%; min-width: 0; }

  /* Início: os links do rodapé (Trilha, Meu cadastro…) tinham 16 px de altura */
  body[data-tela="home"] div[style*="text-align:center"] a { display: inline-block; padding: 10px 2px; }

  /* Orientação Nutricional: a coluna de 380 px e o conteúdo viram uma coluna só */
  body[data-tela="banca-nutricao"] .wrap { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  body[data-tela="banca-nutricao"] .wrap > * { min-width: 0; }

  /* O Prato: cabeçalho em coluna, o cardápio rola dentro dele, as ações quebram linha,
     e as janelas flutuantes cabem na tela */
  body[data-tela="banca-nutricao-prato"] header { grid-template-columns: minmax(0, 1fr); padding: 14px 12px 6px; gap: 10px; }
  body[data-tela="banca-nutricao-prato"] .cardapio { overflow-x: auto; max-width: 100%; }
  body[data-tela="banca-nutricao-prato"] .acoes { flex-wrap: wrap; justify-content: flex-start; }
  body[data-tela="banca-nutricao-prato"] main { padding: 10px 12px 20px; }
  body[data-tela="banca-nutricao-prato"] main > * { min-width: 0; }
  body[data-tela="banca-nutricao-prato"] #compara { left: 12px; right: 12px; width: auto; }

  /* Importar do HiDoctor: os campos não passam da tela */
  body[data-tela="banca-hidoctor"] .campo { min-width: 0; }
  body[data-tela="banca-hidoctor"] .campo input, body[data-tela="banca-hidoctor"] .campo select,
  body[data-tela="banca-hidoctor"] button, body[data-tela="banca-hidoctor"] label,
  body[data-tela="banca-hidoctor"] input[type=file] { max-width: 100%; box-sizing: border-box; }
  body[data-tela="banca-hidoctor"] .campo input[type=file] { width: 100%; }

  /* Orientação Nutricional: as fileiras de botões quebram linha em vez de vazar */
  body[data-tela="banca-nutricao"] :has(> button.btn) { flex-wrap: wrap; }

  /* OS FLUTUANTES, numa coluna só, na borda DIREITA e acima das barras do rodapé.
     À esquerda (onde ficam no computador) o 🧠 e o «V» do agente cobriam o começo das
     linhas de texto em quase toda tela; embaixo, cobriam a barra de ações da Prescrição
     (150 px) e a de categorias da Ficha (90 px). A pombinha (✉) já fica à direita,
     mas a 24 % da altura da tela (muda de aparelho para aparelho e encostava no 🧠):
     no celular ela fica a 208 px, o 🧠 logo abaixo e o «V» logo acima (4 px de folga: o 🧠 pulsa). */
  #pombo-botao.pombo-flutuante { right: 16px !important; bottom: 208px !important; }
  #cortex-botao { left: auto !important; right: 16px !important; bottom: 151px !important; }
  #agflu-botao:not(.no-cab) { left: auto !important; right: 16px !important; bottom: 264px !important; }
  /* e os painéis deles abrem do alto, na largura da tela (430 e 400 px saíam dela) */
  #cortex-painel, #agflu-gaveta:not(.no-cab) {
    left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important;
    top: 60px !important; bottom: auto !important; max-height: calc(100vh - 140px) !important; }

  /* Ficha Clínica: ☎, modo foco e modo lua (no computador a 163 px da borda, ao lado dos
     outros) ficavam no MEIO da tela, por cima da barra de categorias do rodapé (90 px).
     Vão para a mesma coluna da direita, acima dela; o 🧠 no alto da coluna. */
  body[data-tela="banca"] #estudio-toggle-modo { right: 8px !important; bottom: 98px !important; }
  body[data-tela="banca"] #estudio-toggle-foco { right: 8px !important; bottom: 150px !important; }
  body[data-tela="banca"] #zrFone { right: 8px !important; bottom: 202px !important; left: auto !important; }
  body[data-tela="banca"] #cortex-botao { right: 5px !important; bottom: 254px !important; }
  /* o selo do agente (10/10/2026, regra 12 ×2): no computador fica acima do ☎;
     aqui o lugar acima do ☎ é do 🧠 (bottom 254, 52 px), então fica acima do 🧠,
     com o centro na mesma linha da coluna (right 13 = 8 + (46 − 36) / 2) */
  body[data-tela="banca"] #agficha-selo { right: 13px !important; bottom: 314px !important; }

  /* «← Voltar à Ficha Clínica» (voltar-para-a-banca.js, fixo no alto à direita) cobria o
     título das telas abertas da Ficha: ganha uma faixa própria no alto */
  body:has(> #voltar-para-banca) { padding-top: 56px !important; }
  #voltar-para-banca { top: 8px !important; right: 12px !important; }
}