:root {
    /* Variables de colores */
    --alpha: #028DA4;
    /* Color principal o primario */
    --alpha-dark: #056475;
    --beta: #FF5733;
    /* Color secundario */
    --gamma: #C70039;
    /* Color de alerta */
    --delta: #FFC300;
    /* Color de advertencia */
    --epsilon: #DAF7A6;
    /* Color de éxito */
    --zeta: #F2F2F2;
    /* Color de fondo claro */
    --eta: #1A1A1A;
    /* Color de fondo oscuro */
    --theta: #FFFFFF;
    /* Color blanco */
    --iota: #000000;
    /* Color negro */
    --kappa: #6C757D;
    /* Color de texto secundario */
}



.title_alpha_color {
    color: var(--alpha);
}

.buttonprimary {
    background-color: var(--alpha);
    color: var(--theta);
    border-color: var(--alpha);
    border-radius: 3px;
    padding: 3px;
}

.buttonDanger {
    background-color: var(--gamma);
    color: var(--theta);
    border-color: var(--gamma);
    border-radius: 3px;
    padding: 3px;
}

.buttonprimary:hover {
    background-color: var(--alpha-dark);
    color: var(--theta);
}

.bkg_prim_dark {
    background-color: var(--alpha-dark);
}

.bkg_prim {
    background-color: var(--alpha);
}


.txt_bkg_prim_dark {
    color: var(--theta);
}

.txt_bkg_prim {
    color: var(--theta);
}

.alert-warning {
    background-color: var(--delta);
    color: var(--eta);
}

.alert-success {
    background-color: var(--epsilon);
    color: var(--eta);
}

.text-muted {
    color: var(--kappa);
}

body {
    font-family: 'Lato', sans-serif !important;
}