/**
 * Bankoin KYC v2 — hoja de estilo.
 *
 * Diseño de una sola pregunta por pantalla: cada paso ocupa la pantalla completa,
 * entra con un fundido corto y ofrece el menor número de decisiones posible.
 * La paleta y el logo se heredan del KYC original; la tipografía es Sora.
 */

:root {
	--k-acento: #ccff00;
	--k-acento-fuerte: #a8d600;
	--k-acento-tenue: #f4ffcc;
	--k-tinta: #14171a;
	--k-tinta-suave: #5f6660;
	--k-tinta-tenue: #8b918a;
	--k-fondo: #ffffff;
	--k-fondo-alt: #f7f9f0;
	--k-borde: #e4e7e0;
	--k-borde-fuerte: #14171a;
	--k-error: #c00f0c;
	--k-error-bg: #fdecea;
	--k-exito: #4d8a00;
	--k-exito-bg: #f1ffd6;
	--k-aviso: #9a6700;
	--k-aviso-bg: #fff8e1;
	--k-radio: 14px;
	--k-radio-sm: 10px;
	--k-sombra: 0 1px 2px rgba(20, 23, 26, .06);
	--k-sombra-alta: 0 8px 30px rgba(20, 23, 26, .12);
	--k-fuente: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--k-ancho: 460px;
	--k-transicion: .3s ease-in-out;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.bankoin-kyc2-body {
	background: var(--k-fondo);
	color: var(--k-tinta);
	font-family: var(--k-fuente);
	font-size: 16px;
	line-height: 1.5;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

input, select, textarea, button { font-family: inherit; }
input, select, textarea { accent-color: var(--k-acento-fuerte); }

/* ============================ Estructura ============================ */

/* El alto lo reparte el body: la cabecera va fuera de este contenedor para poder
   ocupar todo el ancho, y el contenido crece para llenar lo que quede. */
.k-app {
	max-width: var(--k-ancho);
	margin: 0 auto;
	width: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Cabecera: el logo va centrado y con aire en su propia franja, separado del
   contenido por una línea, como en la versión anterior. Debajo, la fila de
   navegación (atrás y posición) y la barra de progreso. */
/* Estático: se desplaza con el contenido en vez de quedarse fijo arriba. */
.k-header {
	background: var(--k-fondo);
	width: 100%;
}

/* Franja oscura a todo el ancho: el logo es lima puro y sobre blanco casi no se
   distingue (contraste 1.5:1). Sobre el tinte oscuro de la marca pasa a 15:1 y
   además es la combinación con la que Bankoin se reconoce. */
.k-header-marca {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 20px;
	background: var(--k-tinta);
}

.k-logo { max-height: 30px; width: auto; display: block; }

/* La barra de navegación queda sobre fondo claro y es la que lleva la línea
   que separa la cabecera del contenido. */
.k-header-barra {
	padding: 12px 20px 10px;
	border-bottom: 1px solid var(--k-borde);
}
.k-header-barra[hidden] { display: none; }

/* Alinea la navegación con el contenido de la página, aunque la franja sea ancha. */
.k-header-interior {
	max-width: var(--k-ancho);
	margin: 0 auto;
	width: 100%;
}

.k-header-fila {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 34px;
}

.k-header-espacio { flex: 1; }

/* Retroceso: círculo con flecha y etiqueta, alineado a la izquierda. */
.k-atras {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	background: none;
	padding: 4px 2px;
	color: var(--k-tinta);
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.k-atras-circulo {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border: 1.5px solid var(--k-borde);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--k-transicion), background-color var(--k-transicion);
}
.k-atras:hover .k-atras-circulo { border-color: var(--k-tinta); background: var(--k-fondo-alt); }
.k-atras svg { width: 15px; height: 15px; }
.k-atras[hidden] { display: none; }

.k-omitir {
	border: 0;
	background: none;
	color: var(--k-tinta-suave);
	font-size: 14px;
	cursor: pointer;
	padding: 6px 2px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.k-omitir:hover { color: var(--k-tinta); }
.k-omitir[hidden] { display: none; }

.k-contador {
	font-size: 13px;
	color: var(--k-tinta-tenue);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Barra de progreso de 4 px: presente pero nunca protagonista. */
.k-progreso {
	margin-top: 10px;
	height: 4px;
	border-radius: 2px;
	background: #e3e3e3;
	overflow: hidden;
}
.k-progreso-relleno {
	height: 100%;
	width: 0;
	border-radius: 2px;
	background: var(--k-acento-fuerte);
	transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.k-progreso-wrap[hidden] { display: none; }

/* Etapas nombradas: le dicen al cliente en qué tramo del trámite va. */
.k-etapas {
	display: flex;
	gap: 4px;
	margin-top: 8px;
	list-style: none;
	padding: 0;
}
.k-etapa {
	flex: 1;
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--k-tinta-tenue);
	text-align: center;
	transition: color var(--k-transicion);
}
.k-etapa--activa { color: var(--k-tinta); font-weight: 600; }
.k-etapa--hecha { color: var(--k-acento-fuerte); }

.k-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 8px 20px 24px;
}

/* Las pantallas se desplazan con el sentido del recorrido: breve, legible y sin
   bloquear el siguiente toque. */
.k-pantalla {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.k-pantalla--adelante { animation: k-entrada-adelante .38s cubic-bezier(.22, 1, .36, 1) both; }
.k-pantalla--atras { animation: k-entrada-atras .34s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes k-entrada-adelante {
	from { opacity: 0; transform: translate3d(22px, 0, 0) scale(.992); filter: blur(1.5px); }
	to { opacity: 1; transform: none; filter: none; }
}
@keyframes k-entrada-atras {
	from { opacity: 0; transform: translate3d(-22px, 0, 0) scale(.992); filter: blur(1.5px); }
	to { opacity: 1; transform: none; filter: none; }
}
.k-main--salida-adelante .k-pantalla {
	animation: k-salida-adelante .15s ease-in both;
}
.k-main--salida-atras .k-pantalla {
	animation: k-salida-atras .15s ease-in both;
}
@keyframes k-salida-adelante {
	to { opacity: 0; transform: translate3d(-18px, 0, 0) scale(.995); filter: blur(1px); }
}
@keyframes k-salida-atras {
	to { opacity: 0; transform: translate3d(18px, 0, 0) scale(.995); filter: blur(1px); }
}
@media (prefers-reduced-motion: reduce) {
	.k-pantalla,
	.k-main--salida-adelante .k-pantalla,
	.k-main--salida-atras .k-pantalla { animation: none; }
	.k-progreso-relleno { transition: none; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================ Tipografía ============================ */

/* Título de pantalla: centrado y limitado al 80 % del ancho, para que el salto
   de línea caiga donde toca y no quede una palabra suelta al final. */
.k-pregunta {
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	margin: 12px auto 0;
	letter-spacing: 0;
	text-align: center;
	max-width: 80%;
}
.k-pregunta--corta { font-size: 25px; }

/* Todo el texto de contenido comparte el mismo color; el gris se reserva para
   apoyos menores (notas al pie, etiquetas de campo opcional). */
.k-ayuda {
	font-size: 14.5px;
	color: var(--k-tinta);
	margin: 10px auto 0;
	line-height: 1.55;
	text-align: center;
	max-width: 88%;
}
.k-ayuda--tenue { color: var(--k-tinta-suave); font-size: 13px; }

/* Separador con el texto centrado entre dos líneas. Al ser un rótulo que
   organiza la pantalla —y no contenido— va en gris. */
.k-seccion-titulo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--k-tinta-tenue);
	margin: 24px 0 12px;
	text-align: center;
	/* Debe ocupar todo el ancho: dentro de un contenedor centrado se encogía al
	   tamaño del texto y las líneas quedaban en dos rayitas. */
	width: 100%;
	align-self: stretch;
}
/* Línea en verde de marca: el gris del borde quedaba casi invisible sobre blanco. */
.k-seccion-titulo::before,
.k-seccion-titulo::after {
	content: '';
	flex: 1;
	height: 1.5px;
	border-radius: 1px;
	background: var(--k-acento-fuerte);
}

/* ============================ Tarjetas de opción ============================ */

.k-opciones {
	display: grid;
	gap: 12px;
	margin-top: 22px;
}
.k-opciones--2col { grid-template-columns: 1fr 1fr; }
.k-opciones--lista { grid-template-columns: 1fr; }

/* Tarjeta pulsable. Al elegirla el borde se engrosa y aparece la palomita;
   la pantalla avanza sola, así que no hay botón que buscar después. */
.k-opcion {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px;
	border: 1.5px solid var(--k-borde);
	border-radius: var(--k-radio);
	background: var(--k-fondo);
	color: var(--k-tinta);
	font-size: 16px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--k-transicion), background-color var(--k-transicion), transform .12s ease;
	-webkit-tap-highlight-color: transparent;
}
.k-opcion:hover { border-color: var(--k-tinta-tenue); }
.k-opcion:active { transform: scale(.985); }
.k-opcion--activa {
	border-color: var(--k-borde-fuerte);
	border-width: 2px;
	padding: 15.5px;
	background: var(--k-acento-tenue);
}

/* Variante en rejilla: icono arriba, etiqueta abajo. */
.k-opcion--tarjeta {
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap: 10px;
	padding: 20px 12px;
	min-height: 132px;
}
.k-opcion--tarjeta.k-opcion--activa { padding: 19.5px 11.5px; }

.k-opcion-icono {
	width: 56px;
	height: 56px;
	object-fit: contain;
	display: block;
	pointer-events: none;
}
.k-opcion--lista .k-opcion-icono { width: 34px; height: 34px; }

/* Icono de trazo dentro de una opción (tipos de documento, etc.). */
.k-opcion-trazo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	pointer-events: none;
}
.k-opcion-trazo .kyc-icono-lineal { width: 26px; height: 26px; flex: 0 0 26px; color: var(--k-tinta-suave); }
.k-opcion--activa .k-opcion-trazo .kyc-icono-lineal { color: var(--k-tinta); }
.k-opcion--tarjeta .k-opcion-trazo .kyc-icono-lineal { width: 40px; height: 40px; flex: 0 0 40px; }

.k-opcion-texto { display: block; }
/* Gris claro a propósito: la aclaración debe quedar por detrás del nombre del
   documento, que es lo que el cliente busca al recorrer la lista. */
.k-opcion-sub {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--k-tinta-tenue);
	margin-top: 2px;
}

/* Palomita de selección en la esquina. */
.k-opcion-check {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--k-tinta);
	color: var(--k-acento);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(.6);
	transition: opacity var(--k-transicion), transform var(--k-transicion);
}
.k-opcion--activa .k-opcion-check { opacity: 1; transform: scale(1); }
.k-opcion-check svg { width: 12px; height: 12px; }

/* Bandera en las tarjetas de país. */
.k-bandera {
	width: 34px;
	height: 26px;
	border-radius: 4px;
	object-fit: cover;
	flex: 0 0 auto;
}
.k-opcion--tarjeta .k-bandera { width: 52px; height: 39px; }

/* ============================ Formularios ============================ */

.k-campos { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }

.k-campo { display: flex; flex-direction: column; gap: 6px; }

.k-label { font-size: 14px; font-weight: 500; color: var(--k-tinta); }
.k-label-opcional { font-weight: 400; color: var(--k-tinta-tenue); font-size: 13px; }

.k-input,
.k-select {
	width: 100%;
	padding: 14px 15px;
	font-size: 16px; /* 16 px evita que iOS haga zoom al enfocar */
	border: 1.5px solid var(--k-borde);
	border-radius: var(--k-radio-sm);
	background: var(--k-fondo);
	color: var(--k-tinta);
	transition: border-color var(--k-transicion), box-shadow var(--k-transicion);
	-webkit-appearance: none;
	appearance: none;
}
.k-input:focus,
.k-select:focus {
	outline: none;
	border-color: var(--k-tinta);
	box-shadow: 0 0 0 3px rgba(168, 214, 0, .25);
}
.k-input::placeholder { color: var(--k-tinta-tenue); }
.k-input--error, .k-select--error { border-color: var(--k-error); }

.k-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235f6660' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 12px;
	padding-right: 40px;
}

.k-fila { display: flex; gap: 10px; }
.k-fila > * { flex: 1; min-width: 0; }

.k-select--compact { width: auto; min-width: 170px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
.k-domicilio-pais {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 18px;
	padding: 10px 0;
	border-bottom: 1px solid var(--k-borde);
}
.k-domicilio-pais .k-label { color: var(--k-tinta-suave); font-size: 13px; }
.k-domicilio-busqueda { margin-top: 16px; }
.k-domicilio-busqueda #k-sugerencias { scroll-margin-bottom: 24px; }

/* Campo con la etiqueta montada sobre su propio borde. Se usa en la fecha de
   nacimiento: tres desplegables seguidos necesitan que se vea de un vistazo
   cuál es el día, cuál el mes y cuál el año sin gastar una línea de texto. */
.k-flotante { position: relative; flex: 1; min-width: 0; }
.k-flotante > .k-select {
	padding-top: 17px;
	padding-bottom: 13px;
	background-position: right 12px center;
}
.k-flotante-etq {
	position: absolute;
	top: -7px;
	left: 11px;
	padding: 0 6px;
	background: var(--k-fondo);
	font-size: 11.5px;
	line-height: 1;
	color: var(--k-tinta-tenue);
	pointer-events: none;
	z-index: 1;
}

.k-error-campo {
	font-size: 13px;
	color: var(--k-error);
	display: flex;
	align-items: flex-start;
	gap: 5px;
}

.k-aviso {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: var(--k-radio-sm);
	font-size: 13.5px;
	line-height: 1.5;
	background: var(--k-aviso-bg);
	color: var(--k-aviso);
	border: 1px solid rgba(154, 103, 0, .2);
}
.k-aviso--error { background: var(--k-error-bg); color: var(--k-error); border-color: rgba(192, 15, 12, .2); }
.k-aviso--exito { background: var(--k-exito-bg); color: var(--k-exito); border-color: rgba(77, 138, 0, .25); }

/* Casilla de verificación con área de toque generosa. */
.k-check {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
	font-size: 13.5px;
	line-height: 1.5;
	padding: 4px 0;
	color: var(--k-tinta-suave);
}
.k-check input {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	margin: 1px 0 0;
	cursor: pointer;
}

/* ============================ Botones ============================ */

.k-acciones {
	margin-top: auto;
	padding-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.k-btn {
	width: 100%;
	padding: 16px 20px;
	font-size: 16px;
	font-weight: 600;
	border: 0;
	border-radius: var(--k-radio);
	cursor: pointer;
	transition: background-color var(--k-transicion), opacity var(--k-transicion), transform .12s ease;
	-webkit-tap-highlight-color: transparent;
}
.k-btn:active { transform: scale(.99); }
.k-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.k-btn--primario { background: var(--k-acento); color: var(--k-tinta); }
.k-btn--primario:hover:not(:disabled) { background: var(--k-acento-fuerte); }

.k-btn--oscuro { background: var(--k-tinta); color: #fff; }
.k-btn--oscuro:hover:not(:disabled) { background: #000; }

.k-btn--fantasma {
	background: none;
	color: var(--k-tinta-suave);
	border: 1.5px solid var(--k-borde);
}
.k-btn--fantasma:hover:not(:disabled) { border-color: var(--k-tinta-tenue); color: var(--k-tinta); }

.k-btn--texto {
	background: none;
	color: var(--k-tinta-suave);
	padding: 12px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================ Pantallas de descanso ============================ */

/* Pantalla informativa entre bloques de preguntas: ilustración, una idea y seguir.
   Sirven para explicar por qué pedimos algo y para que el trámite no se sienta
   como un interrogatorio continuo. */
.k-descanso {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px 0;
}
.k-descanso-figura {
	width: 168px;
	height: 168px;
	object-fit: contain;
	margin-bottom: 8px;
}

/* En pantallas cortas la ilustración cede tamaño para que el botón principal
   quepa sin desplazarse: si hay que bajar para encontrarlo, se pierde gente. */
@media (max-height: 860px) {
	.k-descanso-figura { width: 112px; height: 112px; margin-bottom: 2px; }
	.k-seccion-titulo { margin: 12px 0 8px; }
	.k-puntos { gap: 8px; margin-top: 8px; }
	.k-punto-icono { width: 32px; height: 32px; flex: 0 0 32px; }
	.k-acciones { padding-top: 12px; }
	.k-nota-icono { margin-top: 10px; padding: 8px 11px; font-size: 13px; }
	.k-ayuda { margin-top: 8px; }
	.k-descanso { padding: 8px 0; }
	.k-check { font-size: 13px; }
}
@media (max-height: 720px) {
	.k-descanso-figura { width: 108px; height: 108px; }
	.k-pregunta--corta { font-size: 22px; }
}

/* Ilustración por encima del título, centrada, en pantallas que no son de
   descanso (captura de fotos). */
.k-figura-arriba {
	display: flex;
	justify-content: center;
	margin: 4px 0 2px;
}
.k-figura-arriba .k-descanso-figura { margin-bottom: 0; }
.k-figura-principal { width: 100%; }
.k-descanso .k-pregunta { font-size: 25px; margin-top: 6px; }
.k-descanso .k-ayuda { max-width: 340px; }

/* Icono lineal en SVG: el que acompaña a un texto. Las ilustraciones PNG se
   reservan para la figura grande de cada pantalla. */
.kyc-icono-lineal {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--k-acento-fuerte);
	display: block;
}

/* Lista de puntos (qué necesitas, cómo cuidamos tus datos…). El icono y su
   texto se alinean por el centro para que no queden desnivelados. */
.k-puntos { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.k-punto { display: flex; align-items: center; gap: 12px; text-align: left; }
.k-punto-icono {
	width: 36px; height: 36px; flex: 0 0 36px;
	border-radius: 50%;
	background: var(--k-acento-tenue);
	display: flex; align-items: center; justify-content: center;
}
.k-punto-icono .kyc-icono-lineal { width: 19px; height: 19px; flex: 0 0 19px; }
/* Mismo color de texto que el resto del contenido: la lista se lee, no se atenúa. */
.k-punto-texto { font-size: 14.5px; line-height: 1.5; color: var(--k-tinta); }
.k-punto-texto strong { display: block; font-weight: 600; margin-bottom: 1px; }

/* Nota de confianza al pie de una lista: no es algo que el cliente deba
   preparar, así que va fuera de «Ten a la mano». */
.k-nota-icono {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 18px;
	padding: 11px 13px;
	border-radius: var(--k-radio-sm);
	background: var(--k-fondo-alt);
	font-size: 13.5px;
	line-height: 1.45;
	text-align: left;
	color: var(--k-tinta);
}
.k-nota-icono .kyc-icono-lineal { width: 18px; height: 18px; flex: 0 0 18px; }

/* Enlace que abre una explicación («¿por qué preguntamos esto?»). Discreto,
   pero visible para quien duda antes de responder. */
.k-info {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 14px auto 0;
	padding: 8px 2px;
	border: 0;
	background: none;
	color: var(--k-tinta-suave);
	font-size: 13.5px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.k-info:hover { color: var(--k-tinta); }
.k-info .kyc-icono-lineal { width: 17px; height: 17px; flex: 0 0 17px; }

/* Enlace de texto dentro del contenido. */
.k-enlace {
	color: var(--k-tinta);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
}

/* ============================ Cámara ============================ */

.k-camara {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: #000;
	display: flex;
	flex-direction: column;
}

.k-camara-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.k-camara-video--espejo { transform: scaleX(-1); }

/* Capa oscura con un recorte transparente: el marco guía real.
   El recorte se dibuja con clip-path para que el hueco no tenga bordes duros. */
/* Arranca invisible: el marco solo se revela cuando la cámara ya da imagen y la
   orientación es la correcta, para no enseñarlo mientras se pide girar. */
.k-camara-capa {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
}

.k-marco {
	position: absolute;
	left: 50%;
	top: 44%;
	transform: translate(-50%, -50%);
	border: 4px dashed rgba(255, 255, 255, .92);
	border-radius: 14px;
	/* El exterior lo oscurece y desenfoca .k-camara-velo, que se ajusta por JS al
	   hueco del marco. Antes lo hacía una sombra gigante, que oscurece pero no
	   puede desenfocar, y sin desenfoque mucha gente encuadra de cualquier manera. */
	transition: border-color var(--k-transicion), box-shadow var(--k-transicion), width .3s ease, height .3s ease;
}

/* Credencial (85,6 × 54 mm) y hoja de pasaporte. En vertical el marco lo limita
   el ancho de la pantalla; al girar el teléfono pasa a limitarlo el alto, y el
   documento aprovecha casi todo el sensor: ahí es donde gana nitidez el texto. */
/* Algo más pequeño que el ancho de la pantalla: deja ver qué queda fuera y,
   como la foto se guarda con margen, el documento entra entero aunque se
   desencuadre un poco. */
.k-marco--tarjeta { width: 80vw; max-width: 380px; height: calc(80vw * .63); max-height: 240px; }
/* Página de datos de un pasaporte: 125 x 88 mm. Se encuadra UNA página, no el
   documento abierto entero. */
.k-marco--pasaporte { width: 80vw; max-width: 380px; height: calc(80vw * .704); max-height: 268px; }
/* Hoja vertical (carta y A4 rondan 1:1.35): un recibo entero, no una franja. */
.k-marco--hoja {
	width: 78vw; max-width: 360px;
	height: calc(78vw * 1.35); max-height: 62vh;
}

.k-marco--ovalo {
	border-radius: 50%;
	width: 74vw; max-width: 300px;
	height: calc(74vw * 1.32); max-height: 396px;
}

/* En horizontal los controles pasan a la derecha, como en las apps de cámara:
   así el marco dispone de todo el alto y el documento cubre bastante más
   superficie del sensor (en torno al doble de píxeles útiles). */
@media (orientation: landscape) {
	.k-marco { top: 50%; left: calc(50% - 44px); }
	.k-marco--tarjeta {
		width: auto; max-width: 78vw;
		height: 88vh; max-height: none;
		aspect-ratio: 1.585;
	}
	.k-marco--pasaporte {
		width: auto; max-width: 78vw;
		height: 88vh; max-height: none;
		aspect-ratio: 1.39;
	}
	.k-marco--ovalo { height: 86vh; width: calc(86vh * .76); max-width: none; max-height: none; }
	.k-marco--hoja { height: 88vh; width: calc(88vh / 1.35); max-width: 78vw; max-height: none; }

	/* Con left, right y width a la vez el navegador ignora `right`, así que la
	   barra se quedaba pegada a la izquierda: `inset` lo fija sin ambigüedad. */
	.k-camara-barra {
		flex-direction: column-reverse;
		inset: 0 0 0 auto;
		width: 104px;
		padding: 16px 14px;
		padding-right: calc(14px + env(safe-area-inset-right));
		justify-content: center;
		gap: 20px;
	}
	.k-camara-secundario {
		width: auto;
		flex: 0 0 auto;
		flex-direction: column;
		gap: 12px;
	}
	.k-obturador { width: 66px; height: 66px; flex: 0 0 66px; margin: 0; }
	.k-camara-titulo { padding-top: calc(10px + env(safe-area-inset-top)); font-size: 14px; }
	.k-camara-guia { bottom: 16px; left: calc(50% - 48px); max-width: calc(100% - 140px); }
	.k-camara-diag { top: 34px; right: 106px; font-size: 9.5px; }
}

/* Invitación a girar el teléfono para los documentos apaisados. */
.k-girar {
	position: absolute;
	inset: 0;
	z-index: 6;
	background: rgba(10, 12, 14, .93);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
}
.k-girar.k-oculto { display: none !important; }
.k-girar-caja { max-width: 300px; color: #fff; }
.k-girar-icono {
	width: 92px;
	height: 92px;
	color: var(--k-acento);
	margin-bottom: 18px;
	animation: k-girar-anim 2.4s ease-in-out infinite;
}
@keyframes k-girar-anim {
	0%, 45% { transform: rotate(0deg); }
	60%, 90% { transform: rotate(-90deg); }
	100% { transform: rotate(0deg); }
}
.k-girar-titulo { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.k-girar-texto { font-size: 14.5px; line-height: 1.5; margin: 0 0 22px; color: rgba(255, 255, 255, .82); }
.k-girar-omitir {
	background: none;
	border: 0;
	color: rgba(255, 255, 255, .7);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	padding: 8px;
}
.k-girar-omitir:hover { color: #fff; }
/* Verde cuando la imagen ya cumple: nitidez, luz y encuadre. */
/* Al cumplir todos los requisitos el marco se vuelve verde y sólido, con un
   halo que lo hace inconfundible: antes el cambio pasaba desapercibido. */
.k-marco--listo {
	border-color: var(--k-acento);
	border-style: solid;
	border-width: 5px;
	box-shadow: 0 0 22px 4px rgba(204, 255, 0, .5);
}
.k-marco--error { border-color: #ff6b6b; }

/* Esquinas marcadas para reforzar dónde debe quedar el documento. */
.k-marco-esquina {
	position: absolute;
	width: 32px;
	height: 32px;
	border: 5px solid var(--k-acento);
	opacity: .95;
}
.k-marco-esquina--si { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.k-marco-esquina--sd { top: -3px; right: -3px; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.k-marco-esquina--ii { bottom: -3px; left: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.k-marco-esquina--id { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.k-marco--ovalo .k-marco-esquina { display: none; }

/* Mensaje de guía en vivo ("acércate", "mantén firme", "no se ve nítido"). */
.k-camara-guia {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 148px; /* respaldo; en vertical el JS lo ancla bajo el marco */
	max-width: min(86%, 340px);
	width: max-content;
	text-align: center;
	line-height: 1.35;
	padding: 9px 16px;
	border-radius: 16px;
	background: rgba(0, 0, 0, .78);
	color: #fff;
	font-size: 14.5px;
	font-weight: 500;
	text-align: center;
	backdrop-filter: blur(6px);
	transition: background-color var(--k-transicion);
	z-index: 3;
}
.k-camara-guia--ok { background: rgba(77, 138, 0, .92); }
.k-camara-guia--mal { background: rgba(192, 15, 12, .86); }

.k-camara-titulo {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 18px 20px;
	padding-top: calc(18px + env(safe-area-inset-top));
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
	z-index: 3;
}

/* Mientras el navegador pide permiso y arranca el vídeo la pantalla se quedaba
   en negro y parecía un fallo; esta capa explica que está preparándose. */
.k-camara-cargando {
	position: absolute;
	inset: 0;
	z-index: 7;
	background: #0b0d0e;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	color: rgba(255, 255, 255, .85);
	font-size: 15px;
	transition: opacity .25s ease;
}
.k-camara-cargando.k-oculto { display: none !important; }
.k-camara-cargando .k-spinner { border-color: rgba(255, 255, 255, .25); border-top-color: var(--k-acento); }
.k-camara-cargando p { margin: 0; }

/* Panel de medidas de la cámara (solo con debug=1 en la dirección). */
.k-camara-diag {
	position: absolute;
	top: 58px;
	left: 10px;
	right: 10px;
	z-index: 4;
	padding: 7px 9px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .72);
	color: #ccff00;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10.5px;
	line-height: 1.5;
	pointer-events: none;
}

.k-camara-barra {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
	padding-bottom: calc(20px + env(safe-area-inset-bottom));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	z-index: 3;
}

/* Obturador: es la acción principal, así que va en el verde de la marca. Cuando
   la imagen ya cumple, se refuerza con un halo para invitar a pulsar. */
.k-obturador {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 4px solid rgba(255, 255, 255, .92);
	background: var(--k-acento);
	cursor: pointer;
	padding: 0;
	transition: transform .12s ease, box-shadow var(--k-transicion), opacity var(--k-transicion);
	flex: 0 0 70px;
	margin: 0 auto;
}
.k-obturador:active { transform: scale(.92); }
.k-obturador:disabled { opacity: .4; cursor: not-allowed; }
.k-obturador--listo {
	box-shadow: 0 0 0 6px rgba(204, 255, 0, .32);
	animation: k-obturador-listo 1.6s ease-in-out infinite;
}
@keyframes k-obturador-listo {
	0%, 100% { box-shadow: 0 0 0 5px rgba(204, 255, 0, .28); }
	50% { box-shadow: 0 0 0 11px rgba(204, 255, 0, .12); }
}

.k-camara-secundario {
	width: 52px;
	flex: 0 0 52px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* flex: 0 0 auto evita que se aplasten en óvalos cuando hay varios en columna. */
.k-camara-btn-icono {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(6px);
	padding: 0;
}
.k-camara-btn-icono svg { width: 22px; height: 22px; flex: 0 0 22px; }

/* Contador de disparo automático. */
.k-cuenta {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 88px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, .6);
	pointer-events: none;
	z-index: 4;
	animation: k-late .7s ease-in-out infinite;
}
@keyframes k-late {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.12); opacity: .85; }
}

/* Destello al capturar: confirma el disparo sin sonido. */
.k-flash {
	position: absolute;
	inset: 0;
	background: #fff;
	z-index: 5;
	pointer-events: none;
	animation: k-flash .32s ease-out forwards;
}
@keyframes k-flash {
	from { opacity: .9; }
	to { opacity: 0; }
}

/* Vista previa de la foto tomada, para aceptarla o repetirla. */
.k-previa { display: flex; flex-direction: column; flex: 1; }
.k-previa-imagen {
	width: 100%;
	border-radius: var(--k-radio);
	border: 1.5px solid var(--k-borde);
	display: block;
	margin-top: 18px;
	background: var(--k-fondo-alt);
}
.k-previa-imagen--selfie { max-width: 260px; margin-left: auto; margin-right: auto; }

/* Vista rasterizada de la primera página de un comprobante PDF. El canvas solo
   sirve para previsualizar; el Data URL completo sigue siendo el archivo enviado. */
.k-pdf-previa {
	width: 100%;
	max-width: 440px;
	margin: 18px auto 0;
	border: 1.5px solid var(--k-borde);
	border-radius: var(--k-radio);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.k-pdf-previa-cargando {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	padding: 24px;
	color: var(--k-tinta-suave);
	font-size: 13px;
	text-align: center;
}
.k-pdf-previa-lienzo {
	display: block;
	width: 100%;
	max-height: 58vh;
	object-fit: contain;
	background: #fff;
}
.k-pdf-previa-pie {
	padding: 8px 12px;
	background: var(--k-fondo-alt);
	color: var(--k-tinta-suave);
	font-size: 12px;
	text-align: center;
}
.k-pdf-previa-abrir {
	color: var(--k-acento-fuerte);
	font-weight: 600;
	text-underline-offset: 3px;
}
.k-pdf-previa--compacta {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.k-pdf-previa--compacta .k-pdf-previa-cargando { min-height: 112px; padding: 10px; }
.k-pdf-previa--compacta .k-pdf-previa-lienzo { max-height: none; min-height: 112px; object-fit: cover; }
.k-pdf-previa--compacta .k-pdf-previa-pie { display: none; }

/* ============================ Cargas y esperas ============================ */

.k-cargando {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 48px 20px;
	text-align: center;
	flex: 1;
}
.k-cargando p { margin: 0; color: var(--k-tinta-suave); font-size: 15px; }
.k-cargando .k-cargando-nota { font-size: 13px; color: var(--k-tinta-tenue); }

.k-spinner {
	width: 38px;
	height: 38px;
	border: 3px solid var(--k-borde);
	border-top-color: var(--k-acento-fuerte);
	border-radius: 50%;
	animation: k-girar .8s linear infinite;
}
.k-spinner--sm { width: 18px; height: 18px; border-width: 2px; }
@keyframes k-girar { to { transform: rotate(360deg); } }

/* Spinner dentro del buscador de direcciones. */
.k-input-wrap { position: relative; }
.k-input-spinner {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
.k-input-wrap .k-input { padding-right: 42px; }

/* Sugerencias del buscador de direcciones. */
.k-sugerencias {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	border: 1.5px solid var(--k-borde);
	border-radius: var(--k-radio-sm);
	overflow: hidden;
	box-shadow: var(--k-sombra-alta);
	max-height: min(300px, 34vh);
	overflow-y: auto;
}
.k-sugerencia {
	padding: 13px 15px;
	font-size: 14.5px;
	cursor: pointer;
	border-bottom: 1px solid var(--k-borde);
	transition: background-color var(--k-transicion);
	line-height: 1.4;
}
.k-sugerencia:last-child { border-bottom: 0; }
.k-sugerencia:hover, .k-sugerencia--activa { background: var(--k-fondo-alt); }
.k-sugerencia-principal { font-weight: 500; display: block; }
.k-sugerencia-sec { font-size: 13px; color: var(--k-tinta-suave); display: block; margin-top: 1px; }

.k-buscando {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 2px;
	font-size: 14px;
	color: var(--k-tinta-suave);
}

/* Esqueleto de carga mientras se leen los datos del documento. */
.k-esqueleto {
	height: 46px;
	border-radius: var(--k-radio-sm);
	background: linear-gradient(90deg, var(--k-fondo-alt) 25%, #eef1e6 50%, var(--k-fondo-alt) 75%);
	background-size: 200% 100%;
	animation: k-brillo 1.3s ease-in-out infinite;
}
@keyframes k-brillo {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

/* ============================ Datos leídos del documento ============================ */

/* Campo autocompletado por la lectura del documento: se marca para que el
   cliente entienda que ya lo llenamos por él y solo debe confirmarlo. */
.k-campo--leido .k-input { background: var(--k-exito-bg); border-color: rgba(77, 138, 0, .4); }
.k-leido-sello {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--k-exito);
	background: var(--k-exito-bg);
	padding: 2px 8px;
	border-radius: 999px;
	margin-left: 6px;
	vertical-align: middle;
}
.k-leido-sello svg { width: 10px; height: 10px; }

/* ============================ Modal ============================ */

.k-modal-fondo {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(20, 23, 26, .55);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
	animation: k-aparecer .22s ease both;
}
@keyframes k-aparecer { from { opacity: 0; } to { opacity: 1; } }

.k-modal {
	width: 100%;
	max-width: var(--k-ancho);
	background: var(--k-fondo);
	border-radius: 20px 20px 0 0;
	padding: 26px 22px;
	padding-bottom: calc(26px + env(safe-area-inset-bottom));
	animation: k-subir .3s cubic-bezier(.2, .8, .3, 1) both;
	max-height: 88vh;
	overflow-y: auto;
}
@keyframes k-subir {
	from { transform: translateY(28px); opacity: .6; }
	to { transform: none; opacity: 1; }
}
.k-modal h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.k-modal p { margin: 0 0 18px; font-size: 14.5px; color: var(--k-tinta-suave); line-height: 1.55; }
.k-modal-acciones { display: flex; flex-direction: column; gap: 9px; }

@media (min-width: 520px) {
	.k-modal-fondo { align-items: center; padding: 20px; }
	.k-modal { border-radius: 20px; }
}

/* ============================ Revisión final ============================ */

.k-resumen { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.k-resumen-grupo {
	border: 1.5px solid var(--k-borde);
	border-radius: var(--k-radio);
	overflow: hidden;
}
.k-resumen-cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 15px;
	background: var(--k-fondo-alt);
	font-size: 13.5px;
	font-weight: 600;
}
.k-resumen-editar {
	border: 0;
	background: none;
	color: var(--k-tinta-suave);
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 2px 4px;
}
.k-resumen-editar:hover { color: var(--k-tinta); }
.k-resumen-cuerpo { padding: 6px 15px 12px; }
.k-resumen-fila {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 7px 0;
	font-size: 14px;
	border-bottom: 1px solid var(--k-borde);
}
.k-resumen-fila:last-child { border-bottom: 0; }
.k-resumen-etq { color: var(--k-tinta-suave); flex: 0 0 auto; }
.k-resumen-val { text-align: right; font-weight: 500; word-break: break-word; }

.k-miniaturas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px 15px 14px; }
.k-miniatura {
	position: relative;
	border-radius: var(--k-radio-sm);
	overflow: hidden;
	border: 1.5px solid var(--k-borde);
	background: var(--k-fondo-alt);
	aspect-ratio: 4 / 3;
}
.k-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-miniatura-etq {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 5px 8px;
	background: rgba(20, 23, 26, .72);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
}
.k-miniatura--pdf { display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--k-tinta-suave); }

/* ============================ Pantalla final ============================ */

.k-final { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; }
.k-final-marca {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--k-acento);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	animation: k-brinco .5s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes k-brinco {
	from { transform: scale(.4); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
.k-final-marca svg { width: 40px; height: 40px; color: var(--k-tinta); }
.k-final-figura {
	display: block;
	width: min(100%, 220px);
	height: auto;
	object-fit: contain;
	margin: 0 auto 14px;
	animation: k-brinco .5s cubic-bezier(.3, 1.4, .5, 1) both;
}

/* ============================ Utilidades ============================ */

.k-oculto { display: none !important; }
.k-solo-lectores {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.k-centro { text-align: center; }

.k-qr-pantalla { text-align: center; align-items: center; }
.k-qr-icono {
	width: 58px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 8px auto 14px;
	border-radius: 18px;
	background: rgba(204, 255, 0, .12);
	color: var(--k-acento);
}
.k-qr-icono svg { width: 30px; height: 30px; }
.k-qr-pantalla .k-ayuda { max-width: 430px; }
.k-qr {
	width: 240px;
	height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 18px auto 14px;
	padding: 10px;
	background: #fff;
	border-radius: 14px;
}
.k-qr img { width: 220px; height: 220px; display: block; }
.k-qr-ayuda { font-size: 13px; }
.k-qr-fallback { margin: 0; color: #111; font-size: 11px; line-height: 1.45; word-break: break-word; }

/* Aviso permanente de que esta es la versión de pruebas. */
.k-banner-pruebas {
	background: #14171a;
	color: var(--k-acento);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	padding: 5px 10px;
}

@media (min-width: 520px) {
	.k-pregunta { font-size: 24px; }
	.k-pregunta--corta { font-size: 27px; }
	.k-descanso .k-pregunta { font-size: 27px; }
	.k-main { padding: 12px 24px 28px; }
}

/* ============================================================
   Pulido final: guía de pasaporte, transiciones y cargadores
   ============================================================ */

/* Un pasaporte se fotografía abierto y solo sirve la página de los datos. Esta
   nota va dentro del marco para que se lea justo donde se está encuadrando. */
.k-marco-nota {
	position: absolute;
	left: 50%;
	bottom: -34px;
	transform: translateX(-50%);
	white-space: nowrap;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(204, 255, 0, .92);
	color: #14171a;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .01em;
}

/* Transiciones más suaves: curva con algo de inercia en lugar del "ease" plano,
   y un desplazamiento menor para que el cambio se note sin marear. */
.k-pantalla {
	animation-duration: .42s;
	animation-timing-function: cubic-bezier(.22, .68, .32, 1);
}
@keyframes k-entrada {
	from { opacity: 0; transform: translateY(10px) scale(.995); }
	to { opacity: 1; transform: none; }
}
@keyframes k-entrada-adelante {
	from { opacity: 0; transform: translateX(16px); }
	to { opacity: 1; transform: none; }
}
@keyframes k-entrada-atras {
	from { opacity: 0; transform: translateX(-16px); }
	to { opacity: 1; transform: none; }
}

/* Las tarjetas de opción responden al toque con más presencia. */
.k-opcion {
	transition: border-color .22s ease, background-color .22s ease,
		transform .16s cubic-bezier(.22, .68, .32, 1), box-shadow .22s ease;
}
.k-opcion:active { transform: scale(.97); }
.k-opcion--activa { box-shadow: 0 2px 14px rgba(168, 214, 0, .22); }

/* Botones: hundimiento breve al pulsar, sin rebote exagerado. */
.k-btn { transition: background-color .22s ease, opacity .22s ease, transform .14s cubic-bezier(.22, .68, .32, 1), box-shadow .22s ease; }
.k-btn--primario:active { transform: translateY(1px) scale(.985); }

/* Cargador: anillo doble girando a distinta velocidad. Se percibe más vivo que
   un círculo simple y no depende de imágenes. */
.k-spinner {
	position: relative;
	border-color: rgba(168, 214, 0, .18);
	border-top-color: var(--k-acento-fuerte);
	animation: k-girar .85s cubic-bezier(.5, .15, .5, .85) infinite;
}
.k-spinner::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	border: 2px solid transparent;
	border-bottom-color: rgba(20, 23, 26, .35);
	animation: k-girar 1.4s linear infinite reverse;
}
.k-spinner--sm::after { inset: 2px; border-width: 1.5px; }

/* El texto de espera entra y sale con un fundido, para que el cambio de mensaje
   no dé un salto brusco. */
.k-cargando p { animation: k-texto-espera .45s ease both; }
@keyframes k-texto-espera {
	from { opacity: 0; transform: translateY(3px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.k-spinner::after, .k-cargando p { animation: none; }
}

/* ---- Guía de encuadre para pasaporte ---------------------------------- */

/* Silueta tenue de la página de datos: retrato, líneas de información y banda
   de lectura automática. Sirve para que se entienda de un vistazo qué parte del
   documento hay que meter en el recuadro, sin tener que leer nada. */
.k-guia-pasaporte {
	position: absolute;
	inset: 7%;
	width: 86%;
	height: 86%;
	fill: none;
	stroke: rgba(255, 255, 255, .34);
	stroke-width: 1.1;
	stroke-linecap: round;
	pointer-events: none;
}
.k-guia-pasaporte rect,
.k-guia-pasaporte circle,
.k-guia-pasaporte path { vector-effect: non-scaling-stroke; }

/* Franja superior: la hoja que no sirve queda por encima del recuadro, y es
   justo donde la gente intenta meterla. */
.k-guia-otra-hoja {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	border: 2px dashed rgba(255, 255, 255, .3);
	border-radius: 10px 10px 0 0;
	border-bottom: 0;
	pointer-events: none;
}
.k-guia-otra-hoja span {
	font-size: 11.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, .62);
	letter-spacing: .01em;
}

/* Cuando el encuadre ya cumple, la guía se atenúa para no competir con la
   imagen real del documento. */
.k-marco--listo .k-guia-pasaporte { stroke: rgba(204, 255, 0, .3); }
.k-marco--listo .k-guia-otra-hoja { opacity: .35; }

@media (max-height: 700px) {
	.k-guia-otra-hoja { height: 34px; }
	.k-guia-otra-hoja span { font-size: 10.5px; }
}


/* ======================= Guía visual de la selfie ========================= */
/* Cuadros, círculos y textos en HTML; de las ilustraciones solo la persona.
   Los dos primeros ejemplos incorrectos se generan de la ilustración buena con
   filtros, así que no hay que descargar una imagen por cada error. */

.k-guia { width: 100%; }

/* ---- Modo correcto: retrato con el óvalo de la cámara y los requisitos ---- */
.k-guia-si {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px;
	border: 1px solid var(--k-borde);
	border-radius: var(--k-radio);
	background: var(--k-fondo-alt);
}

.k-guia-retrato {
	position: relative;
	flex: none;
	width: 124px;
	aspect-ratio: 3 / 4;
	display: block;
}
.k-guia-retrato img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
/* El mismo óvalo punteado que verá en la cámara, para que reconozca la forma.
   Va ENCIMA de la ilustración, sin recortarla: recortada parecería el error de
   "foto cortada" que enseñamos justo debajo. */
.k-guia-ovalo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 86%;
	height: 88%;
	border: 2.5px dashed var(--k-acento-fuerte);
	border-radius: 50%;
	pointer-events: none;
}

.k-guia-puntos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.k-guia-punto {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--k-tinta-suave);
}
.k-guia-punto b { color: var(--k-tinta); font-weight: 600; }
.k-guia-check {
	flex: none;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--k-acento-fuerte);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.k-guia-check svg { width: 11px; height: 11px; }

/* ---- Modo incorrecto: tres miniaturas con su motivo, en su recuadro ---- */
/* Mismo tratamiento que el bloque de arriba pero en rojo tenue: los dos bloques
   se distinguen de un vistazo antes de leer nada. */
.k-guia-males {
	list-style: none;
	margin: 0;
	padding: 12px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	border: 1px solid rgba(192, 15, 12, .16);
	border-radius: var(--k-radio);
	background: var(--k-error-bg);
}
.k-guia-mal { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.k-guia-mal-foto {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	border: 1px solid rgba(192, 15, 12, .14);
	border-radius: 12px;
	overflow: hidden;
	/* Blanco: las ilustraciones son transparentes y sobre el rosado del recuadro
	   perderían el recorte de la figura. */
	background: #fff;
	display: block;
}
.k-guia-mal-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%; /* la cara, no la camiseta */
	display: block;
}
.k-guia-mal-x {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	/* Rojo, el mismo de los errores del formulario: al lado de los checks verdes
	   la pareja se entiende sin leer los pies de foto. */
	background: var(--k-error);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.k-guia-mal-x svg { width: 10px; height: 10px; }
.k-guia-mal-txt {
	font-size: 11.5px;
	line-height: 1.25;
	text-align: center;
	color: var(--k-tinta-tenue);
}

/* La foto oscura sale de la buena: la misma cara mal iluminada explica más que
   un dibujo distinto y no hay que descargar otra imagen. */
.k-guia-mal--oscura img { filter: blur(1.6px) brightness(.52) saturate(.7); }
/* La recortada ya viene encuadrada, no hay que reencuadrarla otra vez. */
.k-guia-mal--recorte img { object-position: center; }

@media (max-width: 360px) {
	.k-guia-si { gap: 12px; padding: 12px; }
	.k-guia-retrato { width: 104px; }
	.k-guia-punto { font-size: 12.5px; }
	.k-guia-males { gap: 8px; }
}

/* Pantallas bajas: la guía es lo importante, el resto cede espacio. La meta es
   que quepa entera sin scroll hasta en un iPhone SE. */
@media (max-height: 720px) {
	.k-guia-retrato { width: 106px; }
	.k-guia-punto { font-size: 13px; }
	.k-guia-si { padding: 11px; gap: 13px; }
	.k-guia-males { padding: 9px; gap: 8px; }
	.k-guia-puntos { gap: 8px; }
}


/* ==================== Nacionalidad: buscador con banderas ================== */
/* Sustituye al datalist del navegador, que solo admite texto y obligaba a poner
   la bandera como emoji dentro del valor. */

.k-campo[data-campo="nacionalidad"] { position: relative; }

.k-nac-caja { position: relative; display: block; }
/* La bandera vive dentro del campo, a la izquierda; el texto se aparta cuando
   hay una, y recupera su sitio cuando el campo está vacío. */
.k-nac-bandera {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	pointer-events: none;
}
.k-nac-bandera--llena { display: block; }
.k-nac-bandera--llena + .k-input { padding-left: 46px; }

/* Insignia redonda: la bandera si el sistema la tiene, y si no el código del
   país, que es mejor que un hueco. */
.k-nac-insignia {
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	overflow: hidden;
	background: #eef0ea;
	color: var(--k-tinta-tenue);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .02em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1px rgba(20, 23, 26, .08);
}
.k-nac-insignia img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Campo de solo lectura: el toque abre el selector ---- */
.k-nac-campo { cursor: pointer; padding-right: 42px; }
.k-nac-flecha {
	position: absolute;
	right: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--k-tinta-tenue);
	display: flex;
	cursor: pointer;
}
.k-nac-flecha svg { width: 18px; height: 18px; }

/* ---- Selector de país a pantalla completa ----
   El buscador vive ARRIBA, donde el teclado no llega, y la lista ocupa el
   resto con su propio scroll. No hay ningún cálculo de posición que el
   teclado pueda romper: por eso todos los KYC lo resuelven así. */
.k-nacsel {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: var(--k-fondo);
	display: flex;
	flex-direction: column;
	animation: k-nacsel-entra .22s cubic-bezier(.22, 1, .36, 1);
}
@keyframes k-nacsel-entra {
	from { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .k-nacsel { animation: none; } }

.k-nacsel-cab {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
	border-bottom: 1px solid var(--k-borde);
	flex: none;
}
.k-nacsel-volver {
	flex: none;
	width: 38px;
	height: 38px;
	border: 1.5px solid var(--k-borde);
	border-radius: 50%;
	background: none;
	color: var(--k-tinta);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.k-nacsel-volver svg { width: 17px; height: 17px; }
.k-nacsel-volver:hover { background: var(--k-fondo-alt); border-color: var(--k-tinta); }

.k-nacsel-busca { position: relative; flex: 1; min-width: 0; }
.k-nacsel-busca > svg {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	color: var(--k-tinta-tenue);
	pointer-events: none;
}
.k-nacsel-busca input {
	width: 100%;
	height: 44px;
	border: 1.5px solid var(--k-borde);
	border-radius: 999px;
	background: var(--k-fondo-alt);
	padding: 0 16px 0 40px;
	font-size: 16px; /* 16 px evita el zoom de iOS al enfocar */
	font-family: inherit;
	color: var(--k-tinta);
	-webkit-appearance: none;
	appearance: none;
}
.k-nacsel-busca input:focus { outline: none; border-color: var(--k-tinta); background: var(--k-fondo); }
.k-nacsel-busca input::-webkit-search-cancel-button { -webkit-appearance: none; }

.k-nacsel-lista {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	margin: 0;
	padding: 8px 10px calc(28px + env(safe-area-inset-bottom));
	list-style: none;
}
.k-nacsel-titulo {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--k-tinta-tenue);
	padding: 14px 10px 6px;
}
.k-nacsel-op {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 10px;
	border-radius: var(--k-radio-sm);
	font-size: 15.5px;
	color: var(--k-tinta);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.k-nacsel-op:hover,
.k-nacsel-op:active { background: var(--k-acento-tenue); }
.k-nacsel-vacio {
	padding: 34px 20px;
	text-align: center;
	color: var(--k-tinta-tenue);
	font-size: 14px;
	line-height: 1.5;
}




/* ===================== Visor: velo, consejos y zoom ====================== */

/* Fuera del marco no debe distinguirse nada: oscuro y desenfocado, para que el
   único sitio donde mirar sea el recuadro. El desenfoque es opcional — donde no
   haya backdrop-filter queda el oscurecido, que ya cumple. */
.k-camara-velo {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.k-velo-parte {
	position: absolute;
	background: rgba(0, 0, 0, .82);
}
/* Con el óvalo el velo es una sola capa recortada por una máscara radial: cuatro
   paneles dejarían las esquinas del óvalo sin cubrir. */
.k-camara-velo--entero {
	background: rgba(0, 0, 0, .88);
}
.k-camara-velo--entero .k-velo-parte { display: none; }

@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
	.k-velo-parte,
	.k-camara-velo--entero {
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
	}
	.k-velo-parte { background: rgba(0, 0, 0, .74); }
	.k-camara-velo--entero { background: rgba(0, 0, 0, .82); }
}

/* Los tres requisitos, sobre el visor y no en la pantalla anterior: se leen
   mientras encuadra. Se atenúan solos para no competir con el documento. */
.k-camara-consejos {
	position: absolute;
	z-index: 5;
	left: 50%;
	transform: translateX(-50%);
	top: calc(52px + env(safe-area-inset-top));
	width: max-content;
	/* Chrome en Android agranda el texto de los bloques absolutos si no se le
	   dice que no (font boosting): los consejos salían al doble de tamaño. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	display: flex;
	flex-direction: column;
	gap: 7px;
	max-width: calc(100% - 36px);
	pointer-events: none;
	animation: k-consejos-fondo 9s ease forwards;
}
@keyframes k-consejos-fondo {
	0%, 62% { opacity: 1; }
	100% { opacity: .38; }
}
.k-camara-consejo {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	line-height: 1.25;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
	white-space: nowrap;
}
.k-camara-consejo svg { width: 17px; height: 17px; flex: none; opacity: .9; }

/* Zoom: dos pastillas junto al obturador. */
.k-camara-zoom {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 124px;
	display: flex;
	gap: 3px;
	padding: 3px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.k-zoom-btn {
	min-width: 40px;
	height: 30px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: rgba(255, 255, 255, .8);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.k-zoom-btn--on { background: #fff; color: #14171a; }

@media (max-height: 720px) {
	.k-camara-consejos { top: calc(44px + env(safe-area-inset-top)); gap: 5px; }
	.k-camara-consejo { font-size: 12px; }
}
@media (orientation: landscape) {
	/* En horizontal los controles se van a la derecha y el marco ocupa el alto:
	   los consejos estorbarían justo encima del documento. */
	.k-camara-consejos { display: none; }
	.k-camara-zoom { bottom: 50%; left: auto; right: 96px; transform: translateY(50%); flex-direction: column; }
}


/* ============== Plantilla dentro del marco (credenciales) ================ */
/* Mismo lenguaje que la silueta del pasaporte: trazo blanco tenue que enseña
   la forma sin competir con el documento real cuando entra en el encuadre. */
.k-guia-cara {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
}
.k-guia-doc {
	position: absolute;
	inset: 7% 6%;
	width: 88%;
	height: 86%;
	fill: none;
	stroke: rgba(255, 255, 255, .38);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.k-guia-doc .k-guia-mrz {
	fill: rgba(255, 255, 255, .42);
	stroke: none;
	font-family: 'Courier New', monospace;
	font-size: 11px;
	letter-spacing: 1px;
}
/* El volteo del reverso: media vuelta que termina plana. Dice "gira el
   documento" sin una sola palabra. */
.k-guia-cara--voltea { animation: k-guia-voltea .9s cubic-bezier(.3, .7, .3, 1) .25s both; }
@keyframes k-guia-voltea {
	from { transform: perspective(700px) rotateY(180deg); opacity: 0; }
	to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .k-guia-cara--voltea { animation: none; } }


/* El marco sube cuando hay consejos encima (documento en vertical): al 44%
   quedaba un vacío muerto entre los consejos y el recuadro. Solo tarjeta y
   pasaporte: la hoja del comprobante es alta y ya llega arriba, y el óvalo de
   la selfie no lleva consejos. Va en media query de orientación para no pisar
   la colocación de horizontal (controles a la derecha, marco centrado). */
@media (orientation: portrait) {
	.k-marco--tarjeta { top: 37%; }
	.k-marco--pasaporte { top: 39%; }
}


/* Análisis tras la foto: el mismo anillo simple del "Preparando la cámara",
   pero sobre el blanco de la app — un solo aro girando, sin el doble en
   contrasentido, que era lo que hacía ruido. */
.k-cargando--velo .k-spinner {
	border-color: var(--k-borde);
	border-top-color: var(--k-acento-fuerte);
	animation: k-girar .8s linear infinite;
}
.k-cargando--velo .k-spinner::after { display: none; }