/* Ajustes para telas pequenas (celular). Carregado em todas as paginas,
   depois do <style> proprio de cada uma, para sobrescrever quando necessario.
   O menu lateral (sidebar) tem seu proprio comportamento responsivo definido
   em sidebar.css; aqui ficam os ajustes do conteudo das paginas. */

@media (max-width: 700px) {
  html, body{
    overflow-x: hidden;
    max-width: 100%;
    font-size: 15px;
  }

  .main-area{
    padding-top: 58px;
  }

  .cabecalho-pagina,
  .acoes-rapidas,
  .conteudo{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* O cabecalho do Dashboard (saudacao + data/clima + usuario) e feito de
     3 blocos lado a lado no desktop, cada um com uma largura minima propria.
     No celular, essa largura minima nao cabia e os blocos ficavam se
     espremendo/desalinhando para a esquerda em vez de empilhar direito.
     Aqui cada bloco passa a ocupar a largura toda, um embaixo do outro. */
  .cabecalho-pagina{
    flex-direction: column;
    align-items: stretch !important;
  }
  .bloco-saudacao,
  .bloco-data-clima,
  .cabecalho-usuario{
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .cabecalho-usuario{
    justify-content: flex-start;
  }

  .acoes-rapidas{
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .acao-rapida{
    flex-shrink: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .linha{
    flex-direction: column;
  }
  .linha input,
  .linha select,
  .linha textarea{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Campos de formulario com pelo menos 16px de fonte e altura confortavel:
     abaixo de 16px, o iPhone da um zoom automatico incomodo ao tocar no
     campo, o que atrapalha bastante o uso no celular. */
  input, select, textarea, button{
    font-size: 16px !important;
  }
  input[type=text], input[type=email], input[type=password],
  input[type=date], input[type=time], input[type=number], select, textarea{
    min-height: 46px;
    padding: 10px 12px !important;
  }

  /* Botoes e links de acao com area de toque confortavel (minimo
     recomendado de 44px de altura para tocar com o dedo sem errar) */
  .btn, .btn-secundario{
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14.5px !important;
  }
  .link-acao{
    display: inline-block;
    padding: 8px 4px !important;
    font-size: 13.5px !important;
  }
  .check-prioridade, .check-tarefa{
    width: 22px;
    height: 22px;
  }

  table{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .grid,
  .grid-empresas,
  .stats-grid,
  .dash-grid,
  .linha-2col,
  .linha-3col,
  .linha-2col-notas,
  .resumo-grid,
  .stats-topo-grid{
    grid-template-columns: 1fr !important;
  }

  /* O CSS Grid, por padrao, nao deixa um item encolher menor que o
     conteudo interno dele (min-width: auto). Isso faz uma tabela larga
     ou texto sem quebra forcar a coluna toda a ficar mais larga que a
     tela. Zerando o min-width aqui, o item de grid de fato encolhe e
     o conteudo interno passa a rolar horizontalmente, se precisar. */
  .grid > *,
  .grid-empresas > *,
  .quadro-projetos > *,
  .stats-grid > *,
  .dash-grid > *,
  .linha-2col > *,
  .linha-3col > *,
  .linha-2col-notas > *,
  .resumo-grid > *,
  .stats-topo-grid > *{
    min-width: 0;
  }

  .card .topo-card,
  .card-empresa,
  .stat-card,
  .tarefa-item,
  .prioridade-item,
  .agenda-item{
    flex-wrap: wrap;
  }

  .filtros a{
    font-size: 12.5px;
    padding: 7px 12px;
    display: inline-block;
    min-height: 32px;
    box-sizing: border-box;
  }

  .conteudo{
    max-width: 100% !important;
  }

  /* Titulos das secoes (h2) ficam pequenos demais herdando o tamanho do
     desktop; aumenta um pouco para leitura confortavel no celular */
  h2{
    font-size: 13.5px !important;
  }
  .saudacao{
    font-size: 17px !important;
  }
  .quadro-projetos{display:flex !important;overflow-x:auto;gap:12px;padding-bottom:10px;}
  .coluna-quadro{min-width:280px;}
}