:root {
  --accent: #4c8ef0;
  --violet: #a78bf6;
  color-scheme: dark;
}

body {
  background-color: #0b0f17;
}

a { color: var(--accent); }
a:hover { color: #78aaf5; }

/* ---- Header / nav ---- */
.app-header { background-color: #10151f; border-bottom: 1px solid rgba(255,255,255,0.08); }
.app-header .nav-link {
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.app-header .nav-link:hover { background-color: rgba(255,255,255,0.06); }
.app-header .nav-link.active { color: var(--accent); background-color: rgba(76,142,240,0.12); }

.user-avatar {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background-color: rgba(76,142,240,0.25);
  color: #dbe7fb;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 600;
}

/* ---- Cards / stat tiles ---- */
.stat-card {
  background-color: #10151f;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}
.stat-card .stat-value { font-size: 1.5rem; font-weight: 800; }
.stat-card .stat-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #8b98ac;
}

.card, .modal-content { background-color: #10151f; border: 1px solid rgba(255,255,255,0.08); }
.table { --bs-table-bg: transparent; }

/* ---- Badges de tipo (cobros) ---- */
.text-bg-purple { background-color: rgba(167,139,246,0.18) !important; color: var(--violet) !important; }

/* ---- License key monospace ---- */
.license-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.app-icon-btn {
  width: 3rem; height: 3rem; border-radius: 0.75rem;
  background-color: rgba(76,142,240,0.12);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}

.icon-picker input[type="radio"] { display: none; }
.icon-picker label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; font-size: 1.2rem;
  border: 1px solid rgba(255,255,255,0.12); cursor: pointer;
}
.icon-picker input[type="radio"]:checked + label {
  border-color: var(--accent); background-color: rgba(76,142,240,0.15);
}

.step-indicator .step {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #8b98ac;
}
.step-indicator .step.active { color: var(--accent); font-weight: 600; }
.step-indicator .step.done { color: #3fb950; }