/* ============================================================
 *  DIBAL UIX v1.0 – jsTree (proton skin + context menu)
 *  File: public/css/dibal-uix/plugins/jstree.css
 * ============================================================ */

/* Fuente y base -------------------------------------------- */

.dibal-theme .jstree-proton {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.86rem;
    color: var(--dibal-gray-800, #111827);
}

/* Quitar borde/outline feo en anchor ----------------------- */

.dibal-theme .jstree-proton .jstree-anchor:focus {
    outline: none;
}

/* HOVER / SELECT ------------------------------------------- */

.dibal-theme .jstree-proton .jstree-hovered {
    background: rgba(37, 99, 235, 0.10); /* primary soft */
    color: var(--dibal-primary, #2563eb);
    border-radius: var(--dibal-radius-md, 10px);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.dibal-theme .jstree-proton .jstree-clicked {
    background: var(--dibal-primary, #2563eb);
    color: #ffffff;
    border-radius: var(--dibal-radius-md, 10px);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18);
}

/* Cuando se usa wholerow plugin ---------------------------- */

.dibal-theme .jstree-proton > .jstree-wholerow-ul .jstree-hovered,
.dibal-theme .jstree-proton > .jstree-wholerow-ul .jstree-clicked {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.dibal-theme .jstree-proton .jstree-wholerow {
    box-sizing: border-box;
}

.dibal-theme .jstree-proton .jstree-wholerow-hovered {
    background: rgba(37, 99, 235, 0.08);
}

.dibal-theme .jstree-proton .jstree-wholerow-clicked {
    background: var(--dibal-primary, #2563eb);
}

/* Deshabilitados ------------------------------------------ */

.dibal-theme .jstree-proton .jstree-disabled {
    background: transparent;
    color: var(--dibal-gray-500, #6b7280);
}

.dibal-theme .jstree-proton .jstree-disabled.jstree-hovered {
    background: transparent;
    box-shadow: none;
}

.dibal-theme .jstree-proton .jstree-disabled.jstree-clicked {
    background: var(--dibal-gray-100, #f3f4f6);
    color: var(--dibal-gray-500, #6b7280);
}

/* Búsqueda (highlight) ------------------------------------- */

.dibal-theme .jstree-proton .jstree-search {
    font-style: normal;
    font-weight: 600;
    color: var(--dibal-warning, #f59e0b);
    text-decoration: underline;
}

/* Checkbox integration ------------------------------------- */

.dibal-theme .jstree-proton.jstree-checkbox-no-clicked .jstree-clicked {
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.dibal-theme .jstree-proton.jstree-checkbox-no-clicked
    .jstree-clicked.jstree-hovered {
    background: rgba(37, 99, 235, 0.08);
    color: var(--dibal-primary, #2563eb);
}

/* Stripes (modo striped) ----------------------------------- */

.dibal-theme .jstree-proton > .jstree-striped {
    background-image: none;
    background-color: #f9fafb;
}

/* TAMAÑOS (mínimo para que se vea limpio en UIX) ----------- */

.dibal-theme .jstree-proton .jstree-node {
    min-height: 22px;
    line-height: 22px;
}

.dibal-theme .jstree-proton .jstree-anchor {
    line-height: 22px;
    height: 22px;
    padding: 0 6px;
}

/* ============================================================
 *  Context menu (vakata-context)
 * ============================================================ */

.dibal-theme .vakata-context,
.dibal-theme .vakata-context ul {
    margin: 0;
    padding: 4px;
    position: absolute;
    background: #ffffff;
    border: 1px solid var(--dibal-gray-200, #e5e7eb);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.22);
    border-radius: var(--dibal-radius-lg, 14px);
    z-index: 9999;
}

.dibal-theme .vakata-context ul {
    list-style: none;
}

/* Items ---------------------------------------------------- */

.dibal-theme .vakata-context li {
    list-style: none;
    display: block;
}

.dibal-theme .vakata-context li > a {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    text-decoration: none;
    width: 100%;
    color: var(--dibal-gray-800, #111827);
    white-space: nowrap;
    line-height: 1.4;
    border-radius: var(--dibal-radius-md, 10px);
    font-size: 0.85rem;
    text-shadow: none;
    box-shadow: none;
}

.dibal-theme .vakata-context li > a:hover,
.dibal-theme .vakata-context .vakata-context-hover > a {
    position: relative;
    background-color: rgba(37, 99, 235, 0.08);
    color: var(--dibal-primary, #2563eb);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.22);
}

/* Icono en el item ----------------------------------------- */

.dibal-theme .vakata-context li > a > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    margin-right: 0.5em;
    text-align: center;
}

/* Separador ------------------------------------------------ */

.dibal-theme .vakata-context .vakata-context-separator > a,
.dibal-theme .vakata-context .vakata-context-separator > a:hover {
    background: transparent;
    border: 0;
    height: 1px;
    min-height: 1px;
    max-height: 1px;
    padding: 0;
    margin: 4px 4px;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    border-top: 1px solid var(--dibal-gray-200, #e5e7eb);
}

/* Deshabilitado -------------------------------------------- */

.dibal-theme .vakata-context .vakata-contextmenu-disabled a,
.dibal-theme .vakata-context .vakata-contextmenu-disabled a:hover {
    color: var(--dibal-gray-400, #9ca3af);
    background-color: transparent;
    border: 0;
    box-shadow: none;
    cursor: default;
}

/* Atajo de teclado (si se usa) ---------------------------- */

.dibal-theme .vakata-context .vakata-contextmenu-shortcut {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--dibal-gray-400, #9ca3af);
    opacity: 0.8;
}

/* Marker & DnD --------------------------------------------- */

.dibal-theme #jstree-marker {
    border-left-color: var(--dibal-primary, #2563eb);
}

.dibal-theme #jstree-dnd {
    background: var(--dibal-gray-900, #0f172a);
    color: #f9fafb;
    padding: 4px 6px;
    border-radius: var(--dibal-radius-pill, 999px);
    box-shadow: 0 12px 25px rgba(15, 23, 42, 0.4);
    font-size: 0.8rem;
}

.dibal-theme #jstree-dnd .jstree-ok {
    background-color: var(--dibal-success, #16a34a);
}

.dibal-theme #jstree-dnd .jstree-er {
    background-color: var(--dibal-danger, #dc2626);
}

/* Responsive: mantener legible en móviles ------------------ */

@media (max-width: 768px) {
    .dibal-theme .jstree-proton {
        font-size: 0.9rem;
    }

    .dibal-theme .jstree-proton .jstree-node {
        min-height: 26px;
        line-height: 26px;
    }

    .dibal-theme .jstree-proton .jstree-anchor {
        height: 26px;
        line-height: 26px;
        padding: 0 8px;
    }

    .dibal-theme .vakata-context,
    .dibal-theme .vakata-context ul {
        border-radius: var(--dibal-radius-md, 10px);
    }
}