/*
  Pantalla de registro (index.html).

  Se carga DESPUÉS de css/index.css y reutiliza sus variables de marca, el
  reset de kiosk y `.btn`. Aquí sólo va lo propio del formulario.
*/

/*
  index.css fija `position: fixed` en el body para matar el rebote elástico de
  iOS. En la ruleta da igual (nunca hay scroll), pero aquí el teclado táctil
  puede dejar el último campo fuera de pantalla, así que este contenedor sí
  puede desplazarse.
*/
.body--registro {
  overflow-y: auto;
}

.registro {
  position: relative;   /* Por encima de la marca de agua del evento. */
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6vmin;
  padding: 3vmin 4vmin;
  text-align: center;
}

.brand--registro {
  margin-bottom: 0.5vmin;
}

.registro__titulo {
  font-size: clamp(22px, 4.2vmin, 48px);
  font-weight: 800;
}

.registro__subtitulo {
  font-size: clamp(13px, 2.1vmin, 22px);
  opacity: 0.78;
  max-width: 40ch;
}

/* -------------------------------------------- marca del evento (Expomina) */

/*
  Marca de agua a pantalla completa. Muy tenue a propósito: identifica el
  evento sin competir con el formulario, que es lo que hay que leer.
*/
.evento {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;   /* Nunca intercepta un toque destinado al formulario. */
  z-index: 0;
  opacity: 0.07;
}

.evento__logo {
  width: min(78vw, 900px);
  max-height: 60vh;
  object-fit: contain;
}

.evento__logo[hidden] {
  display: none;
}

/*
  Respaldo tipográfico si todavía no está el logo real del evento.
  El tamaño se mide en `vw` contando las letras del nombre para que quepa
  entero en una línea: a 20vw, "EXPOMINA" se salía por los lados.
*/
.evento__nombre {
  font-size: min(11vw, 190px);
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  max-width: 96vw;
}

/* ------------------------------------------------------------ formulario */

.form {
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  gap: 1.4vmin;
  text-align: left;
  margin-top: 1vmin;
}

.form__campo {
  display: flex;
  flex-direction: column;
  gap: 0.5vmin;
}

.form__label {
  font-size: clamp(12px, 1.9vmin, 18px);
  font-weight: 600;
  opacity: 0.85;
  padding-left: 0.4em;
}

.form__requerido {
  color: var(--orange);
  margin-left: 0.25em;
}

.form__input {
  /*
    16px reales como mínimo: por debajo de eso Safari en iOS hace zoom al
    enfocar el campo, y en un tótem el zoom ya no se deshace solo.
  */
  font-size: max(16px, clamp(16px, 2.3vmin, 22px));
  min-height: var(--touch-target);
  padding: 0 1em;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--white);
  transition: border-color 0.15s ease, background 0.15s ease;

  /* El reset de index.css bloquea la selección en todo: aquí hay que poder
     corregir lo que uno escribió. */
  user-select: text;
  -webkit-user-select: text;
}

.form__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.form__input:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255, 255, 255, 0.12);
}

/* Visible sólo para quien navega con teclado (útil al montar el tótem). */
.form__input:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.form__input--error {
  border-color: #FF5A5A;
}

/* ------------------------------- combo de línea de interés (abierto) */

/*
  Campo de texto con lista de sugerencias propia (ver js/registro.js). Se
  puede tocar una opción o escribir una línea que no esté en la lista.
*/
.combo {
  position: relative;   /* Ancla la lista, que va flotando. */
  display: flex;
  flex-direction: column;
}

/* Deja sitio a la flecha para que el texto escrito no pase por debajo. */
.form__input--combo {
  padding-right: 2.8em;
}

/*
  La flecha va dibujada aquí y no como fondo del input: así tiene su propia
  zona táctil para abrir y cerrar la lista sin escribir.
*/
.combo__toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 3em;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B00' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat center / 1.1em;
  cursor: pointer;
}

.combo__opciones {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;           /* Por encima de los campos que vienen debajo. */
  margin: 0;
  padding: 0.4em;
  list-style: none;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  /*
    Opaco a propósito: la lista tapa el campo siguiente mientras está
    abierta, y con transparencia se leerían los dos textos superpuestos.
  */
  background: #0E2E4D;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  /* El alto máximo lo pone js/registro.js al abrir, según el hueco que quede
     bajo el campo; aquí sólo se dice que sobre eso se desplaza la lista y no
     el formulario entero. */
  overflow-y: auto;
}

.combo__opciones[hidden] {
  display: none;
}

.combo__opcion {
  display: flex;
  align-items: center;
  min-height: 48px;     /* Objetivo táctil cómodo y cinco opciones a la vista. */
  padding: 0 1em;
  border-radius: 12px;
  font-size: max(16px, clamp(16px, 2.2vmin, 21px));
  color: var(--white);
  cursor: pointer;
}

.combo__opcion[hidden] {
  display: none;
}

.combo__opcion:active {
  background: var(--orange);
}

.form__error {
  font-size: clamp(11px, 1.7vmin, 15px);
  color: #FF8A8A;
  padding-left: 0.6em;
  min-height: 1.2em;   /* Reserva el hueco: el formulario no salta al fallar. */
}

.form__error--general {
  text-align: center;
  padding: 0;
}

.btn--registrar {
  width: 100%;
  margin-top: 1.4vmin;
}

/* ----------------------------------------------------------------- redes */

.redes {
  display: flex;
  gap: clamp(14px, 2.6vmin, 28px);
  margin-top: 2vmin;
}

.redes__link {
  display: grid;
  place-items: center;
  width: clamp(44px, 6.4vmin, 60px);
  height: clamp(44px, 6.4vmin, 60px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: var(--white);
  transition: background 0.15s ease, transform 0.1s ease;
}

.redes__link:active {
  background: var(--orange);
  transform: scale(0.94);
}

.redes__link svg {
  width: 52%;
  height: 52%;
  fill: currentColor;
}

/* ------------------------------------------------- horizontal / apaisado */

/*
  El formulario va SIEMPRE en una sola columna, también en apaisado: leer los
  campos de arriba abajo es más rápido en un tótem que saltar de izquierda a
  derecha, y el orden visual coincide con el del DOM y el de la tabulación.

  Como los cinco campos apilados son altos, en apaisado se compacta todo lo
  que no es texto (alto de campo, huecos y el hueco reservado del error) para
  que quepan sin scroll en un tótem de 800px de alto.
*/
@media (orientation: landscape) and (min-width: 700px) {
  /* Se aprieta la separación entre bloques: en columna única cada hueco se
     paga cinco veces. */
  .registro {
    gap: 1vmin;
  }

  .form {
    width: min(100%, 640px);
    gap: 0.9vmin;
  }

  /*
    En apaisado los campos bajan de 72px: 72 era la medida pensada para el
    botón (un único objetivo grande). 54px sigue por encima del mínimo
    táctil recomendado (44px). El botón conserva sus 72px porque es el
    objetivo principal.
  */
  .form__input {
    min-height: 54px;
  }

  /*
    El hueco del mensaje de error se reserva sólo mientras el campo está en
    error: con cinco campos apilados, cinco reservas vacías suman casi 100px
    de aire que empujan el botón fuera de pantalla.
  */
  .form__error:empty {
    min-height: 0;
  }

  .btn--registrar {
    min-height: var(--touch-target);
    margin-top: 0.8vmin;
  }

  .redes {
    margin-top: 1vmin;
  }
}

/* Pantallas bajas: recorta lo prescindible antes que dejar scroll. */
@media (orientation: landscape) and (max-height: 720px) {
  .registro__subtitulo { display: none; }
  .redes { margin-top: 1vmin; }
}

@media (prefers-reduced-motion: reduce) {
  .form__input,
  .redes__link {
    transition: none;
  }
}