/* Se carga únicamente cuando el viewport es >= 900px (ver base.html). */

#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 calc(var(--spacing) * 3) calc(var(--spacing) * 4);
}

/* --- Topbar --- */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}

.topbar .spacer { flex: 1; }

/* --- Tabs (pestañas superiores) --- */

.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px;
}

.bottom-nav { display: none; } /* la barra inferior es solo de mobile */

.tab-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
}

.tab-btn.active {
  color: white;
  background: var(--gradient-primary);
}

/* --- Grillas del dashboard --- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: start;
}

.accesos-rapidos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* --- Materias: en desktop el formulario siempre está visible --- */
.btn-solo-mobile { display: none; }