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

#app {
  padding: 0 12px calc(64px + var(--spacing) * 3); /* espacio para la barra inferior fija */
}

/* --- Topbar compacto --- */

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

.topbar .spacer { flex: 1; }
.topbar .app-nombre-completo { display: none; } /* en mobile solo se ve el logo */
.topbar .usuario-nombre-texto { display: none; } /* el avatar alcanza en mobile */

/* Las pestañas de arriba no se usan en mobile: la navegación vive abajo */
.tabs { display: none; }

/* --- Barra de navegación inferior fija --- */

.bottom-nav {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index: 20;
}

.bottom-nav .tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 11px;
  padding: 4px;
  border-radius: var(--radius-sm);
}

.bottom-nav .tab-btn.active { color: var(--color-primary); background: transparent; }
.bottom-nav .tab-btn svg { width: 20px; height: 20px; }

/* --- Grillas del dashboard: todo apilado en una columna --- */

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

.dashboard-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accesos-rapidos-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Dashboard rediseñado: ajustes mobile --- */

.btn-cta-mobile {
  display: block;
  width: 100%;
  margin-top: 4px;
}

.saludo-banner { padding: 16px; gap: 14px; }
.saludo-banner h1 { font-size: 20px; }
.rendimiento-card { width: 100%; }

/* --- Materias: en mobile el formulario está oculto hasta tocar "+ Materia" --- */
.btn-solo-mobile { display: inline-flex; }

#form-materia-wrap { display: none; }
#form-materia-wrap.mostrar-form { display: block; }

.pagina-header-stats { width: 100%; }
.pagina-header-stat { flex: 1; }

/* --- Actividades: mismo patrón que Materias, form oculto hasta tocar "+ Nueva" --- */
#form-actividad-wrap { display: none; }
#form-actividad-wrap.mostrar-form { display: block; }