/* /activar/ — el formulario del pase del videojuego.
   Hoja propia porque es la única página del sitio con campos de entrada: no tenía
   sentido cargar estos estilos en las otras veintitantas. Todo sale de los tokens
   de estilo.css; aquí no se inventa ni un color ni un hueco fuera de escala. */

.env-estrecho { max-width: 760px; }

.requisitos { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.requisitos li {
  position: relative; padding-left: var(--space-6); margin-top: var(--space-3);
  font-size: var(--fs-small); color: var(--sobre-hondo-suave); line-height: 1.6;
}
.requisitos li b { color: var(--sobre-hondo); }
.requisitos li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
}
.aviso-ficha {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--linea);
  font-size: var(--fs-label); color: var(--sobre-hondo-suave);
}

/* ---- formulario ---- */
.formulario {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l);
  padding: var(--space-8); box-shadow: var(--sombra-1); margin-top: var(--space-8);
}
.campo { margin-bottom: var(--space-6); }
.campo label {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: var(--fs-small); color: var(--tinta); margin-bottom: var(--space-2);
}
.campo input, .campo select {
  width: 100%; font-family: var(--texto); font-size: var(--fs-body); color: var(--tinta);
  background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio-s);
  padding: var(--space-3) var(--space-4); min-height: 48px;   /* objetivo táctil */
}
.campo input:focus-visible, .campo select:focus-visible {
  outline: none; border-color: var(--azul); box-shadow: var(--anillo);
}
.campo input[aria-invalid="true"] { border-color: #c0392b; }
.ayuda { margin-top: var(--space-2); font-size: var(--fs-label); color: var(--tinta-suave); line-height: 1.5; }
.ayuda code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em;
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 4px; padding: 1px 4px;
}
.error { margin-top: var(--space-2); font-size: var(--fs-label); color: #c0392b; font-weight: 600; }
/* El aviso que viene del servidor: va bajo el botón, centrado y con aire, para que no se lea
   como el error de un campo concreto. */
.error-general {
  margin-top: var(--space-3); text-align: center; line-height: 1.5;
}
.formulario .btn { width: 100%; justify-content: center; }
.pie-form {
  margin-top: var(--space-4); font-size: var(--fs-label);
  color: var(--tinta-suave); line-height: 1.6; text-align: center;
}

/* ---- lo que sale después de enviar ---- */
.resultado {
  margin-top: var(--space-6); background: var(--blanco);
  border: 1px solid var(--linea); border-left: 4px solid var(--teal);
  border-radius: var(--radio-m); padding: var(--space-6);
}
.resultado h3 { font-family: var(--display); font-size: var(--fs-body-lg); color: var(--tinta); }
.resultado p { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--tinta-suave); }
.resultado pre {
  margin: var(--space-4) 0; padding: var(--space-4);
  background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio-s);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-label);
  color: var(--tinta); white-space: pre-wrap; overflow-wrap: anywhere;
}
.resultado .acciones { display: flex; gap: var(--space-3); flex-wrap: wrap; }

@media (max-width: 640px) {
  .formulario { padding: var(--space-6); }
  .resultado .acciones .btn { width: 100%; justify-content: center; }
}