diff --git a/frontend/src/i18n/locales/en/common.json b/frontend/src/i18n/locales/en/common.json
index d144b4d..64b7433 100644
--- a/frontend/src/i18n/locales/en/common.json
+++ b/frontend/src/i18n/locales/en/common.json
@@ -93,6 +93,18 @@
       "resultCount_one": "{{count}} result",
       "resultCount_other": "{{count}} results"
     },
+    "citationChip": {
+      "openTitle": "{{label}} — open preview",
+      "popoverAria": "Citation preview for {{label}}",
+      "articleLabel": "Article {{num}}",
+      "previewError": "Could not load preview.",
+      "openLaw": "Open law"
+    },
+    "emptyState": {
+      "template": "Template",
+      "ai": "AI assistant",
+      "citation": "Citation"
+    },
     "templates": {
       "dialogAria": "Document templates",
       "title": "Templates",
@@ -107,6 +119,9 @@
       "apply": "Apply",
       "deleteAria": "Delete template {{name}}",
       "delete": "Delete",
+      "deleteConfirmTitle": "Delete template",
+      "deleteConfirmMessage": "Delete the template \"{{name}}\"? This cannot be undone.",
+      "applyNewDocument": "Apply in new document",
       "variable": "variable",
       "variables": "variables",
       "noVariables": "No variables"
diff --git a/frontend/src/i18n/locales/es/common.json b/frontend/src/i18n/locales/es/common.json
index c561bf4..6613f84 100644
--- a/frontend/src/i18n/locales/es/common.json
+++ b/frontend/src/i18n/locales/es/common.json
@@ -93,6 +93,18 @@
       "resultCount_one": "{{count}} resultado",
       "resultCount_other": "{{count}} resultados"
     },
+    "citationChip": {
+      "openTitle": "{{label}} — abrir vista previa",
+      "popoverAria": "Vista previa de la cita {{label}}",
+      "articleLabel": "Artículo {{num}}",
+      "previewError": "No se pudo cargar la vista previa.",
+      "openLaw": "Abrir ley"
+    },
+    "emptyState": {
+      "template": "Plantilla",
+      "ai": "Asistente IA",
+      "citation": "Cita"
+    },
     "templates": {
       "dialogAria": "Plantillas de documento",
       "title": "Plantillas",
@@ -107,6 +119,9 @@
       "apply": "Aplicar",
       "deleteAria": "Eliminar plantilla {{name}}",
       "delete": "Eliminar",
+      "deleteConfirmTitle": "Eliminar plantilla",
+      "deleteConfirmMessage": "¿Eliminar la plantilla «{{name}}»? Esta acción no se puede deshacer.",
+      "applyNewDocument": "Aplicar en documento nuevo",
       "variable": "variable",
       "variables": "variables",
       "noVariables": "Sin variables"
diff --git a/frontend/src/pages/EditorPage.test.tsx b/frontend/src/pages/EditorPage.test.tsx
index 8f13bbd..fb99b44 100644
--- a/frontend/src/pages/EditorPage.test.tsx
+++ b/frontend/src/pages/EditorPage.test.tsx
@@ -63,6 +63,8 @@ vi.mock('@tiptap/react', () => ({
     onUpdateHandler = opts.onUpdate;
     return mockEditor;
   },
+  useEditorState: ({ selector }: { selector: (snap: { editor: { isEmpty: boolean } }) => unknown }) =>
+    selector({ editor: { isEmpty: true } }),
   EditorContent: () => <div data-testid="editor-content" />,
 }));
 
@@ -279,6 +281,17 @@ describe('EditorPage autosave flush', () => {
     expect(screen.getByText(/^Saved /)).toBeInTheDocument();
     await i18n.changeLanguage('es');
   });
+
+  it('uses measure token on the editor writing surface', () => {
+    renderEditor();
+    expect(screen.getByTestId('editor-surface')).toHaveClass('max-w-measure');
+  });
+
+  it('shows empty-state CTA tiles when the editor is empty', () => {
+    renderEditor();
+    expect(screen.getByTestId('editor-empty-state')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /plantilla/i })).toBeInTheDocument();
+  });
 });
 
 describe('EditorPage save indicator', () => {
diff --git a/frontend/src/pages/EditorPage.tsx b/frontend/src/pages/EditorPage.tsx
index 10d5117..77b40b4 100644
--- a/frontend/src/pages/EditorPage.tsx
+++ b/frontend/src/pages/EditorPage.tsx
@@ -33,7 +33,8 @@ import { useCallback, useEffect, useRef, useState, type MutableRefObject } from
 import { createPortal } from 'react-dom';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { useEditor, EditorContent, type Editor } from '@tiptap/react';
+import { useEditor, EditorContent, useEditorState, type Editor } from '@tiptap/react';
+import { LayoutTemplate, Scale, Sparkles } from 'lucide-react';
 import StarterKit from '@tiptap/starter-kit';
 import Placeholder from '@tiptap/extension-placeholder';
 import { useEditorStore, makeDefaultDocument, isSentinelDocumentTitle } from '@/lib/editor-store';
@@ -156,6 +157,10 @@ function EditorDocumentSurface({ docId }: { docId: string }) {
   // Comments side panel (#602): open state + the comment to autofocus on open.
   const [commentsOpen, setCommentsOpen] = useState<boolean>(false);
   const [focusCommentId, setFocusCommentId] = useState<string | null>(null);
+  const citationTriggerRef = useRef<HTMLButtonElement>(null);
+  const templatesTriggerRef = useRef<HTMLButtonElement>(null);
+  const aiPanelTriggerRef = useRef<HTMLButtonElement>(null);
+  const commentsTriggerRef = useRef<HTMLButtonElement>(null);
   const addComment = useCommentStore((s) => s.addComment);
   const commentBadgeCount = useCommentStore((s) => openCommentCount(s.comments, docId));
 
@@ -338,8 +343,34 @@ function EditorDocumentSurface({ docId }: { docId: string }) {
     exportMarkdown(editor.getJSON(), title);
   }, [editor, title]);
 
+  const closeCitationPicker = useCallback(() => {
+    setCitationPickerOpen(false);
+    citationTriggerRef.current?.focus();
+  }, []);
+
+  const closeTemplatesDialog = useCallback(() => {
+    setTemplatesOpen(false);
+    templatesTriggerRef.current?.focus();
+  }, []);
+
+  const closeAiPanel = useCallback(() => {
+    setAiPanelOpen(false);
+    aiPanelTriggerRef.current?.focus();
+  }, []);
+
+  const closeCommentsPanel = useCallback(() => {
+    setCommentsOpen(false);
+    commentsTriggerRef.current?.focus();
+  }, []);
+
+  const drawerPaddingClass = cn(
+    'transition-[padding] duration-200',
+    aiPanelOpen && 'pr-[380px]',
+    !aiPanelOpen && commentsOpen && 'pr-[340px]',
+  );
+
   return (
-    <>
+    <div className={drawerPaddingClass}>
       {persistError && (
         <div
           className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-amber-500/30 bg-amber-500/10 px-4 py-2 text-[12.5px] text-amber-900 dark:text-amber-100"
@@ -413,6 +444,10 @@ function EditorDocumentSurface({ docId }: { docId: string }) {
             setCommentsOpen(true);
           }}
           commentBadgeCount={commentBadgeCount}
+          citationButtonRef={citationTriggerRef}
+          templatesButtonRef={templatesTriggerRef}
+          aiPanelButtonRef={aiPanelTriggerRef}
+          commentsButtonRef={commentsTriggerRef}
         />
       )}
 
@@ -421,7 +456,7 @@ function EditorDocumentSurface({ docId }: { docId: string }) {
       {editor &&
         citationPickerOpen &&
         createPortal(
-          <CitationPicker editor={editor} onClose={() => setCitationPickerOpen(false)} />,
+          <CitationPicker editor={editor} onClose={closeCitationPicker} />,
           document.body,
         )}
 
@@ -429,7 +464,7 @@ function EditorDocumentSurface({ docId }: { docId: string }) {
       {editor &&
         templatesOpen &&
         createPortal(
-          <TemplatesDialog editor={editor} onClose={() => setTemplatesOpen(false)} />,
+          <TemplatesDialog editor={editor} onClose={closeTemplatesDialog} />,
           document.body,
         )}
 
@@ -441,7 +476,7 @@ function EditorDocumentSurface({ docId }: { docId: string }) {
             editor={editor}
             docId={docId}
             docTitle={title}
-            onClose={() => setAiPanelOpen(false)}
+            onClose={closeAiPanel}
           />,
           document.body,
         )}
@@ -454,16 +489,17 @@ function EditorDocumentSurface({ docId }: { docId: string }) {
             editor={editor}
             docId={docId}
             focusCommentId={focusCommentId}
-            onClose={() => setCommentsOpen(false)}
+            onClose={closeCommentsPanel}
           />,
           document.body,
         )}
 
       {/* TipTap content area */}
       <div
+        data-testid="editor-surface"
         className={cn(
-          'min-h-[60vh] rounded-lg border border-border bg-surface p-6',
-          'prose prose-neutral dark:prose-invert max-w-none',
+          'relative min-h-[60vh] rounded-lg border border-border bg-surface p-6',
+          'prose prose-neutral dark:prose-invert max-w-measure',
           // Headings inherit the app's display font + tight tracking instead
           // of the plugin's default body font — matches every other heading
           // in the app (`font-display ... tracking-tight`). Sizes/weights per
@@ -505,8 +541,73 @@ function EditorDocumentSurface({ docId }: { docId: string }) {
           isReadOnly && 'cursor-default',
         )}
       >
+        {editor && !isReadOnly && (
+          <EditorEmptyStateTiles
+            editor={editor}
+            onOpenTemplates={() => setTemplatesOpen(true)}
+            onOpenAiPanel={() => setAiPanelOpen(true)}
+            onOpenCitationPicker={() => setCitationPickerOpen(true)}
+          />
+        )}
         <EditorContent editor={editor} />
       </div>
-    </>
+    </div>
+  );
+}
+
+interface EditorEmptyStateTilesProps {
+  editor: Editor;
+  onOpenTemplates: () => void;
+  onOpenAiPanel: () => void;
+  onOpenCitationPicker: () => void;
+}
+
+/** CTA tiles shown over an empty editor surface (#75 S4.6). */
+function EditorEmptyStateTiles({
+  editor,
+  onOpenTemplates,
+  onOpenAiPanel,
+  onOpenCitationPicker,
+}: EditorEmptyStateTilesProps) {
+  const { t } = useTranslation();
+  const isEmpty = useEditorState({
+    editor,
+    selector: (snap) => snap.editor.isEmpty,
+  });
+
+  if (!isEmpty) return null;
+
+  return (
+    <div
+      className="pointer-events-none absolute inset-6 z-10 flex items-start pt-12"
+      data-testid="editor-empty-state"
+    >
+      <div className="pointer-events-auto flex flex-wrap gap-2">
+        <button
+          type="button"
+          onClick={onOpenTemplates}
+          className="flex items-center gap-2 rounded-lg border border-border bg-surface px-3 py-2 text-[13px] font-medium shadow-sm transition-colors hover:bg-surface-2"
+        >
+          <LayoutTemplate className="size-4 text-indigo-600" aria-hidden />
+          {t('editor.emptyState.template')}
+        </button>
+        <button
+          type="button"
+          onClick={onOpenAiPanel}
+          className="flex items-center gap-2 rounded-lg border border-border bg-surface px-3 py-2 text-[13px] font-medium shadow-sm transition-colors hover:bg-surface-2"
+        >
+          <Sparkles className="size-4 text-indigo-600" aria-hidden />
+          {t('editor.emptyState.ai')}
+        </button>
+        <button
+          type="button"
+          onClick={onOpenCitationPicker}
+          className="flex items-center gap-2 rounded-lg border border-border bg-surface px-3 py-2 text-[13px] font-medium shadow-sm transition-colors hover:bg-surface-2"
+        >
+          <Scale className="size-4 text-indigo-600" aria-hidden />
+          {t('editor.emptyState.citation')}
+        </button>
+      </div>
+    </div>
   );
 }
diff --git a/frontend/src/pages/editor/AiDraftPanel.tsx b/frontend/src/pages/editor/AiDraftPanel.tsx
index 43b1138..26840a6 100644
--- a/frontend/src/pages/editor/AiDraftPanel.tsx
+++ b/frontend/src/pages/editor/AiDraftPanel.tsx
@@ -16,7 +16,7 @@
  * - Markdown insertion → `markdownDraftToBlocks` in `./draft-insert-utils`.
  * - Model selection → mirrors ChatPage (`useModels` + `useUi.defaultModel`).
  */
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import type { Editor } from '@tiptap/react';
 import { useEditorState } from '@tiptap/react';
 import { useNavigate } from 'react-router-dom';
@@ -30,6 +30,7 @@ import { isSentinelDocumentTitle } from '@/lib/editor-store';
 import { EMPTY_DOC_AI_DRAFT, useAiDraftStore, type AiInsertTarget } from '@/lib/ai-draft-store';
 import { useModels } from '@/lib/queries';
 import { useUi } from '@/lib/store';
+import { useFocusTrap } from '@/lib/useFocusTrap';
 import type { ChatSource } from '@/lib/types';
 import { citationFromSource, type CitationAttrs } from './citation-utils';
 import { isInsertTargetValid, markdownDraftToBlocks } from './draft-insert-utils';
@@ -84,6 +85,9 @@ function captureSelectionTarget(editor: Editor): AiInsertTarget | null {
 export function AiDraftPanel({ editor, docId, docTitle, onClose }: AiDraftPanelProps) {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const panelRef = useRef<HTMLElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const promptRef = useRef<HTMLTextAreaElement>(null);
   const { data: models = [] } = useModels();
   const defaultModel = useUi((s) => s.defaultModel);
   const model = useMemo(() => {
@@ -231,8 +235,15 @@ export function AiDraftPanel({ editor, docId, docTitle, onClose }: AiDraftPanelP
 
   const citableCount = sources.filter((s) => s.target?.lawId).length;
 
+  useFocusTrap(panelRef, true);
+
+  useEffect(() => {
+    requestAnimationFrame(() => promptRef.current?.focus());
+  }, []);
+
   return (
     <aside
+      ref={panelRef}
       role="complementary"
       aria-label={t('editor.aiDraft.panelAria')}
       className="fixed inset-y-0 right-0 z-40 flex w-[380px] max-w-[92vw] flex-col border-l border-border bg-surface shadow-xl"
@@ -241,6 +252,7 @@ export function AiDraftPanel({ editor, docId, docTitle, onClose }: AiDraftPanelP
         <Sparkles className="size-4 text-indigo-600" />
         <span className="flex-1 text-[14px] font-semibold">{t('editor.aiDraft.title')}</span>
         <Button
+          ref={closeButtonRef}
           variant="ghost"
           size="icon-sm"
           aria-label={t('editor.aiDraft.closeAria')}
@@ -290,6 +302,7 @@ export function AiDraftPanel({ editor, docId, docTitle, onClose }: AiDraftPanelP
         <section className="space-y-2">
           <div className="label-caps">{t('editor.aiDraft.promptSection')}</div>
           <textarea
+            ref={promptRef}
             value={prompt}
             onChange={(e) => setPrompt(docId, e.target.value)}
             onKeyDown={onPromptKeyDown}
diff --git a/frontend/src/pages/editor/CitationPicker.test.tsx b/frontend/src/pages/editor/CitationPicker.test.tsx
new file mode 100644
index 0000000..43807c0
--- /dev/null
+++ b/frontend/src/pages/editor/CitationPicker.test.tsx
@@ -0,0 +1,92 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { Editor } from '@tiptap/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CitationPicker } from './CitationPicker';
+
+const useSearchMock = vi.fn();
+
+vi.mock('@/lib/queries', () => ({
+  useSearch: (q: string) => useSearchMock(q),
+}));
+
+vi.mock('@/lib/useFocusTrap', () => ({
+  useFocusTrap: vi.fn(),
+}));
+
+let debouncedQuery = '';
+
+vi.mock('@/lib/use-debounced-value', () => ({
+  useDebouncedValue: (value: string) => debouncedQuery || value,
+}));
+
+const insertLegalCitationMock = vi.fn().mockReturnThis();
+const chainMock = {
+  focus: vi.fn().mockReturnThis(),
+  insertLegalCitation: insertLegalCitationMock,
+  run: vi.fn(),
+};
+
+const editor = {
+  chain: () => chainMock,
+} as unknown as Editor;
+
+const hits = [
+  {
+    id: 'h1',
+    kind: 'article' as const,
+    title: 'Constitución Española',
+    snippet: 'España se constituye…',
+    match: null,
+    articleNumber: '1',
+    payload: { lawId: 'CE-1978' },
+  },
+  {
+    id: 'h2',
+    kind: 'article' as const,
+    title: 'Constitución Española',
+    snippet: 'La soberanía…',
+    match: null,
+    articleNumber: '2',
+    payload: { lawId: 'CE-1978' },
+  },
+];
+
+describe('CitationPicker', () => {
+  beforeEach(() => {
+    debouncedQuery = '';
+    useSearchMock.mockReset();
+    useSearchMock.mockReturnValue({ data: { hits }, isFetching: false });
+    chainMock.run.mockReset();
+  });
+
+  it('shows searching only when fetching with no prior hits', async () => {
+    useSearchMock.mockReturnValue({ data: undefined, isFetching: true });
+    render(<CitationPicker editor={editor} onClose={vi.fn()} />);
+    await userEvent.type(screen.getByRole('textbox'), 'co');
+    expect(screen.getByText(/buscando/i)).toBeInTheDocument();
+  });
+
+  it('does not reset active row on intermediate keystrokes before debounced results change', async () => {
+    debouncedQuery = 'co';
+    render(<CitationPicker editor={editor} onClose={vi.fn()} />);
+    const input = screen.getByRole('textbox');
+    await userEvent.type(input, 'const');
+    const options = screen.getAllByRole('option');
+    fireEvent.mouseEnter(options[1]);
+    expect(options[1]).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getAllByRole('option')[1]).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('inserts citation and closes on Enter', async () => {
+    const onClose = vi.fn();
+    render(<CitationPicker editor={editor} onClose={onClose} />);
+    await userEvent.type(screen.getByRole('textbox'), 'const');
+    act(() => {
+      fireEvent.keyDown(window, { key: 'Enter' });
+    });
+    expect(insertLegalCitationMock).toHaveBeenCalled();
+    expect(chainMock.run).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/pages/editor/CitationPicker.tsx b/frontend/src/pages/editor/CitationPicker.tsx
index 5254c98..0e0175c 100644
--- a/frontend/src/pages/editor/CitationPicker.tsx
+++ b/frontend/src/pages/editor/CitationPicker.tsx
@@ -21,6 +21,8 @@ import type { Editor } from '@tiptap/react';
 import { BookOpenText, FileText, Scale } from 'lucide-react';
 import { Kbd } from '@/components/ui';
 import { useSearch } from '@/lib/queries';
+import { useDebouncedValue } from '@/lib/use-debounced-value';
+import { useFocusTrap } from '@/lib/useFocusTrap';
 import { cn } from '@/lib/utils';
 import { HighlightedSnippet } from '@/components/domain/HighlightedSnippet';
 import { citationFromHit } from './citation-utils';
@@ -32,12 +34,16 @@ interface CitationPickerProps {
 
 export function CitationPicker({ editor, onClose }: CitationPickerProps) {
   const { t } = useTranslation();
+  const panelRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const [q, setQ] = useState('');
   const [active, setActive] = useState(0);
+  const debouncedQ = useDebouncedValue(q, 200);
 
   const { data, isFetching } = useSearch(q);
-  const searchPending = isFetching && !data;
+  const searchPending = isFetching && (data?.hits ?? []).length === 0;
+
+  useFocusTrap(panelRef, true);
 
   // Keep only hits that resolve to a citation, paired with their attributes —
   // `citationFromHit` is the single source of truth for "can this be cited?".
@@ -55,11 +61,10 @@ export function CitationPicker({ editor, onClose }: CitationPickerProps) {
     requestAnimationFrame(() => inputRef.current?.focus());
   }, []);
 
-  // Clamp the active row whenever the (async) result set changes so Enter can
-  // never target an invalid index — including the empty-list case.
+  // Clamp the active row when debounced results change — not on every keystroke.
   useEffect(() => {
     setActive((a) => (resolvable.length === 0 ? 0 : Math.min(a, resolvable.length - 1)));
-  }, [q, resolvable.length]);
+  }, [debouncedQ, resolvable.length]);
 
   const insert = (index: number) => {
     const entry = resolvable[index];
@@ -99,7 +104,11 @@ export function CitationPicker({ editor, onClose }: CitationPickerProps) {
       className="fixed inset-0 z-overlay flex items-start justify-center pt-[12vh] bg-black/35 backdrop-blur-[2px] animate-in"
       onClick={onClose}
     >
-      <div onClick={(e) => e.stopPropagation()} className="air-glass-strong w-[580px] max-w-[92vw] overflow-hidden">
+      <div
+        ref={panelRef}
+        onClick={(e) => e.stopPropagation()}
+        className="air-glass-strong w-[580px] max-w-[92vw] overflow-hidden"
+      >
         <div className="flex items-center gap-2.5 border-b border-border px-4 py-3">
           <Scale className="size-4 text-muted" />
           <input
diff --git a/frontend/src/pages/editor/CommentsPanel.tsx b/frontend/src/pages/editor/CommentsPanel.tsx
index 3381642..106b487 100644
--- a/frontend/src/pages/editor/CommentsPanel.tsx
+++ b/frontend/src/pages/editor/CommentsPanel.tsx
@@ -15,6 +15,7 @@ import type { Editor } from '@tiptap/react';
 import { MessageSquare, X, MapPin, Check, RotateCcw, Trash2, Link2 } from 'lucide-react';
 import { Button } from '@/components/ui';
 import { toast } from '@/lib/toast';
+import { useFocusTrap } from '@/lib/useFocusTrap';
 import { useCommentStore, type DocComment } from '@/lib/comment-store';
 import { filterDocComments, findCommentRangeInDoc } from './comment-utils';
 
@@ -33,6 +34,8 @@ function findCommentRange(editor: Editor, commentId: string): { from: number; to
 
 export function CommentsPanel({ editor, docId, focusCommentId, onClose }: CommentsPanelProps) {
   const { t } = useTranslation();
+  const panelRef = useRef<HTMLElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
   const { comments, updateNote, updateQuote, toggleResolved, deleteComment } = useCommentStore();
   const all = filterDocComments(comments, docId, true);
   const active = all.filter((c) => !c.resolved);
@@ -40,9 +43,15 @@ export function CommentsPanel({ editor, docId, focusCommentId, onClose }: Commen
 
   const focusRef = useRef<HTMLTextAreaElement>(null);
   useEffect(() => {
-    if (focusCommentId) requestAnimationFrame(() => focusRef.current?.focus());
+    if (focusCommentId) {
+      requestAnimationFrame(() => focusRef.current?.focus());
+      return;
+    }
+    requestAnimationFrame(() => closeButtonRef.current?.focus());
   }, [focusCommentId]);
 
+  useFocusTrap(panelRef, true);
+
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
@@ -166,6 +175,7 @@ export function CommentsPanel({ editor, docId, focusCommentId, onClose }: Commen
 
   return (
     <aside
+      ref={panelRef}
       role="complementary"
       aria-label={t('editor.comments.panelAria')}
       className="fixed inset-y-0 right-0 z-40 flex w-[340px] max-w-[92vw] flex-col border-l border-border bg-surface shadow-xl"
@@ -173,7 +183,14 @@ export function CommentsPanel({ editor, docId, focusCommentId, onClose }: Commen
       <header className="flex items-center gap-2 border-b border-border px-4 py-3">
         <MessageSquare className="size-4 text-amber-600" />
         <span className="flex-1 text-[14px] font-semibold">{t('editor.comments.title')}</span>
-        <Button variant="ghost" size="icon-sm" aria-label={t('editor.comments.closeAria')} title={t('editor.comments.close')} onClick={onClose}>
+        <Button
+          ref={closeButtonRef}
+          variant="ghost"
+          size="icon-sm"
+          aria-label={t('editor.comments.closeAria')}
+          title={t('editor.comments.close')}
+          onClick={onClose}
+        >
           <X className="size-4" />
         </Button>
       </header>
diff --git a/frontend/src/pages/editor/EditorToolbar.tsx b/frontend/src/pages/editor/EditorToolbar.tsx
index e1c0ef8..628e064 100644
--- a/frontend/src/pages/editor/EditorToolbar.tsx
+++ b/frontend/src/pages/editor/EditorToolbar.tsx
@@ -39,6 +39,7 @@ import {
   Eye,
   Pencil,
 } from 'lucide-react';
+import { forwardRef } from 'react';
 import type { Editor } from '@tiptap/react';
 import { useEditorState } from '@tiptap/react';
 import { useTranslation } from 'react-i18next';
@@ -61,6 +62,10 @@ interface EditorToolbarProps {
   onOpenComments: () => void;
   /** Unresolved comment count for the open document — drives the badge on "View comments". */
   commentBadgeCount?: number;
+  citationButtonRef?: React.Ref<HTMLButtonElement>;
+  templatesButtonRef?: React.Ref<HTMLButtonElement>;
+  aiPanelButtonRef?: React.Ref<HTMLButtonElement>;
+  commentsButtonRef?: React.Ref<HTMLButtonElement>;
 }
 
 /** A thin divider between button groups. */
@@ -74,15 +79,20 @@ interface ToolButtonProps {
   active?: boolean;
   disabled?: boolean;
   onPress: () => void;
+  buttonRef?: React.Ref<HTMLButtonElement>;
 }
 
 /**
  * A single toolbar button. Uses `Button` variant `ghost` with an extra
  * active ring when the mark/node is currently applied.
  */
-function ToolButton({ icon, label, active, disabled, onPress }: ToolButtonProps) {
+const ToolButton = forwardRef<HTMLButtonElement, ToolButtonProps>(function ToolButton(
+  { icon, label, active, disabled, onPress, buttonRef },
+  ref,
+) {
   return (
     <Button
+      ref={buttonRef ?? ref}
       type="button"
       variant="ghost"
       size="icon-sm"
@@ -96,7 +106,7 @@ function ToolButton({ icon, label, active, disabled, onPress }: ToolButtonProps)
       {icon}
     </Button>
   );
-}
+});
 
 /**
  * EditorToolbar renders formatting controls for the given `editor` instance.
@@ -114,6 +124,10 @@ export function EditorToolbar({
   onAddComment,
   onOpenComments,
   commentBadgeCount = 0,
+  citationButtonRef,
+  templatesButtonRef,
+  aiPanelButtonRef,
+  commentsButtonRef,
 }: EditorToolbarProps) {
   const { t } = useTranslation();
 
@@ -221,6 +235,7 @@ export function EditorToolbar({
 
       {/* Citations: typed legal citation (#599) + plain blockquote */}
       <ToolButton
+        buttonRef={citationButtonRef}
         icon={<Scale className="size-3.5" />}
         label={t('editor.toolbar.insertCitation')}
         onPress={onInsertCitation}
@@ -236,6 +251,7 @@ export function EditorToolbar({
 
       {/* Templates (#600) */}
       <ToolButton
+        buttonRef={templatesButtonRef}
         icon={<LayoutTemplate className="size-3.5" />}
         label={t('editor.toolbar.templates')}
         onPress={onOpenTemplates}
@@ -243,6 +259,7 @@ export function EditorToolbar({
 
       {/* AI drafting assistant (#601) */}
       <ToolButton
+        buttonRef={aiPanelButtonRef}
         icon={<Sparkles className="size-3.5" />}
         label={t('editor.toolbar.aiDraft')}
         onPress={onOpenAiPanel}
@@ -275,6 +292,7 @@ export function EditorToolbar({
       />
       <div className="relative">
         <ToolButton
+          buttonRef={commentsButtonRef}
           icon={<MessageSquare className="size-3.5" />}
           label={t('editor.toolbar.viewComments')}
           onPress={onOpenComments}
diff --git a/frontend/src/pages/editor/TemplateFillForm.tsx b/frontend/src/pages/editor/TemplateFillForm.tsx
index ef22e50..737d971 100644
--- a/frontend/src/pages/editor/TemplateFillForm.tsx
+++ b/frontend/src/pages/editor/TemplateFillForm.tsx
@@ -10,7 +10,7 @@
  * On "Aplicar" it hands the merged values up; the dialog substitutes them and
  * inserts the draft. Unknown/empty vars are intentionally left as placeholders.
  */
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ArrowLeft, BookOpenText, Search, X } from 'lucide-react';
 import { Button } from '@/components/ui';
@@ -19,21 +19,33 @@ import { cn } from '@/lib/utils';
 import type { DocumentTemplate } from '@/lib/template-store';
 import { extractVariables, lawVariableValues } from './template-utils';
 
+export interface TemplateFillDraft {
+  customValues: Record<string, string>;
+  lawQuery: string;
+  lawId: string | null;
+}
+
+export const EMPTY_TEMPLATE_FILL_DRAFT: TemplateFillDraft = {
+  customValues: {},
+  lawQuery: '',
+  lawId: null,
+};
+
 interface TemplateFillFormProps {
   template: DocumentTemplate;
+  draft: TemplateFillDraft;
+  onDraftChange: (draft: TemplateFillDraft) => void;
   onApply: (values: Record<string, string>) => void;
   onBack: () => void;
 }
 
-export function TemplateFillForm({ template, onApply, onBack }: TemplateFillFormProps) {
+export function TemplateFillForm({ template, draft, onDraftChange, onApply, onBack }: TemplateFillFormProps) {
   const { t } = useTranslation();
   const variables = useMemo(() => extractVariables(template.content), [template]);
   const lawVars = variables.filter((v) => v.startsWith('law.'));
   const customVars = variables.filter((v) => !v.startsWith('law.'));
 
-  const [customValues, setCustomValues] = useState<Record<string, string>>({});
-  const [lawQuery, setLawQuery] = useState('');
-  const [lawId, setLawId] = useState<string | null>(null);
+  const { customValues, lawQuery, lawId } = draft;
 
   const { data: searchData } = useSearch(lawQuery);
   const lawHits = (searchData?.hits ?? []).filter((h) => h.kind === 'law' && typeof h.payload?.lawId === 'string');
@@ -67,7 +79,13 @@ export function TemplateFillForm({ template, onApply, onBack }: TemplateFillForm
                   <span className="truncate font-medium">{law.short || law.title}</span>
                   <span className="truncate text-muted">{law.id}</span>
                 </span>
-                <Button variant="ghost" size="icon-sm" aria-label={t('editor.templateFill.removeLawAria')} title={t('editor.templateFill.removeLaw')} onClick={() => setLawId(null)}>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label={t('editor.templateFill.removeLawAria')}
+                  title={t('editor.templateFill.removeLaw')}
+                  onClick={() => onDraftChange({ ...draft, lawId: null })}
+                >
                   <X className="size-3.5" />
                 </Button>
               </div>
@@ -77,7 +95,7 @@ export function TemplateFillForm({ template, onApply, onBack }: TemplateFillForm
                   <Search className="size-3.5 text-muted" />
                   <input
                     value={lawQuery}
-                    onChange={(e) => setLawQuery(e.target.value)}
+                    onChange={(e) => onDraftChange({ ...draft, lawQuery: e.target.value })}
                     aria-label={t('editor.templateFill.lawSearchAria')}
                     placeholder={t('editor.templateFill.lawSearchPlaceholder')}
                     className="flex-1 bg-transparent text-[13.5px] outline-none placeholder:text-muted"
@@ -93,7 +111,7 @@ export function TemplateFillForm({ template, onApply, onBack }: TemplateFillForm
                       <button
                         key={h.id}
                         type="button"
-                        onClick={() => setLawId(h.payload!.lawId as string)}
+                        onClick={() => onDraftChange({ ...draft, lawId: h.payload!.lawId as string })}
                         className="flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-[13px] text-fg transition-colors hover:bg-surface-2"
                       >
                         <BookOpenText className="size-3.5 shrink-0 text-indigo-600" />
@@ -129,7 +147,9 @@ export function TemplateFillForm({ template, onApply, onBack }: TemplateFillForm
                 <span className="font-mono text-[12px] text-muted">{`{{${v}}}`}</span>
                 <input
                   value={customValues[v] ?? ''}
-                  onChange={(e) => setCustomValues((prev) => ({ ...prev, [v]: e.target.value }))}
+                  onChange={(e) =>
+                    onDraftChange({ ...draft, customValues: { ...draft.customValues, [v]: e.target.value } })
+                  }
                   aria-label={t('editor.templateFill.valueForAria', { name: v })}
                   placeholder={t('editor.templateFill.valueForPlaceholder', { name: v })}
                   className="w-full rounded-lg border border-border bg-surface px-3 py-1.5 text-[13.5px] outline-none focus:ring-2 focus:ring-indigo-400"
diff --git a/frontend/src/pages/editor/TemplatesDialog.test.tsx b/frontend/src/pages/editor/TemplatesDialog.test.tsx
new file mode 100644
index 0000000..274933a
--- /dev/null
+++ b/frontend/src/pages/editor/TemplatesDialog.test.tsx
@@ -0,0 +1,185 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { Editor } from '@tiptap/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { DocumentTemplate } from '@/lib/template-store';
+import { TemplatesDialog } from './TemplatesDialog';
+
+const deleteTemplateMock = vi.fn();
+const saveTemplateMock = vi.fn();
+const createDocumentMock = vi.fn(() => 'new-doc-1');
+const saveDocumentMock = vi.fn();
+const confirmMock = vi.fn();
+
+vi.mock('@/lib/template-store', () => ({
+  useTemplateStore: () => ({
+    templates: {
+      t1: {
+        id: 't1',
+        name: 'Demanda',
+        content: { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Hola' }] }] },
+        createdAt: '2026-01-01T00:00:00.000Z',
+      } satisfies DocumentTemplate,
+      t2: {
+        id: 't2',
+        name: 'Con variables',
+        content: {
+          type: 'doc',
+          content: [{ type: 'paragraph', content: [{ type: 'text', text: '{{parte}}' }] }],
+        },
+        createdAt: '2026-01-02T00:00:00.000Z',
+      } satisfies DocumentTemplate,
+    },
+    saveTemplate: saveTemplateMock,
+    deleteTemplate: deleteTemplateMock,
+  }),
+}));
+
+vi.mock('@/lib/editor-store', () => ({
+  useEditorStore: () => ({
+    createDocument: createDocumentMock,
+    saveDocument: saveDocumentMock,
+  }),
+}));
+
+vi.mock('@/lib/confirm', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/lib/confirm')>();
+  return {
+    ...actual,
+    useConfirm: () => confirmMock,
+  };
+});
+
+vi.mock('@/lib/useFocusTrap', () => ({
+  useFocusTrap: vi.fn(),
+}));
+
+vi.mock('./TemplateFillForm', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('./TemplateFillForm')>();
+  return {
+    ...actual,
+    TemplateFillForm: ({
+      draft,
+      onDraftChange,
+      onBack,
+      onApply,
+    }: {
+      draft: { customValues: Record<string, string>; lawQuery: string; lawId: string | null };
+      onDraftChange: (draft: {
+        customValues: Record<string, string>;
+        lawQuery: string;
+        lawId: string | null;
+      }) => void;
+      onBack: () => void;
+      onApply: (values: Record<string, string>) => void;
+    }) => (
+      <div>
+        <p>Rellena las variables para generar el borrador</p>
+        <label htmlFor="parte-input">Valor para parte</label>
+        <input
+          id="parte-input"
+          aria-label="Valor para parte"
+          value={draft.customValues.parte ?? ''}
+          onChange={(e) =>
+            onDraftChange({ ...draft, customValues: { ...draft.customValues, parte: e.target.value } })
+          }
+        />
+        <button type="button" onClick={onBack}>
+          Volver
+        </button>
+        <button type="button" onClick={() => onApply({ parte: draft.customValues.parte ?? 'demandante' })}>
+          Aplicar plantilla
+        </button>
+      </div>
+    ),
+  };
+});
+
+const navigateMock = vi.fn();
+vi.mock('react-router-dom', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-router-dom')>();
+  return { ...actual, useNavigate: () => navigateMock };
+});
+
+const insertContentMock = vi.fn().mockReturnThis();
+const chainMock = {
+  focus: vi.fn().mockReturnThis(),
+  insertContent: insertContentMock,
+  run: vi.fn(),
+};
+
+const editor = {
+  chain: () => chainMock,
+  getJSON: vi.fn(() => ({ type: 'doc', content: [] })),
+  schema: {},
+} as unknown as Editor;
+
+function renderDialog(onClose = vi.fn()) {
+  return render(<TemplatesDialog editor={editor} onClose={onClose} />);
+}
+
+describe('TemplatesDialog', () => {
+  beforeEach(() => {
+    deleteTemplateMock.mockReset();
+    createDocumentMock.mockReset();
+    saveDocumentMock.mockReset();
+    navigateMock.mockReset();
+    confirmMock.mockReset();
+    confirmMock.mockResolvedValue(false);
+    chainMock.run.mockReset();
+    insertContentMock.mockReset();
+  });
+
+  it('does not delete a template without confirm approval', async () => {
+    renderDialog();
+    await userEvent.click(screen.getByRole('button', { name: /eliminar plantilla demanda/i }));
+    expect(confirmMock).toHaveBeenCalled();
+    expect(deleteTemplateMock).not.toHaveBeenCalled();
+  });
+
+  it('deletes a template when confirm resolves true', async () => {
+    confirmMock.mockResolvedValue(true);
+    renderDialog();
+    await userEvent.click(screen.getByRole('button', { name: /eliminar plantilla demanda/i }));
+    await waitFor(() => {
+      expect(deleteTemplateMock).toHaveBeenCalledWith('t1');
+    });
+  });
+
+  it('returns to list view on Escape in fill form without closing dialog', async () => {
+    renderDialog();
+    const applyButtons = screen.getAllByRole('button', { name: /^aplicar$/i });
+    await userEvent.click(applyButtons[0]);
+    expect(screen.getByText(/rellena las variables/i)).toBeInTheDocument();
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(screen.getByText('Con variables')).toBeInTheDocument();
+    expect(screen.queryByText(/rellena las variables/i)).not.toBeInTheDocument();
+  });
+
+  it('preserves fill draft when escaping back to list and re-opening the template', async () => {
+    renderDialog();
+    await userEvent.click(screen.getAllByRole('button', { name: /^aplicar$/i })[0]);
+    const input = screen.getByRole('textbox', { name: /valor para parte/i });
+    await userEvent.type(input, 'demandante');
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(screen.queryByText(/rellena las variables/i)).not.toBeInTheDocument();
+    await userEvent.click(screen.getAllByRole('button', { name: /^aplicar$/i })[0]);
+    expect(screen.getByRole('textbox', { name: /valor para parte/i })).toHaveValue('demandante');
+  });
+
+  it('closes dialog on second Escape from list view', async () => {
+    const onClose = vi.fn();
+    renderDialog(onClose);
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('applies template in a new document', async () => {
+    renderDialog();
+    const newDocButtons = screen.getAllByRole('button', { name: /aplicar en documento nuevo/i });
+    await userEvent.click(newDocButtons[newDocButtons.length - 1]);
+    expect(createDocumentMock).toHaveBeenCalledWith('Demanda');
+    expect(saveDocumentMock).toHaveBeenCalled();
+    expect(navigateMock).toHaveBeenCalledWith('/editor/new-doc-1');
+  });
+});
diff --git a/frontend/src/pages/editor/TemplatesDialog.tsx b/frontend/src/pages/editor/TemplatesDialog.tsx
index e74b373..bae8721 100644
--- a/frontend/src/pages/editor/TemplatesDialog.tsx
+++ b/frontend/src/pages/editor/TemplatesDialog.tsx
@@ -8,8 +8,8 @@
  *   `TemplateFillForm` to map them (free text + corpus law metadata).
  *
  * Applying inserts the filled draft at the cursor (non-destructive — it never
- * silently wipes the current document). Portaled to `<body>` by EditorPage so
- * the fixed overlay isn't clipped by the editor's scroll container.
+ * silently wipes the current document). "Aplicar en documento nuevo" mints a
+ * fresh document via `createDocument` (#832 / S4.6).
  *
  * --- WHERE TO CHANGE IF TEMPLATE STORAGE CHANGES ---
  * - Persistence → `@/lib/template-store`.
@@ -17,15 +17,21 @@
  */
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import type { Editor } from '@tiptap/react';
 import type { JSONContent } from '@tiptap/react';
 import { LayoutTemplate, FilePlus2, Upload, Trash2, FileText } from 'lucide-react';
 import { Button, Kbd } from '@/components/ui';
+import { useConfirm } from '@/lib/confirm';
+import { useEditorStore } from '@/lib/editor-store';
+import { useFocusTrap } from '@/lib/useFocusTrap';
 import { useTemplateStore } from '@/lib/template-store';
 import { stripCommentMarks } from './comment-utils';
 import { extractVariables, fillTemplate } from './template-utils';
 import { importFile, SUPPORTED_IMPORT } from './import-utils';
-import { TemplateFillForm } from './TemplateFillForm';
+import { EMPTY_TEMPLATE_FILL_DRAFT, TemplateFillForm, type TemplateFillDraft } from './TemplateFillForm';
+
+type ApplyMode = 'insert' | 'newDocument';
 
 interface TemplatesDialogProps {
   editor: Editor;
@@ -34,25 +40,42 @@ interface TemplatesDialogProps {
 
 export function TemplatesDialog({ editor, onClose }: TemplatesDialogProps) {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+  const confirm = useConfirm();
+  const panelRef = useRef<HTMLDivElement>(null);
+  const nameInputRef = useRef<HTMLInputElement>(null);
   const { templates, saveTemplate, deleteTemplate } = useTemplateStore();
+  const { createDocument, saveDocument } = useEditorStore();
   const [name, setName] = useState('');
   const [fillId, setFillId] = useState<string | null>(null);
+  const [fillDrafts, setFillDrafts] = useState<Record<string, TemplateFillDraft>>({});
+  const [applyMode, setApplyMode] = useState<ApplyMode>('insert');
   const [importError, setImportError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const list = Object.values(templates).sort((a, b) => b.createdAt.localeCompare(a.createdAt));
   const filling = fillId ? templates[fillId] : null;
 
+  useFocusTrap(panelRef, true);
+
+  useEffect(() => {
+    if (filling) return;
+    requestAnimationFrame(() => nameInputRef.current?.focus());
+  }, [filling]);
+
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        onClose();
+      if (e.key !== 'Escape') return;
+      e.preventDefault();
+      if (fillId) {
+        setFillId(null);
+        return;
       }
+      onClose();
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [onClose]);
+  }, [fillId, onClose]);
 
   const saveCurrent = () => {
     const trimmed = name.trim();
@@ -79,23 +102,55 @@ export function TemplatesDialog({ editor, onClose }: TemplatesDialogProps) {
     }
   };
 
-  const applyTemplate = (content: JSONContent, values: Record<string, string>) => {
+  const finishApply = (
+    templateName: string,
+    content: JSONContent,
+    values: Record<string, string>,
+    mode: ApplyMode,
+  ) => {
     const filled = stripCommentMarks(fillTemplate(content, values));
-    // Insert the filled body at the cursor — never overwrite the whole doc.
+    if (mode === 'newDocument') {
+      const newId = createDocument(templateName);
+      saveDocument({ id: newId, title: templateName, content: filled });
+      onClose();
+      navigate(`/editor/${newId}`);
+      return;
+    }
     editor.chain().focus().insertContent(filled.content ?? []).run();
     onClose();
   };
 
-  const startApply = (id: string) => {
+  const applyTemplate = (
+    templateName: string,
+    content: JSONContent,
+    values: Record<string, string>,
+    mode: ApplyMode,
+  ) => {
+    finishApply(templateName, content, values, mode);
+  };
+
+  const startApply = (id: string, mode: ApplyMode = 'insert') => {
     const template = templates[id];
     if (!template) return;
+    setApplyMode(mode);
     if (extractVariables(template.content).length === 0) {
-      applyTemplate(template.content, {});
+      applyTemplate(template.name, template.content, {}, mode);
       return;
     }
     setFillId(id);
   };
 
+  const handleDelete = async (templateId: string, templateName: string) => {
+    const ok = await confirm({
+      title: t('editor.templates.deleteConfirmTitle'),
+      message: t('editor.templates.deleteConfirmMessage', { name: templateName }),
+      confirmLabel: t('common.delete'),
+      tone: 'danger',
+    });
+    if (!ok) return;
+    deleteTemplate(templateId);
+  };
+
   return (
     <div
       role="dialog"
@@ -104,12 +159,18 @@ export function TemplatesDialog({ editor, onClose }: TemplatesDialogProps) {
       className="fixed inset-0 z-overlay flex items-start justify-center pt-[12vh] bg-black/35 backdrop-blur-[2px] animate-in"
       onClick={onClose}
     >
-      <div onClick={(e) => e.stopPropagation()} className="air-glass-strong w-[580px] max-w-[92vw] overflow-hidden">
-        {filling ? (
+      <div
+        ref={panelRef}
+        onClick={(e) => e.stopPropagation()}
+        className="air-glass-strong w-[580px] max-w-[92vw] overflow-hidden"
+      >
+        {filling && fillId ? (
           <TemplateFillForm
             template={filling}
+            draft={fillDrafts[fillId] ?? EMPTY_TEMPLATE_FILL_DRAFT}
+            onDraftChange={(draft) => setFillDrafts((prev) => ({ ...prev, [fillId]: draft }))}
             onBack={() => setFillId(null)}
-            onApply={(values) => applyTemplate(filling.content, values)}
+            onApply={(values) => applyTemplate(filling.name, filling.content, values, applyMode)}
           />
         ) : (
           <>
@@ -123,6 +184,7 @@ export function TemplatesDialog({ editor, onClose }: TemplatesDialogProps) {
             <div className="flex flex-col gap-2 border-b border-border px-4 py-3">
               <div className="flex items-center gap-2">
                 <input
+                  ref={nameInputRef}
                   value={name}
                   onChange={(e) => setName(e.target.value)}
                   onKeyDown={(e) => {
@@ -198,12 +260,15 @@ export function TemplatesDialog({ editor, onClose }: TemplatesDialogProps) {
                       <Button variant="ghost" size="sm" onClick={() => startApply(template.id)}>
                         {t('editor.templates.apply')}
                       </Button>
+                      <Button variant="ghost" size="sm" onClick={() => startApply(template.id, 'newDocument')}>
+                        {t('editor.templates.applyNewDocument')}
+                      </Button>
                       <Button
                         variant="ghost"
                         size="icon-sm"
                         aria-label={t('editor.templates.deleteAria', { name: template.name })}
                         title={t('editor.templates.delete')}
-                        onClick={() => deleteTemplate(template.id)}
+                        onClick={() => void handleDelete(template.id, template.name)}
                       >
                         <Trash2 className="size-3.5" />
                       </Button>
diff --git a/frontend/src/pages/editor/extensions/CitationChip.test.tsx b/frontend/src/pages/editor/extensions/CitationChip.test.tsx
new file mode 100644
index 0000000..92bd841
--- /dev/null
+++ b/frontend/src/pages/editor/extensions/CitationChip.test.tsx
@@ -0,0 +1,93 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { NodeViewProps } from '@tiptap/react';
+import { CitationChip } from './CitationChip';
+
+const navigateMock = vi.fn();
+const useLawMock = vi.fn();
+const useArticleMock = vi.fn();
+
+vi.mock('react-router-dom', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-router-dom')>();
+  return {
+    ...actual,
+    useNavigate: () => navigateMock,
+  };
+});
+
+vi.mock('@/lib/queries', () => ({
+  useLaw: (id: string | undefined) => useLawMock(id),
+  useArticle: (lawId: string | undefined, num: string | undefined) => useArticleMock(lawId, num),
+}));
+
+vi.mock('@tiptap/react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@tiptap/react')>();
+  return {
+    ...actual,
+    NodeViewWrapper: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+      <span className={className}>{children}</span>
+    ),
+  };
+});
+
+function renderChip(attrs: Record<string, unknown>) {
+  const props = { node: { attrs } } as NodeViewProps;
+  return render(
+    <MemoryRouter>
+      <CitationChip {...props} />
+    </MemoryRouter>,
+  );
+}
+
+describe('CitationChip', () => {
+  beforeEach(() => {
+    navigateMock.mockReset();
+    useLawMock.mockReturnValue({
+      data: { title: 'Constitución Española', short: 'Constitución' },
+      isLoading: false,
+      isError: false,
+    });
+    useArticleMock.mockReturnValue({
+      data: { body: [{ marker: null, text: 'España se constituye en un Estado social y democrático de Derecho.' }] },
+      isLoading: false,
+      isError: false,
+    });
+  });
+
+  it('does not navigate on plain click — toggles preview popover instead', async () => {
+    renderChip({ lawId: 'CE-1978', articleNum: '14', label: 'CE art. 14' });
+    await userEvent.click(screen.getByRole('button'));
+    expect(navigateMock).not.toHaveBeenCalled();
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('navigates with article anchor when Abrir ley is clicked', async () => {
+    renderChip({ lawId: 'CE-1978', articleNum: '14', label: 'CE art. 14' });
+    await userEvent.click(screen.getByRole('button'));
+    await userEvent.click(screen.getByRole('button', { name: /abrir ley/i }));
+    expect(navigateMock).toHaveBeenCalledWith('/laws/CE-1978#art-14');
+  });
+
+  it('opens law in new tab on modifier click', async () => {
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    renderChip({ lawId: 'CE-1978', articleNum: '14', label: 'CE art. 14' });
+    fireEvent.click(screen.getByRole('button'), { ctrlKey: true });
+    expect(openSpy).toHaveBeenCalledWith('/laws/CE-1978#art-14', '_blank', 'noopener,noreferrer');
+    expect(navigateMock).not.toHaveBeenCalled();
+    openSpy.mockRestore();
+  });
+
+  it('closes popover on Escape and returns focus to chip', async () => {
+    renderChip({ lawId: 'CE-1978', articleNum: null, label: 'CE' });
+    const chip = screen.getByRole('button');
+    await userEvent.click(chip);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    fireEvent.keyDown(window, { key: 'Escape' });
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    expect(document.activeElement).toBe(chip);
+  });
+});
diff --git a/frontend/src/pages/editor/extensions/CitationChip.tsx b/frontend/src/pages/editor/extensions/CitationChip.tsx
index c8e91a3..f8325d1 100644
--- a/frontend/src/pages/editor/extensions/CitationChip.tsx
+++ b/frontend/src/pages/editor/extensions/CitationChip.tsx
@@ -1,13 +1,18 @@
 /**
  * CitationChip — the React NodeView for the `legalCitation` node (#599).
  *
- * Rendered inline inside the editor for every citation. Clicking it opens the
- * cited law in the SPA. Kept in its own module so the node definition
- * (`LegalCitation.ts`) stays component-free (React Fast Refresh requirement).
+ * Rendered inline inside the editor for every citation. Click toggles a peek
+ * popover; "Abrir ley" navigates with the article anchor when present.
+ * Ctrl/Cmd+click opens the law in a new tab without leaving the draft.
  */
+import { useEffect, useRef, useState } from 'react';
 import { NodeViewWrapper, type NodeViewProps } from '@tiptap/react';
 import { useNavigate } from 'react-router-dom';
-import { Scale } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ExternalLink, Scale } from 'lucide-react';
+import { Button } from '@/components/ui';
+import { useArticle, useLaw } from '@/lib/queries';
+import { lawDetailHref } from '@/lib/law-reading';
 import { cn } from '@/lib/utils';
 
 /**
@@ -15,26 +20,78 @@ import { cn } from '@/lib/utils';
  * as editable text, so the click handler fires cleanly.
  */
 export function CitationChip({ node }: NodeViewProps) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+
   const lawId = node.attrs.lawId as string | null;
+  const articleNum = node.attrs.articleNum as string | null;
   const label = (node.attrs.label as string) || lawId || 'Cita';
+  const href = lawId ? lawDetailHref(lawId, articleNum) : null;
+
+  const { data: law, isLoading: lawLoading, isError: lawError } = useLaw(lawId ?? undefined);
+  const { data: article, isLoading: articleLoading, isError: articleError } = useArticle(
+    lawId ?? undefined,
+    articleNum ?? undefined,
+  );
+
+  const previewLoading = lawLoading || (articleNum ? articleLoading : false);
+  const previewError = lawError || (articleNum ? articleError : false);
+  const previewTitle = law?.title ?? label;
+  const articleText = article?.body.map((clause) => clause.text).join(' ').trim();
+  const previewSnippet = articleText?.slice(0, 200) ?? law?.short ?? '';
 
-  const goToSource = () => {
-    if (!lawId) return;
-    // Autosave is debounced (~600 ms), not instant. Unmount flush plus tab
-    // hide/close handlers persist keystrokes inside that window when this
-    // click navigates away. In-place re-pick deferred (#599).
-    navigate(`/laws/${encodeURIComponent(lawId)}`);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpen(false);
+        buttonRef.current?.focus();
+      }
+    };
+    const onPointerDown = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (buttonRef.current?.contains(target) || popoverRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    window.addEventListener('keydown', onKey, true);
+    document.addEventListener('mousedown', onPointerDown);
+    return () => {
+      window.removeEventListener('keydown', onKey, true);
+      document.removeEventListener('mousedown', onPointerDown);
+    };
+  }, [open]);
+
+  const handleChipClick = (e: React.MouseEvent) => {
+    if (!lawId || !href) return;
+    if (e.metaKey || e.ctrlKey) {
+      window.open(href, '_blank', 'noopener,noreferrer');
+      return;
+    }
+    setOpen((prev) => !prev);
+  };
+
+  const openLaw = () => {
+    if (!href) return;
+    navigate(href);
+    setOpen(false);
   };
 
   return (
-    <NodeViewWrapper as="span" className="inline">
+    <NodeViewWrapper as="span" className="relative inline">
       <button
+        ref={buttonRef}
         type="button"
         data-legal-citation=""
         contentEditable={false}
-        onClick={goToSource}
-        title={`${label} — abrir ley`}
+        onClick={handleChipClick}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        title={t('editor.citationChip.openTitle', { label })}
         className={cn(
           'mx-0.5 inline-flex max-w-[22rem] items-center gap-1 rounded align-baseline',
           'bg-primary-soft px-1.5 py-0.5 text-[0.85em] font-medium leading-snug',
@@ -42,11 +99,42 @@ export function CitationChip({ node }: NodeViewProps) {
           'ring-1 ring-inset ring-indigo-300/50 dark:ring-indigo-400/30',
           'transition-colors hover:bg-indigo-100 dark:hover:bg-indigo-500/20',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400',
+          open && 'bg-indigo-100 dark:bg-indigo-500/20',
         )}
       >
         <Scale className="size-3 shrink-0" aria-hidden />
         <span className="truncate">{label}</span>
       </button>
+
+      {open && href && (
+        <div
+          ref={popoverRef}
+          role="dialog"
+          aria-label={t('editor.citationChip.popoverAria', { label })}
+          className="absolute left-0 top-full z-50 mt-1 w-72 rounded-lg border border-border bg-surface p-3 shadow-lg"
+        >
+          <div className="space-y-2">
+            <div>
+              <div className="text-[13px] font-semibold leading-snug">{previewTitle}</div>
+              {articleNum && (
+                <div className="text-[11.5px] text-muted">
+                  {t('editor.citationChip.articleLabel', { num: articleNum })}
+                </div>
+              )}
+            </div>
+            {previewLoading && <p className="text-[12px] text-muted">{t('common.loading')}</p>}
+            {!previewLoading && previewError && (
+              <p className="text-[12px] text-muted">{t('editor.citationChip.previewError')}</p>
+            )}
+            {!previewLoading && !previewError && previewSnippet && (
+              <p className="line-clamp-4 text-[12px] leading-relaxed text-muted">{previewSnippet}</p>
+            )}
+            <Button variant="secondary" size="sm" className="w-full" icon={<ExternalLink className="size-3.5" />} onClick={openLaw}>
+              {t('editor.citationChip.openLaw')}
+            </Button>
+          </div>
+        </div>
+      )}
     </NodeViewWrapper>
   );
 }
diff --git a/frontend/src/pages/editor/template-utils.test.ts b/frontend/src/pages/editor/template-utils.test.ts
index 857cf14..fbd0b11 100644
--- a/frontend/src/pages/editor/template-utils.test.ts
+++ b/frontend/src/pages/editor/template-utils.test.ts
@@ -35,6 +35,22 @@ describe('extractVariables', () => {
   it('returns an empty list when there are no placeholders', () => {
     expect(extractVariables({ type: 'doc', content: [{ type: 'paragraph' }] })).toEqual([]);
   });
+
+  it('finds placeholders split across text nodes with different marks', () => {
+    const split: JSONContent = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: '{{par' },
+            { type: 'text', text: 'te}}', marks: [{ type: 'bold' }] },
+          ],
+        },
+      ],
+    };
+    expect(extractVariables(split)).toEqual(['parte']);
+  });
 });
 
 describe('fillTemplate', () => {
diff --git a/frontend/src/pages/editor/template-utils.ts b/frontend/src/pages/editor/template-utils.ts
index 6a80b08..35d632d 100644
--- a/frontend/src/pages/editor/template-utils.ts
+++ b/frontend/src/pages/editor/template-utils.ts
@@ -19,10 +19,27 @@ const VARIABLE_RE = /\{\{\s*([\w.]+)\s*\}\}/g;
 /** Built-in corpus variables filled from a picked law's metadata. */
 export const LAW_VARIABLE_FIELDS = ['law.id', 'law.title', 'law.short', 'law.boe', 'law.publicada'] as const;
 
-/** Visit every text node in a TipTap document, depth-first. */
-function walkText(node: JSONContent, visit: (text: string) => void): void {
-  if (typeof node.text === 'string') visit(node.text);
-  node.content?.forEach((child) => walkText(child, visit));
+/** Block-level nodes whose text is scanned as one string for placeholder discovery. */
+const BLOCK_TYPES = new Set(['paragraph', 'heading', 'blockquote', 'listItem', 'codeBlock']);
+
+/** Concatenate all text fragments inside a block-level node (handles split marks). */
+function collectBlockText(node: JSONContent): string {
+  const parts: string[] = [];
+  const walk = (n: JSONContent) => {
+    if (typeof n.text === 'string') parts.push(n.text);
+    n.content?.forEach(walk);
+  };
+  walk(node);
+  return parts.join('');
+}
+
+/** Visit each block-level node in a TipTap document, depth-first. */
+function walkBlocks(node: JSONContent, visit: (blockText: string) => void): void {
+  if (node.type && BLOCK_TYPES.has(node.type)) {
+    visit(collectBlockText(node));
+    return;
+  }
+  node.content?.forEach((child) => walkBlocks(child, visit));
 }
 
 /** Deep-clone a document, transforming the text of every text node. */
@@ -36,7 +53,7 @@ function mapText(node: JSONContent, transform: (text: string) => string): JSONCo
 /** Collect the unique `{{variable}}` names used anywhere in the template body. */
 export function extractVariables(content: JSONContent): string[] {
   const names = new Set<string>();
-  walkText(content, (text) => {
+  walkBlocks(content, (text) => {
     for (const match of text.matchAll(VARIABLE_RE)) {
       names.add(match[1]);
     }