.card-header {
    font-size: 1.25rem;
    font-weight: 700;
}
.btn {
    font-weight: 700;
}
.btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
}
.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: #fff;
}



/* navbar */

.custom-navbar {
    background-color: transparent; /* Fondo transparente para el navbar */
    padding: 5px 0; /* Reducir el espacio vertical */
}

.custom-navbar .container-fluid {
    padding: 0 30px; /* Espacio lateral */
}

/* Estructura flexbox en columna para el logo y los enlaces */
.custom-d-flex {
    display: flex;
    flex-direction: column; /* Coloca el contenido en columna */
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    height: 100%;
}

/* Asegura que el logo está centrado */
.custom-navbar-brand {
    text-align: center; /* Centrar el logo */
    margin-bottom: 10px; /* Reducir el espacio entre el logo y los enlaces */
}

/* Estilos para la fila de los enlaces (fondo negro) */
.custom-navbar-nav {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center; /* Alineación horizontal */
}

.custom-navbar-nav .nav-link {
    color: #fff; /* Texto blanco */
    font-size: 16px; /* Reducir tamaño de los enlaces */
    margin-left: 10px; /* Espacio entre los enlaces */
    margin-right: 10px;
    padding: 4px 8px; /* Ajustar el relleno para hacerlo más compacto */
    border-radius: 50px; /* Bordes redondeados en los enlaces */
    transition: all 0.3s ease; /* Transición suave */
}

.custom-navbar-nav .nav-link:hover {
    color: #00c8ff; /* Color brillante al pasar el ratón */
    background-color: rgba(0, 200, 255, 0.1); /* Fondo suave al pasar el ratón */
    text-decoration: none; /* Quitar subrayado */
    transform: translateY(-2px); /* Efecto de levantamiento */
}

.custom-navbar-nav .nav-link i {
    margin-right: 8px; /* Espacio entre el icono y el texto */
}

/* Asegura que el contenedor se expanda en pantallas pequeñas */
.navbar-collapse {
    width: 100%; /* Tomar el 100% del ancho disponible */
}

/* Efecto de sombra más prominente */
.custom-navbar.shadow-lg {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* En pantallas pequeñas, los enlaces deben estar centrados */
@media (max-width: 991px) {
    .custom-navbar-nav {
        text-align: center;
        width: 100%;
    }

    .custom-navbar-nav .nav-item {
        margin-bottom: 8px; /* Separación entre los enlaces */
    }
}

/* En pantallas grandes, el diseño sigue en dos filas centradas */
@media (min-width: 992px) {
    .custom-d-flex {
        flex-direction: column; /* Mantener la disposición en columna */
    }
}