/* ============================================================================
   TABLER-OVERRIDES.CSS - Overrides corporativos SIBEC sobre Tabler
   Fase 1: Variables de color + neutralización de conflictos
   ============================================================================ */

/* ============================================================================
   OVERRIDE DE VARIABLES TABLER → Colores corporativos SIBEC
   ============================================================================ */

:root {
    /* 🔶 Color primario SIBEC = naranja */
    --tblr-primary: #FB8707;
    --tblr-primary-rgb: 251, 135, 7;
    
    /* 🔴 Rojo corporativo como color de enlace/peligro */
    --tblr-danger: #ED1C24;
    --tblr-danger-rgb: 237, 28, 36;

    /* 🎨 Fondo cremoso de SIBEC como bg de página */
    --tblr-body-bg: #F5F3EF;
    
    /* 📝 Fuente del sistema - mantener la existente */
    --tblr-font-sans-serif: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ============================================================================
   NEUTRALIZAR CONFLICTOS TABLER ↔ MODALES CUSTOM
   
   Bootstrap/Tabler espera controlar .modal vía data-bs-toggle.
   Nuestros modales se controlan con JS custom (style.display).
   Estos overrides evitan que Tabler interfiera.
   ============================================================================ */

/* Nuestros modales NO usan el sistema de Bootstrap */
.modal:not([data-bs-toggle]) {
    /* Mantener comportamiento custom: display controlado por JS */
    opacity: 1;
    visibility: visible;
    /* Bootstrap añade transitions que no necesitamos */
    transition: none;
}

/* Evitar que Bootstrap esconda nuestros modales con aria */
.modal:not([data-bs-toggle])[style*="display: flex"] {
    display: flex !important;
}

/* Evitar que Tabler JS inicialice nuestros modales custom */
.modal:not([data-bs-toggle]) .modal-content {
    /* Tabler añade pointer-events: none en modales cerrados */
    pointer-events: auto;
}

/* Evitar backdrop de Bootstrap (el nuestro es .modal-overlay) */
.modal-backdrop {
    display: none !important;
}

/* Evitar que Bootstrap bloquee el scroll del body */
body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}

/* ============================================================================
   NEUTRALIZAR CONFLICTOS TABLER ↔ TOASTS CUSTOM
   
   Bootstrap toast usa data-bs-autohide, nuestro toast usa .show class.
   ============================================================================ */

.toast-container .toast {
    /* Nuestro toast custom, no el de Bootstrap */
    opacity: 0;
    visibility: visible;
}

.toast-container .toast.show {
    opacity: 1;
}

/* Evitar que Tabler toast auto-hide interfiera */
.toast-container .toast[data-bs-autohide] {
    /* Nuestro toast NO usa data-bs-autohide */
    display: flex;
}

/* ============================================================================
   NEUTRALIZAR CONFLICTOS TABLER ↔ BADGES CUSTOM
   
   Bootstrap redefine .badge con padding/border-radius distintos.
   Nuestros badges tienen variantes custom (badge-active, badge-admin, etc.)
   ============================================================================ */

/* Nuestros badges custom prevalecen sobre Bootstrap .badge */
.badge:not([class*="bg-"]) {
    /* Evitar que Tabler override nuestros badge-* con sus colores */
    --tblr-badge-font-size: 0.8rem;
    --tblr-badge-padding-x: 0.65rem;   
    --tblr-badge-padding-y: 0.25rem;
}

/* ============================================================================
   NEUTRALIZAR CONFLICTOS TABLER ↔ PAGINACIÓN CUSTOM
   
   DataTables BS5 genera paginación con .page-item / .page-link.
   Nuestra paginación manual usa .page-btn.
   Ambas deben coexistir.
   ============================================================================ */

/* DataTables BS5 pagination - color naranja corporativo */
.dataTables_paginate .page-item.active .page-link {
    background-color: var(--tblr-primary);
    border-color: var(--tblr-primary);
}

.dataTables_paginate .page-link {
    color: var(--tblr-primary);
}

.dataTables_paginate .page-link:hover {
    color: #E67906;
}

/* ============================================================================
   OVERRIDE BOTONES DATATABLES → Color naranja corporativo
   ============================================================================ */

.dt-button {
    background-color: var(--tblr-primary) !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--tblr-border-radius) !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    transition: all 0.3s ease !important;
}

.dt-button:hover {
    opacity: 0.9 !important;
    background-color: #E67906 !important;
}

/* ============================================================================
   OVERRIDE BÚSQUEDA DATATABLES → Estilo coherente con Tabler
   ============================================================================ */

.dataTables_filter input {
    padding: 0.4375rem 0.75rem;
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    font-size: 0.875rem;
    width: 300px;
    margin-left: 0.5rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.dataTables_filter input:focus {
    outline: none;
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
}