@charset "utf-8";
/* CSS Document */
body{
	font-family: "Open Sans", sans-serif;
}
/* ==========================================
   SECCIÓN PRINCIPAL
========================================== */

.leg-reg-section{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;
	background-image:url("../fds/fdo_crajc.png");
	background-size: cover;
	
}

/* ==========================================
   CONTENEDOR PRINCIPAL
========================================== */


.leg-reg-container{

    width:500px;

    background-image: url("../fds/fdo_plomo.jpg");
	background-size: cover;

    border-radius:35px;

    overflow:hidden;

    display:flex;

    flex-direction:column;
	padding: 10px 15px;
}

/* ==========================================
   HEADER
========================================== */

.leg-reg-header{

    height:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 30px;
}

/* ==========================================
   STEPPER
========================================== */

.leg-reg-steps{

    width:100%;

    display:flex;

    align-items:flex-start;

    justify-content:center;
}

.leg-reg-step{

    display:flex;

    flex-direction:column;

    align-items:center;

    position:relative;
}

.leg-reg-step-circle{

    width:36px;

    height:36px;

    border-radius:50%;

    border:2px solid #d9e2ec;

    background:#ffffff;

    color:#94a3b8;

    font-weight:500;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;
}

.leg-reg-step-text{

    margin-top:8px;

    font-size:13px;

    font-weight:600;

    color:#94a3b8;

    transition:.3s;

    text-align:center;
}

.leg-reg-step-line{

    flex:1;

    height:2px;

    background:#d9e2ec;

    margin:18px 2px 0 2px;

    transition:.3s;
}

/* ==========================================
   PASO ACTIVO
========================================== */

.leg-reg-step-active .leg-reg-step-circle{

    border-color:#157347;

    background:#ffffff;

    color:#157347;
}

.leg-reg-step-active .leg-reg-step-text{

    color:#157347;
}

/* ==========================================
   PASO COMPLETADO
========================================== */

.leg-reg-step-completed .leg-reg-step-circle{

    background:#198754;

    border-color:#198754;

    color:#ffffff;
}

.leg-reg-step-completed .leg-reg-step-text{

    color:#198754;

    font-weight:600;
}

/* Línea después de un paso completado */

.leg-reg-step-completed + .leg-reg-step-line{

    background:#198754;
}

/* ==========================================
   BODY
========================================== */

.leg-reg-body{

    flex:1;

    padding:30px;
}

/* ==========================================
   FOOTER
========================================== */

.leg-reg-footer{

    height:60px;

    border-top:1px solid #edf2f7;

    display:flex;

    align-items:center;

    justify-content:center;
}

/* ==========================================
   ETAPAS
========================================== */

.leg-reg-stage{

    display:none;
}

.leg-reg-stage.active{

    display:block;
}

/* ==========================================
   TITULOS
========================================== */

.leg-reg-form-title{

    text-align:center;

    font-size:1.5rem;
	color:#006642;
    font-weight:700;

    margin-bottom:5px;
}

.leg-reg-form-subtitle{

    text-align:center;
	font-size:0.9rem;
    color:#6b7280;
    margin-bottom:25px;
}

/* ==========================================
   CONTENEDOR FORMULARIO
========================================== */

.leg-reg-form-container{

    border-radius:15px;
}
.leg-reg-form-label{
	font-size:0.85rem;
	font-weight: 500;
	margin-bottom: 5px;
}
.form-control, .form-select{
	font-size:0.90rem;
}
.form-control::placeholder {
    font-size: 0.85rem;
    opacity: 1; /* Garantiza que el color y tamaño se apliquen bien en Firefox */
}
/* ==========================================
   BOTONES
========================================== */

.leg-reg-form-actions{

    margin-top:25px;

    display:flex;

    justify-content:space-between;

    gap:10px;
}

/* ==========================================
   INPUTS CON ICONOS
========================================== */

.leg-reg-input-icon{

    position:relative;
	
}
/* 1. Limpieza de contenedores generales */
.leg-reg-input-icon, 
.input-group {
    background-color: transparent !important;
}

/* 2. Estilos para los campos con Input-Group (Número, Nombres, Apellidos, etc.) */
.input-group-text {
    background-color: #006642 !important; /* Caja del icono en verde */
    color: #ffffff !important;            /* Icono en blanco */
    border: 1px solid #006642 !important; /* Borde verde uniforme */
    border-right: none !important;        /* Se une al campo de texto */
}

/* El input pegado al icono verde */
.input-group .form-control {
    border-left: none !important;         /* Quita el borde izquierdo para unirse al icono */
    border-color: #dee2e6;                /* Mantiene el borde normal gris en el resto de la caja */
}

/* 3. Estilos EXCLUSIVOS para "Tipo de Documento" (.leg-reg-input-icon) */
.leg-reg-input-icon {
    position: relative;
}

/* El icono flotante (SIN fondo verde alrededor de la etiqueta i) */
.leg-reg-input-icon i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #006642 !important;            /* Solo la figura del icono en verde */
    background-color: transparent !important; /* SIN fondo en la i */
    border: none !important;
    z-index: 5;
}

/* El select completo */
.leg-reg-input-icon .form-select {
    padding-left: 45px !important;        /* Espacio para no chocar con el icono */
    border: 1px solid #dee2e6 !important; /* Recupera su borde completo normal */
    border-radius: 0.375rem !important;   /* Recupera esquinas redondeadas completas */
    background-color: #ffffff !important; /* Fondo blanco */
}

.leg-reg-input-icon i{
    position:absolute;

    left:15px;

    top:50%;

    transform:translateY(-50%);

    color:#000000;

    z-index:2;
}

.leg-reg-input-icon .form-select,
.leg-reg-input-icon .form-control{

    padding-left:45px;
}

/* ==========================================
   PASSWORD
========================================== */

.leg-reg-password-rules{

    margin-top:15px;

    padding:20px;

    border:1px solid #e5e7eb;

    border-radius:16px;
}

.leg-reg-password-title{

    font-weight:600;
    margin-bottom:12px;
	font-size:0.9rem;
}

.leg-reg-password-rule{

    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:2px;
}

.leg-reg-password-rule i{

    color:inherit;
}
.leg-reg-password-rule span{
	color:rgba(0,0,0,0.5);
    font-size:0.8rem;
}

.text-success{
	color:#006642 !important;
}
/* ==========================================
   ETAPA CONFIRMACIÓN
========================================== */

.leg-reg-confirm-icon{

    font-size:90px;

    color:#198754;

    margin-bottom:25px;
}

.leg-reg-confirm-email{

    font-size:22px;

    font-weight:700;

    margin:20px 0;
}

.leg-reg-confirm-success{

    background:#d1e7dd;

    border:1px solid #badbcc;

    color:#0f5132;

    padding:18px;

    border-radius:10px;
}

.leg-reg-confirm-warning{

    background:#fff3cd;

    border:1px solid #ffecb5;

    color:#664d03;

    padding:18px;

    border-radius:10px;
}

.leg-log-link{
	color:#198754;
	font-size:0.9rem;
	/*text-decoration: none;*/
}
.leg-log-link:hover{
	color:#003B13;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:576px){

    .leg-reg-section{

        padding:15px;
    }

    .leg-reg-container{

        width:100%;

        border-radius:25px;
		
    }

    .leg-reg-header{

        padding:0 15px;
    }

    .leg-reg-body{

        padding:20px;
    }

    .leg-reg-form-title{

        font-size:28px;
    }

    .leg-reg-step-text{

        font-size:11px;
    }

}