/* BOTONES, BORDES Y OTROS ELEMENTOS DEL SISTEMA */
/* @import url(okpld-colors.css); */
@import url(okpld-tools.css);

body
{
    font-family: "Poppins", sans-serif !important;
}


/* # # # # # # # # # # # # # # # # # # # ESTILOS BOTONES */
button.btn {
    transition: all ease-in 0.15s;
    font-weight: 500;
}
button.op-btn-primary {
    background-color: var(--op-color-primary);
}
button.op-btn-secondary {
    background-color: var(--op-color-secondary);
}
button.op-btn-complementary {
    background-color: var(--op-color-complementary);
    color: var(--op-color-base-2);
}
button.op-btn-base-1 {
    background-color: var(--op-color-base-1);
    color: var(--op-color-base-2);
}
button.op-btn-base-2 {
    background-color: var(--op-color-base-2);
    color: var(--op-color-base-1);
}
/* Transparencias */
button.op-btn-primary-t {
    background-color: var(--op-color-primary-low);
    border: 1px solid var(--op-color-primary);
    color: var(--op-color-primary-high);
}
button.op-btn-secondary-t {
    background-color: var(--op-color-secondary-low);
    border: 1px solid var(--op-color-secondary);
    color: var(--op-color-secondary);
}
button.op-btn-complementary-t {
    background-color: var(--op-color-complementary-low);
    border: 1px solid var(--op-color-complementary);
    color: var(--op-color-complementary);
    /* color: var(--op-color-base-2); */
}
button.op-btn-base-1-t {
    background-color: var(--op-color-base-1);
    border: 1px solid var(--op-color-base);
    color: var(--op-color-base-2);
}
button.op-btn-base-2-t {
    background-color: var(--op-color-base-2);
    border: 1px solid var(--op-color-base);
    color: var(--op-color-base-1);
}

/* # # # # # # # # # # # # # # # # # # # HOVER BOTONES */
/* button.btn:hover {
    transform: scale(1.015);
    box-shadow: 1px 1px 8px 0px #3358BB;
} */
button.op-btn-primary:is(:hover, :focus, :focus-visible) {
    background-color: var(--op-color-primary-hov) !important;
}
button.op-btn-secondary:is(:hover, :focus, :focus-visible) {
    background-color: var(--op-color-secondary-hov) !important;
}
button.op-btn-complementary:is(:hover, :focus, :focus-visible) {
    background-color: var(--op-color-complementary-hov) !important;
    color: white;
}
button.op-btn-base-1:is(:hover, :focus, :focus-visible) {
    background-color: var(--op-color-base-1-hov) !important;
    color: var(--op-color-base-2) !important;
}
button.op-btn-base-2:is(:hover, :focus, :focus-visible) {
    background-color: var(--op-color-base-2-hov) !important;
    color: var(--op-color-base-1);
}

/* Botones con transparencia Hovers */
button.op-btn-primary-t:is(:hover, :focus, :focus-visible) {
    background-color: var(--op-color-primary-hov) !important;
    /* color: var(--op-color-primary); */
}
button.op-btn-secondary-t:is(:hover, :focus, :focus-visible) {
    background-color: var(--op-color-secondary-hov) !important;
    /* color: var(--op-color-secondary); */
}
button.op-btn-complementary-t:is(:hover, :focus, :focus-visible) {
    background-color: var(--op-color-complementary-hov) !important;
    color: white;
}