/* ── Alta de cliente ─────────────────────────────── */
.alta{max-width:640px;margin:0 auto;padding:26px 20px 70px}
.alta-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.alta-top .tema-btn{margin-right:6px;flex:0 0 auto}
.paso-de{color:var(--bruma);font-size:13px;font-weight:600}
.wiz{display:flex;gap:7px;margin-bottom:26px}
.wiz i{flex:1;height:4px;border-radius:2px;background:var(--borde)}
.wiz i.on{background:var(--marca)}
.alta h1{font:800 24px/1.2 "Outfit",sans-serif;margin:0 0 6px;text-wrap:balance}
.alta .sub{color:var(--bruma);margin:0 0 22px;font-size:14.5px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.campos{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:5px}
.f.full{grid-column:1/-1}
.f label{font-size:12.5px;font-weight:600;color:var(--bruma)}
.f input:not(.field-input){background:var(--superficie);border:1px solid var(--borde-fuerte,#CFC9BD);border-radius:9px;
  padding:11px 13px;font:inherit;font-size:15px;color:var(--tinta);width:100%}
.f textarea{background:var(--superficie);border:1px solid var(--borde-fuerte,#CFC9BD);border-radius:9px;padding:10px 12px;font:inherit;font-size:15px;color:var(--tinta);width:100%;resize:vertical;min-height:120px}
.f textarea:focus{outline:2px solid var(--marca);outline-offset:1px;border-color:var(--marca)}
.f textarea[aria-invalid="true"]{border-color:var(--alerta,#B8402E)}
.f input:not(.field-input):focus{outline:2px solid var(--marca);outline-offset:1px;border-color:var(--marca)}
.f input:not(.field-input)[aria-invalid="true"]{border-color:var(--alerta,#B8402E)}
.f .hint{font-size:12px;color:var(--bruma)}
.f .hint.mal{color:var(--alerta,#B8402E);font-weight:600}
.f .hint.bien{color:var(--ok,#3B7A36);font-weight:600}
.nit{display:flex;align-items:center;gap:8px}
.nit input:first-child{flex:1}
.nit .dv{width:56px;text-align:center;background:var(--marca-suave);border-color:transparent;font-weight:700}

.guia{background:var(--enzo-suave);border-radius:12px;padding:15px 17px;margin:0 0 20px}
.guia h2{font:700 13.5px "Outfit",sans-serif;margin:0 0 8px;color:var(--enzo)}
.guia ol{margin:0;padding-left:18px;font-size:13.5px}
.guia p{margin:0 0 8px;font-size:13.5px;line-height:1.55}
.guia p:last-child{margin-bottom:0}
.guia li{margin-bottom:4px}
.nota{display:flex;gap:10px;align-items:flex-start;background:var(--marca-suave);border-radius:11px;
  padding:13px 15px;font-size:13px;color:var(--profundo);margin-top:18px}
.resumen{background:var(--lienzo);border:1px solid var(--borde);border-radius:12px;padding:15px 17px;margin-bottom:14px}
.resumen dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0;font-size:13.5px}
.resumen dt{color:var(--bruma)}
.resumen dd{margin:0;font-weight:600;text-align:right;word-break:break-word}
.check{display:flex;gap:11px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--borde);font-size:13.5px}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--marca);flex-shrink:0}
.check a{color:var(--marca)}
.acciones{display:flex;gap:10px;align-items:center;margin-top:24px;flex-wrap:wrap}
.b{border:0;border-radius:11px;padding:12px 20px;font-weight:600;font-size:15px;
  background:var(--marca);color:var(--btn-ink,#FAF8F4);cursor:pointer}
.b.ghost{background:none;color:var(--profundo);border:1px solid var(--borde-fuerte,#CFC9BD)}
.b:disabled{opacity:.45;cursor:default}
/* Enlaces con forma de botón: las reglas de color de los enlaces de texto (styles.css) pesan más que `.b` y les
   dejaban el texto del color del fondo (2026-10-02). Aquí recuperan su tinta: en reposo, visitados y con el cursor encima. */
a.b{display:inline-block;text-decoration:none}
a.b:not(.ghost),a.b:not(.ghost):visited,a.b:not(.ghost):hover{color:var(--btn-ink,#FAF8F4)}
.aviso{margin-top:16px;padding:13px 15px;border-radius:11px;font-size:13.5px;display:none}
.aviso.ver{display:block}
.aviso.mal{background:#FBE9E5;color:#8C2F20}
.aviso.bien{background:var(--ok-suave,#E3EFE1);color:var(--ok,#3B7A36)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .aviso.mal{background:#3A211C;color:#E39B87}}

.listo{text-align:center;padding:14px 0}
.listo .ring{width:58px;height:58px;margin:0 auto 20px;border-radius:50%;
  border:4px solid var(--marca-suave);border-top-color:var(--marca);animation:giro 1.3s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.listo .ring{animation:none}}
/* Confirmación final (contacto, partners): un visto fijo. El anillo que gira queda para lo que sigue en curso. */
.listo .ring.hecho{animation:none;border-color:var(--marca);position:relative}
.listo .ring.hecho::after{content:"";position:absolute;left:50%;top:46%;width:12px;height:22px;
  border:solid var(--marca);border-width:0 4px 4px 0;transform:translate(-50%,-50%) rotate(45deg)}
.pasos{display:flex;flex-direction:column;gap:2px;text-align:left;max-width:390px;margin:22px auto 0}
.pl{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-size:14px;color:var(--bruma)}
.pl.now{background:var(--marca-suave);color:var(--profundo);font-weight:600}
.pl .mk{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  font-weight:700;flex-shrink:0;border:1.5px solid var(--borde-fuerte,#CFC9BD)}
.pl.now .mk{background:var(--marca);color:var(--btn-ink,#FAF8F4);border-color:transparent}

/* rol del solicitante (dueño | contador) */
.f .label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px}
.roles{display:flex;gap:10px;flex-wrap:wrap}
.rol{flex:1 1 240px;display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--borde-fuerte,#CFC9BD);border-radius:11px;cursor:pointer;font-size:14px}
.rol:has(input:checked){border-color:var(--marca,#008080);background:var(--marca-suave,#E6F2F2)}
.rol small{display:block;color:var(--bruma);font-size:12.5px;font-weight:400;margin-top:2px}
.rol input{accent-color:var(--marca,#008080)}
.hint.suave{color:var(--marca,#008080)}
select{width:100%;padding:11px 12px;border:1px solid var(--borde-fuerte,#CFC9BD);border-radius:10px;font:inherit;background:#fff}

/* contacto: WhatsApp con código de país + select */
.tel{display:flex;gap:8px;align-items:stretch}
.tel-cod{display:flex;align-items:center;padding:0 12px;border:1px solid var(--borde-fuerte,#CFC9BD);border-radius:9px;background:var(--marca-suave,#E6F2F2);color:var(--tinta);font-size:15px;font-weight:600;white-space:nowrap}
.tel input{flex:1}
.f select{background:var(--superficie);border:1px solid var(--borde-fuerte,#CFC9BD);border-radius:9px;padding:11px 13px;font:inherit;font-size:15px;color:var(--tinta);width:100%}
.f select:focus{outline:2px solid var(--marca);outline-offset:1px;border-color:var(--marca)}

/* contacto: tarjetas de asunto dentro de .f (la regla .f input{width:100%} no debe estirar el radio) */
.f .rol input[type="radio"]{width:18px;height:18px;flex:0 0 auto;margin:0;padding:0;border:0;background:transparent}
.f .rol>span{flex:1 1 auto;min-width:0;text-align:left}

/* partner: bloques y chips de opción múltiple */
h2.bloque{font-size:17px;margin:26px 0 10px;color:var(--tinta)}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.check.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--borde-fuerte,#CFC9BD);border-radius:999px;font-size:14px;margin:0;cursor:pointer}
.check.chip:has(input:checked){border-color:var(--marca);background:var(--marca-suave)}
.check.chip input{width:16px;height:16px;margin:0;flex:0 0 auto}