/* ============================================================
   cairo-ui.css — Sistema de diseño compartido del onboarding
   Identidad alineada con la landing (Sora + DM Sans, naranja
   #FF5100 + cyan #00E5FF), en modo oscuro "app" sobre navy limpio.
   Usado por: register, login, activation, checkout, welcome.
   ============================================================ */

:root {
  /* Superficies (navy limpio, no negro neón) */
  --c-bg:      #08111F;            /* fondo base */
  --c-bg-2:    #0C1729;            /* fondo elevado */
  --c-panel:   #101D33;            /* tarjetas / paneles */
  --c-panel-2: #15233B;            /* hover / elevado */
  --c-line:    rgba(148,163,184,.16);
  --c-line-2:  rgba(148,163,184,.28);

  /* Texto */
  --c-t1: #F4F7FB;                 /* principal */
  --c-t2: #A9B6CC;                 /* secundario */
  --c-t3: #6F7E97;                 /* terciario / placeholder */

  /* Marca */
  --c-or:   #FF5100;               /* naranja Cairo */
  --c-or-2: #FF7A33;               /* naranja claro (gradiente) */
  --c-cy:   #00E5FF;               /* cyan Cairo */
  --c-cy-2: #36C5F0;
  --c-gn:   #22C55E;               /* éxito */
  --c-rd:   #FF5A5A;               /* error */

  /* Acentos suaves (fondos translúcidos) */
  --c-or-soft: rgba(255,81,0,.10);
  --c-cy-soft: rgba(0,229,255,.10);

  /* Gradientes */
  --c-grad-or: linear-gradient(135deg,#FF5100,#FF7A33);
  --c-grad-cy: linear-gradient(135deg,#00E5FF,#2962FF);

  /* Tipografía */
  --c-fh: 'Sora', system-ui, -apple-system, sans-serif;   /* títulos */
  --c-fb: 'DM Sans', system-ui, -apple-system, sans-serif; /* cuerpo */

  /* Radios y sombras */
  --c-r:  12px;
  --c-rl: 18px;
  --c-rp: 999px;
  --c-shadow:   0 18px 50px rgba(0,0,0,.40);
  --c-shadow-s: 0 8px 24px rgba(0,0,0,.30);
  --c-glow-or:  0 0 0 1px rgba(255,81,0,.35), 0 14px 38px rgba(255,81,0,.22);
}

/* ── Base ─────────────────────────────────────────────── */
.cui, .cui * { box-sizing: border-box; }
.cui {
  margin: 0;
  background:
    radial-gradient(circle at 12% -8%, rgba(0,229,255,.10), transparent 36%),
    radial-gradient(circle at 100% 8%, rgba(255,81,0,.09), transparent 34%),
    var(--c-bg);
  color: var(--c-t1);
  font-family: var(--c-fb);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
.cui h1, .cui h2, .cui h3, .cui h4 {
  font-family: var(--c-fh);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}

/* ── Marca / logo ─────────────────────────────────────── */
.cui-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.cui-wordmark { font-family:var(--c-fh); font-weight:800; font-size:20px; letter-spacing:-.3px; color:var(--c-t1); }
.cui-wordmark .a { color:var(--c-or); }
.cui-wordmark .i { color:var(--c-cy); }

/* ── Botones ──────────────────────────────────────────── */
.cui-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--c-fb); font-size:.98rem; font-weight:700;
  padding:14px 22px; border-radius:var(--c-r); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  width:100%;
}
.cui-btn:active { transform:translateY(1px); }
.cui-btn-primary { background:var(--c-grad-or); color:#fff; box-shadow:0 10px 30px rgba(255,81,0,.30); }
.cui-btn-primary:hover { box-shadow:0 14px 38px rgba(255,81,0,.42); transform:translateY(-1px); }
.cui-btn-ghost { background:transparent; color:var(--c-t1); border-color:var(--c-line-2); }
.cui-btn-ghost:hover { background:var(--c-panel-2); border-color:var(--c-cy); }
.cui-btn-google { background:#fff; color:#1f2430; border-color:transparent; }
.cui-btn-google:hover { box-shadow:var(--c-shadow-s); transform:translateY(-1px); }

/* ── Inputs ───────────────────────────────────────────── */
.cui-input {
  width:100%; padding:13px 15px; font-family:var(--c-fb); font-size:1rem;
  color:var(--c-t1); background:var(--c-bg-2); border:1px solid var(--c-line);
  border-radius:var(--c-r); outline:none; transition:border .2s ease, box-shadow .2s ease;
}
.cui-input::placeholder { color:var(--c-t3); }
.cui-input:focus { border-color:var(--c-cy); box-shadow:0 0 0 3px rgba(0,229,255,.14); }

/* ── Tarjetas / paneles ───────────────────────────────── */
.cui-card {
  background:var(--c-panel); border:1px solid var(--c-line);
  border-radius:var(--c-rl); padding:22px; box-shadow:var(--c-shadow-s);
}

/* ── Selector de planes (radio cards) ─────────────────── */
.cui-plan {
  position:relative; display:block; cursor:pointer; text-align:left;
  background:var(--c-bg-2); border:1.5px solid var(--c-line);
  border-radius:var(--c-rl); padding:16px 16px 16px 18px;
  transition:border .2s ease, background .2s ease, transform .15s ease;
}
.cui-plan:hover { border-color:var(--c-line-2); }
.cui-plan.is-active { border-color:var(--c-or); background:linear-gradient(180deg, rgba(255,81,0,.07), transparent); }
.cui-plan.is-active.cyan { border-color:var(--c-cy); background:linear-gradient(180deg, rgba(0,229,255,.07), transparent); }
.cui-plan-name { font-family:var(--c-fh); font-weight:800; font-size:1.02rem; color:var(--c-t1); }
.cui-plan-price { font-size:.9rem; color:var(--c-t2); margin-top:2px; }
.cui-plan-price b { color:var(--c-t1); font-weight:800; }
.cui-plan-feats { font-size:.78rem; color:var(--c-t3); line-height:1.6; margin-top:8px; }
.cui-plan-badge {
  position:absolute; top:-9px; right:14px; font-size:.6rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em; color:#fff;
  background:var(--c-grad-or); padding:3px 10px; border-radius:var(--c-rp);
}

/* ── Pills / chips ────────────────────────────────────── */
.cui-pill {
  display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--c-cy);
  background:var(--c-cy-soft); border:1px solid rgba(0,229,255,.22);
  padding:6px 13px; border-radius:var(--c-rp);
}
.cui-pill.orange { color:var(--c-or); background:var(--c-or-soft); border-color:rgba(255,81,0,.25); }

/* ── Líneas de resumen (checkout) ─────────────────────── */
.cui-row { display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--c-line); font-size:.92rem; }
.cui-row:last-child { border-bottom:none; }
.cui-row .k { color:var(--c-t2); }
.cui-row .v { color:var(--c-t1); font-weight:700; }
.cui-row .v.cy { color:var(--c-cy); }

.cui-muted { color:var(--c-t2); }
.cui-tiny  { font-size:.78rem; color:var(--c-t3); }