/* Editor · separadores de apartado sobre el texto.
   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. */
/* ═══════════════════════════════════════════════════════════════════════
   ESTRUCTURA: separador de apartado sobre el texto
   Cada apartado se anuncia con una regla discontinua que enmarca su nombre y
   lo deja centrado sobre el párrafo donde empieza. La papelera va al extremo
   derecho: es la acción destructiva y conviene lejos del rótulo, que es el que
   se pulsa para navegar.

   NO se mide nada. El separador es una decoración de ProseMirror colgada del
   párrafo, y lo coloca el navegador solo, así que sigue al texto al editar, al
   desplazar y al cambiar el tamaño de lectura sin que nadie recalcule.

   El contexto de posicionamiento es la COLUMNA de escritura (`.ProseMirror`),
   no el párrafo ancla. Un separador es una frontera del documento y mide
   siempre lo mismo, empiece el apartado en un párrafo suelto o en un punto de
   una lista anidada; colgado del párrafo se estrechaba y se corría a la derecha
   con la sangría del `li`, y quedaba desalineado con los demás apartados.

   Los dos ejes se resuelven por separado, y sin medir ninguno:
   - horizontal: `left:0; right:0` sobre la columna, así que la sangría del
     ancla —tenga la profundidad que tenga— no le llega;
   - vertical: sin `top` ni `bottom`, el navegador usa la POSICIÓN ESTÁTICA del
     widget, que está dentro de su párrafo ancla; `translateY(-100%)` lo sube
     su propia altura y lo deja justo encima de la primera línea.

   La separación entre dos apartados contiguos tampoco se calcula: es el
   `margin-top` del párrafo. `max()` resuelve de una vez el aire tipográfico que
   un comienzo de apartado quiere igualmente y el hueco mínimo en píxeles para
   que dos separadores no se toquen cuando la letra es pequeña.
   ═══════════════════════════════════════════════════════════════════════ */
[data-public-editor] [data-editor-surface] .ProseMirror { position: relative; }
[data-public-editor] [data-structure-anchor] {
  margin-top: max(1.6em, 38px);
}
[data-public-editor] [data-structure-anchor]:first-child { margin-top: 22px; }

.artext-structure-chip {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  display: flex;
  align-items: center;
  padding: 0 0 3px;
  color: #6f7f90;
  font: 500 11px/1.5 var(--insp-font, system-ui, sans-serif);
  white-space: nowrap;
  user-select: none;
}

.artext-structure-chip::before,
.artext-structure-chip::after {
  content: "";
  flex: 1;
  border-top: 1px dashed currentColor;
  opacity: .4;
  pointer-events: none;
}
.artext-structure-chip::before { margin-right: 10px; }
.artext-structure-chip::after { margin-left: 10px; }

.artext-structure-chip-name {
  overflow: hidden;
  max-width: 72%;
  padding: 0;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  background: none;
  border: 0;
  cursor: pointer;
}

/* `order` la manda al final de la fila, detrás de la regla derecha. */
.artext-structure-chip-remove {
  display: grid;
  order: 1;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  padding: 0;
  color: #8291a1;
  background: none;
  border: 0;
  border-radius: 4px;
  opacity: .36;
  cursor: pointer;
}
.artext-structure-chip-remove svg { width: 12px; height: 12px; }
.artext-structure-chip:hover .artext-structure-chip-remove { opacity: .7; }
.artext-structure-chip-remove:hover { color: #8f2f38; background: rgb(255 247 247 / 92%); opacity: 1; }

/* Estados: reposo gris azulado, foco azul oscuro, apartado activo azul de
   marca. El color es del ESTADO, no del apartado: hay un solo acento. */
.artext-structure-chip:hover,
.artext-structure-chip:focus-within { color: var(--ed-accent-dark, #005596); }
[data-public-editor] .is-active-section .artext-structure-chip { color: var(--ed-accent, #006fc0); }
.artext-structure-chip:hover::before,
.artext-structure-chip:hover::after,
.artext-structure-chip:focus-within::before,
.artext-structure-chip:focus-within::after,
[data-public-editor] .is-active-section .artext-structure-chip::before,
[data-public-editor] .is-active-section .artext-structure-chip::after { opacity: .72; }

@media print {
  .artext-structure-chip { display: none !important; }
}