✅ Frontend actualizado a v1.2.7

Cambios en esta versión:

Fix: Selección visual de modelos ahora se muestra inmediatamente al hacer click en un proveedor
Los modelos se muestran seleccionados en el formulario antes de guardar la configuración

frontend/src/App.jsx

@@ -680,7 +680,7 @@ function SettingsTab({ user }) {
           <div className="flex gap-4 mt-4">
             <button
               type="button"
-              onClick={() => setFormData({ ...formData, provider: 'openai' })}
+              onClick={() => setFormData({ ...formData, provider: 'openai', model_name: 'gpt-4o' })}
               className={`p-4 border-2 rounded-lg transition ${formData.provider === 'openai' ? 'border-indigo-500 bg-indigo-50' : 'border-gray-300 hover:border-gray-400'}`}
             >
               <div className="text-4xl mb-2">🤖</div>
@@ -695,7 +695,7 @@ function SettingsTab({ user }) {
             </button>
             <button
               type="button"
-              onClick={() => setFormData({ ...formData, provider: 'anthropic' })}
+              onClick={() => setFormData({ ...formData, provider: 'anthropic', model_name: 'claude-sonnet-4-5' })}
               className={`p-4 border-2 rounded-lg transition ${formData.provider === 'anthropic' ? 'border-purple-500 bg-purple-50' : 'border-gray-300 hover:border-gray-400'}`}
             >
               <div className="text-4xl mb-2">🧠</div>
@@ -710,7 +710,7 @@ function SettingsTab({ user }) {
             </button>
             <button
               type="button"
-              onClick={() => setFormData({ ...formData, provider: 'gemini' })}
+              onClick={() => setFormData({ ...formData, provider: 'gemini', model_name: 'gemini-2.5-pro' })}
               className={`p-4 border-2 rounded-lg transition ${formData.provider === 'gemini' ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'}`}
             >
               <div className="text-4xl mb-2">✨</div>
@@ -765,16 +765,17 @@ function SettingsTab({ user }) {
           ) : (
             <div className="space-y-3">
               {filteredModels.map((model) => {
-                // Solo marcar como checked si este proveedor está activo Y es el modelo activo
-                const isActiveModel = activeProvider === formData.provider && formData.model_name === model.id;
+                // Mostrar como seleccionado si coincide con formData.model_name
+                // (independientemente de si el proveedor está activo o no)
+                const isSelected = formData.model_name === model.id;
                 
                 return (
-                  <label key={model.id} className={`flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition ${isActiveModel ? 'border-indigo-500 bg-indigo-50' : 'border-gray-300 hover:border-gray-400'}`}>
+                  <label key={model.id} className={`flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition ${isSelected ? 'border-indigo-500 bg-indigo-50' : 'border-gray-300 hover:border-gray-400'}`}>
                     <input
                       type="radio"
                       name="model_name"
                       value={model.id}
-                      checked={isActiveModel}
+                      checked={isSelected}
                       onChange={() => setFormData({ ...formData, model_name: model.id })}
                       className="form-radio text-indigo-600"
                     />

frontend/src/Sidebar.jsx

@@ -153,7 +153,7 @@ export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, se
                 className="w-10 h-10 object-contain bg-white rounded p-1"
               />
               <p className="text-xs text-indigo-300 font-medium hover:text-indigo-200">
-                Ayutec v1.2.6
+                Ayutec v1.2.7
               </p>
             </a>
           </div>