Responsive Design

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Content adapts: 1 column mobile, 2 tablet, 3 desktop */}
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div className="space-y-2">
    <Label htmlFor="username">Usuario</Label>
    <Input id="username" name="username" />
  </div>
  {/* More fields */}
</div>

<DialogContent className="sm:max-w-lg">
  {/* Content is full-width on mobile, max-width on larger screens */}
</DialogContent>

<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
  <CardTitle className="text-sm font-medium">
    Alumnos Activos
  </CardTitle>
  <User className="h-4 w-4 text-muted-foreground" />
</CardHeader>

<PageHeader
  title="Calendario de Clases"
  description="Vista interactiva de las clases programadas"
  action={
    <CalendarControls
      currentDate={currentDate}
      viewMode={viewMode}
      onNavigate={navigate}
      onToday={goToToday}
      onViewModeChange={setViewMode}
    />
  }
/>

<div className="flex flex-wrap items-center justify-center sm:justify-end gap-2 mb-6">
  {/* Filters */}
  <FilterBar
    filters={filterConfig}
    values={filters}
    onChange={handleFilterChange}
    onReset={handleResetFilters}
    isLoading={isLoading}
  />
  {/* Toolbar */}
  <CalendarToolbar />
</div>

<div className="overflow-x-auto">
  <table className="w-full border-collapse">
    {/* Table content */}
  </table>
</div>

<Button variant="outline" size="sm">
  <Download className="mr-2 h-4 w-4" />
  <span className="hidden sm:inline">Exportar</span>
</Button>

<div className="min-h-screen flex items-center justify-center bg-background p-4">
  <Card className="w-full max-w-md animate-in fade-in-50 duration-500">
    {/* Login/Register form */}
  </Card>
</div>

<ResponsiveContainer width="100%" height={220}>
  <BarChart
    data={alumnosPorClases}
    margin={{ top: 5, right: 10, left: -20, bottom: 5 }}
  >
    {/* Chart content */}
  </BarChart>
</ResponsiveContainer>

<XAxis dataKey="plan" tick={{ fontSize: 12 }} />
<YAxis tick={{ fontSize: 12 }} allowDecimals={false} />

### Mobile Adaptations

Views adapt to screen size:
- Month view: Compressed on mobile
- Week view: Horizontal scroll on mobile
- Day view: Optimized grid spacing
- Cards: Stack vertically on mobile
- Tables: Horizontal scroll on mobile

<CardTitle className="text-2xl font-bold text-center">
  Iniciar Sesión
</CardTitle>
<CardDescription className="text-center">
  Ingresa tus credenciales para acceder
</CardDescription>

<p className="text-sm font-medium truncate">
  {a.nombre}
</p>

<div className="space-y-4">
  {/* Vertically stacked elements with consistent gap */}
</div>

<div className="flex flex-wrap items-center gap-4">
  {/* Items wrap to new line when needed */}
</div>

<div className="flex flex-col sm:flex-row gap-4">
  {/* Stack vertically on mobile, horizontally on desktop */}
</div>

<CalendarControls
  currentDate={currentDate}
  viewMode={viewMode}
  onNavigate={navigate}
  onToday={goToToday}
  onViewModeChange={setViewMode}
/>

<Button type="submit" className="w-full" disabled={isSubmitting}>
  {/* Full-width button easy to tap on mobile */}
</Button>

<div className="min-h-screen flex items-center justify-center bg-background">
  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
</div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
  {/* 1 column mobile, 2 tablet, 4 desktop */}
</div>

<div className="grid gap-4 md:grid-cols-2">
  {/* 1 column mobile, 2 desktop */}
</div>

<div className="flex flex-col sm:flex-row gap-2">
  {/* Stack on mobile, row on desktop */}
</div>