/*
 * AutoDetailing — piel del inicio de sesión de la Suite (módulo Login).
 * Se carga desde inc/login-skin.php por el gancho `cflogin_head`, después de login.css.
 * Solo CSS: no cambia marcado, JS ni flujo.
 *
 * Contrato estable con la Suite:
 *   Variables  --cf-login-{bg,card,text,muted,faint,border,input,input-focus,accent,
 *              accent-hover,accent-text,card-shadow,focus-ring,font-titulos}
 *   Clases     .cflogin-body .cflogin-container .cflogin-card .cflogin-logo (h1 / img)
 *              .cflogin-step[.active] #cflogin-step-{login,alta,otp,recover,success}
 *              .cflogin-step-title .cflogin-subtitle .cflogin-form .cflogin-field(-row)
 *              .cflogin-btn-primary .cflogin-admin-link .cflogin-forgot .cflogin-aviso-equipo
 *              .cflogin-error .cflogin-notice .cflogin-otp-target .cflogin-otp-inputs
 *              .cflogin-otp-digit(.filled/.error) .cflogin-link-btn .cflogin-back-link
 *              .cflogin-switch .cflogin-check .cflogin-success-* .cflogin-powered
 */

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2');
	font-weight: 400 800;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

/* ── Tokens (el módulo ya lee --cf-login-*) ──────────── */

:root {
	--ad-ink: #0b0c0e;
	--ad-ink-2: #3a3f46; /* texto secundario: 10,6:1 sobre blanco */
	--ad-ink-3: #4b5058; /* marcador y desactivado: 7,8:1 sobre blanco */
	--ad-line: #e4e5e8;  /* borde de tarjeta */
	--ad-control: #858a93; /* borde de controles: 3,6:1 (WCAG 1.4.11) */
	--ad-error: #b42318;
	--ad-ok: #166534;
	--ad-accent: #cf4208; /* solo detalle de marca, nunca texto pequeño */

	--cf-login-bg: #f4f4f5;
	--cf-login-card: #ffffff;
	--cf-login-text: var(--ad-ink);
	--cf-login-muted: var(--ad-ink-2);
	--cf-login-faint: var(--ad-ink-3);
	--cf-login-border: var(--ad-control);
	--cf-login-input: #ffffff;
	--cf-login-input-focus: #ffffff;
	--cf-login-accent: var(--ad-ink);
	--cf-login-accent-hover: #26282d;
	--cf-login-accent-text: #ffffff;
	--cf-login-card-shadow: none;
	--cf-login-focus-ring: transparent;
	--cf-login-font-titulos: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Base ────────────────────────────────────────────── */

body.cflogin-body {
	font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	padding: 24px 16px;
	color: var(--ad-ink);
}

.cflogin-container {
	max-width: 460px;
	gap: 18px;
}

.cflogin-card {
	border: 1px solid var(--ad-line);
	border-radius: 20px;
	padding: 40px 36px 32px;
}

/* ── Logo: el <h1> queda para lectores; el SVG va de fondo ─
   Cuando la Suite entregue un <img> (filtro `cflogin_marca`) este bloque se desactiva solo. */

.cflogin-logo {
	margin-bottom: 24px;
}

.cflogin-logo:not(:has(img)) {
	height: 48px;
	background: url('../img/brand/logo-horizontal-color.svg') center / contain no-repeat;
}

.cflogin-logo:not(:has(img)) h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cflogin-logo img {
	max-width: none;
	height: 48px;
	width: auto;
}

/* ── Títulos y texto ─────────────────────────────────── */

.cflogin-step-title {
	font-family: var(--cf-login-font-titulos);
	font-weight: 800;
	font-stretch: 125%;
	font-size: 30px;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--ad-ink);
	text-wrap: balance;
}

/* Punto de marca: decorativo, no sustituye texto traducible */
.cflogin-step-title::after {
	content: '.';
	content: '.' / '';
	color: var(--ad-accent);
}

.cflogin-subtitle {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ad-ink-2);
	margin: 10px 0 20px;
}

.cflogin-otp-target {
	color: var(--ad-ink);
	margin: 10px 0 20px;
}

/* ── Animación de entrada: breve y sin texto ilegible ─── */

.cflogin-step {
	animation: cflAdIn 160ms ease-out;
}

@keyframes cflAdIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* ── Campos ──────────────────────────────────────────── */

.cflogin-form {
	gap: 12px;
}

.cflogin-field input {
	height: 56px;
	padding: 0 16px;
	border: 1px solid var(--ad-control);
	border-radius: 14px;
	font-size: 16px;
	font-family: inherit;
	color: var(--ad-ink);
	background: #fff;
	transition: border-color 120ms ease;
}

.cflogin-field input::placeholder {
	color: var(--ad-ink-3);
	opacity: 1;
}

.cflogin-field input:focus {
	border-color: var(--ad-ink);
	box-shadow: none;
}

.cflogin-field input:focus-visible,
.cflogin-otp-digit:focus-visible {
	outline: 2px solid var(--ad-ink);
	outline-offset: 2px;
}

/* ── Botón principal (tinta) ─────────────────────────── */

.cflogin-btn-primary {
	height: 56px;
	margin-top: 6px;
	border-radius: 999px;
	background: var(--ad-ink);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	transition: background-color 120ms ease;
}

.cflogin-btn-primary:hover {
	background: var(--cf-login-accent-hover);
	transform: none;
	box-shadow: none;
}

.cflogin-btn-primary:focus-visible {
	outline: 2px solid var(--ad-ink);
	outline-offset: 3px;
}

.cflogin-btn-primary:disabled {
	opacity: 0.55;
}

/* ── Enlaces secundarios: tinta y subrayados, 44 px ──── */

.cflogin-admin-link,
.cflogin-switch a,
.cflogin-link-btn,
.cflogin-back-link,
.cflogin-aviso a {
	color: var(--ad-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.cflogin-admin-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 4px;
}

.cflogin-form + .cflogin-error + .cflogin-admin-link {
	margin-top: 8px;
}

.cflogin-switch {
	margin-top: 12px;
	font-size: 14px;
	color: var(--ad-ink-2);
}

.cflogin-switch a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 6px;
	font-weight: 600;
}

.cflogin-link-btn {
	min-height: 44px;
	padding: 0 12px;
}

.cflogin-link-btn:disabled {
	color: var(--ad-ink-3);
	text-decoration: none;
}

.cflogin-back-link {
	min-height: 44px;
	margin-top: 8px;
}

.cflogin-back-link svg {
	flex-shrink: 0;
}

.cflogin-admin-link:hover,
.cflogin-switch a:hover,
.cflogin-link-btn:hover:not(:disabled),
.cflogin-back-link:hover {
	color: var(--ad-ink);
	text-decoration-thickness: 2px;
}

.cflogin-admin-link:focus-visible,
.cflogin-switch a:focus-visible,
.cflogin-link-btn:focus-visible,
.cflogin-back-link:focus-visible {
	outline: 2px solid var(--ad-ink);
	outline-offset: 2px;
	border-radius: 6px;
}

.cflogin-aviso-equipo {
	margin: 2px 0 6px;
	font-size: 14px;
	color: var(--ad-ink-2);
}

/* ── Casilla de novedades (alta) ─────────────────────── */

.cflogin-check {
	min-height: 44px;
	align-items: center;
	margin: 2px 0 6px;
	font-size: 14px;
	color: var(--ad-ink);
}

.cflogin-check input {
	flex-shrink: 0;
	margin-top: 0;
	width: 20px;
	height: 20px;
	accent-color: var(--ad-ink);
}

.cflogin-check input:focus-visible {
	outline: 2px solid var(--ad-ink);
	outline-offset: 2px;
}

/* ── Avisos ──────────────────────────────────────────── */

.cflogin-error {
	margin-top: 14px;
	padding: 12px 16px;
	background: #fdf0ef;
	border: 1px solid #f0b8b3;
	border-radius: 12px;
	color: var(--ad-error);
	font-size: 14px;
	font-weight: 500;
	animation-duration: 160ms;
}

.cflogin-notice {
	margin-top: 14px;
	padding: 12px 16px;
	background: #f4f4f5;
	border: 1px solid var(--ad-line);
	border-radius: 12px;
	color: var(--ad-ink);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

/* ── Código de 6 cajas ───────────────────────────────── */

.cflogin-otp-inputs {
	gap: 8px;
	margin-bottom: 4px;
}

.cflogin-otp-digit {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	max-width: 58px;
	height: 56px;
	font-family: inherit;
	font-size: 24px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ad-ink);
	background: #fff;
	border: 1px solid var(--ad-control);
	border-radius: 12px;
	transition: border-color 120ms ease;
}

.cflogin-otp-digit:focus {
	border-color: var(--ad-ink);
	box-shadow: none;
	transform: none;
}

.cflogin-otp-digit.filled {
	border-color: var(--ad-ink);
	background: #f4f4f5;
}

.cflogin-otp-digit.error {
	border-color: var(--ad-error);
	background: #fdf0ef;
	animation-duration: 240ms;
}

.cflogin-otp-actions {
	margin-top: 12px;
	gap: 4px;
}

/* ── Éxito ───────────────────────────────────────────── */

.cflogin-success-icon {
	margin-top: 20px;
	background: rgba(22, 101, 52, 0.1);
	animation: cflAdPop 200ms ease-out;
}

.cflogin-success-icon svg {
	color: var(--ad-ok);
}

@keyframes cflAdPop {
	from { transform: scale(0.9); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

.cflogin-success-msg {
	color: var(--ad-ink);
	font-weight: 700;
}

.cflogin-success-sub {
	color: var(--ad-ink-2);
}

/* ── Pie ─────────────────────────────────────────────── */

.cflogin-powered {
	font-size: 14px;
	color: var(--ad-ink-2);
	opacity: 1;
}

.cflogin-powered strong {
	font-weight: 600;
	color: var(--ad-ink-2);
}

/* ── Móvil ───────────────────────────────────────────── */

@media (max-width: 480px) {
	.cflogin-card {
		padding: 28px 22px 24px;
		border-radius: 18px;
	}

	.cflogin-step-title {
		font-size: 26px;
	}

	.cflogin-otp-digit {
		width: auto;
		height: 52px;
		font-size: 22px;
	}

	.cflogin-otp-inputs {
		gap: 6px;
	}
}

/* ── Plantillas distintas de la centrada ─────────────── */

.cflogin-body.cfl-tpl-split .cflogin-card {
	border: 0;
}

/* ── Movimiento reducido ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.cflogin-step,
	.cflogin-error,
	.cflogin-success-icon,
	.cflogin-otp-digit.error {
		animation: none;
	}

	.cflogin-btn-primary,
	.cflogin-field input,
	.cflogin-otp-digit {
		transition: none;
	}
}