.z-999{
 z-index: 999 !important;
}

.z-1060{
 z-index: 1060 !important;
}


.alert-log{
	box-shadow: 0 10px 18px 2px rgba(4, 3, 5,.04),0 6px 32px 4px rgba(4, 13, 32, 0.17),0 8px 12px -5px rgba(4, 3, 5,.17);
}

#preloader2 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(243, 243, 243);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

svg#iconPre {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: auto;
	pointer-events: none;
}

#orange-bottom {
	mask-image: linear-gradient(to top, #fff, #fff);
	mask-size: 100% 0;
	mask-position: bottom;
	mask-repeat: no-repeat;
}

#middle {
	mask-image: linear-gradient(to top, #fff, #fff);
	mask-size: 100% 0;
	mask-position: bottom;
	mask-repeat: no-repeat;
}

#birrete {
	mask-image: linear-gradient(to top, #fff, #fff);
	mask-size: 100% 0;
	mask-position: bottom;
	mask-repeat: no-repeat;
}

@keyframes maskFill {
	to {
		mask-size: 100% 100%;
	}
}

@keyframes tilt {
	0% {
		transform: rotate(0deg);
	}

	30% {
		transform: rotate(-15deg);
	}

	60% {
		transform: rotate(15deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

@media only screen and (min-width: 992px) {
	.form-wizard .nav-wizard li .pgrssstp:after {
		top: 27% !important;
	}
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
	.form-wizard .nav-wizard li .pgrssstp:after {
		top: 27% !important;
	}

	.modal-dialog {
		max-width: 800px !important;
	}
}

@media only screen and (max-width: 575px) {
	.form-wizard .nav-wizard li .pgrssstp:after {
		top: 49% !important;
	}
}

@media only screen and (max-width: 499px) {
	.form-wizard .nav-wizard li .pgrssstp:after {
		top: 50% !important;
	}
	.nvlnk-sm, .iauth-txt{
		margin-bottom: 1.3rem !important;
	}
	svg#vld{
		width: 30% !important; 
	}
	svg#mtd-nv{
		width: 17% !important; 
	}
	svg#iauth{
		width: 42% !important; 
	}
	.cnt-mtd-env{
		width: 100% !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	.logoIEI{
		width: 25% !important;
	}
	.lbl-inpt-sw{
		font-size: .84rem !important;
	}
	.vld-inpt-cnt{
		width: 90% !important;
	}
	.mtd-inpt-cnt{
		width: 80% !important;
	}
}

@media only screen and (max-width: 500px) {
	.md-bdy-xs {
		padding: 1.5rem !important;
	}

	.tab-c-xs {
		padding-left: 1.2rem !important;
		padding-right: 1.2rem !important;
	}
}

@media only screen and (min-width: 576px) {
	.nvlnk-sm {
		display: none !important;
	}
}

@media only screen and (max-width: 575px) {
	.form-wizard .nav-wizard li .nav-link p {
		display: none !important;
	}

	.nvlnk-sm {
		display: block !important;
	}
}

@media only screen and (max-width: 475px) {
	.form-wizard .nav-wizard li .nav-link p {
		font-size: 11px !important;
	}
}

.sw .toolbar>.btn.disabled, .sw .toolbar>.btn:disabled{
	display: none !important;
}

/*Para pasos activos y completados */
.form-wizard .nav-wizard li .nav-link.active .step1,
.form-wizard .nav-wizard li .nav-link.active .step2,
.form-wizard .nav-wizard li .nav-link.active .step3,
.form-wizard .nav-wizard li .nav-link.active .step4 {
	background: #ff7954
		/*#4854a3*/
		!important;
	color: #fff;
	border: 12px solid #ffcec1
		/*#d2d8ff*/
		!important;
}

.bg-scnd2 {
	background-color: #ff7954 !important;
}

.form-wizard .nav-wizard li .nav-link.inactive.done:after {
	background: #ff9679 !important;
}

.form-wizard .nav-wizard li .nav-link.inactive.active:after {
	background: #dddddd !important;
}

.l-t10 {
	left: 10px !important;
}



/* Estado normal */
.completed {
	content: "" !important;
	position: relative !important;
	background: #ff7954
		/*#4854a3*/
		/*#3cc97a*/
		!important;
	color: #fff;
	border: 12px solid #ff7954
		/*#4854a3*/
		!important;
	transition: all 0.6s ease-in-out !important;
	overflow: hidden !important;
}

/* Check animado con ::after */
.completed::after {
	content: "✔";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.8);
	opacity: 0;
	font-size: 1.5rem;
	color: white;
	animation: checkFadeBounce 1.5s ease forwards;
}


/* Animación para el check */
@keyframes checkFadeBounce {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.6);
	}

	60% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.1);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* Transición estilo “relleno desde dentro” (borde y fondo ya lo manejan) */
.completed {
	box-shadow: inset 0 0 0 0 #fff;
	animation: borderExpand 0.5s ease-in-out forwards;
}

@keyframes borderExpand {
	0% {
		box-shadow: inset 0 0 0 0 #fff;
	}

	100% {
		box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0);
		/* Simula el rellenado */
	}
}

#userid.is-valid,
#password.is-valid {
	border-color: #1EBA62 !important;
	/* Verde para válido */
	border-right: 1px solid #1EBA62 !important;
}

#userid.is-invalid,
#password.is-invalid {
	border-color: #DC3545 !important;
	/* Rojo para inválido */
	border-right: 1px solid #DC3545 !important;
}

.z-i999 {
	z-index: 1000 !important;
}


.crspoint {
	cursor: pointer !important;
}


#Olc:hover {
	color: #ea5820 !important;
}

/* Ocultar el div .login-aside en 991px o menos */
@media only screen and (max-width: 991px) {
	.authincation .login-aside {
		display: none;
	}

	/* Mostrar el div .logoMq-mdToSm en 991px o menos */
	.logoMq-mdToSm {
		display: block !important;

	}

	.SigueLogo {
		width: 40% !important;
		opacity: 1 !important;
	}

	.logoIEI {
		width: 35% !important;
		margin-bottom: 1rem !important;
	}

	.Btnlog {
		margin-bottom: .5rem !important;
	}

	.authincation {
		flex-direction: row !important;
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
	}
}

/* Asegurar que en pantallas mayores a 992px, el comportamiento sea inverso */
@media (min-width: 992px) {
	.login-aside {
		display: flex !important;
		/* Restaurar flex si era d-flex */
	}

	.logoMq-mdToSm {
		display: none !important;
	}
}

/* Manejo de orientación para tablets en portrait y teléfonos en landscape */
@media (max-width: 991px) and (orientation: portrait),
(max-width: 991px) and (orientation: landscape) {
	.login-aside {
		display: none !important;
	}

	.logoMq-mdToSm {
		display: block !important;
	}
}

.authincation .login-aside:after {
	right: -8.70rem !important;
}

.met-env-icn2 {
	color: #397eff !important;
	font-size: 3.5rem !important;
}

.nw-pss-icn {
	color: #fbcf2f !important;
	font-size: 3.2rem !important;
}

.hover-effect {
	transition: all 0.3s ease-in-out !important;
	cursor: pointer !important;
}


.card-radio input[type="radio"]:checked+.card-body {
	background-color: #ff7f5b !important;
	color: white !important;
}

.card-radio input[type="radio"]:checked+.card-body i,
.card-radio input[type="radio"]:checked+.card-body p {
	color: white !important;
}

.card-radio input[type="radio"]:checked+.card-body,
.hover-effect:hover,
.hover-effect:focus,
.hover-effect:active {
	border-radius: var(--bs-border-radius-xl) !important;
	box-shadow: 0 4px 12px rgba(255, 134, 100, 0.25) !important;
}

.card-radio.selected {
	border: none !important;
	box-shadow: 0 4px 12px rgba(255, 134, 100, 0.25);
}

.hover-effect:hover,
.hover-effect:focus,
.hover-effect:active {
	border: var(--bs-border-width) var(--bs-border-style) rgba(255, 132, 98, 0.25) !important;
	transform: scale(1.03) !important;
}

@keyframes bounce-icon {
	0% {
		transform: translateY(0);
	}

	30% {
		transform: translateY(-5px);
	}

	60% {
		transform: translateY(2.5px);
	}

	100% {
		transform: translateY(0);
	}
}

.hover-effect:hover .fa-envelope,
.hover-effect:hover .fa-comment-dots,
.hover-effect:focus .fa-envelope,
.hover-effect:focus .fa-comment-dots,
.hover-effect:active .fa-envelope,
.hover-effect:active .fa-comment-dots {
	animation: bounce-icon 1.5s ease;
}

.hover-effect:hover i,
.hover-effect:focus i,
.hover-effect:active i,
.hover-effect:hover p,
.hover-effect:focus p,
.hover-effect:active p {
	color: #ff8462 !important;
	;
}

#sendCodeBtn:hover,
#sendCodeBtn:active,
#sendCodeBtn:focus,
#spssvw:hover,
#spssvw:active,
#spssvw:focus,
#venntk:hover,
#venntk:active,
#venntk:focus,
#rrocrev:hover,
#rrocrev:active,
#rrocrev:focus{
background-color: #ff673d !important;
border-color: #ff673d !important;
}


@media only screen and (max-width: 457px) {
    .card-body {
        padding: .7rem .5rem !important;
		width: 100% !important;
    }
	.cnt-bdy-sw{
		width: 100% !important;
	}

	.md-bdy-xs {
	padding: 1.5rem .5rem !important;
	}

	.tab-c-xs {
		padding-left: .5rem !important;
		padding-right: .5rem !important;
	}
	.cnt-rp{
		width: 100% !important;
	}
}


@media only screen and (max-width: 991px) {
    .sm-to-md {
		display: block !important;
    }
}

@media only screen and (min-width: 992px) {
    .min-lg {
		display: flex !important;
    }
}


/*TOKEN ICONS ANIMATION*/

.shake {
  /* Esto fuerza que el origen sea el centro del viewBox entero */
  transform-box: view-box;
  transform-origin: center center;
  will-change: transform;
  animation: shake 1s ease-in-out;
}

@keyframes shake {
  0%,100% { transform: translateY(0); }
  25%     { transform: translateY(-5px); }
  50%     { transform: translateY( 5px); }
  75%     { transform: translateY(-5px); }
}


.refill-circlenv {
  fill: none;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  stroke-linecap: round;
  animation: draw-circle 0.7s ease-in 0.7s forwards;
  animation-direction:alternate;
}

@keyframes draw-circle {
  to { stroke-dashoffset: 0; }
}

/* 3. FADE IN para el código */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.code-fade {
  opacity: 0;
  animation: fadeIn 1s ease 1s forwards; /* aparece tras 1s */
}



.fig-npt, .fig-npt2, .fig-npt3 {
  opacity: 0;
  animation: fadeInInf 1s ease forwards;
  animation-delay: 0.2s;
}

@keyframes fadeInInf {
  to {
    opacity: 1;
  }
}

/* Path de código ocultos y preparados para efecto “draw” */
/* Después */
svg#tkn-inf  .code-path {
 opacity: 0;
  fill: #ef7959;
  /* transition: opacity ... */
}


#cursor-group.blink { /* o simplemente .blink */
  animation: blink 2s linear infinite;
   animation-delay: 3s;
}


#cursor-group {
  transform: translateX(-350px); /* empieza a la derecha */
  animation: moveCursorLeft 1.5s linear forwards;
  animation-delay: 1s;
}

@keyframes moveCursorLeft {
  to {
    transform: translateX(0px); /* termina a la izquierda */
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  5% {
    opacity: 0.95;
  }
  10% {
    opacity: 0.9;
  }
  15% {
    opacity: 0.85;
  }
  20% {
    opacity: 0.8;
  }
  25% {
    opacity: 0.75;
  }
  30% {
    opacity: 0.7;
  }
  35% {
    opacity: 0.65;
  }
  40% {
    opacity: 0.6;
  }
  45% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.5;
  }
  55% {
    opacity: 0.55;
  }
  60% {
    opacity: 0.6;
  }
  65% {
    opacity: 0.65;
  }
  70% {
    opacity: 0.7;
  }
  75% {
    opacity: 0.75;
  }
  80% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.85;
  }
  90% {
    opacity: 0.9;
  }
  95% {
    opacity: 0.95;
  }
  100% {
    opacity: 1;
  }
}


.brdrtop-n{
	border-top-left-radius: 0px !important;
	border-top-right-radius: 0px !important;
	}

.brdrtop-1{
	border-top-left-radius: 50px !important;
	border-top-right-radius: 50px !important;
	}

.token-cd {
    width: 3.1rem;
    height: 3.1rem;
    font-size: 1.05rem;
    box-shadow: 0 0 0 1.25vmin,
                    inset 6.5vmin 6.5vmin 13vmin rgba(0, 0, 0, 0.25),
                    0.2vmin 0.2vmin 2vmin rgba(0, 0, 0, 0.825);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #ffffff;
    border-radius: 50%;
    font-weight: 700;
    }

    .token-count{
        color: white !important;
    }

    @media (max-width: 800px) {
      .token-cd {
        width: 2.8rem;
    	height: 2.8rem;
    	font-size: .9rem;
    	box-shadow: 0 0 0 1.25vmin,
                    inset 6.5vmin 6.5vmin 13vmin rgba(0, 0, 0, 0.25),
                    0.2vmin 0.2vmin 2vmin rgba(0, 0, 0, 0.825);
      }
    }

	@media (max-width: 575px) {
      .token-cd {
        width: 2.6rem;
    	height: 2.6rem;
    	font-size: .8rem;
    	box-shadow: 0 0 0 1.25vmin,
                    inset 6.5vmin 6.5vmin 13vmin rgba(0, 0, 0, 0.25),
                    0.2vmin 0.2vmin 2vmin rgba(0, 0, 0, 0.825);
      }
	  .txt-tkn-tinfo, #intentosRestantes{
		font-size: 0.8rem !important;
	  }
    }

.token-cd.animate {
  animation: timer_beat 1s infinite;
}


    .token-cd.animate::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: -100;
      width: 100%;
      height: 100%;
	  transform: translateY(0); /* estado inicial */
	  background-color: #ff8d63fa;
      animation: timer_indicator 120s 1s linear forwards, 
      background_color 120s 1s cubic-bezier(0.9, 0, 0.1, 1) forwards;
    }
	

@keyframes timer_beat {
  40%, 80% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
}

    @keyframes timer_indicator {
      100% {
        transform: translateY(100%);
      }
    }

   /* @keyframes background_color {
      16.66% { background-color: #eb7347fa; }
      33.32% { background-color: #eb7347fa; }
      49.98% { background-color: #d95b70fa; }
      66.64% { background-color: #d95b70fa; }
      83.26% { background-color: #ad578afa; }
      99.92% { background-color: #ad578afa; }
    }*/

	#timeTokenAlert{
		box-shadow: -8px 10px 15px -3px rgba(0,0,0,0.15);
		position: fixed;
		top: 10px; 
		right: 0px;
		z-index: 1056; 
		width: auto; 
		max-width: 90%; 
		border-top-right-radius: 0 !important;
	  	border-bottom-right-radius: 0 !important;
	}

	@media screen and (max-width:800px) {
		#timeTokenAlert{
		position: fixed;
		top: 0;
		left: 0;
		max-width: 100%;
		z-index: 1060;
		margin: 0;
		border-radius: 0 !important;
		text-align: center;
		}
	}