/**
 * 🎨 O TEMA DO PAINEL DE LICENÇAS — e só dele, desde 22/10/2026.
 *
 * ⭐ E, DESDE O MESMO DIA, COM A MESMA PALETA DA ÁREA DO CLIENTE. 📌 Wesley:
 *    *"Leve o mesmo visual ao painel de licenças, digo no sentido de fontes,
 *    estilo e etc. Para que ambos reflitam a mesma coisa. Diminua um pouco
 *    mais o sombreamento também, acredito que isso não é feito dessa forma no
 *    painel Netflix."* Os tokens abaixo são os de public/conta/conta.css:
 *    fundo #141414 chapado (os brilhos radiais do MakeLink saíram), Inter nos
 *    pesos 400 a 600, superfícies sem sombra, borda a 6%, raio 4. O que o
 *    texto histórico abaixo chama de "brilho", "halo" e "Outfit" já não vale.
 *
 * ⛔ **A ÁREA DO CLIENTE NÃO CARREGA MAIS ESTE ARQUIVO.** 📌 Wesley, 22/10/2026:
 *    *"cadê o gradiente, fundo mais escuro e etc? [...] Você está tentando
 *    manter dois visuais"*. Os brilhos radiais e os cartões de vidro do
 *    MakeLink brigavam com o banner sangrado ao estilo Netflix da área do
 *    cliente, que agora tem a própria paleta em public/conta/conta.css
 *    (docs/14 §3). O texto abaixo é de quando ele servia aos dois; hoje vale
 *    para o painel.
 *
 * 📌 Wesley, 12/09/2026: *"quero o mesmo estilo e temática Dark Luxury que já
 *    pedi 10x pra você, tanto no painel de downloads quanto no painel de
 *    licenças"*, e, quando perguntado o que era: *"o tema e estilo visual que
 *    quero nos painéis em si, como os do MakeLink que hoje tem layout bonito,
 *    tema de fundo legal e um visual agradável de se mexer"*.
 *
 * ⛔ **UM ARQUIVO, DOIS PAINÉIS, e é por isso que ele existe.** Cada tela tinha
 *    a própria paleta copiada, e foi assim que elas divergiram: o `conta.css`
 *    nasceu como cópia do `painel.css` e já saiu sem a guarda do `[hidden]` —
 *    um defeito que custou uma tarde. Token repetido é token que envelhece em
 *    lugares diferentes.
 *
 * ⚠️ **Carregado DEPOIS** do CSS de cada painel, de propósito: assim o que está
 *    aqui vence, sem precisar arrancar as definições antigas de dois arquivos
 *    de 800 linhas.
 *
 * ── o que foi copiado do MakeLink, e o que mudou ────────────────────────────
 *
 * Do MakeLink (src/app/globals.css), medido e não imaginado:
 *
 *   fundo        #0d0e12 com DOIS brilhos radiais fixos em cantos opostos
 *   superfície   #14151c, borda branca a 8%, raio 16, sombra 0 8px 32px
 *   campo        #1a1a24
 *   botão        cor sólida, raio 8, e um HALO da própria cor
 *   fonte        Outfit
 *
 * O que muda é só o acento: lá é violeta, aqui é o vermelho da REDKEYS. O
 * segundo brilho é âmbar — a cor que o plugin já usa — em vez do verde deles.
 */

/* A fonte do MakeLink. `display=swap` para o texto aparecer antes dela chegar. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;

  --fundo:      #141414;
  --superficie: #181818;
  --elevada:    #2f2f2f;
  --borda:      rgba(255, 255, 255, .06);
  --borda-forte:rgba(255, 255, 255, .18);

  --texto:   #ffffff;
  --apagado: #b3b3b3;
  --fraco:   #808080;

  /* ⭐ O acento é um só, e marca o que a pessoa FAZ. */
  --marca:      #e0294a;
  --marca-forte:#f43f5e;
  --marca-fraca:rgba(224, 41, 74, .14);

  /* O segundo brilho do fundo, e o dourado dos fios finos. */
  --ambar:      #f5b544;

  --bom:   #46d369;
  --morno: #f5b544;
  --ruim:  #f2666f;

  --raio:   4px;
  --raio-g: 6px;

  --sombra: none;
}

/**
 * ⛔ `[hidden]` NÃO ESCONDE sozinho quando há uma regra nossa com `display`.
 *
 * Ele é `display: none` na folha do NAVEGADOR, a de menor prioridade. Qualquer
 * `.algo { display: grid }` ganha dele. Foi assim que a portaria da área do
 * cliente continuou na tela DEPOIS do login, com a galeria montando embaixo.
 *
 * 📌 Wesley: *"após fazer o login simplesmente a página não sai dali e se abre
 *    outra coisa em baixo"*.
 */
[hidden] { display: none !important; }

/**
 * ⭐ O FUNDO, que é o que dá a sensação do MakeLink.
 *
 * Dois brilhos radiais em cantos opostos, bem diluídos, e `fixed` para eles não
 * rolarem junto com o conteúdo — a página ganha profundidade sem nenhuma imagem
 * e sem custo de renderização.
 *
 * ⚠️ 15% e 10%, não mais. Acima disso o vermelho vira névoa colorida e o texto
 *    perde contraste justamente nos cantos, onde ficam o menu e o botão de sair.
 */
body {
  background-color: var(--fundo);
  background-image: none;
  color: var(--texto);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── as superfícies ───────────────────────────────────────────────────────── */
/*
 * ⛔ `.ficha-bloco` NÃO entra aqui, e isso foi um defeito real.
 *
 * 📌 Wesley: *"esses estilos visuais parecem estar bem quebrados, não
 *    representa o visual da plataforma."* — a ficha da licença.
 *
 * O `.ficha-bloco` é uma SEÇÃO PLANA dentro do cartão `.ficha-corpo` (o painel
 * já o desenha como `display: grid`, sem fundo). Ao pô-lo na lista de
 * superfícies, cada seção virava um CARTÃO ANINHADO — com sombra e borda, mas
 * sem padding (ninguém dá padding a ele) —, e o conteúdo grudava na borda do
 * cartão de dentro. Um cartão dentro do outro, apertado. Fora da lista, a ficha
 * volta a ser um cartão só com seções separadas pelo espaço e pelos títulos.
 */
.cartao,
.cartao-porta,
.cartao-produto,
.bloco,
.resumo,
.glass {
  background-color: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}

/**
 * ⛔ A LATERAL E O TOPO SÃO TRANSPARENTES, e é isto que faz o tema parecer o do
 *    MakeLink.
 *
 *    Lá a barra é `bg-transparent` com `border-white/5`: o brilho do fundo
 *    atravessa e a página inteira parece uma coisa só. A primeira tentativa
 *    aqui pôs uma superfície semitransparente com desfoque — e a coluna da
 *    esquerda virou um bloco pesado e avermelhado, porque o brilho vermelho
 *    mora justamente naquele canto.
 *
 * 🔸 Sem sombra: elas encostam na borda da janela, e sombra ali vira uma linha
 *    escura solta. O que separa é o fio da borda.
 */
.topo {
  background-color: transparent;
  background-image: none;
  border-color: var(--borda);
  box-shadow: none;
}

/**
 * ⛔ **A LATERAL TRANSPARENTE SÓ VALE NO DESKTOP.**
 *
 * 📌 Wesley, 21/09/2026, com o print da gaveta aberta: *"Bem legível, né?"*
 *
 * Esta regra estava junto do `.topo`, sem media query, e este arquivo é
 * carregado DEPOIS do `painel.css` — então ela vencia em toda largura. No
 * desktop a lateral é uma coluna AO LADO do conteúdo, e transparente é o que
 * dá o efeito do MakeLink. No telefone ela é uma gaveta POR CIMA do conteúdo:
 * transparente, o menu ficava solto sobre a página embaçada, ilegível.
 *
 * 🔸 Medido antes do conserto: `background-color: rgba(0, 0, 0, 0)` na gaveta
 * aberta, apesar de o `painel.css` pedir `var(--superficie)`. Duas folhas de
 * estilo discordando, e a última a falar ganha.
 */
@media (min-width: 861px) {
  .lateral {
    background-color: transparent;
    background-image: none;
    border-color: var(--borda);
    box-shadow: none;
  }
}

input,
select,
textarea {
  background-color: var(--elevada);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--marca);
  outline: none;

  /* O mesmo halo do botão, mais discreto: o foco é uma resposta, não um alarme. */
  box-shadow: none;
  background-color: #3a3a3a;

}

/* ── o botão principal, com o halo da própria cor ─────────────────────────── */
.primario {
  background-color: var(--marca);
  color: #fff;
  border: none;
  border-radius: var(--raio);
  transition: background-color .18s ease, transform .18s ease;
}

.primario:hover {
  background-color: var(--marca-forte);
}

.primario:active { transform: translateY(1px); }

.fantasma {
  background-color: rgba(255, 255, 255, .04);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--apagado);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.fantasma:hover {
  background-color: rgba(255, 255, 255, .08);
  border-color: var(--borda-forte);
  color: var(--texto);
}

/* ── o selo da marca: quadrado com gradiente e halo, como o do MakeLink ───── */
.marca .selo,
.marca .chave {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background-color: var(--marca);
  color: #fff;
}

/* ── a barra de rolagem, para ela não ser a única coisa clara da tela ─────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, .15);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .28); }

/* ⚠️ A setinha do `select` é desenhada pelo sistema e sai clara no tema escuro.
 *    Trocada por um SVG embutido — sem arquivo, sem uma ida ao servidor. */
select {
  appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 1em;
}

select option { background-color: var(--elevada); color: var(--texto); }


/* ── as sombras que o painel.css ainda tinha, reduzidas ─────────────────────
 * 📌 Wesley, 22/10/2026: "Diminua um pouco mais o sombreamento também". O que
 * FLUTUA (diálogo, lista suspensa, aviso) fica com uma sombra curta, só para
 * se separar do que está embaixo; o que é PÁGINA (a ficha, a gaveta lateral)
 * não tem sombra nenhuma. Este arquivo carrega depois do painel.css, então
 * estas linhas vencem as de lá. */
.dialogo,
.escolher-lista,
.aviso { box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }

.ficha-corpo,
.lateral { box-shadow: none; }