/* Overlay style */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #fff;
	margin-bottom: 100px;
}

/* Overlay closing cross */
.overlay .overlay-close {
	width: 80px;
	height: 80px;
	position: absolute;
	right: -12px;
    top: 35px;
	overflow: hidden;
	border: none;
	background: url('/assets/img/cerrar.png') no-repeat center center;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 100;
}

/* Menu style */
.overlay nav {
	position: relative;
	top: 60%;
	height: 100%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	overflow-y: scroll;
}


/* Effects */
.overlay-slidedown {
	visibility: hidden;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
	transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}

.overlay-slidedown.open {
	visibility: visible;
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
	-webkit-transition: -webkit-transform 0.4s ease-in-out;
	transition: transform 0.4s ease-in-out;
	z-index: 1;
}
/* New styles */
select.select-pending {
    height: 50px;
    padding-left: 12px!important;
    background-color: transparent;
    border-color: #e5e5e5;
    border-radius: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    color: #6f7888;
    font-size: 14px;
    outline: 0
}

.box-register.pending input[type="text"],
.box-register.pending input[type="email"],
.box-register.pending input[type="tel"],
.box-register.pending input[type="number"],
.box-register.pending input[type="month"] {

    padding-left: 12px !important;
}

.situacion_laboral {
    color: #6f7888;
    font-size: 1.5rem;
    font-weight: 400;
    color: gray;
    margin-right: 16px;
}

.mPadding{
    padding-top: 5rem;
}

@media (max-width: 767px) {
    .mPadding {
        padding-top: 0;
    }
}

        /* Estilos mejorados para el indicador de pasos */
    .step-indicator {
        position: relative;
        padding: 0;
        max-width: 500px;
    }

    /* Contenedor de pasos con espacio entre ellos */
    .steps-container {
        display: flex;
        justify-content: space-between;
        position: relative;
        padding: 0;
        z-index: 2;
    }

    /* Línea de progreso adaptable */
    .progress-bar {
        position: absolute;
        top: 20px; /* Alinea verticalmente con el centro de los círculos */
        /* Calcula el ancho para que sea del primer al último círculo */
        left: calc(16.666% + 0px); /* Comienza desde el centro del primer círculo */
        right: calc(16.666% + 0px); /* Termina en el centro del último círculo */
        height: 6px;
        background-color: #e9e9e9;
        z-index: 1;
    }

    .progress {
        position: absolute;
        height: 100%;
        left: 0;
        width: 0%; /* Comienza en 0% */
        background-color: #00b83e;
        transition: width 0.5s ease;
    }

    /* Cada paso individual */
    .step {
        text-align: center;
        position: relative;
        width: 33.333%;
    }

    /* Círculo del paso */
    .step-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #e9e9e9;
        color: #6c757d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 8px;
        font-weight: 600;
        font-size: 18px;
        position: relative;
        z-index: 3;
    }

    .step-circle.active {
        background-color: #00b83e;
        color: white;
    }

    .step-circle.completed {
        background-color: #00b83e;
        color: white;
    }

    /* Etiqueta de paso */
    .step-label {
        color: #6c757d;
        font-size: 14px;
        font-weight: 600;
    }

    /* Ajustes para móvil - ahora son más adaptables */
    @media (max-width: 576px) {
        .step-circle {
            width: 35px;
            height: 35px;
            font-size: 16px;
        }

        .step-label {
            font-size: 12px;
        }

        .progress-bar {
            top: 17px; /* Ajuste por el tamaño reducido del círculo */
        }

        .margin {
            margin-bottom: 20px;
        }
    }