/* =========================================================
   TEMA BLACK 360 INFINITA
   ---------------------------------------------------------
   Vale só com <html data-tema="black">, que o admin liga no painel
   (Painel > Tema) e vale para todo mundo.

   Duas camadas:
   1. tema-black-cores.css — GERADO do app.css por gerar-tema-black.py.
      Converte cada cor fixa pelo papel (fundo, texto, borda, sombra).
   2. ESTE arquivo — o acabamento da Black: degradê de ouro, número em
      serifa itálica dourada, faixa no topo, logo própria. Vem depois e
      vence o gerado.

   Identidade tirada da página da Black (draisabelaxible.com.br/black-na):
   preto #0B0B0C, carvão #151417, marfim #F5F1E8, ouro #C9A24C com
   degradê #8C6A2E → #E8CF8E, cantos de 10px.

   ⚠️ Nada aqui muda TEXTO nem estrutura: o tema troca a roupa, nunca o
   conteúdo. O que não é cor é enfeite (::before/::after) — some sozinho
   quando o tema volta ao padrão.
   ========================================================= */

html[data-tema="black"]{
  color-scheme:dark;   /* barra de rolagem, select e data nativos no escuro */

  /* Variáveis de base. O gerado já resolveu o app.css; estas sobram para
     o que ele não alcança — estilo inline montado no app.js. Lá,
     var(--bordo) é sempre TEXTO e var(--navy) é sempre FUNDO. */
  --bordo:#F5F1E8;
  --bordo-2:#1C1B1F;
  --navy:#151417;
  --navy-2:#1C1B1F;
  --gold:#C9A24C;
  --gold-2:#E8CF8E;
  --gold-soft:#E8CF8E;
  --off:#0B0B0C;
  --ink:#F5F1E8;
  --muted:rgba(245,241,232,.62);
  --line:rgba(201,162,76,.16);
  --card:#151417;
  --ok:#6fcf97;
  --warn:#e2b555;
  --danger:#ff8a80;
  --shadow:0 22px 50px -22px rgba(0,0,0,.85), 0 4px 16px -8px rgba(0,0,0,.6);
  --shadow-sm:0 6px 18px -10px rgba(0,0,0,.8);
  --shadow-gold:0 14px 36px -16px rgba(201,162,76,.55);
  --radius:14px;
  --radius-lg:18px;
  --radius-sm:10px;

  /* A ponta escura era #8C6A2E: texto preto ali dava 3,9:1, e é onde o
     rótulo começa num botão largo. #A07A35 é o mesmo ouro velho, um
     tom acima — 5:1, e o degradê segue lido igual. */
  --b-ouro:linear-gradient(90deg,#A07A35 0%,#E8CF8E 52%,#C9A24C 100%);
  /* Ver app.css: ouro de texto pequeno e anel de foco, aqui no escuro. */
  --ouro-texto:#E8CF8E;
  --foco:#E8CF8E;
  --b-ouro-diag:linear-gradient(135deg,#8C6A2E 0%,#E8CF8E 48%,#C9A24C 72%,#8C6A2E 100%);
  --b-filete:linear-gradient(90deg,transparent,rgba(201,162,76,.55),transparent);
  --b-italico:"Bodoni Moda",Georgia,"Times New Roman",serif;
}

html[data-tema="black"] body{
  background:
    radial-gradient(1100px 520px at 92% -10%, rgba(201,162,76,.10), transparent 60%),
    radial-gradient(800px 420px at -8% 105%, rgba(201,162,76,.06), transparent 60%),
    #0B0B0C;
  background-attachment:fixed;
}
html[data-tema="black"] ::selection{background:rgba(201,162,76,.38); color:#F5F1E8}

/* Barra de rolagem fina e dourada, como a página da Black */
html[data-tema="black"] *{scrollbar-color:rgba(201,162,76,.35) transparent}

/* ---------------------------------------------------------
   MENU LATERAL
   --------------------------------------------------------- */
/* Sem borda nem filete na beira do menu: o cliente pediu o menu limpo
   (23/10). O contraste com o conteúdo vem só da diferença de preto. */
html[data-tema="black"] .sidebar{
  background:linear-gradient(180deg,#0B0B0C 0%,#0F0E10 100%);
  border-right:none;
}
/* A barra de rolagem do MENU some (a rolagem continua com a roda e o
   dedo). Dourada, ela virava uma segunda linha vertical ao lado da
   beira do menu. */
html[data-tema="black"] .sidebar .nav{scrollbar-width:none}
html[data-tema="black"] .sidebar .nav::-webkit-scrollbar{display:none}

/* Logo CENTRALIZADO, com o subtítulo embaixo dele. O logo da Black já
   traz "BLACK INFINITA"; o recuo de 44px do subtítulo era para a
   rosácea da logo antiga. */
html[data-tema="black"] .brand{align-items:center; text-align:center; padding:6px 8px 18px}
html[data-tema="black"] .brand-sub{color:rgba(232,207,142,.7); padding-left:0}
html[data-tema="black"] .nav a{color:rgba(245,241,232,.78)}
html[data-tema="black"] .nav a:hover{color:#F5F1E8; background:rgba(201,162,76,.08)}
html[data-tema="black"] .nav a.active{
  background:var(--b-ouro); color:#0B0B0C; font-weight:600;
  box-shadow:0 8px 22px -12px rgba(201,162,76,.7);
}
html[data-tema="black"] .nav a.active svg{color:#0B0B0C}
html[data-tema="black"] .side-foot{border-top-color:rgba(201,162,76,.14)}
html[data-tema="black"] .side-foot .avatar{background:var(--b-ouro-diag); color:#0B0B0C}

/* ---------------------------------------------------------
   BARRA DE CIMA
   --------------------------------------------------------- */
/* Flutuante (28/10/2026): bloco carvão com filete de ouro, solto das
   bordas. A forma (margem, raio, largura) vem do app.css; aqui só a cor. */
html[data-tema="black"] .topbar{
  background:rgba(21,20,23,.94);
  border:1px solid rgba(201,162,76,.24);
  box-shadow:0 16px 36px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(232,207,142,.06);
}
html[data-tema="black"] .topbar h1{color:#F5F1E8}
html[data-tema="black"] .topbar .crumb{color:rgba(245,241,232,.6)}
html[data-tema="black"] .topbar .menu-btn svg{color:#F5F1E8}
html[data-tema="black"] .topbar .menu-btn:hover{background:rgba(201,162,76,.1)}
html[data-tema="black"] .topbar .pill{background:rgba(201,162,76,.08); border-color:rgba(201,162,76,.26); color:rgba(245,241,232,.82); box-shadow:none}
html[data-tema="black"] .topbar .pill b{color:#E8CF8E}
html[data-tema="black"] .tb-anel .trilho{stroke:rgba(201,162,76,.22)}
html[data-tema="black"] .tb-anel span{color:#F5F1E8}
/* O gerador leva o vermelho de erro para ouro (ouro é "destaque" na
   Black); erro de salvar precisa continuar lendo como erro. */
html[data-tema="black"] .topbar .save-indic.erro{color:#F2B8B5}

/* ---------------------------------------------------------
   TÍTULOS — marfim com o traço dourado embaixo
   --------------------------------------------------------- */
html[data-tema="black"] .view-head h2{color:#F5F1E8}
html[data-tema="black"] .view-head h2::after{
  content:""; display:block; width:56px; height:2px; margin-top:12px;
  background:var(--b-ouro); border-radius:2px;
}
/* "Conteúdo Instagram" tem um título duplicado que some no celular;
   o traço acompanha o título que está visível. */
html[data-tema="black"] .view-head p{color:rgba(245,241,232,.66)}

/* ---------------------------------------------------------
   NÚMEROS — serifa itálica dourada, como o "03" dos cartões da Black
   --------------------------------------------------------- */
html[data-tema="black"] .stat .val,
html[data-tema="black"] .kpi .val{
  font-style:italic;
  background:var(--b-ouro); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
html[data-tema="black"] .stat .lbl,
html[data-tema="black"] .kpi .lbl{color:rgba(232,207,142,.75); letter-spacing:1.4px}

/* ---------------------------------------------------------
   CARTÕES
   --------------------------------------------------------- */
html[data-tema="black"] .card{
  background:linear-gradient(180deg,#17161A 0%,#141316 100%);
  border:1px solid rgba(201,162,76,.13);
  box-shadow:var(--shadow-sm);
}
/* Filete de ouro no alto do cartão, apagado — só aparece de perto. */
html[data-tema="black"] .card{position:relative}
html[data-tema="black"] .card::before{
  content:""; position:absolute; left:18px; right:18px; top:-1px; height:1px;
  background:var(--b-filete); pointer-events:none; opacity:.8;
}
html[data-tema="black"] .stat:hover{box-shadow:0 18px 40px -20px rgba(201,162,76,.35)}

/* ---------------------------------------------------------
   HERÓI DA HOME
   --------------------------------------------------------- */
html[data-tema="black"] .hero{
  background:
    radial-gradient(110% 130% at 92% -25%, rgba(232,207,142,.22), transparent 55%),
    radial-gradient(70% 90% at 0% 120%, rgba(140,106,46,.25), transparent 60%),
    linear-gradient(120deg,#121114 0%,#0B0B0C 100%);
  border:1px solid rgba(201,162,76,.28);
  color:#F5F1E8;
}
/* Uma só trama no herói: a rosácea original, que já é o desenho da
   casa. A marca d'água do símbolo que existia aqui por cima dela se
   somava e parecia duplicado. */
html[data-tema="black"] .hero .rosacea{opacity:.18}
html[data-tema="black"] .hero .eyebrow{color:#E8CF8E}
html[data-tema="black"] .hero .eyebrow::before{
  content:""; width:22px; height:1px; background:var(--b-ouro); display:inline-block;
}
html[data-tema="black"] .hero p{color:rgba(245,241,232,.74)}
/* No celular o herói é quase todo texto: a trama passava por trás do
   parágrafo e dos botões, e no preto o dourado sujava a leitura. Fica
   só como textura, bem apagada. */
@media (max-width:640px){
  html[data-tema="black"] .hero .rosacea{opacity:.07}
}

/* ---------------------------------------------------------
   BOTÕES
   --------------------------------------------------------- */
html[data-tema="black"] .btn{border-radius:10px}
html[data-tema="black"] .btn-gold{
  background:var(--b-ouro); color:#0B0B0C; font-weight:700;
  border:1px solid rgba(0,0,0,.14);
  box-shadow:0 12px 30px -14px rgba(201,162,76,.65);
}
html[data-tema="black"] .btn-gold:hover{filter:brightness(1.08)}
/* O "assistir" do Curso era BRANCO (padrão de streaming). Na Black, o
   botão principal de cada tela é o de ouro. */
html[data-tema="black"] .btn-play,
html[data-tema="black"] .btn-play:hover{
  background:var(--b-ouro); color:#0B0B0C;
  box-shadow:0 14px 34px -14px rgba(201,162,76,.6);
}
html[data-tema="black"] .btn-info{background:rgba(245,241,232,.1); border:1px solid rgba(201,162,76,.28)}
html[data-tema="black"] .btn-ghost{
  background:transparent; color:#F5F1E8; border:1px solid rgba(201,162,76,.32);
}
html[data-tema="black"] .btn-ghost:hover{background:rgba(201,162,76,.08); border-color:#C9A24C}

/* ---------------------------------------------------------
   CAMPOS
   --------------------------------------------------------- */
html[data-tema="black"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-tema="black"] select,
html[data-tema="black"] textarea{
  background-color:#1C1B1F; color:#F5F1E8;
  border-color:rgba(201,162,76,.22);
}
html[data-tema="black"] input::placeholder,
html[data-tema="black"] textarea::placeholder{color:rgba(245,241,232,.35)}
html[data-tema="black"] input:focus,
html[data-tema="black"] select:focus,
html[data-tema="black"] textarea:focus{
  border-color:#C9A24C; box-shadow:0 0 0 4px rgba(201,162,76,.16);
}
html[data-tema="black"] input[type=range]{accent-color:#C9A24C}
html[data-tema="black"] input[type=checkbox],
html[data-tema="black"] input[type=radio]{accent-color:#C9A24C}

/* ---------------------------------------------------------
   LOGIN
   --------------------------------------------------------- */
html[data-tema="black"] .login-tela{
  background:
    radial-gradient(90% 70% at 85% 0%, rgba(201,162,76,.16), transparent 60%),
    radial-gradient(80% 70% at 0% 100%, rgba(140,106,46,.14), transparent 60%),
    #0B0B0C;
}
html[data-tema="black"] .login-fundo span{border-color:rgba(201,162,76,.12)}
html[data-tema="black"] .login-shell{border:1px solid rgba(201,162,76,.2)}
html[data-tema="black"] .login-aside{
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(201,162,76,.18), transparent 55%),
    linear-gradient(160deg,#151417 0%,#0B0B0C 100%);
}
html[data-tema="black"] .login-aside::before{
  border-color:rgba(201,162,76,.22);
  box-shadow:0 0 0 62px rgba(201,162,76,.05), 0 0 0 134px rgba(201,162,76,.03);
}
html[data-tema="black"] .la-meio h2{color:#F5F1E8}
html[data-tema="black"] .la-itens .tick{background:rgba(201,162,76,.16)}
html[data-tema="black"] .login-cartao{background:#121114}
html[data-tema="black"] .login-titulo{color:#F5F1E8}
html[data-tema="black"] .login-passo label{color:rgba(245,241,232,.82)}
html[data-tema="black"] .login-passo input{background:#1C1B1F; color:#F5F1E8; border-color:rgba(201,162,76,.22)}
html[data-tema="black"] .login-eyebrow,
html[data-tema="black"] .login-kicker{color:#E8CF8E}
/* A logo da Black é mais larga que a de sempre (2,6:1 contra 3,8:1) e
   traz respiro próprio no desenho: precisa de mais largura para o texto
   ficar do mesmo tamanho. */
html[data-tema="black"] .la-logo{width:250px; max-width:72%}
html[data-tema="black"] .login-marca-topo img{width:230px; max-width:70vw}
/* O SVG da Black traz respiro próprio em volta do desenho (viewBox com
   -40 de margem): a 200px de largura são ~15px em cada lado. A margem
   negativa tira o respiro VERTICAL — era ele que empurrava o menu para
   baixo e fazia a rolagem aparecer. Os lados ficam iguais, então o
   centro continua sendo o centro. */
html[data-tema="black"] .brand-logo{width:200px; margin:-14px auto -12px}

/* ---------------------------------------------------------
   DETALHES
   --------------------------------------------------------- */
/* Toast e modais: carvão com borda de ouro */
html[data-tema="black"] .toast{background:#151417; color:#F5F1E8; border:1px solid rgba(201,162,76,.35)}

/* Barra de progresso em ouro */
html[data-tema="black"] .bar > span,
html[data-tema="black"] .progress > span,
html[data-tema="black"] .prog > span{background:var(--b-ouro)}

/* Pílula de filtro selecionada (Instagram, Comunidade): ouro, texto preto */
html[data-tema="black"] .ct-pills button.sel,
html[data-tema="black"] .ct-tabs button.active{
  background:var(--b-ouro); color:#0B0B0C; border-color:transparent;
}
html[data-tema="black"] .ct-pills button.sel span{color:#0B0B0C; opacity:.7}

/* Ícones do Acesso rápido: cada um vinha com a cor de uma área
   (marinho, bordô, verde) em estilo inline — por isso o !important. Na
   Black viram todos ouro sobre carvão, como os ícones da página. */
html[data-tema="black"] .qic{
  background:linear-gradient(135deg,rgba(201,162,76,.22),rgba(201,162,76,.06)) !important;
  border:1px solid rgba(201,162,76,.32); color:#E8CF8E;
}

/* Avatar do Perfil: o fundo é a cor sorteada pelo nome (inline), então
   o texto não pode ser o preto que serve para o ouro. */
html[data-tema="black"] .perfil-avatar{color:#F5F1E8; box-shadow:0 0 0 2px #0B0B0C, 0 0 0 3px rgba(201,162,76,.55)}

/* O vídeo continua em fundo preto puro — é o que o olho espera */
html[data-tema="black"] video{background:#000}

@media (prefers-reduced-motion:reduce){
  html[data-tema="black"] .nav a.active{box-shadow:none}
}

/* ---------------------------------------------------------
   POLIMENTO (28/10/2026)
   --------------------------------------------------------- */
/* O botão principal virava PRETO sobre fundo PRETO (o gerador mapeia
   o marinho para #0B0B0C, que é o fundo da página): sumia, sobrava só
   o texto solto. Ganha o carvão de cartão e um filete dourado. */
html[data-tema="black"] .btn-primary{
  background:#1C1B1F; color:#F5F1E8; border:1px solid rgba(232,207,142,.45);
}
html[data-tema="black"] .btn-primary:hover{border-color:rgba(232,207,142,.8)}
html[data-tema="black"] .toast-acao{background:rgba(232,207,142,.14); color:#E8CF8E}
html[data-tema="black"] .dre-result .rv.vazio{color:rgba(245,241,232,.5)}
html[data-tema="black"] ::selection{background:rgba(201,162,76,.35)}
html[data-tema="black"] input, html[data-tema="black"] textarea{caret-color:#E8CF8E}
html[data-tema="black"] .perfil-avatar{color:#F5F1E8}