/* ====================================================
   HOTEL MANAGER — Instalador CSS
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:     #e8b84b;
  --gold-d:   #c4973a;
  --green:    #22c55e;
  --red:      #ef4444;
  --blue:     #3b82f6;
  --bg:       #08090d;
  --surface:  #111318;
  --surface2: #1a1d28;
  --border:   #252830;
  --text1:    #f1f3f8;
  --text2:    #c8cdd9;
  --text3:    #8b92a6;
  --text4:    #444959;
  --radius:   12px;
  --shadow:   0 20px 60px rgba(0,0,0,.7);
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text1);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background-image:
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(196,151,58,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 90%, rgba(59,130,246,.05) 0%, transparent 60%);
}

/* ─── Wrapper ──────────────────────────────────── */
.installer-wrap {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ─── Logo ─────────────────────────────────────── */
.installer-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}

.logo-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, #e8b84b, #c4973a);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 30px rgba(196,151,58,.3);
}
.logo-icon svg { width: 26px; height: 26px; color: #0a0710; }

.logo-brand { font-size: 1.4rem; font-weight: 800; color: var(--text1); }
.logo-ver   { font-size: .75rem; color: var(--gold-d); text-transform: uppercase; letter-spacing: .1em; }

/* ─── Stepper ───────────────────────────────────── */
.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.step-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .875rem;
  transition: all .3s ease;
}

.step.active .step-circle  { background: linear-gradient(135deg,#e8b84b,#c4973a); color: #0a0710; box-shadow: 0 0 16px rgba(196,151,58,.4); }
.step.done   .step-circle  { background: rgba(34,197,94,.2); color: #4ade80; border: 2px solid rgba(34,197,94,.4); }
.step.pending .step-circle { background: var(--surface2); color: var(--text4); border: 2px solid var(--border); }
.step.done   .step-circle svg { width: 16px; height: 16px; }

.step-label { font-size: .75rem; color: var(--text3); white-space: nowrap; }
.step.active .step-label { color: var(--gold); font-weight: 600; }
.step.done   .step-label { color: var(--green); }

.step-divider {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 4px;
  margin-bottom: 22px;
  border-radius: 2px;
  transition: background .3s;
  min-width: 20px;
}
.step-divider.done { background: rgba(34,197,94,.4); }

/* ─── Card ──────────────────────────────────────── */
.installer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: var(--shadow);
}

.step-content h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text1);
}

.step-content > p {
  color: var(--text3);
  margin-bottom: 1.5rem;
  font-size: .9375rem;
}

/* ─── Requirements ──────────────────────────────── */
.req-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.5rem; }

.req-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .9rem;
}

.req-item.ok   { background: rgba(34,197,94,.07);  border: 1px solid rgba(34,197,94,.2); }
.req-item.fail { background: rgba(239,68,68,.07);  border: 1px solid rgba(239,68,68,.2); }

.req-icon { display: flex; align-items: center; justify-content: center; }
.req-item.ok   .req-icon { color: var(--green); }
.req-item.fail .req-icon { color: var(--red); }

.req-label { color: var(--text2); }
.req-val   { font-size: .8rem; color: var(--text3); font-family: monospace; }

/* ─── Form ──────────────────────────────────────── */
.install-form { display: flex; flex-direction: column; gap: 1.2rem; }

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-group label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.field-group input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text1);
  font-size: .9375rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.field-group input:focus {
  border-color: var(--gold-d);
  box-shadow: 0 0 0 3px rgba(196,151,58,.12);
}

.field-group small { font-size: .78rem; color: var(--text4); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ─── Password strength ─────────────────────────── */
.pass-strength {
  height: 4px;
  border-radius: 4px;
  background: var(--border);
  transition: all .3s;
  margin-top: -8px;
}
.pass-strength.weak   { background: var(--red); width: 33%; }
.pass-strength.medium { background: var(--gold); width: 66%; }
.pass-strength.strong { background: var(--green); width: 100%; }

/* ─── Alert inline ──────────────────────────────── */
.alert-install {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: .875rem;
  margin-top: 8px;
}
.alert-install.error   { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.3);  color: #f87171; }
.alert-install.success { background: rgba(34,197,94,.1);  border: 1px solid rgba(34,197,94,.3);  color: #4ade80; }
.alert-install.warning { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); color: #fde68a; }

/* ─── Actions ───────────────────────────────────── */
.step-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.btn-install {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 10px;
  font-size: .875rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: all .2s ease;
  font-family: 'Inter', sans-serif;
}

.btn-install-primary {
  background: linear-gradient(135deg, #e8b84b, #c4973a);
  color: #0a0710;
  box-shadow: 0 0 20px rgba(196,151,58,.25);
}
.btn-install-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 30px rgba(196,151,58,.4);
  transform: translateY(-1px);
}
.btn-install-primary:disabled {
  opacity: .4; cursor: not-allowed; transform: none;
}

.btn-install-secondary {
  background: var(--surface2); color: var(--text2);
  border-color: var(--border);
}
.btn-install-secondary:hover {
  background: var(--surface); color: var(--text1);
}

.btn-install-outline {
  background: transparent; color: var(--text2);
  border-color: var(--border);
}
.btn-install-outline:hover {
  border-color: var(--gold-d); color: var(--gold);
}

.btn-install-danger {
  background: rgba(239,68,68,.15);
  color: #f87171;
  border-color: rgba(239,68,68,.3);
}
.btn-install-danger:hover {
  background: rgba(239,68,68,.25);
  border-color: rgba(239,68,68,.5);
  color: #fca5a5;
}

/* ─── Progress ──────────────────────────────────── */
.install-hero {
  text-align: center;
  padding: 1rem 0 1.5rem;
}

.install-icon-wrap {
  width: 72px; height: 72px;
  margin: 0 auto 1.25rem;
  position: relative;
}

.install-spinner {
  width: 72px; height: 72px;
  border: 4px solid var(--surface2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.install-done-icon {
  width: 72px; height: 72px;
  background: rgba(34,197,94,.15);
  border: 2px solid rgba(34,197,94,.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.install-done-icon svg { width: 36px; height: 36px; color: var(--green); }

.progress-bar-wrap {
  height: 6px;
  background: var(--surface2);
  border-radius: 6px;
  overflow: hidden;
  margin: 1.5rem 0 1rem;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #c4973a, #e8b84b);
  border-radius: 6px;
  transition: width .6s ease;
}

.progress-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prog-step {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .875rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text3);
  transition: all .3s;
}

.prog-step.running { color: var(--gold); border-color: rgba(196,151,58,.3); }
.prog-step.done    { color: var(--green); border-color: rgba(34,197,94,.2); background: rgba(34,197,94,.05); }
.prog-step.error   { color: var(--red);   border-color: rgba(239,68,68,.2); background: rgba(239,68,68,.05); }

/* ─── Spinner inline ────────────────────────────── */
.spinner-sm {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--text1);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: inline-block;
}

@media (max-width: 480px) {
  .installer-card { padding: 1.5rem; }
  .form-row { grid-template-columns: 1fr; }
  .step-label { display: none; }
}