:root{
    /*Background colors of web site*/
    --bs-background-color: #f8f9fd;
    --bs-background-color-white: #ffffff;

    /*Xigo primary colors RGB*/
    --bs-xigo-primary-rgb: 39, 141, 125;
    --bs-xigo-hover-primary-rgb: 30, 107, 95;
    --xigo-bg-opacity: 1;

    /*Xigo primary colors Hex*/
    --bs-xigo-primary: #278D7D;
    --bs-xigo-contrast: #5DAA9E ;
    --bs-xigo-contrast-secondary: #C9E3DF;

    --bs-xigo-primary-dark: #1A5E54;
    --bs-xigo-background-surface: #F5F0E8;
    --bs-xigo-background-front: #EDE7DA;
    --bs-xigo-text-title: #1C1C1A;
    --bs-xigo-text-secondary: #6B6560;

    --bs-xigo-dark-primary: #0b2825;

    /*Xigo Text colors Hex*/
    --bs-txt-xigo-white: #ffffff;
    --bs-txt-xigo-black: #000000;
    --bs-txt-xigo-primary: #e4e4e4;

    /* Status Colors cards Tickets */
    --bs-xigo-bg-status-open: #E0F4FF;
    --bs-xigo-bg-status-in-progress: #FFE1CD;
    --bs-xigo-bg-status-resolved: #D5F6ED;
    --bs-xigo-bg-status-closed: #E4DBFA;

    --bs-xigo-bg-status-open-contrast: #B8EAFF;
    --bs-xigo-bg-status-in-progress-contrast: #FEC9AA;
    --bs-xigo-bg-status-resolved-contrast: #A4EBD9;
    --bs-xigo-bg-status-closed-contrast: #CFBCF6;

    /*Text Color dashboard*/
    --bs-txt-color: #4C5175;
    --bs-txt-color-contrast: #444964;
}


.bg-card-status-open{
    background-color: var(--bs-xigo-bg-status-open);
    color: var(--bs-txt-color);
    & .badge{
        background-color: var(--bs-xigo-bg-status-open-contrast);
        color: var(--bs-txt-color);
    }
}

.bg-card-status-in-progress{
    background-color: var(--bs-xigo-bg-status-in-progress);
    color: var(--bs-txt-color);
    & .badge{
        background-color: var(--bs-xigo-bg-status-in-progress-contrast);
        color: var(--bs-txt-color);
    }
}

.bg-card-status-resolved{
    background-color: var(--bs-xigo-bg-status-resolved);
    color: var(--bs-txt-color);
    & .badge{
        background-color: var(--bs-xigo-bg-status-resolved-contrast);
        color: var(--bs-txt-color);
    }
}

.bg-card-status-closed{
    background-color: var(--bs-xigo-bg-status-closed);
    color: var(--bs-txt-color);
    & .badge{
        background-color: var(--bs-xigo-bg-status-closed-contrast);
        color: var(--bs-txt-color);
    }
}

.text-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;        /* Máximo 4 líneas */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;      /* Añade "..." al final */
}

.text-xigo-primary{
    /*color: var(--bs-xigo-primary);*/
    color: var(--bs-xigo-primary);
}

/*Pendiente de revisar*/


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

.bg-primary-xigo{
    --bg-opacity: 1;
    background-color: rgba(var(--bs-xigo-primary-rgb), var(--xigo-bg-opacity)) !important;
}

.bg-xigo-opacity-25 {
    --xigo-bg-opacity: 0.25;
}

.grad{
    background-image: linear-gradient(to top, rgba(39, 141, 125, 1), rgba(169, 255, 241, 0.57));
    opacity: 0.25;
}

.rounded-bottom-start {
    border-bottom-left-radius: 0.75rem;
}

.rounded-top-start {
    border-top-left-radius: 0.75rem;
}

.rounded-top-end {
    border-top-right-radius: 0.75rem;
}

.rounded-bottom-end {
    border-bottom-right-radius: 0.75rem;
}

.bg-xigo-dark-primary{
    background-color: var(--bs-xigo-dark-primary);
}

.bg-primary-xigo-contrast{
    background-color: var(--bs-xigo-contrast);
}

.navbar-xigo-light{
    background-color: var(--bs-xigo-primary);
    & .navbar-brand {
        color: var(--bs-txt-xigo-white);
    }

    & .navbar-toggler {
        color: var(--bs-txt-xigo-white);
    }

    & .nav-link{
        color: var(--bs-txt-xigo-primary);

        &:hover {
            color: var(--bs-txt-xigo-white);
        }
    }
}

.btn-light-xigo{
    background-color: var(--bs-xigo-contrast);
    color: var(--bs-txt-xigo-white);

    &:hover{
        background-color: var(--bs-xigo-contrast-secondary);
        color: var(--bs-txt-xigo-black);
    }

    &:active {
        background-color: var(--bs-xigo-contrast-secondary);
        color: var(--bs-txt-xigo-black);

        transition: all 0.75s ease-in-out;
        transform-origin: center;
        transform: scale(1.75);
        opacity: 0;
    }
}

.text-xigo-pastel{
    color: var(text-xigo-primary);
}

/*BACKGROUNDS*/
.bg-xigo-section{
    background-color: var(--bs-xigo-contrast-secondary) ;
}

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

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

.btn-light-xigo-primary{
    background-color: var(--bs-xigo-primary);
    color: var(--bs-txt-xigo-white);
    &:hover{
        background-color: var(--bs-xigo-primary);
        color: var(--bs-txt-xigo-white);
    }
    &:active{
        background-color: var(--bs-xigo-contrast) !important;
        color: var(--bs-txt-xigo-white) !important;
        border-color: var(--bs-xigo-primary) !important;
    }
}