/* Nexempleo KYC — frontend. Prefijo nx- para no chocar con ExpertHive.
   Móvil primero: la mayoría de los usuarios llega desde un teléfono. */

.nx-kyc {
	--nx-azul: #1560a8;
	--nx-azul-claro: #e8f1fa;
	--nx-verde: #14804a;
	--nx-ambar: #a86a15;
	--nx-rojo: #b32020;
	--nx-borde: #dfe4ea;
	--nx-texto: #1d2733;
	--nx-suave: #64748b;
	--nx-radio: 10px;

	max-width: 780px;
	margin: 0 auto;
	color: var(--nx-texto);
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

.nx-kyc * { box-sizing: border-box; }

/* Estos componentes se pintan fuera de .nx-kyc (plantillas de HivePress),
   así que necesitan sus propias variables o el color queda sin resolver. */
.nx-kyc-insignia,
.nx-kyc-aviso,
.nx-kyc-barra,
.nx-kyc-btn {
	--nx-azul: #1560a8;
	--nx-azul-claro: #e8f1fa;
	--nx-verde: #14804a;
	--nx-ambar: #a86a15;
	--nx-rojo: #b32020;
	--nx-borde: #dfe4ea;
	--nx-texto: #1d2733;
	--nx-suave: #64748b;
}

/* --- Insignia (vive también fuera del contenedor .nx-kyc) --- */

/* ExpertHive pone las filas de detalles en mayúsculas y con letter-spacing;
   la insignia no debe heredarlo. */
.nx-kyc-insignia {
	text-transform: none !important;
	letter-spacing: normal !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px 4px 8px;
	border-radius: 999px;
	background: #e8f5ee;
	color: #14804a;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	vertical-align: middle;
	white-space: nowrap;
}

.nx-kyc-insignia__icono {
	display: inline-flex;
	flex: none;
	align-items: center;
}

.nx-kyc-insignia__icono svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: #14804a;
}

.nx-kyc-insignia .nx-kyc-check { stroke: #fff; }

/* Fila propia y centrada para la versión grande (ficha de vendedor).
   Flex + justify-content en lugar de text-align: el contenedor del tema puede
   ser flex en columna, y ahí un text-align sobre un span no centra nada. */
.nx-kyc-insignia-fila {
	display: flex !important;
	align-items: center;
	align-self: center;
	justify-content: center;
	width: 100%;
	margin: 4px 0 10px;
	text-align: center;
}

/* --- Versión compacta: debe fluir DENTRO de la línea de detalles --- */

.nx-kyc-insignia--compacta {
	padding: 0;
	margin: 0 0 0 1px;
	background: none;
	line-height: 0;
	/* Sin esto queda como ítem flex a ancho completo y salta de línea. */
	flex: 0 0 auto;
	align-self: center;
}

.nx-kyc-insignia--compacta .nx-kyc-insignia__icono svg { width: 15px; height: 15px; }

.nx-kyc-insignia--compacta .nx-kyc-insignia__texto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- Encaje dentro de las plantillas de HivePress ---
   Los detalles de anuncio son <div> hermanos con viñeta ::after. La insignia
   no es texto: ni arrastra viñeta ni debe romper la línea. */

.hp-listing__details .nx-kyc-insignia--compacta,
.hp-request__details .nx-kyc-insignia--compacta,
.hp-vendor__details .nx-kyc-insignia--compacta {
	display: inline-flex !important;
	margin: 0 4px 0 0 !important;
	padding: 0 !important;
	vertical-align: middle;
	/* Por si el contenedor es flex: la manda al principio de la fila. */
	order: -1;
}

.hp-listing__details .nx-kyc-insignia--compacta::after,
.hp-request__details .nx-kyc-insignia--compacta::after,
.hp-vendor__details .nx-kyc-insignia--compacta::after,
.hp-listing__details .nx-kyc-insignia--compacta::before,
.hp-request__details .nx-kyc-insignia--compacta::before { content: none !important; }

/* El primer hermano tras la insignia no debe heredar sangría de "primer
   elemento", que en ExpertHive suele quitar el separador inicial. */
.hp-listing__details .nx-kyc-insignia--compacta + .hp-listing__vendor,
.hp-request__details .nx-kyc-insignia--compacta + .hp-request__vendor { margin-left: 0; }

/* --- Ficha de vendedor --- */

.hp-vendor__summary .nx-kyc-insignia-fila,
.hp-vendor--view-page .nx-kyc-insignia-fila {
	display: flex !important;
	align-items: center;
	align-self: center;
	justify-content: center;
	width: 100% !important;
	max-width: 100%;
	margin: 4px auto 12px !important;
	padding: 0 !important;
	line-height: 1;
	text-align: center;
}

/* margin: auto en los laterales, no 0: fijarlos a cero anulaba el centrado
   automático de la regla de arriba. */
.hp-vendor__summary > .nx-kyc-insignia-fila { margin-left: auto !important; margin-right: auto !important; }

/* Con la pastilla en texto, el tic suelto de HivePress sobra en la ficha:
   dice lo mismo dos veces a dos centímetros de distancia.
   Lleva !important porque ExpertHive lo posiciona con un selector más
   específico y una regla sin peso pierde la cascada. */
.hp-vendor__summary .hp-vendor__verified-badge,
.hp-vendor__summary .hp-vendor__name .hp-vendor__verified-badge {
	display: none !important;
}

/* Si prefieres conservar el tic de HivePress y quitar la pastilla, invierte:
   .hp-vendor__summary .nx-kyc-insignia-fila { display: none !important; }
   .hp-vendor__summary .hp-vendor__verified-badge { display: inline !important; } */

.nx-kyc-aviso {
	margin: 0 0 20px;
	padding: 14px 16px;
	border-left: 3px solid #1560a8;
	border-radius: 6px;
	background: #e8f1fa;
	font-size: 14px;
}

/* --- Barra persistente de cuenta sin verificar --- */

/* right: 88px deja hueco a la campana flotante de Nex Moderación,
   que es un botón de 52px fijo en bottom:24px right:24px. */
.nx-kyc-barra {
	position: fixed;
	right: 88px;
	bottom: 12px;
	left: 12px;
	z-index: 9998;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border-radius: 10px;
	background: #1d2733;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
	color: #fff;
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	text-align: center;
}

.nx-kyc-barra a {
	padding: 7px 14px;
	border-radius: 6px;
	background: #1560a8;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.nx-kyc-barra a:hover { background: #1a73e8; color: #fff; }

@media (min-width: 700px) {
	.nx-kyc-barra { right: auto; left: 50%; width: max-content; max-width: calc(100vw - 180px); transform: translateX(-50%); }
}

/* --- Pasos --- */

/* ExpertHive aplica margin y ::marker a los li del contenido; sin estos
   reinicios el tercer paso queda desalineado respecto a los otros dos. */
.nx-kyc-pasos {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	margin: 0 0 24px !important;
	padding: 0 !important;
	list-style: none !important;
	counter-reset: none;
}

.nx-kyc-pasos li {
	display: flex;
	flex: 1 1 100%;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 10px 12px !important;
	border: 1px solid var(--nx-borde);
	border-radius: var(--nx-radio);
	color: var(--nx-suave);
	font-size: 13px;
	line-height: 1.35;
	list-style: none !important;
	text-indent: 0;
}

.nx-kyc-pasos li::marker,
.nx-kyc-pasos li::before { content: none !important; display: none !important; }

.nx-kyc-pasos__n {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #eef1f5;
	font-size: 12px;
	font-weight: 700;
}

.nx-kyc-pasos .activo { border-color: var(--nx-azul); background: var(--nx-azul-claro); color: var(--nx-azul); }
.nx-kyc-pasos .activo .nx-kyc-pasos__n { background: var(--nx-azul); color: #fff; }
.nx-kyc-pasos .hecho { border-color: #bfe3cf; color: var(--nx-verde); }
.nx-kyc-pasos .hecho .nx-kyc-pasos__n { background: var(--nx-verde); color: #fff; }

@media (min-width: 560px) {
	.nx-kyc-pasos li { flex: 1 1 0; }
}

/* --- Paneles de estado --- */

.nx-kyc-panel {
	padding: 22px 18px;
	border: 1px solid var(--nx-borde);
	border-radius: var(--nx-radio);
	text-align: center;
}

.nx-kyc-panel h2 { margin: 12px 0 8px; font-size: 20px; line-height: 1.3; }
.nx-kyc-panel p { margin: 0 0 10px; color: var(--nx-suave); font-size: 15px; }
.nx-kyc-panel--ok { border-color: #bfe3cf; background: #f4fbf7; }
.nx-kyc-panel--revision { border-color: #f0dcb8; background: #fdf8ef; }
.nx-kyc-panel--error { border-color: #f0c4c4; background: #fdf4f4; }
.nx-kyc-panel--error h2 { color: var(--nx-rojo); }

.nx-kyc-spinner {
	width: 34px;
	height: 34px;
	margin: 0 auto;
	border: 3px solid var(--nx-azul-claro);
	border-top-color: var(--nx-azul);
	border-radius: 50%;
	animation: nx-kyc-girar .9s linear infinite;
}

@keyframes nx-kyc-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.nx-kyc-spinner { animation-duration: 3s; }
	.nx-kyc-subida label { transition: none; }
}

/* --- Formulario --- */

.nx-kyc-intro { margin: 0 0 20px; color: var(--nx-suave); font-size: 14px; }
.nx-kyc-h3 { margin: 28px 0 4px; font-size: 17px; }
.nx-kyc-nota { color: var(--nx-suave); font-size: 13px; }

.nx-kyc-grupo {
	margin: 0 0 20px;
	padding: 16px 14px;
	border: 1px solid var(--nx-borde);
	border-radius: var(--nx-radio);
}

.nx-kyc-grupo legend {
	padding: 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--nx-azul);
}

.nx-kyc-rejilla {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.nx-kyc-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nx-kyc-campo label { font-size: 13px; font-weight: 600; }
.nx-kyc-campo small { color: var(--nx-suave); font-size: 12px; }
.nx-kyc-req { color: var(--nx-rojo); }

.nx-kyc-campo input,
.nx-kyc-campo select {
	width: 100%;
	max-width: 100%;
	/* 16px evita el zoom automático de iOS al enfocar un campo. */
	padding: 11px 12px;
	border: 1px solid var(--nx-borde);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 16px;
	line-height: 1.3;
	color: var(--nx-texto);
	-webkit-appearance: none;
	appearance: none;
}

.nx-kyc-campo select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px;
	padding-right: 34px;
}

.nx-kyc-campo input:focus-visible,
.nx-kyc-campo select:focus-visible,
.nx-kyc-subida:focus-visible,
.nx-kyc-btn:focus-visible {
	outline: 2px solid var(--nx-azul);
	outline-offset: 2px;
}

.nx-kyc-campo input[aria-invalid="true"],
.nx-kyc-campo select[aria-invalid="true"] { border-color: var(--nx-rojo); }

/* Rejilla de 4 columnas: un campo normal ocupa 2 (media fila), y así
   Dirección (3) y Código postal (1) caben juntos en la misma fila. */
@media (min-width: 560px) {
	.nx-kyc-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.nx-kyc-campo { grid-column: span 2; }
	.nx-kyc-campo--col1 { grid-column: span 1; }
	.nx-kyc-campo--col2 { grid-column: span 2; }
	.nx-kyc-campo--col3 { grid-column: span 3; }
	.nx-kyc-campo--col4 { grid-column: span 4; }
	.nx-kyc-grupo { padding: 18px; }
}

/* --- Subidas: arrastrar, soltar, pegar --- */

.nx-kyc-subidas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 12px;
}

.nx-kyc-subida { position: relative; min-width: 0; }

.nx-kyc-subida input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.nx-kyc-subida label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 140px;
	padding: 16px 12px;
	border: 1.5px dashed #c3cbd5;
	border-radius: var(--nx-radio);
	background: #fafbfc;
	cursor: pointer;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	transition: border-color .15s, background .15s, transform .1s;
}

.nx-kyc-subida label:hover { border-color: var(--nx-azul); background: var(--nx-azul-claro); }

.nx-kyc-subida__icono {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--nx-azul-claro);
	color: var(--nx-azul);
}

.nx-kyc-subida__icono svg { width: 18px; height: 18px; }

.nx-kyc-subida__pista { font-size: 11.5px; font-weight: 400; color: var(--nx-suave); }
.nx-kyc-subida__nombre { font-size: 11px; font-weight: 400; color: var(--nx-suave); word-break: break-all; }

/* Estado de arrastre encima */
.nx-kyc-subida.encima label {
	border-color: var(--nx-azul);
	border-style: solid;
	background: var(--nx-azul-claro);
	transform: scale(1.015);
}

.nx-kyc-subida.encima .nx-kyc-subida__pista::after {
	content: " — suelta aquí";
	color: var(--nx-azul);
	font-weight: 600;
}

/* Estado cargado */
.nx-kyc-subida.cargada label {
	border-style: solid;
	border-color: var(--nx-verde);
	background: #f4fbf7;
	min-height: 0;
	padding: 10px 12px;
}

.nx-kyc-subida.cargada .nx-kyc-subida__icono,
.nx-kyc-subida.cargada .nx-kyc-subida__pista { display: none; }

.nx-kyc-subida__vista {
	display: block;
	width: 100%;
	max-height: 190px;
	margin-top: 8px;
	border-radius: 8px;
	object-fit: cover;
}

.nx-kyc-subida__quitar {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	display: none;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(29, 39, 51, .78);
	color: #fff;
	font-size: 19px;
	line-height: 30px;
	cursor: pointer;
}

.nx-kyc-subida.cargada .nx-kyc-subida__quitar { display: block; }
.nx-kyc-subida__quitar:hover { background: var(--nx-rojo); }

@media (min-width: 560px) {
	.nx-kyc-subidas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nx-kyc-subida__vista { max-height: 130px; }
}

/* --- Consentimiento, mensajes, botón --- */

.nx-kyc-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--nx-suave);
}

.nx-kyc-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; }

.nx-kyc-mensaje {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 14px;
}

.nx-kyc-mensaje[data-tipo="error"] { border: 1px solid #f0c4c4; background: #fdf4f4; color: var(--nx-rojo); }
.nx-kyc-mensaje[data-tipo="ok"] { border: 1px solid #bfe3cf; background: #f4fbf7; color: var(--nx-verde); }

.nx-kyc-btn {
	display: block;
	width: 100%;
	padding: 14px 22px;
	border: 0;
	border-radius: 8px;
	background: var(--nx-azul);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.nx-kyc-btn:hover { background: #114f8b; color: #fff; }
.nx-kyc-btn[disabled] { opacity: .55; cursor: progress; }

.nx-kyc-btn--fantasma {
	background: none;
	border: 1px solid var(--nx-borde);
	color: var(--nx-azul);
}

.nx-kyc-btn--fantasma:hover { background: var(--nx-azul-claro); color: var(--nx-azul); }

@media (min-width: 560px) {
	.nx-kyc-btn { display: inline-block; width: auto; padding: 12px 24px; }
}


/* --- Selector con búsqueda (países y prefijos) --- */

.nx-kyc-cb { position: relative; }

.nx-kyc-cb__oculto {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0 !important;
}

.nx-kyc-cb__boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--nx-borde);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 16px;
	line-height: 1.3;
	color: var(--nx-texto);
	text-align: left;
	cursor: pointer;
}

.nx-kyc-cb__boton:hover { border-color: #b9c3ce; }

.nx-kyc-cb__boton[aria-expanded="true"] {
	border-color: var(--nx-azul);
	box-shadow: 0 0 0 3px rgba(21, 96, 168, .12);
}

.nx-kyc-cb__valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nx-kyc-cb__flecha {
	flex: none;
	width: 0;
	height: 0;
	border-top: 5px solid var(--nx-suave);
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

.nx-kyc-cb__panel {
	position: absolute;
	z-index: 60;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	min-width: 260px;
	overflow: hidden;
	border: 1px solid var(--nx-borde);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(29, 39, 51, .16);
}

.nx-kyc-cb__buscar {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border: 0;
	border-bottom: 1px solid var(--nx-borde);
	font: inherit;
	font-size: 15px;
	outline: none;
}

.nx-kyc-cb__lista {
	max-height: 260px;
	margin: 0 !important;
	padding: 4px !important;
	overflow-y: auto;
	list-style: none !important;
	overscroll-behavior: contain;
}

.nx-kyc-cb__item {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 !important;
	padding: 9px 10px !important;
	border-radius: 6px;
	font-size: 14px;
	list-style: none !important;
	cursor: pointer;
}

.nx-kyc-cb__item:hover,
.nx-kyc-cb__item.activo { background: var(--nx-azul-claro); }

.nx-kyc-cb__item[aria-selected="true"] { font-weight: 600; color: var(--nx-azul); }

.nx-kyc-cb__bandera { flex: none; font-size: 17px; line-height: 1; }
.nx-kyc-cb__nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-kyc-cb__pref { flex: none; color: var(--nx-suave); font-size: 13px; font-variant-numeric: tabular-nums; }

.nx-kyc-cb__vacio { padding: 14px 10px; color: var(--nx-suave); font-size: 14px; text-align: center; }

/* --- Teléfono: prefijo + número --- */

.nx-kyc-tel__fila { display: flex; gap: 8px; align-items: flex-start; }
.nx-kyc-tel__fila .nx-kyc-cb { flex: 0 0 100px; }
.nx-kyc-tel__fila .nx-kyc-cb__panel { right: auto; left: 0; }
.nx-kyc-tel__numero { flex: 1 1 auto; min-width: 0; }

/* Sin JS el <select> nativo queda visible y ocupa su hueco. */
.nx-kyc-tel__fila > .nx-kyc-combo__nativo:not(.nx-kyc-cb__oculto) { flex: 0 0 130px; }

.nx-kyc-tel__numero {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--nx-borde);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 16px;
	line-height: 1.3;
	color: var(--nx-texto);
}

.nx-kyc-tel__numero[aria-invalid="true"] { border-color: var(--nx-rojo); }

/* --- Provincia dinámica y campos a ancho completo --- */



.nx-kyc-provincia__libre {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--nx-borde);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 16px;
	line-height: 1.3;
	color: var(--nx-texto);
}

.nx-kyc-provincia [hidden] { display: none !important; }

/* El botón del prefijo va más apretado que un campo normal: solo lleva
   bandera y tres o cuatro dígitos, no necesita el ancho de un input. */
.nx-kyc-cb--tel .nx-kyc-cb__boton {
	gap: 4px;
	padding: 11px 8px;
	font-size: 15px;
}

.nx-kyc-cb--tel .nx-kyc-cb__valor { font-variant-numeric: tabular-nums; }

/* El panel del prefijo no se encoge al ancho del botón. */
.nx-kyc-cb--tel .nx-kyc-cb__panel { min-width: 300px; }

.nx-kyc-aviso--fuerte {
	border-left-width: 4px;
	border-left-color: #a86a15;
	background: #fdf8ef;
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.5;
}

.nx-kyc-aviso--fuerte .nx-kyc-btn { margin-top: 10px; }