/* ════════════════════════════════════════════════════════════════════
   ALTA DE IGLESIA — el formulario en capa, sobre la propia página
   ════════════════════════════════════════════════════════════════════
   Antes, «Crea tu iglesia» mandaba a /app: 11,4 MB de Flutter antes de ver el
   primer campo, y después cuatro pantallas. De ahí salen las 11 cuentas que
   existen sin iglesia — gente que se registró y nunca llegó al final.

   Aquí el alta ocurre donde ya estaba el visitante. Tres pasos, y el tercero
   **espera** a que confirme el correo sin que tenga que volver a ningún sitio.

   Decisiones que no son de estética:

   · La capa **no se cierra sola**. Ni con la tecla Esc, ni tocando el fondo,
     si ya hay algo escrito. Lo que se pierde aquí no se recupera: la cuenta
     puede quedar a medias y el correo ya está cogido.
   · Mientras se está creando la cuenta **no se puede cerrar de ninguna
     manera**. Es el único tramo en el que una interrupción deja algo roto en
     el servidor.
   · Los pasos se mueven en horizontal y solo con `transform` y `opacity`.
   · Todo tiene su versión quieta con `prefers-reduced-motion`.
   ════════════════════════════════════════════════════════════════════ */

.alta-fondo{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(12,11,9,.52);opacity:0;
  transition:opacity .34s var(--swoop)}
.alta-fondo.abierto{display:grid;place-items:center;padding:20px}
.alta-fondo.visible{opacity:1}
body.alta-abierta{overflow:hidden}

.alta{position:relative;width:min(520px,100%);background:var(--bone);
  border-radius:24px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(12,11,9,.5);
  transform:translateY(22px) scale(.97);opacity:0;
  transition:transform .4s var(--swoop),opacity .34s var(--swoop)}
.alta-fondo.visible .alta{transform:none;opacity:1}

/* El papel milimetrado de la marca, muy tenue: ata la capa a la página. */
.alta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(12,11,9,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(12,11,9,.03) 1px,transparent 1px);
  background-size:52px 52px}

.alta-cab{display:flex;align-items:center;gap:12px;
  padding:20px 22px 0;position:relative}
.alta-cab .glyph{width:26px;height:26px;flex:0 0 auto}
.alta-paso{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--soft)}
.alta-x{margin-left:auto;width:34px;height:34px;border-radius:11px;border:none;
  background:transparent;color:var(--soft);font-size:19px;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  transition:background .2s,color .2s}
.alta-x:hover{background:var(--line);color:var(--ink)}
.alta-x:disabled{opacity:.35;cursor:not-allowed}

/* La barra de progreso: tres tramos, se llenan al avanzar. */
.alta-barra{display:flex;gap:5px;padding:14px 22px 0}
.alta-barra i{flex:1;height:3px;border-radius:99px;background:var(--line);
  overflow:hidden;position:relative}
.alta-barra i::after{content:"";position:absolute;inset:0;background:var(--acc);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--swoop)}
.alta-barra i.hecho::after{transform:scaleX(1)}

/* El carrusel de pasos. Solo uno ocupa sitio; los demás están fuera del flujo
   para que la capa tenga el alto del paso visible y no el del más largo. */
.alta-pista{position:relative;padding:4px 22px 24px}
.alta-vista{opacity:0;visibility:hidden;position:absolute;inset:4px 22px 24px;
  transform:translateX(26px);
  transition:opacity .3s var(--swoop),transform .36s var(--swoop)}
.alta-vista.activa{opacity:1;visibility:visible;position:relative;inset:auto;
  transform:none}
.alta-vista.atras{transform:translateX(-26px)}

.alta h2{font-size:25px;font-weight:800;letter-spacing:-.025em;margin:16px 0 0;
  line-height:1.15;text-wrap:balance}
.alta .ayuda{font-size:14.5px;color:var(--soft);line-height:1.55;margin:9px 0 0}
.alta .ayuda b{color:var(--char);font-weight:700}

.alta-campo{margin-top:16px}
.alta-campo label{display:block;font-size:12.5px;font-weight:700;
  color:var(--char);margin-bottom:6px}
.alta-campo input{width:100%;font:inherit;font-size:15.5px;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:13px;
  padding:13px 15px;transition:border-color .2s,box-shadow .2s}
.alta-campo input:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(14,159,110,.16)}
.alta-campo input[aria-invalid="true"]{border-color:var(--cor)}
.alta-campo .pista{font-size:12.5px;color:var(--soft);margin-top:6px}
.alta-campo .mal{font-size:12.5px;color:#B3310F;margin-top:6px;display:none}
.alta-campo .mal.se-ve{display:block}
/* La duda sobre el dominio. NO es un error -- de ahí que no sea rojo y que el
   campo no quede marcado como inválido: lo más probable sigue siendo que el
   correo esté bien. Es una pregunta con el arreglo a un clic. */
.alta-campo .duda{font-size:12.5px;line-height:1.5;color:var(--ink);
  margin-top:8px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--bone);display:none}
.alta-campo .duda.se-ve{display:block}
.alta-campo .duda b{font-weight:800}
.alta-campo .duda .opts{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.alta-campo .duda button{font:inherit;font-size:12.5px;font-weight:700;
  padding:7px 12px;border-radius:9px;cursor:pointer;border:1px solid var(--line);
  background:#fff;color:var(--ink)}
.alta-campo .duda button.si{background:var(--acc);border-color:var(--acc);color:#fff}
.alta-campo .duda button:hover{filter:brightness(.97)}

.alta-bot{display:flex;gap:10px;align-items:center;margin-top:20px}
.alta-ir{flex:1;font:inherit;font-weight:800;font-size:15px;color:var(--bone);
  background:var(--ink);border:none;border-radius:13px;padding:14px 20px;
  cursor:pointer;transition:transform .18s var(--swoop),opacity .2s}
.alta-ir:hover:not(:disabled){transform:translateY(-1px)}
.alta-ir:disabled{opacity:.45;cursor:not-allowed}
.alta-atras{font:inherit;font-size:14px;font-weight:700;color:var(--soft);
  background:transparent;border:none;cursor:pointer;padding:12px 6px}
.alta-atras:hover{color:var(--ink)}

/* El nombre de la iglesia acompaña desde el paso 1: lo que se está creando
   tiene que estar a la vista mientras se pide lo demás. */
.alta-eco{display:inline-flex;align-items:center;gap:8px;background:var(--mist);
  color:var(--deep);border-radius:11px;padding:7px 14px;font-size:13px;
  font-weight:700;margin-top:14px;max-width:100%}
.alta-eco span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Paso 3 · esperando el correo. El sobre late despacio: dice «esto sigue
   vivo» sin pedir nada. */
.alta-espera{display:grid;place-items:center;gap:4px;padding:22px 0 6px}
.alta-sobre{width:58px;height:58px;border-radius:17px;background:var(--mist);
  display:grid;place-items:center;color:var(--deep);
  animation:alta-late 2.6s var(--swoop) infinite}
@keyframes alta-late{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.alta-correo{font-weight:800;font-size:15px;margin-top:4px;word-break:break-all;
  text-align:center}
.alta-estado{display:flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--soft);
  margin-top:14px}
.alta-estado .punto{width:7px;height:7px;border-radius:50%;background:var(--acc);
  animation:alta-pulso 1.5s ease-in-out infinite}
@keyframes alta-pulso{0%,100%{opacity:.3}50%{opacity:1}}
.alta-reenviar{background:transparent;border:none;font:inherit;font-size:13.5px;
  font-weight:700;color:var(--deep);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;padding:8px}
.alta-reenviar:disabled{color:var(--soft);text-decoration:none;cursor:default}

/* Paso 4 · el código. El momento que hoy no tiene ningún brillo. */
.alta-codigo{background:var(--ink);border-radius:17px;padding:20px;
  text-align:center;margin-top:18px}
.alta-codigo .et{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  color:#8E8980}
.alta-codigo .val{font-family:var(--mono);font-size:33px;font-weight:600;
  letter-spacing:.14em;color:var(--bone);margin:8px 0 14px}
.alta-copiar{font:inherit;font-size:13.5px;font-weight:800;color:var(--ink);
  background:var(--acc);border:none;border-radius:11px;padding:11px 20px;
  cursor:pointer;transition:background .25s,transform .18s}
.alta-copiar:hover{transform:translateY(-1px)}
.alta-copiar.copiado{background:var(--mist);color:var(--deep)}

.alta-legal{font-size:12px;color:var(--soft);line-height:1.5;margin-top:14px}
.alta-legal a{color:var(--deep)}

/* Un fallo que llega del servidor: va arriba del botón, no en un toast que se
   va solo — el visitante necesita poder releerlo. */
.alta-fallo{display:none;background:var(--corT);color:#8A2A0C;border-radius:12px;
  padding:12px 14px;font-size:13.5px;line-height:1.5;margin-top:16px}
.alta-fallo.se-ve{display:block}

.alta-giro{width:17px;height:17px;border:2px solid rgba(253,252,248,.35);
  border-top-color:var(--bone);border-radius:50%;display:inline-block;
  animation:alta-gira .7s linear infinite;vertical-align:-3px}
@keyframes alta-gira{to{transform:rotate(360deg)}}

@media(max-width:520px){
  .alta-fondo.abierto{padding:0;place-items:stretch}
  .alta{width:100%;border-radius:0;min-height:100svh;display:flex;
    flex-direction:column}
  .alta-pista{flex:1}
  .alta h2{font-size:22px}
}

@media(prefers-reduced-motion:reduce){
  .alta-fondo,.alta,.alta-vista,.alta-barra i::after{transition:none}
  .alta{transform:none}
  .alta-vista{transform:none}
  .alta-sobre,.alta-estado .punto{animation:none}
}

/* ── El eco, que además es el botón de volver ─────────────────────
   Antes había un «Atrás» suelto junto al botón principal: dos acciones con el
   mismo peso visual y una de ellas deshacía. Ahora la vuelta vive pegada al
   dato que cambia, que es donde uno la busca. */
.alta-eco-btn{border:1.5px solid transparent;cursor:pointer;font:inherit;
  font-size:13px;font-weight:700;gap:7px;
  transition:border-color .2s,background .2s}
.alta-eco-btn:hover{border-color:var(--acc);background:#D6F0E3}
.alta-eco-btn svg{flex:0 0 auto;opacity:.7}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* ── La contraseña: ver y medir ───────────────────────────────── */
.alta-clave-caja{position:relative}
.alta-clave-caja input{padding-right:50px}
.alta-ojo{position:absolute;top:50%;right:8px;transform:translateY(-50%);
  width:34px;height:34px;border:none;background:transparent;cursor:pointer;
  color:var(--soft);border-radius:9px;display:grid;place-items:center;
  transition:color .2s,background .2s}
.alta-ojo:hover{color:var(--ink);background:var(--line)}
.alta-ojo svg{width:19px;height:19px}
/* La raya del ojo solo se ve cuando la contraseña está OCULTA: el icono dice
   lo que pasa ahora, no lo que pasaría al pulsarlo. */
.alta-ojo[aria-pressed="true"] .tacha{opacity:0}
.alta-ojo .tacha{transition:opacity .2s}

.alta-fuerza{display:flex;gap:4px;margin-top:8px}
.alta-fuerza i{flex:1;height:4px;border-radius:99px;background:var(--line);
  transition:background .3s var(--swoop)}
.alta-fuerza.n1 i:nth-child(-n+1){background:#E0533A}
.alta-fuerza.n2 i:nth-child(-n+2){background:#E09B3A}
.alta-fuerza.n3 i:nth-child(-n+3){background:#3AA981}
.alta-fuerza.n4 i{background:var(--acc)}
.alta-nivel{font-size:12.5px;margin-top:6px;color:var(--soft);min-height:1.2em;
  line-height:1.45}
.alta-nivel b{font-weight:800}
.alta-nivel.n1 b{color:#B3310F} .alta-nivel.n2 b{color:#8A5A09}
.alta-nivel.n3 b{color:var(--deep)} .alta-nivel.n4 b{color:var(--deep)}

/* ── El visto de los términos ─────────────────────────────────── */
.alta-check{display:flex;gap:11px;align-items:flex-start;margin-top:18px;
  cursor:pointer;font-size:13px;color:var(--char);line-height:1.5}
.alta-check input{appearance:none;flex:0 0 auto;width:20px;height:20px;
  margin:0;border:1.5px solid var(--line);border-radius:6px;background:#fff;
  cursor:pointer;display:grid;place-items:center;
  transition:background .2s,border-color .2s}
.alta-check input::after{content:"";width:10px;height:6px;
  border-left:2.2px solid var(--bone);border-bottom:2.2px solid var(--bone);
  transform:rotate(-45deg) scale(0);transform-origin:50% 50%;
  margin-top:-2px;transition:transform .2s var(--swoop)}
.alta-check input:checked{background:var(--acc);border-color:var(--acc)}
.alta-check input:checked::after{transform:rotate(-45deg) scale(1)}
.alta-check input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.alta-check input[aria-invalid="true"]{border-color:var(--cor)}
.alta-check a{color:var(--deep)}
#alta-mal-terminos{margin-top:7px}

/* ── El logo cargando ─────────────────────────────────────────────
   La marca de Ekklesia se dibuja con una máscara CSS, así que se puede
   rellenar por dentro: debajo hay una franja de color que la recorre y lo que
   se ve es el propio logo llenándose. No es una rueda genérica pegada al
   lado — es la marca haciendo de indicador.

   Solo aparece mientras el servidor está creando la iglesia. Durante la
   espera del correo no hay nada corriendo, y una animación de carga ahí
   estaría mintiendo sobre lo que ocurre. */
.alta-marca{display:none;width:62px;height:61px;position:relative;
  overflow:hidden;background:var(--line);
  -webkit-mask:var(--mark) center/contain no-repeat;
  mask:var(--mark) center/contain no-repeat}
.alta-marca.cargando{display:block}
.alta-marca i{position:absolute;left:-20%;right:-20%;top:0;height:60%;
  background:linear-gradient(180deg,transparent,var(--acc) 45%,var(--deep) 70%,transparent);
  animation:alta-barrido 1.25s cubic-bezier(.5,0,.5,1) infinite}
@keyframes alta-barrido{
  0%{transform:translateY(-110%)}
  100%{transform:translateY(230%)}
}
/* Cuando el logo carga, el sobre se va. */
.alta-sobre.fuera{display:none}

@media(prefers-reduced-motion:reduce){
  /* Sin movimiento el logo se queda relleno y quieto: sigue diciendo «esto
     está pasando» sin nada que se mueva. */
  .alta-marca{background:var(--mist)}
  .alta-marca i{animation:none;top:0;height:100%;
    background:var(--acc);opacity:.55}
}