/* TeLoTraigo - Sobrescritura de colores corporativos para todas las dependencias */

/* CSS Custom Properties con !important para asegurar prioridad */
:root {
    --telo-principal: #ff6f00 !important;
    --telo-principal-dark: #e65100 !important;
    --telo-principal-light: rgba(255, 111, 0, 0.1) !important;
    --telo-principal-transparent: rgba(255, 111, 0, 0.15) !important;
}

/* RESET GENERAL - Administrar todas las bibliotecas */
.bg-primary,
.btn-primary,
.badge-primary,
.alert-primary,
.card-primary .card-header,
.small-box.bg-primary,
.nav-link.active,
.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.progress-bar,
.nav-tabs .nav-link.active {
    background-color: var(--telo-principal) !important;
    border-color: var(--telo-principal) !important;
}

/* Botones con estados hover */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.nav-link:hover,
.page-link:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background-color: var(--telo-principal-dark) !important;
    border-color: var(--telo-principal-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 111, 0, 0.3) !important;
}

/* Textos primarios */
.text-primary,
.btn-link.text-primary,
a {
    color: var(--telo-principal) !important;
}

a:hover {
    color: var(--telo-principal-dark) !important;
}

/* Formularios y inputs */
.form-control:focus,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: var(--telo-principal) !important;
    box-shadow: 0 0 0 0.2rem var(--telo-principal-light) !important;
}

.form-control:hover,
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: var(--telo-principal) !important;
}

/* Sidebar y navegación */
.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link:hover {
    background-color: var(--telo-principal) !important;
    color: white !important;
}

.brand-link {
    background-color: var(--telo-principal-dark) !important;
}

.navbar-primary {
    background-color: var(--telo-principal) !important;
}

/* Small boxes personalizados */
.small-box .icon {
    color: rgba(255, 255, 255, 0.9) !important;
}

.small-box.bg-primary {
    background: linear-gradient(135deg, var(--telo-principal), var(--telo-principal-dark)) !important;
}

.small-box.bg-info {
    background: linear-gradient(135deg, var(--telo-principal-dark), #ff8a50) !important;
}

.small-box.bg-success {
    background: linear-gradient(135deg, #059669, #10B981) !important;
}

.small-box.bg-warning {
    background: linear-gradient(135deg, #F59E0B, #FBBF24) !important;
}

/* Cards y widgets */
.card-primary .card-header {
    background: linear-gradient(135deg, var(--telo-principal), var(--telo-principal-dark)) !important;
    color: white !important;
}

.card-widget.widget-info .card-header {
    background-color: var(--telo-principal) !important;
}

/* DataTables específicos */
table.dataTable thead th,
table.dataTable thead td {
    background-color: var(--telo-principal-light) !important;
    color: var(--telo-principal-dark) !important;
    font-weight: 600 !important;
    border-color: var(--telo-principal-light) !important;
}

table.dataTable tbody tr:hover {
    background-color: var(--telo-principal-transparent) !important;
}

/* Select2 específicos */
.select2-container--default .select2-dropdown {
    border-color: var(--telo-principal) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--telo-principal) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--telo-principal) !important;
}

.select2-container--default .select2-selection--single {
    border-color: var(--telo-principal-transparent) !important;
}

/* Menús y Dropdowns */
.dropdown-menu {
    border-color: var(--telo-principal-transparent) !important;
    box-shadow: 0 4px 20px var(--telo-principal-light) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--telo-principal-light) !important;
    color: var(--telo-principal-dark) !important;
}

.dropdown-item.active {
    background-color: var(--telo-principal) !important;
    color: white !important;
}

/* Navbar específico */
.navbar-nav .nav-link.active {
    background-color: var(--telo-principal-light) !important;
    color: var(--telo-principal-dark) !important;
    font-weight: 600 !important;
}

/* Breadcrumbs */
.breadcrumb {
    background-color: transparent !important;
}

.breadcrumb-item.active {
    color: var(--telo-principal) !important;
}

/* Paginación */
.pagination .page-link {
    color: var(--telo-principal) !important;
    border-color: var(--telo-principal-transparent) !important;
}

.pagination .page-link:hover {
    background-color: var(--telo-principal-light) !important;
    border-color: var(--telo-principal) !important;
    color: var(--telo-principal-dark) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--telo-principal) !important;
    border-color: var(--telo-principal) !important;
    color: white !important;
}

/* Alertas personalizadas */
.alert-primary {
    background-color: var(--telo-principal-light) !important;
    border-color: var(--telo-principal) !important;
    color: var(--telo-principal-dark) !important;
    border-left: 4px solid var(--telo-principal) !important;
}

/* Estados de loading y switches */
.btn-loading {
    background-color: var(--telo-principal) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--telo-principal) !important;
    border-color: var(--telo-principal) !important;
}

/* Tooltips */
.tooltip .tooltip-inner {
    background-color: var(--telo-principal-dark) !important;
}

.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: var(--telo-principal-dark) !important;
}

.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--telo-principal-dark) !important;
}

/* Modales */
.modal-header {
    border-bottom-color: var(--telo-principal-light) !important;
}

.modal-body {
    border-radius: 0 0 var(--telo-principal-light, 0.8rem) var(--telo-principal-light, 0.8rem) !important;
}

/* Progress bars */
.progress-bar-primary {
    background-color: var(--telo-principal) !important;
}

/* Chips y badges */
.badge-primary {
    background-color: var(--telo-principal) !important;
    color: white !important;
}

.chip-primary {
    background-color: var(--telo-principal) !important;
    color: white !important;
}

/* Widgets específicos del dashboard */
.widget-user .widget-user-header {
    background-color: var(--telo-principal) !important;
}

.widget-stat .widget-stat-icon {
    background-color: var(--telo-principal) !important;
}

/* Animaciones y transiciones */
.btn,
.card,
.nav-link,
.dropdown-item,
.form-control,
.small-box,
.page-link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover effects mejorados */
.card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 111, 0, 0.15) !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
}

/* Scroll personalizado */
::-webkit-scrollbar-thumb {
    background-color: var(--telo-principal) !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--telo-principal-dark) !important;
}

/* Iconos */
.fas,
.far,
.fab,
.fal {
    color: inherit !important;
}

.icon {
    background-color: var(--telo-principal) !important;
}

/* Tablas específicas de AdminLTE */
.table-responsive .table {
    border-color: var(--telo-principal-transparent) !important;
}

.table thead th {
    background-color: var(--telo-principal-light) !important;
    border-color: var(--telo-principal-light) !important;
    color: var(--telo-principal-dark) !important;
}

.table tbody tr:hover {
    background-color: var(--telo-principal-transparent) !important;
}

/* Overlay y loading */
.loading-overlay {
    background-color: var(--telo-principal-transparent) !important;
}

.spinner-border-primary {
    color: var(--telo-principal) !important;
}

/* Media responsive */
@media (max-width: 768px) {
    .btn,
    .card {
        transform: none !important;
    }
    
    .btn:hover,
    .card:hover {
        transform: none !important;
    }
}

/* Importante: Sobrescribir cualquier estilo inline específico */
[style*="background-color: rgb(60, 78, 181)"],
[style*="background-color: #3C4EB5"],
[style*="background-color: rgba(60, 78, 181"] {
    background-color: var(--telo-principal) !important;
}

[style*="color: rgb(60, 78, 181)"],
[style*="color: #3C4EB5"] {
    color: var(--telo-principal) !important;
}

[style*="border-color: rgb(60, 78, 181)"],
[style*="border-color: #3C4EB5"] {
    border-color: var(--telo-principal) !important;
}