/*
 * Páginas públicas del cliente (alta, recuperación de la tarjeta y sus errores). Sin fuentes ni recursos externos.
 * --marca y --sobre-marca los pone el layout con el color del negocio; la tarjeta usa assets/tarjeta-web.css.
 */

:root {
  color-scheme: light;

  --marca: #1f2a37;
  --sobre-marca: #ffffff;
  --escena: #1f2a37;
  --papel: #f4f4f1;
  --superficie: #ffffff;
  --tinta: #1d1f21;
  --tinta-suave: #55585c;
  --borde: #deded8;
  /* Borde de los campos: 3:1 sobre el papel y sobre blanco (WCAG 1.4.11). */
  --borde-campo: #84878c;
  --error: #b3261e;

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --curva-salida: cubic-bezier(0.23, 1, 0.32, 1);
  --margen: max(1.25rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --columna: 34rem;
  --columna-ancha: 68rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1rem/1.5 var(--fuente);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--marca);
  color: var(--sobre-marca);
}

img {
  max-width: 100%;
}

/* touch-action: el toque responde sin esperar a ver si es un doble toque (como ya hacen los botones). */
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  touch-action: manipulation;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}

button {
  font: inherit;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.pa {
  flex: 1;
}

/* ------------------------------------------------------------------ Escena con el color del negocio */

/* --escena: el color del negocio aclarado u oscurecido (Colores::escena), para que la tarjeta se despegue. */
.pa-escena {
  padding: max(1.25rem, env(safe-area-inset-top, 0px)) var(--margen) 2.25rem;
  background: var(--escena);
  color: var(--sobre-marca);
}

.pa-escena ::selection {
  background: var(--sobre-marca);
  color: var(--escena);
}

.pa-escena a:focus-visible,
.pa-escena button:focus-visible,
.pa-escena summary:focus-visible {
  outline-color: var(--sobre-marca);
}

.pa-escena-interior {
  display: grid;
  gap: 1.75rem;
  max-width: var(--columna);
  margin: 0 auto;
}

.pa-negocio {
  margin: 0 0 1.75rem;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.pa-negocio img {
  display: block;
  height: 1.75rem;
  width: auto;
}

.pa-texto h1 {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(1.875rem, 1.35rem + 2.4vw, 2.75rem);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.pa-entradilla {
  max-width: 34ch;
  margin: 0.875rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.pa-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pa-tarjeta .tw {
  --tw-anillo: var(--sobre-marca);
  rotate: -1.5deg;
  transition: rotate 500ms var(--curva-salida);
}

@media (hover: hover) and (pointer: fine) {
  .pa-tarjeta .tw:hover {
    rotate: 0deg;
  }
}

/*
 * El único momento con movimiento de la página: la tarjeta llega como si te la dieran por encima del mostrador.
 * Solo transform y desde un estado ya visible: si el navegador frena la animación, la tarjeta se ve igual.
 */
@media (prefers-reduced-motion: no-preference) {
  .pa-tarjeta .tw {
    animation: pa-llegada 760ms var(--curva-salida) 60ms backwards;
  }

  @keyframes pa-llegada {
    from {
      transform: translateY(32px) rotate(-5deg) scale(0.96);
    }
  }
}

/*
 * Condiciones de la promoción, debajo de la tarjeta (parcial tarjeta-web). En el dorso van a escala de tarjeta (unos 4 px) y
 * no se pueden leer: aquí van a tamaño de cuerpo, plegadas para no cargar la escena. Hereda el color de la escena, que ya
 * cumple el contraste con cada color de negocio. El resumen es una línea de 44 px de alto con una flecha que gira al abrir.
 */
.pa-condiciones {
  width: 100%;
  max-width: 26rem; /* el ancho de la tarjeta (.tw) */
  text-align: center;
}

.pa-condiciones summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.pa-condiciones summary::-webkit-details-marker {
  display: none;
}

/* La flecha es un ángulo dibujado con dos bordes; abierto, apunta hacia arriba. */
.pa-condiciones summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.pa-condiciones[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.pa-condiciones summary:active {
  opacity: 0.7;
}

/* Los saltos de línea que escribió el negocio se respetan. */
.pa-condiciones p {
  margin: 0;
  padding: 0.25rem 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
  .pa-condiciones summary::after {
    transition: transform 200ms var(--curva-salida);
  }

  .pa-condiciones[open] > p {
    animation: pa-condiciones-entra 220ms var(--curva-salida);
  }

  @keyframes pa-condiciones-entra {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
  }
}

/* ------------------------------------------------------------------ Cuerpo */

.pa-cuerpo {
  display: grid;
  gap: 2.75rem;
  max-width: var(--columna);
  margin: 0 auto;
  padding: 2rem var(--margen) 3rem;
}

.pa-accion {
  min-width: 0;
}

/* ------------------------------------------------------------------ Formulario del alta y carteras */

.pa-form {
  display: grid;
  gap: 1.5rem;
  margin: 0;
}

.pa-campos {
  display: grid;
  gap: 1rem;
}

.pa-campo {
  display: grid;
  gap: 0.375rem;
}

.pa-etiqueta {
  font-weight: 650;
  letter-spacing: -0.005em;
}

.pa-ayuda {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* 16 px como mínimo: con menos, Safari en iPhone amplía la página al tocar el campo. */
.pa-input {
  width: 100%;
  min-height: 48px;
  margin-top: 0.25rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--borde-campo);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-size: max(16px, 1rem);
  caret-color: var(--tinta);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pa-input:focus-visible {
  outline-offset: 2px;
}

.pa-input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

.pa-casilla {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  align-items: center;
}

/* La casilla nativa (accesible y con su propio foco), a 24 px y con el color de la tinta. */
.pa-casilla input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--tinta);
  touch-action: manipulation;
}

.pa-casilla input:focus-visible {
  outline-offset: 2px;
}

.pa-casilla input[aria-invalid="true"]:not(:focus-visible) {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

/* La etiqueta entera es el objetivo táctil: al menos 44 px de alto. */
.pa-casilla label {
  display: flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.35;
  cursor: pointer;
}

.pa-casilla .pa-error {
  grid-column: 2;
}

.pa-error {
  margin: 0;
  color: var(--error);
  font-size: 0.9375rem;
  font-weight: 550;
  line-height: 1.4;
}

.pa-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Botones de cartera. El arte es el oficial de cada marca y no se toca (assets/apple y assets/google, con sus condiciones
 * en LEEME.md): ni colores, ni filtros, ni recortes. Se escala entero, siempre en proporción.
 *  - Los dos miden 50 px de alto: Google pide 48 como mínimo y no ser más pequeño que otros botones; Apple, un margen
 *    libre de 0,1 × su altura (5 px). Dejamos 8 px de aire por todos los lados para los dos.
 *  - El botón es solo el contenedor del arte (sin fondo ni relleno): su área táctil es la del propio dibujo, de 50 px.
 *  - El margen negativo del grupo alinea el borde visible con los campos sin quitarles ese aire.
 *  - Ambos son oscuros y la página es clara (el papel del negocio), así que no pierden contraste; el de Apple lleva
 *    además su propio borde.
 */
.pa-botones {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
}

/* La recuperación quita los botones cuando el enlace ya se ha gastado (carteras.js). */
.pa-botones[hidden] {
  display: none;
}

.pa-cartera {
  display: inline-flex;
  min-height: 48px;
  margin: 8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 120ms var(--curva-salida), opacity 160ms ease;
}

/*
 * Ancho de cada botón: el de su arte, o el del grupo menos los 16 px de aire si no cabe (a 320 px el de Google, de
 * 298, no cabe). El porcentaje se resuelve contra el grupo, que tiene ancho propio, y la imagen rellena el botón; así
 * el encogido no depende del tamaño de la propia imagen. El contorno del foco sigue la forma de cada marca.
 */
.pa-cartera-apple {
  width: min(188px, calc(100% - 16px));
  border-radius: 14px;
}

.pa-cartera-google {
  width: min(298px, calc(100% - 16px));
  border-radius: 25px;
}

.pa-cartera-oficial img {
  display: block;
  width: 100%;
  height: auto;
  /* El toque lo recibe el botón: ni arrastre de la imagen ni menú de «guardar imagen» al mantener pulsado en iOS */
  pointer-events: none;
  -webkit-touch-callout: none;
}

.pa-cartera:active {
  transform: scale(0.97);
}

/* Enviando: el botón se atenúa y el estado lo anuncia la nota (role="status"); el cursor avisa de que hay que esperar. */
.pa-enviando .pa-cartera {
  opacity: 0.55;
  cursor: progress;
}

.pa-nota {
  margin: -0.75rem 0 0;
  color: var(--tinta-suave);
  font-size: 0.875rem;
}

.pa-aviso {
  padding: 1.125rem 1.25rem;
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: 0 1px 2px rgb(29 31 33 / 0.06), 0 10px 24px -18px rgb(29 31 33 / 0.3);
}

.pa-aviso p {
  margin: 0;
  color: var(--tinta-suave);
}

.pa-aviso .pa-aviso-titulo {
  margin-bottom: 0.25rem;
  color: var(--tinta);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* Pasos: los marcadores son círculos de sello; el último, ya sellado con el color del negocio. */
.pa-pasos h2 {
  margin: 0 0 1.125rem;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.012em;
}

.pa-pasos ol {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-pasos li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.875rem;
  align-items: center;
  line-height: 1.35;
}

.pa-paso-marca {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.pa-paso-final {
  background: var(--marca);
  color: var(--sobre-marca);
}

/* ------------------------------------------------------------------ Errores */

.pa-accion-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.pa-accion-error form {
  margin: 0;
}

.pa-boton {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--tinta);
  color: #ffffff;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms var(--curva-salida);
}

.pa-boton:active {
  transform: scale(0.97);
}

.pa-enlace {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 500;
}

a.pa-boton {
  text-decoration: none;
}

/* ------------------------------------------------------------------ Recuperación de la tarjeta */

/* En el alta, debajo de los botones: secundario, pero con su objetivo táctil completo. */
.pa-recuperar {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
}

.pa-recuperar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

.pa-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
}

/* ------------------------------------------------------------------ Verificación del correo (código del alta) */

/* El código, grande y espaciado para leerlo de un vistazo; sin bajar de 16 px (Safari amplía la página con menos). */
.pa-cuerpo .pa-input.pa-input-codigo {
  font-size: max(24px, 1.5rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.35em;
  text-align: center;
  /* El espaciado también cuenta tras la última cifra: se compensa a la izquierda para que quede centrado. */
  padding-left: calc(0.875rem + 0.35em);
}

/* El email puede ser largo (hasta 190 caracteres): que parta en vez de ensanchar la página. */
.pa-destino {
  overflow-wrap: anywhere;
  font-weight: 650;
}

/*
 * El formulario del código y sus dos salidas van juntos: un hueco menor que el del cuerpo, para que «Reenviar código» y
 * «Corregir el correo» se lean como parte del paso y no como otra sección.
 */
.pa-verificar {
  display: grid;
  gap: 1.25rem;
}

/* «Reenviar código» y «Corregir el correo»: secundarios, pegados entre sí, con su objetivo táctil completo. */
.pa-ayudas {
  display: grid;
  gap: 0.25rem;
}

.pa-ayudas form,
.pa-ayudas p {
  margin: 0;
}

.pa-ayudas p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
}

/* El botón de reenviar se ve como el enlace de al lado. */
button.pa-enlace {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pa-pasos-recuperar {
  display: grid;
  gap: 0.5rem;
}

.pa-pasos-recuperar p {
  max-width: 40ch;
  margin: 0;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

.pa-aclaracion {
  max-width: 44ch;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
  color: var(--tinta-suave);
  font-size: 0.875rem;
  line-height: 1.45;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ Pie */

.pa-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  width: 100%;
  max-width: calc(var(--columna) + 2 * var(--margen));
  margin: 0 auto;
  padding: 1.25rem var(--margen) max(1.5rem, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--borde);
  color: var(--tinta-suave);
  font-size: 0.875rem;
}

.pa-pie p {
  margin: 0;
}

.pa-pie a {
  display: inline-block;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  color: var(--tinta);
}

/* ------------------------------------------------------------------ Pantalla ancha: texto y tarjeta en paralelo */

@media (min-width: 56rem) {
  .pa-escena {
    padding-block: 2rem 3.5rem;
  }

  .pa-escena-interior,
  .pa-cuerpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    column-gap: 4.5rem;
    max-width: var(--columna-ancha);
  }

  .pa-escena-interior {
    align-items: center;
  }

  .pa-escena-error .pa-escena-interior,
  .pa-escena-sola .pa-escena-interior {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Un solo bloque (formulario o acciones): a la izquierda, alineado con el titular, sin estirarse. */
  .pa-cuerpo-solo {
    grid-template-columns: minmax(0, 30rem);
  }

  .pa-negocio {
    margin-bottom: 3rem;
  }

  .pa-cuerpo {
    align-items: start;
    padding-top: 2.5rem;
  }

  .pa-pie {
    max-width: calc(var(--columna-ancha) + 2 * var(--margen));
  }
}