/* ============================================
   TEMA DINÂMICO - CLUBE DO ANALISTA
   Cores são aplicadas via CSS Variables (custom properties)
   Ativado quando body.theme-clube-analista
   ============================================ */

/* ===========================================
   CSS VARIABLES - Cores do Clube (valores padrão)
   =========================================== */
:root {
  /* Coluna 1 (Menu) */
  --clube-col1-bg: #ffffff;
  --clube-col1-text: #333333;
  --clube-col1-text-secondary: #888888;
  --clube-col1-gradient: none;
  
  /* Coluna 2 (Central) */
  --clube-col2-bg: #ffffff;
  --clube-col2-text: #333333;
  --clube-col2-text-secondary: #888888;
  --clube-col2-gradient: none;
  
  /* Coluna 3 (Rankings) */
  --clube-col3-bg: #ffffff;
  --clube-col3-text: #333333;
  --clube-col3-text-secondary: #888888;
  --clube-col3-gradient: none;
  
  /* Accordion (Menu) */
  --clube-accordion-bg: transparent;
  --clube-accordion-bg-hover: rgba(255, 255, 255, 0.1);
  --clube-accordion-bg-active: rgba(255, 255, 255, 0.15);
  
  /* Usar gradiente? */
  --clube-usa-gradiente: 0;
  
  /* Cores derivadas automáticas */
  --clube-col1-bg-hover: rgba(0, 0, 0, 0.05);
  --clube-col3-bg-hover: rgba(0, 0, 0, 0.05);
}

/* ===========================================
   TEMA ATIVO - body.theme-clube-analista
   =========================================== */

/* BODY recebe a cor da coluna 2 (padrão Leia Astion) */
body.theme-clube-analista {
  background: var(--clube-col2-bg) !important;
  background-image: var(--clube-col2-gradient) !important;
  background-attachment: fixed !important;
  transition: background-color 0.6s ease, background 0.6s ease;
}

body.theme-clube-analista .coluna-1,
body.theme-clube-analista .coluna-3,
body.theme-clube-analista .menu-logo img,
body.theme-clube-analista .menu-usuario,
body.theme-clube-analista .menu-navegacao,
body.theme-clube-analista .rank-bloco {
  transition: all 0.6s ease;
}

/* ============================================
   COLUNA 1 - MENU LATERAL
   ============================================ */

body.theme-clube-analista .coluna-1 {
  background: var(--clube-col1-bg);
  background-image: var(--clube-col1-gradient);
  color: var(--clube-col1-text);
}

/* Logo - inverter se fundo escuro */
body.theme-clube-analista.tema-escuro-col1 .menu-logo img {
  filter: brightness(0) invert(1);
}

/* Menu Usuário */
body.theme-clube-analista .menu-usuario {
  background: transparent;
  border-color: var(--clube-col1-text);
  border-color: color-mix(in srgb, var(--clube-col1-text) 30%, transparent);
}

body.theme-clube-analista .menu-usuario p,
body.theme-clube-analista .menu-usuario a {
  color: var(--clube-col1-text) !important;
}

body.theme-clube-analista .menu-usuario a:hover {
  opacity: 0.8;
}

/* Menu Navegação - Itens */
body.theme-clube-analista .menu-item-principal,
body.theme-clube-analista .accordion-header {
  color: var(--clube-col1-text);
  background: var(--clube-accordion-bg);
  border-left: 3px solid transparent;
}

body.theme-clube-analista .menu-item-principal:hover,
body.theme-clube-analista .accordion-header:hover {
  background: var(--clube-accordion-bg-hover);
  border-left-color: var(--clube-col1-text);
}

body.theme-clube-analista .menu-item-principal.ativo,
body.theme-clube-analista .accordion-item.active .accordion-header {
  background: var(--clube-accordion-bg-active);
  border-left-color: var(--clube-col1-text);
  font-weight: 600;
}

/* Ícones do menu */
body.theme-clube-analista .menu-item-principal i,
body.theme-clube-analista .accordion-header i {
  color: var(--clube-col1-text);
  opacity: 0.85;
}

/* Accordion Content (submenu expandido) */
body.theme-clube-analista .accordion-content,
body.theme-clube-analista .accordion-body {
  background: var(--clube-accordion-bg);
}

/* Subitens do accordion - contraste automático */
body.theme-clube-analista .accordion-subitem {
  color: var(--clube-col1-text);
  background: var(--clube-accordion-bg-hover);
}

body.theme-clube-analista .accordion-subitem:hover {
  background: var(--clube-accordion-bg-active);
}

body.theme-clube-analista .accordion-subitem.ativo {
  font-weight: 600;
}

body.theme-clube-analista .accordion-subitem i {
  color: var(--clube-col1-text);
}

/* Accordion arrow */
body.theme-clube-analista .accordion-arrow {
  color: var(--clube-col1-text);
}

/* ============================================
   COLUNA 2 - CONTEÚDO CENTRAL (TRANSPARENTE)
   A cor vem do BODY, não da coluna-2
   ============================================ */

body.theme-clube-analista .coluna-2 {
  background: transparent !important;
  background-image: none !important;
  color: var(--clube-col2-text);
}

body.theme-clube-analista .conteudo-dinamico,
body.theme-clube-analista #conteudo-dinamico {
  background: transparent !important;
  color: var(--clube-col2-text);
}

/* Seção lazy do clube - transparente para mostrar cor do body */
body.theme-clube-analista .clube-analista-section {
  background: transparent !important;
}

/* Textos dentro da seção lazy herdam cor da coluna 2 */
body.theme-clube-analista .clube-analista-section h1,
body.theme-clube-analista .clube-analista-section h2,
body.theme-clube-analista .clube-analista-section h3,
body.theme-clube-analista .clube-analista-section p,
body.theme-clube-analista .clube-analista-section span {
  color: var(--clube-col2-text);
}

/* ============================================
   COLUNA 3 - RANKINGS
   ============================================ */

body.theme-clube-analista .coluna-3 {
  background: var(--clube-col3-bg);
  background-image: var(--clube-col3-gradient);
  color: var(--clube-col3-text);
}

/* Blocos de Ranking */
body.theme-clube-analista .rank-bloco {
  background: var(--clube-col3-bg-hover);
  border: 1px solid color-mix(in srgb, var(--clube-col3-text) 20%, transparent);
}

body.theme-clube-analista .rank-bloco h3,
body.theme-clube-analista .rank-bloco h2 {
  color: var(--clube-col3-text) !important;
}

/* Itens de ranking */
body.theme-clube-analista .rank-item {
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--clube-col3-text) 15%, transparent);
}

body.theme-clube-analista .rank-item:hover {
  background: var(--clube-col3-bg-hover);
}

body.theme-clube-analista .rank-item h4,
body.theme-clube-analista .rank-item p,
body.theme-clube-analista .rank-item span {
  color: var(--clube-col3-text) !important;
}

body.theme-clube-analista .rank-numero {
  background: var(--clube-col3-bg-hover);
  color: var(--clube-col3-text) !important;
  font-weight: 700;
}

/* Títulos dos rankings */
body.theme-clube-analista #rankingBestSellers h4,
body.theme-clube-analista #rankingBestSellers p,
body.theme-clube-analista #rankingBestSellers span,
body.theme-clube-analista #rankingObrasPrimas h4,
body.theme-clube-analista #rankingObrasPrimas p,
body.theme-clube-analista #rankingObrasPrimas span,
body.theme-clube-analista #rankingSagaAstion h4,
body.theme-clube-analista #rankingSagaAstion p,
body.theme-clube-analista #rankingSagaAstion span {
  color: var(--clube-col3-text) !important;
}

/* Saga Astion - Cores específicas */
body.theme-clube-analista .saga-titulo-destaque,
body.theme-clube-analista .saga-lista,
body.theme-clube-analista .saga-lista li,
body.theme-clube-analista .saga-link {
  color: var(--clube-col3-text) !important;
}

body.theme-clube-analista .saga-lista li::marker {
  color: var(--clube-col3-text) !important;
}

body.theme-clube-analista .saga-lista li:hover {
  background: var(--clube-col3-bg-hover) !important;
  color: var(--clube-col3-text) !important;
  opacity: 0.8;
}

body.theme-clube-analista .saga-link:hover {
  color: var(--clube-col3-text) !important;
  opacity: 0.8;
}

/* ============================================
   CLASSES AUXILIARES PARA DETECÇÃO DE COR
   ============================================ */

/* Aplicar quando a coluna 1 tem fundo escuro */
body.theme-clube-analista.tema-escuro-col1 .coluna-1 {
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
}

/* Aplicar quando a coluna 3 tem fundo escuro */
body.theme-clube-analista.tema-escuro-col3 .coluna-3 {
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
}

/* ============================================
   RESPONSIVO
   ============================================ */

@media (max-width: 1024px) {
  body.theme-clube-analista .coluna-1,
  body.theme-clube-analista .coluna-3 {
    transition: transform 0.3s ease, background 0.6s ease;
  }
}

@media (max-width: 768px) {
  /* Navbar mobile herda cores da coluna 1 */
  body.theme-clube-analista .navbar-mobile {
    background: var(--clube-col1-bg);
    background-image: var(--clube-col1-gradient);
    color: var(--clube-col1-text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  
  body.theme-clube-analista .navbar-mobile button,
  body.theme-clube-analista .navbar-mobile .hamburger-btn,
  body.theme-clube-analista .navbar-mobile .ranking-btn {
    color: var(--clube-col1-text);
    background: transparent;
  }

  body.theme-clube-analista .navbar-mobile .hamburger-btn i,
  body.theme-clube-analista .navbar-mobile .ranking-btn i {
    color: var(--clube-col1-text);
  }

  body.theme-clube-analista .navbar-mobile .hamburger-btn:hover,
  body.theme-clube-analista .navbar-mobile .ranking-btn:hover {
    background: var(--clube-col1-bg-hover);
  }
  
  body.theme-clube-analista .navbar-mobile .menu-logo img {
    filter: none;
  }
  
  /* Tema escuro - inverter logo para branco */
  body.theme-clube-analista.tema-escuro-col1 .navbar-mobile .menu-logo img {
    filter: brightness(0) invert(1);
  }
}

/* ============================================
   RESPONSIVO - MOBILE COMPLETO
   Garantir que o tema funcione em mobile
   ============================================ */

@media (max-width: 1024px) {
  /* Coluna 1 - Menu lateral em mobile (drawer) */
  body.theme-clube-analista .coluna-1 {
    background: var(--clube-col1-bg) !important;
    background-image: var(--clube-col1-gradient) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important;
  }

  /* Coluna 3 - Rankings em mobile (drawer) */
  body.theme-clube-analista .coluna-3 {
    background: var(--clube-col3-bg) !important;
    background-image: var(--clube-col3-gradient) !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3) !important;
  }

  /* Blocos de ranking em mobile */
  body.theme-clube-analista .rank-bloco {
    background: var(--clube-col3-bg-hover) !important;
    border: 1px solid color-mix(in srgb, var(--clube-col3-text) 20%, transparent) !important;
  }

  body.theme-clube-analista .rank-bloco h3,
  body.theme-clube-analista .rank-bloco h2 {
    color: var(--clube-col3-text) !important;
  }

  /* Itens de ranking em mobile */
  body.theme-clube-analista .rank-item {
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--clube-col3-text) 15%, transparent) !important;
  }

  body.theme-clube-analista .rank-item h4,
  body.theme-clube-analista .rank-item p,
  body.theme-clube-analista .rank-item span {
    color: var(--clube-col3-text) !important;
  }

  /* Best Sellers e Obras Primas em mobile */
  body.theme-clube-analista #rankingBestSellers h4,
  body.theme-clube-analista #rankingBestSellers p,
  body.theme-clube-analista #rankingBestSellers span,
  body.theme-clube-analista #rankingObrasPrimas h4,
  body.theme-clube-analista #rankingObrasPrimas p,
  body.theme-clube-analista #rankingObrasPrimas span {
    color: var(--clube-col3-text) !important;
  }

  body.theme-clube-analista .rank-numero {
    background: var(--clube-col3-bg-hover) !important;
    color: var(--clube-col3-text) !important;
  }

  /* Menu itens em mobile */
  body.theme-clube-analista .menu-item-principal,
  body.theme-clube-analista .accordion-header {
    color: var(--clube-col1-text) !important;
    background: transparent !important;
  }

  body.theme-clube-analista .menu-item-principal:hover,
  body.theme-clube-analista .accordion-header:hover {
    background: var(--clube-col1-bg-hover) !important;
  }

  body.theme-clube-analista .menu-item-principal.ativo,
  body.theme-clube-analista .accordion-item.active .accordion-header {
    background: var(--clube-col1-bg-hover) !important;
    border-left-color: var(--clube-col1-text) !important;
  }

  /* Ícones em mobile */
  body.theme-clube-analista .menu-item-principal i,
  body.theme-clube-analista .accordion-header i {
    color: var(--clube-col1-text) !important;
  }

  /* Menu usuário em mobile */
  body.theme-clube-analista .menu-usuario p,
  body.theme-clube-analista .menu-usuario a {
    color: var(--clube-col1-text) !important;
  }

  /* Logo em mobile - drawer menu */
  body.theme-clube-analista .coluna-1 .menu-logo img {
    filter: none !important;
  }

  /* Tema escuro - inverter logo */
  body.theme-clube-analista.tema-escuro-col1 .coluna-1 .menu-logo img {
    filter: brightness(0) invert(1) !important;
  }

  /* Submenus accordion em mobile */
  body.theme-clube-analista .accordion-content {
    background: color-mix(in srgb, var(--clube-col1-bg) 95%, #000) !important;
  }

  body.theme-clube-analista .accordion-content a,
  body.theme-clube-analista .accordion-content .submenu-item {
    color: var(--clube-col1-text) !important;
  }

  body.theme-clube-analista .accordion-content a:hover,
  body.theme-clube-analista .accordion-content .submenu-item:hover {
    background: var(--clube-col1-bg-hover) !important;
  }

  /* Accordion arrow em mobile */
  body.theme-clube-analista .accordion-arrow {
    color: var(--clube-col1-text) !important;
  }
}

/* ============================================
   SCROLLBARS CUSTOMIZADAS
   ============================================ */

body.theme-clube-analista .coluna-1::-webkit-scrollbar-thumb,
body.theme-clube-analista .coluna-3::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--clube-col1-text) 30%, transparent);
}

body.theme-clube-analista .coluna-1::-webkit-scrollbar-track,
body.theme-clube-analista .coluna-3::-webkit-scrollbar-track {
  background: transparent;
}