/** Sobrescribir por defecto de Bootstrap */
:root,
* {

    --bs-primary: var(--color-primario) !important;
    --bs-secondary: var(--color-secundario) !important;
    --bs-primary-color: var(--color-primario) !important;
    --bs-secondary-color: var(--color-secundario) !important;
    --bs-success: var(--color-verde) !important;
    --bs-warning: var(--color-amarillo) !important;
    --bs-danger: var(--color-rosa) !important;
    --bs-info: var(--color-acento) !important;
    --bs-light: var(--color-gris-0) !important;
    --bs-dark: var(--color-gris-3) !important;

    --bs-body-bg: var(--color-bg) !important;
    --bs-body-color: var(--color-frente) !important;
    --bs-card-bg: var(--color-fondo) !important;
    --bs-card-color: var(--color-frente) !important;
    --bs-card-cap-color: var(--color-frente) !important;
    --bs-card-border-color: var(--color-gris-2) !important;


    --bs-heading-color: var(--color-frente);
    --bs-card-heading-color: var(--color-frente) !important;
    --bs-heading-color-secondary: var(--color-secundario);

    --bs-success-color: var(--color-verde)!important;
    --bs-success-border-color: var(--color-verde)!important;
    --bs-success-link-color: var(--color-verde)!important;
    --bs-success-bg: color-mix(in srgb, var(--color-verde), transparent 65%) !important;

    --bs-warning-color: var(--color-amarillo)!important;
    --bs-warning-border-color: var(--color-amarillo)!important;
    --bs-warning-link-color: var(--color-amarillo)!important;
    --bs-warning-bg: color-mix(in srgb, var(--color-amarillo), transparent 65%) !important;

    --bs-alert-color: var(--color-acento)!important;
    --bs-alert-border-color: var(--color-acento)!important;
    --bs-alert-link-color: var(--color-acento)!important;
    --bs-alert-bg: color-mix(in srgb, var(--color-acento), transparent 65%) !important;

    --bs-info-color: var(--color-primario)!important;
    --bs-info-border-color: var(--color-primario)!important;
    --bs-info-link-color: var(--color-primario)!important;
    --bs-info-bg: color-mix(in srgb, var(--color-primario), transparent 65%) !important;

    --bs-danger-color: var(--color-rosa)!important;
    --bs-danger-border-color: var(--color-rosa)!important;
    --bs-danger-link-color: var(--color-rosa)!important;
    --bs-danger-bg: color-mix(in srgb, var(--color-rosa), transparent 65%) !important;

    --bs-table-color: var(--color-frente)!important;
    --bs-table-hover-color: var(--color-primario)!important;
    --bs-table-bg: var(--color-fondo)!important;
    --bs-table-hover-bg: color-mix(in srgb, var(--color-fondo), var(--color-primario) 7.5%)!important;

    --bs-pagination-disabled-color: var(--color-gris-3)!important;
    --bs-pagination-disabled-bg: var(--color-gris-1)!important;

    --bs-focus-ring-color: color-mix(var(--color-primario), transparent 75%)!important;
}

*:focus {
 box-shadow:0px 0px 0px 0.25rem color-mix(var(--color-primario), transparent 75%)!important;   
}
.alert-info, .alert-info * {
    --bs-alert-color: var(--color-primario)!important;
    --bs-alert-border-color: var(--color-primario)!important;
    --bs-alert-link-color: var(--color-primario)!important;
    --bs-alert-bg: color-mix(in srgb, var(--color-primario), transparent 65%) !important;
}

.btn-outline-warning {
    --bs-btn-color: var(--color-amarillo) !important;
    --bs-btn-border-color: var(--color-amarillo) !important;
    --bs-btn-hover-color: var(--color-frente) !important;
    --bs-btn-hover-bg: var(--color-amarillo) !important;

    --bs-btn-hover-border-color: var(--color-amarillo) !important;

    --bs-btn-active-color: var(--color-frente) !important;
    --bs-btn-active-bg: var(--color-amarillo) !important;
    --bs-btn-active-border-color: var(--color-amarillo) !important;

    --bs-btn-disabled-color: var(--color-amarillo) !important;

    --bs-btn-disabled-border-color: var(--color-amarillo) !important;

}

.btn-light {
    --bs-btn-color: var(--color-frente) !important;
    --bs-btn-bg: var(--color-fondo) !important;
    --bs-btn-border-color: var(--color-fondo) !important;
    --bs-btn-hover-color: var(--color-fondo) !important;
    --bs-btn-hover-bg: var(--color-secundario) !important;
    --bs-btn-hover-border-color: var(--color-secundario) !important;
    --bs-btn-active-color: var(--color-fondo) !important;
    --bs-btn-active-bg: var(--color-primario) !important;
    --bs-btn-active-border-color: var(--color-secundario) !important;
    --bs-btn-disabled-color: var(--color-frente) !important;
    --bs-btn-disabled-bg: var(--color-fondo) !important;
    --bs-btn-disabled-border-color: var(--color-fondo) !important;
}

@property --mezcla{
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}
/** Textos */
.text-gradient {
    color: var(--color-frente)!important;
    text-decoration: none!important;
    &:hover{
        color: var(--color-primario)!important;
    }
    /*
    
    transition: all 300ms ease-in-out!important;
    background: linear-gradient( to right, var(--color-primario) var(--mezcla), var(--color-secundario) ) !important;
    background-image: linear-gradient( to right, var(--color-primario) var(--mezcla), var(--color-secundario) ) !important;
    color: transparent !important;
    background-clip: text !important;
    
    &:hover{
        --mezcla: 100%!important;
    }
    */
}

.text-primary {
    color: var(--color-primario) !important;
}

.text-success {
    color: var(--color-secundario) !important;
}

.text-warning {
    color: var(--color-amarillo) !important;
}
.text-danger {
    color: var(--color-rosa) !important;
}
.text-info {
    color: var(--color-primario) !important;
}

.text-dark{
    color: var(--color-gris-3)!important;
}

/** Fondos */
.bg-primary, .bg-info {
    background-color: var(--color-primario) !important;
}

.bg-success {
    background-color: var(--color-secundario) !important;
}

.bg-warning {
    background-color: var(--color-amarillo) !important;
}
.bg-alert {
    background-color: var(--color-acento) !important;
}
.bg-danger {
    background-color: var(--color-rosa) !important;
}

.bg-light {
    background-color: var(--color-gris-1)!important;
}
.table{
    --bs-table-bg: var(--color-fondo)
    > th {
        --bs-table-bg: var(--color-gris-0)
    }
}
.table-primary {
    --bs-table-bg: var(--color-primario) !important;
    
}
.table-success {
    --bs-table-bg: color-mix(in srgb, var(--color-verde), transparent 30%) !important;

}
.table-warning {
    --bs-table-bg: color-mix(in srgb, var(--color-amarillo), transparent 30%) !important;

}
.table-danger {
    --bs-table-bg: color-mix(in srgb, var(--color-rosa), transparent 30%) !important;

}
.table-light {
    --bs-table-bg: var(--color-gris-1)!important;


}
.page-link {
    color: var(--color-secundario)!important;
}

.active>.page-link, .page-link.active {
    color: var(--color-fondo)!important;
    background-color: var(--color-secundario)!important;
    border-color: var(--color-secundario)!important;
}

.text-muted{
    color: var(--color-gris-3)!important;
}

nav:not(.navbar){
    background-color: var(--color-gris-0)!important;
}

.border-success{
    border-color: var(--color-verde)!important;
}
.border-warning{
    border-color: var(--color-amarillo)!important;
}
.border-info, .border-primary{
    border-color: var(--color-primario)!important;
}
.border-danger{
    border-color: var(--color-rosa)!important;
}

::placeholder {
  color: var(--color-gris-2)!important; 
}