/* ============================================================================
   STORIES 10X — fonte única de design.
   Tokens do PLANO_V1.md §9. Nenhuma cor literal fora deste bloco :root/[data-tema]:
   se um componente precisa de cor nova, o token nasce aqui primeiro.

   DOIS TEMAS, botão de troca sempre visível, preferência salva no aparelho.
     claro  "Furta-cor"          — pastéis iridescentes, cor profunda no texto
     escuro "Petróleo & Violeta" — petróleo é FUNDO, violeta é só acento

   Três travas (§9, não são gosto — são decisão):
     1. furta-cor NUNCA atrás de texto corrido: só faixa, borda e selo
     2. --acento nunca carrega semântica de erro (erro é --erro, e os dois não
        aparecem no mesmo componente)
     3. no escuro, fundo quase neutro e cor onde há ação
   ============================================================================ */

:root,
[data-tema='claro'] {
  --fundo: #fbf7fd;
  --superficie: #ffffff;
  --superficie-2: #f6f1f9;
  --borda: #eadff0;
  --texto: #2e2440;
  --texto-fraco: #6b6180;
  --acao: #7a4bc4;
  --acento: #d9569a;
  /* o rosa do §9 dá 3.65:1 no branco: serve para número grande e marcador, não
     para texto de 12px. Esta é a mesma cor puxada até passar em AA (5.15:1) —
     a identidade continua a do plano, muda só onde há letra pequena. */
  --acento-texto: #bf3a75;
  --furta-cor: linear-gradient(100deg, #ffe1f0, #e4e7ff, #dff6f2, #fff3dc);

  --ok: #2e7d5b;
  --atencao: #b77a16;
  --erro: #c0392b;

  --ok-fundo: #e8f5ef;
  --falta-fundo: #f3eef7;

  --sombra-1: 0 1px 2px rgba(46, 36, 64, 0.06), 0 4px 12px rgba(46, 36, 64, 0.05);
  --sombra-2: 0 8px 32px rgba(46, 36, 64, 0.14);
  --trilho: #e6dcee;
  --realce-foco: #2e2440;
  --acao-texto: #7a4bc4;
  --cor-cortina: rgba(20, 14, 30, 0.42);
  --texto-em-acao: #ffffff;
}

[data-tema='escuro'] {
  --fundo: #0f2429;
  --superficie: #16323a;
  --superficie-2: #122a31;
  --borda: #24454e;
  --texto: #e8f1f2;
  --texto-fraco: #93aeb4;
  --acao: #a97bf2;
  /* mesmo motivo, do outro lado: o violeta do §9 dá 4.38:1 no petróleo */
  --acao-texto: #bf9bf7;
  --acento: #5fd3c4;
  --acento-texto: #5fd3c4;
  --furta-cor: linear-gradient(
    100deg,
    rgba(122, 75, 196, 0.25),
    rgba(46, 125, 138, 0.25),
    rgba(169, 123, 242, 0.25)
  );

  --ok: #4fbf8b;
  --atencao: #e0a63c;
  --erro: #f0736a;

  --ok-fundo: rgba(79, 191, 139, 0.12);
  --falta-fundo: rgba(169, 123, 242, 0.1);

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
  --sombra-2: 0 10px 36px rgba(0, 0, 0, 0.45);
  --trilho: #1e3c45;
  --realce-foco: #e8f1f2;
  --cor-cortina: rgba(4, 12, 14, 0.6);
  --texto-em-acao: #16121f;
}

:root {
  /* tipografia: Belleza nos títulos, Inter no texto (fontes da fábrica) */
  --fonte-titulo: 'Belleza', system-ui, sans-serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, sans-serif;

  --t-eyebrow: 0.6875rem;
  --t-mini: 0.75rem;
  --t-corpo: 0.9375rem;
  --t-titulo: 1.375rem;
  --t-display: 1.75rem;

  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;

  --raio: 12px;
  --raio-p: 8px;
  --raio-pilula: 999px;

  --transicao: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transicao-preenche: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --entrada-folha: subir 240ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --largura-trilha: 264px;
  --largura-selos: 320px;
}

/* Quem pediu menos movimento recebe menos movimento. Toda transição desta folha
   passa por um destes três tokens, então zerar os tokens desliga o conjunto —
   sem precisar forçar prioridade em regra nenhuma. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transicao: 1ms linear;
    --transicao-preenche: 1ms linear;
    --entrada-folha: none;
  }
}

/* ------------------------------------------------------------------ base */

* {
  box-sizing: border-box;
}

/* `display` de classe vence o `hidden` do navegador — e aí um painel "escondido"
   continua na tela cobrindo o que está embaixo. Esta linha devolve a palavra
   final ao atributo. */
html [hidden] {
  /* o seletor tem que ser MAIS específico que a classe do componente: `[hidden]`
     sozinho empata com `.cortina` e perde por vir antes no arquivo */
  display: none;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--realce-foco);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}

.eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  font-weight: 600;
}

/* o sprite de símbolos SVG fica fora do fluxo — sem isto ele empurra o layout.
   Tem que ser classe: o CSP deste app (style-src 'self') bloqueia style="". */
.sprite-oculto {
  position: absolute;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------- cabeçalho */

.topo {
  position: relative;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

/* trava 1: a faixa furta-cor é FAIXA — nunca fundo de texto */
.topo::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--furta-cor);
}

.topo-linha {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) var(--e4) var(--e2);
}

.voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  background: none;
  border: 0;
  padding: var(--e1) var(--e2) var(--e1) 0;
  color: var(--texto-fraco);
  font-size: var(--t-mini);
  text-decoration: none;
  cursor: pointer;
}

.voltar:hover {
  color: var(--acao);
}

.topo-acoes {
  margin-left: auto;
  display: flex;
  gap: var(--e2);
}

.icone-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-fraco);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao), transform var(--transicao);
}

.icone-botao:hover {
  color: var(--acao);
  border-color: var(--acao);
}

.icone-botao:active {
  transform: scale(0.94);
}

.cabecalho-seq {
  padding: 0 var(--e4) var(--e3);
}

.cabecalho-seq h1 {
  font-size: var(--t-display);
  line-height: 1.15;
  margin: var(--e1) 0 var(--e2);
}

.meta-seq {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e3);
  font-size: var(--t-mini);
  color: var(--texto-fraco);
}

.meta-seq b {
  color: var(--texto);
  font-weight: 600;
}

/* diz se o que está na tela chegou ao banco. "salvo" some no cinza porque é o
   estado normal; o que precisa saltar aos olhos é o que NÃO salvou. */
.situacao {
  font-size: var(--t-mini);
}

.situacao[data-situacao='erro'] {
  color: var(--erro);
  font-weight: 600;
}

.situacao[data-situacao='salvando'] {
  color: var(--texto-fraco);
}

/* ============ A BARRA DE STORIES — a assinatura desta interface ============
   É a barra segmentada que aparece no topo de qualquer story do Instagram,
   virada em índice de planejamento. Cada segmento é um slot; o preenchimento
   diz o que já existe. Quem publica story reconhece a forma antes de ler.
     segmento cheio      -> o texto está escrito
     ponto no segmento   -> o slot tem dispositivo
     traço embaixo       -> o slot tem CTA
   ========================================================================= */

.barra-stories {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding: var(--e2) var(--e4) var(--e3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* a contagem e a legenda dividem UMA linha; os segmentos ficam com a largura
   inteira — espremidos ao lado do texto, 15 segmentos viram um borrão */
.barra-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  flex-wrap: wrap;
}

.barra-segmentos {
  display: flex;
  gap: 3px;
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* quem divide a largura é o <li>; o botão só preenche o que o <li> recebeu.
   Sem esta regra, cada segmento encolhe até o tamanho do próprio conteúdo e os
   15 viram um borrão de 15px no canto. */
.barra-segmentos > li {
  flex: 1 1 0;
  min-width: 0;
}

.segmento {
  width: 100%;
  background: none;
  border: 0;
  padding: 10px 0 8px;
  cursor: pointer;
  position: relative;
}

.segmento-barra {
  display: block;
  height: 4px;
  border-radius: var(--raio-pilula);
  background: var(--trilho);
  overflow: hidden;
  position: relative;
}

.segmento-barra::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--acao);
  border-radius: inherit;
  transition: width var(--transicao-preenche);
}

.segmento[data-escrito='1'] .segmento-barra::after {
  width: 100%;
}

.segmento[aria-current='true'] .segmento-barra {
  box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px var(--acao);
}

/* ponto = tem dispositivo. Fica ACIMA da barra, como cabeça de alfinete. */
.segmento-marca {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--acento);
  opacity: 0;
  transition: opacity var(--transicao);
}

.segmento[data-dispositivo='1'] .segmento-marca {
  opacity: 1;
}

/* traço embaixo = tem CTA */
.segmento-cta {
  position: absolute;
  bottom: 2px;
  left: 25%;
  right: 25%;
  height: 2px;
  border-radius: var(--raio-pilula);
  background: var(--texto-fraco);
  opacity: 0;
  transition: opacity var(--transicao);
}

.segmento[data-cta='1'] .segmento-cta {
  opacity: 0.85;
}

/* número e prévia só existem na trilha do desktop; no celular não cabem */
.segmento-previa,
.segmento-ordem {
  display: none;
}

.barra-contagem {
  margin: 0;
  font-size: var(--t-mini);
  color: var(--texto-fraco);
  white-space: nowrap;
}

.barra-contagem b {
  color: var(--texto);
  font-weight: 600;
}

.legenda {
  display: flex;
  gap: var(--e3);
  margin: 0;
  font-size: var(--t-eyebrow);
  color: var(--texto-fraco);
  flex-wrap: wrap;
}

.legenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legenda-ponto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acento);
}

.legenda-traco {
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--texto-fraco);
}

.legenda-cheio {
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--acao);
}

/* ------------------------------------------------------------------ corpo */

.coluna-edicao {
  padding: var(--e4);
  /* a gaveta do validador mora no rodapé: sem esta folga ela come o último
     botão do card quando a página chega ao fim */
  padding-bottom: 140px;
}

.slot-secao,
.navegacao-slots {
  scroll-margin-bottom: 132px;
}

.slot {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  position: relative;
}

/* trava 1 de novo: o furta-cor marca o slot ATIVO pela borda, nunca pelo fundo */
.slot::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--furta-cor);
}

.slot-topo {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  padding: var(--e4) var(--e4) var(--e2);
}

.slot-numero {
  font-family: var(--fonte-titulo);
  font-size: var(--t-titulo);
  color: var(--acento);
  line-height: 1;
}

.slot-de {
  font-size: var(--t-mini);
  color: var(--texto-fraco);
}

.slot-estado {
  margin-left: auto;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.slot textarea {
  display: block;
  width: 100%;
  min-height: 132px;
  padding: 0 var(--e4) var(--e3);
  border: 0;
  background: transparent;
  resize: vertical;
  line-height: 1.6;
}

.slot textarea::placeholder {
  color: var(--texto-fraco);
  opacity: 0.75;
}

.slot textarea:focus {
  outline: none;
}

.slot-secao {
  border-top: 1px solid var(--borda);
  padding: var(--e3) var(--e4);
}

.slot-secao > .eyebrow {
  display: block;
  margin-bottom: var(--e2);
}

.grupo-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.pilula {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-fraco);
  font-size: var(--t-mini);
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}

.pilula:hover {
  border-color: var(--acao);
  color: var(--acao);
}

.pilula[aria-pressed='true'] {
  background: var(--acao);
  border-color: var(--acao);
  color: var(--texto-em-acao);
  font-weight: 600;
}

.lista-dispositivos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.etiqueta-dispositivo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 6px 6px 6px 10px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  font-size: var(--t-mini);
  max-width: 100%;
}

.etiqueta-numero {
  font-weight: 700;
  color: var(--acento-texto);
}

.etiqueta-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tirar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
  flex: none;
}

.tirar:hover {
  color: var(--erro);
}

.botao-fantasma {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--raio-pilula);
  border: 1px dashed var(--acao);
  background: transparent;
  color: var(--acao-texto);
  font-size: var(--t-mini);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transicao);
}

.botao-fantasma:hover {
  background: var(--falta-fundo);
}

.navegacao-slots {
  display: flex;
  gap: var(--e2);
  margin-top: var(--e3);
}

.botao-nav {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 11px var(--e3);
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--t-mini);
  cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao);
}

.botao-nav:hover:not(:disabled) {
  border-color: var(--acao);
  color: var(--acao);
}

.botao-nav:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ------------------------------------------------------- validador (selos) */

.validador {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
}

.validador-topo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.placar {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--fonte-titulo);
  font-size: var(--t-titulo);
  line-height: 1;
}

.placar b {
  font-weight: 400;
  color: var(--ok);
}

.placar span {
  font-size: var(--t-mini);
  color: var(--texto-fraco);
}

.validador-rotulo {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.validador-rotulo strong {
  font-size: var(--t-corpo);
  font-weight: 600;
}

.validador-rotulo small {
  font-size: var(--t-mini);
  color: var(--texto-fraco);
}

.seta-gaveta {
  margin-left: auto;
  color: var(--texto-fraco);
  transition: transform var(--transicao);
}

[aria-expanded='true'] .seta-gaveta {
  transform: rotate(180deg);
}

.selos {
  list-style: none;
  margin: 0;
  padding: 0 var(--e4) var(--e3);
  display: grid;
  gap: var(--e2);
}

.selo {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--e2);
  align-items: start;
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-p);
  background: var(--falta-fundo);
}

.selo[data-ok='1'] {
  background: var(--ok-fundo);
}

.selo-marca {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--texto-fraco);
  color: var(--texto-fraco);
  margin-top: 1px;
}

.selo[data-ok='1'] .selo-marca {
  border-color: var(--ok);
  color: var(--ok);
}

.selo-id {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.1em;
  color: var(--texto-fraco);
  font-weight: 700;
}

.selo-texto {
  font-size: var(--t-mini);
  line-height: 1.45;
}

.selo-falta {
  color: var(--texto);
  font-weight: 500;
}

.selo[data-ok='1'] .selo-texto {
  color: var(--texto-fraco);
}

/* o julgamento humano ao lado do selo verde: a máquina conta CTA, ela não sabe
   se o CTA presta */
.diretriz {
  margin: 0 var(--e4) var(--e4);
  padding: var(--e3);
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  background: var(--superficie-2);
}

.diretriz .eyebrow {
  display: block;
  margin-bottom: var(--e1);
}

.diretriz p {
  margin: 0;
  font-size: var(--t-mini);
  line-height: 1.5;
}

.diretriz q {
  font-family: var(--fonte-titulo);
  font-size: var(--t-corpo);
  font-style: normal;
  color: var(--texto);
}

/* gaveta grudada no rodapé (só no mobile) */
.validador--gaveta {
  position: fixed;
  left: var(--e3);
  right: var(--e3);
  bottom: var(--e3);
  z-index: 30;
  box-shadow: var(--sombra-2);
  max-height: 72vh;
  overflow-y: auto;
}

/* ---------------------------------------------- folha de escolha (38 disp.) */

.cortina {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--cor-cortina);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.folha {
  width: min(560px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio) var(--raio) 0 0;
  box-shadow: var(--sombra-2);
  animation: var(--entrada-folha);
}

@keyframes subir {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
}

.folha-topo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) var(--e4) var(--e2);
}

.folha-topo h2 {
  font-size: var(--t-titulo);
}

.folha-topo .icone-botao {
  margin-left: auto;
}

.folha-dica {
  padding: 0 var(--e4) var(--e3);
  margin: 0;
  font-size: var(--t-mini);
  color: var(--texto-fraco);
}

.busca {
  margin: 0 var(--e4) var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 10px var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  color: var(--texto-fraco);
}

.busca:focus-within {
  border-color: var(--acao);
  color: var(--acao);
}

.busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--texto);
}

.busca input:focus {
  outline: none;
}

.folha-corpo {
  overflow-y: auto;
  padding: 0 var(--e4) var(--e4);
}

.objetivos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e1);
}

.objetivo-botao {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--superficie);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transicao), background var(--transicao);
}

.objetivo-botao:hover,
.objetivo-botao[aria-expanded='true'] {
  border-color: var(--acao);
}

.objetivo-botao[aria-expanded='true'] {
  background: var(--falta-fundo);
}

.objetivo-nome {
  flex: 1;
}

.objetivo-conta {
  font-size: var(--t-mini);
  color: var(--texto-fraco);
}

.opcoes {
  list-style: none;
  margin: var(--e1) 0 var(--e3);
  padding: 0 0 0 var(--e3);
  display: grid;
  gap: var(--e1);
  border-left: 2px solid var(--borda);
}

.opcao {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--e2);
  width: 100%;
  padding: var(--e2) var(--e3);
  border: 0;
  border-radius: var(--raio-p);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--transicao);
}

.opcao:hover {
  background: var(--superficie-2);
}

.opcao[data-escolhido='1'] {
  background: var(--ok-fundo);
}

.opcao-numero {
  font-weight: 700;
  color: var(--acento-texto);
  font-size: var(--t-mini);
  padding-top: 2px;
}

.opcao-nome {
  font-weight: 600;
  font-size: var(--t-mini);
}

.opcao-mecanismo {
  display: block;
  font-size: var(--t-mini);
  color: var(--texto-fraco);
  line-height: 1.4;
  margin-top: 2px;
}

.folha-rodape {
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--borda);
}

.aviso-vazio {
  padding: var(--e5) var(--e3);
  text-align: center;
  color: var(--texto-fraco);
  font-size: var(--t-mini);
}

/* --------------------------------------------------------------- desktop */

@media (min-width: 900px) {
  .pagina {
    display: grid;
    grid-template-columns: var(--largura-trilha) minmax(0, 1fr) var(--largura-selos);
    align-items: start;
    gap: var(--e5);
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--e5) var(--e5) var(--e6);
  }

  .coluna-edicao {
    padding: 0;
  }

  /* no desktop a barra de stories deita: vira trilha vertical com a prévia */
  .barra-stories {
    position: sticky;
    top: var(--e5);
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-1);
    padding: var(--e3);
    gap: var(--e2);
  }

  .barra-segmentos {
    flex-direction: column;
    gap: 2px;
  }

  .barra-segmentos > li {
    flex: none;
  }

  .segmento {
    display: grid;
    grid-template-columns: 18px 26px minmax(0, 1fr);
    align-items: center;
    gap: var(--e2);
    padding: 9px var(--e2);
    border-radius: var(--raio-p);
    text-align: left;
  }

  .segmento-ordem {
    display: block;
    font-size: var(--t-eyebrow);
    color: var(--texto-fraco);
    text-align: right;
  }

  .segmento[aria-current='true'] .segmento-ordem {
    color: var(--acao);
    font-weight: 700;
  }

  .segmento:hover {
    background: var(--superficie-2);
  }

  .segmento[aria-current='true'] {
    background: var(--falta-fundo);
  }

  .segmento-barra {
    height: 3px;
  }

  .segmento[aria-current='true'] .segmento-barra {
    box-shadow: none;
    background: var(--acao);
  }

  .segmento-marca {
    top: 5px;
    left: 45px;
    transform: none;
  }

  .segmento-cta {
    left: 40px;
    right: auto;
    bottom: 5px;
    top: auto;
    width: 14px;
    transform: none;
  }

  .segmento-previa {
    display: block;
    font-size: var(--t-mini);
    color: var(--texto-fraco);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .segmento[data-escrito='1'] .segmento-previa {
    color: var(--texto);
  }

  .barra-cabecalho {
    flex-direction: column;
    align-items: stretch;
    gap: var(--e1);
    padding-bottom: var(--e2);
    border-bottom: 1px solid var(--borda);
  }

  .validador--gaveta {
    position: sticky;
    top: var(--e5);
    left: auto;
    right: auto;
    bottom: auto;
    box-shadow: var(--sombra-1);
    max-height: none;
  }

  .validador-topo {
    cursor: default;
  }

  .seta-gaveta {
    display: none;
  }

  .slot textarea {
    min-height: 176px;
    font-size: 1rem;
  }

  .cabecalho-seq,
  .topo-linha {
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
  }

  .cortina {
    align-items: center;
  }

  .folha {
    border-radius: var(--raio);
  }
}

/* ======================================================================
   F4 — componentes reutilizáveis das telas de lista/catálogo/formulário.
   Nada aqui declara cor nova: todo valor vem de var(--token) já existente
   no bloco :root/[data-tema] acima. Se um componente parecer pedir cor
   nova, é sinal de que ele não é deste app.
   ====================================================================== */

.pagina-simples {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--e4);
  display: grid;
  gap: var(--e4);
}

/* o CSP deste app não permite style="" nem .style.x no JS (style-src 'self') —
   toda regra de layout vive aqui, nunca inline. */
.topo-linha > .eyebrow {
  padding: var(--e1) 0;
}

.acao-compacta {
  justify-self: start;
}

.linha-com-acao {
  display: flex;
  gap: var(--e2);
  align-items: stretch;
}

.linha-com-acao > .cartao-linha {
  flex: 1;
  min-width: 0;
}

.linha-estatica {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  cursor: default;
}

.opcao-objetivos {
  margin-top: 4px;
}

/* catálogo de dispositivos como página própria: consulta, não escolha —
   sem cursor de clique nem realce de hover */
.opcao--consulta {
  cursor: default;
}

.opcao--consulta:hover {
  background: transparent;
}

@media (min-width: 900px) {
  .pagina-simples {
    padding: var(--e5) var(--e5) var(--e6);
  }
}

.cabecalho-simples {
  padding: 0 var(--e4) var(--e3);
}

@media (min-width: 900px) {
  .cabecalho-simples {
    padding: 0;
  }
}

.cabecalho-simples h1 {
  font-size: var(--t-display);
  line-height: 1.15;
  margin: var(--e1) 0 var(--e2);
}

.cabecalho-simples p {
  margin: 0;
  color: var(--texto-fraco);
  font-size: var(--t-mini);
}

/* fileira de chips de filtro — mesma pílula do CTA, reaproveitada */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

/* cartão genérico de lista (mesma casca do .slot, sem a faixa furta-cor) */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

.lista-cartoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e2);
}

.cartao-linha {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transicao), transform var(--transicao);
}

.cartao-linha:hover {
  border-color: var(--acao);
}

.cartao-linha:active {
  transform: scale(0.997);
}

.cartao-corpo {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.cartao-titulo {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartao-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e3);
  font-size: var(--t-mini);
  color: var(--texto-fraco);
}

/* status da sequência: planejando (neutro) · preenchido (atenção) · publicado (ok) */
.etiqueta-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--raio-pilula);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--falta-fundo);
  color: var(--texto-fraco);
}

.etiqueta-status[data-status='preenchido'] {
  color: var(--atencao);
}

.etiqueta-status[data-status='publicado'] {
  background: var(--ok-fundo);
  color: var(--ok);
}

/* marcas do banco de temas: usado / validado — mesma forma do selo-marca */
.marca-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-fraco);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}

.marca-toggle .selo-marca {
  width: 16px;
  height: 16px;
  margin-top: 0;
}

.marca-toggle[aria-pressed='true'] {
  border-color: var(--ok);
  background: var(--ok-fundo);
  color: var(--ok);
}

.marca-toggle[aria-pressed='true'] .selo-marca {
  border-color: var(--ok);
  color: var(--ok);
}

.lista-vazia {
  padding: var(--e6) var(--e4);
  text-align: center;
  color: var(--texto-fraco);
  font-size: var(--t-mini);
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
}

/* formulário (criar sequência/tema, debriefing) — mesma casca do .slot */
.formulario {
  padding: var(--e4);
  display: grid;
  gap: var(--e4);
}

.campo {
  display: grid;
  gap: 6px;
}

.campo > span {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  font-weight: 600;
}

.campo input,
.campo select,
.campo textarea {
  padding: 10px var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  color: var(--texto);
  width: 100%;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--acao);
}

.campo textarea {
  min-height: 88px;
  resize: vertical;
}

.grade-campos {
  display: grid;
  gap: var(--e3);
}

@media (min-width: 560px) {
  .grade-campos--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.botao-primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 11px var(--e4);
  border-radius: var(--raio-p);
  border: 1px solid var(--acao);
  background: var(--acao);
  color: var(--texto-em-acao);
  font-size: var(--t-mini);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transicao);
}

.botao-primario:hover {
  opacity: 0.9;
}

.botao-primario:disabled {
  opacity: 0.5;
  cursor: default;
}

/* retenção do debriefing: o número que ele mais olha, em destaque */
.retencao {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  border-left: 3px solid var(--acento);
}

.retencao b {
  font-family: var(--fonte-titulo);
  font-size: var(--t-display);
  font-weight: 400;
  color: var(--texto);
}

.retencao span {
  font-size: var(--t-mini);
  color: var(--texto-fraco);
}

/* -------------------------------------------------------------- impressão */
/* Só a folha de impressão é visível no papel — o resto do app (chrome,
   validador, botões) não faz sentido fora da tela. */
@media print {
  body * {
    visibility: hidden;
  }

  .impressao,
  .impressao * {
    visibility: visible;
  }

  .impressao {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    padding: 0;
  }

  .impressao-story {
    break-inside: avoid;
    border-bottom: 1px solid var(--borda);
    padding: 10px 0;
  }
}

.impressao {
  display: none;
}