🎨 Palette: Improve loading feedback and accessibility for AI consultation

.jules/palette.md

@@ -0,0 +1,3 @@
+## 2025-05-22 - AI Consultation UX & A11y
+**Learning:** In a luxury-themed, Spanish-first interface, inconsistent English text and missing visual feedback during long-running AI operations (1.5s+) break immersion and reduce trust. Also, interactive form elements like the staff password input were missing descriptive `aria-label`s.
+**Action:** Always ensure that loading states use the same primary language as the rest of the section and provide a clear visual indicator (like a spinner) even if the delay is simulated. Use `aria-busy="true"` on submitting buttons to notify screen reader users of the ongoing process. Always check for missing labels on hidden or secondary form inputs like password modals.

index.html

@@ -78,7 +78,7 @@ <h2 style="text-align: center; margin-bottom: 4rem;">P.A.U. Divineo AI</h2>
                                 <option value="Casual">Casual</option>
                             </select>
                         </div>
-                        <button type="submit" class="cta-button" style="margin-top: 1rem;">Preguntar a P.A.U.</button>
+                        <button type="submit" class="cta-button" style="margin-top: 1rem;">PREGUNTAR A P.A.U.</button>
                     </form>
                     <div id="jules-result" class="jules-result" style="display:none; margin-top: 4rem; padding: 2.5rem;" aria-live="polite">
                         <h3 style="margin-top: 0; color: #C5A46D; margin-bottom: 1.5rem;">Análisis de P.A.U.:</h3>
@@ -123,7 +123,7 @@ <h3>Catálogo Shopify</h3>
             <div class="modal-content" style="background:#141619; border:1px solid #C5A46D; padding:3rem; max-width:500px; text-align:center;">
                 <h3 style="color:#C5A46D; margin-bottom:1.5rem;">PASE PRIVADO SOLICITADO</h3>
                 <p style="color:#F5EFE6; opacity:0.7; margin-bottom:2rem;">Contenido restringido para Curadores del Búnker. Por favor, introduce tu credencial de acceso.</p>
-                <input type="password" id="private-pass-input" placeholder="Credential ID" style="width:100%; padding:1rem; background:#0d0e10; border:1px solid rgba(255,255,255,0.1); color:#F5EFE6; margin-bottom:2rem;">
+                <input type="password" id="private-pass-input" placeholder="ID de Credencial" aria-label="Contraseña de Staff" style="width:100%; padding:1rem; background:#0d0e10; border:1px solid rgba(255,255,255,0.1); color:#F5EFE6; margin-bottom:2rem;">
                 <div style="display:flex; gap:1rem; justify-content:center;">
                     <button class="cta-button" onclick="verifyPrivatePass()" style="padding:10px 20px; font-size:0.8rem;">ACCEDER</button>
                     <button class="cta-button" onclick="closePrivatePass()" style="padding:10px 20px; font-size:0.8rem; background:transparent; border:1px solid #C5A46D; color:#C5A46D;">CERRAR</button>

js/main.js

@@ -116,15 +116,17 @@ class TryOnYouBunker {
         const submitBtn = event.target.querySelector('button[type="submit"]');
 
         try {
-            submitBtn.innerHTML = '<span class="loader"></span> EXECUTING DIVINEO TOTALITY...';
+            submitBtn.innerHTML = '<span class="loader"></span> EJECUTANDO DIVINEO...';
             submitBtn.disabled = true;
+            submitBtn.setAttribute('aria-busy', 'true');
 
             // 1. Handshake de Seguridad (Simulado para el frontend)
             const userId = "LAFAYETTE_LEAD_USER";
             const ts = Math.floor(Date.now() / 1000);
             const token = `${ts}.SIMULATED_SIG`; // En prod se generaría con HMAC
 
-            // 2. Análisis Biométrico
+            // 2. Análisis Biométrico (Simulado con retraso para UX)
+            await new Promise(resolve => setTimeout(resolve, 1500));
             const biometricData = await this.biometricAnalyzer.analyzePose(null);
             const userWaist = biometricData.measurements.waist;
 
@@ -155,8 +157,9 @@ class TryOnYouBunker {
         } catch (error) {
             this.showNotification('Bunker Offline', 'error');
         } finally {
-            submitBtn.textContent = 'ASK PAU / DIVINEO';
+            submitBtn.textContent = 'PREGUNTAR A P.A.U.';
             submitBtn.disabled = false;
+            submitBtn.removeAttribute('aria-busy');
         }
     }
 

styles/main.css

@@ -376,6 +376,25 @@ body {
 .notification-success { border-left: 5px solid #4CAF50; }
 .notification-error { border-left: 5px solid #f44336; }
 
+/* Loading Spinner */
+.loader {
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--bg-dark);
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+    margin-right: 10px;
+    vertical-align: middle;
+}
+
+@keyframes rotation {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 /* Accessibility: Focus States */
 :focus-visible {
     outline: 2px solid var(--accent-gold);