/**
 * Componente: Tree Sections
 *
 * Estilos para las clases que gestiona
 * assets/js/shared/tree-sections.js (LTNAllage.TreeSections):
 * mostrar/ocultar data-tree-children según la clase 'expanded' de su
 * data-tree-node padre, indentación por nivel (automática por
 * anidamiento real del marcado, sin necesidad de calcular la
 * profundidad en PHP/JS), y el icono de flecha del toggle — mismo
 * dashicon y misma rotación que ya usa .doc-dir-header en el resto del
 * proyecto (ver assets/css/sidebar.css), reutilizado aquí en vez de
 * inventar un icono nuevo.
 *
 * Componente global (assets/css/shared/), no específico de ningún
 * módulo: cualquier consumidor futuro de tree-sections.js hereda este
 * mismo acabado visual automáticamente, sin definir su propio CSS de
 * árbol (empieza en allage-categorias, Pieza G del planning
 * docs/roadmap/_archivo/gestion-completa-categorias.md — ver
 * docs/roadmap/DEUDA-CATALOGO-008.md para el resto de módulos
 * candidatos a compartirlo en el futuro).
 *
 * Acabado visual (esta pieza) — replica valores exactos ya en
 * producción para el mismo concepto de "grupo colapsable" en el
 * sidebar admin, no inventa ningún color/sombra/radio nuevo:
 *
 * - Nivel 1 (data-tree-node hijo directo de data-tree-sections):
 *   tratamiento completo de tarjeta, calcado de .doc-dir-header
 *   (assets/css/sidebar.css:485-505 — fondo, borde, sombra, radio,
 *   tipografía) y su :hover (sidebar.css:507-511).
 * - Nivel 2 en adelante (cualquier data-tree-node dentro de un
 *   data-tree-children): tratamiento plano, calcado de .tab-link--child
 *   (sidebar.css:980-1010 — sin fondo/sombra/radio propios, solo un
 *   border-left que se tiñe de --ltn-terra al hover, padding y
 *   font-size menores). Sin diferenciación adicional entre nivel 2,
 *   nivel 3, nivel 4... — mismo criterio que ya usa el único
 *   precedente real de 2 niveles del proyecto
 *   (.tab-link-group/.tab-link--parent/.tab-link-children, también en
 *   sidebar.css), que tampoco distingue más allá de "padre" vs. "el
 *   resto".
 * - El contenedor data-tree-children que cuelga directamente de un
 *   nodo de nivel 1 (es decir, el que agrupa visualmente todo el
 *   "nivel 2 en adelante" de esa rama) lleva el mismo lavado sutil de
 *   fondo que .tab-link-children (sidebar.css:954-959,
 *   rgba(0,0,0,0.05)) — decisión propia: se aplica SOLO ahí (selector
 *   data-tree-sections > [data-tree-node] > [data-tree-children]), no
 *   en cada data-tree-children anidado más profundo, para que ese
 *   lavado no se acumule visualmente capa sobre capa a medida que crece
 *   la profundidad del árbol (rgba semi-transparentes anidados se
 *   oscurecen entre sí) — con un único lavado ya queda distinguido el
 *   bloque completo de "hijos y descendientes" del nodo raíz visual.
 * - Sin cambio de fondo en el estado 'expanded' en sí (confirmado por
 *   diagnóstico: no existe en ningún sitio real del proyecto) — solo
 *   se mantiene la rotación de flecha ya existente.
 * - Sin ningún estilo de selección/nodo activo aquí — sigue sin ser
 *   responsabilidad de este componente ni de tree-sections.js, es del
 *   módulo consumidor (ya documentado en la pieza anterior).
 * - Distinción nivel 1 / nivel 2+ resuelta con combinadores CSS puros
 *   sobre la jerarquía real ya generada por
 *   render_category_edit_tree() — sin ninguna clase de profundidad
 *   nueva en el HTML ni cambio de marcado.
 * - Sin `!important`: a diferencia de sidebar.css (que lo usa para
 *   ganarle especificidad a otras reglas ya existentes sobre las
 *   mismas clases .tab-link/.doc-dir-header), los selectores
 *   `data-tree-*` de este archivo son exclusivos de este componente y
 *   no compiten con ninguna otra regla del proyecto — no hace falta.
 *
 * Revisado (Pieza G.5.c — mecánica de arrastre VISUAL, sin backend):
 * `.dragging` (en el `data-tree-node` que se arrastra) atenúa su
 * cabecera — mismo indicador estándar de "esto se está moviendo" que
 * cualquier interfaz de arrastre. `.drag-over` (en el `data-tree-node`
 * sobre el que se sostiene el arrastre en cada momento) usa un
 * `outline` discontinuo en `--ltn-terra` — deliberadamente NO el verde
 * ya usado por `.expanded`/`:hover` de este mismo archivo, para que
 * "este es el destino del arrastre ahora mismo" nunca se confunda con
 * "este grupo está expandido" o "el ratón está encima" en un vistazo
 * rápido. `outline` en vez de `border`: no desplaza ningún píxel del
 * layout de alrededor (a diferencia de un border nuevo, que sumaría a
 * los ya existentes en el propio nivel 1) — `outline-offset: -2px` lo
 * mete hacia dentro del propio borde de la cabecera en vez de crecer
 * hacia fuera.
 *
 * Revisado (Pieza G.5.f — agarradera de reordenamiento, cierra toda la
 * Pieza G.5): `[data-tree-node-handle]` (dashicons-menu) usa
 * `cursor: grab` en reposo y `cursor: grabbing` mientras el nodo que
 * la contiene se está arrastrando (`.dragging`, misma clase ya
 * existente de la Pieza G.5.c — no se distingue si el arrastre en
 * curso es de reordenar o de reparenting para este cursor, ambos
 * significan igualmente "esta fila está en movimiento"). El resto de
 * la cabecera (`[data-tree-node-header]`, zona de reparenting) pasa su
 * `cursor` de `pointer` a `grab` — indicador puramente visual, sin
 * ningún cambio de comportamiento (decisión ya tomada, ver
 * tree-sections.js) — el toggle y el "+" mantienen su propio
 * `cursor: pointer` explícito (ver sus reglas más abajo, sin cambios),
 * que gana sobre el valor heredado de la cabecera. `.reorder-over-before`/
 * `.reorder-over-after` (en el `data-tree-node` hermano sobre el que
 * se sostiene un arrastre de reordenar) pintan una línea horizontal
 * (`border-top`/`border-bottom`) en el mismo color que `.drag-over`
 * (`--ltn-terra`, mismo lenguaje visual de "arrastre en curso") pero
 * como `border` en vez de `outline` — aquí debe leerse como una línea
 * de INSERCIÓN entre elementos, no como un contorno alrededor de un
 * nodo completo. Colocadas al final del archivo a propósito: con la
 * misma especificidad que las reglas de nivel 1/nivel 2+ de más abajo,
 * el orden de aparición en la hoja decide qué border-top/border-bottom
 * gana — deben ir DESPUÉS de ambas secciones de nivel para funcionar
 * en cualquier profundidad del árbol.
 *
 * Revisado (Pieza G.4.a — icono de creación): `[data-tree-node-add]`
 * (dashicons-plus-alt2, contexto admin — Dashicons solo está prohibido
 * en frontend público, ver docs/diseño/iconos-frontend.md) se empuja al
 * extremo derecho de la cabecera con `margin-left: auto`, separado del
 * toggle (extremo izquierdo) y de la etiqueta por todo el espacio
 * disponible — mismo tamaño fijo de 20px que ya trae `.dashicons` de
 * WP core (sin sobreescribir ancho/alto propios, igual que el toggle),
 * así que convive sin descompensar ninguno de los dos tratamientos de
 * cabecera (tarjeta en nivel 1, plano en nivel 2+). Atenuado por
 * defecto (`opacity: 0.6`) y a opacidad completa al pasar el ratón por
 * cualquier punto de la cabecera (no solo sobre el propio icono) — para
 * no competir visualmente con el toggle mientras no se está
 * interactuando con la fila.
 *
 * @package Allage
 * @since   1.0.0
 */

[data-tree-node-header] {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Pieza G.5.f: antes 'pointer' -- indicador visual de que la
       cabecera (fuera de la agarradera/toggle/"+", que fijan su propio
       cursor) es arrastrable para reparenting, sin cambiar ningún
       comportamiento. */
    cursor: grab;
    transition: var(--ltn-transition, all 0.2s ease);
    box-sizing: border-box;
}

/* Agarradera de reordenamiento (Pieza G.5.f) -- extremo izquierdo,
   antes del toggle. Separada del resto de la cabecera por el mismo
   gap: 6px que ya distribuye toggle/label/"+", sin divisor visual
   adicional. */
[data-tree-node-handle] {
    cursor: grab;
    flex-shrink: 0;
}

[data-tree-node].dragging > [data-tree-node-header] > [data-tree-node-handle] {
    cursor: grabbing;
}

/* data-tree-no-drag en la raíz (F2-9 de docs/roadmap/filtros-catalogo.md):
   árbol sin arrastre -- la cabecera deja de mostrar el cursor de
   arrastrar. */
[data-tree-sections][data-tree-no-drag] [data-tree-node-header] {
    cursor: default;
}

/* data-tree-reorder-only en la raíz: solo se arrastra desde la
   agarradera; el resto de la cabecera deja de mostrar el cursor de
   arrastrar. La agarradera conserva el suyo (regla de arriba). */
[data-tree-sections][data-tree-reorder-only] [data-tree-node-header] {
    cursor: default;
}

/* Agarradera con el foco del teclado (↑/↓ reordenan): mismo anillo que
   el resto de controles del proyecto. */
[data-tree-node-handle]:focus-visible {
    outline: 2px solid var(--ltn-green-primary, #506727);
    outline-offset: 2px;
    border-radius: var(--ltn-border-radius-sm, 4px);
}

[data-tree-node-toggle] {
    cursor: pointer;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

[data-tree-node].expanded > [data-tree-node-header] > [data-tree-node-toggle] {
    transform: rotate(90deg);
}

[data-tree-node-label] {
    cursor: pointer;
}

/* "+" de creación (Pieza G.4.a) -- siempre presente, empujado al
   extremo derecho de la cabecera (margin-left: auto) para quedar bien
   separado del toggle y no solapar su área clicable. */
[data-tree-node-add] {
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

[data-tree-node-header]:hover [data-tree-node-add] {
    opacity: 1;
}

[data-tree-children] {
    display: none;
    padding-left: var(--ltn-spacing-lg, 24px);
}

[data-tree-node].expanded > [data-tree-children] {
    display: block;
}

/* Arrastre (Pieza G.5.c) -- mecánica visual pura, sin backend todavía.
   Selectores válidos para cualquier nivel (nivel 1 tarjeta, nivel 2+
   plano) a propósito, sin distinguir entre ellos -- el arrastre se
   comporta igual en toda la jerarquía. */
[data-tree-node].dragging > [data-tree-node-header] {
    opacity: 0.4;
}

[data-tree-node].drag-over > [data-tree-node-header] {
    outline: 2px dashed var(--ltn-terra, #D57B4E);
    outline-offset: -2px;
}

/* ==========================================================================
   Nivel 1 — tratamiento de tarjeta, calcado de .doc-dir-header
   (assets/css/sidebar.css:485-511)
   ========================================================================== */

[data-tree-sections] > [data-tree-node] > [data-tree-node-header] {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 6px 12px;
    justify-content: flex-start;
    background: white;
    border: 1px solid var(--ltn-green-accent, #9ACD32);
    border-radius: var(--ltn-border-radius, 8px);
    box-shadow: var(--ltn-shadow-sm, 0 2px 4px rgba(80, 103, 39, 0.1));
    font-size: 14px;
    font-weight: 600;
    color: var(--ltn-green-dark, #3e5120);
}

[data-tree-sections] > [data-tree-node] > [data-tree-node-header]:hover {
    background: var(--ltn-green-light, #BACD70);
    border-color: var(--ltn-green-primary, #506727);
    color: var(--ltn-green-dark, #3e5120);
}

/* Lavado sutil del bloque de descendientes de un nodo de nivel 1 — solo
   aquí, nunca en un data-tree-children anidado más profundo (ver
   docblock de arriba, evita el oscurecimiento acumulado). */
[data-tree-sections] > [data-tree-node] > [data-tree-children] {
    background: rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Nivel 2 en adelante — tratamiento plano, calcado de .tab-link--child
   (assets/css/sidebar.css:980-1010)
   ========================================================================== */

[data-tree-children] [data-tree-node] > [data-tree-node-header] {
    height: auto;
    min-height: auto;
    max-height: none;
    padding: 8px 15px;
    font-size: 13px;
    border-left: 2px solid transparent;
    border-radius: 0;
}

[data-tree-children] [data-tree-node] > [data-tree-node-header]:hover {
    border-left-color: var(--ltn-terra, #D57B4E);
}

/* ==========================================================================
   Indicador de posición de destino al reordenar (Pieza G.5.f) --
   deliberadamente al FINAL del archivo: misma especificidad que las
   reglas de nivel 1/nivel 2+ de arriba, el border-top/border-bottom de
   aquí debe ganar el empate de cascada en cualquier profundidad.
   ========================================================================== */

[data-tree-node].reorder-over-before > [data-tree-node-header] {
    border-top: 3px solid var(--ltn-terra, #D57B4E);
}

[data-tree-node].reorder-over-after > [data-tree-node-header] {
    border-bottom: 3px solid var(--ltn-terra, #D57B4E);
}