/* ======================================================================
   Acceso (iniciar sesión / registrarse) — resources/views/auth/*
   ======================================================================
   Pantalla dividida: formulario con campos en píldora (mismo lenguaje que
   los filtros del mapa) + escena animada de Chile (partials/_auth-escena).
   Es independiente de style.css/dark-mode.css (la plantilla Listeo pisaba
   los inputs y el tema oscuro nunca llegaba a estas páginas): todo cuelga
   de .auth y de las variables --a-*; el tema oscuro (html[data-theme="dark"],
   fijado por partials/_theme-init) solo cambia esas variables.
   ====================================================================== */

.auth {
	--a-bg: #f5f6f9;
	--a-field: #ffffff;
	--a-field-border: rgba(16, 24, 40, 0.06);
	--a-field-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
	--a-text: #1d2330;
	--a-muted: #5b6475;
	--a-faint: #8a93a3;
	--a-line: #d3d8e0;
	--a-accent: #dc1238;
	--a-accent-hover: #c40f32;
	--a-accent-shadow: rgba(220, 18, 56, 0.32);
	--a-link: #d10f35;
	--a-ring: rgba(249, 25, 66, 0.26);
	--a-danger: #b42318;
	--a-danger-bg: #fef3f2;
	--a-danger-line: #fecdca;
	--a-ok: #067647;
	--a-ok-bg: #ecfdf3;
	--a-ok-line: #abefc6;
	--a-info: #175cd3;
	--a-info-bg: #eff4ff;
	--a-info-line: #b2ccff;

	margin: 0;
	background: var(--a-bg);
	color: var(--a-text);
	font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color-scheme: light;
	-webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] .auth {
	--a-bg: #101318;
	--a-field: #1a2029;
	--a-field-border: #2f384a;
	--a-field-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
	--a-text: #e6ebee;
	--a-muted: #aab6c2;
	--a-faint: #7d8996;
	--a-line: #394256;
	--a-accent: #dc1238;
	--a-accent-hover: #ee2a4f;
	--a-accent-shadow: rgba(249, 25, 66, 0.28);
	--a-link: #ff7a92;
	--a-ring: rgba(255, 107, 133, 0.34);
	--a-danger: #ff9a90;
	--a-danger-bg: rgba(255, 138, 128, 0.12);
	--a-danger-line: rgba(255, 138, 128, 0.35);
	--a-ok: #7ee2a8;
	--a-ok-bg: rgba(126, 226, 168, 0.12);
	--a-ok-line: rgba(126, 226, 168, 0.35);
	--a-info: #9dbcff;
	--a-info-bg: rgba(143, 180, 255, 0.12);
	--a-info-line: rgba(143, 180, 255, 0.35);
	color-scheme: dark;
}

.auth *,
.auth *::before,
.auth *::after { box-sizing: border-box; }

/* ----------------------------------------------------------------------
   Estructura: escena arriba (móvil) o a la derecha (escritorio)
------------------------------------------------------------------------ */
.auth-grid {
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr;
}

.auth-escena {
	position: relative;
	height: 190px;
	overflow: hidden;
	background: #2a2158;
}

.auth-panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	margin-top: -28px;
	padding: 22px 22px 18px;
	background: var(--a-bg);
	border-radius: 28px 28px 0 0;
	box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.16);
	transition: background-color 0.25s ease;
}

@media (min-width: 900px) {
	.auth-grid {
		grid-template-columns: minmax(440px, 540px) minmax(0, 1fr);
		grid-template-rows: 1fr;
	}
	.auth-panel {
		grid-column: 1;
		grid-row: 1;
		margin-top: 0;
		padding: 28px 44px 22px;
		border-radius: 0;
		box-shadow: none;
	}
	.auth-escena {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: 0;
		height: 100vh;
		height: 100dvh;
	}
}

.auth-panel-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.auth-logo { display: inline-flex; align-items: center; min-height: 44px; }
.auth-logo img { display: block; height: 34px; width: auto; }
html[data-theme="dark"] .auth-logo img { filter: brightness(0) invert(1); }

.auth-herramientas { display: flex; align-items: center; gap: 6px; }

.auth-idiomas { display: flex; align-items: center; }
.auth-idiomas a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 44px;
	padding: 0 4px;
	color: var(--a-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
}
.auth-idiomas a[aria-current="true"] { color: var(--a-text); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--a-accent); }
.auth-idiomas a:hover { color: var(--a-text); }

.auth-tema {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--a-field-border);
	border-radius: 50%;
	background: var(--a-field);
	color: var(--a-muted);
	box-shadow: var(--a-field-shadow);
	cursor: pointer;
	transition: color 0.2s ease, transform 0.2s ease;
}
.auth-tema:hover { color: var(--a-text); }
.auth-tema:active { transform: scale(0.94); }
.auth-tema-luna { display: none; }
html[data-theme="dark"] .auth-tema-sol { display: none; }
html[data-theme="dark"] .auth-tema-luna { display: block; }

.auth-contenido {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	padding: 28px 0 20px;
}

.auth-pie {
	margin-top: auto;
	padding-top: 14px;
	font-size: 12px;
	color: var(--a-faint);
	text-align: center;
}

/* ----------------------------------------------------------------------
   Texto
------------------------------------------------------------------------ */
.auth-titulo {
	margin: 0 0 8px;
	font-family: "Raleway", "Open Sans", sans-serif;
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.15rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--a-text);
	text-wrap: balance;
}
.auth-lead {
	margin: 0 0 26px;
	max-width: 38ch;
	color: var(--a-muted);
	font-size: 15px;
	line-height: 1.55;
}
.auth-lead strong { color: var(--a-text); font-weight: 700; overflow-wrap: anywhere; }

/* ----------------------------------------------------------------------
   Avisos
------------------------------------------------------------------------ */
.auth-aviso {
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 1px solid;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.45;
}
.auth-aviso--ok { background: var(--a-ok-bg); border-color: var(--a-ok-line); color: var(--a-ok); }
.auth-aviso--info { background: var(--a-info-bg); border-color: var(--a-info-line); color: var(--a-info); }
.auth-aviso--error { background: var(--a-danger-bg); border-color: var(--a-danger-line); color: var(--a-danger); }
.auth-aviso a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------------
   Campos en píldora (mismo lenguaje que los filtros de destinos)
------------------------------------------------------------------------ */
.auth-form { display: flex; flex-direction: column; gap: 14px; }

.auth-campo {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 54px;
	padding: 0 20px;
	background: var(--a-field);
	border: 1px solid var(--a-field-border);
	border-radius: 27px;
	box-shadow: var(--a-field-shadow);
	color: var(--a-faint);
	transition: box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease, background-color 0.25s ease;
}
.auth-campo svg { flex: none; }
.auth-campo:focus-within {
	border-color: var(--a-accent);
	box-shadow: 0 0 0 3px var(--a-ring);
	color: var(--a-accent);
}
.auth-campo.es-error { border-color: var(--a-danger); }

.auth-campo input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--a-text);
	font: inherit;
	font-size: 16px;
	box-shadow: none;
}
.auth-campo input::placeholder { color: var(--a-faint); opacity: 1; }
.auth-campo input:-webkit-autofill {
	-webkit-text-fill-color: var(--a-text);
	transition: background-color 9999s ease-out 0s;
}

.auth-error { margin: -6px 6px 0; font-size: 13px; color: var(--a-danger); }
.auth-error a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.auth-campo-pass[hidden],
.auth-fila-extra[hidden] { display: none; }
.auth-campo-pass { animation: auth-aparece 0.28s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes auth-aparece {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

.auth-fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	margin: -4px 4px 0;
}

.auth-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--a-link);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.auth-link[hidden] { display: none; }
.auth-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.auth-link:disabled { color: var(--a-faint); cursor: default; text-decoration: none; }
.auth-link:focus-visible,
.auth-btn:focus-visible,
.auth-tema:focus-visible,
.auth-idiomas a:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 3px; }

/* ----------------------------------------------------------------------
   Consentimiento (registro)
------------------------------------------------------------------------ */
.auth-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 18px;
	background: var(--a-field);
	border: 1px solid var(--a-field-border);
	border-radius: 20px;
	box-shadow: var(--a-field-shadow);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--a-muted);
	cursor: pointer;
}
.auth-consent input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--a-accent);
	cursor: pointer;
}
.auth-consent a { color: var(--a-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------------
   Botones
------------------------------------------------------------------------ */
.auth-acciones { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

.auth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 54px;
	padding: 0 24px;
	border: 1.5px solid transparent;
	border-radius: 27px;
	font-family: "Raleway", "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.auth-btn--primario {
	background: var(--a-accent);
	color: #fff;
	box-shadow: 0 6px 16px var(--a-accent-shadow);
}
.auth-btn--primario:hover { background: var(--a-accent-hover); transform: translateY(-1px); box-shadow: 0 9px 20px var(--a-accent-shadow); }
.auth-btn--primario:active { transform: translateY(0) scale(0.99); }
.auth-btn--primario:disabled { opacity: 0.65; cursor: progress; transform: none; }

.auth-btn--fantasma {
	background: transparent;
	border-color: var(--a-line);
	color: var(--a-text);
}
.auth-btn--fantasma:hover { border-color: var(--a-accent); color: var(--a-link); }

/* ----------------------------------------------------------------------
   Código de 6 dígitos
------------------------------------------------------------------------ */
.auth-campo--codigo { justify-content: center; height: 64px; }
.auth-campo--codigo input {
	flex: none;
	width: 100%;
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0.55em;
	text-indent: 0.55em;
	font-variant-numeric: tabular-nums;
}
.auth-reenviar { display: flex; justify-content: center; margin-top: 4px; }

/* ----------------------------------------------------------------------
   Escena animada (partials/_auth-escena)
------------------------------------------------------------------------ */
.auth-escena {
	--c1: #3f357f; --c2: #d9607f; --c3: #ffc08f;
	--halo-in: rgba(255, 226, 170, 0.9); --halo-out: rgba(255, 200, 140, 0);
	--lejana: #a58fca; --volcan: #8670b6; --nieve: #ffffff; --media: #5d4c93;
	--ladera: #2d5a63; --primer: #1b3f4d;
	--nube: #ffffff; --nube-op: 0.55;
	--etiqueta-bg: rgba(255, 255, 255, 0.96); --etiqueta-tx: #1d2330;
	--condor: rgba(45, 30, 80, 0.7);
}
html[data-theme="dark"] .auth-escena {
	--c1: #060913; --c2: #161c4a; --c3: #3a2f70;
	--halo-in: rgba(190, 200, 255, 0.5); --halo-out: rgba(150, 160, 255, 0);
	--lejana: #2b3064; --volcan: #232857; --nieve: #b9c2f2; --media: #191d45;
	--ladera: #102a3a; --primer: #0b1b29;
	--nube: #8a95ff; --nube-op: 0.16;
	--etiqueta-bg: rgba(22, 27, 36, 0.94); --etiqueta-tx: #ffffff;
	--condor: rgba(8, 10, 24, 0.85);
}

.escena-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.esc-c1 { stop-color: var(--c1); }
.esc-c2 { stop-color: var(--c2); }
.esc-c3 { stop-color: var(--c3); }
.esc-halo-in { stop-color: var(--halo-in); }
.esc-halo-out { stop-color: var(--halo-out); }

.esc-sol { fill: #fff1c9; }
.esc-luna { display: none; }
.esc-luna circle { fill: #eef0ff; }
.esc-luna .esc-crater { fill: #c9cef0; }
html[data-theme="dark"] .esc-sol { display: none; }
html[data-theme="dark"] .esc-luna { display: block; }

.esc-estrellas { fill: #fff; opacity: 0; }
html[data-theme="dark"] .esc-estrellas { opacity: 1; }
.esc-estrellas circle { animation: esc-titila 4.5s ease-in-out infinite; }
.esc-estrellas circle:nth-child(2n) { animation-delay: -1.4s; animation-duration: 5.5s; }
.esc-estrellas circle:nth-child(3n) { animation-delay: -2.8s; animation-duration: 3.8s; }
@keyframes esc-titila { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.esc-nube { fill: var(--nube); opacity: var(--nube-op); animation: esc-nube 90s linear infinite; }
.esc-nube-2 { animation-duration: 130s; animation-delay: -40s; }
.esc-nube-3 { animation-duration: 110s; animation-delay: -75s; }
@keyframes esc-nube {
	from { transform: translateX(-260px); }
	to { transform: translateX(1100px); }
}

.esc-condor { fill: none; stroke: var(--condor); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; animation: esc-condor 46s linear infinite; }
.esc-condor path { fill: var(--condor); stroke: none; }
@keyframes esc-condor {
	0% { transform: translate(-120px, 330px) scale(0.9); }
	50% { transform: translate(520px, 240px) scale(1.1); }
	100% { transform: translate(1120px, 300px) scale(0.9); }
}

.esc-cordillera { fill: var(--lejana); }
.esc-lejana-deriva { animation: esc-deriva 180s linear infinite; }
@keyframes esc-deriva { from { transform: translateX(0); } to { transform: translateX(-1000px); } }

.esc-volcan-cuerpo { fill: var(--volcan); }
.esc-nieve { fill: var(--nieve); opacity: 0.95; }
.esc-humo circle { fill: var(--nieve); opacity: 0; animation: esc-humo 7s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.esc-humo circle:nth-child(2) { animation-delay: 2.3s; }
.esc-humo circle:nth-child(3) { animation-delay: 4.6s; }
@keyframes esc-humo {
	0% { opacity: 0; transform: translate(0, 24px) scale(0.5); }
	20% { opacity: 0.5; }
	100% { opacity: 0; transform: translate(16px, -46px) scale(1.7); }
}

.esc-media { fill: var(--media); }
.esc-ladera { fill: var(--ladera); }
.esc-primer-plano { fill: var(--primer); }

/* Ruta: un ciclo de 14 s — se traza hasta el destino, se queda, se desvanece y vuelve a empezar */
.esc-ruta-base { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.1 14; }
.esc-ruta-trazo {
	fill: none;
	stroke: #fff;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
	animation: esc-trazo 14s linear infinite;
}
@keyframes esc-trazo {
	0% { stroke-dashoffset: 1; opacity: 1; }
	62% { stroke-dashoffset: 0; opacity: 1; }
	88% { stroke-dashoffset: 0; opacity: 1; }
	95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

.esc-viajero { fill: #fff; stroke: #f91942; stroke-width: 3.5; animation: esc-viajero 14s linear infinite; }
@keyframes esc-viajero { 0% { opacity: 1; } 60% { opacity: 1; } 64%, 100% { opacity: 0; } }

.esc-pin { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: 14s cubic-bezier(0.16, 1, 0.3, 1) infinite both; }
.esc-pin-1 { animation-name: esc-pin-1; }
.esc-pin-2 { animation-name: esc-pin-2; }
.esc-pin-3 { animation-name: esc-pin-3; }
.esc-pin-4 { animation-name: esc-pin-4; }
@keyframes esc-pin-1 { 0%, 17% { opacity: 0; transform: translateY(-26px) scale(0.4); } 21%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes esc-pin-2 { 0%, 32% { opacity: 0; transform: translateY(-26px) scale(0.4); } 36%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes esc-pin-3 { 0%, 44% { opacity: 0; transform: translateY(-26px) scale(0.4); } 48%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes esc-pin-4 { 0%, 60% { opacity: 0; transform: translateY(-34px) scale(0.4); } 65%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }

.esc-pin-gota { fill: #f91942; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3)); }
.esc-pin-ojo { fill: #fff; }
.esc-etiqueta rect { fill: var(--etiqueta-bg); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); }
.esc-etiqueta text { fill: var(--etiqueta-tx); font-family: "Open Sans", sans-serif; font-size: 13px; font-weight: 700; text-anchor: middle; }
.esc-etiqueta-final text { font-size: 14px; }

.esc-pulso { fill: none; stroke: #fff; stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: esc-pulso 2.4s ease-out infinite; }
.esc-pulso-2 { animation-delay: 1.2s; }
@keyframes esc-pulso { 0% { opacity: 0.85; transform: scale(0.5); } 100% { opacity: 0; transform: scale(3.2); } }

/* Titular sobre la escena */
.esc-texto {
	position: absolute;
	left: clamp(28px, 4.5vw, 64px);
	top: clamp(28px, 6vh, 72px);
	right: 28px;
	max-width: 17em;
	color: #fff;
	text-shadow: 0 2px 14px rgba(20, 10, 50, 0.45);
	pointer-events: none;
}
.esc-titulo {
	margin: 0 0 10px;
	font-family: "Raleway", "Open Sans", sans-serif;
	font-size: clamp(1.9rem, 1.2rem + 1.9vw, 3.1rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.esc-sub { margin: 0; max-width: 28ch; font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem); line-height: 1.5; opacity: 0.92; }

/* Móvil: la franja muestra la escena completa a lo ancho (x 0-1000, y 180-800 del viewBox) y
   agranda ruta, pines y etiquetas, que a esa escala (~0,37) quedarían ilegibles. Los 28 px
   extra de alto quedan bajo la hoja del formulario, que se superpone a la franja. */
@media (max-width: 899px) {
	.esc-texto { display: none; }
	.auth-escena { height: min(calc(62vw + 28px), 350px); }
	.escena-svg {
		inset: auto;
		left: 0;
		top: -18vw;
		width: 100vw;
		height: 90vw;
	}
	.esc-ruta-trazo { stroke-width: 11; }
	.esc-ruta-base { stroke-width: 8; stroke-dasharray: 0.1 22; }
	.esc-viajero { r: 12; stroke-width: 5; }
	.esc-pos-1 { transform: translate(300px, 728px) scale(2.1); }
	.esc-pos-2 { transform: translate(520px, 668px) scale(2.1); }
	.esc-pos-3 { transform: translate(720px, 563px) scale(2.1); }
	.esc-pos-4 { transform: translate(900px, 432px) scale(2.1); }
}

@media (prefers-reduced-motion: reduce) {
	.esc-nube, .esc-condor, .esc-lejana-deriva, .esc-humo circle, .esc-estrellas circle, .esc-pulso, .esc-viajero { animation: none; }
	.esc-ruta-trazo { animation: none; stroke-dashoffset: 0; }
	.esc-pin { animation: none; opacity: 1; }
	.esc-viajero { opacity: 0; }
	.esc-humo circle { opacity: 0.35; }
	.auth-campo-pass { animation: none; }
}