File size: 6,363 Bytes
5546f2c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 | /* ═══════════════════════════════════════════════════════════════
ADMIN USER MANAGEMENT - REFINED STANDARDIZATION
═══════════════════════════════════════════════════════════════ */
/* ─── Compact Universal Grid ─────────────────────────────────*/
.users-grid-universal {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
align-items: start;
}
/* ─── Standardized Admin Card ────────────────────────────────*/
.card-u-standard {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
transition: var(--transition);
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px var(--shadow-light);
height: 100%; /* Ensure uniform height in grid */
}
/* Unified Hover Style */
.card-u-standard::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
opacity: 0;
transition: opacity 0.3s ease;
}
.card-u-standard:hover {
border-color: var(--primary-color);
box-shadow: 0 10px 30px var(--shadow-light);
transform: translateY(-3px);
}
.card-u-standard:hover::before { opacity: 1; }
/* ─── "Internal Swap" Expansion ──────────────────────────────*/
.card-u-standard.expanded {
/* NO MORE grid-column: 1 / -1; */
border-color: var(--primary-color);
box-shadow: 0 8px 25px rgba(67, 97, 238, 0.15);
}
.card-u-standard.is-disabled { opacity: 0.7; }
/* ─── Components ─────────────────────────────────────────────*/
.card-u-header { display: flex; align-items: center; gap: 14px; }
.card-u-avatar {
width: 46px; height: 46px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; font-weight: 700; color: white; flex-shrink: 0;
}
/* Role Crystals */
.crystal-admin { background: radial-gradient(circle at 30% 30%, #ff4b2b, #8b0000); }
.crystal-agent { background: radial-gradient(circle at 30% 30%, #fdbb2d, #b8860b); }
.crystal-user { background: radial-gradient(circle at 30% 30%, #4facfe, #0061ff); }
.card-u-info { flex: 1; min-width: 0; }
.card-u-name { font-weight: 600; font-size: 1rem; color: var(--text-color); }
.card-u-phone { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }
.card-u-phone i { color: var(--primary-color); margin-right: 4px; }
.status-pill-u { font-weight: 700; font-size: 0.65rem; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; }
.status-pill-u.active { background: rgba(34,197,94,0.12); color: #16a34a; }
.status-pill-u.disabled { background: rgba(239,68,68,0.12); color: #ef4444; }
/* ─── Body Swap Logic ────────────────────────────────────────*/
.card-u-body-wrap {
min-height: 50px; /* Base altura para el meta strip */
position: relative;
overflow: hidden;
}
.card-u-meta, .card-u-expansion {
transition: all 0.3s ease;
}
/* Expansion Content (Standard Metallic Tools) */
.card-u-expansion {
display: flex;
flex-direction: column;
gap: 15px;
}
.u-tool-section h5 { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; }
.u-input-row { display: flex; gap: 8px; }
.u-input-premium {
flex: 1; padding: 10px; border-radius: 10px;
border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color); font-size: 0.85rem;
}
.btn-u-action {
flex: 1; padding: 10px; border-radius: 12px; font-weight: 700; font-size: 0.8rem;
border: 1px solid var(--border-color); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
transition: var(--transition);
}
.btn-u-action.primary { background: var(--primary-color); color: white; border: none; }
.btn-u-action.success { background: rgba(34,197,94,0.1); color: #16a34a; border-color: rgba(34,197,94,0.2); }
.btn-u-action.warning { background: rgba(245,158,11,0.1); color: #d97706; border-color: rgba(245,158,11,0.2); }
.btn-u-action.cancel { background: #1e293b; color: #cbd5e1; border: none; }
.btn-u-action.danger { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.card-u-actions { display: flex; gap: 10px; margin-top: auto; }
/* ═══════════════════════════════════════════════════════════════
FILTER TAB BUTTONS - Uses global CSS variables
═══════════════════════════════════════════════════════════════ */
.u-filter-tabs-metallic {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.u-tab-m {
padding: 10px 18px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--card-bg);
color: var(--text-muted);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
font-family: 'Outfit', sans-serif;
}
.u-tab-m:hover {
border-color: var(--primary-color);
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--shadow-light);
}
.u-tab-m.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}
/* Disabled button style for protected users */
.btn-u-action.disabled {
opacity: 0.6;
cursor: not-allowed;
background: rgba(100, 116, 139, 0.1);
color: var(--text-muted);
}
|