/* =============================================
   Responsive Design
   ============================================= */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-card.full-width {
    grid-column: span 2;
  }

  .main-content {
    padding: var(--spacing-lg);
  }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
  .header {
    padding: 0 var(--spacing-md);
  }

  .logo {
    font-size: var(--font-size-base);
  }

  .btn-nueva-tarea span {
    display: none;
  }

  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-card.full-width {
    grid-column: span 1;
  }

  .main-content {
    padding: var(--spacing-md);
  }

  .main-content.has-sidebar {
    margin-left: 0;
  }

  h1 {
    font-size: var(--font-size-2xl);
  }

  h2 {
    font-size: var(--font-size-xl);
  }

  h3 {
    font-size: var(--font-size-lg);
  }

  .scroll-to-top {
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 40px;
    height: 40px;
  }

  .form-container {
    padding: var(--spacing-lg);
  }

  .modal-content {
    width: 95%;
    padding: var(--spacing-lg);
  }
}

/* Extra Small (< 480px) */
@media (max-width: 480px) {
  .header-right {
    gap: var(--spacing-sm);
  }

  .btn-nueva-tarea {
    padding: var(--spacing-sm);
  }

  .bento-card {
    padding: var(--spacing-md);
    min-height: 120px;
  }

  .bento-card-value {
    font-size: var(--font-size-2xl);
  }
}