/**
 * Viviendax · account.css
 *
 * Estilos comunes para /cuenta/ingresar/, /cuenta/verificar/, /cuenta/completar/.
 * Layout: card centrada con nav arriba (sin footer pesado, página simple).
 */

/* Reset GP chrome en páginas /cuenta/* (selector aplicado vía body_class filter) */
body.vx-account-page .site-header,
body.vx-account-page .site-footer,
body.vx-account-page .generate-back-to-top,
body.vx-account-page .widget-area,
body.vx-account-page #right-sidebar,
body.vx-account-page #left-sidebar {
	display: none !important;
}
body.vx-account-page #page,
body.vx-account-page #page.grid-container,
body.vx-account-page #page.container,
body.vx-account-page #page.site,
body.vx-account-page .site-content,
body.vx-account-page #primary,
body.vx-account-page #main,
body.vx-account-page .content-area {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
body.vx-account-page,
body.vx-account-page .site {
	background: var(--background-soft, #F7F9F8) !important;
}

/* Container */
.vx-account {
	min-height: 100vh;
	display: flex; flex-direction: column;
	background: var(--background-soft);
	font-family: "Inter", system-ui, sans-serif;
	color: var(--text);
}
.vx-account * { box-sizing: border-box; }

/* Nav minimalista (solo logo + back to home) */
.vx-account-nav {
	padding: 16px 24px;
	background: transparent;
	display: flex; align-items: center; justify-content: space-between;
}
.vx-account-nav .vx-wordmark {
	font-family: "Inter", sans-serif;
	font-weight: 700; font-size: 22px; letter-spacing: -.03em;
	color: var(--primary-dark);
	display: inline-flex; align-items: center; gap: 8px;
	text-decoration: none;
}
.vx-account-nav .vx-wordmark .leaf { color: var(--primary); }
.vx-account-nav .back {
	font-size: 14px; color: var(--muted); text-decoration: none;
	display: inline-flex; align-items: center; gap: 6px;
}
.vx-account-nav .back:hover { color: var(--primary-dark); }

/* Card central */
.vx-account-shell {
	flex: 1;
	display: flex; align-items: center; justify-content: center;
	padding: 32px 16px 64px;
}
.vx-account-card {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 40px 36px;
	max-width: 440px;
	width: 100%;
	box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .08), 0 22px 60px -32px rgba(15, 23, 42, .25);
}
.vx-account-card .eyebrow {
	font-family: "Space Mono", monospace;
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--primary-dark); margin: 0 0 10px;
}
.vx-account-card h1 {
	font-family: "Inter", sans-serif;
	font-weight: 700; font-size: 26px; letter-spacing: -.025em;
	line-height: 1.15; margin: 0 0 8px;
}
.vx-account-card .lead {
	color: var(--muted); font-size: 15px; line-height: 1.5;
	margin: 0 0 24px;
}

/* Form */
.vx-account-card form { display: flex; flex-direction: column; gap: 14px; }
.vx-account-card label {
	font-size: 13px; font-weight: 600; color: var(--text);
	margin-bottom: -8px;
}
.vx-account-card input[type="email"],
.vx-account-card input[type="password"],
.vx-account-card input[type="text"],
.vx-account-card input[type="tel"] {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--border);
	border-radius: 10px;
	font-family: "Inter", system-ui, sans-serif;
	font-size: 15px;
	color: var(--text);
	background: var(--background);
	transition: border-color .15s;
}
.vx-account-card input:focus {
	outline: 0;
	border-color: var(--primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* OTP code input · grande y centrado */
.vx-account-card .otp-input {
	font-family: "Space Mono", monospace !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	text-align: center !important;
	letter-spacing: .35em !important;
	padding: 16px 12px !important;
	color: var(--primary-dark) !important;
}

.vx-account-card button[type="submit"] {
	background: var(--primary); color: #fff;
	border: 0; border-radius: 10px;
	padding: 14px;
	font-family: "Inter", sans-serif;
	font-weight: 600; font-size: 15px;
	cursor: pointer; transition: .15s;
	margin-top: 4px;
}
.vx-account-card button[type="submit"]:hover { background: var(--primary-dark); }
.vx-account-card button[type="submit"]:disabled { opacity: .6; cursor: wait; }

/* Toggle password vs OTP */
.vx-account-card .toggle-mode {
	background: transparent; border: 0;
	color: var(--primary-dark);
	font-size: 13px; font-weight: 600;
	cursor: pointer; text-align: center;
	padding: 4px;
	text-decoration: underline;
}
.vx-account-card .toggle-mode:hover { color: var(--primary); }

/* Inline link debajo del input email — "Ya tengo contraseña" */
.vx-account-card a.vx-inline-link {
	display: inline-block;
	margin: -8px 0 14px;
	font-size: 13px;
	color: var(--primary-dark, #2E7D32);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 600;
}
.vx-account-card a.vx-inline-link:hover {
	color: var(--primary, #4CAF50);
}

/* Error / success */
.vx-alert {
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
	margin-bottom: 16px;
	border: 1px solid;
}
.vx-alert.error    { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.vx-alert.success  { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary-border); }
.vx-alert.info     { background: #E0F2FE; color: #075985; border-color: #7DD3FC; }

/* Subtitle / links debajo del form */
.vx-account-card .links {
	margin-top: 16px;
	text-align: center;
	font-size: 13px;
	color: var(--muted);
}
.vx-account-card .links a { color: var(--primary-dark); text-decoration: none; font-weight: 600; }
.vx-account-card .links a:hover { text-decoration: underline; }

.vx-account-card .resend-form {
	display: inline; margin: 0;
}
.vx-account-card .resend-form button {
	background: transparent; border: 0; padding: 0;
	color: var(--primary-dark); font-weight: 600;
	font-family: "Inter", sans-serif; font-size: 13px;
	cursor: pointer; text-decoration: underline;
}

/* Legal pequeño */
.vx-account-card .legal {
	font-size: 12px; color: var(--muted); line-height: 1.5;
	margin: 14px 0 0; text-align: center;
}
.vx-account-card .legal a { color: var(--primary-dark); text-decoration: underline; }

/* Footer line */
.vx-account-foot {
	text-align: center; padding: 16px;
	font-size: 12px; color: var(--muted);
}

@media (max-width: 480px) {
	.vx-account-card { padding: 28px 22px; }
	.vx-account-card h1 { font-size: 22px; }
	.vx-account-card .otp-input { font-size: 26px !important; letter-spacing: .25em !important; }
}