/* ==================================================
   RESPONSIVIDADE E BREAKPOINTS DO PROMPT 0
   ================================================== */

/* Notebook / Desktop Pequeno (1024px - 1279px) */
@media (max-width: 1279px) {
  .grid-5-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .app-container {
    width: min(100% - 32px, 100%);
    padding-block: var(--space-20);
  }

  .grid-5-cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .app-container {
    width: min(100% - 24px, 100%);
    padding-block: var(--space-16);
    margin-bottom: 70px; /* Espaço para barra inferior */
  }

  .nav-desktop {
    display: none;
  }

  .mobile-nav-bar {
    display: flex;
  }

  .grid-5-cols {
    grid-template-columns: 1fr;
  }

  .grid-3-cols {
    grid-template-columns: 1fr;
  }

  .grid-2-cols {
    grid-template-columns: 1fr;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
  }

  .modal {
    width: 95%;
    padding: var(--space-16);
  }
}

/* Mobile Pequeno (< 480px) */
@media (max-width: 479px) {
  .app-container {
    width: min(100% - 16px, 100%);
  }

  .card {
    padding: var(--space-16);
  }

  .btn {
    width: 100%;
  }
}