/* CELULAR: AS REGRAS DO DEDO (29/09/2026).
 *
 * O dono: "deixe o bot mais utilizavel pelo celular... deixe melhor adaptado a
 * versao do celular". Medido em 375 px, tela por tela: nenhuma estourava a
 * largura, mas havia 146 campos com letra menor que 16 px (o iPhone aproxima a
 * tela sozinho ao tocar num campo assim, e a pessoa tem de afastar de volta),
 * 145 botoes menores que um dedo e 259 textos do miolo abaixo de 12 px.
 *
 * Esta folha e a ULTIMA da casca (base.html) e so fala de tamanho: nada de cor
 * nem de desenho. Cada regra tem mais peso que a regra que ela corrige
 * (body.v3 .conteudo ...), para nao depender da ordem em que as folhas entram -
 * a folha da tela chega depois, na troca de aba.
 */
@media (max-width: 900px) {
  /* 1. CAMPO SEM ZOOM: 16 px e o minimo que o iPhone aceita sem aproximar */
  body.v3 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  body.v3 select,
  body.v3 textarea { font-size: 16px !important; }

  /* 2. ALVO DO DEDO: 44 px nos campos e nos botoes; 40 nos pequenos */
  body.v3 .conteudo input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  body.v3 .conteudo select { min-height: 44px; }
  body.v3 .conteudo .acao { min-height: 44px; }
  body.v3 .conteudo .acao.pequena,
  body.v3 .conteudo .acao.acao-leve { min-height: 40px; }
  body.v3 .conteudo button.chip { height: 40px; padding-left: 14px; padding-right: 14px; }
  body.v3 .conteudo .segmento { min-height: 44px; }
  body.v3 .conteudo .barra-de-periodo a { height: 38px; padding-left: 14px; padding-right: 14px; }
  /* os periodos quebram em duas linhas no celular: canto de cartao, nao de pilula */
  body.v3 .conteudo .barra-de-periodo { border-radius: 22px; }
  body.v3 .conteudo summary { padding-top: 13px; padding-bottom: 13px; }
  body.v3 .conteudo .tirar-palavra { width: 40px; height: 40px; }
  body.v3 .conteudo .sobe-parte,
  body.v3 .conteudo .desce-parte { min-width: 40px; min-height: 40px; }
  body.v3 .conteudo .emoji-da-parte { width: 42px; height: 42px; }
  /* caixa de marcar solta (sem rotulo em volta que sirva de alvo) */
  body.v3 .conteudo input[type="checkbox"].liga-parte,
  body.v3 .conteudo input[type="checkbox"][data-marca-liga],
  body.v3 .conteudo input[type="checkbox"][data-limpar] { width: 24px; height: 24px; }

  /* 3. LETRA QUE SE LE: o miolo das telas nao desce de 12 px */
  body.v3 .conteudo .entrada-numero small,
  body.v3 .conteudo .identidade-da-loja small,
  body.v3 .conteudo .ponto-de-partida small,
  body.v3 .conteudo .nome-do-periodo small,
  body.v3 .conteudo .mes-e-dia small,
  body.v3 .conteudo .variacao small,
  body.v3 .conteudo .lente-da-meta small,
  body.v3 .conteudo .campo small,
  body.v3 .conteudo li small,
  body.v3 .conteudo small code,
  body.v3 .conteudo .chip b,
  body.v3 .conteudo .numero-do-passo,
  body.v3 .conteudo .estado-do-passo,
  body.v3 .conteudo h2 .contador,
  body.v3 .conteudo .lampada,
  body.v3 .conteudo .miudo,
  body.v3 .conteudo .selo,
  body.v3 .conteudo .selo-da-loja,
  body.v3 .conteudo .nome-do-dia,
  body.v3 .conteudo .nota-da-lista,
  body.v3 .conteudo .nota-do-quadro,
  body.v3 .conteudo .miudo-da-faixa,
  body.v3 .conteudo .chave-das-cores,
  body.v3 .conteudo .so-desta-loja,
  body.v3 .conteudo .ressalva-da-loja,
  body.v3 .conteudo .grupo-de-emojis,
  body.v3 .conteudo .legenda-dos-pontos,
  body.v3 .conteudo .pergunta-do-horario,
  body.v3 .conteudo .mes-e-dia,
  body.v3 .conteudo .auto-atualiza,
  body.v3 .conteudo .pilula,
  body.v3 .conteudo .resumo-das-rotas .chip,
  body.v3 .conteudo .acao.pequena,
  body.v3 .conteudo .acao.acao-leve,
  body.v3 .conteudo button.chip,
  body.v3 .conteudo .barra-de-periodo a,
  body.v3 .conteudo .barra-de-periodo span { font-size: 12px; }
  /* rotulo em caixa alta com letras afastadas: 11,5 px ja ocupa como 13 */
  body.v3 .conteudo .numero .rotulo,
  body.v3 .conteudo .kpi .rotulo,
  body.v3 .conteudo .mes-numero .rotulo,
  body.v3 .conteudo .sem-meta .rotulo,
  body.v3 .conteudo h2.pergunta-da-tela,
  body.v3 .conteudo .selo-do-nivel,
  body.v3 .conteudo .marca-do-modo { font-size: 11.5px; }
  /* escalas de grafico: o espaco e de meia coluna, 10,5 px e o que cabe */
  body.v3 .conteudo .hora > span,
  body.v3 .conteudo .hora-da-grade { font-size: 10.5px; }
  /* as telas de entrada (login, senha, codigo) */
  body.v3 .caixa-de-login label > span,
  body.v3 .caixa-de-login form > label,
  body.v3 .caixa-de-login .assinatura { font-size: 12px; }
}