html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    overflow: auto; /* Asegura que si el contenido es largo, es scrollable */
}






.bg-info-light {
    background-color: #FFCCCC !important;
}

.bg-info-base {
    
    background-color: #001f48 !important;
}


.bg-info-dark {
    background-color: #002d62 !important;
}

.bg-info-saturated {
    background-color: #003380 !important;
}


.text-custom {
    color: #002d62 !important;
}


.btn-footer {
    width: 100px !important;
    }

/* Estilos para dispositivos con pantalla estrecha (móviles) */
@media (max-width: 576px) {
    .btn-footer {
        width: auto !important; /* Ajustar el ancho a auto */
        font-size: 0.65rem !important; /* Reducir el tamaño de la fuente */
    }
    .btn-footer i.fas {
        font-size: 1rem !important; /* Reducir el tamaño del ícono */
    }
    .footer .container {
        padding: 0.5rem !important; /* Reducir el padding del contenedor */
    }
}

.btn-footer.active {
    background-color: #002d62 !important; /* Color azul de Bootstrap, puedes personalizarlo si lo deseas */
}

.btn-footer.inactive {
    background-color: #d4d4d4 !important; /* Color gris de fondo */
    color: #888 !important; /* Color del texto */
    border-color: #888 !important;  /* Color del borde */
}

/* Establecer color de fondo y borde para el estado normal del botón */
.btn-primary {
    background-color: #002d62 !important;
    border-color: #002d62 !important;
}

/* Establecer color de fondo y borde para el estado :hover y :focus del botón */
.btn-primary:hover,
.btn-primary:focus {
    background-color: #ccae2c !important; /* Un azul un poco más oscuro para el hover/focus */
    border-color: #ccae2c !important;
    color: #002d62!important;
}

/* Establecer color de fondo y borde para el estado :active del botón */
.btn-primary:active {
    background-color: #001a3c !important; /* Un azul aún más oscuro para el estado activo */
    border-color: #001a3c !important;
}