From 4b9565f15a4c48be6e96e768fe4957da58e23655 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 24 Mar 2026 05:50:21 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?=
 =?UTF-8?q?-=20Enhanced=20feedback=20and=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added .loader CSS class to provide visual feedback during consultation.
- Improved accessibility in index.html with aria-live, aria-label, and dialog roles.
- Ensured ARIA labels match the primary language of the associated elements.
- Fixed modal accessibility with role="dialog" and aria-modal="true".

Co-authored-by: LVT-ENG <214667862+LVT-ENG@users.noreply.github.com>
---
 index.html      | 10 +++++-----
 styles/main.css | 23 +++++++++++++++++++++++
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index a488a43..8c75123 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@ <h1>TRYONYOU</h1>
                 <li><a href="#features">Experiencia</a></li>
                 <li><a href="#try-on">Búnker</a></li>
                 <li><a href="#consultation">P.A.U.</a></li>
-                <li><a href="javascript:void(0)" onclick="requestPrivatePass()">Staff Access</a></li>
+                <li><a href="javascript:void(0)" onclick="requestPrivatePass()" aria-label="Acceso para el personal">Staff Access</a></li>
             </ul>
         </nav>
     </header>
@@ -80,7 +80,7 @@ <h2 style="text-align: center; margin-bottom: 4rem;">P.A.U. Divineo AI</h2>
                         </div>
                         <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;">
+                    <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>
                         <p id="recommendation-text" style="white-space: pre-wrap; line-height: 1.8; font-weight: 300;"></p>
                     </div>
@@ -99,7 +99,7 @@ <h2 style="margin-bottom: 1rem;">Divineo Studio</h2>
                             <p>VISTA DE CÁMARA</p>
                             <p style="font-weight: 300; opacity: 0.5;">Click para iniciar experiencia Divineo</p>
                         </div>
-                        <button class="camera-btn" onclick="toggleCamera()">Iniciar Escaneo Biométrico</button>
+                        <button class="camera-btn" onclick="toggleCamera()" aria-label="Iniciar escaneo corporal biométrico para prueba virtual">Iniciar Escaneo Biométrico</button>
                     </div>
                     <div class="product-selector">
                         <h3>Catálogo Shopify</h3>
@@ -119,9 +119,9 @@ <h3>Catálogo Shopify</h3>
         </section>
 
         <!-- Private Pass Modal -->
-        <div id="private-pass-modal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:2000; align-items:center; justify-content:center;">
+        <div id="private-pass-modal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:2000; align-items:center; justify-content:center;" role="dialog" aria-modal="true" aria-labelledby="modal-title">
             <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>
+                <h3 id="modal-title" 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;">
                 <div style="display:flex; gap:1rem; justify-content:center;">
diff --git a/styles/main.css b/styles/main.css
index e855bcd..a70fb4a 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -376,6 +376,29 @@ body {
 .notification-success { border-left: 5px solid #4CAF50; }
 .notification-error { border-left: 5px solid #f44336; }
 
+/* Loader */
+.loader {
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--bg-dark);
+    border-bottom-color: var(--accent-gold);
+    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);
+    }
+}
+
 /* Responsive */
 @media (max-width: 992px) {
     .try-on-interface {