@import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet';

/* Clases personalizadas para contenedores y elementos basadas en la paleta del GELLC y del ASPA */

:root {
    --blue-gellc: #011a46;
    --purple-gellc: #8c5baa;
    --light-purple-gellc: #c08ce0;
    --dark-purple-gellc: #543666;
    --purple-gellc-rgb: 140, 91, 170;
}

.link-purple-gellc {
    color: var(--dark-purple-gellc) !important;
}

.bg-blue-gellc {
    background-color: var(--blue-gellc) !important;
}

.text-blue-gellc {
    color: var(--blue-gellc) !important;
}

.border-blue-gellc {
    border-color: var(--blue-gellc) !important;
}

.btn-blue-gellc {
    background-color: var(--blue-gellc) !important;
    color: #fff !important;
    border-color: var(--blue-gellc) !important;
}

.bg-purple-gellc {
    background-color: var(--purple-gellc) !important;
}

.text-purple-gellc {
    color: var(--purple-gellc) !important;
}

.border-purple-gellc {
    border-color: var(--purple-gellc) !important;
}

.btn-purple-gellc {
    background-color: var(--purple-gellc) !important;
    color: #fff !important;
    border-color: var(--purple-gellc) !important;
}

.bg-dark-purple-gellc {
    background-color: var(--dark-purple-gellc) !important;
}

.text-dark-purple-gellc {
    color: var(--dark-purple-gellc) !important;
}

.border-dark-purple-gellc {
    border-color: var(--dark-purple-gellc) !important;
}

.btn-dark-purple-gellc {
    background-color: var(--dark-purple-gellc) !important;
    color: #fff !important;
    border-color: var(--dark-purple-gellc) !important;
}

.bg-purple-gellc-light {
    background-color: rgba(var(--purple-gellc-rgb), 0.1) !important;
}

.btn-outline-purple-gellc {
    color: var(--purple-gellc) !important;
    border-color: var(--purple-gellc) !important;
}

.btn-outline-purple-gellc:hover {
    background-color: var(--purple-gellc) !important;
    color: #fff !important;
    border-color: var(--purple-gellc) !important;
}

.btn-outline-dark-purple-gellc {
    color: var(--dark-purple-gellc) !important;
    border-color: var(--dark-purple-gellc) !important;
}

.btn-outline-dark-purple-gellc:hover {
    background-color: var(--dark-purple-gellc) !important;
    color: #fff !important;
    border-color: var(--dark-purple-gellc) !important;
}

.btn-outline-blue-gellc {
    color: var(--blue-gellc) !important;
    border-color: var(--blue-gellc) !important;
}

.btn-outline-blue-gellc:hover {
    background-color: var(--blue-gellc) !important;
    color: #fff !important;
    border-color: var(--blue-gellc) !important;
}

.table-dark-purple-gellc {
    --bs-table-color: #fff;
    --bs-table-bg: var(--dark-purple-gellc);
    --bs-table-border-color: #765e85;
    --bs-table-striped-bg: #5d406e;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #654a75;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #614572;
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.table-blue-gellc {
    --bs-table-color: #fff;
    --bs-table-bg: var(--blue-gellc);
    --bs-table-border-color: #011a46;
    --bs-table-striped-bg: #011a46;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #011a46;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #011a46;
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* Clases usadas en los menús de navegación para resaltar la página activa */

.active-page {
    border-bottom: solid 2px var(--purple-gellc) !important;
}

.active-page-mobile {
    background-color: var(--purple-gellc) !important;
    color: #fff !important;
    border-radius: 0.25rem;
}