/**
 * Rockbros Perú — Rediseño de /mi-cuenta/ (login + registro)
 * Generado desde login_rediseno/prototipo/account.css — NO editar a mano.
 */
/* Tokens: global.css solo define --rb-black/--rb-white/--rb-sale/--rb-yellow.
   Los que faltan se declaran ACOTADOS al componente para no pisar nada global. */
.rb-auth {
	--rb-text: var(--rb-black, #1a1a1a);
	--rb-text-muted: #6b6b6b;
	--rb-border: #e6e6e6;
	--rb-border-input: #c9c9c9;
	--rb-surface-soft: #f7f7f7;
	--rb-error: var(--rb-sale, #dc3545);
	--rb-success: #1e8e3e;
	--rb-font: "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
 * 1 · Contenedor
 * ------------------------------------------------------------------------ */

.rb-auth {
	max-width: 440px;
	margin: 0 auto;
	padding: 0 0 48px;
	font-family: var(--rb-font);
	color: var(--rb-text);
}

/* Astra ya declara border-box globalmente, pero el componente no debe
   depender de eso: sin esto, un input de 100% + padding se sale del
   contenedor y en móvil provoca scroll horizontal. */
.rb-auth,
.rb-auth *,
.rb-auth *::before,
.rb-auth *::after {
	box-sizing: border-box;
}

.rb-auth__title {
	margin: 0 0 4px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-align: center;
	text-transform: uppercase;
	color: var(--rb-black);
}

.rb-auth__subtitle {
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
	color: var(--rb-text-muted);
}

/* ---------------------------------------------------------------------------
 * 2 · Tabs sin JavaScript
 * ---------------------------------------------------------------------------
 * Los radios van ANTES de los paneles para poder usar el combinador `~`.
 * Se ocultan de forma accesible (siguen siendo enfocables con teclado).
 * ------------------------------------------------------------------------ */

.rb-auth__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.rb-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--rb-border);
	margin-bottom: 28px;
}

.rb-auth__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 8px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rb-text-muted);
	cursor: pointer;
	user-select: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.rb-auth__tab:hover {
	color: var(--rb-black);
}

/* Tab activo */
#rb-tab-login:checked ~ .rb-auth__tabs [for="rb-tab-login"],
#rb-tab-register:checked ~ .rb-auth__tabs [for="rb-tab-register"] {
	color: var(--rb-black);
	border-bottom-color: var(--rb-black);
}

/* Anillo de foco visible al navegar con teclado */
#rb-tab-login:focus-visible ~ .rb-auth__tabs [for="rb-tab-login"],
#rb-tab-register:focus-visible ~ .rb-auth__tabs [for="rb-tab-register"] {
	outline: 2px solid var(--rb-black);
	outline-offset: -2px;
}

/* Paneles */
.rb-auth__panel {
	display: none;
}

#rb-tab-login:checked ~ .rb-auth__panels .rb-auth__panel--login,
#rb-tab-register:checked ~ .rb-auth__panels .rb-auth__panel--register {
	display: block;
}

/* ---------------------------------------------------------------------------
 * 3 · Botón de Google + divisor
 * ------------------------------------------------------------------------ */

.rb-auth .rb-google-login {
	margin: 0;
}

.rb-auth a.rb-google-btn,
.entry-content .rb-auth .rb-google-login a.rb-google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	border: 1px solid var(--rb-border-input);
	border-radius: 0; /* D1 */
	background: var(--rb-white);
	color: var(--rb-black);
	font-family: var(--rb-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.rb-auth a.rb-google-btn:hover,
.rb-auth a.rb-google-btn:focus {
	background: var(--rb-surface-soft);
	border-color: var(--rb-black);
	color: var(--rb-black);
	text-decoration: none;
}

.rb-auth .rb-google-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 20px 0;
	color: var(--rb-text-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.rb-auth .rb-google-divider::before,
.rb-auth .rb-google-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rb-border);
}

/* ---------------------------------------------------------------------------
 * 4 · Campos
 * ---------------------------------------------------------------------------
 * 16px es un MÍNIMO, no una preferencia estética: por debajo de 16px iOS
 * Safari hace zoom automático al enfocar el campo y la página salta.
 * ------------------------------------------------------------------------ */

.rb-auth .form-row {
	margin: 0 0 18px;
	padding: 0;
}

.rb-auth label {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rb-text-muted);
}

.rb-auth label .required {
	color: var(--rb-text-muted);
	text-decoration: none;
	border: 0;
}

.rb-auth input[type="text"],
.rb-auth input[type="email"],
.rb-auth input[type="password"] {
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border: 1px solid var(--rb-border-input);
	border-radius: 0;
	background: var(--rb-white);
	color: var(--rb-text);
	font-family: var(--rb-font);
	font-size: 16px; /* NO bajar: dispara el zoom de iOS */
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.rb-auth input[type="text"]:focus,
.rb-auth input[type="email"]:focus,
.rb-auth input[type="password"]:focus {
	border-color: var(--rb-black);
	box-shadow: inset 0 0 0 1px var(--rb-black);
	outline: none;
}

/* Campo con error (lo marca el servidor o el JS de mejora progresiva) */
.rb-auth .form-row--error input {
	border-color: var(--rb-error);
	box-shadow: inset 0 0 0 1px var(--rb-error);
}

.rb-auth .rb-auth__field-error {
	display: block;
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rb-error);
}

/* Toggle de ver contraseña (mismas reglas que login-google.css, aquí
   heredadas para que el prototipo se vea igual). */
.rb-auth .password-input {
	position: relative;
	display: block;
	width: 100%;
}

.rb-auth .password-input input {
	padding-right: 48px;
}

.rb-auth .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background-color: var(--rb-text-muted);
	cursor: pointer;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 20px 20px;
	mask-size: 20px 20px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.rb-auth .show-password-input.display-password {
	background-color: var(--rb-black);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
 * 5 · Fila "Recuérdame / ¿Olvidaste tu contraseña?"
 * ------------------------------------------------------------------------ */

.rb-auth__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 22px;
	flex-wrap: wrap;
}

.rb-auth__remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rb-text);
	cursor: pointer;
}

.rb-auth__remember input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--rb-black);
	cursor: pointer;
}

.rb-auth__forgot {
	font-size: 14px;
	color: var(--rb-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rb-auth__forgot:hover {
	color: var(--rb-black);
}

/* ---------------------------------------------------------------------------
 * 6 · Botón principal
 * ------------------------------------------------------------------------ */

.rb-auth button.rb-auth__submit,
.rb-auth .rb-auth__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 14px 20px;
	border: 1px solid var(--rb-black);
	border-radius: 0;
	background: var(--rb-black);
	color: var(--rb-white);
	font-family: var(--rb-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease;
}

.rb-auth .rb-auth__submit:hover,
.rb-auth .rb-auth__submit:focus {
	background: #333;
	border-color: #333;
	color: var(--rb-white);
}

/* Estado de carga: lo activa el JS de mejora progresiva al enviar, para
   evitar el doble POST. Sin JS el botón simplemente no cambia. */
.rb-auth .rb-auth__submit[aria-busy="true"] {
	opacity: 0.7;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 7 · Beneficios de crear cuenta
 * ------------------------------------------------------------------------ */

.rb-auth__benefits {
	list-style: none;
	margin: 0 0 22px;
	padding: 18px 18px 18px 16px;
	background: var(--rb-surface-soft);
}

.rb-auth__benefits li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--rb-text);
}

.rb-auth__benefits li:last-child {
	margin-bottom: 0;
}

.rb-auth__benefits li::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	background-color: var(--rb-success);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------------------------------------------------------------------------
 * 8 · Texto legal / ayuda
 * ------------------------------------------------------------------------ */

.rb-auth__legal,
.rb-auth .woocommerce-privacy-policy-text {
	margin: 0 0 20px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--rb-text-muted);
}

.rb-auth__legal p,
.rb-auth .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
}

.rb-auth__legal a,
.rb-auth .woocommerce-privacy-policy-text a {
	color: var(--rb-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rb-auth__hint {
	margin: -8px 0 18px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--rb-text-muted);
}

/* ---------------------------------------------------------------------------
 * 9 · Avisos de error / éxito de WooCommerce
 * ------------------------------------------------------------------------ */

.rb-auth .woocommerce-error,
.rb-auth .woocommerce-message,
.rb-auth .woocommerce-info {
	margin: 0 0 20px;
	padding: 12px 14px;
	border: 0;
	border-left: 3px solid var(--rb-black);
	border-radius: 0;
	background: var(--rb-surface-soft);
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
	color: var(--rb-text);
}

.rb-auth .woocommerce-error {
	border-left-color: var(--rb-error);
}

.rb-auth .woocommerce-error li,
.rb-auth .woocommerce-message li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------------------------
 * 10 · Pie de confianza
 * ------------------------------------------------------------------------ */

.rb-auth__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--rb-border);
	font-size: 13px;
	color: var(--rb-text-muted);
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * 11 · Neutralizar el marco que Astra/WooCommerce ponen al formulario
 * ---------------------------------------------------------------------------
 * Medido en staging: Astra le da al <form> `padding: 20px` + borde (el
 * recuadro del diseño viejo) y a `.form-row` `padding: 3px`. Resultado: el
 * input quedaba a 392px y los botones a 398px dentro de un contenedor de 440,
 * o sea desalineados entre sí y respecto del borde.
 *
 * Estas reglas no hacen nada en el prototipo suelto; existen para producción.
 * ------------------------------------------------------------------------ */

.rb-auth .rb-auth__panels form.woocommerce-form,
.rb-auth .rb-auth__panels form.login,
.rb-auth .rb-auth__panels form.register {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.rb-auth .rb-auth__panels .form-row,
.rb-auth .rb-auth__panels .woocommerce-form-row {
	padding: 0;
}

/* Variante simple (recuperar contraseña): sin tabs, mismo ancho y ritmo. */
.rb-auth--simple .rb-auth__subtitle {
	margin-bottom: 28px;
}

.rb-auth__volver {
	margin: 20px 0 0;
	font-size: 14px;
	text-align: center;
}

.rb-auth__volver a {
	color: var(--rb-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rb-auth__volver a:hover {
	color: var(--rb-black, #1a1a1a);
}

/* La cabecera de Astra imprime su propio <h1> "MI CUENTA" alineado a la
   izquierda, que duplicaba el título centrado de la plantilla. La clase
   .rb-auth-screen la pone rb_account_body_class() solo en esta pantalla. */
.rb-auth-screen .ast-article-single > .entry-header,
.rb-auth-screen .site-main .entry-header {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 12 · Móvil
 * ------------------------------------------------------------------------ */

@media (max-width: 600px) {
	.rb-auth {
		max-width: none;
		padding-bottom: 32px;
	}

	.rb-auth__title {
		font-size: 24px;
	}

	.rb-auth__subtitle {
		margin-bottom: 22px;
		font-size: 14px;
	}

	.rb-auth__tab {
		font-size: 13px;
		letter-spacing: 0.05em;
	}

	/* En pantallas muy angostas la fila se parte en dos líneas antes que
	   apretar los targets táctiles. */
	.rb-auth__meta {
		gap: 14px;
	}
}