/* ============================================================
   Arbol jsTree en modo enriquecido (rich).
   Aplica al mapa del dashboard (#dashboard-tree) y a cualquier
   TreeView con EnableRichNodes (clase .tree-rich, añadida por el
   componente TreeView), p.ej. el arbol causa-efecto del detalle
   de indicador. Hoja global enlazada en App.razor — NO SCSS scoped.

   Estructura de cada fila tras decorateNodes() (treeview.js):
     [ocl]  <a.jstree-anchor>
              <i.jstree-icon.tree-node-chip>  -> chip + icono SVG
              <span.tree-node-label>          -> titulo truncable
              <span.tree-node-semaforo>       -> semaforo de estado
            </a>
   ============================================================ */

/* --- Fila: altura comoda y semaforo de hover a juego --- */
#dashboard-tree .jstree-node,
.tree-rich .jstree-node {
    min-height: 32px;
    line-height: 32px;
}

#dashboard-tree .jstree-wholerow,
.tree-rich .jstree-wholerow {
    height: 32px;
}

#dashboard-tree .jstree-ocl,
.tree-rich .jstree-ocl {
    vertical-align: middle;
}

/* --- Ancla: contenedor flex de toda la fila --- */
#dashboard-tree .jstree-anchor,
.tree-rich .jstree-anchor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: calc(100% - 24px);
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    vertical-align: middle;
    border-radius: 6px;
    overflow: hidden;
}

/* --- Chip del icono: fondo tenue (color en linea desde JS) --- */
#dashboard-tree .jstree-anchor > .jstree-icon.tree-node-chip,
.tree-rich .jstree-anchor > .jstree-icon.tree-node-chip {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-image: none;
    overflow: visible;
}

/* --- Titulo del nodo: trunca con elipsis si no cabe --- */
#dashboard-tree .tree-node-label,
.tree-rich .tree-node-label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.1px;
}

/* Nodo raiz (el propio dashboard / el indicador analizado): mas peso para marcar jerarquia */
#dashboard-tree > .jstree-container-ul > .jstree-node > .jstree-anchor .tree-node-label,
.tree-rich > .jstree-container-ul > .jstree-node > .jstree-anchor .tree-node-label {
    font-weight: 600;
}

/* --- Semaforo de estado: anclado al final del titulo --- */
#dashboard-tree .tree-node-semaforo,
.tree-rich .tree-node-semaforo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sin estado => no se reserva hueco (adios al efecto escalonado) */
#dashboard-tree .tree-node-semaforo:empty,
.tree-rich .tree-node-semaforo:empty {
    display: none;
}

/* ============================================================
   Rayado de filas (TreeView EnableStripedRows="true").
   Alterna fondo blanco/gris contando en el orden VISUAL global del arbol
   (clase "tree-row-alt", calculada en JS por applyStripes() en
   treeview.js), no por nth-child: nth-child cuenta entre hermanos y
   reinicia en cada nivel, por lo que con varios niveles dejaba de
   alternar correctamente. Cubre ambos casos: con plugin wholerow (fondo
   en .jstree-wholerow) y sin el (fondo en el propio .jstree-anchor).
   Excluye explicitamente hover/clicked para no pisar esos estados sea
   cual sea el orden de carga de las hojas.
   ============================================================ */
.tree-striped .jstree-node.tree-row-alt > .jstree-wholerow:not(.jstree-wholerow-hovered):not(.jstree-wholerow-clicked) {
    background-color: #f5f6f8;
}

.tree-striped .jstree-node.tree-row-alt > .jstree-anchor:not(.jstree-hovered):not(.jstree-clicked) {
    background-color: #f5f6f8;
}

/* ============================================================
   Mapa de artefactos (ApexTree) — DashboardArtifactMapEditor
   Se dibuja en horizontal: la raiz a la izquierda y la
   ramificacion hacia abajo. wizard-artifact-tree.js dimensiona
   el SVG al tamano real del contenido por la escala vigente, y
   es este contenedor el que hace scroll; asi el arbol no se
   comprime hasta volverse ilegible en cuadros de mando grandes.
   ============================================================ */
.artifact-map-canvas {
    min-height: 240px;
    max-height: 72vh;
    overflow: auto;
}

/* El SVG lleva width/height en px puestos desde JS: que ningun
   estilo heredado (p.ej. svg { max-width: 100% }) los recorte. */
.artifact-map-canvas svg {
    display: block;
    max-width: none;
}

/* Boton +/- de plegado: mas contraste que el circulo blanco por
   defecto de ApexTree, que sobre fondo claro casi no se ve. */
.artifact-map-canvas g[data-self] > circle {
    stroke: var(--ins-border-color, #dee2e6);
    stroke-width: 1;
}

/* ============================================================
   Filtro de la vista en arbol (categorias / tipos de entidad)
   ============================================================ */
/* Ancho fijo del multi-select de Choices en la cabecera (derecha), como los
   filtros de las listas; no crece para no descolocar el resto de la cabecera. */
.tree-filter-wrapper {
    width: 280px;
    max-width: 100%;
}

.tree-filter-wrapper .choices,
.tree-filter-wrapper .choices__inner {
    margin-bottom: 0;
}

/* ============================================================
   Arbol de causa raiz de No Conformidades (cause-tree.js).
   Mismo motor ApexTree que el mapa del cuadro de mando; el SVG
   lleva width/height en px desde JS y el contenedor hace scroll.
   El literal de rol y el badge van ENCIMA de la tarjeta (caja de
   nodo transparente + tarjeta interior con borde).
   ============================================================ */
.cause-tree-canvas {
    min-height: 120px;
    max-height: 60vh;
    overflow: auto;
}

.cause-tree-canvas svg {
    display: block;
    max-width: none;
}

/* Nodo: la caja ApexTree (transparente) contiene la tarjeta CENTRADA vertical-
   mente (para que los conectores y el toggle cuadren con ella) y, ENCIMA, la
   cabecera con el literal de rol o el badge (que lo sustituye en la causa raiz). */
.cause-tree-node {
    position: relative;
    width: 100%;
    height: 100%;
}

.cause-tree-header {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(50% + 26px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
}

.cause-tree-role {
    font-size: 9.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ins-secondary-color, #6c757d);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.cause-tree-badge {
    font-size: 11.5px;
    font-weight: 600;
    padding: 0.35em 0.6em;
}

.cause-tree-card {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    display: flex;
    align-items: center;
    padding: 6px 26px 6px 10px;
    border: 1px solid var(--ins-border-color, #dee2e6);
    border-radius: 8px;
    background: var(--ins-card-bg, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cause-tree-name {
    flex: 1 1 auto;
    min-width: 0;
}

/* Toggle +/- a la derecha del nodo (estilo mapa de cuadros de mando). */
.cause-tree-toggle {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--ins-primary, #3b82f6);
    background: var(--ins-card-bg, #fff);
    border: 1px solid var(--ins-border-color, #dee2e6);
    border-radius: 50%;
    cursor: pointer;
}

.cause-tree-toggle:hover {
    border-color: var(--ins-primary, #3b82f6);
    background: var(--ins-primary, #3b82f6);
    color: #fff;
}

/* Slot punteado "anadir por que": tarjeta centrada como las demas. */
.cause-tree-slot {
    cursor: pointer;
}

.cause-tree-card-slot {
    justify-content: center;
    padding: 6px 10px;
    color: var(--ins-primary, #3b82f6);
    font-size: 12px;
    font-weight: 500;
    border: 2px dashed rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.05);
    box-shadow: none;
}

.cause-tree-slot:hover .cause-tree-card-slot {
    background: rgba(59, 130, 246, 0.12);
}

/* Caja punteada "anadir problema" (nueva causa), fuera del canvas ApexTree. */
.cause-tree-add-problem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ins-primary, #3b82f6);
    border: 2px dashed rgba(59, 130, 246, 0.55);
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.05);
    cursor: pointer;
}

.cause-tree-add-problem:hover {
    background: rgba(59, 130, 246, 0.12);
}

/* Popover de descripcion del nodo (modo visualizacion): lleva el acento (borde verde)
   que lo diferencia; el nodo del arbol se ve igual que el resto. */
.cause-tree-popover {
    border: 1px solid var(--ins-primary, #3b82f6);
    border-left: 3px solid var(--ins-primary, #3b82f6);
    background: var(--ins-card-bg, #fff);
    font-size: 12.5px;
}

.cause-tree-popover-desc {
    max-height: 240px;
    overflow: auto;
}

.cause-tree-popover-desc :last-child {
    margin-bottom: 0;
}

/* Tarjeta seleccionable de causa (selector en la Accion Correctiva). */
.cause-select-card {
    cursor: pointer;
    border: 2px solid var(--ins-border-color, #dee2e6);
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cause-select-card:hover {
    border-color: var(--ins-primary, #3b82f6);
}

.cause-select-card.selected {
    border-color: var(--ins-primary, #3b82f6);
    box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.25);
}