teqo-backup/docs/plans/central-conteudos-analytics-ui-design.html
Francisco Solla f47c2645ac feat(C213): contadores anônimos de circulação por peça na Central de Conteúdos (Closes #1258)
Collection contentEvent (hidden, sem hooks, sem PII) + beacon público
POST /api/content-events fail-soft, download contado no servidor na rota
de mídia, agregação em uma query group-by e a coluna "Circulação" na lista
interna + painel na ficha (port classe-a-classe do artefato estendido,
crítica final do designer certificada).
2026-09-23 15:29:43 -03:00

824 lines
38 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="pt-BR" data-theme="campaign">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Design — C213 · Analytics da Central</title>
<style type="text/tailwindcss">
@theme inline {
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-border: var(--border);
--color-sidebar: var(--sidebar);
}
[data-theme='campaign'] {
--foreground: #1c1917;
--primary: #c51414;
--muted: #f4f4f5;
--muted-foreground: #6b7280;
--border: rgb(28 25 23/12%);
--sidebar: #fafaf9;
}
* {
box-sizing: border-box;
}
body {
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.board {
background: #efeeec;
background-image: radial-gradient(rgb(28 25 23/8%) 0.7px, transparent 0.7px);
background-size: 16px 16px;
}
.frame {
box-shadow: 0 18px 52px rgb(28 25 23/10%);
}
.desktop {
width: 1280px;
}
.phone {
width: 390px;
border-radius: 28px;
}
.btn {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
border-radius: 8px;
padding: 8px 12px;
font-size: 13px;
font-weight: 650;
}
.primary {
background: #c51414;
color: #fff;
}
.outline {
border: 1px solid #d6d3d1;
background: #fff;
}
.field {
min-height: 44px;
width: 100%;
border: 1px solid #d6d3d1;
border-radius: 6px;
padding: 9px 12px;
font-size: 14px;
}
.badge {
display: inline-flex;
border-radius: 999px;
padding: 2px 8px;
font-size: 11px;
font-weight: 650;
}
.live {
background: #fff1f2;
color: #9f1239;
}
.draft {
background: #f4f4f5;
color: #57534e;
}
.asset {
display: grid;
place-items: center;
background: linear-gradient(135deg, #e7e5e4, #f5f5f4);
color: #78716c;
text-align: center;
font-size: 10px;
font-weight: 700;
}
.scene:after {
content: '';
height: 1px;
flex: 1;
background: #d6d3d1;
}
</style>
</head>
<body class="board min-h-screen text-foreground antialiased">
<main class="mx-auto max-w-[1480px] space-y-16 px-4 py-12 md:px-8">
<header class="max-w-3xl">
<span class="badge bg-primary text-white">C213 · extensão pré-markup</span>
<h1 class="mt-4 text-3xl font-semibold tracking-tight">Quatro sinais. Nenhum dashboard.</h1>
<p class="mt-2 text-sm leading-6 text-muted-foreground">
Os contadores vivem junto da peça e respondem só ao que a assessoria precisa decidir.
Cenas 05–07 fecham rascunho, histórico, indisponibilidade e acessibilidade.
</p>
</header>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-stone-600">
<span>CENA 01</span>
<h2>Desktop 1280 · uma coluna “Circulação” na lista</h2>
</div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl border bg-white">
<div class="flex min-h-[680px]">
<aside class="w-56 shrink-0 border-r 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 font-bold text-white"
>
S
</div>
<div>
<b class="text-sm">Solla</b>
<p class="text-xs text-muted-foreground">Campanha</p>
</div>
</div>
<div class="mt-4 rounded-md bg-muted px-3 py-2 text-sm font-semibold">
Comunicação
</div>
<div class="ml-4 border-l pl-3">
<div
class="mt-1 rounded-md bg-white px-3 py-2 text-sm font-semibold text-primary ring-1 ring-border"
>
Conteúdos
</div>
</div>
</aside>
<div class="min-w-0 flex-1 p-8">
<div class="flex items-start justify-between">
<div>
<h3 class="text-2xl font-semibold">Conteúdos</h3>
<p class="mt-1 text-sm text-muted-foreground">
Publicação e circulação no mesmo lugar.
</p>
</div>
<button class="btn primary">Enviar peças</button>
</div>
<div class="mt-7 flex gap-2">
<input class="field" placeholder="Buscar conteúdos…" /><button class="btn outline">
Filtros
</button>
</div>
<div class="mt-5 overflow-hidden rounded-xl border">
<table class="w-full table-fixed text-left text-sm">
<thead class="bg-stone-50 text-xs text-muted-foreground">
<tr>
<th class="w-[25%] p-4">Peça</th>
<th class="w-[13%]">Processamento</th>
<th class="w-[11%]">Publicação</th>
<th class="w-[39%]">Circulação</th>
<th class="w-[12%] pr-4 text-right">Próxima ação</th>
</tr>
</thead>
<tbody class="divide-y">
<tr>
<td class="p-4">
<div class="flex gap-3">
<div class="asset h-14 w-20 rounded-md">NEEDS ASSET</div>
<div>
<b>Fim da escala 6×1 é saúde</b>
<p class="mt-1 text-xs text-muted-foreground">Vídeo</p>
</div>
</div>
</td>
<td><span class="badge bg-green-100 text-green-800">Pronto</span></td>
<td><span class="badge live">Publicado</span></td>
<td>
<div class="grid grid-cols-4 gap-5">
<div>
<span class="block text-[10px] text-muted-foreground">Aberturas</span
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
</div>
<div>
<span class="block text-[10px] text-muted-foreground">Downloads</span
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
</div>
<div>
<span class="block text-[10px] text-muted-foreground">WhatsApp</span
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
</div>
<div>
<span class="block text-[10px] text-muted-foreground">Link</span
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
</div>
</div>
</td>
<td class="pr-4 text-right"><button class="btn outline">Abrir</button></td>
</tr>
<tr>
<td class="p-4">
<b>Solla em defesa do SUS</b>
<p class="mt-1 text-xs text-muted-foreground">Foto</p>
</td>
<td><span class="badge bg-green-100 text-green-800">Pronto</span></td>
<td><span class="badge live">Publicado</span></td>
<td class="font-semibold tabular-nums">
0 abertura · 0 download · 0 WhatsApp · 0 link
</td>
<td class="pr-4 text-right"><button class="btn outline">Abrir</button></td>
</tr>
<tr>
<td class="p-4">
<b>Por que defender o SUS</b>
<p class="mt-1 text-xs text-muted-foreground">Texto</p>
</td>
<td><span class="badge bg-green-100 text-green-800">Pronto</span></td>
<td><span class="badge draft">Rascunho</span></td>
<td class="text-xs text-muted-foreground">Sem dados — ainda não publicada</td>
<td class="pr-4 text-right"><button class="btn outline">Abrir</button></td>
</tr>
<tr>
<td class="p-4">
<b>Saúde pública é compromisso</b>
<p class="mt-1 text-xs text-muted-foreground">Vídeo</p>
</td>
<td><span class="badge bg-green-100 text-green-800">Pronto</span></td>
<td><span class="badge draft">Rascunho</span></td>
<td>
<div class="grid grid-cols-4 gap-4">
<div>
<span class="block text-[10px] text-muted-foreground">Aberturas</span
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
</div>
<div>
<span class="block text-[10px] text-muted-foreground">Downloads</span
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
</div>
<div>
<span class="block text-[10px] text-muted-foreground">WhatsApp</span
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
</div>
<div>
<span class="block text-[10px] text-muted-foreground">Link</span
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
</div>
</div>
<p class="mt-1.5 text-[10px] text-muted-foreground">
Histórico de quando esteve publicada · peça fora do ar
</p>
</td>
<td class="pr-4 text-right"><button class="btn outline">Abrir</button></td>
</tr>
</tbody>
</table>
</div>
<p class="mt-3 text-xs text-muted-foreground">
Barras cinza = valores reais omitidos no gate · 0 = nenhum evento · — = contagem
indisponível.
</p>
</div>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-stone-600">
<span>CENA 05 · REVISÃO C213</span>
<h2>Desktop 1280 · detalhe de rascunho nunca publicado</h2>
</div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl border bg-white">
<div class="border-b px-8 py-5">
<a class="text-xs font-semibold text-primary">← Conteúdos</a>
<div class="mt-2 flex items-start justify-between gap-3">
<div>
<h3 class="text-xl font-semibold">Por que defender o SUS</h3>
<div class="mt-2 flex gap-2">
<span class="badge bg-green-100 text-green-800">Pronto</span
><span class="badge draft">Rascunho</span>
</div>
</div>
<button class="btn primary">Publicar</button>
</div>
</div>
<div class="grid grid-cols-[300px_1fr] gap-8 p-8">
<div>
<div class="asset aspect-video rounded-xl">NEEDS ASSET · PREVIEW REAL</div>
<dl class="mt-4 space-y-2 text-xs">
<div class="flex justify-between gap-3">
<dt class="text-muted-foreground">Origem</dt>
<dd>Arquivo</dd>
</div>
<div class="flex justify-between gap-3">
<dt class="text-muted-foreground">Duração</dt>
<dd>—</dd>
</div>
</dl>
</div>
<div>
<h4 class="text-base font-semibold">Circulação</h4>
<p class="mt-1 text-sm text-muted-foreground">
Contagem anônima e acumulada desde a publicação.
</p>
<div class="mt-5 rounded-xl border bg-muted/40 p-5">
<p class="text-sm font-semibold">Sem dados — esta peça ainda não foi publicada.</p>
<p class="mt-1 text-sm leading-6 text-muted-foreground">
A contagem começa quando ela entrar na Central pública.
</p>
</div>
<p class="mt-3 text-xs leading-5 text-muted-foreground">
<span class="font-medium text-foreground">Privacidade:</span> sem IP persistido,
cookie de identidade ou rastreio entre peças.
</p>
<div class="mt-6 border-t pt-6">
<div class="grid grid-cols-2 gap-4">
<label class="col-span-2 text-xs font-medium"
>Título<input class="field mt-1" value="Por que defender o SUS"
/></label>
<label class="text-xs font-medium"
>Tipo<select class="field mt-1">
<option>Texto</option>
</select></label
>
<label class="text-xs font-medium"
>Data da peça<input class="field mt-1" type="text" placeholder="dd/mm/aaaa"
/></label>
</div>
<div class="mt-4 flex justify-end">
<button class="btn primary">Salvar alterações</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-stone-600">
<span>CENA 06 · REVISÃO C213</span>
<h2>Mobile 390 · peça despublicada preserva o histórico</h2>
</div>
<div class="flex flex-wrap items-start justify-center gap-8">
<div class="phone frame min-h-[760px] overflow-hidden border bg-white">
<div class="flex h-14 items-center gap-3 border-b px-4">
<span>←</span><b>Detalhe da peça</b>
</div>
<div class="p-4">
<div class="flex items-start justify-between gap-3">
<h3 class="text-base font-semibold">Saúde pública é compromisso</h3>
<span class="badge draft shrink-0">Rascunho</span>
</div>
<div class="asset mt-4 aspect-video rounded-xl">NEEDS ASSET · PREVIEW REAL</div>
<h4 class="mt-6 text-sm font-semibold">Circulação</h4>
<p class="mt-1 text-xs leading-5 text-muted-foreground">
Contagem anônima e acumulada desde a publicação.
</p>
<dl class="mt-3 grid grid-cols-1 divide-y overflow-hidden rounded-xl border">
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
<dt class="text-sm font-medium text-muted-foreground">Aberturas</dt>
<dd
class="h-4 w-12 rounded bg-stone-300"
aria-label="Valor real omitido no gate"
></dd>
</div>
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
<dt class="text-sm font-medium text-muted-foreground">Downloads</dt>
<dd
class="h-4 w-12 rounded bg-stone-300"
aria-label="Valor real omitido no gate"
></dd>
</div>
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
<dt class="text-sm font-medium text-muted-foreground">WhatsApp</dt>
<dd
class="h-4 w-12 rounded bg-stone-300"
aria-label="Valor real omitido no gate"
></dd>
</div>
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
<dt class="text-sm font-medium text-muted-foreground">Link copiado</dt>
<dd
class="h-4 w-12 rounded bg-stone-300"
aria-label="Valor real omitido no gate"
></dd>
</div>
</dl>
<p class="mt-4 rounded-lg bg-muted p-3 text-xs leading-5 text-muted-foreground">
<b class="text-foreground">Histórico de quando esteve publicada.</b> A peça está
fora do ar.
</p>
<aside
aria-label="Como ler os contadores"
class="mt-3 rounded-lg bg-muted p-3 text-xs leading-5 text-muted-foreground"
>
<b class="text-foreground">Leitura:</b> compare os sinais sem somá-los. WhatsApp e
link mostram escolhas diferentes.
</aside>
<p class="mt-3 text-xs leading-5 text-muted-foreground">
<span class="font-medium text-foreground">Privacidade:</span> sem IP persistido,
cookie de identidade ou rastreio entre peças.
</p>
<div class="mt-5 border-t pt-5">
<label class="text-xs font-medium"
>Título<input class="field mt-1" value="Saúde pública é compromisso"
/></label>
</div>
</div>
</div>
<aside class="w-[520px] rounded-xl border bg-white p-6 shadow-sm">
<span class="badge bg-primary text-white">CONTRATO DE PORT</span>
<h3 class="mt-4 text-lg font-semibold">Bloco de domínio “Circulação”</h3>
<p class="mt-2 text-sm leading-6 text-muted-foreground">
O strip compartilhado atual é só referência de tokens; sua pilha mobile não
corresponde a este desenho. O alvo responsivo é o
<code class="rounded bg-muted px-1 py-0.5 text-foreground">&lt;dl&gt;</code> da cena
02; as cenas 04 e 06 isolam as classes-base do mesmo bloco para a prévia de 390 px.
</p>
<div class="mt-5 space-y-4 text-sm">
<div>
<b>Contêiner</b
><code
class="mt-1 block overflow-x-auto rounded-lg bg-stone-950 p-3 text-xs leading-5 text-stone-100"
>mt-5 grid grid-cols-1 divide-y overflow-hidden rounded-xl border sm:grid-cols-2
sm:divide-y-0 lg:grid-cols-4</code
>
</div>
<div>
<b>Célula</b
><code
class="mt-1 block overflow-x-auto rounded-lg bg-stone-950 p-3 text-xs leading-5 text-stone-100"
>flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start
sm:justify-start sm:gap-1</code
>
</div>
<div>
<b>Tipografia</b
><code
class="mt-1 block overflow-x-auto rounded-lg bg-stone-950 p-3 text-xs leading-5 text-stone-100"
>dt: text-sm font-medium text-muted-foreground sm:text-xs · dd: text-lg
font-medium tabular-nums tracking-tight</code
>
</div>
<div>
<b>Divisórias das células 2–4</b
><code
class="mt-1 block overflow-x-auto rounded-lg bg-stone-950 p-3 text-xs leading-5 text-stone-100"
>2: sm:border-l · 3: sm:border-t lg:border-l lg:border-t-0 · 4: sm:border-l
sm:border-t lg:border-t-0</code
>
</div>
</div>
<div class="mt-5 border-t pt-5 text-sm leading-6">
<p><b>Lista:</b> Aberturas · Downloads · WhatsApp · Link.</p>
<p><b>Detalhe:</b> Aberturas · Downloads · WhatsApp · Link copiado.</p>
<p>
<b>Indisponível:</b> “—” visível com
<code class="rounded bg-muted px-1">aria-hidden</code>; cada valor recebe “Rótulo:
contagem indisponível” como nome acessível.
</p>
<p><b>Hierarquia:</b> strip → estado/Leitura → Privacidade → formulário já aberto.</p>
</div>
</aside>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-stone-600">
<span>CENA 02</span>
<h2>Desktop 1280 · detalhe por canal, sem gráfico</h2>
</div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl border bg-white">
<div class="border-b px-8 py-5">
<a class="text-xs font-semibold text-primary">← Conteúdos</a>
<div class="mt-2 flex items-start justify-between gap-3">
<div>
<h3 class="text-xl font-semibold">Fim da escala 6×1 é saúde</h3>
<div class="mt-2 flex gap-2">
<span class="badge bg-green-100 text-green-800">Pronto</span
><span class="badge live">Publicado</span>
</div>
</div>
<button class="btn primary">Despublicar</button>
</div>
</div>
<div class="grid grid-cols-[300px_1fr] gap-8 p-8">
<div>
<div class="asset aspect-video rounded-xl">NEEDS ASSET · PREVIEW REAL</div>
<dl class="mt-4 space-y-2 text-xs">
<div class="flex justify-between gap-3">
<dt class="text-muted-foreground">Origem</dt>
<dd>Arquivo</dd>
</div>
<div class="flex justify-between gap-3">
<dt class="text-muted-foreground">Duração</dt>
<dd>—</dd>
</div>
<div class="flex justify-between gap-3">
<dt class="text-muted-foreground">Publicado em</dt>
<dd
class="h-3 w-20 rounded bg-stone-300"
aria-label="Data real omitida no gate"
></dd>
</div>
</dl>
</div>
<div>
<h4 class="text-base font-semibold">Circulação</h4>
<p class="mt-1 text-sm text-muted-foreground">
Contagem anônima e acumulada desde a publicação.
</p>
<dl
class="mt-5 grid grid-cols-1 divide-y overflow-hidden rounded-xl border sm:grid-cols-2 sm:divide-y-0 lg:grid-cols-4"
>
<div
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1"
>
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">Aberturas</dt>
<dd
class="mt-2 h-5 w-14 rounded bg-stone-300"
aria-label="Valor real omitido no gate"
></dd>
</div>
<div
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1 sm:border-l"
>
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">Downloads</dt>
<dd
class="mt-2 h-5 w-14 rounded bg-stone-300"
aria-label="Valor real omitido no gate"
></dd>
</div>
<div
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1 sm:border-t lg:border-l lg:border-t-0"
>
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">WhatsApp</dt>
<dd
class="mt-2 h-5 w-14 rounded bg-stone-300"
aria-label="Valor real omitido no gate"
></dd>
</div>
<div
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1 sm:border-l sm:border-t lg:border-t-0"
>
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">Link copiado</dt>
<dd
class="mt-2 h-5 w-14 rounded bg-stone-300"
aria-label="Valor real omitido no gate"
></dd>
</div>
</dl>
<p class="mt-2 text-xs text-muted-foreground">
Valores reais omitidos neste gate; o produto mostra contagens absolutas.
</p>
<aside
aria-label="Como ler os contadores"
class="mt-5 rounded-lg bg-muted p-4 text-sm leading-6 text-muted-foreground"
>
<b class="text-foreground">Leitura:</b> compare os sinais sem somá-los. WhatsApp e
link ficam separados porque mostram escolhas diferentes.
</aside>
<p class="mt-3 text-xs leading-5 text-muted-foreground">
<span class="font-medium text-foreground">Privacidade:</span>
Sem IP persistido, cookie de identidade ou rastreio entre peças.
</p>
<div class="mt-6 border-t pt-6">
<div class="grid grid-cols-2 gap-4">
<label class="col-span-2 text-xs font-medium"
>Título<input class="field mt-1" value="Fim da escala 6×1 é saúde"
/></label>
<label class="text-xs font-medium"
>Tipo<select class="field mt-1">
<option>Vídeo</option>
</select></label
>
<label class="text-xs font-medium"
>Data da peça<input class="field mt-1" type="text" placeholder="dd/mm/aaaa"
/></label>
</div>
<div class="mt-4 flex justify-end">
<button class="btn primary">Salvar alterações</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-stone-600">
<span>CENAS 03–04</span>
<h2>Mobile 390 · cards e falha da contagem</h2>
</div>
<div class="flex flex-wrap justify-center gap-8">
<div class="phone frame min-h-[760px] overflow-hidden border bg-white">
<div class="flex h-14 items-center justify-between bg-primary px-4 text-white">
<b>Conteúdos</b
><button class="rounded-md border border-white/40 px-3 py-2 text-xs font-semibold">
Enviar
</button>
</div>
<div class="p-4">
<input class="field" placeholder="Buscar conteúdos…" />
<article class="mt-4 rounded-xl border p-4">
<div class="flex justify-between gap-3">
<b class="text-sm">Fim da escala 6×1 é saúde</b
><span class="badge h-fit bg-green-100 text-green-800">Pronto</span>
</div>
<div class="mt-1"><span class="badge live">Publicado</span></div>
<div class="mt-4 grid grid-cols-2 gap-px overflow-hidden rounded-lg bg-border">
<div class="bg-white p-3">
<span class="text-[10px] text-muted-foreground">Aberturas</span
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
</div>
<div class="bg-white p-3">
<span class="text-[10px] text-muted-foreground">Downloads</span
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
</div>
<div class="bg-white p-3">
<span class="text-[10px] text-muted-foreground">WhatsApp</span
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
</div>
<div class="bg-white p-3">
<span class="text-[10px] text-muted-foreground">Link</span
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
</div>
</div>
<button class="btn outline mt-3 w-full">Abrir</button>
</article>
<article class="mt-3 rounded-xl border p-4">
<div class="flex justify-between">
<b class="text-sm">Solla em defesa do SUS</b
><span class="badge bg-green-100 text-green-800">Pronto</span>
</div>
<div class="mt-1"><span class="badge live">Publicado</span></div>
<p class="mt-3 text-xs text-muted-foreground">
0 abertura · 0 download · 0 WhatsApp · 0 link
</p>
</article>
<article class="mt-3 rounded-xl border p-4">
<div class="flex justify-between">
<b class="text-sm">Por que defender o SUS</b
><span class="badge bg-green-100 text-green-800">Pronto</span>
</div>
<div class="mt-1"><span class="badge draft">Rascunho</span></div>
<p class="mt-3 text-xs text-muted-foreground">Sem dados — ainda não publicada</p>
</article>
</div>
</div>
<div class="phone frame min-h-[760px] overflow-hidden border bg-white">
<div class="flex h-14 items-center gap-3 border-b px-4">
<span>←</span><b>Detalhe da peça</b>
</div>
<div class="p-4">
<div class="asset aspect-video rounded-xl">NEEDS ASSET · PREVIEW REAL</div>
<h3 class="mt-4 text-base font-semibold">Fim da escala 6×1 é saúde</h3>
<h4 class="mt-6 text-sm font-semibold">Circulação</h4>
<p class="mt-1 text-xs leading-5 text-muted-foreground">
Contagem anônima e acumulada desde a publicação.
</p>
<dl class="mt-3 grid grid-cols-1 divide-y overflow-hidden rounded-xl border">
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
<dt class="text-sm font-medium text-muted-foreground">Aberturas</dt>
<dd
class="text-lg font-medium tabular-nums tracking-tight"
aria-label="Aberturas: contagem indisponível"
>
<span aria-hidden="true">—</span>
</dd>
</div>
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
<dt class="text-sm font-medium text-muted-foreground">Downloads</dt>
<dd
class="text-lg font-medium tabular-nums tracking-tight"
aria-label="Downloads: contagem indisponível"
>
<span aria-hidden="true">—</span>
</dd>
</div>
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
<dt class="text-sm font-medium text-muted-foreground">WhatsApp</dt>
<dd
class="text-lg font-medium tabular-nums tracking-tight"
aria-label="WhatsApp: contagem indisponível"
>
<span aria-hidden="true">—</span>
</dd>
</div>
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
<dt class="text-sm font-medium text-muted-foreground">Link copiado</dt>
<dd
class="text-lg font-medium tabular-nums tracking-tight"
aria-label="Link copiado: contagem indisponível"
>
<span aria-hidden="true">—</span>
</dd>
</div>
</dl>
<p
role="status"
class="mt-4 rounded-lg bg-muted p-3 text-xs leading-5 text-muted-foreground"
>
<b class="text-foreground">Contagem indisponível agora.</b> A página pública, o
download e o compartilhamento continuam funcionando.
</p>
<p class="mt-3 text-xs leading-5 text-muted-foreground">
<span class="font-medium text-foreground">Privacidade:</span> sem IP persistido,
cookie de identidade ou rastreio entre peças.
</p>
<div class="mt-5 border-t pt-5">
<label class="text-xs font-medium"
>Título<input class="field mt-1" value="Fim da escala 6×1 é saúde"
/></label>
<button class="btn primary mt-3 w-full">Salvar alterações</button>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-stone-600">
<span>CENA 07 · REVISÃO C213</span>
<h2>Desktop 1280 · indisponibilidade e hierarquia acessível</h2>
</div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl border bg-white p-8">
<div class="grid grid-cols-[300px_1fr] gap-8">
<aside class="rounded-xl bg-muted p-5 text-sm leading-6 text-muted-foreground">
<b class="text-foreground">Ordem de leitura</b>
<ol class="mt-2 list-decimal space-y-1 pl-4">
<li>Título e explicação da medição.</li>
<li>Quatro termos e seus valores.</li>
<li>Estado indisponível, visível e anunciado.</li>
<li>Nota de privacidade.</li>
<li>Formulário já aberto.</li>
</ol>
<p class="mt-4 text-xs">
“Leitura:” só aparece quando há contadores para comparar. Não compete com a mensagem
de falha.
</p>
</aside>
<div>
<h3 class="text-base font-semibold">Circulação</h3>
<p class="mt-1 text-sm text-muted-foreground">
Contagem anônima e acumulada desde a publicação.
</p>
<dl
class="mt-5 grid grid-cols-1 divide-y overflow-hidden rounded-xl border sm:grid-cols-2 sm:divide-y-0 lg:grid-cols-4"
>
<div
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1"
>
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">Aberturas</dt>
<dd
class="text-lg font-medium tabular-nums tracking-tight"
aria-label="Aberturas: contagem indisponível"
>
<span aria-hidden="true">—</span>
</dd>
</div>
<div
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1 sm:border-l"
>
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">Downloads</dt>
<dd
class="text-lg font-medium tabular-nums tracking-tight"
aria-label="Downloads: contagem indisponível"
>
<span aria-hidden="true">—</span>
</dd>
</div>
<div
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1 sm:border-t lg:border-l lg:border-t-0"
>
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">WhatsApp</dt>
<dd
class="text-lg font-medium tabular-nums tracking-tight"
aria-label="WhatsApp: contagem indisponível"
>
<span aria-hidden="true">—</span>
</dd>
</div>
<div
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1 sm:border-l sm:border-t lg:border-t-0"
>
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">Link copiado</dt>
<dd
class="text-lg font-medium tabular-nums tracking-tight"
aria-label="Link copiado: contagem indisponível"
>
<span aria-hidden="true">—</span>
</dd>
</div>
</dl>
<p
role="status"
class="mt-4 rounded-lg bg-muted p-4 text-sm leading-6 text-muted-foreground"
>
<b class="text-foreground">Contagem indisponível agora.</b> A página pública, o
download e o compartilhamento continuam funcionando.
</p>
<p class="mt-3 text-xs leading-5 text-muted-foreground">
<span class="font-medium text-foreground">Privacidade:</span> sem IP persistido,
cookie de identidade ou rastreio entre peças.
</p>
<div class="mt-6 border-t pt-6">
<label class="text-xs font-medium"
>Título<input class="field mt-1" value="Fim da escala 6×1 é saúde"
/></label>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>