added optional usser password

views/css/users.css

@@ -80,6 +80,20 @@
     box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
 }
 
+/* Badge de contraseña protegida */
+.user-card.has-password::after {
+    content: '🔒';
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 0.4rem 0.7rem;
+    border-radius: var(--radius-md);
+    font-size: 0.9rem;
+    z-index: 10;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
 .user-avatar {
     width: 100%;
     height: 100%;
@@ -116,7 +130,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    padding: 1rem 1.5rem; /* Reducido el padding */
+    padding: 1rem 1.5rem;
     background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
     transform: translateY(100%);
     transition: transform 0.3s ease;
@@ -135,12 +149,10 @@
     text-overflow: ellipsis;
 }
 
-/* OCULTAR: El estado "Available" completo */
 .user-status {
     display: none;
 }
 
-/* BOTÓN DE CONFIGURACIÓN EN LA TARJETA (NUEVO) */
 .user-config-btn {
     position: absolute;
     top: 10px;
@@ -193,10 +205,6 @@
     box-shadow: 0 10px 30px var(--color-primary-glow);
 }
 
-.btn-manage {
-    display: none; /* OCULTADO */
-}
-
 /* Modal Styles */
 .modal {
     display: none;
@@ -275,7 +283,8 @@
     color: var(--color-text-secondary);
 }
 
-.form-group input[type="text"] {
+.form-group input[type="text"],
+.form-group input[type="password"] {
     width: 100%;
     padding: 1rem;
     background: rgba(255, 255, 255, 0.05);
@@ -287,13 +296,44 @@
     transition: all 0.2s;
 }
 
-.form-group input[type="text"]:focus {
+.form-group input[type="text"]:focus,
+.form-group input[type="password"]:focus {
     background: rgba(255, 255, 255, 0.08);
     border-color: var(--color-primary);
     box-shadow: 0 0 15px var(--color-primary-glow);
     outline: none;
 }
 
+.password-toggle-wrapper {
+    position: relative;
+}
+
+.password-toggle-btn {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s;
+}
+
+.password-toggle-btn:hover {
+    color: white;
+}
+
+.optional-label {
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
+    font-weight: 400;
+}
+
 .avatar-upload-area {
     border: 2px dashed rgba(255, 255, 255, 0.1);
     border-radius: var(--radius-md);
@@ -398,6 +438,29 @@ input[type="file"] {
     color: white;
 }
 
+/* Estilos para modal de password */
+.password-modal-content {
+    padding: 1.5rem;
+}
+
+.password-info {
+    background: rgba(59, 130, 246, 0.1);
+    border: 1px solid rgba(59, 130, 246, 0.3);
+    border-radius: var(--radius-md);
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+    color: #3b82f6;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+}
+
+.password-info svg {
+    flex-shrink: 0;
+    margin-top: 0.1rem;
+}
+
 /* ESTILOS PARA MODAL DE ACCIONES INDIVIDUALES */
 .manage-actions-modal {
     display: flex;
@@ -430,6 +493,16 @@ input[type="file"] {
     background: rgba(59, 130, 246, 0.2);
 }
 
+.btn-action.password {
+    background: rgba(245, 158, 11, 0.1);
+    color: #f59e0b;
+    border-color: rgba(245, 158, 11, 0.3);
+}
+
+.btn-action.password:hover {
+    background: rgba(245, 158, 11, 0.2);
+}
+
 .btn-action.delete {
     background: rgba(239, 68, 68, 0.1);
     color: #ef4444;
@@ -459,7 +532,6 @@ input[type="file"] {
     background: rgba(255, 255, 255, 0.1);
     color: white;
 }
-/* FIN ESTILOS PARA MODAL DE ACCIONES INDIVIDUALES */
 
 .anilist-status {
     padding: 1.5rem;
@@ -557,9 +629,8 @@ input[type="file"] {
     margin-bottom: 2rem;
 }
 
-/* ESTILOS DEL TOAST DE NOTIFICACIÓN (NUEVO) */
-#userToastContainer { /* <-- ASEGÚRATE DE USAR ESTE ID */
-    position: fixed; /* <-- CRUCIAL: Mantiene el contenedor en su sitio al hacer scroll */
+#userToastContainer {
+    position: fixed;
     top: 20px;
     right: 20px;
     z-index: 2000;
@@ -569,7 +640,7 @@ input[type="file"] {
     pointer-events: none;
 }
 
- .wb-toast {
+.wb-toast {
     padding: 1rem 1.5rem;
     border-radius: var(--radius-md);
     font-weight: 600;
@@ -582,26 +653,25 @@ input[type="file"] {
     min-width: 250px;
 }
 
- .wb-toast.show {
+.wb-toast.show {
     opacity: 1;
     transform: translateX(0);
 }
 
- .wb-toast.success {
+.wb-toast.success {
     background: #22c55e;
     border: 1px solid rgba(34, 197, 94, 0.4);
 }
 
- .wb-toast.error {
+.wb-toast.error {
     background: #ef4444;
     border: 1px solid rgba(239, 68, 68, 0.4);
 }
 
- .wb-toast.info {
+.wb-toast.info {
     background: #3b82f6;
     border: 1px solid rgba(59, 130, 246, 0.4);
 }
-/* FIN ESTILOS TOAST */
 
 /* Animations */
 @keyframes fadeIn {
@@ -642,7 +712,6 @@ input[type="file"] {
     }
 }
 
-/* Loading State */
 .skeleton {
     background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
     background-size: 200% 100%;
@@ -662,7 +731,6 @@ input[type="file"] {
     }
 
     .users-grid {
-        /* Para móvil, volvemos a usar minmax para ocupar el espacio */
         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
         gap: 1.5rem;
     }