From 3ea16243cac0ec1a9028620e2a0f8fb47f3a0bfb Mon Sep 17 00:00:00 2001
From: Francisco Solla <fsolla@pm.me>
Date: Wed, 19 Aug 2026 20:48:46 -0300
Subject: [PATCH] style(S11): prettier no rascunho UI do plano

---
 ...d-instagram-nao-aparece-home-ui-draft.html | 92 ++++++++++++++-----
 1 file changed, 69 insertions(+), 23 deletions(-)

diff --git a/docs/plans/feed-instagram-nao-aparece-home-ui-draft.html b/docs/plans/feed-instagram-nao-aparece-home-ui-draft.html
index b31fbf71..8a9607b8 100644
--- a/docs/plans/feed-instagram-nao-aparece-home-ui-draft.html
+++ b/docs/plans/feed-instagram-nao-aparece-home-ui-draft.html
@@ -47,27 +47,39 @@
                 <strong>Correção:</strong> gere um token de longa duração pelo Instagram Login
                 (conta Business/Creator vinculada à página) e atualize o campo abaixo.
               </p>
-              <button class="mt-3 rounded-md bg-red-600 px-3 py-1.5 text-sm font-semibold text-white">
+              <button
+                class="mt-3 rounded-md bg-red-600 px-3 py-1.5 text-sm font-semibold text-white"
+              >
                 Tentar sincronizar de novo
               </button>
             </div>
 
             <div class="mt-6 grid max-w-2xl grid-cols-1 gap-4">
               <div>
-                <label class="text-xs font-semibold text-zinc-700">Token de acesso (Instagram Graph API)</label>
-                <div class="mt-1 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-700">
+                <label class="text-xs font-semibold text-zinc-700"
+                  >Token de acesso (Instagram Graph API)</label
+                >
+                <div
+                  class="mt-1 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-700"
+                >
                   IGAA...abc123
                 </div>
               </div>
               <div>
-                <label class="text-xs font-semibold text-zinc-700">ID do usuário (conta Business/Creator)</label>
-                <div class="mt-1 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-700">
+                <label class="text-xs font-semibold text-zinc-700"
+                  >ID do usuário (conta Business/Creator)</label
+                >
+                <div
+                  class="mt-1 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-700"
+                >
                   17841400000000000
                 </div>
               </div>
               <div>
                 <label class="text-xs font-semibold text-zinc-700">Máximo de posts</label>
-                <div class="mt-1 w-24 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-700">
+                <div
+                  class="mt-1 w-24 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-700"
+                >
                   3
                 </div>
               </div>
@@ -82,7 +94,9 @@
             </div>
 
             <div class="mt-6 flex items-center justify-end gap-2 border-t border-zinc-300 pt-4">
-              <button class="rounded-md border border-zinc-400 bg-white px-4 py-1.5 text-sm font-semibold text-zinc-700">
+              <button
+                class="rounded-md border border-zinc-400 bg-white px-4 py-1.5 text-sm font-semibold text-zinc-700"
+              >
                 Cancelar
               </button>
               <button class="rounded-md bg-red-600 px-4 py-1.5 text-sm font-semibold text-white">
@@ -122,20 +136,30 @@
 
             <div class="mt-6 grid max-w-2xl grid-cols-1 gap-4">
               <div>
-                <label class="text-xs font-semibold text-zinc-700">Token de acesso (Instagram Graph API)</label>
-                <div class="mt-1 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-700">
+                <label class="text-xs font-semibold text-zinc-700"
+                  >Token de acesso (Instagram Graph API)</label
+                >
+                <div
+                  class="mt-1 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-700"
+                >
                   IGAA...abc123
                 </div>
               </div>
               <div>
-                <label class="text-xs font-semibold text-zinc-700">ID do usuário (conta Business/Creator)</label>
-                <div class="mt-1 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-700">
+                <label class="text-xs font-semibold text-zinc-700"
+                  >ID do usuário (conta Business/Creator)</label
+                >
+                <div
+                  class="mt-1 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-700"
+                >
                   17841400000000000
                 </div>
               </div>
               <div>
                 <label class="text-xs font-semibold text-zinc-700">Máximo de posts</label>
-                <div class="mt-1 w-24 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-700">
+                <div
+                  class="mt-1 w-24 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-700"
+                >
                   3
                 </div>
               </div>
@@ -154,7 +178,9 @@
                     <span class="block truncate text-sm font-medium text-zinc-800">
                       Caravana pelo interior: chegada em Vitória da Conquista
                     </span>
-                    <span class="block text-xs text-zinc-500">há 2 h · ID 17841400000000000_001</span>
+                    <span class="block text-xs text-zinc-500"
+                      >há 2 h · ID 17841400000000000_001</span
+                    >
                   </span>
                   <span class="rounded bg-zinc-200 px-2 py-1 text-xs font-semibold text-zinc-700">
                     Exibir
@@ -166,7 +192,9 @@
                     <span class="block truncate text-sm font-medium text-zinc-800">
                       Foto do plenário: votação da pauta da saúde
                     </span>
-                    <span class="block text-xs text-zinc-500">ontem · ID 17841400000000000_002</span>
+                    <span class="block text-xs text-zinc-500"
+                      >ontem · ID 17841400000000000_002</span
+                    >
                   </span>
                   <span class="rounded bg-zinc-200 px-2 py-1 text-xs font-semibold text-zinc-700">
                     Exibir
@@ -178,7 +206,9 @@
                     <span class="block truncate text-sm font-medium text-zinc-800">
                       Post de grade (sem legenda) — para marcar "Não exibir"
                     </span>
-                    <span class="block text-xs text-zinc-500">ontem · ID 17841400000000000_003</span>
+                    <span class="block text-xs text-zinc-500"
+                      >ontem · ID 17841400000000000_003</span
+                    >
                   </span>
                   <span class="rounded bg-red-100 px-2 py-1 text-xs font-semibold text-red-700">
                     Não exibir
@@ -190,7 +220,9 @@
                     <span class="block truncate text-sm font-medium text-zinc-800">
                       Agenda da semana: agendas abertas em Salvador
                     </span>
-                    <span class="block text-xs text-zinc-500">há 2 dias · ID 17841400000000000_004</span>
+                    <span class="block text-xs text-zinc-500"
+                      >há 2 dias · ID 17841400000000000_004</span
+                    >
                   </span>
                   <span class="rounded bg-zinc-200 px-2 py-1 text-xs font-semibold text-zinc-700">
                     Exibir
@@ -200,7 +232,9 @@
             </div>
 
             <div class="mt-6 flex items-center justify-end gap-2 border-t border-zinc-300 pt-4">
-              <button class="rounded-md border border-zinc-400 bg-white px-4 py-1.5 text-sm font-semibold text-zinc-700">
+              <button
+                class="rounded-md border border-zinc-400 bg-white px-4 py-1.5 text-sm font-semibold text-zinc-700"
+              >
                 Cancelar
               </button>
               <button class="rounded-md bg-red-600 px-4 py-1.5 text-sm font-semibold text-white">
@@ -213,7 +247,9 @@
 
       <!-- Cena: ainda não configurado (primeiro acesso) -->
       <section data-shot="admin-nao-configurado" class="mt-12">
-        <p class="mb-3 text-sm font-medium text-zinc-300">Cena 3 — sem token nem ID (primeiro acesso)</p>
+        <p class="mb-3 text-sm font-medium text-zinc-300">
+          Cena 3 — sem token nem ID (primeiro acesso)
+        </p>
         <div class="rounded-xl border border-zinc-700 bg-zinc-100 text-zinc-900">
           <div class="flex items-center justify-between border-b border-zinc-300 px-6 py-4">
             <div class="flex items-center gap-2">
@@ -240,21 +276,31 @@
 
             <div class="mt-6 grid max-w-2xl grid-cols-1 gap-4">
               <div>
-                <label class="text-xs font-semibold text-zinc-700">Token de acesso (Instagram Graph API)</label>
-                <div class="mt-1 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-400">
+                <label class="text-xs font-semibold text-zinc-700"
+                  >Token de acesso (Instagram Graph API)</label
+                >
+                <div
+                  class="mt-1 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-400"
+                >
                   (vazio)
                 </div>
               </div>
               <div>
-                <label class="text-xs font-semibold text-zinc-700">ID do usuário (conta Business/Creator)</label>
-                <div class="mt-1 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-400">
+                <label class="text-xs font-semibold text-zinc-700"
+                  >ID do usuário (conta Business/Creator)</label
+                >
+                <div
+                  class="mt-1 rounded-md border border-zinc-400 bg-white px-3 py-2 text-sm text-zinc-400"
+                >
                   (vazio)
                 </div>
               </div>
             </div>
 
             <div class="mt-6 flex items-center justify-end gap-2 border-t border-zinc-300 pt-4">
-              <button class="rounded-md border border-zinc-400 bg-white px-4 py-1.5 text-sm font-semibold text-zinc-700">
+              <button
+                class="rounded-md border border-zinc-400 bg-white px-4 py-1.5 text-sm font-semibold text-zinc-700"
+              >
                 Cancelar
               </button>
               <button class="rounded-md bg-red-600 px-4 py-1.5 text-sm font-semibold text-white">