/**

* ============================================================
* ⚠️ NOTA IMPORTANTE SOBRE ESTILOS DE TABULATOR
* ============================================================
*
* Este proyecto utiliza Tabulator con el tema base:
* 👉 tabulator.semantic.css (Semantic UI)
*
* 📌 IMPORTANTE:
* Todos los estilos personalizados definidos en:
* 👉 assets/custom/css/tabulator-custom.css
*
* DEPENDEN directamente de la estructura y clases del tema
* "Semantic UI" que provee Tabulator.
*
* ---
* ⚠️ ADVERTENCIA
* ---
* Si se cambia el tema de Tabulator (por ejemplo: midnight,
* bootstrap, simple, etc.), es muy probable que:
*
* ❌ Se rompan estilos visuales
* ❌ Cambien estructuras internas (clases CSS)
* ❌ Los overrides actuales dejen de funcionar
*
* Esto ocurre porque cada tema de Tabulator puede modificar:
* * nombres de clases
* * jerarquía del DOM
* * estilos base (backgrounds, paddings, etc.)
*
* ---
* 🧠 RECOMENDACIÓN
* ---
* Mantener el uso del tema:
* ✔ tabulator.semantic.css
*
* Si se requiere cambiar de tema:
* 👉 Se deberá revisar y adaptar completamente
* el archivo:
* assets/custom/css/tabulator-custom.css
*
* ---
* 🎯 OBJETIVO
* ---
* Garantizar consistencia visual con el sistema (NexLink)
* y evitar conflictos entre estilos base y personalizados.
*
* ============================================================
  */

  
/* ============================================================
   TABULATOR + NEXLINK MASTER STYLE
   ============================================================ */

/* 1. CONTENEDOR PRINCIPAL Y FUENTE */
.tabulator {
    font-family: "Instrument Sans", sans-serif !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.75rem !important; /* Radio de Card NexLink */
    background-color: var(--custom-body-bg) !important;
    overflow: hidden;
    box-shadow: var(--bs-box-shadow-sm) !important;
    color: var(--bs-body-color) !important;
}

/* 2. ENCABEZADOS (Estilo Moderno) */
.tabulator-header {
    background-color: #F8F9FE !important; /* Gris ultra-tenue de NexLink */
    color: var(--bs-heading-color) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.tabulator-col {
    background-color: transparent !important;
    border-right: 1px solid var(--bs-border-color-translucent) !important;
}

/* 3. FILAS Y CELDAS (Efectos SaaS) */
.tabulator .tabulator-row {
    border-bottom: 1px solid var(--bs-border-color-translucent) !important;
    min-height: 48px !important;
    display: flex;
    align-items: center;
    background-color: transparent !important;
}

.tabulator .tabulator-row.tabulator-row-even {
    background-color: rgba(0, 0, 0, 0.01) !important; /* Zebra sutil */
}

.tabulator .tabulator-row:hover {
    background-color: rgba(89, 85, 209, 0.04) !important; /* Morado NexLink soft */
}

.tabulator .tabulator-cell {
    border-right: none !important;
    border-left: none !important;
    padding: 8px 12px !important;
    transition: all 0.1s ease;
    color: var(--bs-gray-700) !important;
}

.tabulator-cell.tabulator-editable {
    color: var(--bs-gray-700) !important;
}

/* 4. INDICADORES DE EDICIÓN (Hover y Foco) */
.tabulator-cell.tabulator-editable:hover {
    background-color: rgba(89, 85, 209, 0.07) !important;
    outline: 1px solid #cbd5e1 !important;
    outline-offset: -1px;
    border-radius: 4px !important;
    cursor: pointer;
}

.tabulator-cell.tabulator-editing {
    outline: 2px solid #5955D1 !important; /* Ahora usa el Morado Primario de NexLink */
    outline-offset: -2px;
    background-color: #ffffff !important;
    border-radius: 4px !important;
    z-index: 10;
    padding: 0 !important;
    box-shadow: 0 0 8px rgba(89, 85, 209, 0.2) !important; /* Un brillo sutil para resaltar la edición */
}

/* Visibilidad del texto al editar (Input/Select interno) */
.tabulator-cell.tabulator-editing input,
.tabulator-cell.tabulator-editing select,
.tabulator-cell.tabulator-editing textarea {
    color: #1e293b !important; /* Texto oscuro para legibilidad total */
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 4px 8px !important;
    width: 100% !important;
    height: 100% !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

/* 5. PAGINADOR (Botones NexLink) */
.tabulator-footer {
    background-color: var(--custom-body-bg) !important;
    border-top: 1px solid var(--bs-border-color) !important;
    color: var(--bs-gray-500) !important;
}

.tabulator-page {
    border: 1px solid var(--bs-border-color) !important;
    background: #ffffff !important;
    color: var(--bs-body-color) !important;
    border-radius: 0.375rem !important;
    margin: 0 2px !important;
    padding: 5px 12px !important;
    min-width: 35px;
    height: 35px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.tabulator-page.active {
    background-color: #5955D1 !important; /* Morado Primario */
    border-color: #5955D1 !important;
    color: #fff !important;
}

.tabulator-page:not(.disabled):hover {
    background-color: rgba(89, 85, 209, 0.1) !important;
    color: #5955D1 !important;
}

/* 6. DROPDOWNS DE EDICIÓN (Selects/Listas) */
/* ============================================================
   DROPDOWN AVANZADO (Lógica NexLink / Bootstrap)
   ============================================================ */

.tabulator-edit-list {
    background: #ffffff !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.5rem !important; /* Coincide con .dropdown-menu */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    padding: 0.5rem 0 !important; /* Espaciado vertical tipo Bootstrap */
    margin-top: 5px !important;
    z-index: 10000 !important;
    min-width: 160px !important; /* Ancho mínimo estándar de dropdown */
}

/* El Item (Equivalente a .dropdown-item) */
.tabulator-edit-list-item {
    display: block !important;
    width: 100% !important;
    padding: 0.35rem 1.2rem !important; /* Padding de NexLink */
    clear: both !important;
    font-weight: 400 !important;
    color: var(--bs-dropdown-link-color, #475569) !important;
    text-align: inherit !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important; /* Los items de dropdown suelen ser rectos */
    transition: all 0.2s ease !important;
    font-size: 0.875rem !important;
}

/* Estados Hover y Active (Usando variables de NexLink) */
.tabulator-edit-list-item.active, 
.tabulator-edit-list-item:hover {
    color: #5955D1 !important; /* Morado NexLink */
    text-decoration: none !important;
    background-color: rgba(89, 85, 209, 0.08) !important; /* Fondo sutil de la marca */
}

/* PARA EL FUTURO: Si metes grupos o divisores en Tabulator */

/* Divisores (Si usas grupos en la lista) */
.tabulator-edit-list-group {
    border-top: 1px solid var(--bs-border-color-translucent) !important;
    margin: 0.5rem 0 !important;
    padding-top: 0.5rem !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    color: var(--bs-secondary) !important;
    letter-spacing: 0.03em !important;
    padding-left: 1.2rem !important;
}


.dropdown-menu {
    background: #ffffff !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.5rem !important;
    /* Coincide con .dropdown-menu */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    padding: 0.5rem 0 !important;
    /* Espaciado vertical tipo Bootstrap */
    margin-top: 5px !important;
    z-index: 10000 !important;
    min-width: 160px !important;
    /* Ancho mínimo estándar de dropdown */
}


/* 7. TIRADOR DE REDIMENSIÓN (Resize Handle) */
.tabulator-col-resize-handle {
    width: 6px !important;
}

.tabulator-col-resize-handle:hover {
    background-color: var(--bs-border-color) !important;
    opacity: 0.5;
}
  
/* ============================================================
   TABULATOR MODO OSCURO (NexLink Dark Theme) - COMPLETO
   ============================================================ */

[data-bs-theme=dark] .tabulator {
    background-color: var(--bs-body-bg) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

/* 1. Visibilidad del TEXTO EN REPOSO (Antes de editar) */
[data-bs-theme=dark] .tabulator-cell {
    color: #e2e8f0 !important; /* Texto claro visible */
}

/* 2. ENCABEZADOS Dark */
[data-bs-theme=dark] .tabulator-header {
    background-color: #29294B !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Color de texto para los títulos de las columnas en el encabezado */
[data-bs-theme=dark] .tabulator-header .tabulator-col-title {
    color: #ffffff !important;
}

/* 3. FILAS Y SELECCIÓN (Recuperando el morado elegante) */
[data-bs-theme=dark] .tabulator-row {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme=dark] .tabulator-row.tabulator-selected {
    background-color: rgba(89, 85, 209, 0.25) !important; /* Morado NexLink, no gris */
    color: #ffffff !important;
}

[data-bs-theme=dark] .tabulator-row:hover {
    background-color: rgba(89, 85, 209, 0.15) !important;
}

/* 4. EL DROPDOWN / LISTA DE EDICIÓN (Oscuro tipo NexLink) */
[data-bs-theme=dark] .tabulator-edit-list {
    background: #1e1e30 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme=dark] .tabulator-edit-list-item {
    color: #cbd5e1 !important;
}

[data-bs-theme=dark] .tabulator-edit-list-item.active,
[data-bs-theme=dark] .tabulator-edit-list-item:hover {
    background-color: rgba(89, 85, 209, 0.2) !important;
    color: #ffffff !important;
}

/* 5. ESTADO DE EDICIÓN (Input activo) */
[data-bs-theme=dark] .tabulator-cell.tabulator-editing {
    background-color: #1a1a2e !important;
    outline: 2px solid #5955D1 !important;
}

[data-bs-theme=dark] .tabulator-cell.tabulator-editing input,
[data-bs-theme=dark] .tabulator-cell.tabulator-editing select {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* 6. PAGINADOR Dark */
[data-bs-theme=dark] .tabulator-footer {
    background-color: var(--bs-body-bg) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme=dark] .tabulator-page {
    background: #23233a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

/* ============================================================
   SCROLLBARS ESTILO SAAS (Delgados y Elegantes)
   ============================================================ */

/* 1. Para el contenedor de la tabla y la lista desplegable */
.tabulator .tabulator-tableholder::-webkit-scrollbar,
.tabulator-edit-list::-webkit-scrollbar {
    width: 6px;  /* Ancho del scroll vertical */
    height: 6px; /* Alto del scroll horizontal */
}

/* 2. El fondo del scroll (Track) */
.tabulator .tabulator-tableholder::-webkit-scrollbar-track,
.tabulator-edit-list::-webkit-scrollbar-track {
    background: transparent; 
}

/* 3. La barra que se mueve (Thumb) */
.tabulator .tabulator-tableholder::-webkit-scrollbar-thumb,
.tabulator-edit-list::-webkit-scrollbar-thumb {
    background-color: rgba(89, 85, 209, 0.2); /* Morado NexLink muy suave */
    border-radius: 10px;
    transition: background 0.2s ease;
}

/* 4. Efecto hover al tocar el scroll */
.tabulator .tabulator-tableholder::-webkit-scrollbar-thumb:hover,
.tabulator-edit-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(89, 85, 209, 0.5); /* Se oscurece al pasar el mouse */
}

/* 5. Ajuste para Modo Oscuro (Opcional si quieres un gris más acorde) */
[data-bs-theme=dark] .tabulator .tabulator-tableholder::-webkit-scrollbar-thumb,
[data-bs-theme=dark] .tabulator-edit-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
}

/* CHECK BOX */

.tabulator input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #8b5cf6;
  transform: scale(0.85);
  transform-origin: center;
}

/* celda del handle */
.tabulator-row-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

/* icono interno */
.tabulator-row-handle div {
  font-size: 16px;
  color: #6c757d; /* gris Bootstrap */
}

/* hover */
.tabulator-row-handle:hover div {
  color: #0d6efd;
}

/* cuando arrastras */
.tabulator-row-handle:active {
  cursor: grabbing;
}

/* quitar fondo blanco */
.tabulator-row .tabulator-cell.tabulator-row-handle {
  background: transparent !important;
  padding: 0;
}

/* centrar contenido */
.tabulator-row-handle-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* barras */
.tabulator-row-handle-bar {
  height: 2px;
  margin: 2px 0;
  background: #adb5bd;
  border-radius: 2px;
}

/* Resaltado de celda inválida */
/* --- 🔴 ESTADO DE ERROR UNIVERSAL --- */
.tabulator-cell.tabulator-editing.tabulator-validation-fail {
    /* Un rojo suave pero con presencia (Viene del blanco rosado) */
    background-color: #fff0f0 !important; 
    /* Outline sólido para que el ojo sepa dónde está el límite */
    outline: 2px solid #ed1c24 !important;
    /* Forzamos el texto a negro/oscuro para que no se pierda */
    color: #333 !important;
}

/* 🌙 TEMA OSCURO */
[data-bs-theme=dark] .tabulator-cell.tabulator-editing.tabulator-validation-fail {
    background-color: rgba(237, 28, 36, 0.3) !important;
    outline: 1px solid #ff4d4d !important;
}

/* --- 📳 ANIMACIÓN SHAKE --- */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}


/* =========================================================
   CELDA CON ACCIONES
   ========================================================= */

   /* Contenedor principal de la celda */
.tabla-cell-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 8px;
}

/* Link dentro de la celda - Estilo de resalte */
.tabla-link {
    color: var(--bs-gray-alt); /* Gris casi negro */
    text-decoration: none;
    position: relative;
    display: inline-block; /* Para que ::after se ajuste al texto */
    padding: 2px 0;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Línea inferior animada */
.tabla-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #d63384, #9b59b6); 
    transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    border-radius: 10px;
}

/* Hover del link */
.tabla-link:hover {
    color: #8e44ad;
    text-shadow: 0 0 1px rgba(142, 68, 173, 0.2);
}

.tabla-link:hover::after {
    width: 100%;
}

/* Botones de acción rápida */
.tabla-actions-hover {
    display: flex;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease-in-out;
    transform: translateX(5px);
}

/* Mostrar botones al pasar el mouse por la FILA */
.tabulator-row:hover .tabla-actions-hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Botones estilo minimalista refinado */
.tabla-actions-hover button {
    border: 1px solid var(--bs-gray-500);
    background: #ffffff;
    color: #6c757d;
    border-radius: 7px;      /* antes 6px, más suave */
    padding: 3px 6px;        /* antes 2px 5px, más grande */
    font-size: 12px;         /* antes 12px, más legible */
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* un poco más suave */
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tabla-actions-hover button:hover {
    background: var(--bs-gray-300);
    color: #8e44ad;
    border: 1px solid var(--bs-gray-500);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* más marcada al hover */
}

/* Botones estilo minimalista refinado - versión dark */
[data-bs-theme="dark"] .tabla-actions-hover button {
    border: 1px solid #555;         /* gris oscuro suave */
    background: #2c2c2c;           /* fondo oscuro */
    color: #ccc;                    /* texto claro */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* sombra más sutil en dark */
}

[data-bs-theme="dark"] .tabla-actions-hover button:hover {
    background: #3a3a3a;            /* hover más claro que el fondo */
    color: var(--bs-gray-200);                 /* mantiene el color de marca */
    border: 1px solid #666;         /* borde ligeramente más claro */
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* sombra más marcada al hover */
}


/* Fondo del menú */
/* Contenedor del menú */
/* ============================ */
/* Contenedor del menú */

/* ============================ */
/* HeaderMenu Tabulator */
.tabulator-menu {
    border-radius: 0.5rem !important;
    min-width: 160px !important;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1) !important;
    padding: 0.1rem 0 !important; /* vertical pequeño */
    z-index: 10000 !important;
}

/* Items del HeaderMenu */
.tabulator-menu-item span {
    display: flex;
    align-items: center;
    padding: 0.10rem 0.5rem; /* compacto */
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--bs-body-color, #475569); /* claro por defecto */
}

/* Hover modo claro */
.tabulator-menu-item span:hover {
    color: #5955D1;
}

/* Iconos */
.tabulator-menu-item i.fas {
    width: 16px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--bs-primary, #0d6efd);
}

/* ============================ */
/* Modo Oscuro */
[data-bs-theme=dark] .tabulator-menu {
    background-color: #1e1e30 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

[data-bs-theme=dark] .tabulator-menu-item i.fas {
    color: #0d6efd !important; /* iconos azules en oscuro */
}


 /* Contenedor general */
.switch_vistas {
  display: flex;
  gap: 0.25rem;
  background-color: #f8f9fa;
  border-radius: 0.35rem;
  padding: 0.2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.switch_vistas .nav-link {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.35rem;
  color: #6c757d;
  transition: all 0.2s ease-in-out;
  background-color: transparent;
  border: none;
}

.switch_vistas .nav-link:hover {
  background-color: rgba(89, 85, 209, 0.1);
  color: #5955d1 !important;
}

.switch_vistas .nav-link.active {
  background-color: #5955d1 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(89, 85, 209, 0.3);
}


/* Versión oscura */
[data-bs-theme="dark"] .switch_vistas {
  background-color: #2c2c2e; /* gris oscuro de fondo */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .switch_vistas .nav-link {
  color: #c0c0c0; /* gris claro para texto */
}

[data-bs-theme="dark"] .switch_vistas .nav-link:hover {
  background-color: rgba(89, 85, 209, 0.2);
  color: #b0aaff !important; /* tono morado suave */
}

[data-bs-theme="dark"] .switch_vistas .nav-link.active {
  background-color: #5955d1 !important; /* mismo morado fuerte */
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}