From cca7929dbdb1f2553c1fde3877401a9327ed29f3 Mon Sep 17 00:00:00 2001
From: Francisco Solla <fsolla@pm.me>
Date: Thu, 24 Sep 2026 22:30:11 -0300
Subject: [PATCH] style(C222): formata o design hi-fi (Related #1330)

---
 ...ntral-conteudos-apagar-peca-ui-design.html | 1114 +++++++++++++++--
 1 file changed, 991 insertions(+), 123 deletions(-)

diff --git a/docs/plans/central-conteudos-apagar-peca-ui-design.html b/docs/plans/central-conteudos-apagar-peca-ui-design.html
index 6c6dc9b4..56ab488c 100644
--- a/docs/plans/central-conteudos-apagar-peca-ui-design.html
+++ b/docs/plans/central-conteudos-apagar-peca-ui-design.html
@@ -94,7 +94,9 @@
         >
           C222 · design do gate
         </div>
-        <h1 class="mt-4 text-3xl font-semibold tracking-tight">Apagar sem competir com o trabalho</h1>
+        <h1 class="mt-4 text-3xl font-semibold tracking-tight">
+          Apagar sem competir com o trabalho
+        </h1>
         <p class="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
           A saída definitiva fica disponível na lista e na ficha, mas permanece visualmente abaixo
           da próxima ação. A confirmação cresce apenas quando existe um link público.
@@ -102,19 +104,27 @@
       </header>
 
       <nav aria-label="Índice de cenas" class="flex flex-wrap gap-2 text-xs">
-        <a href="#lista-desktop" class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
+        <a
+          href="#lista-desktop"
+          class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
           >A · Lista desktop</a
         >
-        <a href="#lista-mobile" class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
+        <a
+          href="#lista-mobile"
+          class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
           >B · Lista mobile</a
         >
         <a href="#detalhe" class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
           >C–D · Detalhe</a
         >
-        <a href="#confirmacoes" class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
+        <a
+          href="#confirmacoes"
+          class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
           >E–F · Confirmações</a
         >
-        <a href="#feedback" class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
+        <a
+          href="#feedback"
+          class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
           >G–H · Erro e envio</a
         >
       </nav>
@@ -139,7 +149,9 @@
             class="scene-shadow mx-auto h-[780px] 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"
@@ -152,8 +164,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>
@@ -167,7 +188,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>
@@ -207,7 +230,14 @@
 
                   <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">
+                      <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>
@@ -244,34 +274,73 @@
                         <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" />
+                              <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</p>
+                                <p class="mt-1 truncate text-xs text-muted-foreground">
+                                  Vídeo · 02:14
+                                </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-2 gap-x-3 gap-y-1 text-xs">
-                              <span class="text-muted-foreground">Visualizações</span><b class="text-right">—</b>
-                              <span class="text-muted-foreground">Downloads</span><b class="text-right">—</b>
+                              <span class="text-muted-foreground">Visualizações</span
+                              ><b class="text-right">—</b>
+                              <span class="text-muted-foreground">Downloads</span
+                              ><b class="text-right">—</b>
                             </div>
                           </td>
                           <td class="p-3">
                             <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>
@@ -279,47 +348,158 @@
                         </tr>
 
                         <tr>
-                          <td class="p-3"><p class="font-semibold">Peça em rascunho</p><p class="mt-1 text-xs text-muted-foreground">Card</p></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">Ainda não publicada</span></td>
+                          <td class="p-3">
+                            <p class="font-semibold">Peça em rascunho</p>
+                            <p class="mt-1 text-xs text-muted-foreground">Card</p>
+                          </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">Ainda não publicada</span>
+                          </td>
                           <td class="p-3">
                             <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>Apagar
+                              <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>
                           </td>
                         </tr>
 
                         <tr>
-                          <td class="p-3"><p class="font-semibold">Peça com falha</p><p class="mt-1 text-xs text-muted-foreground">Áudio</p></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></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">Ainda não publicada</span></td>
+                          <td class="p-3">
+                            <p class="font-semibold">Peça com falha</p>
+                            <p class="mt-1 text-xs text-muted-foreground">Áudio</p>
+                          </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
+                            >
+                          </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">Ainda não publicada</span>
+                          </td>
                           <td class="p-3">
                             <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>Reprocessar
+                              <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>Apagar
+                              <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>
                           </td>
                         </tr>
 
                         <tr>
-                          <td class="p-3"><p class="font-semibold">Peça em processamento</p><p class="mt-1 text-xs text-muted-foreground">Vídeo enviado</p></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><p class="mt-1 text-xs text-muted-foreground">Transcrevendo…</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">Ainda não publicada</span></td>
+                          <td class="p-3">
+                            <p class="font-semibold">Peça em processamento</p>
+                            <p class="mt-1 text-xs text-muted-foreground">Vídeo enviado</p>
+                          </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
+                            >
+                            <p class="mt-1 text-xs text-muted-foreground">Transcrevendo…</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">Ainda não publicada</span>
+                          </td>
                           <td class="p-3">
                             <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>Apagar
+                              <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>
                           </td>
@@ -346,46 +526,211 @@
         <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">
+          <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 por 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 por 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"
+            />
 
             <div class="mt-4 space-y-3">
               <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></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><span>Vídeo · 02:14</span></div>
+                <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
+                  >
+                </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
+                  ><span>Vídeo · 02:14</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>Apagar</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"
+                  >
+                    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>
 
               <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></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><span>Card</span></div>
-                <div class="mt-3 grid grid-cols-[1fr_auto] gap-2"><button type="button" class="min-h-11 rounded-lg border border-border text-sm font-medium">Abrir</button><button type="button" class="inline-flex min-h-11 items-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive"><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>
+                <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
+                  >
+                </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
+                  ><span>Card</span>
+                </div>
+                <div class="mt-3 grid grid-cols-[1fr_auto] gap-2">
+                  <button
+                    type="button"
+                    class="min-h-11 rounded-lg border border-border text-sm font-medium"
+                  >
+                    Abrir</button
+                  ><button
+                    type="button"
+                    class="inline-flex min-h-11 items-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive"
+                  >
+                    <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>
 
               <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 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></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><span>Áudio</span></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>Reprocessar</button>
-                <button type="button" class="mt-2 inline-flex min-h-11 w-full items-center justify-center gap-1.5 rounded-lg text-sm font-medium text-destructive"><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 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
+                  >
+                </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
+                  ><span>Áudio</span>
+                </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
+                  >Reprocessar
+                </button>
+                <button
+                  type="button"
+                  class="mt-2 inline-flex min-h-11 w-full items-center justify-center gap-1.5 rounded-lg text-sm font-medium text-destructive"
+                >
+                  <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>
               </article>
 
               <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 processamento</p><span class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-900">Processando</span></div>
-                <div class="mt-3 h-2 overflow-hidden rounded-full bg-muted"><div class="h-full w-1/2 rounded-full bg-primary"></div></div>
+                <div class="flex items-start justify-between gap-3">
+                  <p class="text-sm font-semibold">Peça em processamento</p>
+                  <span
+                    class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-900"
+                    >Processando</span
+                  >
+                </div>
+                <div class="mt-3 h-2 overflow-hidden rounded-full bg-muted">
+                  <div class="h-full w-1/2 rounded-full bg-primary"></div>
+                </div>
                 <p class="mt-2 text-xs text-muted-foreground">Transcrevendo…</p>
-                <div class="mt-3 grid grid-cols-[1fr_auto] gap-2"><button type="button" class="min-h-11 rounded-lg border border-border text-sm font-medium">Abrir</button><button type="button" class="inline-flex min-h-11 items-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive"><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>
+                <div class="mt-3 grid grid-cols-[1fr_auto] gap-2">
+                  <button
+                    type="button"
+                    class="min-h-11 rounded-lg border border-border text-sm font-medium"
+                  >
+                    Abrir</button
+                  ><button
+                    type="button"
+                    class="inline-flex min-h-11 items-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive"
+                  >
+                    <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>
             </div>
           </div>
@@ -396,7 +741,9 @@
       <section id="detalhe" aria-labelledby="detalhe-title">
         <div class="mb-3 flex items-end justify-between gap-4">
           <div>
-            <p class="text-xs font-medium text-muted-foreground">Cenas C–D · detalhe desktop e mobile</p>
+            <p class="text-xs font-medium text-muted-foreground">
+              Cenas C–D · detalhe desktop e mobile
+            </p>
             <h2 id="detalhe-title" class="mt-1 text-base font-semibold">
               A ação definitiva fecha a fila de ações do topo
             </h2>
@@ -408,40 +755,191 @@
         </div>
 
         <div class="overflow-x-auto pb-4">
-          <div class="scene-shadow mx-auto w-[1280px] overflow-hidden rounded-xl border border-border bg-background">
+          <div
+            class="scene-shadow mx-auto w-[1280px] overflow-hidden rounded-xl border border-border bg-background"
+          >
             <div class="flex h-16 items-center justify-between border-b border-border px-8">
-              <div><p class="text-xs text-muted-foreground">Comunicação</p><p class="text-sm font-medium">Peça publicada</p></div>
+              <div>
+                <p class="text-xs text-muted-foreground">Comunicação</p>
+                <p class="text-sm font-medium">Peça publicada</p>
+              </div>
               <div class="size-8 rounded-full bg-secondary ring-1 ring-border"></div>
             </div>
             <div class="mx-auto max-w-5xl p-8">
-              <a href="#" class="inline-flex min-h-10 items-center gap-1 text-xs font-semibold text-primary">
-                <svg aria-hidden="true" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6" /></svg>Conteúdos
+              <a
+                href="#"
+                class="inline-flex min-h-10 items-center gap-1 text-xs font-semibold text-primary"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="size-3.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path d="m15 18-6-6 6-6" /></svg
+                >Conteúdos
               </a>
               <div class="mt-2 flex items-start justify-between gap-5 border-b border-border pb-5">
                 <div class="min-w-0">
                   <h3 class="text-xl font-semibold">Peça publicada</h3>
-                  <div class="mt-2 flex gap-2"><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-rose-50 px-2 py-0.5 text-xs font-semibold text-rose-900 ring-1 ring-rose-200">Publicado</span></div>
+                  <div class="mt-2 flex gap-2">
+                    <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-rose-50 px-2 py-0.5 text-xs font-semibold text-rose-900 ring-1 ring-rose-200"
+                      >Publicado</span
+                    >
+                  </div>
                 </div>
                 <div class="flex shrink-0 flex-wrap items-center justify-end gap-2">
-                  <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"><path d="M13.5 3H12H8C6.9 3 6 3.9 6 5v14c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V8.5L13.5 3Z" /><path d="M13 3v6h6" /><path d="M12 18v-6" /><path d="m9 15 3 3 3-3" /></svg>Anexar</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"><svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3l18 18" /><path d="M10.6 10.6A3 3 0 0 0 15 15" /><path d="M9.9 4.2A10.6 10.6 0 0 1 12 4c5.5 0 10 8 10 8a18 18 0 0 1-2 2.8" /><path d="M6.6 6.6C3.9 8.4 2 12 2 12s4.5 8 10 8a9.8 9.8 0 0 0 5.4-1.6" /></svg>Despublicar</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>
+                  <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"
+                    >
+                      <path
+                        d="M13.5 3H12H8C6.9 3 6 3.9 6 5v14c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V8.5L13.5 3Z"
+                      />
+                      <path d="M13 3v6h6" />
+                      <path d="M12 18v-6" />
+                      <path d="m9 15 3 3 3-3" /></svg
+                    >Anexar
+                  </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"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <path d="M3 3l18 18" />
+                      <path d="M10.6 10.6A3 3 0 0 0 15 15" />
+                      <path d="M9.9 4.2A10.6 10.6 0 0 1 12 4c5.5 0 10 8 10 8a18 18 0 0 1-2 2.8" />
+                      <path d="M6.6 6.6C3.9 8.4 2 12 2 12s4.5 8 10 8a9.8 9.8 0 0 0 5.4-1.6" /></svg
+                    >Despublicar
+                  </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>
               </div>
 
               <div class="mt-6 grid grid-cols-[300px_1fr] gap-8">
-                <div><div class="grid aspect-video place-items-center rounded-xl border border-border bg-gradient-to-br from-stone-200 to-stone-100 text-xs font-semibold text-muted-foreground">Prévia da peça</div><dl class="mt-4 space-y-2 text-xs"><div class="flex justify-between"><dt class="text-muted-foreground">Origem</dt><dd>Arquivo</dd></div><div class="flex justify-between"><dt class="text-muted-foreground">Duração</dt><dd>02:14</dd></div></dl></div>
-                <div><div class="rounded-xl border border-border p-5"><p class="text-sm font-semibold">Circulação</p><div class="mt-4 grid grid-cols-4 gap-3"><div class="h-16 rounded-lg bg-muted"></div><div class="h-16 rounded-lg bg-muted"></div><div class="h-16 rounded-lg bg-muted"></div><div class="h-16 rounded-lg bg-muted"></div></div></div><div class="mt-6 border-t border-border pt-6"><div class="h-11 rounded-md border border-input"></div><div class="mt-3 h-24 rounded-md border border-input"></div></div></div>
+                <div>
+                  <div
+                    class="grid aspect-video place-items-center rounded-xl border border-border bg-gradient-to-br from-stone-200 to-stone-100 text-xs font-semibold text-muted-foreground"
+                  >
+                    Prévia da peça
+                  </div>
+                  <dl class="mt-4 space-y-2 text-xs">
+                    <div class="flex justify-between">
+                      <dt class="text-muted-foreground">Origem</dt>
+                      <dd>Arquivo</dd>
+                    </div>
+                    <div class="flex justify-between">
+                      <dt class="text-muted-foreground">Duração</dt>
+                      <dd>02:14</dd>
+                    </div>
+                  </dl>
+                </div>
+                <div>
+                  <div class="rounded-xl border border-border p-5">
+                    <p class="text-sm font-semibold">Circulação</p>
+                    <div class="mt-4 grid grid-cols-4 gap-3">
+                      <div class="h-16 rounded-lg bg-muted"></div>
+                      <div class="h-16 rounded-lg bg-muted"></div>
+                      <div class="h-16 rounded-lg bg-muted"></div>
+                      <div class="h-16 rounded-lg bg-muted"></div>
+                    </div>
+                  </div>
+                  <div class="mt-6 border-t border-border pt-6">
+                    <div class="h-11 rounded-md border border-input"></div>
+                    <div class="mt-3 h-24 rounded-md border border-input"></div>
+                  </div>
+                </div>
               </div>
 
               <div class="mt-8 grid grid-cols-2 gap-4 border-t border-border pt-6">
                 <div class="rounded-xl border border-border bg-card p-4">
                   <p class="text-xs font-semibold">Variante · pronto e rascunho</p>
-                  <div class="mt-3 flex items-center gap-2"><button type="button" class="inline-flex min-h-11 items-center rounded-lg border border-border px-3 text-sm font-medium">Anexar</button><button type="button" class="inline-flex min-h-11 items-center rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground">Publicar</button><button type="button" class="inline-flex min-h-11 items-center rounded-lg px-3 text-sm font-medium text-destructive">Apagar</button></div>
+                  <div class="mt-3 flex items-center gap-2">
+                    <button
+                      type="button"
+                      class="inline-flex min-h-11 items-center rounded-lg border border-border px-3 text-sm font-medium"
+                    >
+                      Anexar</button
+                    ><button
+                      type="button"
+                      class="inline-flex min-h-11 items-center rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
+                    >
+                      Publicar</button
+                    ><button
+                      type="button"
+                      class="inline-flex min-h-11 items-center rounded-lg px-3 text-sm font-medium text-destructive"
+                    >
+                      Apagar
+                    </button>
+                  </div>
                 </div>
                 <div class="rounded-xl border border-border bg-card p-4">
                   <p class="text-xs font-semibold">Variante · falhou</p>
-                  <div class="mt-3 flex items-center gap-2"><button type="button" class="inline-flex min-h-11 items-center rounded-lg border border-border px-3 text-sm font-medium">Anexar</button><button type="button" class="inline-flex min-h-11 items-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 rounded-lg px-3 text-sm font-medium text-destructive">Apagar</button></div>
+                  <div class="mt-3 flex items-center gap-2">
+                    <button
+                      type="button"
+                      class="inline-flex min-h-11 items-center rounded-lg border border-border px-3 text-sm font-medium"
+                    >
+                      Anexar</button
+                    ><button
+                      type="button"
+                      class="inline-flex min-h-11 items-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 rounded-lg px-3 text-sm font-medium text-destructive"
+                    >
+                      Apagar
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -450,33 +948,191 @@
 
         <div class="mt-8 grid items-start gap-8 lg:grid-cols-2">
           <div>
-            <p class="mb-2 text-center text-xs font-medium text-muted-foreground">Mobile · publicado</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></button><span class="max-w-[230px] truncate text-sm font-semibold">Peça publicada</span><div class="size-10"></div></div>
+            <p class="mb-2 text-center text-xs font-medium text-muted-foreground">
+              Mobile · publicado
+            </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></button
+                ><span class="max-w-[230px] truncate text-sm font-semibold">Peça publicada</span>
+                <div class="size-10"></div>
+              </div>
               <div class="p-4">
-                <a href="#" class="inline-flex min-h-11 items-center gap-1 text-xs font-semibold text-primary"><svg aria-hidden="true" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6" /></svg>Conteúdos</a>
+                <a
+                  href="#"
+                  class="inline-flex min-h-11 items-center gap-1 text-xs font-semibold text-primary"
+                  ><svg
+                    aria-hidden="true"
+                    class="size-3.5"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="m15 18-6-6 6-6" /></svg
+                  >Conteúdos</a
+                >
                 <h3 class="mt-1 text-xl font-semibold">Peça publicada</h3>
-                <div class="mt-2 flex gap-2"><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-rose-50 px-2 py-0.5 text-xs font-semibold text-rose-900 ring-1 ring-rose-200">Publicado</span></div>
-                <div class="mt-4 grid grid-cols-2 gap-2"><button type="button" class="min-h-11 rounded-lg border border-border text-sm font-medium">Anexar</button><button type="button" class="min-h-11 rounded-lg border border-border text-sm font-medium">Despublicar</button><button type="button" class="col-span-2 inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg text-sm font-medium text-destructive"><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>
-                <div class="mt-5 grid aspect-video place-items-center rounded-xl border border-border bg-gradient-to-br from-stone-200 to-stone-100 text-xs font-semibold text-muted-foreground">Prévia da peça</div>
+                <div class="mt-2 flex gap-2">
+                  <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-rose-50 px-2 py-0.5 text-xs font-semibold text-rose-900 ring-1 ring-rose-200"
+                    >Publicado</span
+                  >
+                </div>
+                <div class="mt-4 grid grid-cols-2 gap-2">
+                  <button
+                    type="button"
+                    class="min-h-11 rounded-lg border border-border text-sm font-medium"
+                  >
+                    Anexar</button
+                  ><button
+                    type="button"
+                    class="min-h-11 rounded-lg border border-border text-sm font-medium"
+                  >
+                    Despublicar</button
+                  ><button
+                    type="button"
+                    class="col-span-2 inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg text-sm font-medium text-destructive"
+                  >
+                    <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>
+                <div
+                  class="mt-5 grid aspect-video place-items-center rounded-xl border border-border bg-gradient-to-br from-stone-200 to-stone-100 text-xs font-semibold text-muted-foreground"
+                >
+                  Prévia da peça
+                </div>
                 <div class="mt-5 h-28 rounded-xl border border-border"></div>
               </div>
             </div>
           </div>
 
           <div>
-            <p class="mb-2 text-center text-xs font-medium text-muted-foreground">Mobile · falhou</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></button><span class="max-w-[230px] truncate text-sm font-semibold">Peça com falha</span><div class="size-10"></div></div>
+            <p class="mb-2 text-center text-xs font-medium text-muted-foreground">
+              Mobile · falhou
+            </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></button
+                ><span class="max-w-[230px] truncate text-sm font-semibold">Peça com falha</span>
+                <div class="size-10"></div>
+              </div>
               <div class="p-4">
-                <a href="#" class="inline-flex min-h-11 items-center gap-1 text-xs font-semibold text-primary"><svg aria-hidden="true" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6" /></svg>Conteúdos</a>
+                <a
+                  href="#"
+                  class="inline-flex min-h-11 items-center gap-1 text-xs font-semibold text-primary"
+                  ><svg
+                    aria-hidden="true"
+                    class="size-3.5"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="m15 18-6-6 6-6" /></svg
+                  >Conteúdos</a
+                >
                 <h3 class="mt-1 text-xl font-semibold">Peça com falha</h3>
-                <div class="mt-2 flex gap-2"><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><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></div>
-                <button type="button" class="mt-4 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>
-                <button type="button" class="mt-2 min-h-11 w-full rounded-lg border border-border text-sm font-medium">Anexar</button>
-                <button type="button" class="mt-2 inline-flex min-h-11 w-full items-center justify-center gap-1.5 rounded-lg text-sm font-medium text-destructive"><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 class="mt-5 grid aspect-video place-items-center rounded-xl border border-border bg-muted text-xs font-semibold text-muted-foreground">Sem prévia disponível</div>
-                <div class="mt-5 rounded-lg border border-red-200 bg-red-50 p-3 text-xs leading-5 text-red-800">O processamento não foi concluído. O arquivo foi preservado.</div>
+                <div class="mt-2 flex gap-2">
+                  <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
+                  ><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
+                  >
+                </div>
+                <button
+                  type="button"
+                  class="mt-4 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>
+                <button
+                  type="button"
+                  class="mt-2 min-h-11 w-full rounded-lg border border-border text-sm font-medium"
+                >
+                  Anexar
+                </button>
+                <button
+                  type="button"
+                  class="mt-2 inline-flex min-h-11 w-full items-center justify-center gap-1.5 rounded-lg text-sm font-medium text-destructive"
+                >
+                  <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
+                  class="mt-5 grid aspect-video place-items-center rounded-xl border border-border bg-muted text-xs font-semibold text-muted-foreground"
+                >
+                  Sem prévia disponível
+                </div>
+                <div
+                  class="mt-5 rounded-lg border border-red-200 bg-red-50 p-3 text-xs leading-5 text-red-800"
+                >
+                  O processamento não foi concluído. O arquivo foi preservado.
+                </div>
               </div>
             </div>
           </div>
@@ -486,38 +1142,126 @@
       <!-- CENAS E–F — CONFIRMAÇÕES -->
       <section id="confirmacoes" aria-labelledby="confirmacoes-title">
         <div class="mb-3">
-          <p class="text-xs font-medium text-muted-foreground">Cenas E–F · diálogos sempre visíveis</p>
+          <p class="text-xs font-medium text-muted-foreground">
+            Cenas E–F · diálogos sempre visíveis
+          </p>
           <h2 id="confirmacoes-title" class="mt-1 text-base font-semibold">
             O link público é nomeado somente quando será quebrado
           </h2>
         </div>
         <div class="grid gap-6 lg:grid-cols-2">
-          <div class="relative flex min-h-[430px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4">
+          <div
+            class="relative flex min-h-[430px] 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">Publicado</span>
-            <div role="dialog" aria-modal="true" aria-labelledby="published-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"
+              >Publicado</span
+            >
+            <div
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="published-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>
-                <div class="min-w-0"><h3 id="published-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> deixa de funcionar para quem já recebeu. Esta ação não pode ser desfeita.</p></div>
+                <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="published-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> 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>
 
-          <div class="relative flex min-h-[430px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4">
+          <div
+            class="relative flex min-h-[430px] 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">Rascunho · processando · falhou</span>
-            <div role="dialog" aria-modal="true" aria-labelledby="draft-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"
+              >Rascunho · processando · falhou</span
+            >
+            <div
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="draft-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>
-                <div class="min-w-0"><h3 id="draft-title" class="text-base font-medium">Apagar esta peça?</h3><p class="mt-2 text-sm leading-6 text-muted-foreground">Esta ação não pode ser desfeita.</p></div>
+                <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="draft-title" class="text-base font-medium">Apagar esta peça?</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>
@@ -527,30 +1271,154 @@
       <!-- CENAS G–H — FEEDBACK -->
       <section id="feedback" aria-labelledby="feedback-title">
         <div class="mb-3">
-          <p class="text-xs font-medium text-muted-foreground">Cenas G–H · estados críticos do diálogo</p>
+          <p class="text-xs font-medium text-muted-foreground">
+            Cenas G–H · estados críticos do diálogo
+          </p>
           <h2 id="feedback-title" class="mt-1 text-base font-semibold">
             Falha permanece no contexto; envio bloqueia os dois gestos
           </h2>
         </div>
         <div class="grid gap-6 lg:grid-cols-2">
-          <div class="relative flex min-h-[470px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4">
+          <div
+            class="relative flex min-h-[470px] 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">Erro ao apagar</span>
-            <div role="dialog" aria-modal="true" aria-labelledby="error-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><div><h3 id="error-title" class="text-base font-medium">Apagar esta peça?</h3><p class="mt-2 text-sm leading-6 text-muted-foreground">Esta ação não pode ser desfeita.</p></div></div>
-              <div role="alert" class="grid w-full grid-cols-[auto_1fr] gap-x-2 rounded-lg border border-border bg-card px-2.5 py-2 text-left text-destructive"><svg aria-hidden="true" class="mt-0.5 size-4" 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="text-xs">Não foi possível apagar a peça.</p></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>
+            <span
+              class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium"
+              >Erro ao apagar</span
+            >
+            <div
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="error-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>
+                <div>
+                  <h3 id="error-title" class="text-base font-medium">Apagar esta peça?</h3>
+                  <p class="mt-2 text-sm leading-6 text-muted-foreground">
+                    Esta ação não pode ser desfeita.
+                  </p>
+                </div>
+              </div>
+              <div
+                role="alert"
+                class="grid w-full grid-cols-[auto_1fr] gap-x-2 rounded-lg border border-border bg-card px-2.5 py-2 text-left text-destructive"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="mt-0.5 size-4"
+                  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="text-xs">Não foi possível apagar a peça.</p>
+              </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>
             </div>
           </div>
 
-          <div class="relative flex min-h-[470px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4">
+          <div
+            class="relative flex min-h-[470px] 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">Enviando</span>
-            <div role="dialog" aria-modal="true" aria-labelledby="submitting-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><div><h3 id="submitting-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> 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 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>
+            <span
+              class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium"
+              >Enviando</span
+            >
+            <div
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="submitting-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>
+                <div>
+                  <h3 id="submitting-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> 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
+                  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>
             </div>
           </div>