/* Página «Activa tu cuenta» (inc/activa-cuenta.php, shortcode [scout_activa_cuenta], /activa-tu-cuenta/): pedir el
   enlace, crear la contraseña y «Comprueba tus datos». Campos y botones, de los componentes comunes
   (.formulario-campo, .formulario-acciones, .scout-btn-accion, .scout-alerta). De móvil a escritorio. */

.activa-cuenta {
    max-width: 560px;
    margin: 0 auto;
    padding: 20px 16px;
    border-radius: var(--wp--custom--radio--aviso);
    background: var(--wp--preset--color--base);
}

.activa-cuenta__titulo {
    margin: 0 0 12px;
    color: var(--wp--preset--color--morado);
}

.activa-cuenta__subtitulo {
    margin: 18px 0 6px;
    font-size: 1rem;
}

.activa-cuenta__form {
    margin-top: 12px;
}

.activa-cuenta .scout-alerta {
    margin: 0 0 14px;
}

/* Campo trampa del antiabuso: fuera de la vista y del lector de pantalla (no display:none: algunos programas lo
   detectan y no lo rellenan). */
.activa-cuenta__trampa {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Datos: etiqueta y valor en dos columnas. */
.activa-cuenta__datos {
    display: grid;
    grid-template-columns: minmax(0, 10em) minmax(0, 1fr);
    gap: 4px 12px;
    margin: 0;
}

.activa-cuenta__dato {
    display: contents;
}

.activa-cuenta__dato dt {
    color: var(--wp--custom--accion--gris);
    font-size: 0.85rem;
}

.activa-cuenta__dato dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.activa-cuenta__botones {
    flex-wrap: wrap;
    margin-top: 22px;
}

.activa-cuenta__prueba {
    font-size: 0.85rem;
}

.activa-cuenta__en-linea {
    display: inline;
}

@media (min-width: 600px) {
    .activa-cuenta {
        padding: 28px 32px;
    }
}

/* Botones dentro de un aviso («ya tiene una cuenta»): debajo del texto, en fila, con aire. */
.activa-cuenta__salidas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}