finished optimizing css

views/css/users.css

@@ -1,29 +1,3 @@
-:root {
-    --bg-base: #09090b;
-    --bg-surface: #121215;
-    --bg-surface-hover: #1e1e22;
-    --accent: #8b5cf6;
-    --accent-glow: rgba(139, 92, 246, 0.4);
-    --text-primary: #ffffff;
-    --text-secondary: #a1a1aa;
-    --radius-md: 12px;
-    --radius-lg: 24px;
-}
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    background-color: var(--bg-base);
-    color: var(--text-primary);
-    font-family: 'Inter', system-ui, sans-serif;
-    overflow-x: hidden;
-    min-height: 100vh;
-}
-
 .page-wrapper {
     position: relative;
     min-height: 100vh;
@@ -52,7 +26,6 @@ body {
     z-index: 10;
     max-width: 1400px;
     width: 100%;
-    /* Añadido: Centra el contenido si la cuadrícula no llena el ancho */
     margin: 0 auto;
 }
 
@@ -74,19 +47,16 @@ body {
 
 .page-subtitle {
     font-size: 1.2rem;
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
     font-weight: 500;
 }
 
 .users-grid {
     display: grid;
-    /* Usar auto-fit con un ancho fijo para centrar elementos sueltos */
     grid-template-columns: repeat(auto-fit, 260px);
     gap: 2rem;
     margin-bottom: 3rem;
     animation: fadeInUp 0.8s ease;
-
-    /* Centrado de la cuadrícula en su contenedor */
     justify-content: center;
     max-width: 1200px;
     margin-left: auto;
@@ -100,13 +70,13 @@ body {
     border-radius: var(--radius-lg);
     overflow: hidden;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-    background: var(--bg-surface);
+    background: var(--color-bg-elevated);
     border: 2px solid rgba(255, 255, 255, 0.05);
 }
 
 .user-card:hover {
     transform: translateY(-12px) scale(1.02);
-    border-color: var(--accent);
+    border-color: var(--color-primary);
     box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
 }
 
@@ -195,7 +165,7 @@ body {
 }
 
 .user-config-btn:hover {
-    background: var(--accent);
+    background: var(--color-primary);
 }
 
 .btn-add-user {
@@ -208,9 +178,9 @@ body {
     margin: 0 auto 2rem;
     padding: 1.2rem 2rem;
     background: rgba(139, 92, 246, 0.1);
-    border: 2px dashed var(--accent);
+    border: 2px dashed var(--color-primary);
     border-radius: 999px;
-    color: var(--accent);
+    color: var(--color-primary);
     font-weight: 700;
     font-size: 1.1rem;
     cursor: pointer;
@@ -220,7 +190,7 @@ body {
 .btn-add-user:hover {
     background: rgba(139, 92, 246, 0.2);
     transform: scale(1.05);
-    box-shadow: 0 10px 30px var(--accent-glow);
+    box-shadow: 0 10px 30px var(--color-primary-glow);
 }
 
 .btn-manage {
@@ -252,7 +222,7 @@ body {
 .modal-content {
     position: relative;
     z-index: 10;
-    background: var(--bg-surface);
+    background: var(--color-bg-elevated);
     border-radius: var(--radius-lg);
     padding: 2rem;
     max-width: 500px;
@@ -282,7 +252,7 @@ body {
 .modal-close {
     background: transparent;
     border: none;
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
     cursor: pointer;
     padding: 0.5rem;
     border-radius: 8px;
@@ -302,7 +272,7 @@ body {
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 600;
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
 }
 
 .form-group input[type="text"] {
@@ -319,8 +289,8 @@ body {
 
 .form-group input[type="text"]:focus {
     background: rgba(255, 255, 255, 0.08);
-    border-color: var(--accent);
-    box-shadow: 0 0 15px var(--accent-glow);
+    border-color: var(--color-primary);
+    box-shadow: 0 0 15px var(--color-primary-glow);
     outline: none;
 }
 
@@ -335,12 +305,12 @@ body {
 }
 
 .avatar-upload-area:hover {
-    border-color: var(--accent);
+    border-color: var(--color-primary);
     background: rgba(139, 92, 246, 0.05);
 }
 
 .avatar-upload-area.dragover {
-    border-color: var(--accent);
+    border-color: var(--color-primary);
     background: rgba(139, 92, 246, 0.1);
 }
 
@@ -370,13 +340,13 @@ body {
 
 .avatar-upload-text {
     font-size: 0.9rem;
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
     margin-bottom: 0.5rem;
 }
 
 .avatar-upload-hint {
     font-size: 0.75rem;
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
     opacity: 0.7;
 }
 
@@ -403,7 +373,7 @@ input[type="file"] {
 }
 
 .btn-primary {
-    background: var(--accent);
+    background: var(--color-primary);
     color: white;
 }
 
@@ -419,7 +389,7 @@ input[type="file"] {
 
 .btn-secondary {
     background: rgba(255, 255, 255, 0.05);
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
@@ -482,7 +452,7 @@ input[type="file"] {
 
 .btn-action.cancel {
     background: rgba(255, 255, 255, 0.05);
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
 }
 
 .btn-action.cancel:hover {
@@ -526,7 +496,7 @@ input[type="file"] {
 
 .anilist-info p {
     font-size: 0.85rem;
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
 }
 
 .btn-disconnect {
@@ -583,7 +553,7 @@ input[type="file"] {
 
 .empty-text {
     font-size: 1.1rem;
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
     margin-bottom: 2rem;
 }