/* ============================================================
   NodoERP — formulario de contratación self-service y página de estado.
   Usa los tokens de nodoerp.css (azure, ink, line, mono…).
   ============================================================ */

[hidden]{ display:none !important; }

.signup{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,56px); align-items:start; }
.signup-aside{ position:sticky; top:96px; }

.summary{
  background:linear-gradient(135deg,var(--azure-deep),var(--azure-ink) 60%,var(--azure));
  color:#fff; border-radius:var(--r); padding:26px;
  box-shadow:0 24px 50px -28px rgba(4,136,254,.55);
}
.summary-label{ font-size:.72rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.plan-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:14px 0 18px; background:rgba(255,255,255,.12); padding:5px; border-radius:11px; }
.plan-pick button{
  border:0; border-radius:8px; padding:9px 4px; cursor:pointer;
  font:900 .84rem 'Lato',sans-serif; color:rgba(255,255,255,.85); background:transparent;
  transition:background .15s,color .15s;
}
.plan-pick button:hover{ background:rgba(255,255,255,.12); }
.plan-pick button[aria-checked="true"]{ background:#fff; color:var(--azure-ink); }
.summary strong{ display:block; font-family:var(--mono); font-size:2rem; letter-spacing:-.04em; }
.summary-detail{ display:block; font-size:.86rem; color:rgba(255,255,255,.82); margin-top:4px; }

.signup-points{ list-style:none; padding:0; margin:22px 0 0; font-size:.94rem; }
.signup-points li{ padding:10px 0; border-bottom:1px dashed var(--line); }
.signup-points b{ font-family:var(--mono); color:var(--azure-ink); margin-right:6px; }

.signup-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,3.4vw,34px); box-shadow:0 20px 44px -30px rgba(11,21,32,.28);
}
.signup-card fieldset{ border:0; padding:0; margin:0 0 22px; }
.signup-card legend{ font-weight:900; color:var(--ink); font-size:1.08rem; padding:0; margin-bottom:12px; }
.signup-card legend span{ font-family:var(--mono); font-size:.72rem; font-weight:400; color:var(--faint); margin-left:8px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-weight:700; font-size:.88rem; color:var(--ink); }
.hint{ font-size:.78rem; color:var(--muted); font-weight:400; }
.signup-card input:not([type=checkbox]), .signup-card select{
  width:100%; font:16px 'Lato',sans-serif; color:var(--ink);
  padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; background:var(--tint-2);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.signup-card input:focus, .signup-card select:focus{ outline:0; border-color:var(--azure); background:#fff; box-shadow:0 0 0 4px rgba(4,136,254,.13); }
.signup-card input.upper{ text-transform:uppercase; font-family:var(--mono); letter-spacing:.04em; }
.field.invalid input, .field.invalid select{ border-color:#d64545; background:#fff8f8; }
.error{ color:#c03434; font-size:.8rem; }
.error:empty{ display:none; }

.slug{ display:flex; }
.slug input{ border-radius:10px 0 0 10px !important; font-family:var(--mono) !important; }
.slug span{
  display:flex; align-items:center; padding:0 12px; border:1.5px solid var(--line); border-left:0;
  border-radius:0 10px 10px 0; background:var(--tint); font:.8rem var(--mono); color:var(--muted); white-space:nowrap;
}
.slug-status{ font-size:.82rem; color:var(--muted); }
.slug-status.ok{ color:var(--green); }

.check{ display:flex !important; gap:10px; align-items:flex-start; font-weight:400 !important; font-size:.9rem !important; color:var(--body) !important; }
.check input{ width:19px; height:19px; margin-top:3px; flex:none; accent-color:var(--azure); }
.check a{ color:var(--azure-ink); font-weight:700; }

.form-msg{ display:none; padding:12px 14px; border-radius:10px; background:#fff1f1; color:#c03434; font-size:.9rem; margin-bottom:16px; }
.form-msg.show{ display:block; }
.submit{ width:100%; justify-content:center; padding:16px; font-size:1rem; }
.submit[disabled]{ opacity:.65; cursor:progress; transform:none; }
.secure{ display:flex; gap:8px; align-items:center; justify-content:center; color:var(--muted); font-size:.8rem; margin-top:12px; }

.plan.selected{ border-color:var(--azure); box-shadow:0 0 0 3px rgba(4,136,254,.14); }

.wa{
  position:fixed; right:18px; bottom:18px; z-index:50; width:56px; height:56px; border-radius:50%;
  background:#25d366; display:grid; place-items:center; box-shadow:0 10px 24px -8px rgba(0,0,0,.4);
}
.wa[hidden]{ display:none; }

/* ---------- página de estado (gracias.html) ---------- */
.status-card{
  max-width:640px; margin:clamp(40px,8vw,90px) auto; text-align:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(28px,5vw,48px); box-shadow:0 20px 44px -30px rgba(11,21,32,.28);
}
.status-card h2{ margin:6px 0 12px; }
.spinner{ width:52px; height:52px; border-radius:50%; border:4px solid var(--tint); border-top-color:var(--azure); margin:0 auto 22px; animation:spin 1s linear infinite; }
.spinner[hidden]{ display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.status-steps{ list-style:none; text-align:left; max-width:380px; margin:24px auto 0; padding:0; }
.status-steps li{ padding:9px 0 9px 32px; position:relative; color:var(--faint); }
.status-steps li::before{ content:'○'; position:absolute; left:6px; }
.status-steps li.done{ color:var(--ink); }
.status-steps li.done::before{ content:'✓'; color:var(--green); font-weight:900; }
.status-steps li.now{ color:var(--ink); font-weight:700; }
.status-steps li.now::before{ content:'●'; color:var(--azure); }

@media (max-width:900px){
  .signup{ grid-template-columns:1fr; }
  .signup-aside{ position:static; }
}
@media (max-width:560px){
  .grid2{ grid-template-columns:1fr; }
  .slug{ flex-direction:column; }
  .slug input{ border-radius:10px 10px 0 0 !important; }
  .slug span{ border:1.5px solid var(--line); border-top:0; border-radius:0 0 10px 10px; padding:8px 12px; white-space:normal; word-break:break-all; }
}
@media (prefers-reduced-motion:reduce){ .spinner{ animation:none; } }