/* CSS Global */
:root {
    --primary-color: #6a11cb;
    --secondary-color: #2575fc;
    --text-color: #333;
    --footer-bg: #333;
    --footer-text: #e0e0e0;
}

.nav-item.active > .nav-link {
    color: #ffffff; /* Color del texto */
    background-color: #007bff; /* Fondo azul */
}

/* Body */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    scroll-behavior: smooth;
    /* Imagen de fondo */
   /* background-image: url('https://img.freepik.com/fotos-premium/fondo-pantalla-hd-8k-tecnologia-datos-imagen-fotografica-stock_890746-75352.jpg?w=996');*/
    background-size: cover; /* Ajusta la imagen para que cubra toda la pantalla */
    background-repeat: no-repeat; /* Evita que se repita */
    background-position: center; /* Centra la imagen */
}

/* Navbar Estilizado */
.navbar {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

    .navbar a.nav-link:hover,
    .navbar a.nav-link:focus {
        color: white !important;
    }

/* Botón de Sesión */
.btn-custom {
    border-radius: 20px;
    background-color: var(--primary-color);
    color: #fff;
    transition: background-color 0.3s ease;
}

    .btn-custom:hover {
        background-color: var(--secondary-color);
    }

/* Footer */
footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    text-align: center;
    padding: 10px 0;
    font-size: 0.9rem;
}

/* Efecto de fondo en la navbar */
.bg-gradient {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Contenido Principal */
.main-content {
    transition: transform 0.2s ease;
}

/* Efectos Visuales en la Navbar */
.navbar a.nav-link:hover {
    color: #fff !important;
    transform: scale(1.1);
}

/* Botón personalizado */
.btn-custom {
    border-radius: 20px;
    background: var(--primary-color);
    color: white;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

    .btn-custom:hover {
        background: var(--secondary-color);
        transform: scale(1.1);
    }

/* Footer */
.footer-bg {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    font-size: 0.9rem;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
}