#OpcionDesbloqueo .div-form__desbloqueo .form-desbloqueo .div-controles-desbloqueo {
	
	box-sizing: border-box;
}

#OpcionDesbloqueo, #CambiaPassword{
	position: fixed !important;
	top: 10px !important;
	right: 10px !important;
	bottom: 10px !important;
	width: 523px !important;
	background: #fff !important;
	display: flex !important;
	flex-direction: column !important;
	border-radius: 16px !important;
	box-shadow: -8px 0 48px rgba(0, 0, 0, 0.22) !important;
	z-index: 9999 !important;
	font-family: "Inter", sans-serif !important;
	overflow:hidden !important;
}

#OpcionDesbloqueo .header-desbloqueo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32px 24px 0 24px;
	flex-shrink: 0;
}

#OpcionDesbloqueo .header-desbloqueo>div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}


#OpcionDesbloqueo #btnRegresar,
#OpcionDesbloqueo #cerrarDesbloqueo {
	cursor: pointer;
	/* padding: 6px; */
	border-radius: 8px;
	transition: background 0.15s ease;
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0;
	display: inline-block !important;
}

#OpcionDesbloqueo #btnRegresar:hover,
#OpcionDesbloqueo #cerrarDesbloqueo:hover {
	background: #f3f3f3;
}

#OpcionDesbloqueo .main-instrucciones {
	flex: 1;
	padding: 40px 24px 32px 24px;
	display: flex;
	flex-direction: column;
}

#OpcionDesbloqueo .container-desbloqueo {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 1;
}

#OpcionDesbloqueo .container-desbloqueo_error {
	display: none;
	flex-shrink: 0;
}

#OpcionDesbloqueo .container-desbloqueo_error.visible {
	display: block;
	width: 492px;
	margin-left: 15px;
	border-radius: 8px;
}

#OpcionDesbloqueo #lbl_error {
	background: #fce8e8;
	border: none;
	border-radius: 0;
	color: #171618;
	font-size: 14px;
	font-weight: 400;
	padding: 14px 24px;
	display: block;
	text-align: center;
	font-family: "Inter", sans-serif;
	width: 450px;
}

#OpcionDesbloqueo .container-instrucciones__titulo {
	display: none;
	text-align: left;
}

#OpcionDesbloqueo .container-instrucciones__titulo.olvide,
#OpcionDesbloqueo .container-instrucciones__titulo.activo {
	display: flex;
	text-align: left;
	flex-direction: column;
}

#OpcionDesbloqueo .tituloDesbloqueo {
	color: #171618;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
	display: block;
}

#OpcionDesbloqueo .tituloDesbloqueo2 {
	color: #969696;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.5px;
	display: block;
}

#OpcionDesbloqueo .div-form__desbloqueo {
	flex: 1;
	display: block;
	width: 100%;
}

#OpcionDesbloqueo .form-desbloqueo {
	display: flex;
	flex-direction: column;
	width: 100%;
}

#OpcionDesbloqueo .div-controles-desbloqueo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: transparent;
}

#OpcionDesbloqueo .panel-unlock {
	display: flex;
	gap: 16px;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	padding: 24px;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.2s ease, background 0.2s ease;
	height: auto;
	align-items: flex-start;
	text-align: left;
	width: auto;
}

#OpcionDesbloqueo .panel-unlock:hover {
	border-color: #999;
	background: #fafafa;
}

#OpcionDesbloqueo .panel-desbloquea-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: inline-block;
}

#OpcionDesbloqueo .IconUnlock {
	background-image: url(../../img/iconlogin/IconUnlock.png);
}

#OpcionDesbloqueo .IconRestore {
	background-image: url(../../img/iconlogin/IconRestore.png);
}

#OpcionDesbloqueo .IconRecover {
	background-image: url(../../img/iconlogin/IconRecover.png);
}

#OpcionDesbloqueo .panel-unlock>div {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

#OpcionDesbloqueo .container-desbloqueo_texto1 {
	color: #171618;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 5px;
	display: block;
	white-space: normal;
}

#OpcionDesbloqueo .container-desbloqueo_texto2 {
	color: #969696;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	display: block;
	white-space: normal;
}

#OpcionDesbloqueo .panel-siguiente-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: inline-block;
}

#OpcionDesbloqueo .IconSiguiente {
	background-image: url(../../img/iconlogin/IconSiguiente.png);
}

#OpcionDesbloqueo .lbl_desbloqueo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

#OpcionDesbloqueo .font-controles-desbloqueo {
	color: #454546;
	font-size: 12px;
	font-weight: 400;
	display: block;
	margin-left: 16px;
}

#OpcionDesbloqueo .lbl_desbloqueo input[type="text"],
#OpcionDesbloqueo .lbl_desbloqueo input[type="password"] {
	width: 90%;
	height: 40px;
	border: none;
	border: 1.5px solid #d0d0d0;
	font-size: 15px;
	color: #171618;
	background: transparent;
	outline: none;
	padding: 0 36px 0 0;
	transition: border-color 0.2s ease;
	display: block;
	border-radius: 4px;
	margin-bottom: 20px;
}

#OpcionDesbloqueo .lbl_desbloqueo input:focus {
	border-bottom-color: #171618;
}

#OpcionDesbloqueo .form-input-wrapper {
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
}

#OpcionDesbloqueo .form-input-wrapper input[type="password"] {
	padding-right: 36px;
}

#OpcionDesbloqueo .input-yeux_off {
	position: absolute;
	right: 3%;
	bottom: 30px;
	width: 22px;
	height: 22px;
	cursor: pointer;
	background: url(../../img/iconlogin/ojito.png) no-repeat center / contain;
	display: inline-block;
}

#OpcionDesbloqueo #container-olvido_password {
	margin-top: 8px;
	font-size: 13px;
}

#OpcionDesbloqueo .txt_olvido_password {
	color: #969696;
}

#OpcionDesbloqueo #btn_olvido_password {
	color: #171618;
	font-weight: 600;
	cursor: pointer;
	margin-left: 4px;
	text-decoration: underline;
}

#OpcionDesbloqueo #btn_olvido_password:hover {
	color: #454546;
}

#OpcionDesbloqueo .btn_bottom {
	margin-top: 24px;
	text-align: center;
	display: flex;
	justify-content: center;
}

#OpcionDesbloqueo #btn_DesbloqueoAcceso {
	border: none;
	border-radius: 8px;
	background: #d4d4d4;
	color: #999999;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	cursor: not-allowed;
	transition: background 0.2s ease, color 0.2s ease;
	display: inline-block;
}

#OpcionDesbloqueo #btn_DesbloqueoAcceso.activo {
	background: #171618;
	color: #fff;
	cursor: pointer;
}

#OpcionDesbloqueo #btn_DesbloqueoAcceso.activo:hover {
	background: #2e2c30;
}

@media(max-width:900px) {
	#OpcionDesbloqueo {
		width: 420px !important;
	}

	#OpcionDesbloqueo .tituloDesbloqueo {
		font-size: 26px;
	}
}

@media(max-width:600px) {
	#OpcionDesbloqueo {
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100vh !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	#OpcionDesbloqueo .tituloDesbloqueo {
		font-size: 20px;
	}

	#OpcionDesbloqueo #btn_DesbloqueoAcceso {
		width: 100%;
	}
}
/* ══════════════════════════════════════════════════════════
   PANEL — #CambiaPassword  (pagCambiaPassword.cfm)
══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   PANEL — #CodigoVerificacion  (pagRecuperaPass.cfm)
══════════════════════════════════════════════════════════ */

#CodigoVerificacion,
#CodigoVerificacion * { box-sizing: border-box; float: none !important; }

#CodigoVerificacion {
	position: fixed !important;
	top: 10px !important; right: 10px !important; bottom: 0 !important;
	width: 688px !important; height: 100vh !important;
	background: #fff !important;
	display: flex !important; flex-direction: column !important;
	border-radius: 16px 0 0 16px !important;
	box-shadow: -8px 0 48px rgba(0,0,0,0.22) !important;
	z-index: 9999 !important;
	font-family: "Inter", sans-serif !important;
	overflow: hidden !important;
}

#CodigoVerificacion .header-desbloqueo {
	display: flex; justify-content: space-between; align-items: center;
	padding: 32px 24px 0 24px; flex-shrink: 0;
}

#CodigoVerificacion .header-desbloqueo > div {
	display: flex; justify-content: space-between; align-items: center; width: 100%;
}

#CodigoVerificacion #cv-btnRegresar,
#CodigoVerificacion #cv-btnCerrar {
	cursor: pointer; 
	/* padding: 6px;  */
	border-radius: 8px; 
	transition: background 0.15s;
	width: 16px !important; 
	height: 16px !important; 
	display: inline-block !important;
}

#CodigoVerificacion #cv-btnRegresar:hover,
#CodigoVerificacion #cv-btnCerrar:hover { background: #f3f3f3; }

#CodigoVerificacion .cv-main {
	padding: 32px 24px 16px 24px;
	display: flex; flex-direction: column; gap: 20px;
}

#CodigoVerificacion .cv-titulo { font-size: 24px; font-weight: 700; color: #171618; line-height: 1.2; margin: 0; }
#CodigoVerificacion .cv-challenge-label { font-size: 13px; color: #969696; margin: 0 0 4px 0; display: block; }
#CodigoVerificacion .cv-challenge-num { font-size: 40px; font-weight: 400; color: #171618; letter-spacing: 8px; line-height: 1.2; display: block; }

#CodigoVerificacion .cv-input-section { display: flex; flex-direction: column; gap: 6px; }
#CodigoVerificacion .cv-input-label { font-size: 12px; color: #969696; display: block; }
#CodigoVerificacion .cv-digits-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 6px; }
#CodigoVerificacion .cv-sep { font-size: 20px; color: #969696; align-self: flex-end; padding-bottom: 6px; flex-shrink: 0; }

#CodigoVerificacion .cv-digit {
	flex: 1; height: 36px; border: none;
	border-bottom: 1.5px solid #d0d0d0;
	text-align: center; font-family: "Inter", sans-serif;
	font-size: 18px; font-weight: 500; color: #171618;
	background: transparent; outline: none; padding-bottom: 4px;
	transition: border-color 0.2s;
}
#CodigoVerificacion .cv-digit:focus,
#CodigoVerificacion .cv-digit.cv-filled { border-bottom-color: #171618; }

#CodigoVerificacion .cv-timer { font-size: 13px; color: #969696; margin: 0; }
#CodigoVerificacion .cv-timer strong { color: #171618; font-weight: 700; }

#CodigoVerificacion #cv-error {
	display: none; color: #c0392b; font-size: 13px; font-weight: 500;
	background: #fdf2f2; border: 1px solid #f0b8b8; border-radius: 8px;
	padding: 10px 14px; margin: 4px 0 0 0;
}

#CodigoVerificacion .cv-footer { padding: 16px 24px 32px 24px; text-align: center; flex-shrink: 0; }

#CodigoVerificacion #cv-btn-continuar {
	width: 180px; height: 40px; border: none; border-radius: 8px;
	background: #d4d4d4; color: #999;
	font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600;
	letter-spacing: 0.5px; cursor: not-allowed;
	transition: background 0.2s, color 0.2s;
}
#CodigoVerificacion #cv-btn-continuar.cv-activo { background: #171618; color: #fff; cursor: pointer; }
#CodigoVerificacion #cv-btn-continuar.cv-activo:hover { background: #2e2c30; }

@media (max-width: 900px) { #CodigoVerificacion { width: 420px !important; } }
@media (max-width: 600px) {
	#CodigoVerificacion {
		top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
		width: 100% !important; height: 100vh !important;
		border-radius: 0 !important; box-shadow: none !important;
	}
	#CodigoVerificacion #cv-btn-continuar { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   PANEL — #CambiaPassword  (pagCambiaPassword.cfm)
══════════════════════════════════════════════════════════ */

#CambiaPassword,
#CambiaPassword * { box-sizing: border-box; float: none !important; }


#CambiaPassword .cp-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 32px 28px 0 28px; flex-shrink: 0;
}

#CambiaPassword .cp-btn-nav {
	cursor: pointer; 
	/* padding: 6px;  */
	border-radius: 8px;
	background: none; border: none; 
	/* font-size: 20px; */
	color: #171618; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 16px; height: 16px; transition: background 0.15s;
}
#CambiaPassword .cp-btn-nav:hover { background: #f3f3f3; }

#CambiaPassword .cp-main {
	flex: 1; padding: 32px 28px 16px 28px;
	display: flex; flex-direction: column; gap: 24px;
}

#CambiaPassword .cp-titulo { font-size: 28px; font-weight: 700; color: #171618; line-height: 1.2; margin: 0; }

#CambiaPassword .cp-subtitulo { 
	font-size: 14px; 
	color: #969696; 
	margin-top: 20px; 
	line-height: 1.5; 
}

#CambiaPassword .cp-field-group { 
	display: flex; 
	flex-direction: column; 
	gap: 6px; 
	margin-top: 20px;
}
#CambiaPassword .cp-label { 
	font-size: 13px; 
	color: #171618; 
	font-weight: 500; 
	margin-left: 16px;
}

#CambiaPassword .cp-input-wrapper { position: relative; display: flex; align-items: center; }

#CambiaPassword .cp-input {
	width: 100%; height: 48px;
	border: 1.5px solid #e3e3e3; border-radius: 8px;
	padding: 0 44px 0 14px;
	font-size: 15px; color: #171618; font-family: "Inter", sans-serif;
	background: transparent; outline: none;
	transition: border-color 0.2s;
}
#CambiaPassword .cp-input:focus { border-color: #171618; }

#CambiaPassword .cp-yeux {
	position: absolute; right: 12px;
	width: 22px; height: 22px; cursor: pointer; flex-shrink: 0;
	background: url(../../img/iconlogin/ojito.png) no-repeat center / contain;
	display: inline-block;
}

#CambiaPassword .cp-reglas {
	display: none; list-style: none;
	padding: 6px 0 0 0; margin: 0;
	flex-direction: column; gap: 4px;
}
#CambiaPassword .cp-reglas.visible { display: flex; }

#CambiaPassword .cp-regla {
	font-size: 12px; color: #969696;
	display: flex; align-items: flex-start; gap: 6px; line-height: 1.4;
}
#CambiaPassword .cp-regla::before { content: '✓'; flex-shrink: 0; font-weight: 700; }
#CambiaPassword .cp-regla.ok { color: #27ae60; }

#CambiaPassword .cp-footer { 
	display: flex;
	justify-content: center;
	padding: 16px 28px 32px 28px; 
	flex-shrink: 0; 
}

#CambiaPassword #cp-btn-continuar,
#CambiaPassword #cp-btn-token {
	width: 180px; height: 48px; border: none; border-radius: 8px;
	background: #d4d4d4; color: #999999;
	font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600;
	cursor: not-allowed; transition: background 0.2s, color 0.2s;
}

#CambiaPassword #cp-btn-continuar.cp-activo,
#CambiaPassword #cp-btn-token.cp-activo {
	background: #171618; 
	color: #fff; 
	cursor: pointer; 
}

#CambiaPassword #cp-btn-continuar.cp-activo:hover,
#CambiaPassword #cp-btn-token.cp-activo:hover { background: #2e2c30; }

@media (max-width: 900px) { #CambiaPassword { width: 420px !important; } }
@media (max-width: 600px) {
	#CambiaPassword {
		top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
		width: 100% !important; height: 100vh !important;
		border-radius: 0 !important; box-shadow: none !important;
	}
}

/* ── Alerta superior compartida ── */
.alerta-superior {
	display: none;
	width: 492px;
	padding: 14px 24px;
	background: #fce8e8;
	text-align: center;
	font-size: 14px;
	color: #000000;
	flex-shrink: 0;
	font-family: "Inter", sans-serif;
	margin-left: 18px;
	border-radius: 8px;
}
.alerta-superior.visible {
	display: block;
}

.alerta-superior-token{
	display: none;
	width: 440px;
	padding: 14px 24px;
	background: #fce8e8;
	text-align: center;
	font-size: 14px;
	color: #000000;
	flex-shrink: 0;
	font-family: "Inter", sans-serif;
	margin-left: 18px;
	border-radius: 8px;
}
.alerta-superior-token.visible{
	display: block;
}

/* ══════════════════════════════════════════════════════════
   PANEL — #CambiaClaveOk  (pagCambiaClaveOk.cfm)
══════════════════════════════════════════════════════════ */

#CambiaClaveOk,
#CambiaClaveOk * { box-sizing: border-box; float: none !important; }

#CambiaClaveOk {
	position: fixed !important;
	top: 10px !important; right: 10px !important; bottom: 0 !important;
	width: 688px !important; height: 100vh !important;
	background: #ffffff !important;
	display: flex !important; flex-direction: column !important;
	border-radius: 16px 0 0 16px !important;
	box-shadow: -8px 0 48px rgba(0,0,0,0.22) !important;
	z-index: 9999 !important;
	font-family: "Inter", sans-serif !important;
	overflow: hidden !important;
}

.cco-logo {
	padding: 32px 28px 0 28px;
	flex-shrink: 0;
}

.cco-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 28px 80px 28px;
	text-align: center;
}

.cco-listo {
	font-size: 32px;
	color: #b8b8b8;
	font-weight: 400;
	margin: 0 0 4px 0;
	line-height: 1.2;
}

.cco-subtitulo {
	font-size: 32px;
	color: #b8b8b8;
	font-weight: 400;
	margin: 0 0 4px 0;
	line-height: 1.2;
}

.cco-texto {
	font-size: 32px;
	font-weight: 700;
	color: #171618;
	margin: 0 0 48px 0;
	line-height: 1.2;
}

.cco-btn {
	background: #171618;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 14px 48px;
	font-size: 15px;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	cursor: pointer;
	transition: background 0.2s;
}
.cco-btn:hover { background: #2e2c30; }

@media (max-width: 900px) { #CambiaClaveOk { width: 420px !important; } }
@media (max-width: 600px) {
	#CambiaClaveOk {
		top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
		width: 100% !important; height: 100vh !important;
		border-radius: 0 !important; box-shadow: none !important;
	}
}

/* ══════════════════════════════════════════════════════════
   PANEL — #DesbloqueoOk  (pagDesbloqueoOk.cfm)
══════════════════════════════════════════════════════════ */

#DesbloqueoOk,
#DesbloqueoOk * { box-sizing: border-box; float: none !important; }

#DesbloqueoOk {
	position: fixed !important;
	top: 10px !important; right: 10px !important; bottom: 0 !important;
	width: 688px !important; height: 100vh !important;
	background: #ffffff !important;
	display: flex !important; flex-direction: column !important;
	border-radius: 16px 0 0 16px !important;
	box-shadow: -8px 0 48px rgba(0,0,0,0.22) !important;
	z-index: 9999 !important;
	font-family: "Inter", sans-serif !important;
	overflow: hidden !important;
}

@media (max-width: 900px) { #DesbloqueoOk { width: 420px !important; } }
@media (max-width: 600px) {
	#DesbloqueoOk {
		top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
		width: 100% !important; height: 100vh !important;
		border-radius: 0 !important; box-shadow: none !important;
	}
}

/* ══════════════════════════════════════════════════════════
   PANEL — #RecuperaClienteIdOk  (pagRecuperaClienteIdOk.cfm)
══════════════════════════════════════════════════════════ */

#RecuperaClienteIdOk,
#RecuperaClienteIdOk * { box-sizing: border-box; float: none !important; }

#RecuperaClienteIdOk {
	position: fixed !important;
	top: 10px !important;
	right: 10px !important;
	bottom: 10px !important;
	width: 523px !important;
	background: #fff !important;
	display: flex !important;
	flex-direction: column !important;
	border-radius: 16px !important;
	box-shadow: -8px 0 48px rgba(0, 0, 0, 0.22) !important;
	z-index: 9999 !important;
	font-family: "Inter", sans-serif !important;
	overflow:hidden !important;
}

#RecuperaClienteIdOk .rco-header {
	padding: 32px 32px 0 32px;
	flex-shrink: 0;
}

#RecuperaClienteIdOk .rco-label-top {
	font-size: 13px;
	color: #969696;
	font-weight: 400;
}

#RecuperaClienteIdOk .rco-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 32px 80px 32px;
}

#RecuperaClienteIdOk .rco-titulo {
	font-size: 32px;
	color: #b8b8b8;
	font-weight: 400;
	margin: 0 0 4px 0;
	line-height: 1.2;
}

#RecuperaClienteIdOk .rco-email {
	font-size: 32px;
	font-weight: 700;
	color: #171618;
	margin: 0 0 24px 0;
	line-height: 1.2;
	word-break: break-all;
}

#RecuperaClienteIdOk .rco-texto {
	font-size: 16px;
	color: #969696;
	font-weight: 400;
	margin: 0 0 40px 0;
	line-height: 1.5;
}

@media (max-width: 900px) { #RecuperaClienteIdOk { width: 420px !important; } }
@media (max-width: 600px) {
	#RecuperaClienteIdOk {
		top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
		width: 100% !important; height: 100vh !important;
		border-radius: 0 !important; box-shadow: none !important;
	}
}

.cp-titulo {
	color: #171618;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
	display: block;
}

#OpcionDesbloqueo .container-desbloqueo_error-otp {
	display: none;
	flex-shrink: 0;
}

#OpcionDesbloqueo .container-desbloqueo_error-otp.visible {
	display: block;
	width: 400px;
	margin-left: 15px;
	border-radius: 8px;
}