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

- Added missing .loader CSS class for form submission feedback.
- Added aria-label to private pass input for screen readers.
- Implemented auto-focus for the private pass modal input.

Co-authored-by: LVT-ENG <214667862+LVT-ENG@users.noreply.github.com>
---
 .jules/palette.md |  0
 index.html        |  2 +-
 js/main.js        |  2 ++
 styles/main.css   | 18 ++++++++++++++++++
 4 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..e69de29
diff --git a/index.html b/index.html
index a488a43..723a4cd 100644
--- a/index.html
+++ b/index.html
@@ -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="Credential ID" aria-label="Introduce tu credencial de acceso" 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>
diff --git a/js/main.js b/js/main.js
index dcf1947..c18a902 100644
--- a/js/main.js
+++ b/js/main.js
@@ -225,6 +225,8 @@ class TryOnYouBunker {
     requestPrivatePass() {
         const modal = document.getElementById('private-pass-modal');
         modal.style.display = 'flex';
+        const input = document.getElementById('private-pass-input');
+        if (input) input.focus();
     }
 
     closePrivatePass() {
diff --git a/styles/main.css b/styles/main.css
index e855bcd..dc3b135 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -376,6 +376,24 @@ body {
 .notification-success { border-left: 5px solid #4CAF50; }
 .notification-error { border-left: 5px solid #f44336; }
 
+.loader {
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(20, 22, 25, 0.3);
+    border-bottom-color: var(--bg-dark);
+    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 {