/* Editor · árbol de estructura y fraseología del carril izquierdo.
   Troceado de `compact_workspace.css` (lote C3). Carga en `head_extra` de
   editor/editor.html, ANTES del núcleo: ante una regla del núcleo con la misma
   especificidad, pierde. El orden entre módulos lo fija tests/css_manifest.py. */
/* ---- structure tree ---- */

/* Velo global de arrastre: subir es soltar sobre el editor. */
.editor-dropveil { position:fixed; inset:10px; z-index:140; display:flex; align-items:center; justify-content:center; border:3px dashed var(--ed-accent); border-radius:18px; background:color-mix(in srgb, var(--ed-active-bg) 88%, transparent); pointer-events:none; }
.editor-dropveil[hidden] { display:none; }
.editor-dropveil-inner { text-align:center; color:var(--ed-accent-dark); }
.editor-dropveil-inner svg { width:40px; height:40px; margin-bottom:8px; }
.editor-dropveil-inner strong { display:block; font-size:18px; font-weight:800; }
.editor-dropveil-inner p { margin:4px 0 0; font-size:13px; color:var(--insp-muted); }
/* Línea de ayuda: qué hace este panel, como el «Estructura y contenidos» del
   sistema anterior. */
.structure-intro { margin:0; padding:9px 14px 11px; color:var(--insp-muted); font:400 12.5px/1.55 var(--font-body); border-bottom:1px solid var(--insp-line-2); }

.structure-tree { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:0; display:flex; flex-direction:column; gap:0; }

/* Árbol en tres niveles, como un explorador de ficheros / árbol de IDE:
   indentación limpia con guías finas (línea vertical de 1px por nivel),
   filas compactas, SIN caja ni lámina rellena por ítem — el activo se marca
   con un acento fino (barra o borde de color) más un tinte muy sutil, nunca
   un bloque grande. Ritmo vertical apretado en los tres niveles.
   1 · Apartado: fila de una lista desplegable, separada por líneas.
   2 · Contenido: fila con barra de acento a la izquierda (gris → azul al
       activarse), colgada de la guía de indentación del apartado.
   3 · Fraseología: lista plana colgada de su propia guía; el resalte es del
       renglón pulsado, no de todo el bloque. */
.structure-tree-section { flex:0 0 auto; background:transparent; border:0; border-bottom:1px solid var(--ed-rail-line); border-radius:0; overflow:visible; }
.structure-tree-section:last-child { border-bottom:0; }
/* El apartado activo se marca con un lomo de color y el título en azul, NADA
   más: la banda tintada a todo lo ancho llenaba el panel de láminas y era lo
   que más se alejaba del diseño aprobado. */
.structure-tree-section.is-active > .structure-tree-row { background:transparent; box-shadow:inset 3px 0 0 var(--ed-accent); }
.structure-tree-row { display:flex; align-items:center; }
.structure-tree-toggle { flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:8px 4px 8px 11px; color:var(--insp-ink); text-align:left; background:transparent; border:0; cursor:pointer; transition:background .12s ease; }
.structure-tree-toggle:hover { background:rgba(0,111,192,.06); }
.structure-tree-section.is-active > .structure-tree-row .structure-tree-toggle:hover,
.structure-tree-content.is-active > .structure-tree-row .structure-tree-toggle:hover { background:transparent; }
.structure-tree-toggle > svg { flex:0 0 auto; width:14px; height:14px; color:#9aa7b8; transition:transform .18s ease, color .15s ease; }
/* Hoja del árbol: lo que no tiene nada dentro no lleva galón, pero conserva
   su hueco para que los rótulos sigan alineados en columna. */
.structure-tree-leaf { flex:0 0 auto; width:14px; }
.structure-tree-row.content-row .structure-tree-leaf { width:12px; }
.structure-tree-section.is-active > .structure-tree-row .structure-tree-toggle > svg,
.structure-tree-content.is-active > .structure-tree-row .structure-tree-toggle > svg { transform:rotate(90deg); color:var(--ed-accent); }
/* :not(.structure-tree-leaf) — imprescindible. Esta regla viste el ENVOLTORIO
   del rótulo, pero como selector de hijo directo también capturaba el hueco de
   las ramas sin hijos (que es otro span) y le daba flex:1: el hueco se comía
   el ancho de la fila y empujaba el texto contra el borde derecho. */
.structure-tree-toggle > span:not(.structure-tree-leaf) { display:flex; min-width:0; flex:1; align-items:center; justify-content:space-between; gap:8px; }
.structure-tree-toggle strong { min-width:0; overflow-wrap:anywhere; font:700 13.5px/1.35 var(--font-heading); white-space:normal; }
.structure-tree-section.is-active .structure-tree-toggle strong { color:var(--ed-accent-dark); }
/* El apartado ya no lleva contador: el número de contenidos no le decía nada
   a quien escribe (equipo lingüístico, 2026-07-31). Lo único que queda en esta
   posición es el multiplicador de un contenido que se repite («3×»). */
.structure-tree-toggle small { flex:0 0 auto; padding:0; color:var(--insp-muted); font:700 10.5px/1 var(--font-body); text-align:right; background:transparent; }
/* El estado normal no necesita etiqueta: todos los apartados se distribuyen
   automáticamente. «Sin ubicar» solo aparece después de quitarlos de forma
   explícita desde el bocadillo lateral. */
.structure-anchor-state { display:inline-flex; align-items:center; gap:4px; font-weight:600 !important; }
.structure-anchor-state[hidden] { display:none !important; }
.structure-anchor-state::before { content:""; width:6px; height:6px; border-radius:50%; background:#a8b3c1; }
.structure-anchor-pin { flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; margin-right:6px; padding:0; color:#7c8999; background:transparent; border:0; border-radius:7px; opacity:0; pointer-events:none; cursor:pointer; transition:opacity .12s ease, color .12s ease, background .12s ease; }
.structure-anchor-pin:focus-visible,
.structure-tree-section.is-unplaced .structure-anchor-pin { opacity:1; pointer-events:auto; }
.structure-anchor-pin:hover { color:var(--ed-accent); background:var(--ed-active-bg); }
.structure-anchor-pin svg { width:14px; height:14px; }
/* Ocultar/mostrar los apartados del folio. Ya no es un icono suelto en la
   cabecera del carril: lleva rotulo, porque un simbolo solo no se adivinaba
   (Sara, 12/08). Ocupa su propia fila porque junto al titulo no cabe. */
/* Ocultar apartados, al PIE del carril: el arbol es `flex:1` y se desplaza, asi
   que esto queda anclado abajo, separado por un filete.
   Sin el recuadro azul del estado activo. Lo tuvo mientras encabezaba el panel
   y ahi era donde molestaba: «queda demasiado visible... no se si se le da
   demasiada importancia visual» (Sara, 02/09). El estado no se pierde, porque
   nunca lo llevaba el color: lo dice el propio rotulo, que cambia entre
   «Ocultar apartados» y «Mostrar apartados», y `aria-pressed` para quien no lo
   ve. */
.structure-guides-toggle { display:flex; align-items:center; gap:8px; flex:none; width:calc(100% - 24px); margin:0 12px; padding:9px 10px; border:0; border-top:1px solid var(--insp-line-2); border-radius:0; background:transparent; font:inherit; font-size:12px; font-weight:600; text-align:left; color:var(--insp-muted); cursor:pointer; }
.structure-guides-toggle svg { flex:none; width:16px; height:16px; }
.structure-guides-toggle:hover { color:var(--insp-ink); }
.structure-guides-toggle[aria-pressed="false"] { color:#9aa7b8; }
/* Insertar (+): solo al posar el cursor sobre SU fila. Dejarlo fijo en las
   filas activas llenaba el panel de cruces grandes permanentes. */

/* Desplegado animado, como el editor anterior: el contenedor pasa de 0fr a 1fr
   y el .acc-inner (overflow:hidden) recorta el contenido mientras crece. */
.structure-tree-contents, .structure-tree-phrases { display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s ease; }
.structure-tree-contents.is-open, .structure-tree-phrases.is-open { grid-template-rows:1fr; }
.structure-tree-contents > .acc-inner, .structure-tree-phrases > .acc-inner { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
@media (prefers-reduced-motion: reduce) { .structure-tree-contents, .structure-tree-phrases { transition:none; } }
/* Contenidos (nivel 2): SIN lámina ni tarjeta — el envoltorio solo aporta una
   guía de indentación fina (border-left de 1px) heredera de la fila del
   apartado, como el conector de un árbol de fichero. El resaltado de fila
   (hover/activo) es a sangre, igual que en el apartado (nivel 1): un tinte de
   fondo a todo el ancho de la fila y una franja fina en el borde, no una
   tarjeta separada con su propio margen y borde de color. Plegado no deja
   hilo visible: a 0fr colapsa a 0 (recortado por overflow:hidden), el respiro
   lo dan los márgenes de los propios ítems. */
/* Sin guías verticales: la jerarquía la da la sangría, como en el diseño
   aprobado. Las líneas de árbol de IDE añadían ruido en un panel de tres
   niveles cortos. */
/* Los contenidos son una INDICACIÓN de qué va en ese apartado, no ítems que
   se insertan: en el arText original vivían dentro de un bloque de aviso
   azul. Aquí eso se traduce en un lavado tenue que enmarca la zona sin
   dibujar una caja, y en texto de peso normal y tono apagado. Lo que sí se
   inserta —la fraseología— vuelve al blanco para despegarse de la
   indicación. */
.structure-tree-contents > .acc-inner { gap:0; padding:2px 0; margin:0; border-left:0; background:#f6fafe; }
.structure-tree-contents > .acc-inner > :last-child { margin-bottom:2px; }
.structure-tree-content { flex:0 0 auto; }
.structure-tree-content .structure-tree-row { border-radius:0; transition:background .12s ease, box-shadow .12s ease; }
.structure-tree-content:hover .structure-tree-row { background:rgba(0,111,192,.045); }
.structure-tree-content.is-active .structure-tree-row { background:transparent; }
.structure-tree-content.is-active .structure-tree-toggle > svg { color:var(--ed-accent); }
.structure-tree-row.content-row .structure-tree-toggle { padding:6px 4px 6px 30px; }
.structure-tree-row.content-row .structure-tree-toggle > svg { width:12px; height:12px; }
.structure-tree-row.content-row .structure-tree-toggle strong { font:400 13px/1.45 var(--font-body); color:var(--insp-muted); }
.structure-tree-content.is-active .structure-tree-toggle strong { color:var(--insp-ink); font-weight:600; }

/* Fraseología (nivel 3): lista plana colgada de su propia guía fina (sin
   lámina tintada ni radio grande); cada frase se inserta al pulsarla y solo
   ESE renglón se resalta al pasar el cursor. */
.structure-tree-phrases > .acc-inner { gap:0; margin:0; padding:0; border-left:0; }
.structure-tree-phrases > .acc-inner > :last-child { margin-bottom:3px; }
/* Las frases se leen como citas insertables: serif itálica, sangradas bajo su
   contenido, con el «+» asomando a la derecha solo al pasar el cursor. */
.structure-tree-phrases .phraseology-btn { display:flex; align-items:flex-start; gap:8px; min-height:0; padding:5px 12px 5px 44px; color:#3b4a5e; font:italic 400 13.5px/1.5 var(--ed-doc-font); text-align:left; background:var(--bg-card); border:0; border-radius:0; cursor:pointer; transition:background .12s ease, color .12s ease; }
.structure-tree-phrases .phraseology-btn:hover { color:var(--ed-accent-dark); background:var(--ed-active-bg); }
/* `pre-line`: la fraseología legacy trae saltos con significado (bloques de
   firma, enumeraciones a)/b)) que el importador convierte de `<br>` en `\n`.
   Sin esto el salto se colapsaría y las dos líneas se leerían pegadas. Solo
   preserva los saltos: el resto del espacio en blanco sigue colapsando. */
.structure-tree-phrases .phraseology-btn span { flex:1; min-width:0; white-space:pre-line; }
/* El «+» está SIEMPRE: es lo que distingue una frase insertable de un rótulo
   que solo se lee. Atenuado en reposo para no gritar en una lista larga, a
   plena tinta y en círculo al posar el cursor. */
.structure-tree-phrases .phraseology-btn svg { flex:0 0 auto; width:13px; height:13px; margin-top:4px; color:var(--ed-accent); opacity:.5; border-radius:50%; box-shadow:0 0 0 1px transparent; transition:opacity .12s ease, box-shadow .12s ease; }
.structure-tree-phrases .phraseology-btn:hover svg,
.structure-tree-phrases .phraseology-btn:focus-visible svg { opacity:1; box-shadow:0 0 0 1px currentColor; }