/* professora_mobile_v15.css - camada mobile das telas da professora.
   Etapa 3b da trilha Mobile V15. Uma unica consulta de media, corte em 767/768, so
   tokens do base.html, nada de hex, nada de 100vh, nada de position fixed.

   Escopo: as 11 telas da professora carregam id de tela e a classe comum
   .prof-tela na mesma raiz. O que vale para todas mora em .prof-tela; o que
   e de uma tela usa o id daquela tela. Repetir os 11 ids em cada regra dava
   o mesmo efeito e seria pior de manter - desvio declarado da D-P4. */

@media (max-width: 767px) {

  /* ---- comum as 11 telas ---------------------------------------------- */

  /* Abaixo de 16px o iOS da zoom sozinho ao focar o campo e a pagina fica
     torta depois. Vale para todo campo de texto da professora. */
  .prof-tela input:not([type="checkbox"]):not([type="radio"]),
  .prof-tela select,
  .prof-tela textarea { font-size: 16px !important; } /* inline-js */
  /* O uso de important aqui nao e preguica: os campos destas telas trazem
     font-size dentro do atributo style, e atributo style nenhuma folha
     vence. Abaixo de 16px o iOS da zoom sozinho ao focar. */

  .prof-tela textarea { min-height: 4.5rem; }

  /* Alvo de toque. .btn cobre quase todos os controles destas telas. */
  .prof-tela .btn { min-height: 44px; }

  /* ---- prof_lista.html (/professora/fluxos) ---------------------------- */

  #tela-fluxos .fl-topo .btn { width: 100%; box-sizing: border-box; }

  /* Os filtros deslizam em vez de quebrar em duas linhas: sao poucos e a
     ordem importa (Todos primeiro). */
  #tela-fluxos .fl-filtros {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: .5rem;
    padding-bottom: .25rem;
  }
  #tela-fluxos .fl-filtro {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
  }

  #tela-fluxos .fl-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
  #tela-fluxos .fl-acoes > * { flex: 1 1 auto; }

  #tela-fluxos .fl-pend-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ---- prof_aula_items.html (editor de lista, prioridade da etapa) ----- */

  /* A linha de acoes do step ja tem display:flex no atributo style, que a
     folha nao vence. O que falta e so o flex-wrap - e com ele o cartao cabe
     em 360. */
  #tela-aula-steps #items-lista .card > div { flex-wrap: wrap; }
  #tela-aula-steps #items-lista .card > div > * { min-width: 0; }

  /* ---- prof_aulas.html (cartao de aula) ------------------------------ */

  /* Em 360 a linha do cartao nao cabe: alca, bolinha do numero e os tres
     botoes nao encolhem, entao sobravam menos de 50px para o titulo e ele
     quebrava palavra por palavra. Os botoes descem para a propria linha e
     o texto fica com a largura inteira. */
  #tela-aulas .aula-card > div { flex-wrap: wrap; }
  #tela-aulas .aula-card > div > div:nth-child(4) {
    flex-basis: 100%;
    margin-top: .5rem;
  }
  #tela-aulas .aula-card > div > div:nth-child(4) > * { flex: 1 1 auto; }

  /* ---- formularios ----------------------------------------------------- */

  #tela-fluxo-novo input, #tela-fluxo-novo select, #tela-fluxo-novo textarea,
  #tela-fluxo-editar input, #tela-fluxo-editar select, #tela-fluxo-editar textarea,
  #tela-publicacao input, #tela-publicacao select, #tela-publicacao textarea,
  #tela-certificado input, #tela-certificado select, #tela-certificado textarea,
  #tela-perfil-publico input, #tela-perfil-publico select,
  #tela-perfil-publico textarea { width: 100%; box-sizing: border-box; }

  #tela-fluxo-novo input[type="checkbox"], #tela-fluxo-novo input[type="radio"],
  #tela-fluxo-editar input[type="checkbox"], #tela-fluxo-editar input[type="radio"],
  #tela-publicacao input[type="checkbox"], #tela-publicacao input[type="radio"],
  #tela-certificado input[type="checkbox"], #tela-certificado input[type="radio"],
  #tela-perfil-publico input[type="checkbox"],
  #tela-perfil-publico input[type="radio"] { width: auto; }

  /* ---- professora_video.html (D-P5) ------------------------------------ */

  #tela-video video { width: 100%; height: auto; }
}