/* =====================================================================
   PÁGINA DEL QR  ·  darse de alta para probar la app
   ---------------------------------------------------------------------
   Esto se rellena de pie, en la puerta del pabellón, con cola detrás y
   con la cobertura que hay dentro de un pabellón. Todo lo de aquí sale
   de esa idea: campos grandes, botón grande, poco texto y nada que
   obligue a hacer zoom.

   Reutiliza los colores y tipos de la app del socio (estilos.css) para
   que quien se registra reconozca después la misma casa.
   ===================================================================== */

/* ---------------------------------------------------------------------
   NADA DE ZOOM AL DAR DOS TOQUES
   ---------------------------------------------------------------------
   El movil entiende dos toques seguidos como "acercame esto". En una
   pagina de leer tiene sentido; aqui no, porque lo que hay son botones,
   y quien da dos toques a un boton no quiere acercarlo: es que ha
   pulsado dos veces. Se quedaba la pantalla ampliada y torcida sin que
   el socio supiera por que ni como deshacerlo.

   "manipulation" quita ESO y solo eso. Pellizcar con dos dedos para
   agrandar sigue funcionando, que es de lo que depende quien no ve bien
   y no se le puede quitar.

   De paso se va el medio segundo que el navegador esperaba antes de
   hacer caso a cada toque, por si acaso llegaba el segundo. Los botones
   responden al momento.
   --------------------------------------------------------------------- */
body.alta {
  touch-action: manipulation;
  height: auto; min-height: 100dvh; overflow-y: auto;
  display: flex; justify-content: center;
  padding: 0 0 max(24px, env(safe-area-inset-bottom));
  background: var(--bg); }
/* Y explicito en lo que se pulsa. "touch-action" no se hereda: el
   navegador mira tambien a los padres, asi que con ponerlo en el body
   deberia bastar, pero eso es fiarse de como lo interprete cada uno.
   Puesto aqui no hay nada que interpretar. */
button, a, input, select, textarea, label, summary {
  touch-action: manipulation;
}


#hoja {
  width: 100%; max-width: 460px;
  padding: max(22px, env(safe-area-inset-top)) 20px 0; }


/* ---------- Cabecera ---------- */
.alta-cab { text-align: center; margin-bottom: 20px; }
.alta-escudo { width: 96px; height: auto; margin: 0 auto 14px; display: block; }
.alta-cab h1 {
  font-size: 25px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; }
.alta-sub { color: var(--dim); font-size: var(--t-s); margin-top: 5px; }

/* La marca de que ha salido bien: un tic grande, sin dibujos raros */
.alta-ok {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--verde); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 900; }


/* ---------- Qué te llevas ---------- */
.alta-ventajas {
  list-style: none; margin: 0 0 22px; padding: 16px 18px;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-m); }
.alta-ventajas li {
  position: relative; padding-left: 24px; margin: 9px 0;
  font-size: var(--t-s); line-height: 1.45; }
.alta-ventajas li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--acento-texto); font-weight: 900; }


/* ---------- El formulario ---------- */
#form-alta label {
  display: block; font-size: var(--t-xs); font-weight: 700;
  color: var(--dim); margin: 14px 0 6px; }
#form-alta input[type="text"],
#form-alta input[type="email"] {
  width: 100%; box-sizing: border-box;
  /* 17px o mas: por debajo de 16, Safari en iPhone hace zoom al tocar el
     campo y descoloca la pagina entera. */
  font-size: 17px; padding: 13px 14px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--linea); border-radius: var(--r-s);
  font-family: inherit; }
#form-alta input:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent); }
#form-alta input.mal { border-color: var(--rojo); }

/* La casilla del consentimiento: grande y con todo el texto pulsable,
   que se marca con el pulgar y de pie. */
.alta-consent {
  display: flex !important; align-items: flex-start; gap: 11px;
  margin: 20px 0 0 !important; padding: 13px 14px;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-s); cursor: pointer;
  font-size: 13.5px !important; font-weight: 400 !important;
  color: var(--texto) !important; line-height: 1.45; }
.alta-consent input { width: 21px; height: 21px; margin: 0; flex: 0 0 auto; }
.alta-consent.mal { border-color: var(--rojo); }

.alta-legal { text-align: center; margin: 12px 0 0; }
.enlace-legal {
  background: none; border: none; padding: 4px;
  color: var(--dim); font-size: var(--t-xs); text-decoration: underline;
  font-family: inherit; cursor: pointer; }

.alta-error { color: var(--rojo); font-size: var(--t-s); min-height: 20px;
              margin-top: 10px; text-align: center; line-height: 1.4; }


/* ---------- El botón ---------- */
.btn-grande {
  display: block; width: 100%; box-sizing: border-box; margin-top: 14px;
  padding: 16px; border: none; border-radius: var(--r-m);
  background: var(--club); color: var(--sobre-club);
  font-family: inherit; font-size: 17px; font-weight: 800;
  text-align: center; text-decoration: none; cursor: pointer; }
.btn-grande:disabled { opacity: .6; cursor: default; }


/* ---------- Cuando ya está ---------- */
.alta-aviso {
  margin-top: 18px; padding: 13px 15px; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--acento) 14%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent);
  font-size: 13.5px; line-height: 1.5; }

.alta-enlace {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 11px 13px; background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--r-s); }
.alta-enlace span {
  flex: 1; min-width: 0; font-family: ui-monospace, monospace;
  font-size: 11.5px; color: var(--dim); overflow-wrap: anywhere; }
.alta-enlace button {
  flex: 0 0 auto; padding: 8px 13px; border-radius: var(--r-s);
  border: 1px solid var(--linea); background: var(--superficie2);
  color: var(--texto); font-family: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer; }

.alta-instalar {
  margin-top: 18px; padding: 14px 16px;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-m); font-size: 13.5px; line-height: 1.55; }
/* Solo el titulo va en su propia linea. El > es importante: sin el, los
   nombres de los botones que van en negrita dentro de cada paso se
   partian tambien en lineas sueltas. */
.alta-instalar > b { display: block; margin-bottom: 6px; font-size: var(--t-s); }
.alta-instalar ol { margin: 0; padding-left: 20px; }
.alta-instalar li { margin: 5px 0; }