/* Override Bootstrap con colores Pantone - Debe cargarse después de Bootstrap */
/* Pantone 285 C: #0072CE - Azul principal */
/* Pantone 445 C: #545454 - Gris oscuro */

/* Override de clases bg-* de Bootstrap */
.bg-primary,
.bg-primary.bg-primary,
span.bg-primary,
.badge.bg-primary,
div.bg-primary {
    background-color: #0072CE !important;
}

.bg-info,
.bg-info.bg-info,
span.bg-info,
.badge.bg-info,
div.bg-info,
.icon-box.bg-info {
    background-color: #0072CE !important;
}

.bg-secondary,
.bg-secondary.bg-secondary,
span.bg-secondary,
.badge.bg-secondary,
div.bg-secondary {
    background-color: #545454 !important;
}

/* Icon boxes con colores Pantone */
.icon-box.bg-info {
    background-color: rgba(0, 114, 206, 0.15) !important;
}

.icon-box.bg-primary {
    background-color: rgba(0, 114, 206, 0.15) !important;
}

/* Progress bars - Sobrescribir estilos inline de JavaScript */
.progress-bar[style*="background-color"] {
    /* Sobrescribir colores específicos */
}

.progress-bar[style*="#0d6efd"],
.progress-bar[style*="#3b82f6"],
.progress-bar[style*="#2563eb"],
.progress-bar[style*="#0dcaf0"],
.progress-bar[style*="#6c757d"] {
    background-color: #0072CE !important;
}

.progress-bar.bg-primary,
.progress-bar.bg-info,
div.progress-bar[role="progressbar"][style*="background-color"] {
    background-color: #0072CE !important;
}

.progress-bar.bg-secondary {
    background-color: #545454 !important;
}

/* Específicamente para gráficos de prioridad y estado */
#priority-chart .progress-bar[style*="background-color: #0072CE"],
#status-chart .progress-bar[style*="background-color: #0072CE"] {
    background-color: #0072CE !important;
}

/* Text colors */
.text-primary,
.text-primary.text-primary {
    color: #0072CE !important;
}

.text-info,
.text-info.text-info {
    color: #0072CE !important;
}

.text-secondary,
.text-secondary.text-secondary {
    color: #545454 !important;
}

/* Icon boxes con opacidad */
.icon-box.bg-info.bg-opacity-10 {
    background-color: rgba(0, 114, 206, 0.1) !important;
}

.icon-box.bg-primary.bg-opacity-10 {
    background-color: rgba(0, 114, 206, 0.1) !important;
}

.icon-box.bg-secondary.bg-opacity-10 {
    background-color: rgba(84, 84, 84, 0.1) !important;
}

/* Spinner */
.spinner-border.text-primary {
    color: #0072CE !important;
    border-color: currentColor !important;
    border-right-color: transparent !important;
}

/* Forzar colores en progress bars generados por JavaScript */
.progress-bar.pantone-color[style*="background-color"] {
    /* Esta clase se agrega para forzar el color */
}

#priority-chart .progress-bar,
#status-chart .progress-bar {
    /* Forzar colores específicos en gráficos */
}

#priority-chart .progress-bar[style*="#0072CE"],
#status-chart .progress-bar[style*="#0072CE"] {
    background-color: #0072CE !important;
}

/* Forzar colores en barras de categorías - sobrescribir cualquier color inline */
.category-progress-bar {
    background-color: #0072CE !important;
}

/* Aplicar colores específicos según data-color */
.category-progress-bar[data-color="#0072CE"] {
    background-color: #0072CE !important;
}

.category-progress-bar[data-color="#545454"] {
    background-color: #545454 !important;
}

/* Sobrescribir cualquier estilo inline en categorías */
#top-categories-list .category-progress-bar[style*="background-color"] {
    /* El color se aplicará desde data-color o desde el array de colores */
}

/* Forzar el primer color (Pantone azul) en la primera categoría */
#top-categories-list .category-progress-bar:first-child {
    background-color: #0072CE !important;
}

/* Clase específica para barras de categorías con colores Pantone */
.pantone-category-bar[data-color="#0072CE"] {
    background-color: #0072CE !important;
    height: 20px !important;
    border-radius: 10px !important;
}

.pantone-category-bar[data-color="#545454"] {
    background-color: #545454 !important;
    height: 20px !important;
    border-radius: 10px !important;
}

.pantone-category-bar[data-color="#198754"] {
    background-color: #198754 !important;
    height: 20px !important;
    border-radius: 10px !important;
}

.pantone-category-bar[data-color="#ffc107"] {
    background-color: #ffc107 !important;
    height: 20px !important;
    border-radius: 10px !important;
}

.pantone-category-bar[data-color="#dc3545"] {
    background-color: #dc3545 !important;
    height: 20px !important;
    border-radius: 10px !important;
}

/* Fallback: aplicar color desde data-color usando CSS */
.pantone-category-bar {
    background-color: var(--category-color, #0072CE) !important;
    height: 20px !important;
    border-radius: 10px !important;
}

/* Hacer más visibles las barras de categorías */
#top-categories-list .progress {
    height: 20px !important;
    background-color: #e9ecef !important;
    border-radius: 10px !important;
    width: 100% !important;
}

#top-categories-list .progress-bar {
    height: 20px !important;
    border-radius: 10px !important;
    /* NO forzar width aquí, debe venir del style inline */
}

/* Botones primarios */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary {
    background-color: #0072CE !important;
    border-color: #0072CE !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #005fa8 !important;
    border-color: #005fa8 !important;
    color: #ffffff !important;
}

/* Botones outline primarios */
.btn-outline-primary {
    color: #0072CE !important;
    border-color: #0072CE !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #0072CE !important;
    border-color: #0072CE !important;
    color: #ffffff !important;
}

/* Botones secundarios */
.btn-secondary,
.btn.btn-secondary,
button.btn-secondary,
a.btn-secondary {
    background-color: #545454 !important;
    border-color: #545454 !important;
    color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #6b6b6b !important;
    border-color: #6b6b6b !important;
    color: #ffffff !important;
}

/* Enlaces */
a,
a:link,
a:visited {
    color: #0072CE !important;
}

a:hover,
a:focus {
    color: #005fa8 !important;
}

/* Badges */
.badge.bg-primary,
.badge-primary {
    background-color: #0072CE !important;
}

.badge.bg-secondary,
.badge-secondary {
    background-color: #545454 !important;
}

.bg-purple,
.bg-purple.bg-purple,
span.bg-purple,
.badge.bg-purple,
div.bg-purple {
    background-color: #9333ea !important;
}

.badge.bg-purple,
.badge-purple {
    background-color: #9333ea !important;
}

/* Alertas */
.alert-primary {
    background-color: rgba(0, 114, 206, 0.1) !important;
    border-color: rgba(0, 114, 206, 0.3) !important;
    color: #0072CE !important;
}

/* Texto primario */
.text-primary {
    color: #0072CE !important;
}

/* Bordes primarios */
.border-primary {
    border-color: #0072CE !important;
}