/* Aseguramos que toda la página use el 100% de la altura */
    html, body {
        height: 90%;
        margin: 0; /* Eliminar márgenes por defecto */
    }

    .page-wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100%; /* Asegura que ocupe toda la altura de la página */
    }

    /* Estilo para el encabezado */
   header {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        height: 80px;
        background-color: #0072BB;
    }

    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0px;
    }

    .logo img {
        max-width: 200px;
        height: auto;
    }

    /* Estilo para el contenido principal */
    main {
        flex: 1; /* Hace que el contenido principal ocupe el espacio disponible */
        padding: 20px;
        min-height: calc(100vh - 300px); /* Ajusta el tamaño del contenido para ocupar el espacio restante entre header y footer */
    }

    /* Estilo para el pie de página */
    footer {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        height: 90px; /* Altura del pie de página */
        background-color: #333;
        margin-top: 50px; /* Opcional: agrega espacio entre el contenido y el pie */
    }
	
	/* Estilos para el contenedor del formulario */
/* Contenedor del formulario */
.form-container {
    background-color: #fff; /* Fondo blanco para el cuadro */
    border: 2px solid #ddd; /* Borde suave */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    padding: 20px; /* Espacio interno alrededor del formulario */
    margin-top: 30px; /* Espacio superior */
    width: 90%; /* Ancho del cuadro (ajústalo según lo necesites) */
    max-width: 1000px; /* Ancho máximo del cuadro */
    margin-left: auto; /* Centra el contenedor horizontalmente */
    margin-right: auto; /* Centra el contenedor horizontalmente */
    overflow: hidden; /* Asegura que el contenido no se salga */
}

/* Barra superior */
.form-container .header-container {
    background-color: #0072BB; /* Fondo celeste */
    color: #fff; /* Color del texto */
    padding: 15px; /* Espaciado interno */
    font-size: 20px; /* Tamaño del texto */
    font-weight: bold; /* Negrita para el título */
    text-align: center; /* Centrar el texto */
    border-top-left-radius: 8px; /* Bordes redondeados superiores */
    border-top-right-radius: 8px; /* Bordes redondeados superiores */
    margin: -20px -20px 20px; /* Alineación con el borde del contenedor */
}

/* Opcional: Agregar espacio adicional para los campos de entrada */
.form-container input,
.form-container select,
.form-container textarea {
    margin-bottom: 15px; /* Espacio entre los campos */
    padding: 10px; /* Relleno interno de los campos */
    width: 100%; /* Hace que los campos ocupen todo el ancho disponible */
    border-radius: 4px; /* Bordes redondeados para los campos */
    border: 1px solid #ddd; /* Borde suave para los campos */
}

/* Contenedor de los botones */
.form-buttons {
    display: flex; /* Utiliza Flexbox para alinear los botones */
    justify-content: center; /* Centra los botones horizontalmente */
    gap: 20px; /* Espacio entre los botones */
    margin-top: 20px; /* Espacio superior entre el formulario y los botones */
}

/* Estilos para los botones */
.form-buttons .btn {
    width: 150px; /* Tamaño definido para los botones */
    padding: 10px 20px; /* Relleno interno para hacerlo más grande */
    font-size: 16px; /* Tamaño de la fuente */
    text-align: center; /* Alinea el texto al centro */
    border-radius: 4px; /* Bordes redondeados */
    border: 1px solid #ddd; /* Borde suave */
    background-color: #0072BB; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
}

/* Estilo para el botón al pasar el cursor por encima */
.form-buttons .btn:hover {
    background-color: #5a6268; /* Color de fondo al pasar el ratón */
    border-color: #4e555b; /* Cambia el borde al pasar el ratón */
    color: #fff; /* Color del texto */
}


/* Aplicar fuente personalizada */

@font-face {
    font-family: 'Inter'; /* Nombre de la fuente */
    src: url('fonts/Inter-VariableFont_slnt_wght.ttf') format('truetype'); /* Ruta al archivo de la fuente */
}

h3 {
    font-family: 'Inter'; /* Usar la fuente personalizada */
    font-size: 21px;
    font-weight: 500;
	color: #02426b;
}
h2 {
    font-family: 'Inter'; /* Usar la fuente personalizada */
    font-size: 23px;
    font-weight: 500;
	color: #02426b;
}

table {
    margin: 0 auto; /* Centra la tabla horizontalmente */
    text-align: center; /* Centra el contenido dentro de las celdas */
}

.div-contenedor {
    display: flex; /* Usamos Flexbox */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    height: 200px; /* Establece una altura para el div (necesaria para centrar verticalmente) */
}

/* Estilo para el contenedor */
.row {
    margin-bottom: 20px; /* Espacio debajo de la fila */
}

/* Estilos para la columna */
.col-lg-12 {
    padding: 0 15px; /* Relleno horizontal */
}

/* Agregar sombra sutil al texto */
.text-center h3 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

/* Estilo personalizado para el select */
        select.custom-select {
            width: 100%; /* Hace que el select ocupe todo el ancho disponible */
            height: 40px; /* Altura del select */
            padding: 10px; /* Espaciado interno */
            font-size: 14px; /* Tamaño de la fuente */
            border: 1px solid #ccc; /* Borde gris claro */
            border-radius: 5px; /* Bordes redondeados */
            background-color: #f8f9fa; /* Fondo del select */
            color: #333; /* Color del texto */
        }

        /* Estilo para el select cuando se pasa el mouse */
        select.custom-select:hover {
            background-color: #e2e6ea; /* Fondo gris claro al pasar el mouse */
        }

        /* Estilo cuando el select está enfocado */
        select.custom-select:focus {
            border-color: #007bff; /* Borde azul al hacer foco */
            outline: none; /* Eliminar el contorno por defecto */
        }
		
		
/* Estilo similar al select para las cajas de texto */
input[type="text"] {
    width: 100%; /* Hace que la caja de texto ocupe todo el ancho disponible */
    height: 35px; /* Ajusta la altura */
    padding: 8px 12px; /* Espaciado interno */
    font-size: 14px; /* Tamaño de la fuente */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 4px; /* Bordes redondeados */
    background-color: #ffffff; /* Fondo blanco */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    color: #333; /* Color del texto */
}

/* Estilo cuando la caja de texto está enfocado */
input[type="text"]:focus {
    border-color: #007bff; /* Borde azul al hacer foco */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra azul al hacer foco */
    outline: none; /* Eliminar el contorno por defecto */
}

/* Estilo para la caja de texto cuando se pasa el mouse */
input[type="text"]:hover {
    border-color: #007bff; /* Borde azul al pasar el mouse */
}