/* Baseado no print: o botao ocupava a largura toda e os 4 filtros
   gastavam 4 linhas. Agora botao do tamanho do texto e filtros em grade. */
@media (max-width: 900px) {
  .page-head--aval { flex-wrap: wrap !important; gap: 8px !important; }
  .page-head--aval > div:first-child { flex: 1 1 100% !important; }
  .page-head--aval h1 { font-size: 22px !important; margin-bottom: 2px !important; }
  .page-head--aval p { font-size: 11.5px !important; margin: 0 !important; }
  .page-head--aval button {
    flex: 0 1 auto !important;
    width: auto !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    min-height: 0 !important;
  }
  .pap-filtros-aval {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }
  .pap-filtros-aval > label { min-width: 0 !important; font-size: 10.5px !important; }
  .pap-filtros-aval > label:last-child { grid-column: 1 / -1 !important; }
  .pap-filtros-aval select,
  .pap-filtros-aval input { font-size: 13px !important; padding: 7px 9px !important; }
}

/* O style.css:530 forca .page-head em coluna no mobile. Seletor duplo
   para vencer sem depender da ordem de carregamento. */
@media (max-width: 900px) {
  .page-head.page-head--aval.page-head--aval {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .page-head--aval.page-head--aval > div:first-child {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .page-head--aval.page-head--aval > button {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 48% !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 900px) {
  /* Quatro KPIs numa linha so. */
  .pap-kpis-aval.pap-kpis-aval {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  .pap-kpis-aval > div { min-width: 0 !important; flex: none !important; text-align: center; }
  .pap-kpis-aval strong { font-size: 17px !important; }
  .pap-kpis-aval span { font-size: 9px !important; line-height: 1.25 !important; display: block !important; }
}
@media (max-width: 900px) {
  /* Ranking tem dois filtros: Periodo e Loja, lado a lado. */
  .pap-filtros-rank.pap-filtros-rank {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .pap-filtros-rank > label { min-width: 0 !important; flex: none !important; }
  .pap-filtros-rank select { width: 100% !important; font-size: 12.5px !important; }
}
@media (max-width: 900px) {
  /* Fichas: Loja e Colaborador lado a lado. */
  .pap-filtros-ficha.pap-filtros-ficha {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .pap-filtros-ficha > label { min-width: 0 !important; flex: none !important; }
  .pap-filtros-ficha select { width: 100% !important; font-size: 12.5px !important; }
}
@media (max-width: 900px) {
  /* Lista de colaboradores: Loja e Situacao lado a lado. */
  .pap-filtros-lista.pap-filtros-lista {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .pap-filtros-lista > label { min-width: 0 !important; }
  .pap-filtros-lista select { width: 100% !important; font-size: 12.5px !important; }
}