/* Fuentes */
/*-----------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');


:root{
    --color-main-app: #654096;
    --color-dark: #27135b;
    --color-light: #cfc2e7;
    --color-bg: #FCFCFC;
    
    --color-secondary: #fbb62d;
    --color-secondary-light: #fcdea0;

    --color-nav-bg: #FCFCFC;
    --color-nav-font: #5e4293;
    --color-nav-active: #FCFCFC;
    --color-nav-font-active: #5f4099; 

    --font-main: 'Work Sans', sans-serif;

    --color-bg-primary: #654096;
    --color-bg-primary-alt: #6a4aa7;
    --color-bg-secondary: #e6a000;
    --color-bg-secondary-alt: #fbb62d;
    --color-bg-success: #30a338;
    --color-bg-success-alt: #2dc44e;
    --color-bg-warning: #e6a000;
    --color-bg-warning-alt: #fbb62d;
    --color-bg-ligth: #ced4da;
    --color-bg-ligth-alt: #FCFCFC;
    --color-bg-danger: #ee3248;
    --color-bg-danger-alt: #f34a5e;

    --color-text-link: #346fbd;
    --color-text-link-hover: #5e4293;

    --color-text-1: #5e4296;
    --color-text-2: #2D62A9;
    --color-text-3: #0097a7;
    --color-text-4: #30a338;
    --color-text-5: #e6a000;
    --color-text-6: #ec6c38;
    --color-text-7: #ee3248;
    --color-text-8: #ea3471;
}

/* Botones */
/*-----------------------------------------------------------------------------*/

.btn-primary {
    background-color: var(--color-bg-primary);
    border-color: var(--color-bg-primary);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.hover {
    background-color: var(--color-bg-primary-alt);
    border-color: var(--color-bg-primary-alt);
}

.btn-success {
    background-color: var(--color-bg-success);
    border-color: var(--color-bg-success);
}
.btn-success:hover,
.btn-success:active,
.btn-success.hover {
    background-color: var(--color-bg-success-alt);
    border-color: var(--color-bg-success-alt);
}

.btn-warning {
    background-color: var(--color-bg-warning);
    border-color: var(--color-bg-warning);
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning.hover {
    background-color: var(--color-bg-warning-alt);
    border-color: var(--color-bg-warning-alt);
}

.btn-light{
    border-color: var(--color-bg-ligth)
}

.btn-light:hover,
.btn-light:active,
.btn-light.hover{
    background-color: var(--color-bg-ligth-alt);
    border-color: #BBB;
}

.btn-danger{
    border-color: var(--color-bg-danger)
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger.hover{
    background-color: var(--color-bg-danger-alt);
    border-color: #BBB;
}

/* Otros elementos */
/*-----------------------------------------------------------------------------*/

.progress-bar{
    background-color: var(--color-bg-primary);
}

.bg-success {background-color: var(--color-bg-success);}
.bg-danger {background-color: var(--color-bg-danger);}

.card {
    border: 1px solid #ebedf2;
    border-radius: 9px;
}

.form-control {
    border-color: #ebedf2;
    border-radius: 4px;
}

.form-select {
    border-color: #ebedf2;
    border-radius: 4px;
}