:root {
    --color-primario: #0D47A1; 
    --color-acento: #1565C0; 
    --color-texto: #212529; 
    --color-fondo: #F8F9FA; 
}


body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
}


h1, h2, h3, h4, h5, h6 {
    color: var(--color-primario);
}


.navbar-light .navbar-brand {
    color: var(--color-primario);
    font-weight: bold;
}


.btn-primary {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}

    .btn-primary:hover {
        background-color: var(--color-acento);
        border-color: var(--color-acento);
    }


a {
    color: var(--color-primario);
}

    a:hover {
        color: var(--color-acento);
    }

.footer {
    background-color: #FFFFFF; 
}


.hero-section {
    background-color: var(--color-primario); 
    color: #FFFFFF; 
    padding: 4rem 0; 
    margin-bottom: 2rem; 
    border-radius: 0 0 15px 15px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .hero-section h1 {
        color: #FFFFFF; 
        font-weight: 300; 
    }


h3 {
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--color-primario);
    margin-bottom: 1.5rem;
    display: inline-block; 
}


.card {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    transition: all 0.3s ease-in-out; 
}

    .card:hover {
        transform: translateY(-5px); 
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }


.table > thead {
    background-color: var(--color-primario);
    color: #FFFFFF;
}

    .table > thead a {
        color: #FFFFFF;
    }


.btn .bi {
    vertical-align: middle;
    line-height: 1;
}