/* Estilos Generales */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
}

/* Tarjeta */
.card {
    border-radius: 8px;
}

/* Barra de progreso */
.progress {
    height: 20px;
    margin-bottom: 30px;
}

.progress-bar {
    height: 100%;
    position: relative;
}

.progress-bar::after {
    content: attr(data-step);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    color: #fff;
}

/* Iconos de los pasos */
.step-icon {
    font-size: 1.5rem;
    margin-right: 8px;
}

/* Estilos para cada paso */
.step {
    display: none;
}

.step.active {
    display: block;
}

/* Botones de los pasos */
.step-buttons {
    margin-top: 20px;
}

/* Personalización del contenedor de la progresión */
.step-buttons button {
    margin-right: 10px;
}

/* Estilos para los controles */
input[type="text"], input[type="email"], input[type="tel"], select {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ced4da;
}

/* Ajustes de espaciado y márgenes */
.mb-3 {
    margin-bottom: 1.5rem;
}

.step-buttons button:disabled {
    background-color: #003366;
    cursor: not-allowed;
}

/* Estilos para los iconos de los pasos */
.bi-person,
.bi-envelope,
.bi-shield-lock,
.bi-map {
    color: #007bff;
}

 
.resmodal-content {
    height: 85vh; /* Ajusta la altura según lo que necesites */
    overflow-y: auto; /* Agrega scroll si el contenido excede la altura */
    border-radius: 8px; /* Mantiene los bordes redondeados del modal */
}


/* Estilos para el modal */
.modal-dialog {
    max-width: 500px !important; /* Ajusta el tamaño según lo necesites */
    margin: 1.75rem auto; /* Centrado vertical y horizontal */
}

/* Encabezado del modal */
.modal-header {
    background-color: rgb(11, 71, 161); /* Fondo azul */
    color: #fff; /* Texto blanco */
    border-bottom: 1px solid #dee2e6;
}

/* Título del modal */
.modal-title {
    margin: 0 auto; /* Centra el texto */
    font-size: 1.5rem; /* Ajusta el tamaño de la fuente */
    text-align: center;
}

/* Fondo del cuerpo del modal */
.modal-body {
    background-color: #f8f9fa; /* Fondo gris claro */
    padding: 20px;
}

/* Botones del modal */
.modal-footer .btn-primary {
    background-color: #007bff; /* Azul Bootstrap */
    border-color: #007bff;
}

.modal-footer .btn-secondary {
    background-color: #6c757d; /* Gris oscuro */
    border-color: #6c757d;
}

/* Estilo de la barra de progreso */
.progress-bar {
    background-color: #28a745; /* Verde Bootstrap */
}

/* Botón de cerrar en el modal */
.modal-header .btn-close {
    color: #fff; /* Icono de cerrar en blanco */
    opacity: 1; /* Asegura que sea completamente visible */
}