/* Crear contraseña (socios/activar.php). La tarjeta es la de la entrada (.login-box, en styles.css); aquí va lo suyo:
   los dos pasos, uno al lado del otro cuando caben y uno debajo del otro en el móvil. */
.activar-box { max-width:860px; }
.activar-box .login-logo { margin-bottom:18px; }
.activar-box .logo-escudo { height:84px; margin-bottom:0; }
.activar-box > p { margin-bottom:22px; }

.pasos { display:grid; grid-template-columns:1fr 1fr; gap:0 36px; align-items:start; }
.paso { min-width:0; }
.paso + .paso { border-left:1px solid var(--border); padding-left:36px; }
.paso-titulo { display:flex; align-items:center; gap:10px; margin:0 0 6px; font-family:var(--fuente-titulos); font-size:18px; color:var(--primary); }
.paso-num { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--primary); color:#fff; font-family:var(--fuente); font-size:14px; font-weight:700; }
.paso-nota { margin:0 0 16px; font-size:13px; line-height:1.55; color:var(--text-light); }
.paso-ayuda { margin:16px 0 0; font-size:13px; line-height:1.6; color:var(--muted); }
.paso-contacto { margin:6px 0 0; display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; }
.paso-contacto a { color:var(--primary); text-decoration:none; white-space:nowrap; }
.paso-contacto a.paso-contacto-email { white-space:normal; overflow-wrap:anywhere; }
.paso-enlace { color:var(--primary); font-weight:600; text-decoration:none; white-space:nowrap; }
.paso-dos-campos { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.activar-volver { margin:22px 0 0; font-size:13px; text-align:center; }
.activar-volver a { color:var(--primary); font-weight:600; text-decoration:none; }

/* Quien llega con el código en el enlace del email: una sola columna, con crear la contraseña delante y pedir otro
   código recogido debajo */
.activar-box.con-enlace { max-width:440px; }
.con-enlace .pasos { grid-template-columns:1fr; }
.con-enlace #pasoClave { order:1; border-left:0; padding-left:0; }
.con-enlace #pasoCodigo { order:2; margin-top:22px; padding-top:16px; border-top:1px solid var(--border); }
.paso-otro > summary { cursor:pointer; color:var(--primary); font-weight:600; font-size:13px; }
.paso-otro[open] > summary { margin-bottom:14px; }

@media (max-width:760px) {
    .activar-box { max-width:440px; }
    .pasos { grid-template-columns:1fr; }
    .paso + .paso { border-left:0; padding-left:0; margin-top:24px; padding-top:22px; border-top:1px solid var(--border); }
    .con-enlace #pasoClave { margin-top:0; padding-top:0; border-top:0; }
}
@media (max-width:380px) { .paso-dos-campos { grid-template-columns:1fr; } }