@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;
  }

  /* Mantém somente a página atual visível entre as setas no mobile. */
  #root div.flex.items-center.gap-2:has(> form.w-full) > div.flex.items-center.gap-1 > button:not([class*="bg-indigo-600"]) {
    display: none !important;
  }

  #root div.flex.items-center.gap-2:has(> form.w-full) > div.flex.items-center.gap-1 > button[class*="bg-indigo-600"] {
    width: 2.5rem !important;
    height: 2.5rem !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;
  }
}