/* ════════════════════════════════════════════
   responsive.css — Media Queries
   ════════════════════════════════════════════ */

/* ── MOBILE FIRST: base styles apply to mobile ── */

/* En dispositivos táctiles los botones de acción siempre son visibles (no hay hover) */
@media (hover: none) {
  .tx-actions { opacity: 1; }
}



/* ── TABLET (≥ 640px) ── */
@media (min-width: 640px) {
  .bottom-nav {
    bottom: var(--space-5);
    gap: var(--space-2);
  }

  .nav-item {
    padding: var(--space-2) var(--space-4);
    min-width: 64px;
  }

  .nav-item .nav-label {
    font-size: 0.68rem;
  }

  .modal-sheet {
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
    max-height: 85dvh;
  }

  .modal.modal-center .modal-sheet {
    margin-bottom: 0;
  }

  .hero-balance { font-size: 2.6rem; }
  .dash-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

  .fab {
    right: var(--space-8);
  }
}

/* ── DESKTOP (≥ 1024px) ── */
@media (min-width: 1024px) {
  /* Show sidebar, hide bottom nav */
  .sidebar { display: flex; flex-direction: column; }
  .bottom-nav { display: none; }
  .fab {
    bottom: var(--space-8);
    right: var(--space-8);
  }

  .main-content {
    padding-bottom: var(--space-8);
  }

  /* Page layout */
  .page-header {
    padding: var(--space-6) var(--space-8) var(--space-4);
  }

  .page-body {
    padding: var(--space-6) var(--space-8);
    max-width: none;
  }

  /* Dashboard grid */
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
  }

  .dashboard-grid .full-width {
    grid-column: 1 / -1;
  }

  /* Hero card wider */
  .dashboard-hero {
    padding: var(--space-8);
  }
  .hero-balance { font-size: 3rem; }
  .hero-stats { grid-template-columns: 1fr 1fr 1fr 1fr; }

  /* Stats on desktop */
  .dash-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* Charts side by side */
  .charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }

  /* Modals as centered dialogs */
  .modal {
    align-items: center;
    justify-content: center;
  }
  .modal-sheet {
    border-radius: var(--radius-xl);
    margin-bottom: 0;
    max-height: 90dvh;
  }

  /* Wider content areas */
  .stats-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
  }

  .budget-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .goals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .subs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    align-items: start;
  }

  /* Categories two-column */
  .cats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
  }

  /* Settings wider */
  .settings-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
  }

  /* Filter bar inline */
  .filter-bar {
    top: 73px;
  }
}

/* ── LARGE DESKTOP (≥ 1280px) ── */
@media (min-width: 1280px) {
  :root { --sidebar-width: 260px; }

  .dashboard-grid {
    grid-template-columns: 3fr 2fr;
  }

  .page-body { padding: var(--space-8) var(--space-10); }

  .hero-stats { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* ── TOUCH / HOVER MEDIA ── */
@media (hover: none) {
  /* On touch devices, always show actions */
  .tx-actions { opacity: 1; }
  .sub-actions { opacity: 1; }
  .cat-actions { opacity: 1; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── PRINT ── */
@media print {
  .sidebar, .bottom-nav, .fab, #toast-container, .modal { display: none !important; }
  .main-content { padding: 0; }
}