/* =====================================================
   USER EDIT DIALOG — user-edit-dialog.css
   Tabs: General · 2FA Device · Roles & Permissions · Trusted IPs & Domains
   Password/strength/reveal styles → biz-password-input.css
   ===================================================== */

/* ── Design Tokens ─────────────────────────────────── */
.user-edit-dialog {
  --ue-gradient:  linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --ue-color:     #667eea;
  --ue-shadow-sm: 0 2px 6px rgba(102, 126, 234, 0.2);
  --ue-shadow-md: 0 4px 14px rgba(102, 126, 234, 0.4);
  --ue-border:    1px solid #e0e0e0;
  --ue-radius:    10px;
  --ue-ease:      all 0.2s ease;
}

/* =====================================================
   DIALOG SHELL
   ===================================================== */

.user-edit-dialog,
md-dialog.user-edit-dialog {
  width: 920px !important;
  min-width: 920px !important;
  max-width: 920px !important;
  height: 82vh !important;
  min-height: 580px !important;
  max-height: 88vh !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px !important;
}

.user-edit-dialog *,
.user-edit-dialog *::before,
.user-edit-dialog *::after { box-sizing: border-box; }

/* =====================================================
   TOOLBAR
   ===================================================== */

.ue-toolbar {
  background: var(--ue-gradient) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-height: 72px !important;
  flex-shrink: 0 !important;
}

.ue-toolbar .md-toolbar-tools {
  padding: 0 20px !important;
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px;
}

.ue-toolbar .md-toolbar-tools > span[flex] { flex: 1 !important; }

.ue-toolbar .md-toolbar-tools h2,
.ue-toolbar-info h2 {
  text-align: left !important; margin: 0 !important;
  padding: 0 !important; flex: none !important; width: auto !important;
}

.ue-toolbar-subtitle { text-align: left !important; }

.ue-toolbar-icon-wrap {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.ue-toolbar-icon-wrap md-icon {
  color: white !important;
  font-size: 24px !important; width: 24px !important; height: 24px !important;
}

.ue-toolbar-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ue-toolbar-info h2 { font-size: 20px; font-weight: 600; color: white; margin: 0; line-height: 1.2; }
.ue-toolbar-subtitle { font-size: 12px; color: rgba(255, 255, 255, 0.78); font-weight: 400; }

.ue-close-btn         { margin: 0 !important; }
.ue-close-btn:hover   { background: rgba(255, 255, 255, 0.12) !important; }
.ue-close-btn md-icon { color: white !important; }

/* =====================================================
   IDENTITY BANNER
   ===================================================== */

.ue-identity-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; background: white;
  border-radius: var(--ue-radius);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  margin-bottom: 16px; border-left: 4px solid var(--ue-color);
}

.ue-identity-avatar {
  width: 52px; height: 52px; min-width: 52px; border-radius: 50%;
  background: var(--ue-gradient); color: white;
  font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; letter-spacing: 0.5px;
}

.ue-identity-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ue-identity-name  { font-size: 15px; font-weight: 700; color: #1a1a2e; line-height: 1.2; }
.ue-identity-email { font-size: 13px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ue-identity-id    { font-size: 11px; color: #aaa; font-family: 'Monaco', 'Courier New', monospace; margin-top: 1px; }

.ue-superuser-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  border-radius: 20px; font-size: 11px; font-weight: 700; color: #333; flex-shrink: 0;
}

.ue-superuser-badge md-icon {
  font-size: 14px !important; width: 14px !important; height: 14px !important; color: #333 !important;
}

/* =====================================================
   TABS CONTAINER
   ===================================================== */

.ue-tabs-container {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; background: #f5f6fa; min-height: 0;
}

md-dialog.user-edit-dialog .ue-tabs-container > md-tabs {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}

/* ── Barra de pestañas ── */
md-dialog.user-edit-dialog .ue-tabs-container md-tabs-wrapper {
  background: white !important;
  border-bottom: 2px solid #e8ecff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  flex-shrink: 0; padding: 0 4px !important; margin-top: 0 !important;
}

md-dialog.user-edit-dialog .ue-tabs-container md-tabs-canvas,
md-dialog.user-edit-dialog .ue-tabs-container md-pagination-wrapper {
  background: white !important; height: 54px !important;
}

md-dialog.user-edit-dialog .ue-tabs-container md-tab-item {
  font-size: 13px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.6px !important;
  color: #888 !important; min-width: 0 !important; padding: 0 22px !important;
  height: 54px !important; min-height: 54px !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; line-height: 54px !important;
}

md-dialog.user-edit-dialog .ue-tabs-container md-tab-item .md-ripple-container {
  height: 54px !important;
}

md-dialog.user-edit-dialog .ue-tabs-container md-tab-item > span {
  display: inline-flex !important; align-items: center !important;
  height: 54px !important; line-height: 1 !important;
}

md-dialog.user-edit-dialog .ue-tabs-container md-tab-item.md-active {
  color: var(--ue-color) !important;
}

md-dialog.user-edit-dialog .ue-tabs-container md-ink-bar {
  background: var(--ue-color) !important; height: 3px !important;
}

/* ── Label con icono ── */
.ue-tab-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.6px !important; line-height: 1;
}

.ue-tab-label md-icon {
  font-size: 18px !important; width: 18px !important; height: 18px !important;
  color: inherit !important; opacity: 0.9;
}

/* ── Badge numérico ── */
.ue-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--ue-color); color: white;
  border-radius: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: 0 !important; text-transform: none !important; line-height: 1;
}

md-tab-item:not(.md-active) .ue-tab-badge { background: #c5c8d8; }

/* ── Área de contenido ── */
md-dialog.user-edit-dialog .ue-tabs-container md-tabs-content-wrapper {
  flex: 1 !important; overflow: hidden !important; min-height: 0 !important;
}

md-dialog.user-edit-dialog .ue-tabs-container md-tab-content {
  height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important;
}

md-dialog.user-edit-dialog .ue-tabs-container md-tab-content > div { min-height: 100%; }

md-dialog.user-edit-dialog .ue-tabs-container md-tab-content::-webkit-scrollbar       { width: 6px; }
md-dialog.user-edit-dialog .ue-tabs-container md-tab-content::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 3px; }
md-dialog.user-edit-dialog .ue-tabs-container md-tab-content::-webkit-scrollbar-thumb { background: #c5bfe8; border-radius: 3px; }
md-dialog.user-edit-dialog .ue-tabs-container md-tab-content::-webkit-scrollbar-thumb:hover { background: #9e90d8; }

.ue-tab-pane { padding: 24px; display: flex; flex-direction: column; gap: 18px; }

/* =====================================================
   CARD
   ===================================================== */

.ue-card {
  background: white; border-radius: var(--ue-radius);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07); overflow: hidden;
}

md-dialog.user-edit-dialog .ue-card .ue-card-header {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: flex-start !important;
  text-align: left !important; width: 100% !important; gap: 10px !important;
  padding: 13px 22px !important;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-bottom: 2px solid #e8ecff;
  font-size: 13px !important; font-weight: 700 !important;
  color: var(--ue-color) !important; text-transform: uppercase !important;
  letter-spacing: 0.6px !important; box-sizing: border-box !important;
}

md-dialog.user-edit-dialog .ue-card .ue-card-header md-icon {
  font-size: 18px !important; width: 18px !important; height: 18px !important;
  color: var(--ue-color) !important; flex-shrink: 0 !important; margin: 0 !important;
}

md-dialog.user-edit-dialog .ue-card .ue-card-header span {
  flex: 0 0 auto !important; text-align: left !important; margin: 0 !important;
}

.ue-card-header > span[flex] { flex: 1 !important; }
.ue-card-body        { padding: 22px; }
.ue-card-body--flush { padding: 0; }

/* =====================================================
   FORM LAYOUT
   ===================================================== */

.ue-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.ue-row:last-child { margin-bottom: 0; }
.ue-field { display: flex; flex-direction: column; gap: 6px; }

.ue-label    { font-size: 12px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.4px; }
.ue-required { color: #e53e3e; margin-left: 2px; }
.ue-hint     { font-size: 12px; color: #999; margin: 0; line-height: 1.5; }

.ue-input {
  height: 42px; padding: 0 14px; font-size: 14px; color: #424242;
  border: 2px solid #e0e0e0; border-radius: 8px; background: white;
  width: 100%; outline: none; transition: var(--ue-ease); font-family: inherit;
}

.ue-input:focus {
  border-color: var(--ue-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.ue-input::placeholder { color: #bdbdbd; }

.ue-validation { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; }

.ue-error,
.ue-success { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; width: auto; }

.ue-error   { color: #e53e3e; }
.ue-success { color: #2e7d32; }

.ue-error md-icon,
.ue-success md-icon {
  font-size: 14px !important; width: 14px !important; height: 14px !important; color: inherit !important;
}

/* =====================================================
   TAB: 2FA DEVICE
   ===================================================== */

.ue-optional-tag {
  font-size: 10px; font-weight: 600; color: #a0a8c0;
  background: #f0f2f7; padding: 3px 9px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: 0.4px;
}

.ue-2fa-row { display: flex; align-items: center; gap: 12px; }

.ue-2fa-input-wrap { flex: 1; min-width: 0; }
.ue-2fa-input-wrap biz-phone-input { display: block; margin-bottom: 0 !important; }
.ue-2fa-action { flex-shrink: 0; display: flex; align-items: center; }

.ue-2fa-btn {
  flex-shrink: 0; background: var(--ue-gradient) !important;
  color: white !important; font-weight: 600 !important; font-size: 13px !important;
  border-radius: 8px !important; padding: 0 18px !important;
  min-height: 44px !important; margin: 0 !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35) !important;
  display: inline-flex !important; align-items: center;
  gap: 6px; white-space: nowrap; text-transform: none !important;
}

.ue-2fa-btn[disabled] {
  background: linear-gradient(135deg, #cbd5e0, #a0aec0) !important;
  color: #718096 !important; box-shadow: none !important; opacity: 0.6;
}

.ue-2fa-btn md-icon {
  font-size: 16px !important; width: 16px !important; height: 16px !important; color: white !important;
}

.ue-2fa-btn--revalidate {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
}

.ue-2fa-verified {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  background: rgba(16, 185, 129, 0.10); border: 1.5px solid rgba(16, 185, 129, 0.35);
  border-radius: 8px; color: #059669; font-size: 13px; font-weight: 600; white-space: nowrap;
}

.ue-2fa-verified md-icon {
  font-size: 17px !important; width: 17px !important; height: 17px !important; color: #059669 !important;
}

.ue-2fa-info-box {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  background: rgba(102, 126, 234, 0.06); border: 1.5px solid rgba(102, 126, 234, 0.18);
  border-radius: 8px;
}

.ue-2fa-info-box md-icon {
  font-size: 20px !important; width: 20px !important; height: 20px !important;
  color: var(--ue-color) !important; flex-shrink: 0; margin-top: 1px;
}

.ue-2fa-info-box-text { display: flex; flex-direction: column; gap: 2px; }
.ue-2fa-info-title    { font-size: 13px; font-weight: 600; color: #1a1a2e; }
.ue-2fa-info-sub      { font-size: 12px; color: #888; }

@media (max-width: 560px) {
  .ue-2fa-row    { flex-direction: column; align-items: stretch; }
  .ue-2fa-action { justify-content: flex-end; }
  .ue-2fa-btn    { width: 100% !important; justify-content: center !important; }
}

/* =====================================================
   TAB: ROLES & PERMISSIONS
   ===================================================== */

.ue-section--locked                      { pointer-events: none; }
.ue-section--locked .ue-card-body--flush { background: #fefce8; opacity: 0.82; }

.ue-section--locked .ue-card-header {
  background: linear-gradient(135deg, #fef9ec 0%, #fef3c7 100%) !important;
  border-bottom: 2px solid #fcd34d !important;
}

.ue-section--locked .ue-selected-role-item {
  background: transparent !important; border-bottom-color: #fef08a !important;
}

.ue-section--locked .ue-role-remove-btn { visibility: hidden; }

.ue-section--locked .ue-roles-counter {
  background: linear-gradient(135deg, rgba(251,191,36,.1) 0%, rgba(245,158,11,.1) 100%) !important;
  border-top-color: rgba(251, 191, 36, 0.3) !important; color: #b45309 !important;
}

.ue-section--locked .ue-roles-counter md-icon { color: #b45309 !important; }

.ue-section--locked .ue-add-role-btn {
  background: #e5e7eb !important; color: #9ca3af !important;
  box-shadow: none !important; cursor: not-allowed !important;
}

.ue-section--locked .ue-add-role-btn md-icon { color: #9ca3af !important; }

.ue-lock-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  border-radius: 20px; font-size: 10px; font-weight: 700; color: #333;
  text-transform: uppercase; letter-spacing: 0.3px; margin-left: 4px;
}

.ue-lock-badge md-icon {
  font-size: 12px !important; width: 12px !important; height: 12px !important; color: #333 !important;
}

.ue-roles-empty {
  display: flex; align-items: center; gap: 10px; padding: 24px; color: #9e9e9e; font-size: 14px;
}

.ue-roles-empty md-icon {
  font-size: 18px !important; width: 18px !important; height: 18px !important; color: #bdbdbd !important;
}

.ue-selected-role-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; border-bottom: 1px solid #f0f0f0; transition: background 0.12s ease;
}

.ue-selected-role-item:hover      { background: #fafbff; }
.ue-selected-role-item:last-child { border-bottom: none; }

.ue-role-icon-wrap {
  width: 38px; height: 38px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.ue-role-icon-wrap md-icon { font-size: 18px !important; width: 18px !important; height: 18px !important; }

.ue-role-icon-wrap--role               { background: rgba(102, 126, 234, 0.1); }
.ue-role-icon-wrap--role md-icon       { color: var(--ue-color) !important; }
.ue-role-icon-wrap--permission         { background: rgba(16, 185, 129, 0.1); }
.ue-role-icon-wrap--permission md-icon { color: #059669 !important; }

.ue-role-info     { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ue-role-name-row { display: flex; align-items: center; gap: 7px; }
.ue-role-name     { font-size: 14px; font-weight: 600; color: #1a1a2e; line-height: 1.2; }
.ue-role-desc     { font-size: 12px; color: #888; line-height: 1.3; }

.ue-role-type-badge {
  font-size: 9px; font-weight: 700; padding: 2px 7px;
  border-radius: 6px; text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0;
}

.ue-role-type-badge--role       { background: rgba(102, 126, 234, 0.12); color: var(--ue-color); }
.ue-role-type-badge--permission { background: rgba(16, 185, 129, 0.12);  color: #059669; }

.ue-role-perms-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border-radius: 12px; background: rgba(102, 126, 234, 0.08);
  border: 1px solid rgba(102, 126, 234, 0.2);
  font-size: 11px; font-weight: 600; color: var(--ue-color); flex-shrink: 0;
}

.ue-role-perms-badge md-icon {
  font-size: 12px !important; width: 12px !important; height: 12px !important; color: var(--ue-color) !important;
}

.ue-role-remove-btn md-icon       { font-size: 16px !important; width: 16px !important; height: 16px !important; color: #bdbdbd !important; }
.ue-role-remove-btn:hover md-icon { color: #e53e3e !important; }

.ue-add-role-btn {
  background: var(--ue-gradient) !important; color: white !important;
  border-radius: 6px !important; height: 32px !important; padding: 0 14px !important;
  font-size: 12px !important; font-weight: 600 !important; text-transform: none !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  margin: 0 !important; box-shadow: var(--ue-shadow-sm) !important;
}

.ue-add-role-btn md-icon {
  font-size: 15px !important; width: 15px !important; height: 15px !important; color: white !important;
}

.ue-roles-counter {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 11px 22px;
  background: linear-gradient(135deg, rgba(102,126,234,.08) 0%, rgba(118,75,162,.08) 100%);
  border-top: 1px solid rgba(102, 126, 234, 0.15);
  font-size: 12px; font-weight: 600; color: var(--ue-color);
}

.ue-roles-counter > * { flex: 0 0 auto !important; margin: 0 !important; }

.ue-roles-counter md-icon {
  font-size: 14px !important; width: 14px !important; height: 14px !important; color: var(--ue-color) !important;
}

.ue-counter-sep { color: rgba(102, 126, 234, 0.4); }

/* =====================================================
   TAB: TRUSTED IPs & DOMAINS
   ===================================================== */

.ue-ip-add-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 16px 22px; border-bottom: 1px solid #f0f0f0; background: #fafbff;
}

.ue-ip-add-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }

.ue-ip-add-field .ue-input {
  font-family: 'Monaco', 'Courier New', monospace; font-size: 13px; letter-spacing: 0.3px;
}

.ue-ip-add-btn {
  flex-shrink: 0; background: var(--ue-gradient) !important;
  color: white !important; border-radius: 8px !important;
  height: 42px !important; padding: 0 18px !important;
  font-size: 13px !important; font-weight: 600 !important; text-transform: none !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  margin: 0 !important; box-shadow: var(--ue-shadow-sm) !important; white-space: nowrap;
}

.ue-ip-add-btn[disabled] {
  background: linear-gradient(135deg, #cbd5e0, #a0aec0) !important;
  color: #718096 !important; box-shadow: none !important; opacity: 0.6;
}

.ue-ip-add-btn md-icon {
  font-size: 16px !important; width: 16px !important; height: 16px !important; color: white !important;
}

.ue-ip-add-btn md-progress-circular circle { stroke: white !important; }

.ue-ip-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 22px; border-bottom: 1px solid #f5f5f5; transition: background 0.15s ease;
}

.ue-ip-item:last-child { border-bottom: none; }
.ue-ip-item:hover      { background: #fafbff; }

.ue-ip-icon-wrap {
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(102, 126, 234, 0.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.ue-ip-icon-wrap md-icon {
  font-size: 18px !important; width: 18px !important; height: 18px !important; color: var(--ue-color) !important;
}

.ue-ip-geo-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.ue-ip-address {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 13px; font-weight: 600; color: #1a1a2e; letter-spacing: 0.4px; line-height: 1.2;
}

.ue-ip-geo-detail { color: #888; font-size: 12px; line-height: 1.3; }

.ue-ip-remove-btn md-icon       { font-size: 16px !important; width: 16px !important; height: 16px !important; color: #bdbdbd !important; }
.ue-ip-remove-btn:hover md-icon { color: #e53e3e !important; }

.ue-ip-empty {
  display: flex; align-items: center; gap: 10px;
  padding: 28px 22px; color: #9e9e9e; font-size: 14px;
}

.ue-ip-empty md-icon {
  font-size: 20px !important; width: 20px !important; height: 20px !important; color: #bdbdbd !important;
}

.ue-ip-counter {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 11px 22px;
  background: linear-gradient(135deg, rgba(102,126,234,.08) 0%, rgba(118,75,162,.08) 100%);
  border-top: 1px solid rgba(102, 126, 234, 0.15);
  font-size: 12px; font-weight: 600; color: var(--ue-color);
}

.ue-ip-counter > * { flex: 0 0 auto !important; margin: 0 !important; }

.ue-ip-counter md-icon {
  font-size: 14px !important; width: 14px !important; height: 14px !important; color: var(--ue-color) !important;
}

.ue-ip-inline-error {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; color: #e53e3e;
}

.ue-ip-inline-error md-icon {
  font-size: 14px !important; width: 14px !important; height: 14px !important; color: #e53e3e !important;
}

/* =====================================================
   FOOTER
   ===================================================== */

.ue-footer {
  background: white !important; border-top: 1px solid #e8e8e8 !important;
  padding: 14px 22px !important; min-height: 64px !important;
  display: flex !important; align-items: center !important;
  gap: 10px; flex-shrink: 0;
}

.ue-footer > span[flex] { flex: 1 !important; }

.ue-footer-hint { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #aaa; font-style: italic; }

.ue-footer-hint md-icon {
  font-size: 14px !important; width: 14px !important; height: 14px !important; color: #bbb !important;
}

.ue-btn-cancel {
  height: 40px !important; border-radius: 20px !important; padding: 0 20px !important;
  font-size: 13px !important; font-weight: 600 !important; text-transform: none !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  margin: 0 !important; background: white !important; color: #666 !important;
  border: 2px solid #e0e0e0 !important; box-shadow: none !important; transition: var(--ue-ease) !important;
}

.ue-btn-cancel md-icon { font-size: 16px !important; color: #888 !important; }
.ue-btn-cancel:hover   { border-color: #bdbdbd !important; background: #f5f5f5 !important; }

.ue-btn-save {
  height: 40px !important; border-radius: 20px !important; padding: 0 24px !important;
  font-size: 13px !important; font-weight: 600 !important; text-transform: none !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  margin: 0 !important; background: var(--ue-gradient) !important; color: white !important;
  box-shadow: var(--ue-shadow-sm) !important; transition: var(--ue-ease) !important;
}

.ue-btn-save md-icon                     { font-size: 16px !important; color: white !important; }
.ue-btn-save md-progress-circular circle { stroke: white !important; }

.ue-btn-save:not([disabled]):hover {
  box-shadow: var(--ue-shadow-md) !important; transform: translateY(-1px) !important;
}

.ue-btn-save[disabled] {
  opacity: 0.45 !important; background: #e0e0e0 !important; color: #9e9e9e !important;
  box-shadow: none !important; transform: none !important; cursor: not-allowed !important;
}

/* =====================================================
   ANIMATIONS
   ===================================================== */

@keyframes ueFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 960px) {
  .user-edit-dialog,
  md-dialog.user-edit-dialog {
    width: 96vw !important; min-width: unset !important;
    max-width: 96vw !important; height: 90vh !important;
  }
}

@media (max-width: 600px) {
  .ue-row      { grid-template-columns: 1fr; }
  .ue-tab-pane { padding: 16px; }
}
.ue-ip-add-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  align-items: flex-start;   /* ancla todos los hijos a la izquierda */
}

.ue-ip-inline-error {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  font-size: 12px;
  font-weight: 500;
  color: #e53e3e;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Matar todos los márgenes que AM inyecta en md-icon */
.ue-ip-inline-error md-icon,
.ue-ip-inline-error md-icon.material-icons {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  color: #e53e3e !important;
  flex-shrink: 0 !important;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.ue-ip-inline-error span {
  flex: 1;
  line-height: 1.4;
}

/* ── Add My IP button ── */
.ue-ip-local-btn {
  flex-shrink: 0;
  background: white !important;
  color: var(--ue-color) !important;
  border: 2px solid var(--ue-color) !important;
  border-radius: 8px !important;
  height: 42px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  white-space: nowrap;
  transition: var(--ue-ease) !important;
}

.ue-ip-local-btn:not([disabled]):hover {
  background: rgba(102, 126, 234, 0.06) !important;
  box-shadow: var(--ue-shadow-sm) !important;
}

.ue-ip-local-btn[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.ue-ip-local-btn md-icon {
  font-size: 16px !important; width: 16px !important; height: 16px !important;
  color: var(--ue-color) !important;
}

.ue-ip-local-btn md-progress-circular circle {
  stroke: var(--ue-color) !important;
}