/*!
 * Facturero App EC — estilos del registro de clientes
 * Depende de facturero.css: tokens, botones, nav y pie.
 */

.reg{background:var(--bg-soft);padding-block:clamp(2rem,5vw,3.5rem) clamp(3rem,6vw,5rem)}
.reg__head{max-width:60ch;margin-bottom:1.5rem}
.reg__head h1{font-size:clamp(1.75rem,3.6vw,2.375rem)}
.reg__lede{margin-top:.85rem;color:var(--text-2);font-size:1.0625rem}

.banner-borrador{
  display:flex;gap:.7rem;align-items:flex-start;background:var(--warn-bg);
  border:1px solid #f0d9a8;border-radius:var(--radius);padding:.9rem 1.1rem;
  font-size:var(--t-sm);color:var(--warn-fg);max-width:82ch;margin-bottom:2rem;
}
.banner-borrador svg{flex-shrink:0;margin-top:2px}

/* ---------- progreso ---------- */
.stepper{
  display:flex;gap:.4rem;margin-bottom:2rem;overflow-x:auto;
  padding-bottom:.35rem;scrollbar-width:thin;
}
.stepper li{
  flex:1 1 0;min-width:112px;display:flex;align-items:center;gap:.55rem;
  padding:.7rem .8rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:var(--t-xs);font-weight:600;
  color:var(--text-3);white-space:nowrap;
}
.stepper li.is-current{border-color:var(--action);color:var(--text);box-shadow:0 0 0 3px rgba(4,119,191,.12)}
.stepper li.is-done{cursor:pointer;color:var(--ok-fg);border-color:#b8e0cc;background:var(--ok-bg)}
.stepper li.is-done:hover{border-color:var(--ok-fg)}
.stepper__n{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink-100);color:var(--text-3);font-family:var(--font-num);
  font-size:.6875rem;font-weight:600;
}
.stepper li.is-current .stepper__n{background:var(--action);color:#fff}
.stepper li.is-done .stepper__n{background:var(--ok-fg);color:#fff;font-size:0}
.stepper li.is-done .stepper__n::after{
  content:"";width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg) translate(-1px,-1px);
}

/* ---------- rejilla ---------- */
.reg__grid{display:grid;gap:1.5rem;align-items:start}
@media(min-width:1000px){.reg__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.55fr)}}
.reg__grid > *{min-width:0}
.reg__form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.25rem,3vw,2rem)}
.reg__lado{display:flex;flex-direction:column;gap:1.25rem}
@media(min-width:1000px){.reg__lado{position:sticky;top:96px}}

/* ---------- pasos ---------- */
.paso h2{font-size:1.375rem;margin-bottom:.4rem;outline:0}
.paso__ayuda{font-size:var(--t-sm);color:var(--text-2);margin-bottom:1.5rem;max-width:62ch}

.campos{display:grid;gap:1rem}
@media(min-width:620px){.campos{grid-template-columns:repeat(2,1fr)}}
.campo{display:flex;flex-direction:column;gap:.35rem;min-width:0;border:0;padding:0;margin:0}
.campo--ancho{grid-column:1/-1}
.campo > span,.campo > legend{font-size:var(--t-xs);font-weight:600;color:var(--text-2);padding:0}
.campo b{color:var(--bad-fg)}
.campo__nota{font-size:var(--t-xs);color:var(--cyan-800);font-style:normal;font-weight:600}
.campo--destacado{background:var(--cyan-50);border:1px solid var(--cyan-200);border-radius:var(--radius-sm);padding:.9rem 1rem}

.in{
  width:100%;padding:.65rem .75rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;color:var(--text);font-family:var(--font);font-size:var(--t-sm);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.in:focus{outline:0;border-color:var(--action);box-shadow:0 0 0 3px rgba(4,119,191,.16)}
.in.num,input.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
select.in{cursor:pointer}
.tiene-error .in{border-color:var(--bad-fg)}

.aviso{font-size:var(--t-xs);font-weight:600;min-height:1.05em}
.aviso--ok{color:var(--ok-fg)}
.aviso--mal{color:var(--bad-fg)}

.radios__op{display:flex;gap:1.25rem;padding-top:.2rem}
/* min-height 24px en la etiqueta y radio de 18px: el objetivo pulsable es
   la etiqueta completa, no solo el circulito (WCAG 2.2 · 2.5.8) */
.radios__op label{
  display:flex;align-items:center;gap:.5rem;font-size:var(--t-sm);
  cursor:pointer;min-height:24px;
}
.radios__op input{width:18px;height:18px;cursor:pointer;flex-shrink:0}

/* ---------- planes ---------- */
.periodo{
  display:inline-flex;gap:.25rem;padding:.28rem;background:var(--ink-100);
  border-radius:999px;margin-bottom:1.25rem;
}
.periodo button{
  border:0;background:transparent;padding:.45rem 1rem;border-radius:999px;
  font-size:var(--t-xs);font-weight:600;color:var(--text-3);cursor:pointer;
}
.periodo button[aria-pressed="true"]{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(13,19,23,.14)}
.periodo span{color:var(--ok-fg);font-weight:700;margin-left:.25rem}

.planes-reg{display:grid;gap:.6rem;margin-bottom:1.5rem}
@media(min-width:560px){.planes-reg{grid-template-columns:repeat(2,1fr)}}
.plan-reg{
  position:relative;display:flex;flex-direction:column;gap:.25rem;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:.9rem 1rem;
  transition:border-color .15s ease,background-color .15s ease;
}
.plan-reg:hover{border-color:var(--blue-300)}
.plan-reg.is-sel{border-color:var(--action);background:var(--blue-50);box-shadow:0 0 0 3px rgba(4,119,191,.12)}
.plan-reg input{position:absolute;opacity:0;width:0;height:0}
.plan-reg__cab{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.plan-reg__cab b{font-size:.9375rem;font-weight:700}
.plan-reg__cab em{
  font-style:normal;font-size:.625rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;background:var(--cyan-100);color:var(--cyan-800);
  padding:.15rem .45rem;border-radius:999px;
}
.plan-reg__precio{font-size:1.25rem;font-weight:600;color:var(--blue-700)}
.plan-reg__precio small{font-size:var(--t-xs);color:var(--text-3);font-weight:400;margin-left:.15rem}
.plan-reg__det{font-size:var(--t-xs);color:var(--text-3)}

.resumen-pago{
  background:var(--bg-soft);border-radius:var(--radius-sm);padding:1rem 1.1rem;
  display:flex;flex-direction:column;gap:.45rem;
}
.resumen-pago div{display:flex;justify-content:space-between;gap:1rem;font-size:var(--t-sm);color:var(--text-2)}
.resumen-pago__total{
  border-top:1px solid var(--line);padding-top:.7rem;margin-top:.3rem;
  font-weight:800;color:var(--text) !important;font-size:1.0625rem !important;
}

/* ---------- subidas ---------- */
.subidas{display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.5rem}
.subida{
  display:grid;gap:.7rem;border:1.5px dashed var(--line);border-radius:var(--radius-sm);
  padding:1rem 1.1rem;align-items:center;
}
@media(min-width:560px){.subida{grid-template-columns:1fr auto}}
.subida__txt strong{display:block;font-size:var(--t-sm);font-weight:700}
.subida__txt strong b{color:var(--bad-fg)}
.subida__txt span{display:block;font-size:var(--t-xs);color:var(--text-3);margin-top:.15rem}
.subida__btn{cursor:pointer}
.subida__estado{grid-column:1/-1;font-size:var(--t-xs);font-weight:600;color:var(--text-3);min-height:1.05em}
.subida__estado.es-ok{color:var(--ok-fg)}
.subida__estado.es-error{color:var(--bad-fg)}
.btn--sm{padding:.5rem 1rem;font-size:var(--t-xs)}

/* ---------- alertas ---------- */
.alerta{display:flex;gap:.75rem;border-radius:var(--radius-sm);padding:1rem 1.1rem;align-items:flex-start}
.alerta svg{flex-shrink:0;margin-top:2px}
.alerta strong{display:block;font-size:var(--t-sm);margin-bottom:.2rem}
.alerta p{font-size:var(--t-xs);line-height:1.55}
.alerta--importante{background:var(--bad-bg);color:var(--bad-fg);border:1px solid #f3c4c1}
.alerta--ok{background:var(--ok-bg);color:var(--ok-fg);border:1px solid #b8e0cc}

/* ---------- métodos de pago ---------- */
.metodos{display:grid;gap:.7rem;margin-bottom:1.5rem}
@media(min-width:620px){.metodos{grid-template-columns:repeat(2,1fr)}}
.metodo{cursor:pointer;position:relative}
.metodo input{position:absolute;opacity:0;width:0;height:0}
.metodo__cuerpo{
  display:flex;gap:.8rem;align-items:flex-start;height:100%;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:1rem;
  transition:border-color .15s ease,background-color .15s ease;
}
.metodo:hover .metodo__cuerpo{border-color:var(--blue-300)}
.metodo input:checked + .metodo__cuerpo{
  border-color:var(--action);background:var(--blue-50);box-shadow:0 0 0 3px rgba(4,119,191,.12);
}
.metodo input:focus-visible + .metodo__cuerpo{outline:2px solid var(--action);outline-offset:2px}
.metodo__ico{
  flex-shrink:0;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--band);color:#fff;
}
.metodo__txt strong{display:block;font-size:var(--t-sm);font-weight:700}
.metodo__txt span{display:block;font-size:var(--t-xs);color:var(--text-3);margin-top:.15rem}

.pago-detalle{border-top:1px solid var(--line);padding-top:1.5rem;margin-bottom:1.25rem}
.pago-detalle h3{font-size:1rem}

.transf-cab{
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:baseline;
  justify-content:space-between;margin-bottom:1.1rem;
}
.transf-monto{font-size:var(--t-xs);color:var(--text-3);font-weight:600}
.transf-monto strong{
  font-size:1.25rem;font-weight:600;color:var(--text);margin-left:.4rem;
  font-variant-numeric:tabular-nums;
}

/* ---------- tarjetas de banco ---------- */
.bancos{display:grid;gap:.9rem;margin-bottom:1.25rem}
@media(min-width:620px){.bancos{grid-template-columns:repeat(2,1fr)}}
.banco-card{
  border:1.5px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:#fff;display:flex;flex-direction:column;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.banco-card:hover{border-color:var(--blue-200);box-shadow:var(--shadow)}
.banco-card__cab{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem}
/* Logotipos oficiales, recortados al contenido y a 96 px (2x del hueco).
   object-fit:contain para no deformarlos si cambia el aspecto del archivo. */
.banco-card__marca{
  flex-shrink:0;width:44px;height:44px;border-radius:10px;
  object-fit:contain;display:block;background:#fff;
}
/* el de Guayaquil va a sangre, así que el redondeo debe recortarlo */
.banco-card[data-banco="guayaquil"] .banco-card__marca{object-fit:cover}
.banco-card__nom{display:flex;flex-direction:column;min-width:0}
.banco-card__nom strong{font-size:var(--t-sm);font-weight:700}
.banco-card__nom span{font-size:var(--t-xs);color:var(--text-3);margin-top:.1rem}

.banco-card__num{
  border-top:1px solid var(--line);background:var(--bg-soft);
  padding:.8rem 1rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.banco-card__num .lbl{width:100%;margin-bottom:.15rem}
.banco-card__valor{
  font-size:1.125rem;font-weight:600;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;color:var(--text);
}

.copiar{
  margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;
  min-height:28px;padding:.25rem .6rem;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--action-hover);
  font-size:var(--t-xs);font-weight:700;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.copiar:hover{border-color:var(--action);background:var(--blue-50)}
.copiar.copiado{border-color:var(--ok-fg);color:var(--ok-fg);background:var(--ok-bg)}
.copiar--min{min-width:28px;padding:.25rem .4rem;margin-left:.35rem}

/* ---------- datos del titular ---------- */
.titular{
  display:grid;gap:.65rem;background:var(--bg-soft);border-radius:var(--radius-sm);
  padding:.9rem 1rem;margin-bottom:1.25rem;
}
@media(min-width:620px){.titular{grid-template-columns:repeat(3,1fr)}}
.titular div{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.titular dt{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.11em;color:var(--text-3);font-weight:700}
.titular dd{
  margin:0;font-size:var(--t-sm);font-weight:600;
  display:flex;align-items:center;flex-wrap:wrap;gap:.15rem .35rem;overflow-wrap:anywhere;
}
.pendiente{color:var(--warn-fg);background:var(--warn-bg);padding:.1rem .45rem;border-radius:4px;font-size:var(--t-xs)}
.pasarela-nota{font-size:var(--t-xs);color:var(--text-3);margin-top:.85rem}

.check-terminos{
  display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-sm);
  color:var(--text-2);cursor:pointer;margin-top:.5rem;
}
.check-terminos input{margin-top:.2rem;flex-shrink:0}
.check-terminos b{color:var(--bad-fg)}

/* ---------- navegación ---------- */
.reg__nav{
  display:flex;gap:.75rem;justify-content:flex-end;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:2rem;padding-top:1.5rem;
}
.reg__nav .btn{min-width:130px}

/* ---------- resumen lateral ---------- */
.tarjeta-resumen,.tarjeta-que-sigue{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem 1.25rem;
}
.tarjeta-resumen h2{font-size:1rem;margin-bottom:1rem}
.mini{display:flex;flex-direction:column;gap:.6rem}
.mini div{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;font-size:var(--t-xs)}
.mini dt{color:var(--text-3);font-weight:600;flex-shrink:0}
.mini dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.mini__total{
  display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
  border-top:1px solid var(--line);margin-top:1rem;padding-top:.9rem;font-size:var(--t-sm);color:var(--text-2);
}
.mini__total strong{font-size:1.25rem;color:var(--text);font-weight:600}

.tarjeta-que-sigue{background:var(--band-soft);border-color:var(--blue-200)}
.tarjeta-que-sigue h3{font-size:.9375rem;margin-bottom:.9rem}
.que-sigue{display:flex;flex-direction:column;gap:.7rem}
.que-sigue li{display:flex;gap:.6rem;font-size:var(--t-xs);color:var(--text-2);align-items:flex-start}
.que-sigue li span{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;background:#fff;
  border:1px solid var(--blue-200);color:var(--blue-700);display:grid;place-items:center;
  font-family:var(--font-num);font-size:.625rem;font-weight:600;
}
.que-sigue__pie{margin-top:1rem;font-size:var(--t-xs);color:var(--text-3)}
.que-sigue__pie a{display:inline-flex;align-items:center;min-height:24px}  /* WCAG 2.2 · 2.5.8 */

/* ---------- confirmación ---------- */
.confirmacion{
  background:#fff;border:1px solid #b8e0cc;border-radius:var(--radius);
  padding:clamp(2rem,5vw,3rem);text-align:center;max-width:640px;margin-inline:auto;
  box-shadow:0 24px 50px -28px rgba(15,122,77,.5);outline:0;
}
/* Sustituye al .confirmacion__ico, que era un check genérico dentro de un
   círculo verde y repetía lo que ya dice el título. El tamaño y el centrado
   viven aquí; las animaciones, en facturero.css junto al resto de .facti-av. */
.facti-av--grande{width:88px;height:88px;margin:0 auto 1.25rem}

/* aviso de paso incompleto */
.aviso-paso{
  display:flex;align-items:center;gap:.9rem;
  margin:1.5rem 0 0;padding:.85rem 1rem;
  background:var(--warn-bg);border:1px solid #efd39c;border-radius:var(--radius-sm);
}
.aviso-paso .facti-av{width:52px;height:52px}
.aviso-paso strong{display:block;font-size:var(--t-sm);color:var(--warn-fg)}   /* 5,38:1 */
.aviso-paso p{margin:.15rem 0 0;font-size:var(--t-xs);color:var(--warn-fg)}
.confirmacion h2{font-size:1.5rem;margin-bottom:.6rem}
.confirmacion > p{color:var(--text-2);max-width:52ch;margin-inline:auto}
.confirmacion__datos{
  display:flex;flex-direction:column;gap:.6rem;background:var(--bg-soft);
  border-radius:var(--radius-sm);padding:1rem 1.15rem;margin:1.5rem 0 1.25rem;text-align:left;
}
.confirmacion__datos div{display:flex;justify-content:space-between;gap:1rem;font-size:var(--t-sm);flex-wrap:wrap}
.confirmacion__datos dt{color:var(--text-3);font-weight:600;font-size:var(--t-xs)}
.confirmacion__datos dd{margin:0;font-weight:600;text-align:right}
.confirmacion__aviso{
  font-size:var(--t-xs);color:var(--warn-fg);background:var(--warn-bg);
  border-radius:var(--radius-sm);padding:.7rem .9rem;margin-bottom:1.5rem;
}
.confirmacion__acciones{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}