/* saas.css — páginas self-service del Setter (signup/login/precios/onboarding/admin).
   Mismos tokens que landing/styles.css (fondo casi negro, acento verde perlado).
   Autocontenido: sin CDNs, sin @import. */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }

:root{
  --font: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bg-page:   #0A0F0D;
  --bg-card:   #101713;
  --bg-hover:  rgba(255,255,255,.05);
  --border:    rgba(255,255,255,.10);
  --border-soft: rgba(255,255,255,.08);
  --radius:    16px;
  --text:      #E6F2EC;
  --text-dim:  rgba(230,242,236,.66);
  --text-mut:  rgba(230,242,236,.46);
  --primary:      #12B76A;
  --primary-hover:#0EA05C;
  --primary-soft: rgba(18,183,106,.16);
  --primary-tint: rgba(18,183,106,.08);
  --primary-text: #6CE9A6;
  --on-primary:   #06231A;
  --danger:       #F97066;
}

html, body{ margin:0; padding:0; }
body{
  background:var(--bg-page); color:var(--text); font-family:var(--font);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }

.topbar{
  display:flex; align-items:center; gap:10px; height:68px; padding:0 28px;
  border-bottom:1px solid var(--border-soft);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; }
.brand .mark{
  width:32px; height:32px; border-radius:9px;
  background:linear-gradient(135deg,#6CE9A6,#12B76A 55%,#0A8A4F);
  display:inline-flex; align-items:center; justify-content:center;
  color:#06231A; font-weight:800; font-size:15px;
}
.topbar .spacer{ flex:1; }
.topbar a.nav{ font-size:14px; font-weight:600; color:var(--text-dim); }
.topbar a.nav:hover{ color:var(--text); }

.shell{ max-width:440px; margin:9vh auto 60px; padding:0 22px; }
.shell.wide{ max-width:940px; }
.shell.medium{ max-width:640px; }

.card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:34px 32px; box-shadow:0 0 0 1px rgba(255,255,255,.02);
}
.card h1{ font-size:24px; font-weight:800; letter-spacing:-.4px; margin-bottom:6px; }
.card .sub{ color:var(--text-dim); font-size:14.5px; margin-bottom:26px; }

label{ display:block; font-size:13px; font-weight:700; color:var(--text-dim); margin:16px 0 6px; }
input[type=email], input[type=password], input[type=text]{
  width:100%; padding:12px 14px; font:inherit; color:var(--text);
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:10px;
  outline:none; transition:border-color .15s;
}
input:focus{ border-color:var(--primary); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  font:inherit; font-size:15px; font-weight:700; padding:13px 24px; margin-top:22px;
  border-radius:999px; border:1px solid transparent; cursor:pointer;
  background:var(--primary); color:var(--on-primary); transition:background .15s;
}
.btn:hover{ background:var(--primary-hover); }
.btn.secondary{ background:rgba(255,255,255,.04); color:var(--text); border-color:var(--border); }
.btn.secondary:hover{ background:var(--bg-hover); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn.inline{ width:auto; }

.error{ display:none; margin-top:14px; color:var(--danger); font-size:14px; }
.error.visible{ display:block; }
.hint{ margin-top:18px; text-align:center; color:var(--text-mut); font-size:13.5px; }
.hint a{ color:var(--primary-text); font-weight:700; }

/* ── precios ── */
.planes{ display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; margin-top:30px; }
.plan{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 28px; position:relative; display:flex; flex-direction:column;
}
.plan.destacado{ border-color:rgba(18,183,106,.45); box-shadow:0 0 50px -22px rgba(18,183,106,.45); }
.plan .badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--primary); color:var(--on-primary); font-size:12px; font-weight:800;
  padding:4px 14px; border-radius:999px; white-space:nowrap;
}
.plan h3{ font-size:18px; font-weight:800; }
.plan .precio{ font-size:40px; font-weight:800; letter-spacing:-1px; margin:14px 0 2px; }
.plan .precio small{ font-size:15px; font-weight:600; color:var(--text-mut); letter-spacing:0; }
.plan ul{ list-style:none; margin:18px 0 22px; padding:0; display:grid; gap:9px; flex:1; }
.plan li{ display:flex; gap:9px; align-items:flex-start; color:var(--text-dim); font-size:14.5px; }
.plan li::before{ content:"✓"; color:var(--primary-text); font-weight:800; }
.nota{ margin-top:22px; text-align:center; color:var(--text-mut); font-size:13.5px; }
.trial-line{ text-align:center; color:var(--primary-text); font-weight:700; font-size:14.5px; margin-top:16px; }

/* ── onboarding ── */
.paso{ display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--border-soft); }
.paso:last-child{ border-bottom:none; }
.paso .num{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  background:var(--primary-soft); color:var(--primary-text); font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}
.paso.hecho .num{ background:var(--primary); color:var(--on-primary); }
.paso h3{ font-size:16px; margin-bottom:4px; }
.paso p{ color:var(--text-dim); font-size:14px; }
.paso .cuerpo{ flex:1; }
.gate-aviso{
  margin-top:10px; padding:10px 14px; border-radius:10px; font-size:13.5px;
  background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text-mut);
}

/* ── admin ── */
table{ width:100%; border-collapse:collapse; margin-top:20px; font-size:14px; }
th{ text-align:left; color:var(--text-mut); font-size:12px; text-transform:uppercase;
    letter-spacing:.5px; padding:8px 10px; border-bottom:1px solid var(--border); }
td{ padding:10px; border-bottom:1px solid var(--border-soft); color:var(--text-dim); }
td.txt{ color:var(--text); font-weight:600; }
.chip{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.chip.active{ background:var(--primary-soft); color:var(--primary-text); }
.chip.pending_payment{ background:rgba(255,255,255,.07); color:var(--text-mut); }
.chip.past_due{ background:rgba(249,112,102,.14); color:#FDA29B; }
.chip.canceled{ background:rgba(249,112,102,.14); color:#FDA29B; }

@media (max-width: 720px){
  .planes{ grid-template-columns:1fr; }
  .card{ padding:26px 20px; }
  .shell{ margin-top:5vh; }
}