/**
 * 🎨 O PAINEL DE LICENÇAS — REDKEYS
 *
 * Ferramenta de trabalho, não vitrine: densa e legível. Mas densa não é
 * desarrumada, e foi essa a crítica que gerou este arquivo — componentes
 * soltos, caixas de texto flutuando, tudo virando cartão.
 *
 * ── as três regras que governam tudo aqui ───────────────────────────────────
 *
 * 1. ⭐ **Um acento só, e é o da marca.** Vermelho REDKEYS para o que a pessoa
 *    faz; verde, âmbar e vermelho-claro **só** para estado de licença. Um
 *    segundo acento decorativo faria o olho procurar significado onde não há.
 *
 * 2. ⛔ **Cartão é para o que é um objeto.** Uma ficha de licença é um objeto.
 *    Um formulário é um objeto. Cinco fatos sobre a ponte **não são** — são uma
 *    lista, e viram `.fatos`. Quando tudo é cartão, nada se destaca, e a tela
 *    fica com cara de planilha com molduras.
 *
 * 3. 🔸 **O espaço separa, a borda define.** Seções se separam por espaço e uma
 *    linha fina; só o que precisa de recorte próprio ganha borda fechada.
 *
 * ── escala ──────────────────────────────────────────────────────────────────
 *
 * Espaço em múltiplos de 4. Tipo em cinco tamanhos, e nenhum a mais.
 */

:root {
  color-scheme: dark;

  /* fundo e superfícies — o preto tem um toque de azul, não é cinza puro */
  --fundo:     #0b0d11;
  --superficie:#14171d;
  --elevada:   #1a1e26;
  --borda:     #242a33;
  --borda-forte:#323945;

  /* texto */
  --texto:   #e9ebef;
  --apagado: #98a0ad;
  --fraco:   #6b7280;

  /* ⭐ o acento é o vermelho da REDKEYS, o mesmo do plugin */
  --marca:      #e0294a;
  --marca-forte:#f43f5e;
  --marca-fraca:rgba(224, 41, 74, .14);

  /* estado de licença — significado, nunca decoração */
  --bom:   #3ecf8e;
  --morno: #f5b544;
  --ruim:  #f2666f;
  --info:  #7fb2ff;

  --raio:   10px;
  --raio-g: 14px;

  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/**
 * ⛔ `hidden` PRECISA vencer, e sozinho ele não vence.
 *
 * O `[hidden]` do HTML é `display: none` na folha do navegador — a de menor
 * peso que existe. Qualquer regra nossa com `display` (e este arquivo tem
 * várias) passa por cima dela, e o elemento escondido continua na tela.
 *
 * ⚠️ Aqui isso não seria um detalhe visual: é `#porta`, a tela de login, que se
 * esconde quando alguém entra. Sem esta linha, entrar no painel deixaria a tela
 * de login por cima de tudo.
 */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" 1;
}

a { color: var(--info); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ── o topo ───────────────────────────────────────────────────────────────
 *
 * 🔸 A marca em maiúsculas espaçadas e o subtítulo apagado: a hierarquia se lê
 * antes de qualquer palavra ser lida.
 */
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e4) var(--e6);
  border-bottom: 1px solid var(--borda);
  background: linear-gradient(180deg, var(--superficie), var(--fundo));
}

.marca { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.marca .chave { font-size: 22px; line-height: 1; }
.marca strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.marca small {
  display: block;
  color: var(--fraco);
  font-size: 12px;
  letter-spacing: .01em;
}

.quem { display: flex; align-items: center; gap: var(--e3); font-size: 13px; color: var(--apagado); }

/* ── a portaria ───────────────────────────────────────────────────────────
 *
 * ⭐ Ela aparece IMEDIATAMENTE, antes de o Firebase decidir qualquer coisa.
 * Antes a página ficava em branco por quase um segundo esperando a resposta do
 * Google, e branco é indistinguível de quebrado.
 */
.porta {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 70px);
  padding: var(--e6);
}

.cartao-porta {
  width: min(380px, 100%);
  text-align: center;
  padding: var(--e7) var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
}
.cartao-porta h1 {
  margin: 0 0 var(--e2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cartao-porta p { margin: 0 0 var(--e5); color: var(--apagado); font-size: 13px; }

/**
 * ⛔ **O texto de estado saía torto, e a culpa era de `.nota`.**
 *
 * `#porta-esperando` usa a classe `.nota`, e `.nota` é `display: flex` (ela
 * nasceu para alinhar um ícone ao lado da frase). Um contêiner flex **ignora o
 * `text-align: center`** do cartão e encosta o conteúdo no início da linha —
 * então o selo, o título e a frase ficavam centralizados e só o "conferindo o
 * acesso…" ia para a esquerda. A porta é a primeira tela que alguém vê.
 */
.cartao-porta .nota { display: block; text-align: center; }

/**
 * ⛔ E o vão morto embaixo: o último parágrafo levava `margin-bottom` mesmo
 * sendo o último, e ela somava com o `padding` do cartão. Enquanto o Firebase
 * decide, o botão está `hidden` e não ocupa espaço — sobrava um buraco do
 * tamanho de um botão que ninguém vê.
 */
.cartao-porta > :last-child { margin-bottom: 0; }
.cartao-porta { padding: var(--e6) var(--e5); }
.cartao-porta .primario { width: 100%; }

/** O selo de "acesso restrito" — o mesmo lugar onde depois vai o erro. */
.tranca {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e5);
  padding: 5px 12px;
  border: 1px solid var(--marca-fraca);
  border-radius: 999px;
  background: var(--marca-fraca);
  color: var(--marca-forte);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── o corpo ──────────────────────────────────────────────────────────── */

/* ── lateral + conteúdo ───────────────────────────────────────────────────
 *
 * ⛔ O painel era uma coluna só de 1180 px com as abas deitadas no topo. Cada
 * seção começava numa altura diferente, e o olho tinha de reprocurar o conteúdo
 * a cada clique — é daí que vinha a sensação de quebrado.
 *
 * 📌 Wesley, 12/09/2026: "Ajustar o design do nosso painel que hoje ainda
 * parece bem quebrado e trazer uma cara bonita assim como é no dashboard para
 * clientes que hoje existe no MakeLink."
 *
 * ⭐ Agora a navegação mora numa lateral fixa e o conteúdo começa SEMPRE no
 * mesmo ponto. A largura máxima passou a valer só para o conteúdo, não para a
 * página: numa tela larga a lateral encosta na borda, como num aplicativo.
 */
#painel { padding: 0; }

/**
 * ⛔ **A LINHA QUE DIVIDE MENU E CONTEÚDO ACABAVA NO MEIO DA TELA.**
 *
 * 📌 Wesley, 21/09/2026, na primeira mensagem da revisão: *"até os finais de
 * página que divide menu e conteúdo ao ser arrastado fica desse jeito"*. E
 * depois, com uma seta no canto: *"Quando isso vai ser corrigido?"* — porque
 * eu tinha pulado este item.
 *
 * A causa era aritmética. A lateral era `position: sticky; top: 0` com
 * `min-height: calc(100vh - 69px)` — 69px a menos que a tela, que é a altura
 * do cabeçalho. Rolando, o cabeçalho sai, a lateral gruda no topo **com 69px
 * a menos**, e o rodapé da tela ficava sem fundo e sem a linha divisória:
 * exatamente o vão do print.
 *
 * ⭐ Agora quem gruda é o MENU, e não a coluna. A coluna vai até o fim do
 * conteúdo (`align-items: stretch`), então a linha e o fundo acompanham
 * qualquer altura de página; o `.abas` dentro dela é que fica preso à vista.
 */
.quadro {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: stretch;
  min-height: calc(100vh - 69px);
}

.lateral {
  padding: var(--e5) var(--e3);
  border-right: 1px solid var(--borda);
  background: var(--superficie);
}
.lateral .abas {
  position: sticky;
  top: var(--e5);
}

.conteudo {
  min-width: 0;               /* ⚠️ sem isto a tabela larga estica o grid */
  max-width: 1180px;
  padding: var(--e5) var(--e6) var(--e7);
}

/* ⛔ AQUI A LATERAL VIRAVA UMA TIRA QUE ROLAVA DE LADO, e era o pior lugar
 *    do painel inteiro no celular.
 *
 * 📌 Wesley, 21/09/2026: *"nao tem um menu recolhivel... um aninhado feioso,
 * que vai se encolhendo expremidamente na tentativa de mostrar tudo e errando
 * cegamente."*
 *
 * Medido a 375px antes de mexer: das cinco secoes, **"Seguranca" nao aparecia**
 * — ficava fora da tira, atras de uma rolagem horizontal que ninguem adivinha.
 * "Continuar alcancavel", que era a justificativa da regra antiga, era falso.
 *
 * ⭐ Agora e GAVETA: some da tela, entra pela esquerda por cima do conteudo, com
 * veu atras. E o mesmo desenho do `dashboard/layout.tsx` do MakeLink.
 */
@media (max-width: 860px) {
  .quadro { grid-template-columns: minmax(0, 1fr); }

  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    width: 264px;
    max-width: 82vw;
    border-right: 1px solid var(--borda-forte);
    background: var(--superficie);
    padding: var(--e4) var(--e3);
    transform: translateX(-100%);
    transition: transform .22s ease-out;
    box-shadow: 0 0 40px rgba(0, 0, 0, .5);
  }
  .lateral.aberta { transform: translateX(0); }
  .lateral .abas { position: static; }

  .veu-menu {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(5, 6, 9, .6);
    backdrop-filter: blur(2px);
  }

  .conteudo { padding: var(--e4) var(--e4) var(--e6); }
}

/* ── o resumo ─────────────────────────────────────────────────────────────
 *
 * ⛔ Não é uma fileira de cartões. Eram sete caixas com moldura, cinco delas
 * dizendo "1" — a definição de ruído. Agora é uma faixa só, dividida por linhas
 * finas: os números continuam todos lá, e o olho não tropeça em sete bordas.
 */
.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  margin-bottom: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  overflow: hidden;
}
.resumo > div {
  padding: var(--e3) var(--e4);
  border-left: 1px solid var(--borda);
}
.resumo > div:first-child { border-left: 0; }
.resumo b {
  display: block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.resumo span {
  display: block;
  margin-top: 2px;
  color: var(--fraco);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── abas ─────────────────────────────────────────────────────────────── */

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

/* 🔸 Dentro da gaveta as abas continuam VERTICAIS. A regra antiga as deitava
 *    porque elas viviam numa tira; agora ha uma coluna inteira para elas. */
.aba {
  padding: var(--e3) var(--e3);
  border: 0;
  border-radius: var(--raio);
  background: none;
  color: var(--apagado);
  font: inherit;
  font-size: 14px;
  cursor: pointer;

  /* ⚠️ `justify-content` próprio: a regra geral de `button` centraliza, e num
   *    item de menu o rótulo tem de começar todo na mesma coluna. */
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}


.aba:hover { color: var(--texto); background: var(--elevada); }
/* a link in the menu (the support desk, another tab): the same look, with a small "outside" mark */
a.aba { text-decoration: none; box-sizing: border-box; }
.aba .aba-externo { width: 12px; height: 12px; margin-left: auto; opacity: 0.6; }
.aba.ativa:hover { background: var(--marca-fraca); }
/* ⭐ O ativo é uma FAIXA, não um sublinhado: numa lista vertical o sublinhado
 *    fica no lugar errado (embaixo do item, colado no de baixo). A faixa
 *    vermelha à esquerda é o mesmo gesto do menu do MakeLink. */
.aba.ativa {
  color: var(--texto);
  font-weight: 500;
  background: var(--marca-fraca);
  box-shadow: inset 2px 0 0 var(--marca);
}



/* ── cartões, e o que NÃO é cartão ────────────────────────────────────────
 *
 * ⛔ `.cartao` é para OBJETO: uma ficha, um formulário. Cinco fatos sobre a
 * ponte não são um objeto, são uma lista — e viram `.fatos`, abaixo.
 */
.cartao {
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  margin-bottom: var(--e4);
}
.cartao h2 {
  margin: 0 0 var(--e4);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
}
.cartao.vazio {
  color: var(--apagado);
  text-align: center;
  padding: var(--e6);
  border-style: dashed;
}

/**
 * ⭐ `.fatos` — pares rótulo/valor, e a correção do defeito mais visível.
 *
 * A ponte com a Cakto era uma `<table>` de duas colunas esticada a 1100 px: o
 * rótulo na ponta esquerda, o valor 450 px depois, um deserto no meio, e 346 px
 * de altura para dizer cinco coisas. Agora cada fato é uma coluna estreita,
 * lado a lado, e a leitura é de relance.
 */
.fatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e4) var(--e5);
}
.fatos > div { min-width: 0; }

/*
 * ⚠️ Um fato longo — uma URL — ganha duas colunas. Sem isso ele quebrava no
 * meio do domínio ("…redkeys.com" numa linha, ".br/webhook" na outra), e uma
 * pessoa conferindo o endereço da ponte lia um domínio que não existe.
 */
.fatos > div.largo { grid-column: span 2; }
.fatos dt {
  margin: 0 0 2px;
  color: var(--fraco);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fatos dd {
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.fatos dd.mono { font-family: var(--mono); font-size: 12.5px; color: var(--apagado); }

/* ── tabelas ──────────────────────────────────────────────────────────── */

.tabela-fora {
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  overflow: auto hidden;
  background: var(--superficie);
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borda);
  background: var(--elevada);
  color: var(--fraco);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
tbody td { padding: var(--e3) var(--e4); border-top: 1px solid var(--borda); vertical-align: middle; }
tbody tr:first-child td { border-top: 0; }
tbody tr:hover { background: var(--elevada); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }

/**
 * 🔸 A coluna de ações encosta à direita e não quebra. Era um depósito de
 * botões no meio da célula; agora é uma fileira com respiro próprio.
 */
td.acoes { text-align: right; white-space: nowrap; }
td.acoes > * { margin-left: var(--e2); }

.serial { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--apagado); }

/* ── selos ────────────────────────────────────────────────────────────────
 *
 * ⭐ Cor com significado: verde é licença viva, âmbar é prazo, vermelho é
 * morta. Nenhum selo usa o vermelho da MARCA — seria confundir "ação" com
 * "problema".
 */
.selo, .pastilha {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;

  /**
   * ⛔ A BASE JA E VISIVEL, e isso corrige um defeito real.
   *
   * Antes a base tinha `border: 1px solid transparent` e nenhum fundo: um selo
   * cujo modificador nao tivesse regra propria virava TEXTO SOLTO, sem moldura
   * e sem cor. Foi o que aconteceu com `origem` — `cakto`, `cortesia` e `teste`
   * nao tinham regra, e apareciam como palavra crua no meio da tabela.
   *
   * 🔸 Agora o pior caso e um selo neutro, nao um selo invisivel. Valor novo no
   * banco amanha continua parecendo um selo.
   */
  background: var(--elevada);
  border: 1px solid var(--borda-forte);
  color: var(--apagado);
}
.selo.ativa    { background: rgba(62, 207, 142, .12); border-color: rgba(62, 207, 142, .3);  color: var(--bom); }
.selo.graca    { background: rgba(245, 181, 68, .12); border-color: rgba(245, 181, 68, .3);  color: var(--morno); }
.selo.expirada,
.selo.revogada { background: rgba(242, 102, 111, .12); border-color: rgba(242, 102, 111, .3); color: var(--ruim); }

/* ⚠️ Anual sem data e dado corrompido, nao um estado normal: o tracejado diz
   "isto nao deveria existir" sem gritar como um erro vermelho. */
.selo.sem-data { background: transparent; border-style: dashed; border-color: rgba(245, 181, 68, .5); color: var(--morno); }
.pastilha      { background: rgba(127, 178, 255, .1); border-color: rgba(127, 178, 255, .28); color: var(--info); }

/**
 * ⭐ ORIGEM nao e saude, entao nao usa verde/ambar/vermelho.
 *
 * Estado diz se a licenca esta viva; origem diz de onde ela veio. Pintar as
 * duas com a mesma paleta faria "cortesia" parecer um alerta e "cakto" parecer
 * um problema. Origem fica em tons neutros, e so a venda de verdade ganha cor.
 */
.selo.cakto    { background: rgba(127, 178, 255, .1); border-color: rgba(127, 178, 255, .28); color: var(--info); }
.selo.cortesia { background: transparent; border-color: var(--borda-forte); color: var(--apagado); }
.selo.teste    { background: transparent; border-style: dashed; border-color: var(--borda-forte); color: var(--fraco); }

/* ── botões ───────────────────────────────────────────────────────────────
 *
 * ⭐ Um primário por contexto, e ele é o único que carrega a cor da marca. O
 * resto é fantasma. Quando tudo grita, nada é ouvido.
 */
button {
  padding: 8px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--elevada);
  color: var(--texto);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
button:hover { border-color: var(--fraco); }
button:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: default; }

.primario {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
  font-weight: 500;
}
.primario:hover { background: var(--marca-forte); border-color: var(--marca-forte); }

.fantasma { background: transparent; border-color: var(--borda); color: var(--apagado); }
.fantasma:hover { background: var(--elevada); color: var(--texto); }

/**
 * 🔸 O botão de apagar só fica vermelho DEPOIS do primeiro clique. Antes disso
 * ele é um fantasma como os outros: um botão permanentemente vermelho na tela
 * vira paisagem, e paisagem não avisa ninguém.
 */
button.perigo { color: var(--ruim); border-color: var(--borda); }
button.perigo:hover { border-color: var(--ruim); background: rgba(242, 102, 111, .08); }
button.perigo.armado { background: var(--ruim); border-color: var(--ruim); color: #1a0d0f; font-weight: 600; }

/* ── formulários ──────────────────────────────────────────────────────── */

input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
  color: var(--texto);
  font: inherit;
  font-size: 14px;
}
/**
 * ⛔ **A SETA DO SELECT É NOSSA, e tem espaço reservado.**
 *
 * 📌 Wesley, 21/09/2026: *"número com seta sobreposta, nada de item
 * sobreposto."*
 *
 * A seta era a NATIVA do navegador, desenhada por cima do texto, dentro de um
 * `padding` que cada tela ajustava por conta própria. Bastou a paginação usar
 * um `padding` menor para o "10" ir parar debaixo dela. Cada navegador desenha
 * a sua em lugar diferente, então "funcionava no meu" não provava nada.
 *
 * ⭐ Agora a seta é um desenho nosso, no mesmo lugar em todo navegador, e o
 * `padding-right` que a comporta faz parte da regra base — não de cada tela.
 * Uma tela que mexer no `padding` precisa mexer só no da esquerda.
 */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-fraca);
}
input::placeholder, textarea::placeholder { color: var(--fraco); }
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

label {
  display: block;
  color: var(--apagado);
  font-size: 12px;
  letter-spacing: .02em;
}
label > input, label > select, label > textarea { margin-top: var(--e1); }

.linha { display: flex; flex-wrap: wrap; gap: var(--e4); margin-bottom: var(--e4); }
.linha > label { flex: 1 1 200px; min-width: 0; }
.linha > label.cresce { flex: 3 1 320px; }

.formulario button[type="submit"], .formulario .primario { margin-top: var(--e2); }

/* ═══════════════════════════════════════════════════════════════════════════
   ⭐ A ESCOLHA DE VÁRIOS PRODUTOS (Conceder): campo que filtra enquanto se
      digita, e o que já foi escolhido vira pílula dentro do próprio campo.

   ⛔ ANTES ERA UMA GRADE DE CAIXAS DE MARCAR, e era feia: a caixa num canto da
      célula e o nome no outro, com os nomes longos quebrando em duas linhas.
      📌 Wesley: *"nada profissional e bem feio [...] um campo pra digitar os
      nomes e ir aparecendo uma lista pra escolha + selecionados como borda
      arredondada"*.

   🔸 A pílula usa o mesmo raio 999px do `.selo` que o painel já tem em toda
      parte — é o vocabulário da casa, não um desenho novo.
   ═══════════════════════════════════════════════════════════════════════════ */
.campo { display: block; }
.linha > .campo { flex: 1 1 200px; min-width: 0; }
.linha > .campo.cresce { flex: 3 1 320px; }
.campo > .rotulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  color: var(--apagado);
  font-size: 12px;
  letter-spacing: .02em;
}
button.miudo { padding: 2px 8px; font-size: 11px; }

.escolher { position: relative; margin-top: var(--e1); }

/* ⚠️ `cursor: text` e o clique em qualquer ponto caindo no input: a caixa toda
   tem de se comportar como um campo, senão só a fresta ao lado das pílulas
   aceita o foco. */
.escolher-caixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
  cursor: text;
}
.escolher-caixa:focus-within {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-fraca);
}
/* o input mora DENTRO da caixa e não tem moldura própria */
.escolher-caixa input {
  flex: 1 1 140px;
  width: auto;
  min-width: 140px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.escolher-caixa input:focus { outline: none; box-shadow: none; }

/* ⛔ CHAMAVA-SE `.ficha` E DESTRUIU A FICHA DA LICENÇA. `.ficha` JÁ EXISTIA neste arquivo
   (linha ~691, `margin-top`) e é o contêiner da ficha — `#ficha`, `.ficha-topo`, `.ficha-corpo`,
   `.ficha-quem`. A minha regra vinha DEPOIS e ganhava na cascata: a ficha inteira virava uma
   pílula (inline-flex, 12px em negrito, nowrap, raio 999px) e todo botão dentro dela encolhia
   para 17x17. 📌 Wesley: *"corrige todo o layout quebrado do painel de licença que você
   destruiu"*.
   ⚠️ NOME DENTRO DA FAMÍLIA `escolher-`, que é só minha e não tem como colidir. */
.escolher-ficha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 5px 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--marca);
  background: var(--marca-fraca);
  color: var(--texto);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.escolher-ficha .serial { color: var(--apagado); font-weight: 400; }
.escolher-ficha button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--apagado);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.escolher-ficha button:hover { background: var(--marca); color: #fff; }

.escolher-lista {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 252px;
  overflow-y: auto;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--elevada);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
.escolher-lista .item {
  display: flex;
  gap: var(--e3);
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 12px;
  cursor: pointer;
}
/* ⚠️ `.aqui` é a do TECLADO e `:hover` a do rato; as duas acendem igual, senão
   descer com a seta e mover o rato acendem duas linhas ao mesmo tempo. */
.escolher-lista .item.aqui,
.escolher-lista .item:hover { background: var(--marca-fraca); }
.escolher-lista .item .serial { color: var(--fraco); font-size: 12px; }
.escolher-lista .vazio { padding: 10px 12px; color: var(--fraco); font-size: 13px; }

.filtros { display: flex; gap: var(--e3); margin-bottom: var(--e4); }
.filtros #busca { flex: 1 1 auto; }
.filtros select { flex: 0 0 auto; width: auto; min-width: 170px; }

fieldset.meios {
  margin: 0 0 var(--e4);
  padding: var(--e3) var(--e4) var(--e2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
fieldset.meios legend { padding: 0 var(--e2); color: var(--fraco); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
fieldset.meios > div[data-meios] { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.meio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.meio input { width: auto; margin: 0; }

/**
 * ⭐ `<details>` para o formulário de produto novo.
 *
 * Ele tinha 531 px de altura e ficava SEMPRE aberto embaixo da lista,
 * competindo com ela pela atenção. Criar produto é coisa rara; ver a lista é
 * coisa de todo dia. O raro se dobra.
 */
details.dobra {
  margin-top: var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--superficie);
  overflow: hidden;
}
details.dobra > summary {
  padding: var(--e3) var(--e5);
  color: var(--apagado);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.dobra > summary::-webkit-details-marker { display: none; }
details.dobra > summary { display: flex; align-items: center; gap: var(--e2); }
details.dobra > summary .ico { color: var(--marca); transition: transform .15s ease; }
details.dobra[open] > summary { border-bottom: 1px solid var(--borda); color: var(--texto); }
details.dobra[open] > summary .ico { transform: rotate(45deg); }
details.dobra > .corpo { padding: var(--e5); }
details.dobra .cartao { margin: 0; padding: 0; background: none; border: 0; }

/* ── avisos e recados ─────────────────────────────────────────────────── */

.nota  { margin: var(--e2) 0 0; color: var(--fraco); font-size: 12.5px; line-height: 1.5; }
.erro  { margin: var(--e3) 0 0; color: var(--ruim); font-size: 13px; }
.certo { margin: var(--e3) 0 0; color: var(--bom); font-size: 13px; }

.aviso {
  padding: var(--e3) var(--e4);
  border: 1px solid rgba(245, 181, 68, .3);
  border-left-width: 3px;
  border-radius: var(--raio);
  background: rgba(245, 181, 68, .07);
  color: var(--morno);
  font-size: 13px;
}

/* ── a ficha de uma licença ───────────────────────────────────────────── */

.ficha { margin-top: var(--e4); }
.ficha-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e3);
  margin-bottom: var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
}
/*
 * ⛔ A FICHA JA FOI UM DESASTRE, e o desastre coube numa linha. Ela era:
 *
 *     .ficha-corpo { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) }
 *
 * Isso faz de CADA FILHO DIRETO uma coluna — o cabecalho, os pares, cada
 * <h3>, cada computador, a caixa de eventos. Numa tela de 1400 px viravam
 * seis colunas, com as maquinas espalhadas lado a lado e os titulos soltos no
 * meio do nada.
 *
 * ⚠️ O padrao de colunas automaticas e para uma LISTA DE IGUAIS (`.fatos`).
 * A ficha e um DOCUMENTO: um assunto embaixo do outro, em coluna unica.
 */

/* ── a ficha ──────────────────────────────────────────────────────────── */

/*
 * ⛔ `#ficha` nao tinha regra nenhuma depois do redesenho, entao ela nem era
 * modal: nascia como um bloco comum embaixo da tabela, empurrando a pagina.
 */
#ficha {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--e5) var(--e4);
  overflow: auto;
  background: rgba(4, 6, 9, .72);
  backdrop-filter: blur(2px);
}

.ficha-corpo {
  display: grid;
  gap: var(--e5);            /* ⭐ uma coluna. Um assunto embaixo do outro. */
  width: 100%;
  max-width: 760px;
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

/* Os titulos internos separam assuntos; sem isto eles somem no meio. */
.ficha-corpo h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fraco);
}

/* Cada bloco de assunto e um grupo, e nao filhos soltos do grid. */
.ficha-bloco { display: grid; gap: var(--e3); }

/* A lista de computadores empilha; a primeira linha nao leva borda em cima. */
.maquinas { display: grid; }
.maquinas .linha-maquina:first-child { border-top: 0; }

.pares { display: grid; gap: var(--e2); }
.par { display: flex; justify-content: space-between; gap: var(--e3); font-size: 13.5px; }
.par > span:first-child { color: var(--fraco); }

.linha-maquina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) 0;
  border-top: 1px solid var(--borda);
  font-size: 13.5px;
}

/* ⛔ Era uma caixa de 320px com `overflow: auto`, e o JSON sem quebra dentro
 *    dela forçava rolagem LATERAL — a barra que aparecia embaixo do histórico.
 *    Agora cada evento é uma frase que quebra linha, e o técnico fica
 *    recolhido em "detalhes técnicos". Nada rola de lado. */
.eventos { display: grid; gap: var(--e3); }
.evento {
  display: flex;
  gap: var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
  font-size: 13.5px;
  color: var(--texto);
}
.evento:last-child { border-bottom: 0; padding-bottom: 0; }
.evento time {
  flex: 0 0 auto;
  min-width: 118px;
  color: var(--fraco);
  font-size: 12.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.evento-texto { min-width: 0; }
.evento-texto small { display: block; margin-top: 2px; color: var(--fraco); font-size: 12px; }
.evento details { margin-top: var(--e2); }
.evento summary { color: var(--fraco); font-size: 11.5px; cursor: pointer; }
.evento details code {
  display: block;
  margin-top: var(--e2);
  padding: var(--e3);
  background: var(--fundo);
  border-radius: var(--raio);
  color: var(--apagado);
  font-size: 11.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .evento { flex-direction: column; gap: 2px; }
  .evento time { min-width: 0; }
}

.solta { margin-top: var(--e4); }

/* ── telas estreitas ──────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .topo { padding: var(--e3) var(--e4); }
  #painel { padding: var(--e4); }
  .filtros { flex-wrap: wrap; }
  .filtros select { width: 100%; }
  .abas { overflow: auto hidden; }
}

/* ════════════════════════════════════════════════════════════════════════
 * ÍCONES
 *
 * ⭐ Substituíram os emoji, e a razão é prática, não estética: emoji muda de
 * desenho em cada sistema — o mesmo ⚠️ é amarelo no Windows, laranja no
 * macOS e outra coisa no Android. Um painel que precisa parecer o mesmo para
 * duas pessoas não pode depender disso.
 *
 * 🔸 Herdam `currentColor` e o tamanho da fonte de quem os contém. Um ícone
 * dentro de um botão vermelho fica vermelho, do tamanho do texto, sem regra.
 * ════════════════════════════════════════════════════════════════════════ */

.ico {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -.14em;
}
.ico-g { width: 1.25em; height: 1.25em; }

.marca .chave {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--marca-fraca);
  color: var(--marca);
  font-size: 19px;
}

.aba { display: inline-flex; align-items: center; gap: var(--e2); }
.aba .ico { color: var(--fraco); }
.aba.ativa .ico { color: var(--marca); }

.tranca .ico { font-size: 13px; }

/**
 * ⛔ `gap`, e NAO margem com `:only-child`.
 *
 * A primeira versao era `button .ico { margin-right: 6px }` mais
 * `button .ico:only-child { margin-right: 0 }` para o caso do botao so com
 * icone. So que `:only-child` conta **elementos**, e o texto de um botao e um
 * NO DE TEXTO, nao um elemento — entao o icone era sempre filho unico, a
 * segunda regra sempre vencia, e TODO botao ficava com o icone colado na
 * palavra.
 *
 * 🔸 Com `inline-flex` + `gap`, o espaco so existe quando ha duas coisas para
 * separar. Sem regra especial, sem caso de excecao.
 */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

/* ── cabeçalho de seção ───────────────────────────────────────────────────
 *
 * ⭐ Um padrão só para TODAS as abas: ícone, título e, quando faz falta, uma
 * linha explicando. Antes cada aba abria de um jeito — umas com `<h2>` solto,
 * outras com título dentro de cartão, outras com nada. Quem chega novo
 * aprende a ler a tela uma vez.
 */
.secao { margin: 0 0 var(--e4); }
.secao + .secao { margin-top: var(--e6); }
.secao h2 {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto);
}
.secao h2 .ico { color: var(--marca); font-size: 15px; }
.secao p { margin: var(--e2) 0 0; color: var(--fraco); font-size: 12.5px; max-width: 68ch; }

/* ── recados ──────────────────────────────────────────────────────────────
 *
 * ⭐ Três tipos, e o ícone diz qual é antes de a frase ser lida: atenção,
 * impedido, feito. Eram emoji no meio do texto — ⚠️ ⛔ ✅ — que mudam de
 * desenho conforme o sistema e não se alinham com a linha de base.
 */
/**
 * ⛔ **COM ÍCONE, O TEXTO VAI DENTRO DE UM `<span>` — sempre.**
 *
 * Isto é `flex`, então CADA filho vira um item. Escrever
 * `<p class="nota">${ico('alerta')}A frase <a>link</a></p>` cria TRÊS itens: o
 * link deixa de ser parte da frase, vira coluna própria, encolhe e quebra no
 * meio — "Cupons na / Cakto ↗" —, com 7px de folga em volta. O mesmo vale para
 * um `<strong>` no meio do texto.
 *
 * 🔸 O certo é o que o ajudante `nota()` faz: ícone + UM `<span>` com a frase
 * inteira dentro, inclusive o link. Aí o link volta a ser texto e flui com a
 * linha.
 *
 * ⚠️ Já foi consertado uma vez nos botões do nome (o "Cancelar" caía sozinho
 * para a linha de baixo, commit b5193fb) e voltou em 24/09/2026 no cartão da
 * promoção. É a mesma armadilha, num flex diferente.
 */
.nota { display: flex; align-items: flex-start; gap: 7px; }
.nota > .ico { margin-top: .18em; color: var(--fraco); flex: none; }
.nota.atencao   { color: var(--morno); }
.nota.atencao > .ico { color: var(--morno); }
.nota.impedido  { color: var(--ruim); }
.nota.impedido > .ico { color: var(--ruim); }
.nota.feito     { color: var(--bom); }
.nota.feito > .ico { color: var(--bom); }

.erro, .certo { display: flex; align-items: flex-start; gap: 7px; }
.erro > .ico { margin-top: .15em; }
.certo > .ico { margin-top: .15em; }

/* ── o bloco vazio, quando não há nada para mostrar ───────────────────────
 *
 * 🔸 Diz o que É aquilo e o que fazer, em vez de só "nenhum registro". Quem
 * abre o painel pela primeira vez não sabe o que deveria estar ali.
 */
.cartao.vazio { display: grid; gap: var(--e2); place-items: center; }
.cartao.vazio .ico { font-size: 26px; color: var(--borda-forte); }

/* ⭐ A ação de uma linha de formulário desce até a base, para o botão ficar na
 *    mesma altura dos campos. Os rótulos vizinhos empilham "nome + campo"; sem
 *    isto, o que só tem botão alinha pelo topo e parece solto. */
.linha .acao-da-linha { display: flex; align-items: flex-end; flex: 0 0 auto; }
.ficha-topo .acoes-da-ficha { display: flex; gap: var(--e2); margin-left: auto; }

/* ── builds: o seletor de produto e cada instalador publicado, uma linha ──── */
.linha-produto {
  display: grid;
  gap: 6px;
  max-width: 340px;
  margin: 0 0 14px;
  font-size: .9rem;
  color: var(--apagado);
}
.linha-build {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 4px 14px;
  align-items: baseline;
  padding: 9px 2px;
  border-bottom: 1px solid var(--borda);
}
.linha-build:last-child { border-bottom: none; }
.linha-build b { font-weight: 500; }
.linha-build code { font-size: .82rem; color: var(--apagado); overflow-wrap: anywhere; }
.linha-build small { color: var(--fraco); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .linha-build { grid-template-columns: 1fr; }
  .linha-build small { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🗣️ AS CONVERSAS DO PAINEL — no lugar de alert(), confirm() e prompt().

   📌 Wesley, 21/09/2026: *"Eu preciso que esse tipo de Popup seja erradicado.
   É feio, horrível."*

   ⛔ E o problema nunca foi só estética. A caixa do navegador escreve
   "licencas.redkeys.com.br diz" em cima da nossa frase, **trava a aba inteira**
   enquanto está aberta, não formata nada, e a de confirmação tem sempre os
   mesmos dois botões cinzentos — o de apagar um produto comercial parece igual
   ao de reenviar um e-mail. Aqui o botão que destrói é vermelho e diz o que faz.
   ═══════════════════════════════════════════════════════════════════════════ */

.veu {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: var(--e4);
  background: rgba(5, 6, 9, .72);
  backdrop-filter: blur(3px);
  animation: veu-entra .12s ease-out;
}
@keyframes veu-entra { from { opacity: 0 } to { opacity: 1 } }

.dialogo {
  width: min(440px, 100%);
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-g);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
  animation: dialogo-entra .14s ease-out;
}
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(6px) scale(.99) } to { opacity: 1 } }

.dialogo h2 {
  margin: 0 0 var(--e3);
  font-size: 15px; font-weight: 600; color: var(--texto); letter-spacing: 0;
  text-transform: none;
}
.dialogo p { margin: 0 0 var(--e5); color: var(--apagado); font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.dialogo label { display: block; margin: 0 0 var(--e5); }
.dialogo .botoes { display: flex; gap: var(--e3); justify-content: flex-end; }

/* 🔸 Um aviso não pode roubar o foco nem parar o trabalho: ele aparece no canto
   e sai sozinho. Erro fica até alguém fechar — erro que some antes de ser lido
   é erro perdido. */
.avisos {
  position: fixed; z-index: 95;
  right: var(--e4); bottom: var(--e4);
  display: flex; flex-direction: column-reverse; gap: var(--e3);
  max-width: min(400px, calc(100vw - var(--e4) * 2));
  pointer-events: none;
}
.aviso {
  display: flex; align-items: flex-start; gap: 9px;
  padding: var(--e4) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-left-width: 3px;
  border-radius: var(--raio);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  color: var(--texto); font-size: 13px; line-height: 1.5;
  white-space: pre-line;
  pointer-events: auto;
  animation: aviso-entra .16s ease-out;
}
@keyframes aviso-entra { from { opacity: 0; transform: translateX(10px) } to { opacity: 1 } }
.aviso.saindo { opacity: 0; transform: translateX(10px); transition: .18s ease-in; }
.aviso.feito    { border-left-color: var(--bom); }
.aviso.atencao  { border-left-color: var(--morno); }
.aviso.problema { border-left-color: var(--ruim); }
.aviso .fechar {
  margin-left: auto; padding: 0 2px; background: none; border: 0;
  color: var(--fraco); font-size: 16px; line-height: 1; cursor: pointer;
}
.aviso .fechar:hover { color: var(--texto); }

@media (max-width: 560px) {
  .avisos { right: var(--e3); left: var(--e3); bottom: var(--e3); max-width: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   📱 O CELULAR — medido a 375px em 21/09/2026, com o CSS de producao.

   O que se via antes, e cada linha daqui conserta um:

     · o subtitulo da marca quebrava em QUATRO linhas e COLIDIA com o e-mail
       e o botao Sair;
     · o menu era uma tira rolante onde "Seguranca" nao cabia;
     · da tabela de licencas so "QUEM" e "PRODUTO" apareciam — estado, origem,
       maquinas, vencimento, serial e o botao ficavam fora da tela.

   ⭐ A regra de ouro veio da grade da Cakto, aberta lado a lado: ela mostra
   QUATRO colunas (nome, preco, status, ⋮) e esconde o resto. Tabela larga no
   celular nao se encolhe — ela vira cartao.
   ═══════════════════════════════════════════════════════════════════════════ */

.so-estreito { display: none; }

#abrir-menu {
  background: none;
  border: 0;
  padding: var(--e2);
  margin-left: calc(var(--e2) * -1);
  color: var(--apagado);
  cursor: pointer;
}
#abrir-menu:hover { color: var(--texto); }
#abrir-menu .ico { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .so-estreito { display: inline-flex; }

  /* ⛔ A colisao: `.topo` era um flex de dois blocos que nao cabiam. Agora a
   *    marca encolhe (`min-width: 0`) e o subtitulo some — num telefone ele era
   *    quatro linhas de texto decorativo empurrando o botao de sair para cima
   *    do nome. */
  .topo { gap: var(--e3); padding: var(--e3) var(--e4); }

  /* ⛔ **A colisao vinha de nao haver quem encolhesse.** `.topo` e um flex com
   *    `space-between`, e os dois lados se recusavam a diminuir: a marca porque
   *    o `strong` nao quebra nem corta, o bloco da conta porque o e-mail inteiro
   *    ficava la. Os dois transbordavam e se sobrepunham no meio.
   *
   *    Agora a marca ENCOLHE (`flex: 1` + `min-width: 0` em toda a corrente, que
   *    e o que destrava o corte num flex) e a conta NAO (`flex: 0 0 auto`). */
  .marca { min-width: 0; flex: 1 1 auto; gap: var(--e2); }
  .marca > div { min-width: 0; }
  .marca small { display: none; }
  .marca strong {
    font-size: 13px;
    letter-spacing: .1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .marca .chave { width: 28px; height: 28px; font-size: 16px; }

  .quem { flex: 0 0 auto; gap: var(--e2); }
}

/* 🔸 Num telefone o e-mail e ruido: quem esta logado ja sabe quem e, e o
 *    endereco inteiro nao cabe sem empurrar o resto. Fica o botao de sair, que
 *    e a unica coisa acionavel ali. O e-mail continua visivel no tablet. */
@media (max-width: 640px) {
  .quem #quem-email { display: none; }
}

/* ── a tabela vira cartao ────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .tabela-fora { overflow: visible; border: 0; }
  .tabela-fora table { display: block; width: 100%; }
  .tabela-fora thead { display: none; }
  .tabela-fora tbody { display: block; }

  .tabela-fora tbody tr {
    display: block;
    margin-bottom: var(--e3);
    padding: var(--e3) var(--e4);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
  }

  /* ⛔ Era `space-between`, e com DOIS valores na mesma célula ("ativa" e
   *    "cortesia") o flex espalhava os três itens: rótulo à esquerda, um selo
   *    no meio, outro na ponta. Agora os valores andam juntos à direita e o
   *    rótulo é quem empurra (`margin-right: auto`). */
  .tabela-fora tbody td {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--e2);
    padding: 5px 0;
    border: 0;
    text-align: right;
  }

  /* ⭐ O rotulo vem do `<th>` da coluna, copiado para `data-rotulo` pelo
   *    `rotularTabelas()`. Sem ele o cartao seria uma pilha de valores sem
   *    nome — que e o erro classico de "tabela responsiva". */
  .tabela-fora tbody td::before {
    content: attr(data-rotulo);
    flex: 0 0 auto;
    margin-right: auto;
    color: var(--fraco);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
  }

  /* A primeira celula e o titulo do cartao: sem rotulo, e do tamanho de um. */
  .tabela-fora tbody td:first-child {
    display: block;
    text-align: left;
    padding-bottom: var(--e3);
    margin-bottom: var(--e2);
    border-bottom: 1px solid var(--borda);
    font-size: 15px;
  }
  .tabela-fora tbody td:first-child::before { content: none; }

  /* Celula vazia (a coluna do botao no desktop) nao vira linha fantasma. */
  .tabela-fora tbody td:empty { display: none; }

  .tabela-fora tbody td.acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--e2);
    padding-top: var(--e3);
    margin-top: var(--e2);
    border-top: 1px solid var(--borda);
  }
  .tabela-fora tbody td.acoes::before { content: none; }
  .tabela-fora tbody td.acoes button { flex: 1 1 auto; }

  /* O serial nao quebra no meio: ele e lido em voz alta para o suporte. */
  .tabela-fora tbody td.serial { font-size: 12px; word-break: break-all; }
}

/* ── os filtros no celular ───────────────────────────────────────────────
 *
 * 📌 Wesley, 21/09/2026: *"Isso aqui precisa ser revisto, principalmente no
 * celular"* — apontando o resumo e os filtros.
 *
 * ⛔ Antes: busca numa linha, os três selects em mais duas. Somados aos seis
 * cartões do resumo, a primeira licença só aparecia depois de rolar uma tela
 * inteira de controles.
 *
 * ⭐ Agora a busca divide a linha com um botão "Filtros", e os selects só
 * aparecem quando ele é tocado. O botão diz quantos estão ligados.
 */
#alternar-filtros { display: none; }

@media (max-width: 640px) {
  .filtros { display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e3); }
  .filtros #busca { grid-column: 1; }
  #alternar-filtros {
    display: inline-flex;
    grid-column: 2;
    align-items: center;
    white-space: nowrap;
  }
  #alternar-filtros.ligado { color: var(--texto); border-color: var(--marca); }

  .filtros select { display: none; grid-column: 1 / -1; min-width: 0; width: 100%; }
  .filtros.abertos select { display: block; }
}


/* ── a paginação ─────────────────────────────────────────────────────────
 *
 * ⭐ Ela diz "1–20 de 137", e não só "próxima": saber QUANTOS existem é a
 * diferença entre navegar e adivinhar. E é o número que responde "quantos
 * clientes eu tenho?" sem abrir relatório nenhum.
 */
.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4);
  margin-top: var(--e4);
  color: var(--fraco);
  font-size: 12.5px;
}
.paginacao b { color: var(--texto); font-variant-numeric: tabular-nums; }
.paginacao .mostrar {
  display: flex;
  align-items: center;
  gap: var(--e2);
  color: var(--fraco);
  font-size: 12.5px;
  letter-spacing: 0;
}
/* ⚠️ Só a ESQUERDA do padding muda aqui: a direita é da seta, e é a regra
 *    base que a guarda. E `margin-top: 0` porque `label > select` empurrava o
 *    select para baixo, desalinhando-o do "mostrar" ao lado. */
.paginacao select {
  width: auto;
  min-width: 68px;
  margin-top: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  font-size: 12.5px;
  background-position: right 9px center;
}

/* 🔸 "ir/voltar" encostam na direita no desktop e ocupam a linha inteira no
 *    telefone: alvo de toque grande, e nada rolando de lado. */
.paginacao .andar { display: flex; align-items: center; gap: var(--e2); margin-left: auto; }
/* O desenho dos botões é o da barra do MakeLink: borda fina, canto
   arredondado, altura igual à do select ao lado. */
.paginacao button {
  padding: 5px 12px;
  font-size: 12.5px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: none;
  color: var(--apagado);
}
.paginacao button:not(:disabled):hover { background: var(--elevada); color: var(--texto); }
.paginacao button:disabled { opacity: .3; cursor: default; }

@media (max-width: 560px) {
  .paginacao { gap: var(--e3); }
  .paginacao .andar { width: 100%; margin-left: 0; justify-content: space-between; }
}


/* ── a página de um produto ───────────────────────────────────────────────
 *
 * 📌 Wesley: *"Olhe o painel para cada produto individualmente."* O desenho é
 * o da Cakto: voltar à esquerda, nome do produto como título, abas em linha.
 */
.vista-topo {
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin-bottom: var(--e4);
}
.vista-titulo h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--texto); }
.vista-titulo .nota { margin: 2px 0 0; }

/* 🔸 A seta do "Voltar" é o ícone girado: o painel não tem um de seta, e
 *    inventar um só para cá acrescentaria um símbolo ao vocabulário. */
[data-voltar] .ico { transform: rotate(180deg); }

.abas-linha {
  display: flex;
  gap: var(--e2);
  margin-bottom: var(--e4);
  border-bottom: 1px solid var(--borda);
}
.abas-linha button {
  padding: var(--e3) var(--e4);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--apagado);
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.abas-linha button:hover { color: var(--texto); background: none; }
.abas-linha button.ativa { color: var(--texto); font-weight: 500; border-bottom-color: var(--marca); }

.acoes-do-produto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

/* Os selos dos dois canais na mesma célula da grade. */
.canais { display: flex; flex-wrap: wrap; gap: var(--e2); }

@media (max-width: 560px) {
  .vista-topo { flex-wrap: wrap; gap: var(--e3); }
  .acoes-do-produto button { flex: 1 1 auto; }
}


/* ⛔ O nome do produto quebrava em duas linhas e dobrava a altura de TODA a
 *    tabela. Aqui ele corta com reticências: o nome inteiro está na ficha, a
 *    um clique, e uma linha de 43px vale mais que um nome completo que ninguém
 *    precisa ler ali. */
td.apertado {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  td.apertado { max-width: none; white-space: normal; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   📌 Wesley, 21/09/2026: *"Pode erradicar e esquecer esse tipo de menu aqui
   pra celular, isso não existe, e tem inúmeras outras formas de exibir isso."*

   ⛔ **E era o MESMO erro da lateral antiga, cometido de novo por mim.** A
   barra de seções do produto rolava de lado no telefone: "Ofertas" ficava fora
   da tela, atrás de um gesto que ninguém adivinha. Eu tinha acabado de tirar
   exatamente isso do menu principal e reintroduzi três telas adiante.

   ⭐ A regra, agora escrita para não se perder: **no estreito nada rola de
   lado — ou cabe, ou quebra a linha.** Quatro seções viram uma grade de duas
   colunas, todas visíveis de uma vez, com a ativa pintada como no menu.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .abas-linha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e2);
    border-bottom: 0;
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--borda);
  }
  .abas-linha button {
    padding: var(--e3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    text-align: center;
  }
  /* A ativa usa a mesma pintura do item de menu: faixa da marca, não
     sublinhado — sublinhado numa grade fica no lugar errado. */
  .abas-linha button.ativa {
    border-color: transparent;
    background: var(--marca-fraca);
    box-shadow: inset 2px 0 0 var(--marca);
  }
}


/* ── o resumo no celular ─────────────────────────────────────────────────
 *
 * ⛔ Seis números em DUAS colunas davam três fileiras de cartão alto — quase
 * 300px antes de qualquer licença. Em TRÊS colunas, com o número menor, cabem
 * em duas fileiras curtas e ninguém perde nada.
 *
 * 🔸 As bordas trocam de regra: numa grade de 3 a fileira de baixo começa no
 * 4º item, e `:first-child` não sabe disso. Sem o `3n+1`, o 4º cartão ganhava
 * uma borda esquerda solta, grudada na moldura.
 */
@media (max-width: 640px) {
  .resumo { grid-template-columns: repeat(3, 1fr); margin-bottom: var(--e4); }
  .resumo > div { padding: var(--e2) var(--e3); border-left: 1px solid var(--borda); }
  .resumo > div:nth-child(3n+1) { border-left: 0; }
  .resumo > div:nth-child(n+4) { border-top: 1px solid var(--borda); }
  .resumo b { font-size: 17px; }
  .resumo span { font-size: 9.5px; letter-spacing: .05em; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   📄 A LICENÇA É UMA PÁGINA, NÃO UM POPUP.

   📌 Wesley, 21/09/2026: *"Escreve uma página única pra cada usuário clicado
   em vez desse popup. Popup em celular é horrível."*

   ⛔ O `#ficha` era `position: fixed; inset: 0` com véu escuro — um popup de
   tela cheia, pendurado no fim do <body>. No telefone era uma caixa dentro de
   outra caixa, com a lista rolando por trás. Aqui ele volta a ser um bloco
   comum dentro da aba, e a lista sai de cena enquanto ele está aberto.
   ═══════════════════════════════════════════════════════════════════════════ */
#ficha {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  padding: 0;
  overflow: visible;
  background: none;
  backdrop-filter: none;
}
#ficha[hidden] { display: none; }
#ficha .ficha-corpo { max-width: none; }
#ficha .voltar { align-self: flex-start; justify-self: start; }

.ficha-quem { min-width: 0; }
.ficha-quem h2 { margin: 0 0 var(--e1); overflow-wrap: anywhere; }
.ficha-quem .serial { overflow-wrap: anywhere; }
.ficha-quem .nota { margin-top: 2px; }

/* ⛔ "pedido" e "número de série" quebravam ALINHADOS À ESQUERDA enquanto
 *    todos os outros valores ficavam à direita. O valor agora é sempre da
 *    direita, e quebra onde precisar. */
.par > :last-child { text-align: right; overflow-wrap: anywhere; min-width: 0; }

/* ── a linha do limite: era `style` inline, que nenhuma media query vence ── */
.linha > label.campo-curto { flex: 0 0 120px; }
.linha > label.campo-medio { flex: 0 0 180px; }

@media (max-width: 560px) {
  /* Dispositivos e Estado lado a lado, Salvar embaixo, ocupando a linha:
   * antes Dispositivos ficava sozinho com 120px e o resto desencontrado. */
  .linha > label.campo-curto,
  .linha > label.campo-medio { flex: 1 1 calc(50% - var(--e4)); }
  .linha .acao-da-linha { flex: 1 1 100%; }
  .linha .acao-da-linha button { width: 100%; }

  .ficha-topo .acoes-da-ficha { width: 100%; margin-left: 0; }
  .ficha-topo .acoes-da-ficha button { flex: 1 1 auto; }
}


/* ── o veredito da segurança ──────────────────────────────────────────────
 * A resposta a "preciso me preocupar?", antes de qualquer tabela. Verde de
 * calma quando está tudo bem; vermelho só quando há algo a olhar. */
.veredito { border-left: 3px solid var(--borda-forte); }
.veredito b { display: block; font-size: 15px; color: var(--texto); }
.veredito p { margin: var(--e1) 0 0; color: var(--apagado); font-size: 13px; }
.veredito.tranquilo { border-left-color: var(--bom); }
.veredito.alerta { border-left-color: var(--ruim); }


/* Os oito recursos da ponte do Gumroad, cada um com o seu selo: ligado ou não. */
.ponte-recursos { margin-top: var(--e3); }
#ponte-gumroad .cartao { margin-top: var(--e4); }
#ponte-gumroad h2 { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }

/**
 * 🔁 A barra "Sincronizar plataformas" — texto à esquerda, botão à direita;
 * no telefone o botão desce para baixo do texto e ocupa a largura, em vez de
 * espremer a frase numa coluna estreita.
 */
.sincronia-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e3) var(--e4); flex-wrap: wrap; }
.sincronia-linha > div { flex: 1 1 320px; min-width: 0; }
.sincronia-linha h2 { margin-bottom: 4px; }
.sincronia-linha .nota { margin: 0; }
.sincronia-linha > button { flex: 0 0 auto; margin: 0; }
#sincronia-saida:not(:empty) { margin-top: var(--e3); }
@media (max-width: 720px) {
  .sincronia-linha > button { flex: 1 1 100%; justify-content: center; }
}

/** Caixa de marcar com frase longa: quebra linha, e a caixa fica no alto. */
.marcar { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; margin: var(--e3) 0; }
.marcar input { width: auto; margin: 2px 0 0; flex: 0 0 auto; }

/**
 * ✏️ O nome editado no lugar, na página da licença. O botão "editar nome"
 * é texto, não caixa: não compete com "Reenviar e-mail", que é a ação da tela.
 */
button.link {
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--fraco); font-size: 12.5px; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; min-height: 0; width: auto;
}
button.link:hover { color: inherit; }
.nome-em-linha { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin: 0 0 var(--e2); }
.nome-em-linha input { flex: 1 1 200px; min-width: 0; margin: 0; }
/** Os dois botões andam juntos: se quebrar linha, quebram os DOIS. */
.botoes-do-nome { display: flex; gap: var(--e2); flex: 0 0 auto; }
.botoes-do-nome button { margin: 0; }
@media (max-width: 720px) {
  .nome-em-linha input, .botoes-do-nome { flex-basis: 100%; }
  .botoes-do-nome button { flex: 1 1 0; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   A ÁREA DE MEMBROS no painel — abas "Aulas" e "Entrega" — 09/10/2026
   ══════════════════════════════════════════════════════════════════════════ */

/* O cabeçalho de um módulo: título à esquerda, publicar/renomear/apagar à direita. */
.linha-do-modulo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-bottom: var(--e4);
}
.linha-do-modulo h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.linha-do-modulo .nota { margin: 2px 0 0; }
.linha-do-modulo .acoes { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }

/* Um sistema (ou um arquivo) dentro do formulário de entrega. */
.formulario label.larga { flex: 1 1 320px; }

/* ══ OS BANNERS DO TOPO — a lista do outdoor (22/10/2026) ═════════════════
   Cada peça: a arte larga grande (clique para enviar), a de celular ao lado,
   e o texto com o selo de estado e as ações. */
.banner-barra { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e4); }
.banner-cartao {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: var(--e5);
  align-items: start;
  margin-bottom: var(--e4);
}
.banner-artes { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: var(--e2); align-items: start; }
.banner-arte {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--elevada);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--fraco);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
.banner-arte small { display: block; letter-spacing: 0; text-transform: none; font-size: 10.5px; }
.banner-arte.celular { aspect-ratio: 3 / 4; }
.banner-arte.vazia { border-style: dashed; }
.banner-arte:hover { border-color: var(--marca); color: var(--texto); }
.banner-arte img { display: block; width: 100%; height: 100%; object-fit: cover; }
.banner-topo { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e2); }
.banner-topo h3 { margin: 0; font-size: 16px; font-weight: 600; }
.banner-ordem {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--elevada);
  border: 1px solid var(--borda-forte);
  color: var(--apagado);
  font-size: 12px;
  font-weight: 600;
}
.banner-frase { margin: 0 0 var(--e2); color: var(--apagado); }
/* O aviso acima do título, como ele sai no topo da área do cliente. */

.banner-aviso { margin: 0 0 4px; color: var(--apagado); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
/* 🌐 A tradução automática: o par de idiomas e o título no outro idioma. */
.banner-traducao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 var(--e2); font-size: 13px; }
.idioma-do-banner { color: var(--fraco); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.banner-traducao .mini { padding: 2px 8px; font-size: 12px; }


.banner-cartao .acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e3); }

/* As setas de ordem (o ícone "direita" girado) e o menu "⋯" das ações raras. */
.setas-de-ordem { display: inline-flex; gap: 4px; }
.setas-de-ordem button:first-child .ico { transform: rotate(-90deg); }
.setas-de-ordem button:last-child .ico { transform: rotate(90deg); }
.mais-acoes { position: relative; }
.mais-acoes > summary {
  display: inline-grid;
  place-items: center;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--apagado);
  font-size: 11px;
  letter-spacing: .1em;
  list-style: none;
  cursor: pointer;
}
.mais-acoes > summary::-webkit-details-marker { display: none; }
.mais-acoes > summary:hover, .mais-acoes[open] > summary { border-color: var(--borda-forte); color: var(--texto); background: rgba(255, 255, 255, .06); }
.mais-acoes-lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  background: #1f1f1f;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.mais-acoes-lista button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--apagado);
  font-size: 13px;
  text-align: left;
}
.mais-acoes-lista button:hover { background: rgba(255, 255, 255, .06); color: var(--texto); }
.mais-acoes-lista button.perigo { color: var(--ruim); }
.mais-acoes-lista button.perigo:hover { background: rgba(242, 102, 111, .1); }
.mais-acoes-lista button.perigo.armado { background: var(--ruim); color: #1a0d0f; }

@media (max-width: 760px) {
  .banner-cartao { grid-template-columns: 1fr; }
}
.formulario h2 small { margin-left: var(--e2); color: var(--fraco); font-size: 12px; font-weight: 400; }

.grupo-entrega {
  padding: var(--e4) 0 0;
  border-top: 1px solid var(--borda);
  margin-top: var(--e4);
}

.grupo-entrega:first-of-type { border-top: 0; margin-top: 0; }
.grupo-entrega h3 {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0 0 var(--e3);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto);
  letter-spacing: 0;
  text-transform: none;
}

/**
 * ⛔ **O diálogo da aula precisa ser LARGO**, e os rótulos dentro dele precisam
 *    perder a margem de 24 px.
 *
 *    `.dialogo` tem 440 px — o bastante para uma pergunta de um campo, que é
 *    para o que ele nasceu. O formulário de uma aula tem seis campos em quatro
 *    linhas; a 440 px cada `label` do `.linha` cai para uma por linha e a caixa
 *    fica mais alta que a tela do notebook.
 *
 *    E `.dialogo label { margin: 0 0 var(--e5) }` somava 24 px abaixo de cada
 *    campo ao `gap` que o `.linha` já dá — o dobro do espaço, em oito lugares.
 */
.dialogo.largo { width: min(680px, 100%); }
.dialogo.largo .linha { margin-bottom: var(--e3); }
.dialogo.largo .linha > label { margin: 0; }
.dialogo.largo p { margin: 0 0 var(--e4); }

/* ════════════════════════════════════════════════════════════════════════
 * 👤 CLIENTES — a lista de pessoas e a ficha de uma pessoa (22/10/2026)
 *
 * 📌 Wesley: *"Hoje ela 'parece uma tela de prompt gigante e esquisita'.
 *    Quero uma lista limpa e escaneável [...] no mesmo visual Netflix/Inter que
 *    o painel e a área do cliente já usam. Nada de textão explicativo na tela."*
 *
 * ⭐ A régua é a da área do cliente (docs/14 §3): fundo chapado, superfície
 *    #181818 sem borda, raio 4, nenhum contorno em volta de tudo. O que separa
 *    as linhas é um fio a 5% (`box-shadow` interno, que não soma altura), e o
 *    que diz "isto se clica" é o fundo que acende no hover.
 *
 * 🔸 As cores vêm dos tokens do tema.css (carregado depois deste arquivo).
 * ════════════════════════════════════════════════════════════════════════ */

.clientes-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e3) var(--e4);
  margin: 0 0 var(--e4);
}
.clientes-titulo { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--texto); }

.clientes-busca { position: relative; flex: 0 1 380px; min-width: 0; margin: 0; }
.clientes-busca .ico {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--fraco);
  pointer-events: none;
}
.clientes-busca input { width: 100%; height: 40px; margin: 0; padding-left: 36px; }

#aba-licencas .filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  margin: 0 0 var(--e4);
}
#aba-licencas .filtros select {
  flex: 0 0 auto;
  width: auto;
  min-width: 170px;
  height: 34px;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
}

/* 🔘 As pílulas: a escolhida é branca com letra preta, como as da Netflix.
 * ⛔ Elas QUEBRAM a linha, e não rolam de lado — a regra do painel no estreito
 *    ("ou cabe, ou quebra a linha", ver `.abas-linha` no celular). */
.estados { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.estados button {
  flex: none;
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--apagado);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.estados button:hover { background: rgba(255, 255, 255, .13); color: var(--texto); }
.estados button[aria-pressed="true"] { background: var(--texto); color: #141414; }

/* ── a lista ──────────────────────────────────────────────────────────── */

.clientes { display: grid; margin: 0 0 var(--e3); }
.clientes-linha {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 2.6fr) 92px 112px 16px;
  align-items: center;
  gap: var(--e4);
  padding: 12px var(--e3);
  border-radius: var(--raio);
  color: var(--texto);
  cursor: pointer;
}
/* 🔸 O fio é um degradê de 1 px, e não `border`/`box-shadow`: com o raio da
 *    linha, os dois faziam uma curvinha nas pontas. */
.clientes-linha + .clientes-linha {
  background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)) top / 100% 1px no-repeat;
}
.clientes-linha:hover,
.clientes-linha:hover + .clientes-linha:hover { background: #1f1f1f; }
.clientes-linha:hover + .clientes-linha { background: none; }
.clientes-linha:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }

.clientes-titulos {
  padding-top: 0;
  padding-bottom: var(--e2);
  color: var(--fraco);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: default;
}
.clientes-titulos:hover { background: none; }
.clientes-titulos + .clientes-linha:not(:hover) { background: none; }

.num { text-align: right; font-variant-numeric: tabular-nums; }

.cliente-quem { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--elevada);
  color: var(--apagado);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
.avatar.banido { background: var(--marca-fraca); color: var(--marca-forte); }
.avatar.grande { width: 56px; height: 56px; font-size: 19px; }

.cliente-nomes { display: grid; min-width: 0; }
.cliente-nome, .cliente-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliente-nome { font-size: 14px; font-weight: 500; }
.cliente-email { color: var(--fraco); font-size: 12.5px; }

/* 🏅 O nível da pessoa (db/034), ao lado do nome. */
.tag-nivel {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--linha, rgba(255, 255, 255, .18));
  color: var(--fraco);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.tag-nivel[data-nivel="cliente"] { color: #3fb37f; border-color: rgba(63, 179, 127, .45); }
.tag-nivel[data-nivel="parceria"] { color: #d9a441; border-color: rgba(217, 164, 65, .45); }

/* 📦 db/034: a etiqueta discreta do material (e do grátis) — na grade de produtos e no Conceder. */
.etiqueta-material {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--linha, rgba(255, 255, 255, .18));
  color: var(--fraco);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
}
.etiqueta-material.gratis { color: var(--bom, #46d369); border-color: rgba(70, 211, 105, .35); }

.tag-banido {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--marca);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.cliente-licencas { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.etiqueta-licenca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .06);
  color: #e5e5e5;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.etiqueta-licenca i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bom); }
.etiqueta-licenca[data-estado="graca"] i,
.etiqueta-licenca[data-estado="sem-data"] i { background: var(--morno); }
.etiqueta-licenca[data-estado="expirada"] i { background: var(--fraco); }
.etiqueta-licenca[data-estado="revogada"] i { background: var(--marca); }
.etiqueta-licenca[data-estado="expirada"],
.etiqueta-licenca[data-estado="revogada"] { color: var(--fraco); }
.etiqueta-mais { padding: 3px 2px; color: var(--fraco); font-size: 12px; }

.cliente-aparelhos { color: var(--fraco); font-size: 13px; }
.cliente-aparelhos b { color: var(--texto); font-weight: 500; }
.cliente-visto { color: var(--apagado); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cliente-seta { color: var(--fraco); }
.so-celular { display: none; }

.clientes-vazio { padding: var(--e7) var(--e4); color: var(--fraco); text-align: center; }

/* ── a ficha da pessoa ───────────────────────────────────────────────── */

.pessoa { display: grid; gap: var(--e5); }

.pessoa-voltar {
  justify-self: start;
  padding: 4px 6px 4px 0;
  border: 0;
  background: none;
  color: var(--apagado);
  font-size: 13px;
  gap: 4px;
}
.pessoa-voltar:hover { background: none; color: var(--texto); }

.pessoa-cabeca { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e4); }
.pessoa-titulo { flex: 1 1 280px; min-width: 0; }
.pessoa-titulo h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--texto); overflow-wrap: anywhere; }
.pessoa-sub { margin: 4px 0 0; color: var(--apagado); font-size: 14px; overflow-wrap: anywhere; }
.pessoa-sub:empty { display: none; }
.pessoa-meta { margin: 2px 0 0; color: var(--fraco); font-size: 13px; }
.pessoa-acoes { display: flex; gap: var(--e2); flex: 0 0 auto; }

/* 🚫 A faixa do banimento: o porquê à vista, sem caixa em volta. */
.pessoa-banida {
  padding: var(--e3) var(--e4);
  border-radius: var(--raio);
  background: rgba(224, 41, 74, .10);
  box-shadow: inset 3px 0 0 var(--marca);
  font-size: 13.5px;
}
.pessoa-banida b { color: var(--texto); font-weight: 600; }
.pessoa-banida span { color: var(--apagado); }
.pessoa-banida p { margin: 6px 0; color: var(--texto); overflow-wrap: anywhere; }
.pessoa-banida small { color: var(--apagado); font-size: 12.5px; }

.pessoa-abas { margin: 0; flex-wrap: wrap; }
.pessoa-abas button span { margin-left: 6px; color: var(--fraco); font-size: 12px; font-variant-numeric: tabular-nums; }
.pessoa-abas button.ativa span { color: var(--apagado); }

.pessoa-painel { display: grid; gap: var(--e3); }
.vazio-curto { margin: 0; padding: var(--e4) var(--e2); color: var(--fraco); font-size: 13.5px; }

/* 🎫 Uma licença: superfície chapada, ações no canto dela. */
.licenca {
  display: grid;
  gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--raio-g);
  background: var(--superficie);
}
.licenca-topo { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--e3); }
.licenca-nome { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.licenca-nome h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--texto); }
.licenca-tipo { color: var(--fraco); font-size: 12.5px; }
.licenca-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.licenca-acoes button,
.pessoa-acoes button { padding: 6px 12px; font-size: 13px; }

.estado-licenca {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(70, 211, 105, .14);
  color: var(--bom);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.estado-licenca[data-estado="graca"],
.estado-licenca[data-estado="sem-data"] { background: rgba(245, 181, 68, .14); color: var(--morno); }
.estado-licenca[data-estado="expirada"] { background: rgba(255, 255, 255, .08); color: var(--apagado); }
.estado-licenca[data-estado="revogada"] { background: var(--marca-fraca); color: var(--marca-forte); }

.licenca-fatos,
.pessoa-dados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e3) var(--e4);
  margin: 0;
}
.licenca-fatos .largo { grid-column: span 2; }
.licenca-fatos dt,
.pessoa-dados dt {
  color: var(--fraco);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.licenca-fatos dd,
.pessoa-dados dd { margin: 3px 0 0; color: var(--texto); font-size: 13.5px; overflow-wrap: anywhere; min-width: 0; }
.pessoa-dados dd small { display: block; margin-top: 2px; color: var(--fraco); font-size: 12px; }

.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; }
.copiar {
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  text-align: left;
  cursor: copy;
  overflow-wrap: anywhere;
}
.copiar:hover { background: none; text-decoration: underline dotted; text-underline-offset: 3px; }

.licenca-aviso { margin: 0; color: var(--morno); font-size: 13px; }

.licenca-ajuste {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--e3);
  padding-top: var(--e3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.licenca-ajuste label { flex: 0 0 150px; margin: 0; }
.licenca-ajuste label input { margin-top: 4px; }

/* 💻 Os aparelhos: uma linha cada, o botão à direita. */
.aparelhos { display: grid; }
.aparelho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--e3);
  padding: 12px var(--e2);
}
.aparelho + .aparelho { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.aparelho-nome { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--e2); min-width: 0; }
.aparelho-nome b { color: var(--texto); font-size: 14px; font-weight: 500; }
.aparelho-nome .mono { color: var(--fraco); }
.aparelho-meta { grid-column: 1; color: var(--fraco); font-size: 12.5px; }
.aparelho > button { grid-column: 2; grid-row: 1 / span 2; padding: 6px 12px; font-size: 13px; }
.aparelho.solto { opacity: .65; }
.aparelhos-soltos summary { padding: var(--e2); color: var(--apagado); font-size: 13px; cursor: pointer; }
.aparelhos-soltos summary:hover { color: var(--texto); }

/* 🕐 A linha do tempo (histórico e e-mails). */
.linha-do-tempo { display: grid; margin: 0; padding: 0; list-style: none; }
.linha-do-tempo li {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--e4);
  padding: 10px var(--e2);
  font-size: 13.5px;
}
.linha-do-tempo li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.linha-do-tempo time { color: var(--fraco); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-do-tempo li > div { min-width: 0; color: var(--texto); overflow-wrap: anywhere; }
.linha-do-tempo small { display: block; margin-top: 2px; color: var(--fraco); font-size: 12px; }
.linha-do-tempo li.grave > div > span { color: var(--marca-forte); }

.pessoa-dados { padding: var(--e4); border-radius: var(--raio-g); background: var(--superficie); }
.pessoa-dados .largo { grid-column: 1 / -1; }
.pessoa-dados .nome-em-linha { margin: 4px 0 0; }
.pessoa-contato { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--e3); }
.pessoa-contato label { flex: 1 1 260px; margin: 0; }
.pessoa-banimentos h3 {
  margin: var(--e3) 0 var(--e2);
  color: var(--fraco);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dialogo textarea { width: 100%; margin-top: var(--e1); }
.dialogo .marcar { margin: 0 0 var(--e5); }

/* ── tablet ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* As pílulas na primeira linha; produto e origem juntos na segunda, e não um em cada. */
  .estados { flex-basis: 100%; }
  .clientes-linha { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 80px 16px; }
  .clientes-linha .cliente-visto,
  .clientes-titulos > span:nth-child(4) { display: none; }
}

/* ── celular ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .clientes-titulo { font-size: 20px; }
  .clientes-busca { flex: 1 1 100%; order: 3; }
  .clientes-cabeca #alternar-filtros { display: inline-flex; flex: none; padding: 6px 12px; font-size: 13px; }
  .clientes-cabeca #alternar-filtros.ligado { color: var(--texto); border-color: var(--marca); }

  /* Seis pílulas numa grade de três: duas fileiras arrumadas, nada rola de lado. */
  #aba-licencas .filtros { display: flex; flex-wrap: wrap; }
  .estados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 100%; }
  .estados button { padding: 7px 6px; }
  #aba-licencas .filtros select { display: none; flex: 1 1 100%; width: 100%; }
  #aba-licencas .filtros.abertos select { display: block; }

  .clientes-titulos { display: none; }
  .clientes-linha {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "quem quem seta"
      "lic  lic  lic"
      "apar visto visto";
    gap: var(--e2) var(--e3);
    padding: 14px var(--e2);
  }
  .cliente-quem { grid-area: quem; }
  .cliente-seta { grid-area: seta; }
  .cliente-licencas { grid-area: lic; padding-left: 48px; }
  .clientes-linha .cliente-aparelhos { grid-area: apar; padding-left: 48px; text-align: left; font-size: 12.5px; }
  .clientes-linha .cliente-visto { display: block; grid-area: visto; text-align: right; font-size: 12.5px; color: var(--fraco); }
  .so-celular { display: inline; }

  .pessoa { gap: var(--e4); }
  .pessoa-cabeca { gap: var(--e3); }

  /* ⛔ As abas da ficha NÃO viram a grade de caixas de `.abas-linha` no
   *    celular: cinco caixas com borda eram três fileiras de moldura antes da
   *    primeira licença. Continuam texto sublinhado — e quebram a linha se não
   *    couberem, sem rolar de lado. */
  .pessoa-abas.abas-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2px;
    padding-bottom: 0;
    border-bottom: 1px solid var(--borda);
  }
  .pessoa-abas.abas-linha button {
    padding: 10px 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 13.5px;
  }
  .pessoa-abas.abas-linha button.ativa {
    background: none;
    box-shadow: none;
    border-bottom-color: var(--marca);
  }
  .pessoa-titulo { flex-basis: calc(100% - 72px); }
  .pessoa-titulo h2 { font-size: 20px; }
  .pessoa-acoes { flex: 1 1 100%; }
  .pessoa-acoes button { flex: 1 1 auto; }

  .licenca { padding: var(--e3); }
  .licenca-acoes { width: 100%; }
  .licenca-acoes button { flex: 1 1 auto; }
  .licenca-fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .licenca-ajuste label { flex: 1 1 calc(50% - var(--e3)); }
  .licenca-ajuste button { flex: 1 1 auto; }

  .linha-do-tempo li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pessoa-dados { grid-template-columns: minmax(0, 1fr); padding: var(--e3); }
  .pessoa-contato button { flex: 1 1 auto; }
}

/* 🎁 "Concedendo para": a pessoa que veio da ficha, em cima do formulário de Conceder. */
.conceder-pessoa {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e4);
  padding: var(--e4);
  border: 1px solid rgba(224, 41, 74, .35);
  border-radius: 10px;
  background: var(--marca-fraca);
}
.conceder-pessoa .avatar { flex: none; }
.conceder-pessoa-texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.conceder-pessoa-rotulo { color: var(--fraco); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.conceder-pessoa-texto strong { font-size: 15px; font-weight: 600; color: var(--texto); }
.conceder-pessoa-texto small { color: var(--apagado); font-size: 12.5px; }
.conceder-pessoa-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); flex: none; }
@media (max-width: 640px) { .conceder-pessoa { flex-wrap: wrap; } .conceder-pessoa-acoes { width: 100%; } }

/* ══ 🧭 A LATERAL EM GRUPOS (23/10/2026) ═══════════════════════════════════

 *
 * 📌 Wesley: *"nosso painel de licenças hoje tem aqueles 'listões' enormes
 *    por página, eu preciso muito que isso seja mais organizado"*. Cada coisa
 *    na sua página, e as páginas em três grupos: Pessoas, Catálogo, Operação.
 */
.abas-grupo {
  margin: var(--e5) 0 var(--e2);
  padding: 0 var(--e3);
  color: var(--fraco);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.abas-grupo:first-child { margin-top: 0; }

/* O cabeçalho de uma página: título grande, uma frase, a ação principal à direita. */
.pagina-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--e5);
}
.pagina-titulo { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--texto); }
.pagina-sub { margin: 6px 0 0; max-width: 72ch; color: var(--fraco); font-size: 13px; line-height: 1.5; }

/* A página do produto pede largura: a grade de três colunas não cabe em 1180. */
.conteudo.largo { max-width: 1480px; }

/* As pílulas de estado (à venda, sem par, pausada, fora da área). */
.pilula {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  color: var(--apagado);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.pilula::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pilula.no-ar   { border-color: rgba(70, 211, 105, .35); color: var(--bom); }
.pilula.pausada { border-color: rgba(245, 181, 68, .4); color: var(--morno); }
.pilula.sem-par { border-style: dashed; color: var(--fraco); }
.pilula.material { color: var(--fraco); }
.pilula.oculto  { border-color: rgba(242, 102, 111, .4); color: var(--ruim); }

/* ══ 🛍️ A GRADE DE PRODUTOS ═════════════════════════════════════════════ */
.grade-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e5) var(--e4);
}
.gp-cartao {
  display: grid;
  /* ⚠️ Num <button>, a coluna da grade mede o TEXTO: sem isto, a capa tinha a largura do nome. */
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: stretch;
  gap: var(--e3);
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.gp-capa {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: linear-gradient(160deg, #262626, #161616 70%);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), border-color .25s ease, box-shadow .25s ease;
}
.gp-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gp-capa .pilula {
  position: absolute;
  left: 8px;
  bottom: 8px;
  border-color: transparent;
  background: rgba(10, 10, 10, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.gp-sem-capa {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  color: var(--fraco);
}
.gp-sem-capa b { font-size: 30px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .28); }
.gp-sem-capa small { font-size: 11px; }
.gp-cartao:hover .gp-capa, .gp-cartao:focus-visible .gp-capa {
  transform: translateY(-3px);
  border-color: var(--borda-forte);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}
.gp-cartao:focus-visible { outline: none; }
.gp-cartao:focus-visible .gp-capa { outline: 2px solid var(--marca); outline-offset: 2px; }
.gp-corpo { display: grid; gap: 4px; min-width: 0; }
.gp-corpo strong { font-size: 14px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-corpo > small { color: var(--fraco); font-size: 12px; }
.gp-corpo .gp-oculto { color: var(--morno); }
.gp-pronta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.gp-pronta small { color: var(--fraco); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gp-barra { flex: 1; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.gp-barra i { display: block; height: 100%; border-radius: inherit; background: var(--marca); }
.gp-barra i.cheia { background: var(--bom); }

/* ══ 📄 A PÁGINA DO PRODUTO ═════════════════════════════════════════════ */

/* O topo gruda: o "Salvar" fica sempre ao alcance. */
.editor-topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin: calc(var(--e5) * -1) calc(var(--e6) * -1) var(--e5);
  padding: var(--e4) var(--e6);
  border-bottom: 1px solid var(--borda);
  background: rgba(20, 20, 20, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.editor-voltar { flex: none; }
.editor-voltar .ico { width: 15px; height: 15px; }
.editor-identidade { display: flex; align-items: center; gap: var(--e3); min-width: 0; flex: 1; }
.editor-miniatura {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 56px;
  overflow: hidden;
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  background: #222;
  color: var(--apagado);
  font-size: 13px;
  font-weight: 600;
}
.editor-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.editor-miniatura.vazia { border-style: dashed; color: var(--marca); }
.editor-identidade h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-fatos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; color: var(--fraco); font-size: 12px; }
.editor-fatos .canais { display: inline-flex; gap: 6px; }
.editor-acoes { display: flex; align-items: center; gap: var(--e3); flex: none; }
.editor-estado { display: inline-flex; align-items: center; gap: 6px; color: var(--fraco); font-size: 12.5px; }
.editor-estado .ico { color: var(--bom); }
.editor-estado.sujo { color: var(--morno); }

.editor-corpo {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: var(--e6);
  align-items: start;
}

/* A navegação das partes: três grupos, a parte na tela acesa. */
.editor-nav {
  position: sticky;
  top: 112px;
  display: grid;
  gap: var(--e5);
}
.editor-nav-grupo { display: grid; gap: 2px; }
.editor-nav-grupo > p {
  margin: 0 0 6px;
  padding: 0 10px;
  color: var(--fraco);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.editor-nav-grupo > p small { margin-left: 4px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.editor-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--apagado);
  font-size: 13.5px;
  text-align: left;
}
.editor-nav-item .ico { width: 16px; height: 16px; color: var(--fraco); }
.editor-nav-item span { flex: 1; min-width: 0; }
.editor-nav-item:hover:not(:disabled) { background: rgba(255, 255, 255, .05); color: var(--texto); }
.editor-nav-item.ativo { background: var(--marca-fraca); color: var(--texto); font-weight: 500; }
.editor-nav-item.ativo .ico { color: var(--marca); }
.editor-nav-item:disabled { opacity: .4; }
.editor-nav-ponto { width: 7px; height: 7px; flex: none; border: 1.5px solid var(--borda-forte); border-radius: 999px; }
.editor-nav-ponto.meio  { border-color: var(--morno); background: radial-gradient(circle, var(--morno) 45%, transparent 50%); }
.editor-nav-ponto.cheio { border-color: var(--bom); background: var(--bom); }

.editor-principal { min-width: 0; }

/* O formulário e, ao lado, como o cliente vê. */
.editor-pagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--e5);
  align-items: start;
}
.editor-form { display: grid; gap: var(--e5); min-width: 0; }

.ed-secao {
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--superficie);
  scroll-margin-top: 104px;
}
.ed-cabeca { display: flex; align-items: flex-start; gap: var(--e3); margin-bottom: var(--e5); }
.ed-icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--marca-fraca);
  color: var(--marca);
}
.ed-icone .ico { width: 17px; height: 17px; }
.ed-cabeca-texto { flex: 1; min-width: 0; }
.ed-cabeca h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--texto); letter-spacing: -.01em; }
.ed-cabeca p { margin: 3px 0 0; color: var(--fraco); font-size: 12.5px; line-height: 1.45; }
.ed-subindo { flex: none; align-self: center; color: var(--morno); font-size: 12px; }

/* Um campo: rótulo e contador numa linha, o controle, a dica embaixo. */
.ed-secao .campo { margin-bottom: var(--e5); }
.ed-secao .campo:last-child { margin-bottom: 0; }
.ed-secao .campo > label, .ed-secao .campo .rotulo, .campo-topo label, .campo-topo .rotulo {
  display: block;
  margin-bottom: 6px;
  color: var(--claro, #e5e5e5);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.campo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.campo-topo label, .campo-topo .rotulo { margin-bottom: 6px; }
.ed-contador { color: var(--fraco); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ed-contador.passou { color: var(--ruim); }
.campo-dica { margin: 6px 0 0; color: var(--fraco); font-size: 12px; line-height: 1.45; }
.ed-secao input, .ed-secao select, .ed-secao textarea { font-size: 14px; }
.ed-secao input.invalido, .ed-secao textarea.invalido { border-color: var(--ruim); box-shadow: 0 0 0 3px rgba(242, 102, 111, .12); }
.ed-texto-longo { min-height: 180px; line-height: 1.6; }
.ed-secao .nota { margin-top: 0; margin-bottom: var(--e4); }

.ed-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); margin-bottom: var(--e4); }
.ed-grade .campo { margin-bottom: 0; }
.ed-grade .campo.largo { grid-column: span 2; }
.ed-grade .campo.inteiro { grid-column: 1 / -1; }

/* Vitalício | Anual */
.segmentado {
  display: inline-flex;
  width: 100%;
  padding: 3px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--elevada);
}
/*
 * ⛔ O rádio escondido herda `width: 100%` de `input` e, absoluto sem âncora, media a largura da
 *    JANELA a partir de onde estaria: em /produtos/novo, a 1536 px, os três do "Vendido como"
 *    iam até 2412 px e a página rolava para o lado (2026-10-28). A âncora é o rótulo e o rádio tem
 *    1 px — aqui, para todo seletor; antes só dois tinham o remendo (Integrações e Ofertas).
 */
.segmentado label { position: relative; flex: 1; margin: 0; cursor: pointer; }
.segmentado input { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.segmentado span {
  display: block;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--apagado);
  font-size: 13px;
  text-align: center;
  transition: background .15s ease, color .15s ease;
}
.segmentado input:checked + span { background: #1c1c1c; color: var(--texto); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.segmentado input:focus-visible + span { outline: 2px solid var(--marca); }

/* Os botões do título */
.ed-botoes { display: grid; gap: var(--e2); margin: var(--e3) 0; padding: 0; list-style: none; }
.ed-botao {
  display: grid;
  grid-template-columns: 84px minmax(0, .8fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: var(--e2);
}
.ed-botao-tipo {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 4px;
  background: #333;
  color: var(--apagado);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ed-botao.principal .ed-botao-tipo { background: var(--marca); color: #fff; }
.atalho {
  grid-column: 3 / 4;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: -2px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--info, #7fb2ff);
  font-size: 12px;
}
.atalho:hover { text-decoration: underline; background: none; }
.atalho .ico { width: 13px; height: 13px; }

button.icone { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; }
button.icone .ico { width: 15px; height: 15px; }

/* As imagens: capa em pé e banner largo, lado a lado */
.ed-imagens-topo {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
  gap: var(--e4);
  align-items: end;
  margin-bottom: var(--e5);
}
.ed-slot { display: grid; gap: var(--e2); min-width: 0; }
.ed-slot-quadro {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  background: #111;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ed-slot.capa .ed-slot-quadro { aspect-ratio: 3 / 4; }
.ed-slot.banner .ed-slot-quadro { aspect-ratio: 21 / 9; }
.ed-slot-quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-slot-quadro.vazio { border-style: dashed; background: rgba(255, 255, 255, .02); }
.ed-slot-quadro:hover, .ed-slot-quadro:focus-visible, [data-soltar].arrastando {
  border-color: var(--marca);
  background: var(--marca-fraca);
  outline: none;
}
.ed-slot-quadro:not(.vazio):hover::after {
  content: 'trocar';
  position: absolute;
  inset: auto 8px 8px auto;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  font-size: 11.5px;
}
.ed-soltar-texto { display: grid; justify-items: center; gap: 4px; padding: var(--e3); text-align: center; color: var(--fraco); }
.ed-soltar-texto .ico { width: 22px; height: 22px; margin-bottom: 4px; color: var(--apagado); }
.ed-soltar-texto strong { color: var(--apagado); font-size: 12.5px; font-weight: 500; }
.ed-soltar-texto small { font-size: 11.5px; }
.ed-slot-legenda { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); min-width: 0; }
.ed-slot-legenda strong { display: block; font-size: 13px; font-weight: 500; color: var(--texto); }
.ed-slot-legenda small { color: var(--fraco); font-size: 11.5px; }

/* As telas: miniaturas que se arrastam */
.ed-telas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e3);
  margin: var(--e3) 0 0;
  padding: 0;
  list-style: none;
}
.ed-tela { display: grid; gap: 6px; min-width: 0; border-radius: 8px; transition: opacity .15s ease, transform .15s ease; }
.ed-tela-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #111;
  cursor: grab;
}
.ed-tela-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-tela-num {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.ed-tela-tirar {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.ed-tela-tirar .ico { width: 14px; height: 14px; }
.ed-tela:hover .ed-tela-tirar, .ed-tela-tirar:focus-visible { opacity: 1; }
.ed-tela-tirar:hover { background: var(--ruim); }
.ed-tela input { padding: 6px 9px; font-size: 12.5px; }
.ed-tela.soltar {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--borda-forte);
  background: rgba(255, 255, 255, .02);
  color: var(--fraco);
  font-size: 11.5px;
  text-align: center;
  cursor: pointer;
}
.ed-tela.soltar strong { color: var(--apagado); font-size: 12.5px; font-weight: 500; }
.ed-tela.soltar .ico { width: 20px; height: 20px; color: var(--apagado); }
.ed-tela.soltar:hover, .ed-tela.soltar:focus-visible { border-color: var(--marca); background: var(--marca-fraca); outline: none; }
.ed-local { color: var(--morno); font-size: 11px; }
.arrastando { opacity: .4; }
.ed-tela.sobre .ed-tela-img, .ed-demo.sobre { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Os áudios */
.ed-demos { display: grid; gap: 6px; margin: var(--e3) 0; padding: 0; list-style: none; }
.ed-demo {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--e3);
  padding: 8px 10px 8px 4px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .15s ease, background .15s ease;
}
.ed-demo.tocando { border-color: rgba(224, 41, 74, .45); background: var(--marca-fraca); }
.ed-alca {
  display: grid;
  place-items: center;
  width: 22px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fraco);
  cursor: grab;
}
.ed-alca .ico { width: 14px; height: 14px; }
.ed-alca:hover { color: var(--texto); background: none; }
.ed-tocar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #000;
}
.ed-tocar .ico { width: 15px; height: 15px; }
.ed-tocar:hover { background: #fff; transform: scale(1.06); }
.ed-demo.tocando .ed-tocar { background: var(--marca); color: #fff; }
.ed-demo-corpo { display: grid; gap: 6px; min-width: 0; }
.ed-demo-corpo input { padding: 6px 9px; border-color: transparent; background: transparent; font-weight: 500; }
.ed-demo-corpo input:hover { border-color: var(--borda); }
.ed-demo-corpo input:focus { background: var(--elevada); }
.ed-demo-trilho { height: 3px; margin: 0 9px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.ed-demo-trilho i { display: block; width: 0; height: 100%; background: var(--marca); }
.ed-demo-info { color: var(--fraco); font-size: 11.5px; white-space: nowrap; }
/* 📦 O arquivo do material: a mesma linha do áudio, com o ícone do tipo no lugar da alça e do play. */
.ed-demo.ed-material { grid-template-columns: auto minmax(0, 1fr) auto auto; padding-left: 12px; }
.ed-material-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: rgba(255, 255, 255, .05); color: var(--apagado); }
.ed-material-ico .ico { width: 16px; height: 16px; }
.ed-material-nome { overflow: hidden; padding: 0 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.ed-soltar-largo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4);
  border: 1px dashed var(--borda-forte);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
  color: var(--fraco);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ed-soltar-largo > .ico { width: 22px; height: 22px; color: var(--apagado); }
.ed-soltar-largo strong { display: block; color: var(--apagado); font-size: 13px; font-weight: 500; }
.ed-soltar-largo small { font-size: 12px; }
.ed-soltar-largo:hover, .ed-soltar-largo:focus-visible { border-color: var(--marca); background: var(--marca-fraca); outline: none; }

/* Os vídeos */
.ed-videos { display: grid; gap: var(--e2); margin: var(--e3) 0; padding: 0; list-style: none; }
.ed-video {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--e3);
  padding: 8px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
}
.ed-video-capa {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: #111 center / cover no-repeat;
  color: #fff;
}
.ed-video-capa .ico { width: 26px; height: 26px; padding: 6px; border-radius: 999px; background: rgba(0, 0, 0, .6); }
.ed-video-capa.sem { border: 1px dashed var(--borda-forte); color: var(--fraco); }
.ed-video-capa.sem .ico { background: none; }
.ed-video-campos { display: grid; gap: 6px; min-width: 0; }
.ed-video-campos input { padding: 7px 10px; }
.ed-ordem { display: grid; gap: 4px; }
.ed-ordem button { width: 28px; height: 26px; }
.ed-ordem button:first-child .ico { transform: rotate(-90deg); }
.ed-ordem button:last-child .ico { transform: rotate(90deg); }

/* ── a prévia: como o cliente vê ──────────────────────────────────────── */
.editor-previa { position: sticky; top: 104px; display: grid; gap: var(--e4); }
.previa-caixa { padding: var(--e4); border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); }
.previa-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--e3);
  color: var(--fraco);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.previa-titulo .ico { width: 14px; height: 14px; }
.previa-loja {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 168px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(160deg, #2a2a2a, #121212);
}
.previa-loja.com-fundo { background: #111 var(--fundo) center / cover no-repeat; }
.previa-loja::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .45) 60%, rgba(0, 0, 0, .15) 100%),
              linear-gradient(0deg, rgba(0, 0, 0, .7), transparent 60%);
}
.previa-loja-texto { position: relative; display: grid; gap: 4px; padding: 14px; }
.previa-rotulo { display: inline-flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, .75); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.previa-rotulo .ico { width: 10px; height: 10px; }
.previa-loja-texto strong { color: #fff; font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.previa-loja-texto p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 11.5px; line-height: 1.35; }
.previa-loja-texto p.vazio { color: rgba(255, 255, 255, .35); font-style: italic; }
.previa-botoes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.previa-botoes span { padding: 4px 9px; border-radius: 3px; background: rgba(109, 109, 110, .7); color: #fff; font-size: 10.5px; font-weight: 600; }
.previa-botoes span.principal { background: var(--marca); }
.previa-linha { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e3); }
.previa-legenda { margin: 0; color: var(--fraco); font-size: 11.5px; line-height: 1.45; }
.previa-legenda b { color: var(--apagado); font-weight: 500; }
.previa-cartao {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 66px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(160deg, #2a2a2a, #181818);
  color: rgba(255, 255, 255, .3);
  font-size: 9px;
  font-weight: 600;
  text-align: center;
}
.previa-cartao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.5) brightness(.6); }
.previa-cartao span { padding: 4px; }
.previa-cartao i {
  position: absolute;
  top: 4px;
  left: 4px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
}
.previa-cartao i .ico { width: 9px; height: 9px; }
.previa-pronta { display: flex; align-items: baseline; justify-content: space-between; }
.previa-pronta strong { font-size: 13.5px; font-weight: 600; color: var(--texto); }
.previa-pronta span { color: var(--fraco); font-size: 12px; font-variant-numeric: tabular-nums; }
.previa-barra { height: 5px; margin: 10px 0 var(--e3); overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.previa-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--marca), var(--marca-forte)); transition: width .3s ease; }
.previa-barra i.cheia { background: var(--bom); }
.previa-lista { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.previa-lista button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding: 6px 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--apagado);
  font-size: 12.5px;
  text-align: left;
}
.previa-lista button:hover { background: rgba(255, 255, 255, .04); color: var(--texto); }
.previa-lista .ico { flex: none; width: 18px; height: 18px; padding: 3px; border: 1px solid var(--borda-forte); border-radius: 999px; color: var(--fraco); }
.previa-lista li.feito button { color: var(--fraco); }
.previa-lista li.feito .ico { border-color: transparent; background: rgba(70, 211, 105, .16); color: var(--bom); }

/* ── a barra de salvar, grudada embaixo ───────────────────────────────── */
.editor-barra {
  position: sticky;
  bottom: var(--e4);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: var(--e3);
  max-width: 760px;
  margin: var(--e5) auto 0;
  padding: 10px 10px 10px var(--e4);
  border: 1px solid var(--borda-forte);
  border-radius: 12px;
  background: rgba(32, 32, 32, .96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.editor-barra-texto { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--apagado); font-size: 13px; }
.editor-barra-texto .ico { color: var(--morno); }

.recado-criacao { margin-bottom: var(--e5); border-color: rgba(70, 211, 105, .35); }
.recado-criacao .certo { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--e2); color: var(--bom); }

/* ── telas menores ─────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .editor-pagina { grid-template-columns: minmax(0, 1fr); }
  /* A prévia sobe para cima do formulário, deitada: a loja e o "pronta" lado a lado. */
  .editor-previa { position: static; order: -1; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 1080px) {
  .editor-corpo { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  /* A navegação vira uma fileira de pílulas que rola de lado, grudada embaixo do topo. */
  .editor-nav {
    position: sticky;
    top: 86px;
    z-index: 20;
    display: flex;
    gap: 6px;
    margin: 0 calc(var(--e6) * -1);
    padding: 8px var(--e6);
    overflow-x: auto;
    border-bottom: 1px solid var(--borda);
    background: rgba(20, 20, 20, .94);
    scrollbar-width: none;
  }
  .editor-nav::-webkit-scrollbar { display: none; }
  .editor-nav-grupo { display: flex; gap: 6px; }
  .editor-nav-grupo > p { display: none; }
  .editor-nav-item { width: auto; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 999px; white-space: nowrap; }
  .editor-nav-item .editor-nav-ponto { display: none; }
}
@media (max-width: 860px) {
  .editor-topo { margin: calc(var(--e4) * -1) calc(var(--e4) * -1) var(--e4); padding: var(--e3) var(--e4); flex-wrap: wrap; }
  .editor-voltar span { display: none; }
  .editor-identidade h2 { font-size: 16px; }
  .editor-acoes { width: 100%; justify-content: space-between; }
  .editor-nav { top: 0; position: relative; margin: 0 calc(var(--e4) * -1); padding: 8px var(--e4); }
  .editor-previa { grid-template-columns: minmax(0, 1fr); }
  .ed-secao { padding: var(--e4); }
  .ed-grade { grid-template-columns: minmax(0, 1fr); }
  .ed-grade .campo.largo { grid-column: auto; }
  .ed-imagens-topo { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); }
  .ed-botao { grid-template-columns: minmax(0, 1fr) auto; }
  .ed-botao-tipo { grid-column: 1 / -1; }
  .ed-botao input { grid-column: 1 / 2; }
  .ed-botao [data-tirar-botao] { grid-column: 2; grid-row: 2 / span 2; }
  .atalho { grid-column: 1 / -1; }
  .ed-demo { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .ed-demo-info { display: none; }
  .ed-video { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .ed-ordem { display: none; }
  .editor-barra { bottom: var(--e2); }
  .grade-produtos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--e4) var(--e3); }
}

/* ══ 🔗 INTEGRAÇÕES: UMA PLATAFORMA POR VEZ (2026-10-28) ══════════════════════
 *
 * 📌 Wesley: *"Essa tela de integrações está muito complicada de se entender e mexer"*. Três
 * botões de altura fixa com o estado de cada loja; embaixo, a escolhida, sempre na mesma ordem:
 * a lista de conferência, o que fazer, o que chegou.
 *
 * ⛔ Nada muda de tamanho ao clicar: a aba escolhida ganha a cor na borda e uma sombra de
 *    dentro, nunca borda mais grossa nem letra mais pesada.
 */
.integ-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e3) var(--e5); flex-wrap: wrap; }
.integ-cabeca > div:first-child { flex: 1 1 320px; min-width: 0; }
.integ-sincronia { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.integ-sincronia small { color: var(--fraco); font-size: 12px; white-space: nowrap; }
.integ-sincronia small b { color: var(--apagado); font-weight: 500; }
#sincronia-saida:not(:empty) { margin-bottom: var(--e4); }

.plataformas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e3);
  margin: 0 0 var(--e4);
}
.plataforma {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  height: 72px;
  min-width: 0;
  padding: 0 var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--superficie);
  color: var(--texto);
  text-align: left;
}
.plataforma:hover { border-color: var(--borda-forte); background: var(--elevada); }
.plataforma[aria-selected="true"] { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); background: var(--elevada); }
.plataforma b { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.plataforma .estado-curto {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  color: var(--apagado);
  font-size: 12.5px;
}
.plataforma .estado-curto > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--borda-forte); }
.ponto.bom   { background: var(--bom); }
.ponto.falta { background: var(--morno); }
.ponto.ruim  { background: var(--ruim); }

/* A lista de conferência: o ícone, o que é, como está. */
.estado {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.estado li {
  display: grid;
  grid-template-columns: 18px minmax(150px, 210px) minmax(0, 1fr);
  gap: var(--e3);
  align-items: start;
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--borda);
}
.estado li:first-child { border-top: 0; }
.estado li > .ico { margin-top: 2px; color: var(--fraco); }
.estado li.bom > .ico   { color: var(--bom); }
.estado li.falta > .ico { color: var(--morno); }
.estado li.ruim > .ico  { color: var(--ruim); }
.estado .rotulo { color: var(--apagado); font-size: 13px; line-height: 1.45; }
.estado .valor { min-width: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.estado .valor small { display: block; margin-top: 3px; color: var(--fraco); font-size: 12.5px; line-height: 1.5; }
.estado .valor code, .estado .valor small code { font-family: var(--mono); font-size: 12.5px; color: var(--apagado); }
.estado .valor .canais { margin-top: var(--e2); }
.estado + .canais { margin-top: var(--e3); }

.copiavel { display: inline-flex; align-items: center; gap: var(--e2); flex-wrap: wrap; max-width: 100%; }
.copiavel code { font-family: var(--mono); font-size: 12.5px; color: var(--texto); overflow-wrap: anywhere; }
button.mini { padding: 3px 9px; font-size: 12px; }

/* Testar e procurar: o que é à esquerda, os campos à direita, uma linha por ferramenta. */
.integ-ferramenta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3) var(--e5);
  flex-wrap: wrap;
  padding: var(--e3) 0;
  border-top: 1px solid var(--borda);
}
.integ-ferramenta:first-of-type { border-top: 0; padding-top: 0; }
.integ-ferramenta-texto { flex: 1 1 260px; min-width: 0; }
.integ-ferramenta-texto b { display: block; font-size: 14px; font-weight: 500; }
.integ-ferramenta-texto small { display: block; margin-top: 2px; color: var(--fraco); font-size: 12.5px; line-height: 1.5; }
.integ-ferramenta-campos { display: flex; align-items: center; gap: var(--e2); flex: 0 1 auto; }
.integ-ferramenta-campos .segmentado { width: 200px; }
.integ-ferramenta-campos input[type="text"] { width: 200px; margin: 0; padding: 7px 12px; }
/* Uma altura só na linha: o seletor, o campo e o botão (36 px). */
.integ-ferramenta-campos button { flex: none; white-space: nowrap; height: 36px; box-sizing: border-box; }
.integ-ferramenta-campos input[type="text"] { height: 36px; box-sizing: border-box; }
.integ-ferramenta-campos .segmentado { height: 36px; box-sizing: border-box; }
.integ-ferramenta-campos .segmentado label { display: flex; }
.integ-ferramenta-campos .segmentado span { display: flex; align-items: center; justify-content: center; flex: 1; padding: 0 10px; }
#apple-saida:not(:empty) { margin-top: var(--e3); }

.integ-sub { margin: var(--e4) 0 var(--e2); color: var(--fraco); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cartao h2 + .integ-sub { margin-top: 0; }

@media (max-width: 720px) {
  .estado li { grid-template-columns: 18px minmax(0, 1fr); }
  .estado .valor { grid-column: 2; }
  .integ-ferramenta-campos { flex: 1 1 100%; min-width: 0; }
  /* width: 0 tira o tamanho natural do campo da conta: sem isso ele empurrava o botão para fora da tela. */
  .integ-ferramenta-campos .segmentado,
  .integ-ferramenta-campos input[type="text"] { flex: 1 1 auto; width: 0; min-width: 0; }
}
@media (max-width: 560px) {
  /* No telefone, uma loja por linha: o nome à esquerda, o estado inteiro à direita. */
  .plataformas { grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
  .plataforma { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e3); height: 48px; padding: 0 var(--e4); }
  .plataforma b { flex: none; font-size: 14px; }
  .plataforma .estado-curto { min-width: 0; }
  .integ-sincronia { flex: 1 1 100%; }
  .integ-sincronia button { flex: 1 1 auto; justify-content: center; }
}

/* ══ AS BIBLIOTECAS — a aba dos itens, dos direitos e dos planos (28/10/2026) ════
   Um cartão por item: o nome e o id, o tipo e as versões, as duas chaves (vitrine e planos),
   e a tabela de TODO caminho até ele. Os planos de assinatura embaixo. db/028, db/031. */
.formulario > .rotulo {
  display: block;
  margin-bottom: var(--e1);
  color: var(--apagado);
  font-size: 12px;
  letter-spacing: .02em;
}
.item-cartao { display: grid; gap: var(--e3); }
.item-topo { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.item-nome { min-width: 0; display: grid; gap: 2px; }
.item-nome h3 { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.item-nome .serial { overflow-wrap: anywhere; }
.item-selos { display: flex; flex-wrap: wrap; gap: var(--e2); }
.item-chaves { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.item-chave {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  color: var(--texto);
  font-size: 13px;
  cursor: pointer;
}
.item-chave input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--marca); }
.item-ordem { color: var(--fraco); font-size: 12px; }
.item-acoes { display: inline-flex; gap: var(--e2); margin-left: auto; }
.item-sub { margin: var(--e2) 0 0; color: var(--fraco); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.item-modo { display: block; }
.item-origem { display: block; color: var(--fraco); font-size: 12px; }
.item-vende { display: inline-flex; flex-wrap: wrap; gap: var(--e1); }
.item-sem-oferta { color: var(--fraco); font-size: 12.5px; margin: 0; }
.item-cartao td select { min-width: 200px; padding-top: 6px; padding-bottom: 6px; }
.item-editar { padding-top: var(--e3); border-top: 1px solid var(--borda); }
.item-form-botoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.item-form-botoes button { margin-top: 0; }
.item-direito { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--e3); }
.item-direito > label { flex: 1 1 200px; min-width: 0; }
.item-direito > button { flex: none; }
.item-tipos { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-bottom: var(--e3); }

/* As ofertas do produto, uma faixa por tipo: vitalícia, mensal, anual. */
.oferta-faixas { display: grid; gap: var(--e3); margin-bottom: var(--e4); }
.oferta-faixa { padding: var(--e3); border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo); }
.oferta-faixa.vazia { border-style: dashed; }
.oferta-faixa-topo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e3); }
.oferta-faixa-topo h3 { margin: 0; font-size: 14px; font-weight: 600; }
.oferta-faixa-topo button { margin-left: auto; }
.oferta-faixa .tabela-fora { margin-top: var(--e3); }
.segmentado.oferta-tipo { flex-wrap: wrap; margin-bottom: var(--e4); }
.segmentado.oferta-tipo label { flex: 1 1 140px; }

@media (max-width: 720px) {
  .item-acoes { margin-left: 0; }
  .item-cartao td select { min-width: 0; width: 100%; }
  .item-direito > button { flex: 1 1 100%; justify-content: center; }
}
.item-cartao td.item-produto, td.item-produto { min-width: 160px; overflow-wrap: anywhere; }

/* ══ 🗂️ AS AULAS: resumo → módulo → aula (04/11/2026) ══════════════════════
 *
 * 📌 Wesley: *"ali você não tem um breve resumo + página posterior"*. Ver `pintarAulasDoProduto`, em
 *    painel.js. As linhas arrastáveis usam a alça do editor (`.ed-alca`) e o `.arrastando` de lá.
 */
.au-migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--e4); color: var(--fraco); font-size: 13px; }
.au-migalha { padding: 2px 4px; border: 0; background: none; color: var(--apagado); font: inherit; cursor: pointer; }
.au-migalha:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; background: none; }
.au-migalha.atual { color: var(--texto); cursor: default; }

.au-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); margin: 0 0 var(--e5); }
.au-numeros div { padding: var(--e3) var(--e4); border: 1px solid var(--borda); border-radius: 8px; background: rgba(255, 255, 255, .02); }
.au-numeros b { display: block; color: var(--texto); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.au-numeros span { color: var(--fraco); font-size: 12px; }

.au-lista { display: grid; gap: 6px; margin: 0 0 var(--e4); padding: 0; list-style: none; }
.au-linha {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 56px;
  padding: 6px 10px 6px 4px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .15s ease, background .15s ease;
}
.au-linha:hover { border-color: var(--borda-forte); background: rgba(255, 255, 255, .04); }
.au-lista.sem-arrasto .au-linha { padding-left: 12px; }
.au-pos { flex: none; min-width: 2.2ch; color: var(--fraco); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.au-abrir {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  gap: var(--e3);
  min-width: 0;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.au-abrir:hover { background: none; }
.au-abrir:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.au-abrir strong { display: block; overflow: hidden; color: var(--texto); font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.au-abrir small { display: block; overflow: hidden; margin-top: 2px; color: var(--fraco); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.au-texto { min-width: 0; }
.au-capa { flex: none; width: 72px; height: 40px; border-radius: 5px; object-fit: cover; background: #000; }
.au-capa.vazia { display: grid; place-items: center; color: var(--fraco); background: rgba(255, 255, 255, .05); }
.au-capa.vazia .ico { width: 18px; height: 18px; }
.au-meta { display: flex; flex: none; gap: var(--e3); color: var(--fraco); font-size: 12px; font-variant-numeric: tabular-nums; }
.au-meta span { display: inline-flex; align-items: center; gap: 4px; }
.au-meta .ico { width: 13px; height: 13px; }
.au-acoes { display: inline-flex; flex: none; align-items: center; gap: var(--e2); }
.au-acoes .fantasma { white-space: nowrap; }
.ed-cabeca .au-acoes { align-self: center; }

.au-barra { display: flex; gap: var(--e3); margin: 0 0 var(--e4); }
.au-busca { position: relative; flex: 1; margin: 0; }
.au-busca .ico { position: absolute; top: 50%; left: 11px; width: 15px; height: 15px; margin-top: -7.5px; color: var(--fraco); pointer-events: none; }
.au-busca input { padding-left: 34px; }
.au-total { margin: 0; color: var(--fraco); font-size: 12.5px; }
.paginacao button.sobre { border-color: var(--marca); background: var(--marca-fraca); color: var(--texto); }

.au-novo { display: flex; gap: var(--e3); margin: 0; }
.au-novo input { flex: 1; }
/* 📣 os avisos de conteúdo novo (docs/13 §11) */
#au-avisos .tabela-fora { margin-top: var(--e3); }
.au-aviso-fila { display: flex; align-items: center; gap: var(--e3); margin: 0; padding: var(--e3) var(--e4); border: 1px solid var(--borda); border-radius: 8px; color: var(--texto); }
.au-aviso-fila .ico { flex: none; color: var(--fraco); }

/* ✏️ A página da aula */
.au-pagina-da-aula { display: grid; gap: var(--e5); }
.au-video { display: flex; align-items: center; gap: var(--e3); }
.au-video input { flex: 1; }
.au-rodape { display: flex; justify-content: space-between; gap: var(--e3); margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--borda); }
.ed-soltar-largo.sobre { border-color: var(--marca); background: var(--marca-fraca); }

/* ✍️ O editor de texto rico */
.rico { border: 1px solid var(--borda-forte); border-radius: 8px; background: var(--fundo); overflow: hidden; }
.rico:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-fraca); }
.rico-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--borda); background: rgba(255, 255, 255, .03); }
.rico-barra button {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--apagado);
  font-size: 13px;
  font-weight: 600;
}
.rico-barra button:hover { background: var(--elevada); color: var(--texto); }
.rico-barra button.ativo { background: var(--marca-fraca); color: var(--texto); }
.rico-barra .ico { width: 15px; height: 15px; }
.rico-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--borda-forte); }
.rico-texto { min-height: 220px; max-height: 60vh; overflow-y: auto; padding: var(--e4); color: var(--texto); font-size: 14.5px; line-height: 1.65; outline: none; }
.rico-texto:empty::before { content: attr(data-vazio); color: var(--fraco); pointer-events: none; }
.rico-texto > :first-child { margin-top: 0; }
.rico-texto p { margin: 0 0 .75em; }
.rico-texto h2 { margin: 1em 0 .4em; font-size: 19px; font-weight: 600; }
.rico-texto h3 { margin: .9em 0 .35em; font-size: 16px; font-weight: 600; }
.rico-texto ul, .rico-texto ol { margin: 0 0 .75em; padding-left: 1.5em; }
.rico-texto blockquote { margin: 0 0 .75em; padding: 6px 12px; border-left: 3px solid var(--marca); background: rgba(255, 255, 255, .03); }
.rico-texto a { color: var(--info, #7fb2ff); }

@media (max-width: 760px) {
  .au-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-linha { flex-wrap: wrap; }
  .au-meta { order: 5; width: 100%; padding-left: 56px; }
  .au-acoes { margin-left: auto; }
  .au-capa { width: 56px; height: 32px; }
}
.au-duracao { margin: 0; padding: 9px 0; color: var(--texto); font-size: 14px; font-variant-numeric: tabular-nums; }
/* 🧩 O modo HTML do editor */
.rico-html {
  display: block;
  width: 100%;
  min-height: 260px;
  max-height: 60vh;
  margin: 0;
  padding: var(--e4);
  border: 0;
  border-radius: 0;
  background: #0b0b0b;
  color: #d6e2ff;
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 12.5px;
  line-height: 1.6;
  resize: vertical;
  white-space: pre-wrap;
}
.rico-html:focus { outline: none; box-shadow: none; }
.rico.modo-html .rico-barra button:not([data-rico="html"]) { opacity: .35; pointer-events: none; }
.rico-texto img { max-width: 100%; height: auto; }
.rico-texto table { width: auto; border-collapse: collapse; }
.rico-texto td, .rico-texto th { padding: 6px 10px; border: 1px solid var(--borda-forte); }
.rico-texto iframe { display: block; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; height: auto; border-radius: 8px; }
/* 🎞️ O vídeo da aula (db/040) */
.au-video-pronto { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--e4); margin-bottom: var(--e4); }
.au-previa { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; }
.au-versoes { display: grid; align-content: start; gap: 6px; }
.au-versoes div { display: flex; justify-content: space-between; gap: var(--e3); padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px; background: rgba(255, 255, 255, .02); font-size: 13px; }
.au-versoes b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.au-versoes span { color: var(--fraco); font-variant-numeric: tabular-nums; }
.au-video-estado { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--e4); color: var(--apagado); font-size: 13px; }
.au-video-estado.erro { color: var(--ruim); }
.au-video-estado .ico { width: 15px; height: 15px; }
.au-girando { width: 14px; height: 14px; border: 2px solid var(--borda-forte); border-top-color: var(--marca); border-radius: 50%; animation: au-gira .8s linear infinite; }
@keyframes au-gira { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .au-video-pronto { grid-template-columns: 1fr; } }