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

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

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

.user-create-dialog,
md-dialog.user-create-dialog {
  width: 820px !important;
  min-width: 820px !important;
  max-width: 820px !important;
  height: 78vh !important;
  min-height: 540px !important;
  max-height: 86vh !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px !important;
}

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

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

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

.uc-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;
}

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

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

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

.uc-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;
}

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

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

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

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

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

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

/* ── Barra de pestañas ── */
md-dialog.user-create-dialog .uc-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-create-dialog .uc-tabs-container md-tabs-canvas,
md-dialog.user-create-dialog .uc-tabs-container md-pagination-wrapper {
  background: white !important; height: 54px !important;
}

md-dialog.user-create-dialog .uc-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-create-dialog .uc-tabs-container md-tab-item .md-ripple-container {
  height: 54px !important;
}

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

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

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

/* ── Label con icono ── */
.uc-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;
}

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

/* ── Badge numérico ── */
.uc-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--uc-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) .uc-tab-badge { background: #c5c8d8; }

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

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

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

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

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

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

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

md-dialog.user-create-dialog .uc-card .uc-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(--uc-color) !important; text-transform: uppercase !important;
  letter-spacing: 0.6px !important; box-sizing: border-box !important;
}

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

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

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

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

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

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

.uc-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(--uc-ease); font-family: inherit;
}

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

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

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

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

.uc-error    { color: #e53e3e; }
.uc-success  { color: #2e7d32; }
.uc-checking { color: var(--uc-color); }

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

.uc-checking md-progress-circular { margin-right: 2px; }

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

.uc-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;
}

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

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

.uc-2fa-btn {
  flex-shrink: 0; background: var(--uc-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;
}

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

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

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

.uc-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;
}

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

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

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

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

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

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

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

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

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

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

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

.uc-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;
}

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

.uc-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(--uc-color); flex-shrink: 0;
}

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

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

.uc-add-role-btn {
  background: var(--uc-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(--uc-shadow-sm) !important;
}

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

.uc-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(--uc-color);
}

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

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

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

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

.uc-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;
}

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

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

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

.uc-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(--uc-ease) !important;
}

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

.uc-btn-create {
  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(--uc-gradient) !important; color: white !important;
  box-shadow: var(--uc-shadow-sm) !important; transition: var(--uc-ease) !important;
}

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

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

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

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

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

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

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

@media (max-width: 600px) {
  .uc-row      { grid-template-columns: 1fr; }
  .uc-tab-pane { padding: 16px; }
}