feat: Implement default branding synchronization and improve API header handling.

install.sh

@@ -173,7 +173,13 @@ if ! grep -q "DATABASE_URL=" .env || [[ $(grep "DATABASE_URL=" .env | cut -d'='
     update_env "LMS_DATABASE_URL" "postgresql://user:${DB_PASS}@localhost:5432/openccb_lms?sslmode=disable"
     update_env "JWT_SECRET" "supersecretsecret"
     update_env "NEXT_PUBLIC_CMS_API_URL" "http://localhost:3001"
-    update_env "NEXT_PUBLIC_LMS_API_URL" "http://localhost:3002"
+    update_env "NEXT_PUBLIC_LMS_API_URL" "http://localhost:3003"
+    update_env "DEFAULT_ORG_NAME" "OpenCCB"
+    update_env "DEFAULT_PLATFORM_NAME" "OpenCCB Learning"
+    update_env "DEFAULT_LOGO_URL" ""
+    update_env "DEFAULT_FAVICON_URL" ""
+    update_env "DEFAULT_PRIMARY_COLOR" "#3B82F6"
+    update_env "DEFAULT_SECONDARY_COLOR" "#8B5CF6"
 fi
 
 # 5. Configuración de Pila de IA (Omitido - usando remoto)

services/cms-service/src/main.rs

@@ -39,6 +39,9 @@ async fn main() {
         .await
         .expect("Failed to run migrations");
 
+    // Sync default organization branding from environment
+    sync_default_organization(&pool).await;
+
     // Start AI Background Worker
     let worker_pool = pool.clone();
     tokio::spawn(async move {
@@ -306,3 +309,41 @@ async fn main() {
     let listener = tokio::net::TcpListener::bind(addr).await.unwrap();
     axum::serve(listener, public_routes).await.unwrap();
 }
+
+async fn sync_default_organization(pool: &sqlx::PgPool) {
+    let org_id = sqlx::types::Uuid::parse_str("00000000-0000-0000-0000-000000000001").unwrap();
+    
+    let name = env::var("DEFAULT_ORG_NAME").unwrap_or_else(|_| "OpenCCB".to_string());
+    let platform_name = env::var("DEFAULT_PLATFORM_NAME").ok().filter(|s| !s.is_empty());
+    let logo_url = env::var("DEFAULT_LOGO_URL").ok().filter(|s| !s.is_empty());
+    let favicon_url = env::var("DEFAULT_FAVICON_URL").ok().filter(|s| !s.is_empty());
+    let primary_color = env::var("DEFAULT_PRIMARY_COLOR").ok().filter(|s| !s.is_empty());
+    let secondary_color = env::var("DEFAULT_SECONDARY_COLOR").ok().filter(|s| !s.is_empty());
+
+    let result = sqlx::query(
+        "UPDATE organizations 
+         SET name = $1, 
+             platform_name = COALESCE($2, platform_name),
+             logo_url = COALESCE($3, logo_url),
+             favicon_url = COALESCE($4, favicon_url),
+             primary_color = COALESCE($5, primary_color),
+             secondary_color = COALESCE($6, secondary_color),
+             updated_at = NOW()
+         WHERE id = $7"
+    )
+    .bind(name)
+    .bind(platform_name)
+    .bind(logo_url)
+    .bind(favicon_url)
+    .bind(primary_color)
+    .bind(secondary_color)
+    .bind(org_id)
+    .execute(pool)
+    .await;
+
+    match result {
+        Ok(_) => tracing::info!("Default organization branding synced from .env"),
+        Err(e) => tracing::error!("Failed to sync default organization branding: {}", e),
+    }
+}
+

web/experience/src/app/auth/login/page.tsx

@@ -4,11 +4,15 @@ import React, { useState } from "react";
 import { useRouter } from "next/navigation";
 import { lmsApi } from "@/lib/api";
 import { useAuth } from "@/context/AuthContext";
+import { useBranding } from "@/context/BrandingContext";
 import { GraduationCap, Lock, Mail, User, ChevronLeft } from "lucide-react";
 
 export default function ExperienceLoginPage() {
     const router = useRouter();
     const { login } = useAuth();
+    const { branding } = useBranding();
+
+    const platformName = branding?.platform_name || branding?.name || 'Academia';
 
     // State
     const [isLogin, setIsLogin] = useState(true);
@@ -58,7 +62,7 @@ export default function ExperienceLoginPage() {
                     <div className="inline-flex items-center justify-center w-16 h-16 bg-indigo-600 rounded-2xl mb-4 shadow-lg shadow-indigo-600/30">
                         <GraduationCap className="w-8 h-8 text-white" />
                     </div>
-                    <h1 className="text-3xl font-black text-slate-900 dark:text-white mb-2 tracking-tight">Experiencia OpenCCB</h1>
+                    <h1 className="text-3xl font-black text-slate-900 dark:text-white mb-2 tracking-tight">Experiencia {platformName}</h1>
                     <p className="text-indigo-600 dark:text-indigo-200/60 font-medium">Portal de Aprendizaje para Estudiantes</p>
                 </div>
 

web/experience/src/app/layout.tsx

@@ -11,8 +11,8 @@ import { ThemeProvider } from "@/context/ThemeContext";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "OpenCCB | Experiencia de Aprendizaje",
+  title: "Experiencia de Aprendizaje",
-  description: "Consume contenido educativo de alta fidelidad con OpenCCB",
+  description: "Consume contenido educativo de alta fidelidad.",
 };
 
 import AppHeader from "@/components/AppHeader";
@@ -36,7 +36,7 @@ export default function RootLayout({
                   </main>
                   <footer className="py-12 px-6 border-t border-black/5 dark:border-white/5 text-center bg-gray-50 dark:bg-black/20">
                     <p className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 dark:text-gray-600">
-                      Desarrollado Por el Departamento de Informática © 2026. OpenCCB.
+                      © 2026. Todos los derechos reservados.
                     </p>
                   </footer>
                 </AuthGuard>

web/experience/src/components/AppHeader.tsx

@@ -20,7 +20,7 @@ export default function AppHeader() {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
 
     // Use platform_name if available, otherwise name, otherwise default
-    const platformName = branding?.platform_name || branding?.name || 'OpenCCB';
+    const platformName = branding?.platform_name || branding?.name || 'Academia';
 
     return (
         <header className="h-16 glass sticky top-0 z-[100] px-4 md:px-6 flex items-center justify-between backdrop-blur-xl bg-gray-50/70 dark:bg-black/40 border-b border-black/5 dark:border-white/5">

web/experience/src/lib/api.ts

@@ -452,9 +452,10 @@ const getToken = () => {
 const apiFetch = async (url: string, options: RequestInit = {}, isCMS: boolean = false) => {
     const token = getToken();
     const baseUrl = isCMS ? getCmsApiUrl() : getLmsApiUrl();
-    const headers = {
+    const isFormData = options.body instanceof FormData;
-        'Content-Type': 'application/json',
+    const headers: Record<string, string> = {
-        ...options.headers,
+        ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
+        ...Object.fromEntries(Object.entries(options.headers || {}).map(([k, v]) => [k, String(v)])),
         ...(token ? { 'Authorization': `Bearer ${token}` } : {})
     };
 

web/studio/src/app/auth/login/page.tsx

@@ -4,12 +4,17 @@ import React, { useState } from "react";
 import { useRouter } from "next/navigation";
 import { cmsApi } from "@/lib/api";
 import { useAuth } from "@/context/AuthContext";
-import AsyncCombobox from "@/components/AsyncCombobox";
+import { useBranding } from "@/context/BrandingContext";
-import { BookOpen, Lock, Mail, User, Building2 } from "lucide-react";
+import { BookOpen, Lock, Mail, User } from "lucide-react";
+
+const DEFAULT_ORG_ID = "00000000-0000-0000-0000-000000000001";
 
 export default function StudioLoginPage() {
     const router = useRouter();
     const { login } = useAuth();
+    const { branding } = useBranding();
+
+    const platformName = branding?.platform_name || branding?.name || 'Academia';
     const [isLogin, setIsLogin] = useState(true);
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
@@ -18,7 +23,6 @@ export default function StudioLoginPage() {
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState("");
     const [ssoMode, setSSOMode] = useState(false);
-    const [orgIdForSSO, setOrgIdForSSO] = useState("");
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
@@ -65,7 +69,7 @@ export default function StudioLoginPage() {
                     <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-600 rounded-2xl mb-4 shadow-lg shadow-blue-600/30">
                         <BookOpen className="w-8 h-8 text-white" />
                     </div>
-                    <h1 className="text-3xl font-black text-gray-900 dark:text-white mb-2 tracking-tight">OpenCCB Studio</h1>
+                    <h1 className="text-3xl font-black text-gray-900 dark:text-white mb-2 tracking-tight">{platformName} Studio</h1>
                     <p className="text-gray-500 dark:text-gray-400 font-medium">Instructor & Administrator Portal</p>
                 </div>
 
@@ -115,13 +119,12 @@ export default function StudioLoginPage() {
                                                 Organization Name (Optional)
                                             </label>
                                             <div className="relative">
-                                                <Building2 className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" />
                                                 <input
                                                     type="text"
                                                     value={organizationName}
                                                     onChange={(e) => setOrganizationName(e.target.value)}
-                                                    className="w-full bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl py-3 pl-11 pr-4 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
+                                                    className="w-full bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl py-3 px-4 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
-                                                    placeholder="Your School or Company"
+                                                    placeholder="Tu Escuela o Empresa"
                                                     autoComplete="organization"
                                                 />
                                             </div>
@@ -169,25 +172,9 @@ export default function StudioLoginPage() {
                                 </div>
                             </>
                         ) : (
-                            <div className="z-50 relative">
+                            <div className="z-50 relative py-8 text-center">
-                                <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">
+                                <p className="text-gray-600 dark:text-gray-400 mb-4">
-                                    Organization ID
+                                    Continue to sign in via your enterprise Single Sign-On provider.
-                                </label>
-                                <div className="text-gray-900 dark:text-white">
-                                    <AsyncCombobox
-                                        id="orgIdForSSO"
-                                        value={orgIdForSSO}
-                                        onChange={setOrgIdForSSO}
-                                        onSearch={async (q) => {
-                                            const res = await cmsApi.searchOrganizations(q);
-                                            return res.map(o => ({ id: o.id, name: o.name }));
-                                        }}
-                                        placeholder="Search for your organization..."
-                                        leftIcon={<Building2 size={20} />}
-                                    />
-                                </div>
-                                <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 pl-1">
-                                    Please search and select your organization to continue.
                                 </p>
                             </div>
                         )}
@@ -204,11 +191,7 @@ export default function StudioLoginPage() {
                             onClick={(e) => {
                                 if (ssoMode) {
                                     e.preventDefault();
-                                    if (!orgIdForSSO) {
+                                    cmsApi.initSSOLogin(DEFAULT_ORG_ID);
-                                        setError("Organization ID is required");
-                                        return;
-                                    }
-                                    cmsApi.initSSOLogin(orgIdForSSO);
                                 }
                             }}
                             className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-md"
@@ -248,7 +231,7 @@ export default function StudioLoginPage() {
                 </div>
 
                 <p className="text-center text-xs text-gray-500 dark:text-gray-500 mt-6">
-                    OpenCCB Studio - Instructor & Administrator Portal
+                    {platformName} Studio - Portal de Instructores y Administradores
                 </p>
             </div>
         </div>

web/studio/src/app/layout.tsx

@@ -12,12 +12,11 @@ import { ThemeProvider } from "@/context/ThemeContext";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "OpenCCB | Studio",
+  title: "Studio",
-  description: "Create and manage high-fidelity educational content.",
+  description: "Crea y gestiona contenido educativo de alta fidelidad.",
 };
 
 import { Navbar } from "@/components/Navbar";
-import BrandingManager from "@/components/BrandingManager";
 
 export default function RootLayout({
   children,
@@ -25,14 +24,13 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="es">
       <body className={`${inter.className} min-h-screen flex flex-col transition-colors duration-300`}>
         <ThemeProvider>
           <AuthProvider>
             <I18nProvider>
               <BrandingProvider>
                 <AuthGuard>
-                  <BrandingManager />
                   <Navbar />
                   <main className="flex-1 mt-16 md:mt-20">{children}</main>
                 </AuthGuard>

web/studio/src/components/Navbar.tsx

@@ -21,7 +21,7 @@ export function Navbar() {
     const { branding } = useBranding();
     const { theme, toggleTheme } = useTheme();
 
-    const platformName = branding?.platform_name || 'OpenCCB';
+    const platformName = branding?.platform_name || branding?.name || 'Studio';
 
     return (
         <nav className="fixed top-0 w-full z-50 glass border-b border-black/5 dark:border-white/10 bg-gray-50/70 dark:bg-black/40 backdrop-blur-xl">

web/studio/src/lib/api.ts

@@ -594,9 +594,10 @@ const apiFetch = (url: string, options: RequestInit = {}, isLms: boolean = false
     const token = getToken();
     const selectedOrgId = getSelectedOrgId();
     const baseUrl = isLms ? LMS_API_BASE_URL : API_BASE_URL;
-    const headers = {
+    const isFormData = options.body instanceof FormData;
-        'Content-Type': 'application/json',
+    const headers: Record<string, string> = {
-        ...options.headers,
+        ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
+        ...Object.fromEntries(Object.entries(options.headers || {}).map(([k, v]) => [k, String(v)])),
         ...(token ? { 'Authorization': `Bearer ${token}` } : {}),
         ...(selectedOrgId ? { 'X-Organization-Id': selectedOrgId } : {})
     };