/* assets/css/amarelo_neon.css */
/* Tema AMARELO NEON: fundo ouro dark, texto azul claro, botões amarelos */

/* ==============================
   1. VARIÁVEIS DO TEMA
   ============================== */

html[data-theme="amarelo_neon"] {
  /* Cores base */
  --bg: #1a1306;          /* fundo geral escuro quente */
  --bg-alt: #1a1306;
  --card: #221508;        /* fundo dos cards/boards */
  --card-soft: #221508;

  /* Tipografia */
  --text: #dbeafe;        /* azul claro */
  --muted: #bfdbfe;
  --heading: #e0f2fe;

  /* Acentos */
  --primary: #facc15;     /* botões amarelos */
  --primary-soft: rgba(250, 204, 21, .22);
  --primary-strong: #eab308;
  --accent: #38bdf8;      /* linhas/bordas azul claro */
  --danger: #f97316;
  --success: #22c55e;

  --shadow-soft: 0 18px 60px rgba(15, 15, 10, 0.9);

  /* Gradiente opcional para sidebar */
  --sb-bg: linear-gradient(135deg, #1a1306 0%, #3b2500 45%, #1a1306 100%);
}

/* Texto padrão do tema */
html[data-theme="amarelo_neon"] body {
  color: var(--text);
}

/* ==============================
   2. FUNDO GLOBAL + PARTÍCULAS
   (vale para TODAS as páginas
    quando o tema amarelo está ativo)
   ============================== */

html[data-theme="amarelo_neon"] {
  position: relative;
  background-color: #120a03; /* base ouro bem escuro */
}

/* evita conflito de fundo no body */
html[data-theme="amarelo_neon"] body {
  background-color: transparent;
}

/* Camada global de partículas douradas – leve para todo o tema */
html[data-theme="amarelo_neon"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  will-change: background-position;

  background-color: #120a03;
  background-image:
    /* nuvem de pontos dourados mais fortes */
    radial-gradient(circle, rgba(250, 204, 21, 0.55) 1.4px, transparent 2.6px),
    /* nuvem de pontos dourados suaves */
    radial-gradient(circle, rgba(251, 191, 36, 0.35) 1.8px, transparent 3px),
    /* manchas maiores fixas */
    radial-gradient(circle at 14% 14%, rgba(250, 204, 21, 0.26) 0, transparent 55%),
    radial-gradient(circle at 84% 22%, rgba(252, 211, 77, 0.24) 0, transparent 60%),
    radial-gradient(circle at 28% 82%, rgba(245, 158, 11, 0.22) 0, transparent 60%);

  background-size:
    150px 150px,
    230px 230px,
    auto,
    auto,
    auto;

  background-position:
    0 0,
    70px 60px,
    14% 14%,
    84% 22%,
    28% 82%;

  opacity: 0.30;
  animation: sc-particles-amarelo 65s linear infinite;
}

/* Versão um pouco mais intensa na página ScoreCerto */
html[data-theme="amarelo_neon"] body.scorecerto-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  will-change: background-position;

  background-color: #120a03;
  background-image:
    radial-gradient(circle, rgba(250, 204, 21, 0.65) 1.4px, transparent 2.6px),
    radial-gradient(circle, rgba(251, 191, 36, 0.40) 1.8px, transparent 3px),
    radial-gradient(circle at 14% 14%, rgba(250, 204, 21, 0.32) 0, transparent 55%),
    radial-gradient(circle at 84% 22%, rgba(252, 211, 77, 0.30) 0, transparent 60%),
    radial-gradient(circle at 28% 82%, rgba(245, 158, 11, 0.28) 0, transparent 60%);

  background-size:
    150px 150px,
    230px 230px,
    auto,
    auto,
    auto;

  background-position:
    0 0,
    70px 60px,
    14% 14%,
    84% 22%,
    28% 82%;

  opacity: 0.38;
  animation: sc-particles-amarelo 65s linear infinite;
}

/* Garante base da ScoreCerto (sem brigar com o ::before) */
html[data-theme="amarelo_neon"] body.scorecerto-page {
  color: var(--text);
  background-color: transparent;
  position: relative;
  z-index: 0;
  overflow-x: hidden;
}

/* Animação lenta das partículas (só 2 primeiras camadas se movem) */
@keyframes sc-particles-amarelo {
  from {
    background-position:
      0 0,
      70px 60px,
      14% 14%,
      84% 22%,
      28% 82%;
  }
  to {
    background-position:
      -520px 320px,
      420px 360px,
      14% 14%,
      84% 22%,
      28% 82%;
  }
}

/* ==============================
   3. SIDEBAR / CONTAINERS
   ============================== */

html[data-theme="amarelo_neon"] .sidebar {
  background: var(--sb-bg);
  border-right: 1px solid rgba(56, 189, 248, .4); /* azul claro */
}

html[data-theme="amarelo_neon"] .sidebar,
html[data-theme="amarelo_neon"] .sidebar * {
  color: var(--text);
}

/* BOARDS / CARDS */
html[data-theme="amarelo_neon"] .neon-card,
html[data-theme="amarelo_neon"] .sc-board,
html[data-theme="amarelo_neon"] .sc-card {
  background: radial-gradient(circle at 0 0,
              rgba(24, 16, 3, .96) 0,
              #221508 55%,
              #221508 100%);
  border: 1px solid rgba(56, 189, 248, .55); /* azul claro */
  box-shadow: var(--shadow-soft);
  color: var(--text);
}

/* Títulos dos boards e cards */
html[data-theme="amarelo_neon"] .sc-board-head h2,
html[data-theme="amarelo_neon"] .sc-card-name {
  color: var(--heading);
}

/* Métricas */
html[data-theme="amarelo_neon"] .sc-metric-label,
html[data-theme="amarelo_neon"] .sc-metric-value {
  color: var(--text);
}

/* Textos internos dos cards */
html[data-theme="amarelo_neon"] .sc-status-box-label,
html[data-theme="amarelo_neon"] .sc-status-box-value,
html[data-theme="amarelo_neon"] .sc-doc,
html[data-theme="amarelo_neon"] .sc-consultor {
  color: var(--text);
}

/* Bordas fortes em azul claro (linhas e estados dos boards) */
html[data-theme="amarelo_neon"] .sc-board .sc-board-head,
html[data-theme="amarelo_neon"] .sc-board.sc-board-ativa,
html[data-theme="amarelo_neon"] .sc-board.sc-board-rascunho,
html[data-theme="amarelo_neon"] .sc-board.sc-board-atrasado,
html[data-theme="amarelo_neon"] .sc-board.sc-board-finalizado,
html[data-theme="amarelo_neon"] .sc-board.sc-board-cancelado {
  border-color: var(--accent);
}

/* ==============================
   4. BOTÕES
   ============================== */

/* Botões principais (genéricos) */
html[data-theme="amarelo_neon"] .btn-primary,
html[data-theme="amarelo_neon"] .sc-btn-card {
  background:
    radial-gradient(circle at 30% 0,
      #facc15 0,
      #eab308 45%,
      #854d0e 100%);
  color: #0b0a08;
  border: 1px solid rgba(0, 0, 0, .7);
}

/* Painel+ – destaque um pouco mais claro */
html[data-theme="amarelo_neon"] .sc-btn-painel {
  background-image: linear-gradient(135deg, #ffdf54, #fff3a0);
  border: 1px solid #ffe259;
  color: #0f172a;
  font-weight: 700;
}

/* Ver/Editar – borda azul claro, texto escuro */
html[data-theme="amarelo_neon"] .sc-btn-view {
  background: transparent;
  border: 1px solid #9ad7ff;
  color: #000000;
  font-weight: 700;
}

/* Hover suave APENAS nos botões (p/ não pesar) */
html[data-theme="amarelo_neon"] .btn-primary:hover,
html[data-theme="amarelo_neon"] .sc-btn-card:hover,
html[data-theme="amarelo_neon"] .sc-btn-painel:hover,
html[data-theme="amarelo_neon"] .sc-btn-view:hover {
  filter: brightness(1.05);
}

/* Links seguem azul claro */
html[data-theme="amarelo_neon"] a,
html[data-theme="amarelo_neon"] a:visited {
  color: var(--text);
}