From fa1bf52ccddd0a6da31f586067d10c3f2ce065ae Mon Sep 17 00:00:00 2001
From: Francisco Solla <fsolla@pm.me>
Date: Tue, 29 Sep 2026 10:50:43 -0300
Subject: [PATCH] =?UTF-8?q?style(plan):=20C236=20=E2=80=94=20formata=20des?=
 =?UTF-8?q?ign=20HTML=20para=20o=20gate=20de=20push=20(Related=20#1388)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ral-conteudos-acoes-em-lote-ui-design.html | 1921 ++++++++++++++---
 1 file changed, 1639 insertions(+), 282 deletions(-)

diff --git a/docs/plans/central-conteudos-acoes-em-lote-ui-design.html b/docs/plans/central-conteudos-acoes-em-lote-ui-design.html
index 30fe1d5d..5209e04c 100644
--- a/docs/plans/central-conteudos-acoes-em-lote-ui-design.html
+++ b/docs/plans/central-conteudos-acoes-em-lote-ui-design.html
@@ -162,8 +162,8 @@
           class="mt-5 rounded-lg border-2 border-destructive/40 bg-red-50 p-3 text-xs leading-5 text-red-900"
         >
           <b>Este artefato está DEGRADED e não está certificado.</b> Foi produzido pelo tier de
-          fallback (<code>opencode-go/deepseek-v4.1-flash</code>) porque o designer frontier bateu
-          o limite de uso. Nada aqui é design aprovado: é insumo para decisão humana. O
+          fallback (<code>opencode-go/deepseek-v4.1-flash</code>) porque o designer frontier bateu o
+          limite de uso. Nada aqui é design aprovado: é insumo para decisão humana. O
           <b>sign-off humano é obrigatório no gate/PR</b>; o orquestrador registra
           <code>Design tier: DEGRADED (opencode-go/deepseek-v4.1-flash)</code>.
         </div>
@@ -203,7 +203,9 @@
       <section id="desktop-repouso" aria-labelledby="desktop-repouso-title">
         <div class="mb-3 flex items-end justify-between gap-4">
           <div>
-            <p class="text-xs font-medium text-muted-foreground">Cena 1 · desktop ~1280 · repouso</p>
+            <p class="text-xs font-medium text-muted-foreground">
+              Cena 1 · desktop ~1280 · repouso
+            </p>
             <h2 id="desktop-repouso-title" class="mt-1 text-base font-semibold">
               A tabela de hoje não ganha checkbox permanente — o modo de seleção é opt-in
             </h2>
@@ -220,7 +222,9 @@
           >
             <div class="flex h-full">
               <!-- Sidebar ilustrativa (shell) -->
-              <aside class="flex w-56 shrink-0 flex-col border-r border-sidebar-border bg-sidebar p-3">
+              <aside
+                class="flex w-56 shrink-0 flex-col border-r border-sidebar-border bg-sidebar p-3"
+              >
                 <div class="flex h-12 items-center gap-2 px-2">
                   <div
                     class="grid size-8 place-items-center rounded-lg bg-primary text-sm font-bold text-primary-foreground"
@@ -233,8 +237,17 @@
                   </div>
                 </div>
                 <nav class="mt-4 space-y-1 text-sm" aria-label="Navegação ilustrativa">
-                  <div class="flex h-9 items-center gap-2 rounded-md bg-sidebar-accent px-3 font-semibold">
-                    <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <div
+                    class="flex h-9 items-center gap-2 rounded-md bg-sidebar-accent px-3 font-semibold"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
                       <path d="m3 11 18-5v12L3 14v-3Z" />
                       <path d="M11.6 16.9 13 22H7l-1.3-7" />
                     </svg>
@@ -248,7 +261,9 @@
                     </div>
                   </div>
                 </nav>
-                <p class="mt-auto border-t border-sidebar-border px-2 pt-4 text-xs text-muted-foreground">
+                <p
+                  class="mt-auto border-t border-sidebar-border px-2 pt-4 text-xs text-muted-foreground"
+                >
                   Assessoria de comunicação
                 </p>
               </aside>
@@ -324,7 +339,14 @@
                       aria-label="Colunas"
                       class="grid size-11 place-items-center rounded-lg border border-border bg-background"
                     >
-                      <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <svg
+                        aria-hidden="true"
+                        class="size-4"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
                         <rect x="3" y="4" width="18" height="16" rx="2" />
                         <path d="M9 4v16M15 4v16" />
                       </svg>
@@ -337,7 +359,14 @@
                       type="button"
                       class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg border border-border bg-background px-3 text-sm font-medium hover:bg-muted"
                     >
-                      <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <svg
+                        aria-hidden="true"
+                        class="size-4"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
                         <rect x="3" y="3" width="18" height="18" rx="2" />
                         <path d="m9 12 2 2 4-4" />
                       </svg>
@@ -369,37 +398,95 @@
                         <tr>
                           <td class="p-3 align-middle">
                             <div class="flex items-center gap-3">
-                              <span class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500">
-                                <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                              <span
+                                class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-5"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
                                   <path d="m16 13 5 3-5 3v-6Z" />
                                   <rect x="3" y="6" width="13" height="14" rx="2" />
                                 </svg>
                               </span>
                               <div class="min-w-0">
                                 <p class="font-semibold">Peça publicada</p>
-                                <p class="mt-1 truncate text-xs text-muted-foreground">Vídeo · 02:14 · Salvador</p>
+                                <p class="mt-1 truncate text-xs text-muted-foreground">
+                                  Vídeo · 02:14 · Salvador
+                                </p>
                               </div>
                             </div>
                           </td>
                           <td class="p-3">
-                            <span class="inline-flex min-h-5 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800">Pronto</span>
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
+                              >Pronto</span
+                            >
                           </td>
                           <td class="p-3">
-                            <span class="inline-flex min-h-5 items-center rounded-full bg-rose-50 px-2 py-0.5 text-xs font-semibold text-rose-900 ring-1 ring-rose-200">Publicado</span>
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-rose-50 px-2 py-0.5 text-xs font-semibold text-rose-900 ring-1 ring-rose-200"
+                              >Publicado</span
+                            >
                           </td>
                           <td class="p-3">
                             <div class="grid grid-cols-4 gap-4">
-                              <div><span class="block text-[10px] text-muted-foreground">Aberturas</span><span class="mt-1 block text-sm font-semibold tabular-nums">128</span></div>
-                              <div><span class="block text-[10px] text-muted-foreground">Downloads</span><span class="mt-1 block text-sm font-semibold tabular-nums">12</span></div>
-                              <div><span class="block text-[10px] text-muted-foreground">WhatsApp</span><span class="mt-1 block text-sm font-semibold tabular-nums">6</span></div>
-                              <div><span class="block text-[10px] text-muted-foreground">Link</span><span class="mt-1 block text-sm font-semibold tabular-nums">3</span></div>
+                              <div>
+                                <span class="block text-[10px] text-muted-foreground"
+                                  >Aberturas</span
+                                ><span class="mt-1 block text-sm font-semibold tabular-nums"
+                                  >128</span
+                                >
+                              </div>
+                              <div>
+                                <span class="block text-[10px] text-muted-foreground"
+                                  >Downloads</span
+                                ><span class="mt-1 block text-sm font-semibold tabular-nums"
+                                  >12</span
+                                >
+                              </div>
+                              <div>
+                                <span class="block text-[10px] text-muted-foreground">WhatsApp</span
+                                ><span class="mt-1 block text-sm font-semibold tabular-nums"
+                                  >6</span
+                                >
+                              </div>
+                              <div>
+                                <span class="block text-[10px] text-muted-foreground">Link</span
+                                ><span class="mt-1 block text-sm font-semibold tabular-nums"
+                                  >3</span
+                                >
+                              </div>
                             </div>
                           </td>
                           <td class="p-3 text-right">
                             <div class="flex items-center justify-end gap-2">
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium">Abrir</button>
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50">
-                                <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                              >
+                                Abrir
+                              </button>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-4"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="M3 6h18" />
+                                  <path d="M8 6V4h8v2" />
+                                  <path d="m19 6-1 14H6L5 6" />
+                                </svg>
                                 Apagar
                               </button>
                             </div>
@@ -410,29 +497,71 @@
                         <tr>
                           <td class="p-3 align-middle">
                             <div class="flex items-center gap-3">
-                              <span class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500">
-                                <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" /></svg>
+                              <span
+                                class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-5"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <rect x="3" y="3" width="18" height="18" rx="2" />
+                                  <circle cx="9" cy="9" r="2" />
+                                  <path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" />
+                                </svg>
                               </span>
                               <div class="min-w-0">
                                 <p class="font-semibold">Peça em rascunho</p>
-                                <p class="mt-1 truncate text-xs text-muted-foreground">Card · Feira de Santana</p>
+                                <p class="mt-1 truncate text-xs text-muted-foreground">
+                                  Card · Feira de Santana
+                                </p>
                               </div>
                             </div>
                           </td>
                           <td class="p-3">
-                            <span class="inline-flex min-h-5 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800">Pronto</span>
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
+                              >Pronto</span
+                            >
                           </td>
                           <td class="p-3">
-                            <span class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground">Rascunho</span>
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground"
+                              >Rascunho</span
+                            >
                           </td>
                           <td class="p-3">
-                            <span class="text-xs text-muted-foreground">Sem dados — ainda não publicada</span>
+                            <span class="text-xs text-muted-foreground"
+                              >Sem dados — ainda não publicada</span
+                            >
                           </td>
                           <td class="p-3 text-right">
                             <div class="flex items-center justify-end gap-2">
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium">Abrir</button>
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50">
-                                <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                              >
+                                Abrir
+                              </button>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-4"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="M3 6h18" />
+                                  <path d="M8 6V4h8v2" />
+                                  <path d="m19 6-1 14H6L5 6" />
+                                </svg>
                                 Apagar
                               </button>
                             </div>
@@ -443,33 +572,84 @@
                         <tr>
                           <td class="p-3 align-middle">
                             <div class="flex items-center gap-3">
-                              <span class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500">
-                                <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" /><path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3" /></svg>
+                              <span
+                                class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-5"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+                                  <path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3" />
+                                </svg>
                               </span>
                               <div class="min-w-0">
                                 <p class="font-semibold">Peça com falha</p>
-                                <p class="mt-1 truncate text-xs text-muted-foreground">Áudio · 01:05 · Vitória da Conquista</p>
+                                <p class="mt-1 truncate text-xs text-muted-foreground">
+                                  Áudio · 01:05 · Vitória da Conquista
+                                </p>
                               </div>
                             </div>
                           </td>
                           <td class="p-3">
-                            <span class="inline-flex min-h-5 items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700">Falhou</span>
-                            <p class="mt-1 max-w-56 text-xs text-red-800">Não foi possível transcrever a peça.</p>
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700"
+                              >Falhou</span
+                            >
+                            <p class="mt-1 max-w-56 text-xs text-red-800">
+                              Não foi possível transcrever a peça.
+                            </p>
                           </td>
                           <td class="p-3">
-                            <span class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground">Rascunho</span>
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground"
+                              >Rascunho</span
+                            >
                           </td>
                           <td class="p-3">
-                            <span class="text-xs text-muted-foreground">Sem dados — ainda não publicada</span>
+                            <span class="text-xs text-muted-foreground"
+                              >Sem dados — ainda não publicada</span
+                            >
                           </td>
                           <td class="p-3 text-right">
                             <div class="flex items-center justify-end gap-2">
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground">
-                                <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6v6h-6" /><path d="M20 12a8 8 0 1 0-2.34 5.66" /></svg>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-4"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="M20 6v6h-6" />
+                                  <path d="M20 12a8 8 0 1 0-2.34 5.66" />
+                                </svg>
                                 Reprocessar
                               </button>
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50">
-                                <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-4"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="M3 6h18" />
+                                  <path d="M8 6V4h8v2" />
+                                  <path d="m19 6-1 14H6L5 6" />
+                                </svg>
                                 Apagar
                               </button>
                             </div>
@@ -480,30 +660,71 @@
                         <tr>
                           <td class="p-3 align-middle">
                             <div class="flex items-center gap-3">
-                              <span class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500">
-                                <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m16 13 5 3-5 3v-6Z" /><rect x="3" y="6" width="13" height="14" rx="2" /></svg>
+                              <span
+                                class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-5"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="m16 13 5 3-5 3v-6Z" />
+                                  <rect x="3" y="6" width="13" height="14" rx="2" />
+                                </svg>
                               </span>
                               <div class="min-w-0">
                                 <p class="font-semibold">Peça em processamento</p>
-                                <p class="mt-1 truncate text-xs text-muted-foreground">Vídeo · 03:40 · Itabuna</p>
+                                <p class="mt-1 truncate text-xs text-muted-foreground">
+                                  Vídeo · 03:40 · Itabuna
+                                </p>
                               </div>
                             </div>
                           </td>
                           <td class="p-3">
-                            <span class="inline-flex min-h-5 items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-900">Processando</span>
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-900"
+                              >Processando</span
+                            >
                             <p class="mt-1 text-xs text-muted-foreground">Transcrevendo a peça</p>
                           </td>
                           <td class="p-3">
-                            <span class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground">Rascunho</span>
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground"
+                              >Rascunho</span
+                            >
                           </td>
                           <td class="p-3">
-                            <span class="text-xs text-muted-foreground">Sem dados — ainda não publicada</span>
+                            <span class="text-xs text-muted-foreground"
+                              >Sem dados — ainda não publicada</span
+                            >
                           </td>
                           <td class="p-3 text-right">
                             <div class="flex items-center justify-end gap-2">
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium">Abrir</button>
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50">
-                                <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                              >
+                                Abrir
+                              </button>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-4"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="M3 6h18" />
+                                  <path d="M8 6V4h8v2" />
+                                  <path d="m19 6-1 14H6L5 6" />
+                                </svg>
                                 Apagar
                               </button>
                             </div>
@@ -516,13 +737,50 @@
                   <div class="mt-3 flex flex-col items-center gap-2">
                     <p class="text-sm text-muted-foreground">12 peças</p>
                     <div class="flex items-center gap-1">
-                      <button type="button" aria-label="Ir para a página anterior" class="grid min-h-11 min-w-11 place-items-center rounded-lg text-muted-foreground opacity-50">
-                        <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6" /></svg>
+                      <button
+                        type="button"
+                        aria-label="Ir para a página anterior"
+                        class="grid min-h-11 min-w-11 place-items-center rounded-lg text-muted-foreground opacity-50"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="size-4"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        >
+                          <path d="m15 18-6-6 6-6" />
+                        </svg>
                       </button>
-                      <button type="button" aria-current="page" class="grid min-h-11 min-w-11 place-items-center rounded-lg border border-border bg-background text-sm font-medium">1</button>
-                      <button type="button" class="grid min-h-11 min-w-11 place-items-center rounded-lg text-sm">2</button>
-                      <button type="button" aria-label="Ir para a próxima página" class="grid min-h-11 min-w-11 place-items-center rounded-lg">
-                        <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6" /></svg>
+                      <button
+                        type="button"
+                        aria-current="page"
+                        class="grid min-h-11 min-w-11 place-items-center rounded-lg border border-border bg-background text-sm font-medium"
+                      >
+                        1
+                      </button>
+                      <button
+                        type="button"
+                        class="grid min-h-11 min-w-11 place-items-center rounded-lg text-sm"
+                      >
+                        2
+                      </button>
+                      <button
+                        type="button"
+                        aria-label="Ir para a próxima página"
+                        class="grid min-h-11 min-w-11 place-items-center rounded-lg"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="size-4"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        >
+                          <path d="m9 18 6-6-6-6" />
+                        </svg>
                       </button>
                     </div>
                   </div>
@@ -539,9 +797,12 @@
       <section id="desktop-selecao" aria-labelledby="desktop-selecao-title">
         <div class="mb-3 flex items-end justify-between gap-4">
           <div>
-            <p class="text-xs font-medium text-muted-foreground">Cena 2 · desktop ~1280 · seleção ativa</p>
+            <p class="text-xs font-medium text-muted-foreground">
+              Cena 2 · desktop ~1280 · seleção ativa
+            </p>
             <h2 id="desktop-selecao-title" class="mt-1 text-base font-semibold">
-              Checkbox por linha, “selecionar todas da página” no cabeçalho e a barra com N selecionadas
+              Checkbox por linha, “selecionar todas da página” no cabeçalho e a barra com N
+              selecionadas
             </h2>
           </div>
           <p class="hidden max-w-md text-right text-xs leading-5 text-muted-foreground md:block">
@@ -555,24 +816,50 @@
             class="scene-shadow relative mx-auto h-[820px] w-[1280px] overflow-hidden rounded-xl border border-border bg-background"
           >
             <div class="flex h-full">
-              <aside class="flex w-56 shrink-0 flex-col border-r border-sidebar-border bg-sidebar p-3">
+              <aside
+                class="flex w-56 shrink-0 flex-col border-r border-sidebar-border bg-sidebar p-3"
+              >
                 <div class="flex h-12 items-center gap-2 px-2">
-                  <div class="grid size-8 place-items-center rounded-lg bg-primary text-sm font-bold text-primary-foreground">S</div>
+                  <div
+                    class="grid size-8 place-items-center rounded-lg bg-primary text-sm font-bold text-primary-foreground"
+                  >
+                    S
+                  </div>
                   <div>
                     <p class="text-sm font-semibold">Solla</p>
                     <p class="text-xs text-muted-foreground">Campanha</p>
                   </div>
                 </div>
                 <nav class="mt-4 space-y-1 text-sm" aria-label="Navegação ilustrativa">
-                  <div class="flex h-9 items-center gap-2 rounded-md bg-sidebar-accent px-3 font-semibold">
-                    <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m3 11 18-5v12L3 14v-3Z" /><path d="M11.6 16.9 13 22H7l-1.3-7" /></svg>
+                  <div
+                    class="flex h-9 items-center gap-2 rounded-md bg-sidebar-accent px-3 font-semibold"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <path d="m3 11 18-5v12L3 14v-3Z" />
+                      <path d="M11.6 16.9 13 22H7l-1.3-7" />
+                    </svg>
                     Comunicação
                   </div>
                   <div class="ml-4 border-l border-sidebar-border pl-3">
-                    <div class="mt-1 flex h-9 items-center rounded-md bg-card px-3 font-semibold text-primary ring-1 ring-border">Conteúdos</div>
+                    <div
+                      class="mt-1 flex h-9 items-center rounded-md bg-card px-3 font-semibold text-primary ring-1 ring-border"
+                    >
+                      Conteúdos
+                    </div>
                   </div>
                 </nav>
-                <p class="mt-auto border-t border-sidebar-border px-2 pt-4 text-xs text-muted-foreground">Assessoria de comunicação</p>
+                <p
+                  class="mt-auto border-t border-sidebar-border px-2 pt-4 text-xs text-muted-foreground"
+                >
+                  Assessoria de comunicação
+                </p>
               </aside>
 
               <div class="relative min-w-0 flex-1">
@@ -593,30 +880,98 @@
                       </p>
                     </div>
                     <div class="flex items-center gap-2">
-                      <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium">Adicionar por link</button>
-                      <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground">Enviar peças</button>
+                      <button
+                        type="button"
+                        class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                      >
+                        Adicionar por link
+                      </button>
+                      <button
+                        type="button"
+                        class="inline-flex min-h-11 items-center justify-center rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
+                      >
+                        Enviar peças
+                      </button>
                     </div>
                   </div>
 
                   <div class="mt-6 flex items-center gap-3">
                     <div class="relative flex-1">
-                      <svg aria-hidden="true" class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
-                      <input readonly aria-label="Buscar conteúdos" placeholder="Buscar por título, tema ou cidade…" class="h-11 w-full rounded-md border border-input bg-background pl-9 pr-3 text-sm outline-none placeholder:text-muted-foreground" />
+                      <svg
+                        aria-hidden="true"
+                        class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
+                        <circle cx="11" cy="11" r="8" />
+                        <path d="m21 21-4.3-4.3" />
+                      </svg>
+                      <input
+                        readonly
+                        aria-label="Buscar conteúdos"
+                        placeholder="Buscar por título, tema ou cidade…"
+                        class="h-11 w-full rounded-md border border-input bg-background pl-9 pr-3 text-sm outline-none placeholder:text-muted-foreground"
+                      />
                     </div>
-                    <button type="button" class="inline-flex h-11 items-center justify-center gap-1.5 rounded-lg border border-border bg-background px-3 text-sm font-medium">Filtros</button>
-                    <button type="button" aria-label="Colunas" class="grid size-11 place-items-center rounded-lg border border-border bg-background">
-                      <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M9 4v16M15 4v16" /></svg>
+                    <button
+                      type="button"
+                      class="inline-flex h-11 items-center justify-center gap-1.5 rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                    >
+                      Filtros
+                    </button>
+                    <button
+                      type="button"
+                      aria-label="Colunas"
+                      class="grid size-11 place-items-center rounded-lg border border-border bg-background"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="size-4"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
+                        <rect x="3" y="4" width="18" height="16" rx="2" />
+                        <path d="M9 4v16M15 4v16" />
+                      </svg>
                     </button>
                   </div>
 
                   <!-- Topo da lista: em modo seleção, o mesmo lugar oferece sair -->
                   <div class="mt-4 flex items-center justify-between gap-3">
-                    <span class="inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
-                      <svg aria-hidden="true" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="m9 12 2 2 4-4" /></svg>
+                    <span
+                      class="inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="size-3.5"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
+                        <rect x="3" y="3" width="18" height="18" rx="2" />
+                        <path d="m9 12 2 2 4-4" />
+                      </svg>
                       Modo de seleção
                     </span>
-                    <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground">
-                      <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12" /></svg>
+                    <button
+                      type="button"
+                      class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="size-4"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
+                        <path d="M18 6 6 18M6 6l12 12" />
+                      </svg>
                       Cancelar seleção
                     </button>
                   </div>
@@ -631,8 +986,21 @@
                         <tr class="border-b border-border">
                           <th class="w-12 p-3">
                             <span class="grid size-9 place-items-center">
-                              <span class="sel-box" data-state="indeterminate" role="img" aria-label="Selecionar todas as peças desta página">
-                                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M8 12h8" /></svg>
+                              <span
+                                class="sel-box"
+                                data-state="indeterminate"
+                                role="img"
+                                aria-label="Selecionar todas as peças desta página"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="3"
+                                >
+                                  <path d="M8 12h8" />
+                                </svg>
                               </span>
                             </span>
                           </th>
@@ -648,37 +1016,116 @@
                         <tr class="bg-primary/5">
                           <td class="p-3 align-middle">
                             <span class="grid size-9 place-items-center">
-                              <span class="sel-box" data-state="checked" role="checkbox" aria-checked="true" aria-label="Selecionar Peça publicada">
-                                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
+                              <span
+                                class="sel-box"
+                                data-state="checked"
+                                role="checkbox"
+                                aria-checked="true"
+                                aria-label="Selecionar Peça publicada"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="3"
+                                >
+                                  <path d="M20 6 9 17l-5-5" />
+                                </svg>
                               </span>
                             </span>
                           </td>
                           <td class="p-3 align-middle">
                             <div class="flex items-center gap-3">
-                              <span class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500">
-                                <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m16 13 5 3-5 3v-6Z" /><rect x="3" y="6" width="13" height="14" rx="2" /></svg>
+                              <span
+                                class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-5"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="m16 13 5 3-5 3v-6Z" />
+                                  <rect x="3" y="6" width="13" height="14" rx="2" />
+                                </svg>
                               </span>
                               <div class="min-w-0">
                                 <p class="font-semibold">Peça publicada</p>
-                                <p class="mt-1 truncate text-xs text-muted-foreground">Vídeo · 02:14 · Salvador</p>
+                                <p class="mt-1 truncate text-xs text-muted-foreground">
+                                  Vídeo · 02:14 · Salvador
+                                </p>
                               </div>
                             </div>
                           </td>
-                          <td class="p-3"><span class="inline-flex min-h-5 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800">Pronto</span></td>
-                          <td class="p-3"><span class="inline-flex min-h-5 items-center rounded-full bg-rose-50 px-2 py-0.5 text-xs font-semibold text-rose-900 ring-1 ring-rose-200">Publicado</span></td>
+                          <td class="p-3">
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
+                              >Pronto</span
+                            >
+                          </td>
+                          <td class="p-3">
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-rose-50 px-2 py-0.5 text-xs font-semibold text-rose-900 ring-1 ring-rose-200"
+                              >Publicado</span
+                            >
+                          </td>
                           <td class="p-3">
                             <div class="grid grid-cols-4 gap-3">
-                              <div><span class="block text-[10px] text-muted-foreground">Aberturas</span><span class="mt-1 block text-sm font-semibold tabular-nums">128</span></div>
-                              <div><span class="block text-[10px] text-muted-foreground">Downloads</span><span class="mt-1 block text-sm font-semibold tabular-nums">12</span></div>
-                              <div><span class="block text-[10px] text-muted-foreground">WhatsApp</span><span class="mt-1 block text-sm font-semibold tabular-nums">6</span></div>
-                              <div><span class="block text-[10px] text-muted-foreground">Link</span><span class="mt-1 block text-sm font-semibold tabular-nums">3</span></div>
+                              <div>
+                                <span class="block text-[10px] text-muted-foreground"
+                                  >Aberturas</span
+                                ><span class="mt-1 block text-sm font-semibold tabular-nums"
+                                  >128</span
+                                >
+                              </div>
+                              <div>
+                                <span class="block text-[10px] text-muted-foreground"
+                                  >Downloads</span
+                                ><span class="mt-1 block text-sm font-semibold tabular-nums"
+                                  >12</span
+                                >
+                              </div>
+                              <div>
+                                <span class="block text-[10px] text-muted-foreground">WhatsApp</span
+                                ><span class="mt-1 block text-sm font-semibold tabular-nums"
+                                  >6</span
+                                >
+                              </div>
+                              <div>
+                                <span class="block text-[10px] text-muted-foreground">Link</span
+                                ><span class="mt-1 block text-sm font-semibold tabular-nums"
+                                  >3</span
+                                >
+                              </div>
                             </div>
                           </td>
                           <td class="p-3 text-right">
                             <div class="flex items-center justify-end gap-2">
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium">Abrir</button>
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50">
-                                <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                              >
+                                Abrir
+                              </button>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-4"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="M3 6h18" />
+                                  <path d="M8 6V4h8v2" />
+                                  <path d="m19 6-1 14H6L5 6" />
+                                </svg>
                                 Apagar
                               </button>
                             </div>
@@ -689,30 +1136,92 @@
                         <tr class="bg-primary/5">
                           <td class="p-3 align-middle">
                             <span class="grid size-9 place-items-center">
-                              <span class="sel-box" data-state="checked" role="checkbox" aria-checked="true" aria-label="Selecionar Peça em rascunho">
-                                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
+                              <span
+                                class="sel-box"
+                                data-state="checked"
+                                role="checkbox"
+                                aria-checked="true"
+                                aria-label="Selecionar Peça em rascunho"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="3"
+                                >
+                                  <path d="M20 6 9 17l-5-5" />
+                                </svg>
                               </span>
                             </span>
                           </td>
                           <td class="p-3 align-middle">
                             <div class="flex items-center gap-3">
-                              <span class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500">
-                                <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" /></svg>
+                              <span
+                                class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-5"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <rect x="3" y="3" width="18" height="18" rx="2" />
+                                  <circle cx="9" cy="9" r="2" />
+                                  <path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" />
+                                </svg>
                               </span>
                               <div class="min-w-0">
                                 <p class="font-semibold">Peça em rascunho</p>
-                                <p class="mt-1 truncate text-xs text-muted-foreground">Card · Feira de Santana</p>
+                                <p class="mt-1 truncate text-xs text-muted-foreground">
+                                  Card · Feira de Santana
+                                </p>
                               </div>
                             </div>
                           </td>
-                          <td class="p-3"><span class="inline-flex min-h-5 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800">Pronto</span></td>
-                          <td class="p-3"><span class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground">Rascunho</span></td>
-                          <td class="p-3"><span class="text-xs text-muted-foreground">Sem dados — ainda não publicada</span></td>
+                          <td class="p-3">
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
+                              >Pronto</span
+                            >
+                          </td>
+                          <td class="p-3">
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground"
+                              >Rascunho</span
+                            >
+                          </td>
+                          <td class="p-3">
+                            <span class="text-xs text-muted-foreground"
+                              >Sem dados — ainda não publicada</span
+                            >
+                          </td>
                           <td class="p-3 text-right">
                             <div class="flex items-center justify-end gap-2">
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium">Abrir</button>
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50">
-                                <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                              >
+                                Abrir
+                              </button>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-4"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="M3 6h18" />
+                                  <path d="M8 6V4h8v2" />
+                                  <path d="m19 6-1 14H6L5 6" />
+                                </svg>
                                 Apagar
                               </button>
                             </div>
@@ -723,36 +1232,105 @@
                         <tr class="bg-primary/5">
                           <td class="p-3 align-middle">
                             <span class="grid size-9 place-items-center">
-                              <span class="sel-box" data-state="checked" role="checkbox" aria-checked="true" aria-label="Selecionar Peça com falha">
-                                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
+                              <span
+                                class="sel-box"
+                                data-state="checked"
+                                role="checkbox"
+                                aria-checked="true"
+                                aria-label="Selecionar Peça com falha"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="3"
+                                >
+                                  <path d="M20 6 9 17l-5-5" />
+                                </svg>
                               </span>
                             </span>
                           </td>
                           <td class="p-3 align-middle">
                             <div class="flex items-center gap-3">
-                              <span class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500">
-                                <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" /><path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3" /></svg>
+                              <span
+                                class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-5"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+                                  <path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3" />
+                                </svg>
                               </span>
                               <div class="min-w-0">
                                 <p class="font-semibold">Peça com falha</p>
-                                <p class="mt-1 truncate text-xs text-muted-foreground">Áudio · 01:05 · Vitória da Conquista</p>
+                                <p class="mt-1 truncate text-xs text-muted-foreground">
+                                  Áudio · 01:05 · Vitória da Conquista
+                                </p>
                               </div>
                             </div>
                           </td>
                           <td class="p-3">
-                            <span class="inline-flex min-h-5 items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700">Falhou</span>
-                            <p class="mt-1 max-w-56 text-xs text-red-800">Não foi possível transcrever a peça.</p>
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700"
+                              >Falhou</span
+                            >
+                            <p class="mt-1 max-w-56 text-xs text-red-800">
+                              Não foi possível transcrever a peça.
+                            </p>
+                          </td>
+                          <td class="p-3">
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground"
+                              >Rascunho</span
+                            >
+                          </td>
+                          <td class="p-3">
+                            <span class="text-xs text-muted-foreground"
+                              >Sem dados — ainda não publicada</span
+                            >
                           </td>
-                          <td class="p-3"><span class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground">Rascunho</span></td>
-                          <td class="p-3"><span class="text-xs text-muted-foreground">Sem dados — ainda não publicada</span></td>
                           <td class="p-3 text-right">
                             <div class="flex items-center justify-end gap-2">
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground">
-                                <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6v6h-6" /><path d="M20 12a8 8 0 1 0-2.34 5.66" /></svg>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-4"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="M20 6v6h-6" />
+                                  <path d="M20 12a8 8 0 1 0-2.34 5.66" />
+                                </svg>
                                 Reprocessar
                               </button>
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50">
-                                <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-4"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="M3 6h18" />
+                                  <path d="M8 6V4h8v2" />
+                                  <path d="m19 6-1 14H6L5 6" />
+                                </svg>
                                 Apagar
                               </button>
                             </div>
@@ -763,31 +1341,82 @@
                         <tr>
                           <td class="p-3 align-middle">
                             <span class="grid size-9 place-items-center">
-                              <span class="sel-box" data-state="unchecked" role="checkbox" aria-checked="false" aria-label="Selecionar Peça em processamento"></span>
+                              <span
+                                class="sel-box"
+                                data-state="unchecked"
+                                role="checkbox"
+                                aria-checked="false"
+                                aria-label="Selecionar Peça em processamento"
+                              ></span>
                             </span>
                           </td>
                           <td class="p-3 align-middle">
                             <div class="flex items-center gap-3">
-                              <span class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500">
-                                <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m16 13 5 3-5 3v-6Z" /><rect x="3" y="6" width="13" height="14" rx="2" /></svg>
+                              <span
+                                class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-5"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="m16 13 5 3-5 3v-6Z" />
+                                  <rect x="3" y="6" width="13" height="14" rx="2" />
+                                </svg>
                               </span>
                               <div class="min-w-0">
                                 <p class="font-semibold">Peça em processamento</p>
-                                <p class="mt-1 truncate text-xs text-muted-foreground">Vídeo · 03:40 · Itabuna</p>
+                                <p class="mt-1 truncate text-xs text-muted-foreground">
+                                  Vídeo · 03:40 · Itabuna
+                                </p>
                               </div>
                             </div>
                           </td>
                           <td class="p-3">
-                            <span class="inline-flex min-h-5 items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-900">Processando</span>
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-900"
+                              >Processando</span
+                            >
                             <p class="mt-1 text-xs text-muted-foreground">Transcrevendo a peça</p>
                           </td>
-                          <td class="p-3"><span class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground">Rascunho</span></td>
-                          <td class="p-3"><span class="text-xs text-muted-foreground">Sem dados — ainda não publicada</span></td>
+                          <td class="p-3">
+                            <span
+                              class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground"
+                              >Rascunho</span
+                            >
+                          </td>
+                          <td class="p-3">
+                            <span class="text-xs text-muted-foreground"
+                              >Sem dados — ainda não publicada</span
+                            >
+                          </td>
                           <td class="p-3 text-right">
                             <div class="flex items-center justify-end gap-2">
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium">Abrir</button>
-                              <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50">
-                                <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                              >
+                                Abrir
+                              </button>
+                              <button
+                                type="button"
+                                class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="size-4"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                >
+                                  <path d="M3 6h18" />
+                                  <path d="M8 6V4h8v2" />
+                                  <path d="m19 6-1 14H6L5 6" />
+                                </svg>
                                 Apagar
                               </button>
                             </div>
@@ -800,21 +1429,61 @@
 
                 <!-- BARRA DE AÇÕES — flutua no rodapé do conteúdo -->
                 <div class="absolute inset-x-6 bottom-6">
-                  <div class="bar-shadow flex items-center justify-between gap-4 rounded-xl border border-border bg-card px-3 py-2.5">
+                  <div
+                    class="bar-shadow flex items-center justify-between gap-4 rounded-xl border border-border bg-card px-3 py-2.5"
+                  >
                     <p class="text-sm font-medium tabular-nums" role="status" aria-live="polite">
                       3 selecionadas
                     </p>
                     <div class="flex items-center gap-2">
-                      <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground">
-                        <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m5 12 5 5L20 7" /></svg>
+                      <button
+                        type="button"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="size-4"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        >
+                          <path d="m5 12 5 5L20 7" />
+                        </svg>
                         Publicar
                       </button>
-                      <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg border border-border bg-background px-3 text-sm font-medium hover:bg-muted">
-                        <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 2H7a2 2 0 0 0-2 2v16l7-3 7 3V4a2 2 0 0 0-2-2Z" /></svg>
+                      <button
+                        type="button"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg border border-border bg-background px-3 text-sm font-medium hover:bg-muted"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="size-4"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        >
+                          <path d="M17 2H7a2 2 0 0 0-2 2v16l7-3 7 3V4a2 2 0 0 0-2-2Z" />
+                        </svg>
                         Despublicar
                       </button>
-                      <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-destructive/10 px-3 text-sm font-medium text-destructive hover:bg-destructive/20">
-                        <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                      <button
+                        type="button"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-destructive/10 px-3 text-sm font-medium text-destructive hover:bg-destructive/20"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="size-4"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        >
+                          <path d="M3 6h18" />
+                          <path d="M8 6V4h8v2" />
+                          <path d="m19 6-1 14H6L5 6" />
+                        </svg>
                         Apagar
                       </button>
                     </div>
@@ -831,21 +1500,41 @@
         </div>
 
         <!-- DETALHE — estado do checkbox do cabeçalho -->
-        <div class="mt-4 flex flex-wrap items-center gap-6 rounded-xl border border-border bg-card p-4">
-          <p class="text-xs font-medium text-muted-foreground">Detalhe · checkbox “selecionar todas da página”</p>
+        <div
+          class="mt-4 flex flex-wrap items-center gap-6 rounded-xl border border-border bg-card p-4"
+        >
+          <p class="text-xs font-medium text-muted-foreground">
+            Detalhe · checkbox “selecionar todas da página”
+          </p>
           <div class="flex items-center gap-6">
             <span class="flex items-center gap-2 text-xs">
               <span class="sel-box" data-state="unchecked"></span> nenhuma
             </span>
             <span class="flex items-center gap-2 text-xs">
               <span class="sel-box" data-state="indeterminate">
-                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M8 12h8" /></svg>
+                <svg
+                  aria-hidden="true"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                >
+                  <path d="M8 12h8" />
+                </svg>
               </span>
               parcial (indeterminate)
             </span>
             <span class="flex items-center gap-2 text-xs">
               <span class="sel-box" data-state="checked">
-                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
+                <svg
+                  aria-hidden="true"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                >
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
               </span>
               todas as 4
             </span>
@@ -862,7 +1551,9 @@
       <!-- ==================================================================== -->
       <section id="mobile" aria-labelledby="mobile-title">
         <div class="mb-3">
-          <p class="text-xs font-medium text-muted-foreground">Cena 3 · mobile ~390 · repouso e seleção ativa</p>
+          <p class="text-xs font-medium text-muted-foreground">
+            Cena 3 · mobile ~390 · repouso e seleção ativa
+          </p>
           <h2 id="mobile-title" class="mt-1 text-base font-semibold">
             No celular o checkbox vive no card e a barra cabe em 390, com alvos ≥44px
           </h2>
@@ -871,24 +1562,67 @@
         <div class="flex flex-wrap items-start justify-center gap-8">
           <!-- MOBILE — REPOUSO -->
           <div class="w-full max-w-[390px]">
-            <p class="mb-2 text-xs font-medium text-muted-foreground">3a · repouso — sem checkbox</p>
-            <div class="scene-shadow mx-auto w-full max-w-[390px] overflow-hidden rounded-[28px] border-[6px] border-stone-800 bg-background">
-              <div class="flex h-14 items-center justify-between bg-primary px-4 text-primary-foreground">
+            <p class="mb-2 text-xs font-medium text-muted-foreground">
+              3a · repouso — sem checkbox
+            </p>
+            <div
+              class="scene-shadow mx-auto w-full max-w-[390px] overflow-hidden rounded-[28px] border-[6px] border-stone-800 bg-background"
+            >
+              <div
+                class="flex h-14 items-center justify-between bg-primary px-4 text-primary-foreground"
+              >
                 <button aria-label="Abrir menu" class="grid size-10 place-items-center rounded-lg">
-                  <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
+                  <svg
+                    aria-hidden="true"
+                    class="size-5"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="M4 6h16M4 12h16M4 18h16" />
+                  </svg>
                 </button>
                 <span class="text-sm font-semibold">Conteúdos</span>
                 <div class="size-10"></div>
               </div>
               <div class="p-4">
-                <button type="button" class="inline-flex min-h-11 w-full items-center justify-center rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground">Enviar peças</button>
-                <button type="button" class="mt-2 inline-flex min-h-11 w-full items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium">Adicionar link</button>
-                <input readonly aria-label="Buscar conteúdos" placeholder="Buscar conteúdos…" class="mt-3 h-11 w-full rounded-md border border-input bg-background px-3 text-base outline-none placeholder:text-muted-foreground" />
+                <button
+                  type="button"
+                  class="inline-flex min-h-11 w-full items-center justify-center rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
+                >
+                  Enviar peças
+                </button>
+                <button
+                  type="button"
+                  class="mt-2 inline-flex min-h-11 w-full items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                >
+                  Adicionar link
+                </button>
+                <input
+                  readonly
+                  aria-label="Buscar conteúdos"
+                  placeholder="Buscar conteúdos…"
+                  class="mt-3 h-11 w-full rounded-md border border-input bg-background px-3 text-base outline-none placeholder:text-muted-foreground"
+                />
 
                 <!-- affordance de entrada em seleção — alinhado à direita, discreto -->
                 <div class="mt-3 flex items-center justify-end">
-                  <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg border border-border bg-background px-3 text-sm font-medium">
-                    <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="m9 12 2 2 4-4" /></svg>
+                  <button
+                    type="button"
+                    class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <rect x="3" y="3" width="18" height="18" rx="2" />
+                      <path d="m9 12 2 2 4-4" />
+                    </svg>
                     Selecionar
                   </button>
                 </div>
@@ -897,22 +1631,61 @@
                   <article class="rounded-xl border border-border bg-card p-4">
                     <div class="flex items-start justify-between gap-3">
                       <p class="text-sm font-semibold">Peça publicada</p>
-                      <span class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800">Pronto</span>
+                      <span
+                        class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
+                        >Pronto</span
+                      >
                     </div>
-                    <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                      <span class="inline-flex min-h-5 items-center rounded-full bg-rose-50 px-2 py-0.5 font-semibold text-rose-900 ring-1 ring-rose-200">Publicado</span>
+                    <div
+                      class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground"
+                    >
+                      <span
+                        class="inline-flex min-h-5 items-center rounded-full bg-rose-50 px-2 py-0.5 font-semibold text-rose-900 ring-1 ring-rose-200"
+                        >Publicado</span
+                      >
                       <span>Vídeo · 02:14</span>
                     </div>
                     <div class="mt-4 grid grid-cols-2 gap-px overflow-hidden rounded-lg bg-border">
-                      <div class="bg-card p-3"><span class="text-[10px] text-muted-foreground">Aberturas</span><span class="mt-1 block text-sm font-semibold tabular-nums">128</span></div>
-                      <div class="bg-card p-3"><span class="text-[10px] text-muted-foreground">Downloads</span><span class="mt-1 block text-sm font-semibold tabular-nums">12</span></div>
-                      <div class="bg-card p-3"><span class="text-[10px] text-muted-foreground">WhatsApp</span><span class="mt-1 block text-sm font-semibold tabular-nums">6</span></div>
-                      <div class="bg-card p-3"><span class="text-[10px] text-muted-foreground">Link</span><span class="mt-1 block text-sm font-semibold tabular-nums">3</span></div>
+                      <div class="bg-card p-3">
+                        <span class="text-[10px] text-muted-foreground">Aberturas</span
+                        ><span class="mt-1 block text-sm font-semibold tabular-nums">128</span>
+                      </div>
+                      <div class="bg-card p-3">
+                        <span class="text-[10px] text-muted-foreground">Downloads</span
+                        ><span class="mt-1 block text-sm font-semibold tabular-nums">12</span>
+                      </div>
+                      <div class="bg-card p-3">
+                        <span class="text-[10px] text-muted-foreground">WhatsApp</span
+                        ><span class="mt-1 block text-sm font-semibold tabular-nums">6</span>
+                      </div>
+                      <div class="bg-card p-3">
+                        <span class="text-[10px] text-muted-foreground">Link</span
+                        ><span class="mt-1 block text-sm font-semibold tabular-nums">3</span>
+                      </div>
                     </div>
                     <div class="mt-3 grid grid-cols-[1fr_auto] gap-2">
-                      <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium">Abrir</button>
-                      <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive hover:bg-red-50">
-                        <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                      <button
+                        type="button"
+                        class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                      >
+                        Abrir
+                      </button>
+                      <button
+                        type="button"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive hover:bg-red-50"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="size-4"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        >
+                          <path d="M3 6h18" />
+                          <path d="M8 6V4h8v2" />
+                          <path d="m19 6-1 14H6L5 6" />
+                        </svg>
                         Apagar
                       </button>
                     </div>
@@ -921,16 +1694,43 @@
                   <article class="rounded-xl border border-border bg-card p-4">
                     <div class="flex items-start justify-between gap-3">
                       <p class="text-sm font-semibold">Peça em rascunho</p>
-                      <span class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800">Pronto</span>
+                      <span
+                        class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
+                        >Pronto</span
+                      >
                     </div>
-                    <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                      <span class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 font-semibold">Rascunho</span>
+                    <div
+                      class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground"
+                    >
+                      <span
+                        class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 font-semibold"
+                        >Rascunho</span
+                      >
                       <span>Card</span>
                     </div>
                     <div class="mt-3 grid grid-cols-[1fr_auto] gap-2">
-                      <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium">Abrir</button>
-                      <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive hover:bg-red-50">
-                        <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                      <button
+                        type="button"
+                        class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                      >
+                        Abrir
+                      </button>
+                      <button
+                        type="button"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive hover:bg-red-50"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="size-4"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        >
+                          <path d="M3 6h18" />
+                          <path d="M8 6V4h8v2" />
+                          <path d="m19 6-1 14H6L5 6" />
+                        </svg>
                         Apagar
                       </button>
                     </div>
@@ -943,82 +1743,212 @@
 
           <!-- MOBILE — SELEÇÃO ATIVA -->
           <div class="w-full max-w-[390px]">
-            <p class="mb-2 text-xs font-medium text-muted-foreground">3b · seleção ativa — barra fixa no rodapé</p>
-            <div class="scene-shadow relative mx-auto h-[820px] w-full max-w-[390px] overflow-hidden rounded-[28px] border-[6px] border-stone-800 bg-background">
-              <div class="flex h-14 items-center justify-between bg-primary px-4 text-primary-foreground">
+            <p class="mb-2 text-xs font-medium text-muted-foreground">
+              3b · seleção ativa — barra fixa no rodapé
+            </p>
+            <div
+              class="scene-shadow relative mx-auto h-[820px] w-full max-w-[390px] overflow-hidden rounded-[28px] border-[6px] border-stone-800 bg-background"
+            >
+              <div
+                class="flex h-14 items-center justify-between bg-primary px-4 text-primary-foreground"
+              >
                 <button aria-label="Abrir menu" class="grid size-10 place-items-center rounded-lg">
-                  <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
+                  <svg
+                    aria-hidden="true"
+                    class="size-5"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="M4 6h16M4 12h16M4 18h16" />
+                  </svg>
                 </button>
                 <span class="text-sm font-semibold">Conteúdos</span>
                 <div class="size-10"></div>
               </div>
 
               <div class="p-4 pb-40">
-                <input readonly aria-label="Buscar conteúdos" placeholder="Buscar conteúdos…" class="h-11 w-full rounded-md border border-input bg-background px-3 text-base outline-none placeholder:text-muted-foreground" />
+                <input
+                  readonly
+                  aria-label="Buscar conteúdos"
+                  placeholder="Buscar conteúdos…"
+                  class="h-11 w-full rounded-md border border-input bg-background px-3 text-base outline-none placeholder:text-muted-foreground"
+                />
 
                 <div class="mt-3 flex items-center justify-between gap-3">
-                  <span class="inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
-                    <svg aria-hidden="true" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="m9 12 2 2 4-4" /></svg>
+                  <span
+                    class="inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="size-3.5"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <rect x="3" y="3" width="18" height="18" rx="2" />
+                      <path d="m9 12 2 2 4-4" />
+                    </svg>
                     Modo de seleção
                   </span>
-                  <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-muted-foreground">
-                    <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12" /></svg>
+                  <button
+                    type="button"
+                    class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-muted-foreground"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <path d="M18 6 6 18M6 6l12 12" />
+                    </svg>
                     Cancelar
                   </button>
                 </div>
 
                 <div class="mt-3 space-y-3">
                   <!-- card selecionado -->
-                  <article class="rounded-xl border border-border bg-card p-4 ring-1 ring-primary/25">
+                  <article
+                    class="rounded-xl border border-border bg-card p-4 ring-1 ring-primary/25"
+                  >
                     <div class="flex items-start gap-2">
                       <span class="sel-touch">
-                        <span class="sel-box" data-state="checked" role="checkbox" aria-checked="true" aria-label="Selecionar Peça publicada">
-                          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
+                        <span
+                          class="sel-box"
+                          data-state="checked"
+                          role="checkbox"
+                          aria-checked="true"
+                          aria-label="Selecionar Peça publicada"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="3"
+                          >
+                            <path d="M20 6 9 17l-5-5" />
+                          </svg>
                         </span>
                       </span>
                       <div class="min-w-0 flex-1">
                         <div class="flex items-start justify-between gap-3">
                           <p class="text-sm font-semibold">Peça publicada</p>
-                          <span class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800">Pronto</span>
+                          <span
+                            class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
+                            >Pronto</span
+                          >
                         </div>
-                        <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                          <span class="inline-flex min-h-5 items-center rounded-full bg-rose-50 px-2 py-0.5 font-semibold text-rose-900 ring-1 ring-rose-200">Publicado</span>
+                        <div
+                          class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground"
+                        >
+                          <span
+                            class="inline-flex min-h-5 items-center rounded-full bg-rose-50 px-2 py-0.5 font-semibold text-rose-900 ring-1 ring-rose-200"
+                            >Publicado</span
+                          >
                           <span>Vídeo · 02:14</span>
                         </div>
                       </div>
                     </div>
                     <div class="mt-3 grid grid-cols-[1fr_auto] gap-2">
-                      <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium">Abrir</button>
-                      <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive hover:bg-red-50">
-                        <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                      <button
+                        type="button"
+                        class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                      >
+                        Abrir
+                      </button>
+                      <button
+                        type="button"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive hover:bg-red-50"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="size-4"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        >
+                          <path d="M3 6h18" />
+                          <path d="M8 6V4h8v2" />
+                          <path d="m19 6-1 14H6L5 6" />
+                        </svg>
                         Apagar
                       </button>
                     </div>
                   </article>
 
                   <!-- card selecionado -->
-                  <article class="rounded-xl border border-border bg-card p-4 ring-1 ring-primary/25">
+                  <article
+                    class="rounded-xl border border-border bg-card p-4 ring-1 ring-primary/25"
+                  >
                     <div class="flex items-start gap-2">
                       <span class="sel-touch">
-                        <span class="sel-box" data-state="checked" role="checkbox" aria-checked="true" aria-label="Selecionar Peça em rascunho">
-                          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
+                        <span
+                          class="sel-box"
+                          data-state="checked"
+                          role="checkbox"
+                          aria-checked="true"
+                          aria-label="Selecionar Peça em rascunho"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="3"
+                          >
+                            <path d="M20 6 9 17l-5-5" />
+                          </svg>
                         </span>
                       </span>
                       <div class="min-w-0 flex-1">
                         <div class="flex items-start justify-between gap-3">
                           <p class="text-sm font-semibold">Peça em rascunho</p>
-                          <span class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800">Pronto</span>
+                          <span
+                            class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
+                            >Pronto</span
+                          >
                         </div>
-                        <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                          <span class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 font-semibold">Rascunho</span>
+                        <div
+                          class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground"
+                        >
+                          <span
+                            class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 font-semibold"
+                            >Rascunho</span
+                          >
                           <span>Card</span>
                         </div>
                       </div>
                     </div>
                     <div class="mt-3 grid grid-cols-[1fr_auto] gap-2">
-                      <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium">Abrir</button>
-                      <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive hover:bg-red-50">
-                        <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                      <button
+                        type="button"
+                        class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
+                      >
+                        Abrir
+                      </button>
+                      <button
+                        type="button"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive hover:bg-red-50"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="size-4"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        >
+                          <path d="M3 6h18" />
+                          <path d="M8 6V4h8v2" />
+                          <path d="m19 6-1 14H6L5 6" />
+                        </svg>
                         Apagar
                       </button>
                     </div>
@@ -1028,21 +1958,48 @@
                   <article class="rounded-xl border border-border bg-card p-4">
                     <div class="flex items-start gap-2">
                       <span class="sel-touch">
-                        <span class="sel-box" data-state="unchecked" role="checkbox" aria-checked="false" aria-label="Selecionar Peça com falha"></span>
+                        <span
+                          class="sel-box"
+                          data-state="unchecked"
+                          role="checkbox"
+                          aria-checked="false"
+                          aria-label="Selecionar Peça com falha"
+                        ></span>
                       </span>
                       <div class="min-w-0 flex-1">
                         <div class="flex items-start justify-between gap-3">
                           <p class="text-sm font-semibold">Peça com falha</p>
-                          <span class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700">Falhou</span>
+                          <span
+                            class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700"
+                            >Falhou</span
+                          >
                         </div>
-                        <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                          <span class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 font-semibold">Rascunho</span>
+                        <div
+                          class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground"
+                        >
+                          <span
+                            class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 font-semibold"
+                            >Rascunho</span
+                          >
                           <span>Áudio · 01:05</span>
                         </div>
                       </div>
                     </div>
-                    <button type="button" class="mt-3 inline-flex min-h-11 w-full items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground">
-                      <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6v6h-6" /><path d="M20 12a8 8 0 1 0-2.34 5.66" /></svg>
+                    <button
+                      type="button"
+                      class="mt-3 inline-flex min-h-11 w-full items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="size-4"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
+                        <path d="M20 6v6h-6" />
+                        <path d="M20 12a8 8 0 1 0-2.34 5.66" />
+                      </svg>
                       Reprocessar
                     </button>
                   </article>
@@ -1053,22 +2010,75 @@
               <div class="absolute inset-x-3 bottom-3">
                 <div class="bar-shadow rounded-xl border border-border bg-card p-3">
                   <div class="flex items-center justify-between gap-2">
-                    <p class="text-sm font-medium tabular-nums" role="status" aria-live="polite">2 selecionadas</p>
-                    <button type="button" aria-label="Sair da seleção" class="grid size-11 place-items-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground">
-                      <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12" /></svg>
+                    <p class="text-sm font-medium tabular-nums" role="status" aria-live="polite">
+                      2 selecionadas
+                    </p>
+                    <button
+                      type="button"
+                      aria-label="Sair da seleção"
+                      class="grid size-11 place-items-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="size-4"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
+                        <path d="M18 6 6 18M6 6l12 12" />
+                      </svg>
                     </button>
                   </div>
                   <div class="mt-2 grid grid-cols-3 gap-2">
-                    <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1 rounded-lg bg-primary px-1 text-xs font-medium text-primary-foreground sm:text-sm">
-                      <svg aria-hidden="true" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m5 12 5 5L20 7" /></svg>
+                    <button
+                      type="button"
+                      class="inline-flex min-h-11 items-center justify-center gap-1 rounded-lg bg-primary px-1 text-xs font-medium text-primary-foreground sm:text-sm"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="size-3.5"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
+                        <path d="m5 12 5 5L20 7" />
+                      </svg>
                       Publicar
                     </button>
-                    <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1 rounded-lg border border-border bg-background px-1 text-xs font-medium sm:text-sm">
-                      <svg aria-hidden="true" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 2H7a2 2 0 0 0-2 2v16l7-3 7 3V4a2 2 0 0 0-2-2Z" /></svg>
+                    <button
+                      type="button"
+                      class="inline-flex min-h-11 items-center justify-center gap-1 rounded-lg border border-border bg-background px-1 text-xs font-medium sm:text-sm"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="size-3.5"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
+                        <path d="M17 2H7a2 2 0 0 0-2 2v16l7-3 7 3V4a2 2 0 0 0-2-2Z" />
+                      </svg>
                       Despublicar
                     </button>
-                    <button type="button" class="inline-flex min-h-11 items-center justify-center gap-1 rounded-lg bg-destructive/10 px-1 text-xs font-medium text-destructive sm:text-sm">
-                      <svg aria-hidden="true" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="m19 6-1 14H6L5 6" /></svg>
+                    <button
+                      type="button"
+                      class="inline-flex min-h-11 items-center justify-center gap-1 rounded-lg bg-destructive/10 px-1 text-xs font-medium text-destructive sm:text-sm"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="size-3.5"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
+                        <path d="M3 6h18" />
+                        <path d="M8 6V4h8v2" />
+                        <path d="m19 6-1 14H6L5 6" />
+                      </svg>
                       Apagar
                     </button>
                   </div>
@@ -1088,77 +2098,191 @@
       <!-- ==================================================================== -->
       <section id="confirmacao" aria-labelledby="confirmacao-title">
         <div class="mb-3">
-          <p class="text-xs font-medium text-muted-foreground">Cena 4 · diálogo sempre visível · apagar sempre confirma</p>
+          <p class="text-xs font-medium text-muted-foreground">
+            Cena 4 · diálogo sempre visível · apagar sempre confirma
+          </p>
           <h2 id="confirmacao-title" class="mt-1 text-base font-semibold">
             O aviso de links públicos aparece só quando há publicadas na seleção
           </h2>
         </div>
         <div class="grid gap-6 lg:grid-cols-3">
           <!-- COM PUBLICADAS -->
-          <div class="relative flex min-h-[440px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4">
+          <div
+            class="relative flex min-h-[440px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4"
+          >
             <div class="absolute inset-0 bg-foreground/35"></div>
-            <span class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium">Seleção com publicadas</span>
-            <div role="dialog" aria-modal="true" aria-labelledby="massa-publicadas-title" class="dialog-shadow relative grid w-full max-w-sm gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10">
+            <span
+              class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium"
+              >Seleção com publicadas</span
+            >
+            <div
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="massa-publicadas-title"
+              class="dialog-shadow relative grid w-full max-w-sm gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10"
+            >
               <div class="flex items-start gap-3">
-                <div class="grid size-9 shrink-0 place-items-center rounded-full bg-red-50 text-destructive">
-                  <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>
+                <div
+                  class="grid size-9 shrink-0 place-items-center rounded-full bg-red-50 text-destructive"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="size-5"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="M12 8v4" />
+                    <path d="M12 16h.01" />
+                  </svg>
                 </div>
                 <div class="min-w-0">
-                  <h3 id="massa-publicadas-title" class="text-base font-medium">Apagar 3 peças selecionadas?</h3>
+                  <h3 id="massa-publicadas-title" class="text-base font-medium">
+                    Apagar 3 peças selecionadas?
+                  </h3>
                   <p class="mt-2 text-sm leading-6 text-muted-foreground">
                     Os links públicos das peças publicadas da seleção deixam de funcionar para quem
                     já recebeu. Esta ação não pode ser desfeita.
                   </p>
                 </div>
               </div>
-              <div class="-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end">
-                <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-4 text-sm font-medium">Cancelar</button>
-                <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg bg-destructive px-4 text-sm font-medium text-white">Apagar</button>
+              <div
+                class="-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end"
+              >
+                <button
+                  type="button"
+                  class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-4 text-sm font-medium"
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="button"
+                  class="inline-flex min-h-11 items-center justify-center rounded-lg bg-destructive px-4 text-sm font-medium text-white"
+                >
+                  Apagar
+                </button>
               </div>
             </div>
           </div>
 
           <!-- SEM PUBLICADAS -->
-          <div class="relative flex min-h-[440px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4">
+          <div
+            class="relative flex min-h-[440px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4"
+          >
             <div class="absolute inset-0 bg-foreground/35"></div>
-            <span class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium">Seleção só rascunho/falha/processando</span>
-            <div role="dialog" aria-modal="true" aria-labelledby="massa-sem-publicadas-title" class="dialog-shadow relative grid w-full max-w-sm gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10">
+            <span
+              class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium"
+              >Seleção só rascunho/falha/processando</span
+            >
+            <div
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="massa-sem-publicadas-title"
+              class="dialog-shadow relative grid w-full max-w-sm gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10"
+            >
               <div class="flex items-start gap-3">
-                <div class="grid size-9 shrink-0 place-items-center rounded-full bg-red-50 text-destructive">
-                  <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>
+                <div
+                  class="grid size-9 shrink-0 place-items-center rounded-full bg-red-50 text-destructive"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="size-5"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="M12 8v4" />
+                    <path d="M12 16h.01" />
+                  </svg>
                 </div>
                 <div class="min-w-0">
-                  <h3 id="massa-sem-publicadas-title" class="text-base font-medium">Apagar 3 peças selecionadas?</h3>
-                  <p class="mt-2 text-sm leading-6 text-muted-foreground">Esta ação não pode ser desfeita.</p>
+                  <h3 id="massa-sem-publicadas-title" class="text-base font-medium">
+                    Apagar 3 peças selecionadas?
+                  </h3>
+                  <p class="mt-2 text-sm leading-6 text-muted-foreground">
+                    Esta ação não pode ser desfeita.
+                  </p>
                 </div>
               </div>
-              <div class="-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end">
-                <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-4 text-sm font-medium">Cancelar</button>
-                <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg bg-destructive px-4 text-sm font-medium text-white">Apagar</button>
+              <div
+                class="-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end"
+              >
+                <button
+                  type="button"
+                  class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-4 text-sm font-medium"
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="button"
+                  class="inline-flex min-h-11 items-center justify-center rounded-lg bg-destructive px-4 text-sm font-medium text-white"
+                >
+                  Apagar
+                </button>
               </div>
             </div>
           </div>
 
           <!-- SINGULAR -->
-          <div class="relative flex min-h-[440px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4">
+          <div
+            class="relative flex min-h-[440px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4"
+          >
             <div class="absolute inset-0 bg-foreground/35"></div>
-            <span class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium">1 selecionada (singular — reusa o C222)</span>
-            <div role="dialog" aria-modal="true" aria-labelledby="massa-singular-title" class="dialog-shadow relative grid w-full max-w-sm gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10">
+            <span
+              class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium"
+              >1 selecionada (singular — reusa o C222)</span
+            >
+            <div
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="massa-singular-title"
+              class="dialog-shadow relative grid w-full max-w-sm gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10"
+            >
               <div class="flex items-start gap-3">
-                <div class="grid size-9 shrink-0 place-items-center rounded-full bg-red-50 text-destructive">
-                  <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>
+                <div
+                  class="grid size-9 shrink-0 place-items-center rounded-full bg-red-50 text-destructive"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="size-5"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="M12 8v4" />
+                    <path d="M12 16h.01" />
+                  </svg>
                 </div>
                 <div class="min-w-0">
                   <h3 id="massa-singular-title" class="text-base font-medium">Apagar esta peça?</h3>
                   <p class="mt-2 text-sm leading-6 text-muted-foreground">
-                    O link público <span class="font-medium text-foreground">/conteudos/&lt;slug&gt;</span>
+                    O link público
+                    <span class="font-medium text-foreground">/conteudos/&lt;slug&gt;</span>
                     deixa de funcionar para quem já recebeu. Esta ação não pode ser desfeita.
                   </p>
                 </div>
               </div>
-              <div class="-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end">
-                <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-4 text-sm font-medium">Cancelar</button>
-                <button type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg bg-destructive px-4 text-sm font-medium text-white">Apagar</button>
+              <div
+                class="-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end"
+              >
+                <button
+                  type="button"
+                  class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-4 text-sm font-medium"
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="button"
+                  class="inline-flex min-h-11 items-center justify-center rounded-lg bg-destructive px-4 text-sm font-medium text-white"
+                >
+                  Apagar
+                </button>
               </div>
             </div>
           </div>
@@ -1176,7 +2300,9 @@
       <!-- ==================================================================== -->
       <section id="recibos" aria-labelledby="recibos-title">
         <div class="mb-3">
-          <p class="text-xs font-medium text-muted-foreground">Cena 5 · recibos no topo da lista · nunca sucesso parcial silencioso</p>
+          <p class="text-xs font-medium text-muted-foreground">
+            Cena 5 · recibos no topo da lista · nunca sucesso parcial silencioso
+          </p>
           <h2 id="recibos-title" class="mt-1 text-base font-semibold">
             A lista diz o que aconteceu — e nomeia a falha quando ela existe
           </h2>
@@ -1184,38 +2310,148 @@
 
         <div class="grid gap-3 lg:grid-cols-2">
           <!-- sucesso publicar -->
-          <div role="status" aria-live="polite" class="flex items-start gap-2 rounded-lg border border-border bg-card px-3 py-2.5">
-            <svg aria-hidden="true" class="mt-0.5 size-4 shrink-0 text-green-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>
+          <div
+            role="status"
+            aria-live="polite"
+            class="flex items-start gap-2 rounded-lg border border-border bg-card px-3 py-2.5"
+          >
+            <svg
+              aria-hidden="true"
+              class="mt-0.5 size-4 shrink-0 text-green-700"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="m9 12 2 2 4-4" />
+            </svg>
             <p class="flex-1 text-sm font-medium">3 peças publicadas</p>
-            <button type="button" aria-label="Fechar aviso" class="grid size-9 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground">
-              <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12" /></svg>
+            <button
+              type="button"
+              aria-label="Fechar aviso"
+              class="grid size-9 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+            >
+              <svg
+                aria-hidden="true"
+                class="size-4"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path d="M18 6 6 18M6 6l12 12" />
+              </svg>
             </button>
           </div>
 
           <!-- sucesso despublicar -->
-          <div role="status" aria-live="polite" class="flex items-start gap-2 rounded-lg border border-border bg-card px-3 py-2.5">
-            <svg aria-hidden="true" class="mt-0.5 size-4 shrink-0 text-green-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>
+          <div
+            role="status"
+            aria-live="polite"
+            class="flex items-start gap-2 rounded-lg border border-border bg-card px-3 py-2.5"
+          >
+            <svg
+              aria-hidden="true"
+              class="mt-0.5 size-4 shrink-0 text-green-700"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="m9 12 2 2 4-4" />
+            </svg>
             <p class="flex-1 text-sm font-medium">3 peças despublicadas</p>
-            <button type="button" aria-label="Fechar aviso" class="grid size-9 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground">
-              <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12" /></svg>
+            <button
+              type="button"
+              aria-label="Fechar aviso"
+              class="grid size-9 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+            >
+              <svg
+                aria-hidden="true"
+                class="size-4"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path d="M18 6 6 18M6 6l12 12" />
+              </svg>
             </button>
           </div>
 
           <!-- sucesso apagar -->
-          <div role="status" aria-live="polite" class="flex items-start gap-2 rounded-lg border border-border bg-card px-3 py-2.5">
-            <svg aria-hidden="true" class="mt-0.5 size-4 shrink-0 text-green-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>
+          <div
+            role="status"
+            aria-live="polite"
+            class="flex items-start gap-2 rounded-lg border border-border bg-card px-3 py-2.5"
+          >
+            <svg
+              aria-hidden="true"
+              class="mt-0.5 size-4 shrink-0 text-green-700"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="m9 12 2 2 4-4" />
+            </svg>
             <p class="flex-1 text-sm font-medium">3 peças apagadas</p>
-            <button type="button" aria-label="Fechar aviso" class="grid size-9 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground">
-              <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12" /></svg>
+            <button
+              type="button"
+              aria-label="Fechar aviso"
+              class="grid size-9 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+            >
+              <svg
+                aria-hidden="true"
+                class="size-4"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path d="M18 6 6 18M6 6l12 12" />
+              </svg>
             </button>
           </div>
 
           <!-- falha parcial -->
-          <div role="alert" class="flex items-start gap-2 rounded-lg border border-destructive/40 bg-card px-3 py-2.5">
-            <svg aria-hidden="true" class="mt-0.5 size-4 shrink-0 text-destructive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>
-            <p class="flex-1 text-sm font-medium text-destructive">2 de 3 peças apagadas. 1 falhou.</p>
-            <button type="button" aria-label="Fechar aviso" class="grid size-9 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground">
-              <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12" /></svg>
+          <div
+            role="alert"
+            class="flex items-start gap-2 rounded-lg border border-destructive/40 bg-card px-3 py-2.5"
+          >
+            <svg
+              aria-hidden="true"
+              class="mt-0.5 size-4 shrink-0 text-destructive"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 8v4" />
+              <path d="M12 16h.01" />
+            </svg>
+            <p class="flex-1 text-sm font-medium text-destructive">
+              2 de 3 peças apagadas. 1 falhou.
+            </p>
+            <button
+              type="button"
+              aria-label="Fechar aviso"
+              class="grid size-9 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+            >
+              <svg
+                aria-hidden="true"
+                class="size-4"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path d="M18 6 6 18M6 6l12 12" />
+              </svg>
             </button>
           </div>
         </div>
@@ -1227,7 +2463,8 @@
             sobre ela).
           </li>
           <li>
-            <span class="font-medium text-foreground">Falha parcial:</span> <code>role="alert"</code>
+            <span class="font-medium text-foreground">Falha parcial:</span>
+            <code>role="alert"</code>
             com o literal fixo, mais o vermelho — a falha de uma peça não reverte as demais e a
             lista já reflete o desfecho.
           </li>
@@ -1243,7 +2480,9 @@
       <!-- ==================================================================== -->
       <section id="envio" aria-labelledby="envio-title">
         <div class="mb-3">
-          <p class="text-xs font-medium text-muted-foreground">Cena 6 · ação em andamento · spinner + disabled</p>
+          <p class="text-xs font-medium text-muted-foreground">
+            Cena 6 · ação em andamento · spinner + disabled
+          </p>
           <h2 id="envio-title" class="mt-1 text-base font-semibold">
             Enquanto roda, a barra e o diálogo bloqueiam — sem duplo gesto
           </h2>
@@ -1252,17 +2491,47 @@
         <div class="grid gap-6 lg:grid-cols-2">
           <!-- barra em andamento -->
           <div class="rounded-xl border border-border bg-card p-4">
-            <p class="mb-3 text-xs font-medium text-muted-foreground">Barra de seleção · publicando</p>
-            <div class="bar-shadow rounded-xl border border-border bg-card px-3 py-2.5" aria-busy="true">
+            <p class="mb-3 text-xs font-medium text-muted-foreground">
+              Barra de seleção · publicando
+            </p>
+            <div
+              class="bar-shadow rounded-xl border border-border bg-card px-3 py-2.5"
+              aria-busy="true"
+            >
               <div class="flex items-center justify-between gap-4">
                 <p class="text-sm font-medium tabular-nums text-muted-foreground">3 selecionadas</p>
                 <div class="flex items-center gap-2">
-                  <button disabled type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground opacity-70">
-                    <svg aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.2-8.6" /></svg>
+                  <button
+                    disabled
+                    type="button"
+                    class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground opacity-70"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="size-4 animate-spin motion-reduce:animate-none"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <path d="M21 12a9 9 0 1 1-6.2-8.6" />
+                    </svg>
                     Publicar
                   </button>
-                  <button disabled type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium opacity-50">Despublicar</button>
-                  <button disabled type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg bg-destructive/10 px-3 text-sm font-medium text-destructive opacity-50">Apagar</button>
+                  <button
+                    disabled
+                    type="button"
+                    class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium opacity-50"
+                  >
+                    Despublicar
+                  </button>
+                  <button
+                    disabled
+                    type="button"
+                    class="inline-flex min-h-11 items-center justify-center rounded-lg bg-destructive/10 px-3 text-sm font-medium text-destructive opacity-50"
+                  >
+                    Apagar
+                  </button>
                 </div>
               </div>
             </div>
@@ -1273,26 +2542,73 @@
           </div>
 
           <!-- diálogo em andamento -->
-          <div class="relative flex min-h-[380px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4">
+          <div
+            class="relative flex min-h-[380px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4"
+          >
             <div class="absolute inset-0 bg-foreground/35"></div>
-            <span class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium">Diálogo · apagando</span>
-            <div role="dialog" aria-modal="true" aria-busy="true" aria-labelledby="envio-dialog-title" class="dialog-shadow relative grid w-full max-w-sm gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10">
+            <span
+              class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium"
+              >Diálogo · apagando</span
+            >
+            <div
+              role="dialog"
+              aria-modal="true"
+              aria-busy="true"
+              aria-labelledby="envio-dialog-title"
+              class="dialog-shadow relative grid w-full max-w-sm gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10"
+            >
               <div class="flex items-start gap-3">
-                <div class="grid size-9 shrink-0 place-items-center rounded-full bg-red-50 text-destructive">
-                  <svg aria-hidden="true" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>
+                <div
+                  class="grid size-9 shrink-0 place-items-center rounded-full bg-red-50 text-destructive"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="size-5"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="M12 8v4" />
+                    <path d="M12 16h.01" />
+                  </svg>
                 </div>
                 <div class="min-w-0">
-                  <h3 id="envio-dialog-title" class="text-base font-medium">Apagar 3 peças selecionadas?</h3>
+                  <h3 id="envio-dialog-title" class="text-base font-medium">
+                    Apagar 3 peças selecionadas?
+                  </h3>
                   <p class="mt-2 text-sm leading-6 text-muted-foreground">
                     Os links públicos das peças publicadas da seleção deixam de funcionar para quem
                     já recebeu. Esta ação não pode ser desfeita.
                   </p>
                 </div>
               </div>
-              <div class="-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end">
-                <button disabled type="button" class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-4 text-sm font-medium opacity-50">Cancelar</button>
-                <button disabled type="button" class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-destructive px-4 text-sm font-medium text-white opacity-70">
-                  <svg aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.2-8.6" /></svg>
+              <div
+                class="-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end"
+              >
+                <button
+                  disabled
+                  type="button"
+                  class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-4 text-sm font-medium opacity-50"
+                >
+                  Cancelar
+                </button>
+                <button
+                  disabled
+                  type="button"
+                  class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-destructive px-4 text-sm font-medium text-white opacity-70"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="size-4 animate-spin motion-reduce:animate-none"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="M21 12a9 9 0 1 1-6.2-8.6" />
+                  </svg>
                   Apagar
                 </button>
               </div>
@@ -1311,11 +2627,26 @@
           <div>
             <h3 class="text-sm font-semibold">Produto respeitado</h3>
             <ul class="mt-2 space-y-1.5 text-xs leading-5 text-muted-foreground">
-              <li>Seleção só da página visível; “selecionar todas” = as 4/25 desta página; morre ao trocar de página ou filtro.</li>
-              <li>Ações por linha/ficha (Abrir, Reprocessar, Apagar) intocadas — o lote não cria verbo por linha.</li>
-              <li>Publicar/Despublicar em lote agem sem confirmação (reversíveis) e dão recibo; Apagar sempre confirma.</li>
-              <li>Estados de processamento e publicação valem todos, sem filtro novo (inclusive <code>processando</code>/<code>falhou</code>).</li>
-              <li>Desktop (tabela) e mobile (card list) cobertos; sem edição de campos, sem agendamento, sem lixeira.</li>
+              <li>
+                Seleção só da página visível; “selecionar todas” = as 4/25 desta página; morre ao
+                trocar de página ou filtro.
+              </li>
+              <li>
+                Ações por linha/ficha (Abrir, Reprocessar, Apagar) intocadas — o lote não cria verbo
+                por linha.
+              </li>
+              <li>
+                Publicar/Despublicar em lote agem sem confirmação (reversíveis) e dão recibo; Apagar
+                sempre confirma.
+              </li>
+              <li>
+                Estados de processamento e publicação valem todos, sem filtro novo (inclusive
+                <code>processando</code>/<code>falhou</code>).
+              </li>
+              <li>
+                Desktop (tabela) e mobile (card list) cobertos; sem edição de campos, sem
+                agendamento, sem lixeira.
+              </li>
               <li>Sem rota pública nova: o lote é o gesto unitário repetido sobre a seleção.</li>
             </ul>
           </div>
@@ -1323,11 +2654,27 @@
           <div>
             <h3 class="text-sm font-semibold">Tokens usados</h3>
             <ul class="mt-2 space-y-1.5 text-xs leading-5 text-muted-foreground">
-              <li><code>--primary #c51414</code> no checkbox checado, no Publicar e no tint de seleção (<code>primary/5</code>).</li>
-              <li><code>--destructive #b42318</code> no Apagar do diálogo (cheio) e no Apagar da barra (tintado <code>destructive/10</code>).</li>
-              <li><code>--border</code>, <code>--input</code>, <code>--muted</code>, <code>--muted-foreground</code>, <code>--card</code>, <code>--sidebar</code>: chrome da lista e do shell.</li>
-              <li>Badges de estado como já existem: verde/âmbar/vermelho de processamento e <code>rose</code> de publicado.</li>
-              <li>Inter, <code>rounded-xl</code> (card/lista), <code>rounded-lg</code> (botões), <code>min-h-11</code> (44px), <code>tabular-nums</code> no contador.</li>
+              <li>
+                <code>--primary #c51414</code> no checkbox checado, no Publicar e no tint de seleção
+                (<code>primary/5</code>).
+              </li>
+              <li>
+                <code>--destructive #b42318</code> no Apagar do diálogo (cheio) e no Apagar da barra
+                (tintado <code>destructive/10</code>).
+              </li>
+              <li>
+                <code>--border</code>, <code>--input</code>, <code>--muted</code>,
+                <code>--muted-foreground</code>, <code>--card</code>, <code>--sidebar</code>: chrome
+                da lista e do shell.
+              </li>
+              <li>
+                Badges de estado como já existem: verde/âmbar/vermelho de processamento e
+                <code>rose</code> de publicado.
+              </li>
+              <li>
+                Inter, <code>rounded-xl</code> (card/lista), <code>rounded-lg</code> (botões),
+                <code>min-h-11</code> (44px), <code>tabular-nums</code> no contador.
+              </li>
               <li>Recibo de sucesso usa verde só no ícone (semântica), não como chrome.</li>
             </ul>
           </div>
@@ -1337,9 +2684,19 @@
           <div>
             <h3 class="text-sm font-semibold">Literais refinados (e por quê)</h3>
             <ul class="mt-2 space-y-1.5 text-xs leading-5 text-muted-foreground">
-              <li><code>1 selecionada</code> no singular, no lugar de “1 selecionadas” — segue o precedente vivo do <code>TourComposerForm</code>.</li>
-              <li>Anunciado (não literal fixado): <code>Modo de seleção</code> e <code>Cancelar seleção</code> como rótulos do affordance de entrar/sair; o plano só fixa o contador e os três verbos.</li>
-              <li>O corpo do diálogo, o título <code>Apagar N peças selecionadas?</code>, o singular <code>Apagar esta peça?</code> e os recibos são os literais do plano, verbatim.</li>
+              <li>
+                <code>1 selecionada</code> no singular, no lugar de “1 selecionadas” — segue o
+                precedente vivo do <code>TourComposerForm</code>.
+              </li>
+              <li>
+                Anunciado (não literal fixado): <code>Modo de seleção</code> e
+                <code>Cancelar seleção</code> como rótulos do affordance de entrar/sair; o plano só
+                fixa o contador e os três verbos.
+              </li>
+              <li>
+                O corpo do diálogo, o título <code>Apagar N peças selecionadas?</code>, o singular
+                <code>Apagar esta peça?</code> e os recibos são os literais do plano, verbatim.
+              </li>
             </ul>
           </div>