@media (max-width: 639px) {
  /* Rodapé da paginação: permite quebrar em linhas sem esmagar os controles. */
  #root div.flex.items-center.gap-2:has(> form.w-full) {
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* Exibe a janela completa de páginas no mobile, com botões mais compactos. */
  #root div.flex.items-center.gap-2:has(> form.w-full) > div.flex.items-center.gap-1 {
    gap: 0.25rem !important;
  }

  #root div.flex.items-center.gap-2:has(> form.w-full) > div.flex.items-center.gap-1 > button {
    display: inline-flex !important;
    width: 2rem !important;
    height: 2rem !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
  }

  /* As setas também ficam compactas para sobrar espaço para até cinco páginas. */
  #root div.flex.items-center.gap-2:has(> form.w-full) > button {
    padding: 0.375rem !important;
  }

  /* O campo Ir para passa para sua própria linha e não quebra letra por letra. */
  #root form.w-full.sm\\:w-auto.flex.items-center.justify-center.gap-2 {
    flex: 1 0 100% !important;
    width: 100% !important;
    margin: 0.25rem 0 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    flex-wrap: nowrap !important;
  }

  #root form.w-full.sm\\:w-auto.flex.items-center.justify-center.gap-2 > span {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  #root form.w-full.sm\\:w-auto.flex.items-center.justify-center.gap-2 > input {
    min-width: 0 !important;
    width: auto !important;
    flex: 1 1 auto !important;
  }

  #root form.w-full.sm\\:w-auto.flex.items-center.justify-center.gap-2 > button {
    flex-shrink: 0 !important;
  }
}