/* Paginas de formulario: registro, login y el alta del cliente final.
   Comparten los tokens de landing.css, que se carga antes. */

.pag-forma{min-height:100vh;display:grid;place-items:center;padding:40px 20px;}
.caja{width:100%;max-width:430px;background:var(--blanco);border:1px solid var(--linea);
  border-radius:28px;padding:38px 34px;box-shadow:var(--s2);}
.caja .logo{margin-bottom:26px;}
.volver{display:flex;width:fit-content;align-items:center;gap:5px;font-size:.9rem;
  font-weight:600;color:var(--tinta2);margin-bottom:20px;}
.volver:hover{color:var(--marca);}
.caja h1{font-size:clamp(1.6rem,4vw,2rem);margin-bottom:8px;line-height:1.12;}
.caja .sub{color:var(--tinta2);margin:0 0 26px;font-size:.99rem;}

.solapas{display:flex;gap:4px;background:var(--papel2);border:1px solid var(--linea);
  border-radius:14px;padding:4px;margin-bottom:24px;}
.solapa{flex:1;border:0;background:none;padding:10px;border-radius:10px;
  font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--tinta2);
  cursor:pointer;transition:background .15s,color .15s;}
.solapa.activa{background:var(--marca);color:#fff;}

/* Paso "elegir local" del login de staff: se esconde el resto del cromo.
   No hay vuelta atras: ya paso cedula y PIN, solo falta el local. */
.paso-local .volver,
.paso-local .solapas,
.paso-local .pie-forma{display:none;}

.campo{margin-bottom:16px;}
.campo label{display:block;font-size:.86rem;font-weight:600;color:var(--tinta2);margin-bottom:7px;}
.campo input{width:100%;border:1.5px solid var(--linea);border-radius:12px;padding:13px 15px;
  font-family:var(--sans);font-size:1rem;color:var(--tinta);background:var(--papel);
  transition:border-color .2s, background .2s;}
.campo input:focus{outline:none;border-color:var(--marca);background:#fff;}
.campo input::placeholder{color:var(--tinta3);}
.campo .ayuda{font-size:.81rem;color:var(--tinta3);margin:6px 0 0;}
/* El mismo texto de ayuda, pero cuando lo que dice es un error del campo:
   "no coinciden", "muy corta". Va abajo del input y no en el cartel de
   arriba, que queda para lo que contesta el servidor. Mismo rojo que
   .aviso.mal. */
.campo .ayuda.mal{color:#8E2A22;font-weight:600;}

.caja .btn{width:100%;margin-top:8px;padding:14px;font-size:1rem;}
.pie-forma{text-align:center;margin:22px 0 0;font-size:.92rem;color:var(--tinta2);}
.pie-forma a{color:var(--marca);font-weight:600;}
.pie-forma + .pie-forma{margin-top:9px;}

.aviso{border-radius:12px;padding:12px 15px;font-size:.92rem;margin-bottom:18px;display:none;}
.aviso.mal{background:#FDECEA;color:#8E2A22;border:1px solid #F3C9C4;}
.aviso.bien{background:#E6F2EC;color:#155C43;border:1px solid #BFE0D2;}
.aviso.visible{display:block;}

/* ── alta del cliente final ── */
/* 100dvh, no 100vh: en Safari de iPhone el 100vh mide con la barra de
   direcciones escondida, asi que reserva mas alto del que se ve al abrir
   la pagina — el pie quedaba "pegado" a un borde que no se veia sin
   scrollear. 100dvh se ajusta a lo que hay visible en cada momento. */
.alta{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
.alta-cab{padding:34px 22px 26px;text-align:center;color:var(--alta-texto);
  background:var(--alta-fondo);border-radius:0 0 30px 30px;}
/* Sin .alta-logo: ver la nota en alta.ejs. El nombre es lo primero de la
   pagina, asi que crece un punto — es lo que ahora identifica al local. */
.alta-cab h1{color:var(--alta-texto);font-size:1.7rem;margin:0 0 7px;}
.alta-cab p{margin:0;opacity:.9;font-size:1rem;}
.alta-sellos{display:flex;justify-content:center;gap:8px;margin-top:20px;flex-wrap:wrap;}
.alta-sellos i{width:15px;height:15px;border-radius:50%;border:1.6px solid currentColor;opacity:.45;}
/* Sello ganado = circulo lleno (misma convencion que el strip.png de la
   billetera). Se pinta con los sellos reales que ya tenia el cliente. */
.alta-sellos i.lleno{background:currentColor;opacity:.95;border-color:transparent;
  animation:sello-lleno .35s var(--ease) backwards;}
@keyframes sello-lleno{from{transform:scale(.3);opacity:0;}to{transform:scale(1);opacity:.95;}}

.alta-cuerpo{flex:1;padding:30px 22px 44px;max-width:430px;margin:0 auto;width:100%;}
/* Solo en el estado "listo": centra el tilde en vez de dejarlo pegado
   arriba con un hueco vacio antes del pie de pagina. */
.alta-cuerpo h2{font-size:1.2rem;margin:0 0 6px;}
.alta-cuerpo .sub{color:var(--tinta2);font-size:.96rem;margin:0 0 22px;}
.alta .btn{width:100%;padding:15px;font-size:1.02rem;background:var(--alta-fondo);
  box-shadow:none;}
.alta .btn:hover{background:var(--alta-fondo);filter:brightness(.92);}
.legal{font-size:.79rem;color:var(--tinta3);margin:16px 0 0;line-height:1.5;}


/* ── "tu tarjeta está lista": reemplaza al formulario después del alta ── */
.alta-ok{text-align:center;animation:ok-entra .5s var(--ease) both;}
@keyframes ok-entra{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.alta-ok-marca{position:relative;width:92px;height:92px;margin:6px auto 22px;}
.alta-ok-marca::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--alta-fondo);opacity:.10;transform:scale(.4);
  animation:ok-pop .5s .05s var(--ease) forwards;}
.alta-ok-marca svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.alta-ok-anillo circle{fill:none;stroke:var(--alta-fondo);stroke-width:3;opacity:.22;}
.alta-ok-tic path{fill:none;stroke:var(--alta-fondo);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:80;stroke-dashoffset:80;
  animation:ok-traza .5s .22s var(--ease) forwards;}
@keyframes ok-pop{to{transform:scale(1);}}
@keyframes ok-traza{to{stroke-dashoffset:0;}}

.alta-ok h2{margin:0 0 8px;font-size:1.35rem;}
.alta-ok-texto{color:var(--tinta2);font-size:.98rem;line-height:1.55;margin:0;max-width:320px;
  margin-left:auto;margin-right:auto;}

/* Los botones de billetera, uno al lado del otro.
   El truco del ancho: cada uno crece en proporcion a SU relacion de aspecto
   (el de Apple es 3.28:1, el de Google 3.64:1), asi que los dos terminan con
   el MISMO alto sin fijarlo a mano y sin importar el ancho de la pantalla.
   Repartir el ancho por igual, que es lo obvio, los dejaba de altos distintos
   y con un escalon a la vista entre los dos. */
.alta-billeteras{display:flex;align-items:center;justify-content:center;gap:12px;
  margin:26px auto 4px;max-width:360px;}
.billetera{display:block;min-width:0;padding:0;border:0;background:none;
  cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--ease),opacity .12s var(--ease);}
.billetera-apple{flex:3.28 1 0;}
.billetera-google{flex:3.64 1 0;}
.billetera img{display:block;width:100%;height:auto;}
.billetera:active{transform:scale(.97);opacity:.88;}

/* El QR de respaldo. Va SIEMPRE visible y no detras de un "¿problemas?":
   el que lo necesita es justo el que ya no entendio lo de arriba. */
.alta-qr{margin-top:26px;padding-top:22px;border-top:1px solid var(--linea);}
.alta-qr-marco{width:148px;margin:0 auto 12px;padding:9px;border-radius:12px;
  background:#fff;border:1px solid var(--linea);}
.alta-qr-marco svg{display:block;width:100%;height:auto;}
.alta-qr p{margin:0;font-size:.86rem;color:var(--tinta3);line-height:1.5;
  max-width:300px;margin-left:auto;margin-right:auto;}

@media (prefers-reduced-motion:reduce){
  .alta-ok,.alta-ok-marca::before,.alta-ok-tic path,.alta-sellos i.lleno{animation:none;}
  .alta-ok-marca::before{transform:scale(1);}
  .alta-ok-tic path{stroke-dashoffset:0;}
}

.marca-pie{text-align:center;font-size:.8rem;color:var(--tinta3);padding:0 20px 30px;}
.marca-pie a{color:var(--tinta2);font-weight:600;}

@media (max-width:480px){
  .caja{padding:30px 22px;border-radius:22px;}
  .pag-forma{padding:20px 14px;}
}

/* ── Cumpleaños (opcional) ──
   Los dos selects comparten el estilo de los inputs para que el formulario se
   lea como uno solo. El dia va mas angosto que el mes: "31" contra
   "septiembre". */
.campo label .opcional{font-weight:400;color:var(--tinta3);}
.fila-cumple{display:flex;gap:8px;}
.fila-cumple select{
  flex:1 1 0;min-width:0;
  border:1.5px solid var(--linea);border-radius:12px;padding:13px 15px;
  font:inherit;font-size:1rem;background:var(--papel);color:var(--tinta);
  appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238E9098' d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  padding-right:34px;
}
.fila-cumple select:focus{outline:none;border-color:var(--marca);background-color:#fff;}
/* El dia es un numero corto; el mes, una palabra larga. */
.fila-cumple select#cumpleDia{flex:0 0 92px;}