/* =======================
   Responsividade Base
   ======================= */

/* Cards mobile: visíveis por padrão */
.responsive-cards {
  display: grid;
  gap: 1.5rem; /* equivalente a gap-6 */
}

/* Tabelas desktop: escondidas por padrão */
.responsive-table {
  display: none;
}

/* =======================
   Breakpoints
   ======================= */
@media (min-width: 768px) {
  /* Esconde cards no desktop */
  .responsive-cards {
    display: none !important;
  }

  /* Mostra tabelas no desktop */
  .responsive-table {
    display: block !important;
  }
}

/* =======================
   Extras opcionais
   ======================= */

/* Cards mobile centralizados e com transição */
.responsive-cards > * {
  transition: all 0.2s ease-in-out;
}

/* Tabela com overflow horizontal em telas pequenas */
.responsive-table-container {
  overflow-x: auto;
}

/* Optional: ajustar tamanho de fontes e padding de acordo com breakpoint */
@media (min-width: 768px) {
  .responsive-table th, 
  .responsive-table td {
    padding: 0.75rem 1rem; /* aumenta padding no desktop */
  }
}

/* Estilo base do formulário */
.custom-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* gap entre elementos */
    margin-bottom: 1rem;
}

/* Estilo para telas >= 640px */
@media (min-width: 640px) {
    .custom-form {
        flex-direction: row;
        align-items: flex-end; /* equivalente ao items-end do Tailwind */
    }
}