feat: add study rooms feature with BigBlueButton integration

- Create database migrations for study_rooms table in both cms-service and lms-service.
- Implement study room handlers in lms-service for listing, creating, joining, ending, and deleting study rooms.
- Develop frontend components for managing study rooms in both experience and studio applications.
- Add UI for creating new study rooms, displaying active and ended rooms, and joining sessions.
- Include instructions for configuring BigBlueButton server settings.

Co-authored-by: Copilot <copilot@github.com>

roadmap.md

@@ -122,7 +122,13 @@
 - [x] **SSE para Pizarras Colaborativas**: Reemplazado polling de 5s por `EventSource` en `CollaborativeWhiteboard.tsx`. Endpoint `GET /lessons/{id}/collaborative-canvas/stream` en `lms-service` usa canal `tokio::sync::mpsc` + `ReceiverStream`; el servidor consulta la DB cada 2s y emite eventos SSE solo cuando cambia la `revision`. El cliente cierra la conexión al desmontar el componente.
 - [x] **Rotación de Secretos LTI**: Endpoint `POST /courses/{id}/lti-tools/{tool_id}/rotate-secret` genera un nuevo secreto alfanumérico de 32 chars, actualiza la DB y lo retorna una sola vez. UI en Studio (`/courses/[id]/lti-tools`) con botón 🔑 por herramienta, modal de confirmación de riesgo, y panel de copia-única del nuevo secreto con botón clipboard.
 
+### Fase 38: Salas de Estudio con BigBlueButton 🎥
+- [x] **Tabla `study_rooms`**: migración con campos `status` (pending/active/ended), `bbb_meeting_id`, `attendee_pw`, `moderator_pw`, `max_participants`, `scheduled_at`, `started_at`, `ended_at`.
+- [x] **Integración BBB**: `handlers_study_rooms.rs` construye URLs BBB con checksum SHA256 (`action + params + BBB_SECRET`). Endpoints: `GET /courses/{id}/study-rooms`, `POST /courses/{id}/study-rooms`, `POST .../join`, `POST .../end`, `DELETE .../`. Variables de entorno: `BBB_URL` y `BBB_SECRET`.
+- [x] **Studio**: página `/courses/[id]/study-rooms` — crear sala, lista con estado, botones Iniciar/Unirse (BBB en nueva pestaña)/Finalizar/Eliminar, instrucciones de configuración integradas. Tab "Salas de Estudio" en `CourseEditorLayout`.
+- [x] **Experience**: página `/courses/[id]/study-rooms` con lista de salas activas/programadas y botón "Unirse". Acceso directo desde la página del curso como tarjeta de navegación.
+
 **Próximas Prioridades**:
-1. Migrar passback LTI de HMAC custom a **OAuth2 AGS** (estándar IMS) manteniendo compatibilidad transitoria.
-2. **Edición multiusuario** de documentos (tipo Google Docs) para Fase 33.
-3. **Salas de Estudio** — grupos efímeros por video para resolución de dudas grupales.
+1. **OAuth2 AGS** — estándar IMS para passback de calificaciones (reemplaza HMAC custom).
+2. **Edición Multiusuario** — documentos compartidos tipo Google Docs en lecciones.
+3. **Grabaciones BBB** — listar grabaciones de salas finalizadas desde la API de BBB.

services/cms-service/migrations/20260427000005_study_rooms.sql

@@ -0,0 +1,24 @@
+-- Salas de Estudio (Fase 38) -----------------------------------------------
+CREATE TABLE IF NOT EXISTS study_rooms (
+    id              UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    organization_id UUID NOT NULL,
+    course_id       UUID NOT NULL REFERENCES courses(id) ON DELETE CASCADE,
+    created_by      UUID NOT NULL,
+    title           VARCHAR(255) NOT NULL,
+    description     TEXT,
+    status          VARCHAR(32) NOT NULL DEFAULT 'pending',
+    bbb_meeting_id  VARCHAR(255),
+    bbb_internal_id VARCHAR(255),
+    attendee_pw     VARCHAR(128),
+    moderator_pw    VARCHAR(128),
+    join_url        TEXT,
+    scheduled_at    TIMESTAMPTZ,
+    started_at      TIMESTAMPTZ,
+    ended_at        TIMESTAMPTZ,
+    max_participants INT DEFAULT 50,
+    created_at      TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    updated_at      TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_study_rooms_course ON study_rooms(course_id);
+CREATE INDEX IF NOT EXISTS idx_study_rooms_org ON study_rooms(organization_id);

services/lms-service/migrations/20260427000005_study_rooms.sql

@@ -0,0 +1,26 @@
+-- Salas de Estudio (Fase 38) -----------------------------------------------
+CREATE TABLE IF NOT EXISTS study_rooms (
+    id              UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    organization_id UUID NOT NULL,
+    course_id       UUID NOT NULL REFERENCES courses(id) ON DELETE CASCADE,
+    created_by      UUID NOT NULL,  -- user_id del instructor
+    title           VARCHAR(255) NOT NULL,
+    description     TEXT,
+    -- Estado: pending | active | ended
+    status          VARCHAR(32) NOT NULL DEFAULT 'pending',
+    -- BBB
+    bbb_meeting_id  VARCHAR(255),
+    bbb_internal_id VARCHAR(255),
+    attendee_pw     VARCHAR(128),
+    moderator_pw    VARCHAR(128),
+    join_url        TEXT,
+    scheduled_at    TIMESTAMPTZ,
+    started_at      TIMESTAMPTZ,
+    ended_at        TIMESTAMPTZ,
+    max_participants INT DEFAULT 50,
+    created_at      TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    updated_at      TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_study_rooms_course ON study_rooms(course_id);
+CREATE INDEX IF NOT EXISTS idx_study_rooms_org ON study_rooms(organization_id);

services/lms-service/src/handlers_study_rooms.rs

@@ -0,0 +1,390 @@
+/// Salas de Estudio con BigBlueButton (Fase 38)
+use axum::{
+    Json,
+    extract::{Path, State},
+    http::StatusCode,
+};
+use chrono::{DateTime, Utc};
+use common::{auth::Claims, middleware::Org};
+use serde::{Deserialize, Serialize};
+use sha2::{Digest, Sha256};
+use sqlx::{PgPool, Row};
+use uuid::Uuid;
+
+// ─── Helpers BBB ─────────────────────────────────────────────────────────────
+
+fn bbb_base_url() -> String {
+    std::env::var("BBB_URL").unwrap_or_else(|_| "https://bbb.example.com/bigbluebutton/api".to_string())
+}
+
+fn bbb_secret() -> String {
+    std::env::var("BBB_SECRET").unwrap_or_else(|_| "changeme".to_string())
+}
+
+/// Calcula el checksum BBB: SHA256(action + params_string + secret)
+fn bbb_checksum(action: &str, params: &str) -> String {
+    let input = format!("{}{}{}", action, params, bbb_secret());
+    let mut hasher = Sha256::new();
+    hasher.update(input.as_bytes());
+    format!("{:x}", hasher.finalize())
+}
+
+/// Construye URL BBB con checksum incluido
+fn bbb_url(action: &str, params: &str) -> String {
+    let checksum = bbb_checksum(action, params);
+    let base = bbb_base_url();
+    if params.is_empty() {
+        format!("{}/{}?checksum={}", base, action, checksum)
+    } else {
+        format!("{}/{}?{}&checksum={}", base, action, params, checksum)
+    }
+}
+
+// ─── Modelos ─────────────────────────────────────────────────────────────────
+
+#[derive(Debug, Serialize)]
+pub struct StudyRoom {
+    pub id: Uuid,
+    pub organization_id: Uuid,
+    pub course_id: Uuid,
+    pub created_by: Uuid,
+    pub title: String,
+    pub description: Option<String>,
+    pub status: String,
+    pub bbb_meeting_id: Option<String>,
+    pub join_url: Option<String>,
+    pub scheduled_at: Option<DateTime<Utc>>,
+    pub started_at: Option<DateTime<Utc>>,
+    pub ended_at: Option<DateTime<Utc>>,
+    pub max_participants: i32,
+    pub created_at: DateTime<Utc>,
+    pub updated_at: DateTime<Utc>,
+}
+
+#[derive(Debug, Deserialize)]
+pub struct CreateStudyRoomPayload {
+    pub title: String,
+    pub description: Option<String>,
+    pub scheduled_at: Option<DateTime<Utc>>,
+    pub max_participants: Option<i32>,
+}
+
+#[derive(Debug, Serialize)]
+pub struct JoinStudyRoomResponse {
+    pub room_id: Uuid,
+    pub join_url: String,
+}
+
+#[derive(Debug, Serialize)]
+pub struct EndStudyRoomResponse {
+    pub room_id: Uuid,
+    pub ended_at: DateTime<Utc>,
+}
+
+// ─── Handlers ────────────────────────────────────────────────────────────────
+
+pub async fn list_course_study_rooms(
+    Org(org_ctx): Org,
+    State(pool): State<PgPool>,
+    Path(course_id): Path<Uuid>,
+) -> Result<Json<Vec<StudyRoom>>, (StatusCode, String)> {
+    let rows = sqlx::query(
+        r#"
+        SELECT id, organization_id, course_id, created_by, title, description, status,
+               bbb_meeting_id, join_url, scheduled_at, started_at, ended_at,
+               max_participants, created_at, updated_at
+        FROM study_rooms
+        WHERE course_id = $1 AND organization_id = $2
+        ORDER BY created_at DESC
+        "#,
+    )
+    .bind(course_id)
+    .bind(org_ctx.id)
+    .fetch_all(&pool)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    let rooms = rows
+        .into_iter()
+        .map(|r| StudyRoom {
+            id: r.get("id"),
+            organization_id: r.get("organization_id"),
+            course_id: r.get("course_id"),
+            created_by: r.get("created_by"),
+            title: r.get("title"),
+            description: r.get("description"),
+            status: r.get("status"),
+            bbb_meeting_id: r.get("bbb_meeting_id"),
+            join_url: r.get("join_url"),
+            scheduled_at: r.get("scheduled_at"),
+            started_at: r.get("started_at"),
+            ended_at: r.get("ended_at"),
+            max_participants: r.get("max_participants"),
+            created_at: r.get("created_at"),
+            updated_at: r.get("updated_at"),
+        })
+        .collect();
+
+    Ok(Json(rooms))
+}
+
+pub async fn create_study_room(
+    Org(org_ctx): Org,
+    claims: Claims,
+    State(pool): State<PgPool>,
+    Path(course_id): Path<Uuid>,
+    Json(payload): Json<CreateStudyRoomPayload>,
+) -> Result<(StatusCode, Json<StudyRoom>), (StatusCode, String)> {
+    if payload.title.trim().is_empty() {
+        return Err((StatusCode::UNPROCESSABLE_ENTITY, "El título es requerido".to_string()));
+    }
+
+    let meeting_id = Uuid::new_v4().to_string();
+
+    // Generar contraseñas aleatorias de 12 chars
+    use rand::Rng;
+    let attendee_pw: String = rand::thread_rng()
+        .sample_iter(&rand::distributions::Alphanumeric)
+        .take(12)
+        .map(char::from)
+        .collect();
+    let moderator_pw: String = rand::thread_rng()
+        .sample_iter(&rand::distributions::Alphanumeric)
+        .take(12)
+        .map(char::from)
+        .collect();
+
+    // Llamar a BBB create
+    let course_name_enc = urlencoding::encode(&payload.title).to_string();
+    let params = format!(
+        "meetingID={}&name={}&attendeePW={}&moderatorPW={}&record=false&autoStartRecording=false&allowStartStopRecording=false",
+        urlencoding::encode(&meeting_id),
+        course_name_enc,
+        urlencoding::encode(&attendee_pw),
+        urlencoding::encode(&moderator_pw),
+    );
+    let create_url = bbb_url("create", &params);
+
+    let bbb_internal_id: Option<String> = match reqwest::Client::new()
+        .get(&create_url)
+        .send()
+        .await
+    {
+        Ok(resp) => {
+            let body = resp.text().await.unwrap_or_default();
+            // Extraer internalMeetingID del XML de respuesta
+            body.split("<internalMeetingID>")
+                .nth(1)
+                .and_then(|s| s.split("</internalMeetingID>").next())
+                .map(|s| s.to_string())
+        }
+        Err(e) => {
+            tracing::warn!("create_study_room: BBB create failed (continuing): {}", e);
+            None
+        }
+    };
+
+    let now = Utc::now();
+    let row = sqlx::query(
+        r#"
+        INSERT INTO study_rooms (
+            organization_id, course_id, created_by, title, description,
+            status, bbb_meeting_id, bbb_internal_id, attendee_pw, moderator_pw,
+            scheduled_at, max_participants, created_at, updated_at
+        )
+        VALUES ($1, $2, $3, $4, $5, 'pending', $6, $7, $8, $9, $10, $11, $12, $12)
+        RETURNING id, organization_id, course_id, created_by, title, description, status,
+                  bbb_meeting_id, join_url, scheduled_at, started_at, ended_at,
+                  max_participants, created_at, updated_at
+        "#,
+    )
+    .bind(org_ctx.id)
+    .bind(course_id)
+    .bind(claims.sub)
+    .bind(&payload.title)
+    .bind(&payload.description)
+    .bind(&meeting_id)
+    .bind(&bbb_internal_id)
+    .bind(&attendee_pw)
+    .bind(&moderator_pw)
+    .bind(payload.scheduled_at)
+    .bind(payload.max_participants.unwrap_or(50))
+    .bind(now)
+    .fetch_one(&pool)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok((
+        StatusCode::CREATED,
+        Json(StudyRoom {
+            id: row.get("id"),
+            organization_id: row.get("organization_id"),
+            course_id: row.get("course_id"),
+            created_by: row.get("created_by"),
+            title: row.get("title"),
+            description: row.get("description"),
+            status: row.get("status"),
+            bbb_meeting_id: row.get("bbb_meeting_id"),
+            join_url: row.get("join_url"),
+            scheduled_at: row.get("scheduled_at"),
+            started_at: row.get("started_at"),
+            ended_at: row.get("ended_at"),
+            max_participants: row.get("max_participants"),
+            created_at: row.get("created_at"),
+            updated_at: row.get("updated_at"),
+        }),
+    ))
+}
+
+pub async fn join_study_room(
+    Org(org_ctx): Org,
+    claims: Claims,
+    State(pool): State<PgPool>,
+    Path((course_id, room_id)): Path<(Uuid, Uuid)>,
+) -> Result<Json<JoinStudyRoomResponse>, (StatusCode, String)> {
+    #[derive(sqlx::FromRow)]
+    struct RoomRow {
+        bbb_meeting_id: Option<String>,
+        attendee_pw: Option<String>,
+        moderator_pw: Option<String>,
+        status: String,
+        created_by: Uuid,
+    }
+
+    let room = sqlx::query_as::<_, RoomRow>(
+        "SELECT bbb_meeting_id, attendee_pw, moderator_pw, status, created_by FROM study_rooms WHERE id = $1 AND course_id = $2 AND organization_id = $3",
+    )
+    .bind(room_id)
+    .bind(course_id)
+    .bind(org_ctx.id)
+    .fetch_optional(&pool)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
+    .ok_or((StatusCode::NOT_FOUND, "Sala no encontrada".to_string()))?;
+
+    if room.status == "ended" {
+        return Err((StatusCode::GONE, "La sala ya ha finalizado".to_string()));
+    }
+
+    let meeting_id = room.bbb_meeting_id.as_deref().unwrap_or("");
+
+    // El creador entra como moderador; el resto como asistente
+    let is_moderator = claims.sub == room.created_by;
+    let password = if is_moderator {
+        room.moderator_pw.as_deref().unwrap_or("")
+    } else {
+        room.attendee_pw.as_deref().unwrap_or("")
+    };
+
+    let display_name = format!("Usuario {}", &claims.sub.to_string()[..8]);
+    let params = format!(
+        "meetingID={}&fullName={}&password={}&redirect=true",
+        urlencoding::encode(meeting_id),
+        urlencoding::encode(&display_name),
+        urlencoding::encode(password),
+    );
+    let join_url = bbb_url("join", &params);
+
+    // Marcar sala como activa en el primer join si estaba pending
+    if room.status == "pending" {
+        let _ = sqlx::query(
+            "UPDATE study_rooms SET status = 'active', started_at = NOW(), updated_at = NOW() WHERE id = $1",
+        )
+        .bind(room_id)
+        .execute(&pool)
+        .await;
+    }
+
+    Ok(Json(JoinStudyRoomResponse {
+        room_id,
+        join_url,
+    }))
+}
+
+pub async fn end_study_room(
+    Org(org_ctx): Org,
+    claims: Claims,
+    State(pool): State<PgPool>,
+    Path((course_id, room_id)): Path<(Uuid, Uuid)>,
+) -> Result<Json<EndStudyRoomResponse>, (StatusCode, String)> {
+    #[derive(sqlx::FromRow)]
+    struct RoomRow {
+        bbb_meeting_id: Option<String>,
+        moderator_pw: Option<String>,
+        created_by: Uuid,
+    }
+
+    let room = sqlx::query_as::<_, RoomRow>(
+        "SELECT bbb_meeting_id, moderator_pw, created_by FROM study_rooms WHERE id = $1 AND course_id = $2 AND organization_id = $3",
+    )
+    .bind(room_id)
+    .bind(course_id)
+    .bind(org_ctx.id)
+    .fetch_optional(&pool)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
+    .ok_or((StatusCode::NOT_FOUND, "Sala no encontrada".to_string()))?;
+
+    // Solo el creador puede terminar la sala
+    if claims.sub != room.created_by {
+        return Err((StatusCode::FORBIDDEN, "Solo el creador puede terminar la sala".to_string()));
+    }
+
+    // Llamar a BBB end
+    if let Some(meeting_id) = &room.bbb_meeting_id {
+        let params = format!(
+            "meetingID={}&password={}",
+            urlencoding::encode(meeting_id),
+            urlencoding::encode(room.moderator_pw.as_deref().unwrap_or("")),
+        );
+        let end_url = bbb_url("end", &params);
+        if let Err(e) = reqwest::Client::new().get(&end_url).send().await {
+            tracing::warn!("end_study_room: BBB end call failed (continuing): {}", e);
+        }
+    }
+
+    let now = Utc::now();
+    sqlx::query(
+        "UPDATE study_rooms SET status = 'ended', ended_at = $1, updated_at = $1 WHERE id = $2",
+    )
+    .bind(now)
+    .bind(room_id)
+    .execute(&pool)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(EndStudyRoomResponse {
+        room_id,
+        ended_at: now,
+    }))
+}
+
+pub async fn delete_study_room(
+    Org(org_ctx): Org,
+    claims: Claims,
+    State(pool): State<PgPool>,
+    Path((course_id, room_id)): Path<(Uuid, Uuid)>,
+) -> Result<StatusCode, (StatusCode, String)> {
+    let created_by = sqlx::query_scalar::<_, Uuid>(
+        "SELECT created_by FROM study_rooms WHERE id = $1 AND course_id = $2 AND organization_id = $3",
+    )
+    .bind(room_id)
+    .bind(course_id)
+    .bind(org_ctx.id)
+    .fetch_optional(&pool)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
+    .ok_or((StatusCode::NOT_FOUND, "Sala no encontrada".to_string()))?;
+
+    if claims.sub != created_by {
+        return Err((StatusCode::FORBIDDEN, "Solo el creador puede eliminar la sala".to_string()));
+    }
+
+    sqlx::query("DELETE FROM study_rooms WHERE id = $1")
+        .bind(room_id)
+        .execute(&pool)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(StatusCode::NO_CONTENT)
+}

services/lms-service/src/main.rs

@@ -3,6 +3,7 @@ mod handlers;
 mod handlers_announcements;
 mod handlers_pedagogical;
 mod handlers_lti_consumer;
+mod handlers_study_rooms;
 mod handlers_email;
 mod handlers_scorm;
 mod handlers_search;
@@ -218,6 +219,24 @@ async fn main() {
             "/courses/{id}/lti-tools/{tool_id}/rotate-secret",
             post(handlers_lti_consumer::rotate_lti_tool_secret),
         )
+        // Salas de Estudio con BBB (Fase 38)
+        .route(
+            "/courses/{id}/study-rooms",
+            get(handlers_study_rooms::list_course_study_rooms)
+                .post(handlers_study_rooms::create_study_room),
+        )
+        .route(
+            "/courses/{id}/study-rooms/{room_id}/join",
+            post(handlers_study_rooms::join_study_room),
+        )
+        .route(
+            "/courses/{id}/study-rooms/{room_id}/end",
+            post(handlers_study_rooms::end_study_room),
+        )
+        .route(
+            "/courses/{id}/study-rooms/{room_id}",
+            delete(handlers_study_rooms::delete_study_room),
+        )
         // Portafolio e insignias (Badges)
         .route("/profile/{user_id}", get(portfolio::get_public_profile))
         .route("/my/badges", get(portfolio::get_my_badges))

web/experience/src/app/courses/[id]/page.tsx

@@ -433,6 +433,25 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
                             </div>
                         )}
 
+                        {/* Salas de Estudio BBB */}
+                        <div className="mb-8">
+                            <Link
+                                href={`/courses/${params.id}/study-rooms`}
+                                className="flex items-center justify-between rounded-2xl border border-black/10 dark:border-white/10 bg-white dark:bg-zinc-900 px-5 py-4 hover:border-blue-400/50 dark:hover:border-blue-500/40 transition-colors group"
+                            >
+                                <div className="flex items-center gap-3">
+                                    <div className="w-9 h-9 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
+                                        <Video size={16} />
+                                    </div>
+                                    <div>
+                                        <p className="text-sm font-semibold text-gray-900 dark:text-white">Salas de Estudio</p>
+                                        <p className="text-[11px] text-gray-500 dark:text-gray-400">Sesiones grupales con BigBlueButton</p>
+                                    </div>
+                                </div>
+                                <ExternalLink size={14} className="text-gray-400 group-hover:text-blue-500 transition-colors" />
+                            </Link>
+                        </div>
+
                         {/* Announcements Section */}
                         <div className="mb-16">
                             <AnnouncementsList courseId={params.id} isInstructor={user?.role === 'instructor' || user?.role === 'admin'} />

web/experience/src/app/courses/[id]/study-rooms/page.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { lmsApi, StudyRoom } from "@/lib/api";
+import { Video, Users, Clock, ExternalLink, ArrowLeft, RefreshCw } from "lucide-react";
+
+const STATUS_LABEL: Record<string, string> = {
+    pending: "Programada",
+    active: "En curso",
+    ended: "Finalizada",
+};
+const STATUS_COLOR: Record<string, string> = {
+    pending: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
+    active: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
+    ended: "bg-gray-100 text-gray-500 dark:bg-white/10 dark:text-white/40",
+};
+
+export default function StudyRoomsPage() {
+    const { id } = useParams() as { id: string };
+    const router = useRouter();
+    const [rooms, setRooms] = useState<StudyRoom[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [joiningId, setJoiningId] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    const loadRooms = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const data = await lmsApi.listCourseStudyRooms(id);
+            setRooms(data);
+        } catch (e) {
+            setError(e instanceof Error ? e.message : "No se pudieron cargar las salas");
+        } finally {
+            setLoading(false);
+        }
+    }, [id]);
+
+    useEffect(() => {
+        void loadRooms();
+    }, [loadRooms]);
+
+    const join = async (room: StudyRoom) => {
+        setJoiningId(room.id);
+        setError(null);
+        try {
+            const result = await lmsApi.joinStudyRoom(id, room.id);
+            window.open(result.join_url, "_blank", "noopener,noreferrer");
+            void loadRooms();
+        } catch (e) {
+            setError(e instanceof Error ? e.message : "No se pudo unir a la sala");
+        } finally {
+            setJoiningId(null);
+        }
+    };
+
+    const activeRooms = rooms.filter((r) => r.status !== "ended");
+    const endedRooms = rooms.filter((r) => r.status === "ended");
+
+    return (
+        <main className="min-h-screen bg-gray-50 dark:bg-zinc-950 px-4 py-8 max-w-3xl mx-auto">
+            <div className="flex items-center gap-3 mb-6">
+                <button
+                    onClick={() => router.back()}
+                    className="p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/10"
+                >
+                    <ArrowLeft className="w-4 h-4" />
+                </button>
+                <div>
+                    <h1 className="text-lg font-black flex items-center gap-2">
+                        <Video className="w-5 h-5" /> Salas de Estudio
+                    </h1>
+                    <p className="text-xs text-black/50 dark:text-white/50">Únete a sesiones en vivo con tu grupo</p>
+                </div>
+                <button
+                    onClick={() => void loadRooms()}
+                    className="ml-auto p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/10"
+                    title="Recargar"
+                >
+                    <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
+                </button>
+            </div>
+
+            {error && (
+                <div className="mb-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-4 py-3 text-sm text-red-700 dark:text-red-300">
+                    {error}
+                </div>
+            )}
+
+            {loading && rooms.length === 0 && (
+                <div className="flex justify-center py-12">
+                    <div className="h-6 w-6 animate-spin rounded-full border-2 border-black/20 border-t-black dark:border-white/20 dark:border-t-white" />
+                </div>
+            )}
+
+            {!loading && rooms.length === 0 && (
+                <div className="text-center py-16 text-black/40 dark:text-white/40">
+                    <Video className="w-10 h-10 mx-auto mb-3 opacity-40" />
+                    <p className="text-sm">No hay salas de estudio activas para este curso.</p>
+                </div>
+            )}
+
+            {activeRooms.length > 0 && (
+                <section className="space-y-3 mb-6">
+                    <h2 className="text-xs font-black uppercase tracking-wider text-black/40 dark:text-white/40">
+                        Salas disponibles
+                    </h2>
+                    {activeRooms.map((room) => (
+                        <div
+                            key={room.id}
+                            className="rounded-2xl border border-black/10 dark:border-white/10 bg-white dark:bg-zinc-900 p-5 flex flex-wrap items-center justify-between gap-4"
+                        >
+                            <div className="min-w-0 flex-1">
+                                <div className="flex items-center gap-2 flex-wrap mb-1">
+                                    <span className="font-semibold text-sm">{room.title}</span>
+                                    <span className={`rounded-full px-2 py-0.5 text-[11px] font-semibold ${STATUS_COLOR[room.status]}`}>
+                                        {STATUS_LABEL[room.status]}
+                                    </span>
+                                </div>
+                                {room.description && (
+                                    <p className="text-xs text-black/50 dark:text-white/50 mb-2">{room.description}</p>
+                                )}
+                                <div className="flex items-center gap-3 text-[11px] text-black/40 dark:text-white/40">
+                                    <span className="flex items-center gap-1">
+                                        <Users className="w-3 h-3" /> Máx. {room.max_participants} participantes
+                                    </span>
+                                    {room.started_at && (
+                                        <span className="flex items-center gap-1">
+                                            <Clock className="w-3 h-3" />
+                                            {new Date(room.started_at).toLocaleString()}
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+                            <button
+                                onClick={() => void join(room)}
+                                disabled={joiningId === room.id}
+                                className="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700 disabled:opacity-60 transition-colors"
+                            >
+                                {joiningId === room.id ? (
+                                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                                ) : (
+                                    <ExternalLink className="w-4 h-4" />
+                                )}
+                                {joiningId === room.id ? "Conectando..." : "Unirse"}
+                            </button>
+                        </div>
+                    ))}
+                </section>
+            )}
+
+            {endedRooms.length > 0 && (
+                <section className="space-y-2">
+                    <h2 className="text-xs font-black uppercase tracking-wider text-black/30 dark:text-white/30">
+                        Salas finalizadas
+                    </h2>
+                    {endedRooms.map((room) => (
+                        <div
+                            key={room.id}
+                            className="rounded-xl border border-black/5 dark:border-white/5 bg-white/50 dark:bg-white/5 px-4 py-3 flex items-center justify-between gap-3 opacity-60"
+                        >
+                            <div>
+                                <span className="text-sm font-medium">{room.title}</span>
+                                {room.ended_at && (
+                                    <span className="ml-2 text-[11px] text-black/40 dark:text-white/40">
+                                        Finalizada {new Date(room.ended_at).toLocaleDateString()}
+                                    </span>
+                                )}
+                            </div>
+                            <span className={`rounded-full px-2 py-0.5 text-[11px] font-semibold ${STATUS_COLOR.ended}`}>
+                                {STATUS_LABEL.ended}
+                            </span>
+                        </div>
+                    ))}
+                </section>
+            )}
+        </main>
+    );
+}

web/experience/src/lib/api.ts

@@ -1339,4 +1339,30 @@ export const lmsApi = {
     getEnabledPlugins(): Promise<OrgPlugin[]> {
         return apiFetch('/plugins/enabled', {}, true);
     },
+
+    listCourseStudyRooms(courseId: string): Promise<StudyRoom[]> {
+        return apiFetch(`/courses/${courseId}/study-rooms`);
+    },
+
+    joinStudyRoom(courseId: string, roomId: string): Promise<{ room_id: string; join_url: string }> {
+        return apiFetch(`/courses/${courseId}/study-rooms/${roomId}/join`, { method: 'POST' });
+    },
 };
+
+export interface StudyRoom {
+    id: string;
+    organization_id: string;
+    course_id: string;
+    created_by: string;
+    title: string;
+    description?: string;
+    status: 'pending' | 'active' | 'ended';
+    bbb_meeting_id?: string;
+    join_url?: string;
+    scheduled_at?: string;
+    started_at?: string;
+    ended_at?: string;
+    max_participants: number;
+    created_at: string;
+    updated_at: string;
+}

web/studio/src/app/courses/[id]/study-rooms/page.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import CourseEditorLayout from "@/components/CourseEditorLayout";
+import { lmsApi, StudyRoom, CreateStudyRoomPayload } from "@/lib/api";
+import {
+    Video,
+    Plus,
+    RefreshCw,
+    Trash2,
+    Play,
+    Square,
+    Clock,
+    Users,
+    ExternalLink,
+} from "lucide-react";
+
+const STATUS_LABEL: Record<string, string> = {
+    pending: "Programada",
+    active: "En curso",
+    ended: "Finalizada",
+};
+const STATUS_COLOR: Record<string, string> = {
+    pending: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
+    active: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
+    ended: "bg-gray-100 text-gray-600 dark:bg-white/10 dark:text-white/50",
+};
+
+export default function CourseStudyRoomsPage() {
+    const { id } = useParams() as { id: string };
+    const [rooms, setRooms] = useState<StudyRoom[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [form, setForm] = useState<CreateStudyRoomPayload>({
+        title: "",
+        description: "",
+        max_participants: 50,
+    });
+
+    const loadRooms = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const data = await lmsApi.listCourseStudyRooms(id);
+            setRooms(data);
+        } catch (e) {
+            setError(e instanceof Error ? e.message : "No se pudieron cargar las salas");
+        } finally {
+            setLoading(false);
+        }
+    }, [id]);
+
+    useEffect(() => {
+        void loadRooms();
+    }, [loadRooms]);
+
+    const createRoom = async () => {
+        if (!form.title.trim()) {
+            setError("El título es requerido.");
+            return;
+        }
+        setSaving(true);
+        setError(null);
+        try {
+            const created = await lmsApi.createStudyRoom(id, form);
+            setRooms((prev) => [created, ...prev]);
+            setForm({ title: "", description: "", max_participants: 50 });
+        } catch (e) {
+            setError(e instanceof Error ? e.message : "No se pudo crear la sala");
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    const joinRoom = async (room: StudyRoom) => {
+        try {
+            const result = await lmsApi.joinStudyRoom(id, room.id);
+            window.open(result.join_url, "_blank", "noopener,noreferrer");
+            // Refrescar para mostrar estado activo
+            void loadRooms();
+        } catch (e) {
+            setError(e instanceof Error ? e.message : "No se pudo unir a la sala");
+        }
+    };
+
+    const endRoom = async (room: StudyRoom) => {
+        const ok = confirm(`¿Finalizar la sala "${room.title}"? Los participantes serán desconectados.`);
+        if (!ok) return;
+        try {
+            await lmsApi.endStudyRoom(id, room.id);
+            setRooms((prev) => prev.map((r) => r.id === room.id ? { ...r, status: "ended" as const } : r));
+        } catch (e) {
+            setError(e instanceof Error ? e.message : "No se pudo finalizar la sala");
+        }
+    };
+
+    const deleteRoom = async (room: StudyRoom) => {
+        const ok = confirm(`¿Eliminar la sala "${room.title}"?`);
+        if (!ok) return;
+        try {
+            await lmsApi.deleteStudyRoom(id, room.id);
+            setRooms((prev) => prev.filter((r) => r.id !== room.id));
+        } catch (e) {
+            setError(e instanceof Error ? e.message : "No se pudo eliminar la sala");
+        }
+    };
+
+    return (
+        <CourseEditorLayout
+            activeTab="study-rooms"
+            pageTitle="Salas de Estudio"
+            pageDescription="Crea y gestiona salas de video grupales con BigBlueButton."
+        >
+            <div className="space-y-6">
+                {/* Formulario nueva sala */}
+                <section className="rounded-2xl border border-black/10 dark:border-white/10 bg-white/60 dark:bg-white/5 p-5">
+                    <h2 className="text-sm font-semibold flex items-center gap-2 mb-4">
+                        <Plus className="w-4 h-4" />
+                        Nueva Sala de Estudio
+                    </h2>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                        <input
+                            className="rounded-lg border border-black/10 dark:border-white/10 bg-transparent px-3 py-2 text-sm"
+                            placeholder="Título (ej: Resolución de dudas cap. 3)"
+                            value={form.title}
+                            onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
+                        />
+                        <input
+                            className="rounded-lg border border-black/10 dark:border-white/10 bg-transparent px-3 py-2 text-sm"
+                            placeholder="Descripción (opcional)"
+                            value={form.description ?? ""}
+                            onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
+                        />
+                        <input
+                            type="number"
+                            min={2}
+                            max={200}
+                            className="rounded-lg border border-black/10 dark:border-white/10 bg-transparent px-3 py-2 text-sm"
+                            placeholder="Máx. participantes"
+                            value={form.max_participants ?? 50}
+                            onChange={(e) => setForm((f) => ({ ...f, max_participants: parseInt(e.target.value) || 50 }))}
+                        />
+                    </div>
+                    {error && (
+                        <p className="mt-2 text-xs text-red-600 dark:text-red-400">{error}</p>
+                    )}
+                    <div className="mt-3">
+                        <button
+                            onClick={() => void createRoom()}
+                            disabled={saving}
+                            className="px-4 py-2 rounded-lg bg-black text-white dark:bg-white dark:text-black text-sm font-semibold disabled:opacity-50"
+                        >
+                            {saving ? "Creando..." : "Crear sala"}
+                        </button>
+                    </div>
+                </section>
+
+                {/* Lista de salas */}
+                <section className="rounded-2xl border border-black/10 dark:border-white/10 bg-white/60 dark:bg-white/5 p-5">
+                    <div className="flex items-center justify-between mb-4">
+                        <h2 className="text-sm font-semibold flex items-center gap-2">
+                            <Video className="w-4 h-4" />
+                            Salas ({rooms.length})
+                        </h2>
+                        <button
+                            onClick={() => void loadRooms()}
+                            className="p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/10"
+                            title="Recargar"
+                        >
+                            <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
+                        </button>
+                    </div>
+
+                    <div className="space-y-3">
+                        {rooms.map((room) => (
+                            <div
+                                key={room.id}
+                                className="rounded-xl border border-black/10 dark:border-white/10 px-4 py-3 flex flex-wrap items-center justify-between gap-3"
+                            >
+                                <div className="min-w-0 flex-1">
+                                    <div className="flex items-center gap-2 flex-wrap">
+                                        <span className="text-sm font-semibold truncate">{room.title}</span>
+                                        <span className={`rounded-full px-2 py-0.5 text-[11px] font-semibold ${STATUS_COLOR[room.status]}`}>
+                                            {STATUS_LABEL[room.status]}
+                                        </span>
+                                    </div>
+                                    {room.description && (
+                                        <p className="text-xs text-black/50 dark:text-white/50 mt-0.5 truncate">{room.description}</p>
+                                    )}
+                                    <div className="mt-1 flex items-center gap-3 text-[11px] text-black/40 dark:text-white/40">
+                                        <span className="flex items-center gap-1">
+                                            <Users className="w-3 h-3" /> Máx. {room.max_participants}
+                                        </span>
+                                        {room.started_at && (
+                                            <span className="flex items-center gap-1">
+                                                <Clock className="w-3 h-3" />
+                                                Inicio: {new Date(room.started_at).toLocaleString()}
+                                            </span>
+                                        )}
+                                        <span className="font-mono opacity-60">ID: {room.id.slice(0, 8)}…</span>
+                                    </div>
+                                </div>
+
+                                <div className="flex items-center gap-2">
+                                    {room.status !== "ended" && (
+                                        <button
+                                            onClick={() => void joinRoom(room)}
+                                            className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-blue-600 text-white text-xs font-semibold hover:bg-blue-700"
+                                        >
+                                            <ExternalLink className="w-3 h-3" /> Unirse (BBB)
+                                        </button>
+                                    )}
+                                    {room.status === "active" && (
+                                        <button
+                                            onClick={() => void endRoom(room)}
+                                            className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg border border-orange-300 bg-orange-50 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300 text-xs font-semibold hover:bg-orange-100"
+                                        >
+                                            <Square className="w-3 h-3" /> Finalizar
+                                        </button>
+                                    )}
+                                    {room.status === "pending" && (
+                                        <button
+                                            onClick={() => void joinRoom(room)}
+                                            className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg border border-green-300 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 text-xs font-semibold hover:bg-green-100"
+                                        >
+                                            <Play className="w-3 h-3" /> Iniciar
+                                        </button>
+                                    )}
+                                    {room.status === "ended" && (
+                                        <button
+                                            onClick={() => void deleteRoom(room)}
+                                            className="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
+                                            title="Eliminar"
+                                        >
+                                            <Trash2 className="w-4 h-4 text-red-600" />
+                                        </button>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                        {!loading && rooms.length === 0 && (
+                            <p className="text-sm text-black/50 dark:text-white/50">No hay salas creadas para este curso.</p>
+                        )}
+                    </div>
+                </section>
+
+                {/* Instrucciones de configuración BBB */}
+                <section className="rounded-2xl border border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/20 p-5">
+                    <h3 className="text-xs font-black text-blue-800 dark:text-blue-300 mb-2">Configuración de BigBlueButton</h3>
+                    <p className="text-xs text-blue-700 dark:text-blue-400 mb-3">
+                        Para conectar con tu servidor BBB, define las siguientes variables de entorno en el backend:
+                    </p>
+                    <div className="space-y-1">
+                        <code className="block text-xs font-mono bg-white dark:bg-black/30 rounded px-3 py-1.5 border border-blue-200 dark:border-blue-700">
+                            BBB_URL=https://tu-servidor-bbb.com/bigbluebutton/api
+                        </code>
+                        <code className="block text-xs font-mono bg-white dark:bg-black/30 rounded px-3 py-1.5 border border-blue-200 dark:border-blue-700">
+                            BBB_SECRET=tu_shared_secret_bbb
+                        </code>
+                    </div>
+                    <p className="text-[11px] text-blue-600 dark:text-blue-400 mt-2">
+                        Puedes obtener estos valores desde la consola de tu servidor BBB con: <code className="font-mono">bbb-conf --secret</code>
+                    </p>
+                </section>
+            </div>
+        </CourseEditorLayout>
+    );
+}

web/studio/src/components/CourseEditorLayout.tsx

@@ -26,7 +26,8 @@ type TabKey =
     | "students"
     | "sessions"
     | "pedagogical"
-    | "lti-tools";
+    | "lti-tools"
+    | "study-rooms";
 
 interface CourseEditorLayoutProps {
     children: React.ReactNode;
@@ -79,6 +80,7 @@ export default function CourseEditorLayout({
                 { key: "marketing", label: "Marketing", icon: Megaphone, href: `/courses/${id}/marketing` },
                 { key: "files", label: "Archivos", icon: Folder, href: `/courses/${id}/files` },
                 { key: "sessions", label: "Sesiones en Vivo", icon: Video, href: `/courses/${id}/sessions` },
+                { key: "study-rooms", label: "Salas de Estudio", icon: Video, href: `/courses/${id}/study-rooms` },
             ],
         },
         {

web/studio/src/lib/api.ts

@@ -1843,8 +1843,43 @@ export const lmsApi = {
         apiFetch(`/courses/${courseId}/lti-tools/${toolId}`, { method: 'DELETE' }, true),
     rotateCourseLtiToolSecret: (courseId: string, toolId: string): Promise<{ tool_id: string; new_secret: string; rotated_at: string }> =>
         apiFetch(`/courses/${courseId}/lti-tools/${toolId}/rotate-secret`, { method: 'POST' }, true),
+    listCourseStudyRooms: (courseId: string): Promise<StudyRoom[]> =>
+        apiFetch(`/courses/${courseId}/study-rooms`, {}, true),
+    createStudyRoom: (courseId: string, payload: CreateStudyRoomPayload): Promise<StudyRoom> =>
+        apiFetch(`/courses/${courseId}/study-rooms`, { method: 'POST', body: JSON.stringify(payload) }, true),
+    joinStudyRoom: (courseId: string, roomId: string): Promise<{ room_id: string; join_url: string }> =>
+        apiFetch(`/courses/${courseId}/study-rooms/${roomId}/join`, { method: 'POST' }, true),
+    endStudyRoom: (courseId: string, roomId: string): Promise<{ room_id: string; ended_at: string }> =>
+        apiFetch(`/courses/${courseId}/study-rooms/${roomId}/end`, { method: 'POST' }, true),
+    deleteStudyRoom: (courseId: string, roomId: string): Promise<void> =>
+        apiFetch(`/courses/${courseId}/study-rooms/${roomId}`, { method: 'DELETE' }, true),
 };
 
+export interface StudyRoom {
+    id: string;
+    organization_id: string;
+    course_id: string;
+    created_by: string;
+    title: string;
+    description?: string;
+    status: 'pending' | 'active' | 'ended';
+    bbb_meeting_id?: string;
+    join_url?: string;
+    scheduled_at?: string;
+    started_at?: string;
+    ended_at?: string;
+    max_participants: number;
+    created_at: string;
+    updated_at: string;
+}
+
+export interface CreateStudyRoomPayload {
+    title: string;
+    description?: string;
+    scheduled_at?: string;
+    max_participants?: number;
+}
+
 export interface Meeting {
     id: string;
     course_id: string;