/* ============================================================================
   ncg_plugin.css — TIKO
   ----------------------------------------------------------------------------
   🛑 PRINCIPIO (Norberto, 2026-08-23): "KIKA es referencia de REPLICA DE
   FUNCIONALIDAD de UI: funciona bajo el mismo concepto, pero aplicado a los
   estilos de Skote que usa TIKO".
   Por eso este archivo conserva la ESTRUCTURA del de KIKA (para poder comparar
   y traer mejoras) pero su paleta teal (#086070 y familia) fue reemplazada por
   las variables de marca de TIKO. Los ajustes de forma (rounded, sombras,
   dropdowns) viven al final, en la seccion "AJUSTES TIKO".
   Respaldo del original de KIKA: ncg_plugin.css.kika.bak
   ========================================================================== */

.nav-tabs .nav-link:hover {
    color: #fff;
    background-color: var(--tk-marca, #556ee6);
}

/*Scrollable menu opcion*/
.scrollable-menu {
    height: auto;
    max-height: min(400px, calc(100vh - 140px));
    overflow-y: auto;
    overflow-x: hidden;
}

/* Menús de la toolbar del drawtable (Columnas, Exportar, Todo, Opciones) y el selector de filas
   del pie. Van con data-bs-strategy="fixed" para que el overflow de la grilla no los recorte, y
   con este z-index para que no queden DEBAJO de la tabla: sus filas y encabezados usan
   `position: relative; z-index: 1` por el hover con sombra.
   1065 = por encima del modal (1055) —estas grillas también viven dentro de modales de búsqueda—
   y por debajo de popover (1070) y tooltip (1080). */
.dropdown-menu.scrollable-menu.show,
.dropdown-menu.show[aria-labelledby="btnGroupExport"],
.dropdown-menu.show[aria-labelledby="btnGroupDropCol"],
.dropdown-menu.show[aria-labelledby="btnGroupDropOpcion"] {
    z-index: 1065 !important;
}

/* Refuerzo: si algun ancestro creara contexto de apilamiento (transform/filter en una card), el
   z-index del menu se resolveria DENTRO de ese contexto y volveria a quedar detras. Elevando el
   grupo del boton mientras el menu esta abierto, el contexto entero sube. `:has()` ya se usa en
   esta hoja (.form-floating:has(select)). */
.btn-group:has(> .dropdown-toggle.show) {
    position: relative;
    z-index: 1066;
}

.dropdown-menu-option.show[data-bs-popper="static"] {
   /* position: fixed !important;*/
    /*top: 7rem !important;*/
    left: auto !important;
    margin-top:5px !important;
}

.dt-button-collection {
    max-height: 250px;
    overflow-y: scroll;
}

/* --- INICIO ESTILOS TABLA MODERNIZADA (FINAL: SIN LÍNEA NEGRA ABAJO) --- */

/* 1. WRAPPER */
.table-wrapper-ncgdrawtable {
    padding: 0 !important;
    border: none !important;
}

/* GENERAL TABLE */
table.ncgdrawtable {
    clear: both;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    max-width: none !important;
    border-collapse: collapse !important;
    border-spacing: 0;
    /* REGLAS GLOBALES PARA QUITAR BORDES EXTERNOS */
    border: none !important;
    border-top: 0px solid transparent !important;
    border-bottom: 0px solid transparent !important; /* Forzamos 0px y transparente */
}

/* FIX EXTRA PARA DATATABLES: Esto elimina la linea que la librería pone por defecto */
table.dataTable.no-footer {
    border-bottom: none !important;
}

/* HEADER */
table.ncgdrawtable thead tr:nth-child(1) {
    background-color: #f8f9fa;
    font-size: 14px;
    border-top: none !important;
}



table.ncgdrawtable thead input {
    border: 1px solid rgba(85, 110, 230, .10) !important;
    /*border-radius: 4px !important;*/
    border-radius: 15px !important;
    padding: 3px 6px;
    font-size: 13px;
    color: #495057;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    table.ncgdrawtable thead input:focus {
        /*border-color: var(--tk-marca-hi, #7f92ec) !important;*/
        outline: 0;
        /*box-shadow: 0 0 0 0.2rem rgba(34, 131, 149, 0.15) !important;*/
        box-shadow: 0 0 0 0.25rem rgb(81 165 168 / 15%) !important;
    }

/* 2. LIMPIEZA DE BORDES DE CELDAS */
table.table-bordered.ncgdrawtable tbody th,
table.table-bordered.ncgdrawtable tbody td {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #eff2f7;
}

/* HEADER TEXTO */
/* 1. HEADER (Tu diseño original con el nuevo color gris) */
table.table-bordered.ncgdrawtable th {
    border-top: 0 !important;
    border-top-width: 0px !important;
    border-top-style: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 2px solid rgba(85, 110, 230, .10) !important;
    color: var(--kika-text-muted, #8898aa) !important;   
    /*color: #646464;*/ /* Tu Gris elegido */
    font-weight: 700;
    letter-spacing: 0.3px;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    vertical-align: middle;
}

/* 2. HOVER DE FILAS (El "Verde" que tenías antes) */
    table.table-bordered.ncgdrawtable th:hover {
        /* Degradado desde la izquierda (concepto KIKA) en el violeta de TIKO */
        background: linear-gradient(90deg, rgba(85, 110, 230, .12) 0%, rgba(85, 110, 230, .12) 20%, #ffffff 100%) !important;
        /* Sombra de relieve */
        box-shadow: 0 0 10px rgba(85, 110, 230, .30) !important;
        z-index: 1;
        position: relative;
        transition: none;
        color: var(--tk-marca-dk, #3f57cc) !important;
    }

   
/*table.table-bordered.ncgdrawtable th {
    border-top: 0 !important;
    border-top-width: 0px !important;
    border-top-style: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 2px solid rgba(85, 110, 230, .10) !important;
    color: var(--tk-marca, #556ee6);
    font-weight: 700;
    letter-spacing: 0.3px;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    vertical-align: middle;
}*/

/* --- ESTILO DE GRUPO --- */
/* 🛑 REPLICAR NO ES APLANAR: KIKA usa un DEGRADADO que arranca fuerte a la izquierda y se
   funde con el blanco a la derecha — eso es lo que hace que la fila de grupo se LEA como
   encabezado. Yo lo había aplanado a un color liso y quedaba lavado (Norberto, 2026-08-25:
   "el grupo sale en blanco"). Misma geometría que KIKA, con el azul Skote de TIKO. */
.ncgGruporow {
    cursor: pointer;
    background: linear-gradient(90deg, #c3cdf7 0%, #c3cdf7 35%, #ffffff 100%);
    color: var(--tk-marca-dk, #3f57cc);
    font-weight: 700;
    border-left: 4px solid var(--tk-marca, #556ee6) !important;
    border-bottom: 1px solid #dfe4fb;
    border-top: 1px solid #dfe4fb;
    border-right: 0;
}

    /* ⚠️ ACÁ QUEDABA EL TEAL DE KIKA (#aed4db) sin re-temizar: era el "verde" que se veía
       al pasar el mouse por la fila de grupo. */
    .ncgGruporow:hover {
        cursor: pointer;
        background: linear-gradient(90deg, #b3bff4 0%, #b3bff4 35%, #f8f9ff 100%);
        color: var(--tk-marca-dk, #3f57cc);
        border-left-color: var(--tk-marca-dk, #3f57cc) !important;
    }

/* BADGE (CONTADOR) */
.ncgGruporowcounterLabel {
    background-color: var(--tk-marca, #556ee6) !important;
    border-radius: 6px !important;
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    padding: 3px 8px;
    float: right;
    margin-right: 10px;
}

.ncgdrawtable > .ncgGruporowcounterLabel:focus {
    background-color: #bd2130 !important;
}

.ncgd-grabbed {
    box-shadow: 0 0 13px #f21010;
    color: #5c1208;
    background-color: #febea5;
}

/* Fondo general BLANCO */
.table-ncg-primary {
    --bs-table-color: #acacac;
    /*--bs-table-color: #3e444a;*/
    --bs-table-bg: #ffffff;
    --bs-table-border-color: #eff2f7;
}

/* ELIMINACION DEL BORDE EXTERNO */
.table-bordered {
    border: none !important;
}

/* --- SECCIÓN ACTIVE / SELECCIONADO --- */
.ncgdrawtable tbody tr.ngcd-trSelected,
.ncgdrawtable tbody tr.check-row-selected,
.ncgdrawtable tbody tr.selected-checked {
    background: linear-gradient(90deg, rgba(85, 110, 230, .20) 0%, rgba(85, 110, 230, .20) 20%, #ffffff 100%) !important;
    border-left: 4px solid var(--tk-marca, #556ee6) !important;
    box-shadow: 0 0 10px rgba(85, 110, 230, .30) !important;
    z-index: 1;
    position: relative;
    text-shadow: 0 0 0.65px currentColor !important;
}

    /* Hover sobre seleccionado */
    .ncgdrawtable tbody tr.ngcd-trSelected:hover,
    .ncgdrawtable tbody tr.check-row-selected:hover,
    .ncgdrawtable tbody tr.selected-checked:hover {
        background: rgba(85, 110, 230, .20);
    }


/* --- HOVER GENERAL (patrón KIKA con colores de Skote) --- */
.table-hover tbody tr:hover {
    background: linear-gradient(90deg, rgba(85, 110, 230, .12) 0%, rgba(85, 110, 230, .12) 20%, #ffffff 100%);
    box-shadow: 0 0 10px rgba(85, 110, 230, .30);
    z-index: 1;
    position: relative;
    transition: none;
}

    .table-hover tbody tr:hover td,
    .table-hover tbody tr:hover * {
        text-shadow: 0 0 0.65px currentColor !important;
    }

/* --- ZONA FOOTER NUCLEAR (ELIMINA TODA LÍNEA NEGRA) --- */

/* 1. Quitamos borde al bloque TFOOT completo */
table.ncgdrawtable tfoot {
    border: none !important;
    border-bottom: none !important;
}

    /* 2. Quitamos borde a la FILA (TR) del footer */
    table.ncgdrawtable tfoot tr {
        border: none !important;
        border-bottom: none !important;
    }

    /* 3. Estilo de CELDAS (TH/TD) del footer */
    table.ncgdrawtable tfoot th,
    table.ncgdrawtable tfoot td {
        background-color: #fff !important;
        /* LINEA SUPERIOR SUAVE VERDE AGUA */
        border-top: 2px solid #94bfc7 !important;
        /* SIN NINGÚN OTRO BORDE */
        border-bottom: 0 !important;
        border-bottom-width: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        color: #212529;
        font-weight: 700 !important;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 14px;
    }

/* Resto de utilidades */
.ncgd-grabReorder {
    cursor: grab !important;
}

.ncgd-cSorter {
    cursor: alias !important;
}

.ncgd-grabCursor, .ncgd-grabCursor * {
    cursor: grabbing !important;
}

/* --- MEDIA QUERIES --- */
@media screen and (max-width: 1225px) and (min-width: 1045px) {
    .ncgd-table-priority .priority-5 {
        display: none;
    }
}

@media screen and (max-width: 1045px) and (min-width: 835px) {
    .ncgd-table-priority .priority-5 {
        display: none;
    }

    .ncgd-table-priority .priority-4 {
        display: none;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 100%;
    }

    @media screen and (max-width: 835px) and (min-width: 300px) {
        .ncgd-table-priority .priority-5 {
            display: none;
        }

        .ncgd-table-priority .priority-4 {
            display: none;
        }

        .ncgd-table-priority .priority-3 {
            display: none;
        }
    }

    @media screen and (max-width: 300px) {
        .ncgd-table-priority {
            width: 100%;
        }

            .ncgd-table-priority .priority-5 {
                display: none;
            }

            .ncgd-table-priority.priority-4 {
                display: none;
            }

            .ncgd-table-priority .priority-3 {
                display: none;
            }

            .ncgd-table-priority .priority-2 {
                display: none;
            }
    }

    /*Table Split*/
    @media (max-width: 575.98px) {
        .ncgd-table-split.table-responsive-sm {
            position: relative;
            overflow-x: hidden;
        }
    }

    @media (max-width: 767.98px) {
        .ncgd-table-split.table-responsive-md {
            position: relative;
            overflow-x: hidden;
        }

        .ncg-search {
            width: 130px;
        }
    }

    @media (max-width: 991.98px) {
        .ncgd-table-split.table-responsive-lg {
            position: relative;
            overflow-x: hidden;
        }
    }

    @media (max-width: 1199.98px) {
        .ncgd-table-split.table-responsive-xl {
            position: relative;
            overflow-x: hidden;
        }
    }

    .table-wrapper-ncgdrawtable-responsive.ncgd-table-split.table-responsive {
        position: relative;
        overflow-x: hidden;
    }

    .ncgd-table-split thead {
        position: relative;
        display: inline-block;
        width: 96.5%;
        overflow: visible;
    }

        .ncgd-table-split thead tr th:nth-child(1) {
            position: relative;
            display: block;
            background-color: #88b;
        }

    .ncgd-table-split tbody {
        position: relative;
        display: block;
        height: 250px;
        overflow: scroll;
    }

        .ncgd-table-split tbody tr td:nth-child(1) {
            position: relative;
            display: block;
            background-color: #99a;
        }

            .ncgd-table-split tbody tr td:nth-child(1):hover {
                color: #1258e9;
                background-color: #d2e4f7;
                box-shadow: 0 0 10px #f7b0a7;
            }

    .btn-group-xs > .btn, .btn-xs {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }

    text-wrap {
        white-space: normal !important;
    }

    text-nowrap {
        white-space: nowrap !important;
    }

    text-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    td {
        word-wrap: break-word;
        word-break: break-all;
        white-space: nowrap !important;
    }

    .dropdown-item {
        white-space: nowrap !important;
    }

    /* Absolute Center Spinner */
    .ncgd-spiner-loading {
        position: fixed;
        z-index: 9998;
        height: 2em;
        width: 2em;
        overflow: show;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        vertical-align: middle;
    }

        .ncgd-spiner-loading:before {
            content: '';
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    .ncgd-spiner-loading-body {
        border: 1px solid;
        width: 250px;
        height: auto;
        content: none;
        /* Era #0c768a63 (hex + alpha) en KIKA; al pasarlo a variable quedaba
           `var(...)63`, que es CSS inválido y el navegador descartaba. */
        background-color: rgba(63, 87, 204, .39);
        border-radius: 8px;
        color: var(--tk-marca-dk, #3f57cc);
        vertical-align: middle;
        margin-left: -110px;
    }

    .ncgd-spiner-overlay-content {
        position: absolute;
        z-index: 998;
        opacity: 0.7;
        background-color: #fff;
    }

    .select2-dropdown {
        background-color: rgb(255 255 255) !important;
        /*background-color: rgb(212 237 241) !important;*/
        border: 1.2px solid #bedadf !important;
        /*border: 1.2px solid #8ad1df !important;*/
        box-shadow: 0 4px 12px rgba(12, 118, 138, 0.12) !important;
        /*border: 1.2px solid var(--tk-marca-dk, #3f57cc) !important;*/
    }

    .select2-search {
        /* Fondo claro de la marca (era el teal de KIKA: rgba(85, 110, 230, .10)). */
        background-color: rgba(85, 110, 230, .08) !important;
        border: 1px solid var(--bs-border-color, #eff2f7) !important;
    }

    .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: #8bcdd9 !important;
    }

        .select2-container--default .select2-results__option[aria-selected=true]:hover {
            background-color: var(--tk-marca-dk, #3f57cc) !important;
        }

    .form-floating:has(select) .parsley-errors-list {
        margin-top: 51px;
        z-index: 2;
        position: absolute;
    }

    .select2-container:not(.selectFilter .select2-container) {
        width: auto !important;
    }

    .input-group > .select2-container:not(.selectFilter .select2-container) {
        width: auto !important;
        flex: 1 1 auto !important;
    }

    .input-group > .select2-container .select2-selection--single {
        height: 100% !important;
        line-height: inherit !important;
    }

    .inputfontweightbold {
        font-weight: bold;
        color: #7d0b0b !important;
    }
}


/* =========================================================
   ESTILOS BARRA DE HERRAMIENTAS KIKA (FINAL)
   ========================================================= */

/* --- 1. BUSCADOR INTEGRADO (Caja única de 250px) --- */

/* Contenedor del buscador: Tamaño fijo */
.ncg-search-fixed {
    width: 250px !important;
}

/* --- ESTILO UNIFICADO (SOLID BOX) --- */

/* 1. Lupa (Izquierda) */
.ncg-group-integrated .input-group-text {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-right: none; /* Se une al input */
    color: #6c757d;
}

/* 2. Input (Centro) */
.ncg-group-integrated .form-control {
    border: 1px solid #ced4da;
    border-left: none; /* Se une a la lupa */
    border-right: none; /* Se une a la X */
    box-shadow: none !important; /* Sin brillos extraños */
}

/* 3. Botón X (Derecha) */
.ncg-group-integrated .ncgd-btn-clear {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-left: none; /* Se une al input */
    color: #adb5bd; /* Gris suave */
    z-index: 4; /* Para que siempre sea clickeable */
}

    /* Hover en la X: Solo cambia el icono a rojo, el fondo sigue blanco */
    .ncg-group-integrated .ncgd-btn-clear:hover {
        color: #dc3545;
        background-color: #fff;
        border-color: #ced4da;
    }

/* --- EFECTO FOCO GLOBAL --- */
/* Cuando tocas el input, TODO el borde del grupo cambia a tu Verde Teal */
.ncg-group-integrated:focus-within .input-group-text,
.ncg-group-integrated:focus-within .form-control,
.ncg-group-integrated:focus-within .ncgd-btn-clear {
  /*  box-shadow: 0 0 0 0.25rem rgb(81 165 168 / 15%) !important;*/
    /*border-color: var(--tk-marca, #556ee6);*/
    box-shadow: 0 0 4px 1px rgb(81 165 168 / 15%) !important;
    /*   box-shadow: 0 4px 12px rgba(12, 118, 138, 0.12) !important;*/
    /*border-color: var(--kika-teal);*/
}


/* --- 2. BOTONES DE OPCIONES (Hover Tintado) --- */

/* Estilo base (Blanco limpio) */
.btn-tool-base {
    background-color: #fff;
    border: 1px solid #dee2e6;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

/* Hover CYAN (Para 'Columnas') */
.btn-hover-info:hover, .btn-hover-info[aria-expanded="true"] {
    color: #0dcaf0;
    background-color: #f2fcfe; /* Fondo cyan muy pálido */
    border-color: #0dcaf0;
}

.btn-hover-info i {
    color: #0dcaf0;
}

/* Hover VERDE (Para 'Exportar') */
.btn-hover-success:hover, .btn-hover-success[aria-expanded="true"] {
    color: #198754;
    background-color: #f0fdf4; /* Fondo verde muy pálido */
    border-color: #198754;
}

.btn-hover-success i {
    color: #198754;
}

/* Hover KIKA/TEAL (Para 'Todo' y 'Opciones') */
.btn-hover-brand:hover, .btn-hover-brand[aria-expanded="true"] {
    color: var(--tk-marca, #556ee6);
    background-color: rgba(85, 110, 230, .07); /* Fondo Teal muy pálido */
    border-color: var(--tk-marca, #556ee6);
}

.btn-hover-brand i {
    color: var(--tk-marca, #556ee6);
}

/* =============================================================
   DISEÑO MODERN TABLE UI - VERSIÓN COMPACTA & FORMAL
   ============================================================= */

/* 1. EL CONTENEDOR (La Tarjeta) */
.ncgd-modern-wrapper {
    background: #ffffff;
    /*border-radius: 12px;*/ /* Un poco menos redondeado para ser más formal */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); /* Sombra más sutil */
    border: 1px solid #eff2f7 !important; /* Borde muy sutil para definir limites */
    padding: 0;
    overflow: hidden;
    margin-bottom: 1.5rem !important;
}

/* 2. LA TABLA GENERAL */
table.ncgdrawtable {
    margin: 0 !important;
    width: 100% !important;
    border-collapse: collapse !important; /* Volvemos a collapse para líneas finas */
    border: none !important;
}

/* 3. HEADER "FORMAL NEUTRO" (Gris Claro + Texto Oscuro) */
.ncgd-modern-thead tr th {
    background-color: #f8f9fa !important; /* Gris muy suave (Casi blanco) */
    color: #495057 !important; /* Gris oscuro neutro (No negro puro) */
    font-size: 0.7rem; /* 11px aprox */
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    padding: 10px 12px !important; /* Altura media para el header */
    border-bottom: 2px solid #e9ecef !important; /* Línea de separación sólida pero suave */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle;
}

/* Inputs de filtro dentro del header (Adaptados al fondo claro) */
.ncgd-modern-thead input.ncgd-input-filter {
    background: #ffffff !important;
    border: 1px solid #ced4da !important;
    color: #495057 !important;
    border-radius: 3px;
    padding: 2px 10px;
    font-size: 11px;
    height: 24px; /* Altura fija compacta */
    margin-top: 4px;
    box-shadow: none !important;
}

    .ncgd-modern-thead input.ncgd-input-filter:focus {
        border-color: #80bdff !important;
        outline: none;
    }

/* 4. EL CUERPO (Filas Compactas) */
table.ncgdrawtable tbody tr {
    background-color: #fff;
    transition: background-color 0.1s ease;
}

table.ncgdrawtable tbody td {
    /* AQUÍ ESTÁ LA CLAVE DEL ESPACIO */
    padding: 6px 10px !important; /* Reducido de 14px a 6px verticalmente */
    border-top: none !important;
    border-bottom: 1px solid #f1f3f5 !important; /* Línea casi invisible */
    color: #343a40; /* Texto con buen contraste */
    font-size: 0.85rem; /* Tamaño de letra legible pero contenido */
    vertical-align: middle;
    height: 35px; /* Forzamos una altura mínima controlada */
}

/* Hover Effect Sutil */
table.ncgdrawtable tbody tr:hover {
    background-color: #f8f9fa !important; /* Gris muy pálido al pasar el mouse */
}

/* 5. FOOTER (Corrección de Líneas Negras) */
table.ncgdrawtable tfoot {
    border-top: 2px solid #e9ecef !important; /* Misma línea que el header */
    background-color: #fcfcfc !important;
}

    table.ncgdrawtable tfoot th,
    table.ncgdrawtable tfoot td {
        background-color: transparent !important;
        border: none !important; /* ELIMINA TODAS LAS LINEAS NEGRAS INTERNAS */
        color: #212529;
        font-weight: 700;
        padding: 8px 10px !important; /* Compacto también */
        font-size: 0.85rem;
    }

/* Eliminar bordes dobles si Bootstrap los agrega */
table.dataTable.no-footer {
    border-bottom: none !important;
}

/* 6. UTILIDADES */
/* Scrollbar fino */
.table-wrapper-ncgdrawtable-responsive::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.table-wrapper-ncgdrawtable-responsive::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 3px;
}

/* Badges ajustados al tamaño compacto */
table.ncgdrawtable .badge {
    padding: 0.35em 0.6em;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Botones de acción más pequeños para que no rompan la fila */
table.ncgdrawtable .btn.rounded-circle {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
}

/* =========================================================
   FORM-FLOATING COMPACTO (KIKA — ~17% más bajo que Bootstrap default)
   =========================================================
   Bootstrap 5 default:   3.5rem  (56px @ root 16px)
   KIKA compacto:         2.9rem  (46.4px) → ~17% menos
   Aplica a:
     - <input>  dentro de .form-floating
     - <select> dentro de .form-floating  (incluye Select2 wrapping)
     - <textarea> dentro de .form-floating (min-height; mantiene resize)
   El label flotado escala 0.85 → quedamos con label visible en ~0.85rem,
   padding-top 1.25rem (input flotado) y padding-bottom 0.4rem.
*/

/* Altura fija — solo para inputs simples y selects. Textarea queda EXCLUIDO
   (selector :not(textarea)) para que conserve el resize vertical del browser. */
.form-floating > .form-control:not(textarea),
.form-floating > .form-select {
    height: calc(2.9rem + calc(var(--bs-border-width, 1px) * 2)) !important;
    min-height: calc(2.9rem + calc(var(--bs-border-width, 1px) * 2)) !important;
    line-height: 1.15 !important;
}

/* Textarea: solo min-height razonable, dejar Bootstrap manejar el resize.
   NO tocamos height ni resize → el usuario puede arrastrar la esquina. */
.form-floating > textarea.form-control {
    min-height: 3.2rem;  /* algo mayor que inputs para que se vea como textarea de entrada */
}

/* Padding del input — placeholder visible (sin flotar). Solo no-textarea. */
.form-floating > .form-control:not(textarea),
.form-floating > .form-control-plaintext {
    padding: 0.75rem 0.75rem !important;
}

/* Padding cuando el label flota (focus / valor presente / select).
   padding-top sube ~1.6px respecto al cálculo base para que el texto
   del input no toque el label flotado arriba. padding-bottom compensa.
   Excluimos textarea — Bootstrap ya tiene su propio padding para textareas. */
.form-floating > .form-control:not(textarea):focus,
.form-floating > .form-control:not(textarea):not(:placeholder-shown),
.form-floating > .form-control-plaintext ~ label ~ .form-control,
.form-floating > .form-select {
    padding-top: 1.35rem !important;
    padding-bottom: 0.3rem !important;
}

/* Label — padding reducido para compensar el alto menor del input. */
.form-floating > label {
    padding: 0.75rem 0.75rem !important;
}

/* ----- Select2 dentro de form-floating -----
   El plugin Select2 reemplaza el <select> por un wrapper .select2-container
   (HERMANO del <select> original, ambos dentro del .form-floating). El control
   visible es .select2-selection--single.

   ⚠ El template `assets/css/app.min.css` (línea ~3585) define:
       .select2-container .select2-selection--single { height: 38px; }
   con peso similar al nuestro. Para garantizar que ganemos sin importar el
   orden de carga, usamos !important sólo cuando el container está bajo
   .form-floating (no afecta select2 estándar fuera de floating).
*/
.form-floating > .select2-container .select2-selection--single,
.form-floating .select2-container--default .select2-selection--single {
    height: calc(2.9rem + calc(var(--bs-border-width, 1px) * 2)) !important;
    min-height: calc(2.9rem + calc(var(--bs-border-width, 1px) * 2)) !important;
}

.form-floating > .select2-container .select2-selection--single .select2-selection__rendered,
.form-floating .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.15 !important;
    padding-top: 1.4rem !important;
    padding-bottom: 0.2rem !important;
    padding-left: 0.75rem !important;
}

.form-floating > .select2-container .select2-selection--single .select2-selection__arrow,
.form-floating .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
}

/* El <select> oculto que vive bajo el wrapper Select2 también está afectado
   por las reglas anteriores de .form-floating > .form-select — ya queda compacto. */

/* Asegurar que el label del form-floating quede sobre el Select2 visible.
   Bootstrap por default usa z-index 2; el wrapper Select2 mete sus capas
   propias que pueden taparlo. */
.form-floating > .select2-container ~ label,
.form-floating > label {
    z-index: 3;
}

/* 🛑 Y CUANDO EL COMBO ESTA ABIERTO, MAS TODAVIA (Norberto, 2026-09-05: «al desplegar el
   combo me desaparece el texto flotante»). jquery.helper.ncg.js inyecta
   `.select2-container--open { z-index: 10600 !important }` para que los desplegables floten
   sobre las grillas; ese contenedor es HERMANO del label dentro del .form-floating, asi que al
   abrir salta a 10600 y pisa al label, que quedaba en 3. Cerrado no se nota porque el
   contenedor no tiene z-index. Se le da al label un piso por encima del contenedor abierto,
   igual al del desplegable (10601): no se solapan en pantalla, y si se rozaran gana el
   desplegable por venir despues en el DOM, que es lo que se quiere.
   Scope minimo (:has, como el resto de esta hoja): no toca la regla del framework ni a los
   combos fuera de floating. */
.form-floating:has(> .select2-container--open) > label {
    z-index: 10601;
}

/* =========================================================
   COLUMNAS FRACCIONARIAS — col-X-5 (1.5, 2.5, 3.5, 4.5)
   =========================================================
   Bootstrap solo trae enteros col-1 a col-12. A veces necesitamos un
   ancho intermedio: por ejemplo `col-md-1-5` que es 1.5 columnas (entre
   col-md-1 y col-md-2). Width = 1.5 × (100/12) = 12.5%.

   Convención: `col-1-5`, `col-2-5`, `col-3-5`, `col-4-5` con todos los
   breakpoints Bootstrap (sm/md/lg/xl/xxl). Comportamiento idéntico a
   las clases nativas — `flex: 0 0 auto` + `width: N.5%` apilable en .row.

   Anchos:
     col-1-5 = 12.5%      col-2-5 = 20.833%
     col-3-5 = 29.166%    col-4-5 = 37.5%

   Usar igual que las nativas: <div class="col-md-1-5"> ... </div>.
*/

/* xs (sin breakpoint — siempre aplica) */
.col-1-5 { flex: 0 0 auto; width: 12.5%; }
.col-2-5 { flex: 0 0 auto; width: 20.833333%; }
.col-3-5 { flex: 0 0 auto; width: 29.166667%; }
.col-4-5 { flex: 0 0 auto; width: 37.5%; }

/* sm — ≥ 576px */
@media (min-width: 576px) {
    .col-sm-1-5 { flex: 0 0 auto; width: 12.5%; }
    .col-sm-2-5 { flex: 0 0 auto; width: 20.833333%; }
    .col-sm-3-5 { flex: 0 0 auto; width: 29.166667%; }
    .col-sm-4-5 { flex: 0 0 auto; width: 37.5%; }
}

/* md — ≥ 768px */
@media (min-width: 768px) {
    .col-md-1-5 { flex: 0 0 auto; width: 12.5%; }
    .col-md-2-5 { flex: 0 0 auto; width: 20.833333%; }
    .col-md-3-5 { flex: 0 0 auto; width: 29.166667%; }
    .col-md-4-5 { flex: 0 0 auto; width: 37.5%; }
}

/* lg — ≥ 992px */
@media (min-width: 992px) {
    .col-lg-1-5 { flex: 0 0 auto; width: 12.5%; }
    .col-lg-2-5 { flex: 0 0 auto; width: 20.833333%; }
    .col-lg-3-5 { flex: 0 0 auto; width: 29.166667%; }
    .col-lg-4-5 { flex: 0 0 auto; width: 37.5%; }
}

/* xl — ≥ 1200px */
@media (min-width: 1200px) {
    .col-xl-1-5 { flex: 0 0 auto; width: 12.5%; }
    .col-xl-2-5 { flex: 0 0 auto; width: 20.833333%; }
    .col-xl-3-5 { flex: 0 0 auto; width: 29.166667%; }
    .col-xl-4-5 { flex: 0 0 auto; width: 37.5%; }
}

/* xxl — ≥ 1400px */
@media (min-width: 1400px) {
    .col-xxl-1-5 { flex: 0 0 auto; width: 12.5%; }
    .col-xxl-2-5 { flex: 0 0 auto; width: 20.833333%; }
    .col-xxl-3-5 { flex: 0 0 auto; width: 29.166667%; }
    .col-xxl-4-5 { flex: 0 0 auto; width: 37.5%; }
}

/* NOTA — los íconos `<i.mdi>` dentro de `.btn-outline-*-ico` mantienen su color
   nativo de Bootstrap (definido por `--bs-btn-color` de cada clase). La regla
   que protege a los botones de `highred-tds` está en `app.min.css` ~líneas
   6000-6015 (excluye `.btn` del color rojo forzado del row alertado).
   Ver memoria: feedback_highred_tds_iconos_inline_inviolable.md */

/* ──────────────────────────────────────────────────────────────────────────
   ATIC (AddTabbedItemContainer) — espaciado del footer de botones del partial.
   El partial item del ATIC siempre tiene un wrapper `.ATIC-partial-card`
   seguido inmediatamente del footer de botones (Cancelar/Guardar/Actualizar)
   en un `<div class="d-flex justify-content-end ...">`. Sin margin, esos
   botones quedan pegados al header del drawtable de arriba o al paging de
   abajo según donde se inyecte el collapse-row.

   Pedido user 2026-05-25: aplicar el espacio en la función ATIC (regla CSS
   global), NO en cada partial que la use, para que aplique a todos los
   partials del sistema sin tocar HTML uno por uno. Ver memoria:
   feedback_atic_navegaciones_y_label_inviolable.md (regla #7 actualizada).
   ──────────────────────────────────────────────────────────────────────── */
.ATIC-partial-card + .d-flex.justify-content-end {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   .kika-badge-row — ESTÁNDAR KIKA para badges/pills en filas de drawtable.
   Pedido user 2026-05-29: TODOS los badges de una fila (tipo entidad, abrev
   IVA, sigla comprobante, TF MAN/ELEC, SUMA/RESTA, RECHAZO, etc.) deben
   tener el MISMO alto que los círculos de Estado (18px), ancho auto, font
   chico para que no haya desniveles visuales en la grilla.

   !important porque Bootstrap `.badge` aplica padding 0.35em/0.65em que
   pisaba mis inline styles y dejaba los badges más altos que el de estado.

   Regla: aplicar en TODA grilla nueva o que se refactore. Anti-trigger:
   si veo `style="font-size:0.6rem;padding:..."` repetido en cada span de
   badge → reemplazar por esta clase. Ver memoria
   feedback_drawtable_estilo_visual_columndef_inviolable.md sección 2a.
   ──────────────────────────────────────────────────────────────────────── */
/* Mismo render que el pill "Confirmado" / "Sin Confirmar" / "Anulado" / "Eliminado"
   de la col Estado (que es la referencia visual unificada del listado).
   Receta de Confirmado: padding:1px 4px; font-size:0.6rem; display:inline-block;
   sin height forzado — el alto sale del line-height natural del badge Bootstrap.
   Resultado: ~16-17px de alto natural, ancho auto según contenido. */
.kika-badge-row {
    width: auto !important;
    padding: 1px 6px !important;
    font-size: 0.6rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle;
    font-weight: 500;
}

/* Si el badge tiene un ícono adentro (ej. abrev IVA con mdi-card-account-...),
   alinear con el texto y achicarlo proporcionalmente. */
.kika-badge-row > i.mdi {
    line-height: 1 !important;
    font-size: 0.95em !important;
    margin-right: 2px;
}

/* ──────────────────────────────────────────────────────────────────────────
   COLLAPSE-ROW del drawtable (EditInCollapseTrow / AddNewInCollapse).
   Ese <td> no muestra datos de grilla: hospeda un FORM completo (partial).
   La regla global `td { white-space: nowrap !important; word-break: break-all }`
   (línea ~418, dentro de @media min-width:768px) se lo aplicaba igual, así que
   cualquier texto largo del form — el alert de ayuda, labels, help-text — salía
   en una sola línea y se cortaba fuera de la tarjeta.

   Se resetea SOLO en el td del collapse; las grillas anidadas adentro vuelven a
   poner su propio nowrap por su clase `.text-nowrap`, así que no se ven afectadas.
   ──────────────────────────────────────────────────────────────────────── */
tr[class*="collapse-row-"] > td {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
}


/* ============================================================================
   AJUSTES TIKO AL FRAMEWORK (2026-08-23)
   Los detalles que Norberto marco comparando TIKO contra KIKA.
   ========================================================================== */

/* --- 1. La grilla, redondeada como todo lo demas de TIKO ------------------ */
.table-wrapper-ncgdrawtable {
    border-radius: var(--tk-r-card, 16px);
    overflow: hidden;                 /* recorta las esquinas de la tabla */
    border: 1px solid var(--bs-border-color, #eff2f7) !important;
}

table.ncgdrawtable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Esquinas del encabezado (primera fila del thead). */
table.ncgdrawtable thead tr:first-child th:first-child { border-top-left-radius: var(--tk-r-card, 16px); }
table.ncgdrawtable thead tr:first-child th:last-child  { border-top-right-radius: var(--tk-r-card, 16px); }

/* --- 2. Buscador del drawtable: UNA sola caja, redondeada al INICIO y al FINAL ---
   🛑 OJO con el selector: el plugin emite la barra como
        id="<mitablaId>ncgd-tablesearch-card"  (es un ID con sufijo, NO una clase).
   Escribir `.ncgd-tablesearch-card` no matchea NADA — por eso el buscador quedaba sin
   estilo. Las clases que SÍ existen son `.ncg-search-fixed` (contenedor de 250px) y
   `.ncg-group-integrated` (el input-group), y el ID se ataja con [id$="..."].

   Estructura real:  <span.input-group-text> lupa | <input.form-control> | <button.ncgd-btn-clear> X
   Concepto KIKA (caja unificada: la lupa DENTRO del grupo, sin borde entre piezas)
   con el redondeado de TIKO: extremos con --tk-r-input y el medio recto para que las
   tres piezas se lean como un solo control.
   El !important es obligatorio: el markup del plugin trae `.rounded-pill`, que en
   Bootstrap ya viene con !important y deja la lupa como un badge suelto. */
[id$="ncgd-tablesearch-card"] .form-control,
.ncgd-input-filter .form-control,
table.ncgdrawtable thead input {
    border-radius: var(--tk-r-input, 22px) !important;
}

/* El grupo entero define la forma; las piezas se recortan contra él. */
.ncg-group-integrated {
    border-radius: var(--tk-r-input, 22px) !important;
}

/* 1) Lupa — redondeada SOLO a la izquierda (pegada al input). */
.ncg-group-integrated > .input-group-text:first-child {
    border-top-left-radius: var(--tk-r-input, 22px) !important;
    border-bottom-left-radius: var(--tk-r-input, 22px) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding-left: .7rem;
}

/* 2) Input — recto: es el medio de la caja. */
.ncg-group-integrated > .form-control {
    border-radius: 0 !important;
}

/* 3) Botón X — redondeado SOLO a la derecha: cierra la caja. */
.ncg-group-integrated > .ncgd-btn-clear:last-child {
    border-top-right-radius: var(--tk-r-input, 22px) !important;
    border-bottom-right-radius: var(--tk-r-input, 22px) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding-right: .7rem;
}

/* Foco: se ilumina TODO el grupo con el violeta de marca (concepto KIKA). */
.ncg-group-integrated:focus-within .input-group-text,
.ncg-group-integrated:focus-within .form-control,
.ncg-group-integrated:focus-within .ncgd-btn-clear {
    border-color: var(--tk-marca, #556ee6) !important;
    box-shadow: none !important;
}

.ncg-group-integrated:focus-within {
    box-shadow: 0 0 0 .15rem var(--tk-marca-soft, rgba(85, 110, 230, .10));
}

/* Los botones de la toolbar (Columnas, Exportar, Todo) acompañan el criterio. */
[id$="ncgd-tablesearch-card"] .btn,
.table-wrapper-ncgdrawtable .btn-tool-base {
    border-radius: var(--tk-r-input, 22px) !important;
}

/* …salvo el X del buscador, que ya definió sus esquinas arriba. */
.ncg-group-integrated > .ncgd-btn-clear {
    border-radius: 0 var(--tk-r-input, 22px) var(--tk-r-input, 22px) 0 !important;
}

/* --- 3. Los menus de la toolbar NO se recortan contra el area de la tabla -- */
/* KIKA ya lo resuelve con data-bs-strategy="fixed" + z-index alto; aca se
   refuerza para que ningun contenedor con overflow los corte. */
.dropdown-menu.scrollable-menu.show,
.table-wrapper-ncgdrawtable .dropdown-menu.show {
    z-index: 1065 !important;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color, #eff2f7);
    box-shadow: 0 8px 24px rgba(18, 38, 63, .18) !important;
}

/* El wrapper recorta para el rounded, pero NO debe recortar los popups. */
.table-wrapper-ncgdrawtable:has(.dropdown-menu.show) { overflow: visible; }

/* --- 4. Hover de FILA: se manda por la variable de Bootstrap, no por `background` ---
   🛑 Medido en el navegador (23-08-2026): el `background` del bloque "HOVER GENERAL" de más
   arriba va sobre el <tr>, pero el <td> de Bootstrap 5.3 es OPACO
   (`.table > :not(caption) > * > * { background-color: var(--bs-table-bg) }` = #fff) y encima
   lleva `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, …)`. Resultado: el color del
   <tr> queda TAPADO y lo que se ve al pasar el mouse es el gris propio de Bootstrap
   (--bs-table-hover-bg = #f8f9fa). Por eso el hover "no seguía el patrón de KIKA".
   El camino correcto —y el que usa Skote— es redefinir la variable: así pinta el mecanismo
   nativo, sin pelear con !important celda por celda.
   Concepto KIKA (la fila bajo el cursor se resalta con el color de marca + relieve),
   color de TIKO (--tk-marca). */
table.ncgdrawtable.table-hover {
    --bs-table-hover-bg: var(--tk-marca-soft, rgba(85, 110, 230, .10));
    --bs-table-hover-color: var(--bs-body-color);
}

/* Fila SELECCIONADA: más marcada que el hover, y no se pierde si además está bajo el mouse
   (el hover de Bootstrap pinta con box-shadow inset y taparía el fondo de la selección). */
table.ncgdrawtable tbody tr.ngcd-trSelected > *,
table.ncgdrawtable tbody tr.check-row-selected > *,
table.ncgdrawtable tbody tr.selected-checked > * {
    /* .18 = a mitad de camino entre el hover (.10) y el borde de marca (.35): se distingue
       del hover sin gritar. Es el mismo criterio de KIKA (seleccionado > hover > normal). */
    --bs-table-bg-state: rgba(85, 110, 230, .18);
}

/* --- 5. Encabezado de la grilla: gris de Skote, no violeta ---------------- */
table.ncgdrawtable > thead > tr > th,
table.ncgdrawtable thead tr:nth-child(1) {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border-bottom: 1px solid var(--bs-border-color, #eff2f7) !important;
}


/* --- 6. Familia de botones de toolbar: mismo rounded que el resto de TIKO --- */
.btn-tool-base,
.btn-hover-brand,
.btn-hover-info,
.btn-hover-success {
    border-radius: var(--tk-r-input, 22px) !important;
    border-color: var(--bs-border-color, #eff2f7);
}

.btn-group-xs > .btn,
.btn-xs {
    border-radius: 12px !important;
}

/* Botones chicos de accion dentro de las filas (el icono redondo de KIKA). */
.btn-tool-base.rounded-circle,
.table-wrapper-ncgdrawtable .btn.rounded-circle {
    border-radius: 50% !important;
}