/* ==========================================================================
   SGP — Design System · Camada 21: o estado vazio que ENSINA (fatia D3)
   ==========================================================================

   `.estado-vazio` já existia na camada 03 (ícone, título, texto). O que faltava
   era o que esta fatia acrescenta: os DOIS CAMINHOS (criar de verdade / ver com
   dados de exemplo), a nota que promete que a demonstração não fala com
   ninguém, e a versão compacta da coluna estreita.

   A REGRA QUE MANDA AQUI É A ALTURA (F09).

   O esqueleto `.tela-mestre` tem altura FECHADA e cada área rola por dentro.
   Um estado vazio alto demais não "vaza" para fora dele — ele empurra a rolagem
   para dentro da área, e a coluna passa a rolar sem ter conteúdo. Foi assim que
   o lançador do tour devolveu rolagem à página, e há teste de sistema guardando
   isso. Daí as três decisões:

     · NENHUMA MEDIDA EM `vh` neste componente. As fichas vazias usavam
       `min-height: 60vh` inline: numa janela baixa, 60vh + cabeçalho + botões
       passa da altura útil do esqueleto. Quem centraliza verticalmente aqui é
       `min-height: 100%` — 100% do que a área JÁ tem, e não da janela;
     · o padding encolhe quando o componente está dentro de uma área do
       esqueleto: lá o espaço é emprestado, não infinito;
     · a versão `--compacto` (coluna de 340px) não tem botão nenhum: só a
       explicação. Dois botões e uma nota naquela largura viram uma torre.
   ========================================================================== */

.estado-vazio__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-1);
}

/* `button_to` embrulha o botão num <form>; sem isto ele quebra a linha e o par
   de botões deixa de ficar lado a lado. */
.estado-vazio__forma {
  display: inline-flex;
  margin: 0;
}

.estado-vazio__nota {
  max-width: 52ch;
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--cor-texto-fraco);
}

/* A ficha vazia do esqueleto: centralizada na altura QUE A ÁREA TEM. */
.estado-vazio--centralizado {
  min-height: 100%;
  justify-content: center;
}

/* Coluna estreita (a lista de 340px, a lateral de Listas). */
.estado-vazio--compacto {
  padding: var(--esp-6) var(--esp-4);
  gap: var(--esp-2);
}
.estado-vazio--compacto .estado-vazio__icone {
  width: 40px;
  height: 40px;
}
.estado-vazio--compacto .estado-vazio__icone svg {
  width: 20px;
  height: 20px;
}
.estado-vazio--compacto .estado-vazio__titulo { font-size: var(--texto-md); }
.estado-vazio--compacto .estado-vazio__texto { font-size: var(--texto-sm); }

/* Dentro do esqueleto de altura fechada, o respiro é menor. */
.tela-mestre__area .estado-vazio { padding: var(--esp-8) var(--esp-5); }
.tela-mestre__area .estado-vazio--compacto { padding: var(--esp-6) var(--esp-4); }

/* ==========================================================================
   O convite do primeiro acesso — o cartão do Painel
   ==========================================================================
   Mesma matéria-prima do `.cartao`, com a borda tracejada que diz "isto ainda
   não é conteúdo do seu gabinete; é um convite". */

.convite-descoberta {
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-sutil);
}

.convite-descoberta .estado-vazio { padding: var(--esp-8) var(--esp-5); }

/* Na Agenda o convite fica ACIMA da grade, e precisa do respiro que a grade
   não dá. */
.agenda__corpo .convite-descoberta { margin-bottom: var(--esp-4); }

/* A faixa de "você está vendo dados de exemplo": uma linha, não um cartão —
   ela convive com o painel cheio e não pode roubar a tela dele. */
.faixa-de-exemplo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}
.faixa-de-exemplo__titulo {
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
}
.faixa-de-exemplo__acao { margin-left: auto; }

/* ==========================================================================
   O SELO "exemplo" — a mesma fatia, a mesma linguagem visual
   ==========================================================================
   TRACEJADO QUER DIZER "isto ainda não é seu": é o que o convite do painel e a
   faixa de exemplo já diziam com a borda. O que faltava era dizer isso na
   LINHA, que é onde o dado de mentira aparece — a faixa mora no painel e some
   justamente na tela em que a pessoa está olhando a ficha fictícia.

   Fica minúsculo de propósito: entra dentro de uma linha de lista de 340px e
   dentro de um chip da grade da agenda, e não pode empurrar o título. */

.selo-de-exemplo {
  display: inline-block;
  margin-left: var(--esp-1);
  padding: 0 4px;
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  vertical-align: middle;
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--cor-texto-fraco);
  white-space: nowrap;
}

/* Na grade da agenda o chip inteiro ganha o contorno tracejado — em `outline`,
   e não em `border`: a borda esquerda do chip já carrega DOIS significados
   (a cor diz público/interno, e `--excecao` a deixa tracejada), e um terceiro
   ali dentro faria a ocorrência remarcada e a de exemplo ficarem idênticas. */
.agenda-chip--exemplo {
  outline: 1px dashed var(--cor-borda-forte);
  outline-offset: -1px;
}
.agenda-chip--exemplo .selo-de-exemplo {
  border-color: currentColor;
  color: inherit;
  opacity: 0.85;
}