/* =========================================================================
   TULAWOW — Registro: pantalla de "cuenta creada"

   Solo viste `modules/register/register_success.tpl`. El armazón —la escena a
   sangre, el centrado y la tarjeta— ya lo pone `style.css` en
   `body.module-register` y `.tw2-auth-card`; aquí van únicamente las piezas
   propias de esta pantalla: el sello, la barra de espera y el botón.

   El tema lo carga solo en el módulo `register`: config/template_assets.php
   recoge themes/tulawow/modules/<módulo>/css/*.css según el módulo activo.
   ========================================================================= */

/* La tarjeta respira algo más que la del formulario: aquí hay poco contenido y
   apretado se veía desangelado. */
.rg-done { padding-bottom: 2.25rem; }

/* ---------- Sello ----------
   Disco con el filo dorado del tema y un halo suave, para que el "hecho" se
   lea de un vistazo antes que el texto. */
.rg-badge {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin: .25rem auto 1.25rem;
	border: 1px solid rgba(140, 190, 75, .5);
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 35%, rgba(140, 190, 75, .22), rgba(0, 0, 0, .25) 70%),
		var(--ink-2);
	box-shadow:
		inset 0 1px 0 rgba(140, 190, 75, .3),
		0 0 26px rgba(140, 190, 75, .16);
	color: var(--jade);
	font-size: 1.6rem;
	animation: rg-pop .45s cubic-bezier(.2, .9, .3, 1.4) both;
}

/* Con activación por correo no hay nada hecho todavía: solo hay que esperar un
   email. Se cambia el verde por el dorado para no cantar "listo". */
.rg-badge--mail {
	border-color: rgba(248, 157, 65, .5);
	background:
		radial-gradient(circle at 50% 35%, rgba(248, 157, 65, .22), rgba(0, 0, 0, .25) 70%),
		var(--ink-2);
	box-shadow:
		inset 0 1px 0 rgba(248, 157, 65, .3),
		0 0 26px rgba(248, 157, 65, .16);
	color: var(--gold);
}

@keyframes rg-pop {
	from { opacity: 0; transform: scale(.6); }
	to   { opacity: 1; transform: scale(1); }
}

/* ---------- Barra de espera ----------
   `--rg-wait` lo inyecta la plantilla con el mismo número que el `setTimeout`,
   así que la barra acaba de llenarse justo cuando salta el redirect. Es
   decorativa: quien tenga el JS apagado no ve movimiento, pero el botón de
   abajo sigue llevándole al mismo sitio. */
.rg-wait { margin: 1.5rem 0 .25rem; }

.rg-bar {
	height: 2px;
	overflow: hidden;
	background: rgba(158, 151, 131, .18);
}

.rg-bar span {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: left center;
	transform: scaleX(0);
	background: linear-gradient(90deg, rgba(248, 157, 65, .35), var(--gold) 60%, var(--gold-2));
	animation: rg-fill var(--rg-wait, 2400ms) linear forwards;
}

@keyframes rg-fill {
	to { transform: scaleX(1); }
}

.rg-wait-text {
	margin: .6rem 0 0;
	color: var(--dim);
	font-family: var(--title);
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* ---------- Botón ----------
   Deliberadamente NO es `.tw2-btn`: ese se apoya en el sprite `btn.png`, que en
   realidad es una ilustración de 560×184 y se aplasta al estirarla. Esta es la
   misma chapa metálica que los botones del perfil —degradado más dos líneas
   `inset`, una clara arriba y otra oscura abajo—, aquí en su versión corta.

   Sí, la receta está repetida en dos hojas. Se asume mientras `.tw2-btn` siga
   con el sprite; el día que se unifique en `style.css`, estas reglas y las de
   `modules/profile/css/profile.css` se van juntas. */
.rg-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin-top: 1.25rem;
	padding: .7rem 1.6rem;
	background:
		linear-gradient(180deg, rgba(248, 157, 65, .16) 0%, rgba(248, 157, 65, .04) 52%, rgba(0, 0, 0, .28) 100%),
		var(--ink-2);
	border: 1px solid rgba(248, 157, 65, .38);
	color: var(--head);
	font-family: var(--smallcaps);
	font-size: .95rem;
	line-height: 1.25;
	letter-spacing: .14em;
	text-transform: uppercase;
	box-shadow:
		inset 0 1px 0 rgba(248, 157, 65, .22),
		inset 0 -1px 0 rgba(0, 0, 0, .45);
	transition: background .2s ease, border-color .2s ease, color .2s ease,
	            box-shadow .2s ease, transform .12s ease;
}

.rg-cta:hover {
	background:
		linear-gradient(180deg, rgba(248, 157, 65, .30) 0%, rgba(248, 157, 65, .10) 52%, rgba(0, 0, 0, .22) 100%),
		var(--ink-2);
	border-color: var(--gold);
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(248, 157, 65, .38),
		inset 0 -1px 0 rgba(0, 0, 0, .45),
		0 0 20px rgba(248, 157, 65, .16);
}

.rg-cta:active {
	transform: translateY(1px);
	box-shadow: inset 0 2px 7px rgba(0, 0, 0, .55);
}

/* Salida de emergencia para quien no quiera animaciones: el sello aparece sin
   rebote y la barra sale llena en vez de crecer. */
@media (prefers-reduced-motion: reduce) {
	.rg-badge      { animation: none; }
	.rg-bar span   { animation: none; transform: scaleX(1); }
}

@media (max-width: 620px) {
	.rg-badge { width: 58px; height: 58px; font-size: 1.35rem; }
}