/* Ajustes mobile-first ya viven en layout.css / components.css.
   Aquí solo los refinamientos por breakpoint más grande. */

/* Tablet */
@media (min-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .achievements-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .main-content { padding: 28px 26px 110px; }
}

/* Laptop / desktop */
@media (min-width: 900px) {
  .app-frame { max-width: 1080px; }
  .app-shell { }
  .main-content { padding: 32px 40px 60px; }
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .section-panel.is-active[data-section="metricas"] .chart-row,
  .two-col-desktop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  .sidebar-drawer:not(.is-open) {
    width: 0;
  }
}

/* Monitores grandes */
@media (min-width: 1280px) {
  .app-frame { max-width: 1180px; }
}

/* Pantallas muy angostas (evitar scroll horizontal / texto apretado) */
@media (max-width: 340px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .fund-grid { grid-template-columns: 1fr; }
}