/* assets/css/azul_neon.css */
/* Tema AZUL NEON: fundo azul marinho, texto amarelo claro, partículas estilo canva */

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

html[data-theme="azul_neon"] {
  /* Cores base */
  --bg: #020617;          /* fundo geral */
  --bg-alt: #020617;
  --card: #050b24;        /* fundo dos cards/boards */
  --card-soft: #020617;

  /* Tipografia */
  --text: #fef9c3;        /* amarelo bem claro */
  --muted: #facc15;       /* rótulos secundários */
  --heading: #fde047;     /* títulos mais fortes */

  /* Acentos */
  --primary: #38bdf8;     /* azul claro */
  --primary-soft: rgba(56, 189, 248, .25);
  --primary-strong: #0ea5e9;
  --accent: #facc15;      /* amarelo ouro */
  --danger: #f97373;
  --success: #22c55e;

  --shadow-soft: 0 18px 60px rgba(15, 23, 42, 0.85);
}

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

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

html[data-theme="azul_neon"] {
  position: relative;
  background-color: #020617; /* base azul dark */
}

/* garante que o body não override o fundo principal */
html[data-theme="azul_neon"] body {
  background-color: transparent;
}

/* Camada de partículas estilo "canva" – bolinhas azul / roxo com blooms suaves.
   Aplica em TODAS as páginas quando o tema azul_neon está ativo. */
html[data-theme="azul_neon"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  will-change: background-position;

  background-color: #020617;
  background-image:
    /* nuvem de pontos ciano */
    radial-gradient(circle, rgba(56, 189, 248, 0.55) 1.6px, transparent 2.6px),
    /* nuvem de pontos roxos */
    radial-gradient(circle, rgba(147, 51, 234, 0.45) 1.2px, transparent 2.4px),
    /* blooms maiores fixos */
    radial-gradient(circle at 15% 18%, rgba(56, 189, 248, 0.28) 0, transparent 55%),
    radial-gradient(circle at 82% 22%, rgba(147, 51, 234, 0.26) 0, transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(34, 211, 238, 0.26) 0, transparent 55%),
    radial-gradient(circle at 68% 72%, rgba(37, 99, 235, 0.24) 0, transparent 60%);

  background-size:
    160px 160px,   /* pontos ciano */
    220px 220px,   /* pontos roxos */
    auto,
    auto,
    auto,
    auto;

  background-position:
    0 0,
    80px 60px,
    15% 18%,
    82% 22%,
    20% 80%,
    68% 72%;

  opacity: 0.34;  /* discreto para não poluir */
  animation: sc-particles-azul 60s linear infinite;
}

/* ScoreCerto recebe a mesma arte, só um pouco mais visível */
html[data-theme="azul_neon"] body.scorecerto-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  will-change: background-position;

  background-color: #020617;
  background-image:
    radial-gradient(circle, rgba(56, 189, 248, 0.65) 1.6px, transparent 2.6px),
    radial-gradient(circle, rgba(147, 51, 234, 0.55) 1.2px, transparent 2.4px),
    radial-gradient(circle at 15% 18%, rgba(56, 189, 248, 0.34) 0, transparent 55%),
    radial-gradient(circle at 82% 22%, rgba(147, 51, 234, 0.32) 0, transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(34, 211, 238, 0.32) 0, transparent 55%),
    radial-gradient(circle at 68% 72%, rgba(37, 99, 235, 0.30) 0, transparent 60%);

  background-size:
    160px 160px,
    220px 220px,
    auto,
    auto,
    auto,
    auto;

  background-position:
    0 0,
    80px 60px,
    15% 18%,
    82% 22%,
    20% 80%,
    68% 72%;

  opacity: 0.40;
  animation: sc-particles-azul 60s linear infinite;
}

/* Animação lenta das partículas (movimenta só as 2 primeiras camadas de pontos) */
@keyframes sc-particles-azul {
  from {
    background-position:
      0 0,
      80px 60px,
      15% 18%,
      82% 22%,
      20% 80%,
      68% 72%;
  }
  to {
    background-position:
      600px 360px,
      -420px 300px,
      15% 18%,
      82% 22%,
      20% 80%,
      68% 72%;
  }
}

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

html[data-theme="azul_neon"] .sidebar {
  background: var(--bg);
  border-right: 1px solid rgba(250, 204, 21, .35);
}

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

/* boards genéricos / containers tipo "neon-card" */
html[data-theme="azul_neon"] .neon-card,
html[data-theme="azul_neon"] .sc-board,
html[data-theme="azul_neon"] .sc-card {
  background:
    radial-gradient(circle at 0 0, rgba(15, 23, 42, .90) 0, #020617 55%, #020617 100%);
  border: 1px solid rgba(250, 204, 21, .45);
  box-shadow: var(--shadow-soft);
  color: var(--text);
}

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

/* Métricas da barra superior (TOTAL / ANTER / MÊS / MEU) */
html[data-theme="azul_neon"] .sc-metric-card {
  background:
    radial-gradient(circle at 10% 0, rgba(56, 189, 248, .16), transparent 60%),
    rgba(10, 16, 30, .96);
  border-color: rgba(56, 189, 248, .5);
}

html[data-theme="azul_neon"] .sc-metric-label,
html[data-theme="azul_neon"] .sc-metric-value {
  color: var(--text);
}

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

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

/* Botões padrão primários */
html[data-theme="azul_neon"] .btn-primary {
  background:
    radial-gradient(circle at 30% 0,
      #38bdf8 0,
      #0ea5e9 45%,
      #0369a1 100%);
  color: #020617;
  border: 1px solid rgba(15, 23, 42, .8);
}

/* Botões de card (Painel+ / Ver-Editar) herdam base */
html[data-theme="azul_neon"] .sc-btn-card {
  background:
    radial-gradient(circle at 30% 0,
      #38bdf8 0,
      #0ea5e9 45%,
      #0369a1 100%);
  color: #020617;
  border: 1px solid rgba(15, 23, 42, .8);
}

/* Painel+ — texto amarelo ouro claro */
html[data-theme="azul_neon"] .sc-btn-painel {
  background-image: linear-gradient(135deg, #1d4ed8, #38bdf8);
  border: 1px solid #38bdf8;
  color: #ffeaa7;
  font-weight: 700;
}

/* Ver/Editar — borda azul, texto branco */
html[data-theme="azul_neon"] .sc-btn-view {
  background: transparent;
  border: 1px solid #38bdf8;
  color: #ffffff;
  font-weight: 700;
}

/* Hover suave (sem exagero) */
html[data-theme="azul_neon"] .btn-primary:hover,
html[data-theme="azul_neon"] .sc-btn-card:hover,
html[data-theme="azul_neon"] .sc-btn-painel:hover,
html[data-theme="azul_neon"] .sc-btn-view:hover {
  filter: brightness(1.08);
}

/* Links seguem a cor de texto padrão do tema */
html[data-theme="azul_neon"] a,
html[data-theme="azul_neon"] a:visited {
  color: var(--text);
}