/* SocialFlash — superfície web, v1.0
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Consome `tokens.css`, que é o espelho literal do kit de marca. Nenhum valor
 * de cor é digitado aqui a não ser os quatro derivados da seção 1, e cada um
 * deles está marcado: são claridades intermediárias entre dois tons que já
 * existem, nunca um matiz novo.
 *
 * A proporção do manual manda no arquivo inteiro: a página é quase-branca, a
 * lateral e as superfícies são brancas, o texto é grafite, e o indigo aparece
 * em quatro lugares e nada mais — o item de navegação ativo, o contador da
 * navegação, a barra do símbolo, e o que foi autorado pelo agente (capa Indigo
 * 50 com borda Indigo 100, mais o chip de agendado, que é a cor de estado que
 * o próprio manual atribui). Não existe botão primário nesta tela porque não
 * existe ação primária: criar e aprovar acontecem na conversa de WhatsApp.
 *
 * Não há gradiente em lugar nenhum. Há uma sombra, de 24px de espalhamento,
 * usada só nas duas páginas isoladas.
 */

/* ═══════════════════════════════════════════════════════════════
   1. Derivados
   ═══════════════════════════════════════════════════════════════
   Passos que a interface precisa e o manual não nomeia. Mesmo matiz dos
   vizinhos, claridade entre eles. */

:root {
  /* Indigo 500 escurecido, para o hover do único botão da interface. É o
     mesmo valor que o canvas do design usa em `a:hover`. */
  --acento-forte: #4438c7;

  /* A cor da barra do símbolo. Cada contexto redefine — fundo claro, fundo
     escuro, fundo indigo — e o desenho é o mesmo em todos. */
  --marca-barra: var(--sf-indigo-500);

  --lateral: 236px;
  --topo-altura: 66px;

  /* O teto da coluna de conteúdo. Até ele, a coluna ocupa a área inteira que
     a lateral deixou; a partir dele, quem cresce é a margem automática.

     1400 porque é o que a composição sustenta sem mudar de hierarquia: a
     medida do texto já é limitada em `ch` onde importa (a frase do
     cumprimento, os auxiliares de seção, o rodapé), então alargar a coluna
     alarga as **grades** e não as linhas de leitura. A fila de cartões para em
     quatro, que é o teto de itens que a aplicação manda.

     Abaixo de ~1730px de janela a coluna nem chega neste teto — ela preenche.
     O teto é o que impede a linha de cartão de dois metros num ultralargo. */
  --medida: 1400px;

  /* A goteira. Piso de 20 para o telefone, teto de 32 para que numa tela
     ultralarga ela não vire uma faixa — a partir da medida, quem cresce é a
     margem automática, não o padding. */
  --goteira: clamp(20px, 2.6vw, 32px);
}

/* ═══════════════════════════════════════════════════════════════
   2. Base
   ═══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sf-surface);
  color: var(--sf-ink-900);
  font-family: var(--sf-font-sans);
  font-weight: var(--sf-weight-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Toda métrica da tela usa figura tabular: sem isso, dois números empilhados
   não alinham e a coluna parece torta. */
body {
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
  flex: none;
}

strong {
  font-weight: var(--sf-weight-medium);
}

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}

.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* O anel de foco é um dos cinco lugares onde o manual permite indigo. */
:focus-visible {
  outline: 2px solid var(--sf-indigo-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 20;
  transform: translateY(-200%);
  padding: 9px 14px;
  border-radius: var(--sf-radius-control);
  background: var(--sf-ink-900);
  color: var(--sf-base);
  font-size: 13.5px;
  font-weight: var(--sf-weight-medium);
}

.pular:focus {
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   3. Estrutura
   ═══════════════════════════════════════════════════════════════
   Lateral branca de largura fixa, coluna principal quase-branca. A separação
   de claridade entre as duas é o que dá ao produto a leitura de aplicação e
   não de documento. */

.app {
  display: flex;
  min-height: 100vh;
}

.lateral {
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 26px;
  flex: none;
  width: var(--lateral);
  height: 100vh;
  padding: 22px 16px;
  background: var(--sf-base);
  border-right: 1px solid var(--sf-ink-100);
}

/* Ocupa todo o resto do viewport e **não** participa da centralização: quem
   se centraliza é a coluna de dentro. Assim a lateral fica onde está em
   qualquer largura de tela.

   É também o contêiner das consultas de composição da seção 19. As colunas
   internas dobram pela largura **disponível**, não pela da janela: com a
   lateral aparecendo e desaparecendo, a largura da janela deixa de descrever o
   espaço que o conteúdo tem — em 901px de janela a coluna tem 665, e em 899px
   ela tem 859. Uma consulta de janela dobraria a composição no momento em que
   ela ficou mais larga. */
.principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  container: principal / inline-size;
}

/* A coluna. `margin-inline: auto` é o que faltava: um item de coluna flex com
   `max-width` e sem margem automática encosta na borda inicial, e é daí que
   vinha o vazio à direita em tela larga. */
.conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: calc(var(--medida) + var(--goteira) * 2);
  margin-inline: auto;
  padding: 30px var(--goteira) 44px;
}

/* ═══════════════════════════════════════════════════════════════
   4. Lateral
   ═══════════════════════════════════════════════════════════════ */

/* O respiro do lockup é o do manual: um quarto da altura do símbolo em todos
   os lados. Com símbolo de 28, são 7 — arredondado para 8. */
.lateral__marca {
  padding: 8px 6px;
}

.marca-produto {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sf-ink-900);
}

.marca-produto__nome {
  font-size: 19px;
  font-weight: var(--sf-weight-strong);
  letter-spacing: var(--sf-tracking-display);
  white-space: nowrap;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--sf-radius-control);
  color: var(--sf-ink-700);
  font-size: 14.5px;
  font-weight: var(--sf-weight-body);
}

.nav__rotulo {
  flex: 1;
  min-width: 0;
}

.nav__item .ic {
  color: var(--sf-ink-500);
}

a.nav__item:hover {
  background: var(--sf-surface);
}

/* Item ativo: a única superfície indigo da navegação, e o telhado do ícone
   acende — um elemento sólido, a mesma lógica da barra do símbolo. */
.nav__item--ativo,
a.nav__item--ativo:hover {
  background: var(--sf-indigo-50);
  color: var(--sf-indigo-700);
  font-weight: var(--sf-weight-medium);
}

.nav__item--ativo .ic {
  --ic-solido: var(--sf-indigo-500);
  color: var(--sf-indigo-500);
}

/* Área sem tela nesta versão. Ink 400 é o "desabilitado" do manual: cor, e
   nunca opacidade. */
.nav__item--pendente {
  color: var(--sf-ink-400);
  cursor: default;
}

.nav__item--pendente .ic {
  color: var(--sf-ink-300);
}

.nav__contador {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--sf-radius-chip);
  background: var(--sf-indigo-500);
  color: var(--sf-base);
  font-size: 11.5px;
  font-weight: var(--sf-weight-strong);
}

.lateral__pe {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.conta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--sf-ink-100);
  min-width: 0;
}

.conta__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.conta__nome {
  font-size: 13.5px;
  font-weight: var(--sf-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conta__linha {
  font-size: 12px;
  color: var(--sf-ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conta__papel {
  letter-spacing: 0.04em;
}

/* Sair. Ícone só, com o rótulo para o leitor de tela: a linha da conta já está
   cheia e o texto ao lado do avatar é o que identifica a marca. */
.conta__sair {
  margin-left: auto;
  display: flex;
}

.sair {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--sf-ink-400);
  cursor: pointer;
}

.sair:hover {
  background: var(--sf-surface);
  color: var(--sf-ink-700);
}

/* ═══════════════════════════════════════════════════════════════
   5. Topo
   ═══════════════════════════════════════════════════════════════
   Cronologia, não controle: busca e criação não existem na web, e um campo
   inerte prometeria um caminho sem destino. */

/* A barra atravessa a área inteira, porque é cromo: o fio de baixo precisa
   chegar às duas pontas. O que se alinha à coluna é o **conteúdo** dela, e por
   isso a goteira cresce até centralizar a faixa em vez de a barra encolher.
   A conta é a mesma de `.conteudo`, escrita como padding em vez de margem. */
.topo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  min-height: var(--topo-altura);
  padding-block: 0;
  padding-inline: max(var(--goteira), (100% - var(--medida)) / 2);
  background: var(--sf-base);
  border-bottom: 1px solid var(--sf-ink-100);
}

.topo__marca {
  display: none;
}

.topo__data {
  font-size: 13.5px;
  font-weight: var(--sf-weight-medium);
  color: var(--sf-ink-700);
}

.topo__direita {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topo__hora {
  font-size: 12.5px;
  color: var(--sf-ink-400);
  white-space: nowrap;
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--sf-ink-900);
  color: var(--sf-base);
  font-size: 12px;
  font-weight: var(--sf-weight-strong);
  letter-spacing: 0.02em;
}

.avatar--pessoa {
  width: 32px;
  height: 32px;
  border-radius: var(--sf-radius-control);
  background: var(--sf-ink-100);
  color: var(--sf-ink-700);
}

/* ═══════════════════════════════════════════════════════════════
   6. Saudação
   ═══════════════════════════════════════════════════════════════ */

.saudacao {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.saudacao__titulo {
  font-size: 27px;
  font-weight: var(--sf-weight-strong);
  letter-spacing: var(--sf-tracking-title);
  line-height: 1.15;
}

.saudacao__frase {
  max-width: 78ch;
  font-size: 14.5px;
  color: var(--sf-ink-500);
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════
   7. Os quatro números
   ═══════════════════════════════════════════════════════════════
   Um por passo do ciclo: revisar, aprovar, agendar, publicado. Quatro é o teto
   da fileira e não uma coincidência — é a grade de quatro colunas que o resto
   da Home usa, e um quinto número exigiria dobrar a fileira, que é onde um
   painel de indicadores começa a virar decoração. */

.numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.numero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--sf-base);
  border: 1px solid var(--sf-ink-100);
  border-radius: 14px;
}

.numero__rotulo {
  font-size: 12.5px;
  color: var(--sf-ink-400);
}

.numero__valor {
  font-size: 26px;
  font-weight: var(--sf-weight-strong);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* ═══════════════════════════════════════════════════════════════
   8. Seções
   ═══════════════════════════════════════════════════════════════ */

.secao {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.secao__cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.secao__identidade {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* O símbolo da marca sobre Indigo 50 — o tratamento de avatar do manual. É a
   assinatura de que a fila de revisão é trabalho do SocialFlash. */
.selo-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--sf-radius-control);
  background: var(--sf-indigo-50);
  color: var(--sf-ink-900);
}

.secao__titulo {
  font-size: 18px;
  font-weight: var(--sf-weight-medium);
  letter-spacing: -0.015em;
}

.secao__titulo--menor {
  font-size: 16px;
}

.secao__auxiliar {
  margin-top: 3px;
  max-width: 72ch;
  font-size: 13.5px;
  color: var(--sf-ink-500);
  text-wrap: pretty;
}

/* Onde a ação não existe, existe a menção ao caminho que existe. Texto, não
   botão: não há URL para onde mandar quem clicar. */
.nota-caminho {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px solid var(--sf-ink-200);
  background: var(--sf-base);
  color: var(--sf-ink-500);
  font-size: 13px;
  font-weight: var(--sf-weight-medium);
  cursor: default;
}

.vazio {
  padding: 22px 24px;
  background: var(--sf-base);
  border: 1px solid var(--sf-ink-100);
  border-radius: var(--sf-radius-card);
  color: var(--sf-ink-500);
  font-size: 13.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.nota {
  font-size: 12.5px;
  color: var(--sf-ink-400);
}

.sep {
  color: var(--sf-ink-300);
}

/* ═══════════════════════════════════════════════════════════════
   9. Cartão de conteúdo
   ═══════════════════════════════════════════════════════════════ */

/* Quatro colunas no máximo, 248px no mínimo, e nenhum ponto de quebra para
   isso. `MAX_AGUARDANDO` é 4: uma quinta coluna seria sempre uma pista vazia,
   e ainda estreitaria os quatro cartões que existem. O `max()` faz o piso da
   pista valer ao menos um quarto da largura disponível, então `auto-fill` não
   consegue caber cinco — e quando a coluna aperta, os 248px voltam a mandar e
   a grade cai para três, duas e uma sozinha. */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(248px, (100% - 3 * 14px) / 4), 1fr));
  gap: 14px;
}

.cartao {
  display: flex;
  flex-direction: column;
  background: var(--sf-base);
  border: 1px solid var(--sf-ink-100);
  border-radius: var(--sf-radius-card);
  overflow: hidden;
}

/* A capa. Não é prévia e não finge ser: é superfície neutra com o formato
   escrito, porque não existe rota que sirva mídia. */
.capa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 112px;
  background: var(--sf-ink-100);
  /* Ink 500, e não o cinza claro do mockup: o rótulo da capa é a **única**
     ocorrência do formato no cartão, e informação precisa ser legível. */
  color: var(--sf-ink-500);
}

.capa--alta {
  height: 132px;
}

.capa__texto {
  font-size: 12.5px;
}

/* A variante do agente: superfície Indigo 50 para o que foi autorado por ele.
   Acionada por `post_versions.created_by = AI`, que é coluna real. */
.capa--agente {
  background: var(--sf-indigo-50);
  color: var(--sf-indigo-700);
  box-shadow: inset 0 -1px 0 var(--sf-indigo-100);
}

.cartao__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
}

.cartao__gancho {
  font-size: 15px;
  font-weight: var(--sf-weight-medium);
  line-height: 1.35;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cartao__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 12.5px;
  color: var(--sf-ink-500);
}

.cartao__prazo {
  font-size: 12.5px;
  color: var(--sf-ink-400);
}

/* Prazo curto de credencial. Vermelho é cor de estado e este é um estado real:
   a autorização expira e o conteúdo volta a precisar de uma nova. */
.cartao__prazo--critico {
  color: var(--sf-danger);
  font-weight: var(--sf-weight-medium);
}

/* A linha que diz para onde o cartão leva. Só nos aprovados: é o único bloco da
   Home cujo item existe porque **falta** uma ação, e sem esta linha o cartão
   pareceria mais um resumo. Não é botão — o clique abre o conteúdo, e agendar
   acontece lá, ao lado do horário aprovado. */
.cartao__acao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: var(--sf-weight-medium);
  color: var(--sf-indigo-500);
}

.cartao__acao::after {
  content: "→";
  transition: transform 0.16s ease;
}

.cartao--alvo:hover .cartao__acao::after {
  transform: translateX(2px);
}

.cartao__pe {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.cartao__quando {
  font-size: 12.5px;
  color: var(--sf-ink-400);
  white-space: nowrap;
}

.cartao__quando--vago {
  color: var(--sf-ink-300);
}

/* ═══════════════════════════════════════════════════════════════
   10. Linhas — conteúdo da semana
   ═══════════════════════════════════════════════════════════════
   Lista e não grade de cartões: cada item precisa dizer **qual** carimbo está
   mostrando, e essa distinção sobrevive numa linha e morre num cartão. */

.linhas {
  background: var(--sf-base);
  border: 1px solid var(--sf-ink-100);
  border-radius: var(--sf-radius-panel);
  overflow: hidden;
}

.linha {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
}

.linha + .linha {
  border-top: 1px solid var(--sf-ink-100);
}

.linha__quando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 0;
  border-radius: var(--sf-radius-control);
  background: var(--sf-surface);
}

.linha__dia {
  font-size: 10.5px;
  font-weight: var(--sf-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-ink-400);
}

.linha__dia--vago {
  padding: 4px 0;
  color: var(--sf-ink-300);
}

.linha__numero {
  font-size: 14px;
  font-weight: var(--sf-weight-medium);
  color: var(--sf-ink-700);
  line-height: 1.1;
}

.linha__corpo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.linha__gancho {
  font-size: 14.5px;
  font-weight: var(--sf-weight-medium);
  letter-spacing: -0.01em;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linha__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: var(--sf-ink-400);
}

.formato-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sf-ink-500);
}

/* ═══════════════════════════════════════════════════════════════
   11. Agenda e trilha — os dois painéis do pé
   ═══════════════════════════════════════════════════════════════ */

.duas {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* Sem conteúdo algum não existe trilha, e a agenda sozinha não fica numa
   coluna de dois terços com o resto vazio ao lado. */
.duas > .secao:only-child {
  grid-column: 1 / -1;
}

.duas .secao {
  padding: 24px 26px 26px;
  background: var(--sf-base);
  border: 1px solid var(--sf-ink-200);
  border-radius: var(--sf-radius-panel);
  /* A trilha dobra pela largura do painel, que muda com o número de colunas
     de `.duas` — não com a da janela. */
  container: painel / inline-size;
}

.duas .vazio {
  padding: 0;
  border: 0;
  background: none;
}

.agenda {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.agenda__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}

.agenda__item + .agenda__item {
  border-top: 1px solid var(--sf-ink-100);
}

.agenda__dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 0;
  border-radius: var(--sf-radius-control);
  border: 1px solid var(--sf-ink-200);
}

.agenda__dia-semana {
  font-size: 10.5px;
  font-weight: var(--sf-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-ink-400);
}

.agenda__dia-numero {
  font-size: 15px;
  font-weight: var(--sf-weight-strong);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.agenda__corpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.agenda__gancho {
  font-size: 14px;
  font-weight: var(--sf-weight-medium);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 12.5px;
  color: var(--sf-ink-400);
}

/* A barra é proporção, não medida: os números estão na legenda, em texto. */
.barra {
  display: flex;
  gap: 2px;
  height: 8px;
  margin: 6px 0 4px;
  border-radius: var(--sf-radius-chip);
  background: var(--sf-ink-100);
  overflow: hidden;
}

.barra__parte {
  flex-basis: 0;
  min-width: 4px;
  border-radius: var(--sf-radius-chip);
}

/* Fluxo em coluna, e nao em linha: a trilha e a sequencia da maquina de
   estados, e ler de cima para baixo em cada coluna preserva essa ordem.
   Preenchendo por linha, `Publicando` e `Publicado` cairiam lado a lado. */
.trilha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 2px 20px;
}

.trilha__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
}

/* Estado com zero continua listado: `Publicado` valer zero é a informação
   correta, não uma ausência a esconder. Recua em cor, nunca em opacidade. */
.trilha__item--zero {
  color: var(--sf-ink-300);
}

.trilha__item--zero .ponto {
  background: var(--sf-ink-200);
  border-color: var(--sf-ink-200);
}

.trilha__rotulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trilha__valor {
  font-weight: var(--sf-weight-medium);
}

.ponto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid transparent;
}

/* ═══════════════════════════════════════════════════════════════
   12. Chips de estado
   ═══════════════════════════════════════════════════════════════
   A tabela do manual, literal. Três sinais independentes: preenchimento do
   círculo é progresso, o traço é a natureza, a cor só reforça — em escala de
   cinza os sete continuam distinguíveis.

   Dois tratamentos são únicos no sistema inteiro: *publicado* é o único chip
   sólido (é o fim da linha) e *falhou* é o único com borda de 1,5 e peso 600. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 5px 11px 5px 8px;
  border-radius: var(--sf-radius-chip);
  border: 1px solid transparent;
  background: var(--sf-base);
  font-size: 12.5px;
  font-weight: var(--sf-weight-medium);
  white-space: nowrap;
}

.chip--rascunho {
  border-style: dashed;
  border-color: var(--sf-ink-300);
  color: var(--sf-ink-500);
}

.chip--revisar {
  border-color: var(--sf-ink-900);
  color: var(--sf-ink-900);
}

.chip--aprovado {
  border-color: var(--sf-success);
  color: var(--sf-success);
}

.chip--agendado {
  border-color: var(--sf-indigo-200);
  background: var(--sf-indigo-50);
  color: var(--sf-indigo-700);
}

.chip--publicado {
  --contra: var(--sf-ink-900);
  border-color: var(--sf-ink-900);
  background: var(--sf-ink-900);
  color: var(--sf-base);
}

.chip--falhou {
  border-width: 1.5px;
  border-color: var(--sf-danger);
  color: var(--sf-danger);
  font-weight: var(--sf-weight-strong);
}

.chip--cancelado {
  border-color: var(--sf-ink-200);
  background: var(--sf-surface);
  color: var(--sf-ink-400);
}

.chip--cancelado span {
  text-decoration: line-through;
}

/* Os mesmos estados, reduzidos a um ponto, na legenda da trilha. */
.ponto--rascunho {
  border-color: var(--sf-ink-300);
}

.ponto--revisar {
  background: var(--sf-ink-900);
}

.ponto--aprovado {
  background: var(--sf-success);
}

.ponto--agendado {
  background: var(--sf-indigo-500);
}

.ponto--publicado {
  background: var(--sf-ink-700);
}

.ponto--falhou {
  background: var(--sf-danger);
}

.ponto--cancelado {
  background: var(--sf-ink-200);
}

/* E na barra de proporção. */
.barra__parte--rascunho {
  background: var(--sf-ink-300);
}

.barra__parte--revisar {
  background: var(--sf-ink-900);
}

.barra__parte--aprovado {
  background: var(--sf-success);
}

.barra__parte--agendado {
  background: var(--sf-indigo-500);
}

.barra__parte--publicado {
  background: var(--sf-ink-700);
}

.barra__parte--falhou {
  background: var(--sf-danger);
}

.barra__parte--cancelado {
  background: var(--sf-ink-200);
}

/* ═══════════════════════════════════════════════════════════════
   13. Botão
   ═══════════════════════════════════════════════════════════════
   Existe um só, e só nas páginas isoladas: recarregar depois de uma falha de
   leitura. É a única ação de escrita zero que a web tem. */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--sf-radius-control);
  background: var(--sf-indigo-500);
  color: var(--sf-base);
  font-size: 14px;
  font-weight: var(--sf-weight-medium);
}

a.botao:hover,
button.botao:hover {
  background: var(--acento-forte);
}

.botao--largo {
  width: 100%;
  height: 42px;
  margin-top: 4px;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   13b. Formulário
   ═══════════════════════════════════════════════════════════════
   A primeira entrada de texto do produto. O anel de foco indigo é um dos
   lugares que o manual autoriza para a cor — e é a única cor deste bloco. */

.formulario {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin-top: 6px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo__rotulo {
  font-size: 12.5px;
  font-weight: var(--sf-weight-medium);
  color: var(--sf-ink-500);
}

.campo__entrada {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--sf-ink-200);
  border-radius: var(--sf-radius-field);
  background: var(--sf-base);
  color: var(--sf-ink-900);
  font-family: inherit;
  font-size: 14.5px;
}

.campo__entrada:focus {
  outline: 0;
  border-color: var(--sf-indigo-500);
  box-shadow: 0 0 0 3px var(--sf-indigo-50);
}

/* Vermelho é cor de estado, e este é um estado real: a credencial não conferiu.
   O texto diz o mesmo sem a cor. */
.campo__erro {
  padding: 11px 13px;
  border: 1px solid var(--sf-danger);
  border-radius: var(--sf-radius-control);
  color: var(--sf-danger);
  font-size: 13.5px;
  font-weight: var(--sf-weight-medium);
}

/* ═══════════════════════════════════════════════════════════════
   14. Pé
   ═══════════════════════════════════════════════════════════════ */

.pe {
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--sf-ink-200);
  color: var(--sf-ink-400);
  font-size: 12.5px;
  line-height: 1.6;
}

.pe p {
  max-width: 84ch;
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════
   15. Navegação inferior — telas estreitas
   ═══════════════════════════════════════════════════════════════
   Abaixo de 900px a lateral vira barra inferior: uma coluna de 236px num
   telefone é um terço da tela gasto em menu. */

.inferior {
  display: none;
  position: fixed;
  inset: auto 0 0;
  z-index: 10;
  justify-content: space-around;
  gap: 4px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--sf-base);
  border-top: 1px solid var(--sf-ink-100);
}

.inferior__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  padding: 6px 2px;
  border-radius: var(--sf-radius-control);
  color: var(--sf-ink-500);
  font-size: 10.5px;
  font-weight: var(--sf-weight-medium);
  text-align: center;
}

.inferior__item .ic {
  color: currentColor;
}

.inferior__item--ativo {
  --ic-solido: var(--sf-indigo-500);
  background: var(--sf-indigo-50);
  color: var(--sf-indigo-700);
}

.inferior__item--pendente {
  color: var(--sf-ink-400);
}

/* ═══════════════════════════════════════════════════════════════
   16. Páginas isoladas — sem sessão e falha de leitura
   ═══════════════════════════════════════════════════════════════ */

.isolado {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 20px;
}

.isolado__painel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  max-width: 540px;
  padding: 34px 36px 36px;
  background: var(--sf-base);
  border: 1px solid var(--sf-ink-200);
  border-radius: var(--sf-radius-panel);
  box-shadow: 0 24px 60px -32px rgba(22, 20, 31, 0.24);
}

.isolado__titulo {
  margin-top: 6px;
  font-size: 24px;
  font-weight: var(--sf-weight-strong);
  letter-spacing: var(--sf-tracking-title);
}

.isolado__texto {
  color: var(--sf-ink-500);
  font-size: 14.5px;
}

.isolado__nota {
  padding: 16px 18px;
  background: var(--sf-surface);
  border-radius: 12px;
  color: var(--sf-ink-500);
  font-size: 13px;
  line-height: 1.65;
}

.isolado__nota code {
  color: var(--sf-ink-700);
}

.isolado__acao {
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   17. Ícones e o símbolo
   ═══════════════════════════════════════════════════════════════ */

.ic {
  flex: none;
}

/* O ícone dentro do chip herda a cor do chip — é o terceiro sinal do estado,
   e não pode ter cor própria. */
.ic--estado {
  color: currentColor;
}

/* O traço do símbolo é `currentColor`; só a barra tem cor própria. Nenhuma
   regra deste arquivo pinta o traço de indigo: a marca inteira em indigo é o
   primeiro "o que não fazer" do manual, e aqui é impossível por construção. */
.simbolo rect {
  fill: var(--marca-barra);
}

/* ═══════════════════════════════════════════════════════════════
   18. Movimento
   ═══════════════════════════════════════════════════════════════
   Uma entrada, e só. Nada que se mexa sozinho depois: a tela não atualiza
   sozinha e um movimento contínuo prometeria que sim. */

@keyframes sf-sobe {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.saudacao,
.numeros {
  animation: sf-sobe 0.42s ease both;
}

.numeros {
  animation-delay: 0.05s;
}

.cartao,
.numero {
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.cartao:hover {
  border-color: var(--sf-ink-200);
  box-shadow: 0 10px 22px -18px rgba(22, 20, 31, 0.4);
}

.linha {
  transition: background 0.14s ease;
}

.linha:hover {
  background: var(--sf-surface-raised);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   19. Adaptação
   ═══════════════════════════════════════════════════════════════ */

/* ── O aparelho ────────────────────────────────────────────────────────────
   Esta é a única dobra que é da **janela**, e tem de ser: é ela que decide se
   a lateral existe, e portanto é ela que define a largura do contêiner que
   todas as outras consultam. Uma coluna de 236px num telefone é um terço da
   tela gasto em menu. */

@media (max-width: 900px) {
  .lateral {
    display: none;
  }

  .inferior {
    display: flex;
  }

  .topo__marca {
    display: block;
  }

  .topo__data {
    display: none;
  }

  /* Só as medidas verticais: a goteira horizontal é a mesma em toda largura,
     e o rodapé abre espaço para a barra inferior fixa. */
  .conteudo {
    gap: 24px;
    padding-top: 22px;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── A composição ─────────────────────────────────────────────────────────
   Daqui para baixo tudo consulta a largura **disponível** para o conteúdo, não
   a da janela. Cada limite é a largura em que aquela composição específica
   deixa de caber, e não um número escolhido para consertar uma captura de
   tela. Os valores são de contêiner: a coluna tem a largura do contêiner menos
   duas goteiras. */

/* Dois painéis de 1,35/1 abaixo de ~880 de coluna dariam ~370 ao da direita,
   e a agenda perde o dia, o gancho e o chip na mesma linha. */
@container principal (max-width: 940px) {
  .duas {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container principal (max-width: 700px) {
  .saudacao__titulo {
    font-size: 24px;
  }

  .duas .secao {
    padding: 20px 18px 22px;
  }

  .linha {
    padding: 14px 16px;
  }
}

/* Quatro colunas param de caber bem antes de a fileira empilhar: abaixo disto
   viram duas por duas, que ainda se lê como uma grade, e só depois viram
   linhas. */
@container principal (max-width: 900px) {
  .numeros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container principal (max-width: 660px) {
  .numeros {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  /* Empilhado, cada número vira uma linha: rótulo à esquerda, valor à
     direita. Três cartões de 190px espremidos seriam pior. */
  .numero {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    padding: 13px 16px;
  }

  .numero__valor {
    font-size: 22px;
  }

  .secao__cabecalho {
    align-items: flex-start;
  }

  /* Numa coluna estreita a linha empilha: o carimbo em cima, o gancho e a
     meta abaixo, e o chip volta para a primeira faixa. */
  .linha {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px 12px;
  }

  .linha__estado {
    grid-column: 2;
  }

  .agenda__item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px 12px;
  }

  .agenda__estado {
    grid-column: 2;
  }

  /* E o gancho passa a quebrar em vez de ser cortado. Numa coluna de 260px as
     reticências mostram cinco palavras de uma legenda — em telefone o gancho
     vale duas linhas, que é a informação que ele existe para dar. */
  .linha__gancho,
  .agenda__gancho {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
  }
}

@container principal (max-width: 460px) {
  .saudacao__titulo {
    font-size: 22px;
  }

  /* A data já saiu com a lateral; a hora sai agora, e o avatar fica. */
  .topo__hora {
    display: none;
  }
}

/* O item da agenda perde para o chip quando o painel aperta: dia (44) + chip
   (~108) + vãos (28) tiram 180 da largura, e abaixo de 540 o que sobra corta o
   gancho. Aí o chip desce para a segunda faixa — o mesmo tratamento que a linha
   da semana já recebe em coluna estreita. */
@container painel (max-width: 540px) {
  .agenda__item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px 14px;
  }

  .agenda__estado {
    grid-column: 2;
  }
}

/* Duas colunas de quatro linhas: o rótulo mais longo é `Para revisar`, e com o
   ponto, o vão e o número cada item pede ~112px — 244 para as duas colunas com
   o vão de 20 entre elas. Abaixo de 280 volta a uma coluna, em fluxo de linha.
   A medida é a caixa de conteúdo do painel, que é o que a consulta de contêiner
   compara: já descontados os 26 (ou 18) de padding de cada lado. */
@container painel (max-width: 280px) {
  .trilha {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

/* ── Páginas isoladas ─────────────────────────────────────────────────────
   Sem sessão e falha de leitura não têm `.principal`, então não têm contêiner
   para consultar: aqui a janela é a medida certa. */

@media (max-width: 560px) {
  .isolado__painel {
    padding: 26px 22px 28px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   20. Detalhe do conteúdo
   ═══════════════════════════════════════════════════════════════
   Acrescentado quando o item da Home passou a abrir. Nenhuma regra acima foi
   tocada: a Home desenha exatamente como desenhava, e a responsividade é a
   mesma porque a estrutura é a mesma — `.app`, `.principal`, `.conteudo` e
   `.duas`, com as consultas de contêiner da seção 19 valendo aqui sem uma
   linha nova.

   Nenhum matiz novo. O único indigo desta seção é o do botão primário, que é
   um dos lugares que o manual autoriza — e ele só aparece quando existe
   **uma** ação principal. */

/* ── O alvo: como um item da Home vira link ─────────────────────────────────
   O cartão inteiro é clicável; nas listas, o gancho. Nenhum dos dois muda de
   cor: `a { color: inherit }` já vale, e sublinhar o título de oito linhas
   deixaria a Home listrada. O sinal é o do estado interativo — a borda do
   cartão e o sublinhado do gancho, os dois só no ponteiro. */

.cartao--alvo {
  cursor: pointer;
}

.cartao--alvo:hover {
  border-color: var(--sf-ink-200);
}

.alvo:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--sf-ink-300);
}

/* ── Volta ─────────────────────────────────────────────────────────────── */

.volta {
  margin-bottom: -12px;
}

.volta__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sf-ink-500);
  font-size: 13.5px;
  font-weight: var(--sf-weight-medium);
}

.volta__link:hover {
  color: var(--sf-ink-900);
}

/* ── O desfecho da última ação ──────────────────────────────────────────────
   Duas variantes e nenhuma cor de fundo saturada: o aviso é uma faixa branca
   com a tinta na borda esquerda. Verde e vermelho são cores de estado, e este
   é um estado real — a escrita aconteceu, ou não aconteceu. */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--sf-ink-200);
  border-left-width: 3px;
  border-radius: var(--sf-radius-control);
  background: var(--sf-base);
  font-size: 13.5px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* O sinal carrega o desfecho junto com a tinta da borda: cor sozinha nunca
   carrega informação neste sistema, e um aviso lido em escala de cinza precisa
   continuar dizendo se a coisa aconteceu ou não. */
.aviso__sinal {
  flex: none;
  margin-top: 2px;
}

.aviso--feito {
  border-left-color: var(--sf-success);
}

.aviso--feito .aviso__sinal {
  color: var(--sf-success);
}

.aviso--recusa {
  border-left-color: var(--sf-danger);
}

.aviso--recusa .aviso__sinal {
  color: var(--sf-danger);
}

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */

.detalhe {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detalhe__estado {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.detalhe__versao,
.detalhe__origem {
  font-size: 12.5px;
  color: var(--sf-ink-500);
}

/* A medida do título é a de leitura, não a da coluna: um gancho de 110
   caracteres numa tela ultralarga viraria uma linha só, e uma linha só de dois
   metros não se lê. */
.detalhe__gancho {
  max-width: 34ch;
  font-size: 27px;
  font-weight: var(--sf-weight-strong);
  line-height: 1.22;
  letter-spacing: var(--sf-tracking-title);
  text-wrap: pretty;
}

.detalhe__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--sf-ink-500);
}

/* A frase que responde "e agora?". Medida de leitura, não de coluna: ela é
   prosa, e prosa numa linha de dois metros não se lê. Fica logo abaixo do
   título porque é a segunda coisa que alguém precisa saber — antes de
   qualquer data, antes de qualquer botão. */
.detalhe__situacao {
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sf-ink-700);
  text-wrap: pretty;
}

/* ── A coluna da direita ────────────────────────────────────────────────────
   Empilha painéis dentro da célula que `.duas` já define. Sem grade própria: a
   dobra para uma coluna é a da seção 19, e é ela que precisa continuar
   mandando. */

.pilha {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* ── Legenda e etiquetas ───────────────────────────────────────────────── */

/* `pre-wrap` porque a quebra de linha da legenda é conteúdo: quem escreveu
   separou os parágrafos, e colapsar isso muda o que foi aprovado. */
.legenda {
  max-width: 70ch;
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.62;
  text-wrap: pretty;
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.etiqueta {
  padding: 3px 9px;
  border-radius: var(--sf-radius-chip);
  background: var(--sf-ink-100);
  color: var(--sf-ink-500);
  font-size: 12.5px;
}

.chamada {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: var(--sf-radius-control);
  background: var(--sf-surface);
  font-size: 14px;
}

.chamada__rotulo {
  font-size: 11px;
  font-weight: var(--sf-weight-medium);
  letter-spacing: var(--sf-tracking-label);
  text-transform: uppercase;
  color: var(--sf-ink-400);
}

/* ── Mídias ─────────────────────────────────────────────────────────────── */

.midias {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.midias__titulo {
  font-size: 13px;
  font-weight: var(--sf-weight-medium);
  color: var(--sf-ink-500);
}

.midias__lista {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sf-ink-100);
  border-radius: var(--sf-radius-card);
  overflow: hidden;
}

.midia {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
}

.midia + .midia {
  border-top: 1px solid var(--sf-ink-100);
}

.midia__ordem {
  color: var(--sf-ink-400);
  font-size: 12.5px;
}

.midia__corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.midia__nome {
  font-size: 13.5px;
  font-weight: var(--sf-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.midia__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 12px;
  color: var(--sf-ink-400);
}

.midia__recusa {
  color: var(--sf-danger);
}

.midia__preparo {
  font-size: 12px;
  color: var(--sf-ink-400);
}

.midia__preparo--pronta {
  color: var(--sf-success);
}

/* ── Ficha ──────────────────────────────────────────────────────────────────
   Rótulo à esquerda, valor à direita, e a linha some quando o valor é nulo. É
   uma `dl` de verdade: rótulo e valor são um par, e um leitor de tela precisa
   ouvi-los como par. */

.ficha {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.ficha__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
}

.ficha__linha + .ficha__linha {
  border-top: 1px solid var(--sf-ink-100);
}

.ficha__rotulo {
  font-size: 13px;
  color: var(--sf-ink-500);
}

.ficha__valor {
  margin: 0;
  font-size: 13.5px;
  font-weight: var(--sf-weight-medium);
  text-align: right;
  overflow-wrap: anywhere;
}

.falha {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--sf-danger);
  border-radius: var(--sf-radius-control);
  color: var(--sf-danger);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.falha__rotulo {
  font-size: 11px;
  font-weight: var(--sf-weight-medium);
  letter-spacing: var(--sf-tracking-label);
  text-transform: uppercase;
}

/* ── Ações ──────────────────────────────────────────────────────────────────
   Uma ação principal no máximo, indigo. As demais são calmas — mesma forma,
   tinta de texto — e a destrutiva fica atrás de uma confirmação. */

.acoes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Separa a ação principal das demais sem desenhar uma régua. É a palavra que a
   pessoa já usaria em voz alta — "agendo, **ou** cancelo" — e ela faz o
   trabalho que uma borda faria, sem acrescentar mais uma linha à coluna. */
.acoes__ou {
  margin: 14px 0 10px;
  font-size: 12.5px;
  color: var(--sf-ink-400);
}

/* A ação principal ganha o vão que a separa do título; as calmas herdam o
   espaçamento de `.acoes`. */
.acao__forma--principal {
  gap: 8px;
}

/* A nota do WhatsApp quando ela **é** o passo seguinte: mesma forma da nota da
   Home, ocupando a largura do painel para não parecer um adorno ao lado de um
   botão que não existe. */
.nota-caminho--acao {
  display: flex;
  justify-content: center;
  width: 100%;
}

.acao__forma {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acao__explicacao {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sf-ink-500);
  text-wrap: pretty;
}

.botao--calmo {
  background: var(--sf-base);
  border: 1px solid var(--sf-ink-200);
  color: var(--sf-ink-900);
}

button.botao--calmo:hover {
  background: var(--sf-surface);
}

.botao--perigo {
  background: var(--sf-danger);
}

button.botao--perigo:hover {
  background: var(--sf-danger);
  filter: brightness(0.92);
}

/* Confirmação sem JavaScript. O `summary` é o gatilho e parece o que é: um
   controle discreto, não um botão vermelho esperando um clique distraído. */
.confirma {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: var(--sf-weight-medium);
  list-style: none;
}

.acao::-webkit-details-marker {
  display: none;
}

.acao--perigo {
  color: var(--sf-danger);
}

.acao--perigo:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Impedimentos ───────────────────────────────────────────────────────────
   Não é botão apagado: é a frase que responde "por que não posso?". Cada
   motivo é um fato do banco. */

.impedimentos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.impedimento {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--sf-radius-control);
  background: var(--sf-surface);
}

.impedimento__acao {
  font-size: 13px;
  font-weight: var(--sf-weight-medium);
  color: var(--sf-ink-500);
}

.impedimento__motivo {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sf-ink-400);
  text-wrap: pretty;
}

/* ── Histórico ─────────────────────────────────────────────────────────── */

.registro {
  display: flex;
  flex-direction: column;
}

.registro__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
}

.registro__item + .registro__item {
  border-top: 1px solid var(--sf-ink-100);
}

.registro__titulo {
  font-size: 13.5px;
  font-weight: var(--sf-weight-medium);
}

.registro__marca {
  padding: 1px 7px;
  border-radius: var(--sf-radius-chip);
  background: var(--sf-indigo-50);
  color: var(--sf-indigo-700);
  font-size: 11px;
}

.registro__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 12.5px;
  color: var(--sf-ink-400);
}

/* ── O que a web não faz ────────────────────────────────────────────────── */

.ausentes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ausente {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ausente__titulo {
  font-size: 13px;
  font-weight: var(--sf-weight-medium);
}

.ausente__motivo {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--sf-ink-500);
  text-wrap: pretty;
}

/* ── Adaptação ──────────────────────────────────────────────────────────────
   Duas dobras, as duas de **contêiner**: o detalhe herda a dobra de coluna de
   `.duas` da seção 19 e só precisa cuidar do que é dele. Nenhuma consulta de
   janela é acrescentada — a largura da janela deixou de descrever o espaço do
   conteúdo no momento em que a lateral passou a aparecer e sumir. */

@container principal (max-width: 700px) {
  .detalhe__gancho {
    font-size: 23px;
  }

  .ficha__linha {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .ficha__valor {
    text-align: left;
  }
}

@container painel (max-width: 380px) {
  .midia {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 6px 10px;
  }

  .midia__preparo {
    grid-column: 2;
  }
}


/* ═══════════════════════════════════════════════════════════════
   21. Ajustes
   ═══════════════════════════════════════════════════════════════
   A primeira tela do produto que **escreve um documento**. Três coisas novas
   nascem aqui, e nenhuma delas é decoração:

   * a ajuda por campo, que existe porque a marca é o único formulário em que a
     pergunta "para que serve preencher isto?" tem resposta técnica — o agente lê;
   * o par usadas/evitadas visivelmente inverso (§18.3 do sistema de design);
   * o bloco do código de vinculação, que é um segredo de uso único mostrado em
     fluxo e nunca em overlay (§17.3).

   A largura do formulário é limitada de propósito. Um campo de texto que
   atravessa 1100px obriga o olho a percorrer a linha inteira para voltar ao
   começo da próxima, e a lateral já garante que nunca há mais de ~900px para
   gastar. 640px é a medida em que uma linha de texto continua legível. */

.formulario--marca {
  max-width: 640px;
  gap: 20px;
}

/* Rótulo é elemento próprio e placeholder nunca o substitui (FO-2). A ajuda é
   um terceiro elemento, entre o rótulo e o campo: acima do campo porque é lida
   antes de responder, e não depois de errar. */
.campo__ajuda {
  margin-top: -3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sf-ink-400);
}

.campo__entrada--area {
  height: auto;
  min-height: 84px;
  padding: 11px 13px;
  line-height: 1.55;
  resize: vertical;
}

.campo__entrada:disabled {
  background: var(--sf-ink-100);
  color: var(--sf-ink-500);
  cursor: not-allowed;
}

/* `preferred_words` e `forbidden_words` precisam ser visivelmente inversos, e
   não dois campos idênticos: trocá-los por engano inverte o que a IA escreve.
   A marca de negação é uma barra na borda esquerda — forma, não cor de estado:
   vermelho aqui seria alarme permanente, que §17.2 proíbe. */
.campo--negacao {
  padding-left: 12px;
  border-left: 2px solid var(--sf-ink-300);
}

/* ── Notas com papel ────────────────────────────────────────────────────────
   Três variantes da mesma nota, e a diferença entre elas é o que a frase faz:
   restringir, avisar de consequência, ou declarar o que ainda não existe. */

.nota--restricao,
.nota--consequencia {
  color: var(--sf-ink-500);
}

.nota--consequencia {
  margin-bottom: 10px;
}

.nota--pendente {
  padding-top: 10px;
  border-top: 1px solid var(--sf-ink-100);
}

/* ── Código de vinculação ───────────────────────────────────────────────────
   Segredo de uso único. Em fluxo e persistente: o banco guarda só o hash, e um
   overlay que fecha com `Esc` levaria embora o único lugar onde ele existe. */

.codigo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 20px 22px;
  background: var(--sf-base);
  border: 1px solid var(--sf-indigo-200);
  border-radius: var(--sf-radius-card);
}

.codigo__rotulo {
  font-size: 12px;
  font-weight: var(--sf-weight-medium);
  letter-spacing: var(--sf-tracking-label);
  text-transform: uppercase;
  color: var(--sf-ink-500);
}

/* 28px, mono, caixa alta e espaçamento largo: o valor será digitado à mão em
   outro aparelho, e o que se lê caractere a caractere precisa de separação
   entre caracteres.

   A família é declarada aqui e não pela classe `.mono` — que neste sistema
   significa *algarismo tabular*, não fonte monoespaçada. É a mesma pilha de
   `code`, e é ela que faz `8` e `B` terem larguras iguais. */
.codigo__valor {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 28px;
  font-weight: var(--sf-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-ink-900);
}

.codigo__prazo,
.codigo__aviso {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sf-ink-500);
}

.canal__acao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 12px;
}

.canal__acao .botao {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   As telas do portão (A1.2)

   Três regras, e só três. As telas de confirmar e-mail, aceitar
   termos e a porta do onboarding reaproveitam `.isolado`, `.campo`
   e `.botao` inteiros — o que falta é o que nenhuma tela anterior
   precisou: uma caixa de seleção alinhada ao rótulo, e um painel
   mais largo para texto corrido de documento.
   ═══════════════════════════════════════════════════════════════ */

/* `.campo` empilha rótulo sobre entrada, que é o certo para texto e
   errado para caixa de seleção: a marca fica acima da frase e a
   relação entre as duas some. Aqui os dois voltam para a mesma
   linha, com a caixa alinhada ao topo para sobreviver a um rótulo
   de duas linhas. */
.campo--caixa {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.campo--caixa input {
  margin-top: 2px;
  flex: none;
}

.campo--caixa .campo__rotulo {
  color: var(--sf-ink-700);
  font-weight: var(--sf-weight-regular);
}

/* Documento legal: 540px é largura de formulário, não de leitura. */
.isolado__painel--largo {
  max-width: 760px;
}

/* O texto vem de um arquivo Markdown e é servido como está — sem
   conversor, porque são dois documentos (ver `app/api/routes/conta.py`).
   `pre` preserva a quebra de linha do arquivo; `white-space: pre-wrap`
   impede que uma linha longa force rolagem horizontal. */
.documento {
  width: 100%;
  max-height: 60vh;
  overflow-y: auto;
  padding: 18px 20px;
  background: var(--sf-surface);
  border-radius: 12px;
  color: var(--sf-ink-700);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}