:root{
    --color-primario: #24447f;
    --color-primario-claro: #eef2ff;
    --color-secundario-marron: #945c65;
    --color-secundario-durazno: #dfaea1;
    --color-azul-bigaro: #BABDE2;
    --color-gray-100: #F9F9F9;
    --color-periwinkle: #babde2;
}

.bg-boton-principal{
    background-color: var(--color-primario) !important;
    color: #eee;
    padding: 7px 19px;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 12px;
}

.titulo-tarjetas {
    font-size: 14px;
    color: var(--text-primario) !important;
}

.form-card-header-with-color {
    color: var(--text-primario) !important;
    font-weight: 500 !important;
    background-color: var(--color-primario-claro) !important;
    padding: 5px 10px;
}

.background-light-primary {
    background-color: var(--color-primario-claro);
}

.background-secondary-brown {
    background-color: var(--color-secundario-marron);
}

.bg-boton-soft{
    background-color: var(--color-azul-bigaro) !important;
    color: #eee;
    padding: 7px 19px;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 12px;
    border: none !important;
}

.bg-boton-secundario{
    background-color: var(--color-secundario-marron) !important;
    color: #eee;
    padding: 7px 19px;
    border-radius: 8px;
    font-size: 12px;
}

.bg-gray-100 {
    background-color: var(--color-gray-100);
}

.bg-white {
    background-color: 'white';
}

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

.bg-peach {
    background-color: var(--color-secundario-durazno);
}