/* ============================================
   TEMA ESCURO - LEIA ASTION
   Cores: SteelBlue #4682B4 (70,130,180)
   Ativado apenas quando body.theme-leia-astion
   ============================================ */

/* ===========================================
   FUNDO PADRÃO - BRANCO (quando NÃO está em Leia Astion)
   =========================================== */
body:not(.theme-leia-astion):not(.leia-astion-ativo) {
  background: #ffffff !important;
}

/* ===========================================
   FUNDO AZUL GRADIENTE - Leia Astion Ativo
   =========================================== */
body.theme-leia-astion,
body.leia-astion-ativo {
  background: linear-gradient(135deg, #1a3a4a 0%, #2c5364 30%, #203a43 60%, #0f2027 100%) !important;
  background-attachment: fixed !important;
}

/* Coluna central e conteúdo dinâmico transparentes para mostrar o gradiente */
body.theme-leia-astion .coluna-2,
body.theme-leia-astion .conteudo-dinamico,
body.theme-leia-astion #conteudo-dinamico,
body.leia-astion-ativo .coluna-2,
body.leia-astion-ativo .conteudo-dinamico,
body.leia-astion-ativo #conteudo-dinamico {
  background: transparent !important;
  background-color: transparent !important;
}

/* Transições suaves para todas as mudanças de tema */
body {
  transition: background-color 0.6s ease, background 0.6s ease;
}

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

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

body.theme-leia-astion .coluna-1 {
  background: linear-gradient(180deg, #4682B4 0%, #3a6d99 100%);
  box-shadow: 4px 0 20px rgba(70, 130, 180, 0.3);
}

/* Logo - trocar para versão branca */
body.theme-leia-astion .menu-logo img {
  filter: brightness(0) invert(1);
  /* Alternativa: trocar src dinamicamente via JS */
}

/* Menu Usuário */
body.theme-leia-astion .menu-usuario {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}

body.theme-leia-astion .menu-usuario p,
body.theme-leia-astion .menu-usuario a {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.theme-leia-astion .menu-usuario a:hover {
  color: #e0f2ff !important;
}

/* Menu Navegação - Itens */
body.theme-leia-astion .menu-item-principal,
body.theme-leia-astion .accordion-header {
  color: #ffffff;
  background: transparent;
  border-left: 3px solid transparent;
}

body.theme-leia-astion .menu-item-principal:hover,
body.theme-leia-astion .accordion-header:hover {
  background: rgba(255, 255, 255, 0.15);
  border-left-color: #e0f2ff;
}

body.theme-leia-astion .menu-item-principal.ativo,
body.theme-leia-astion .accordion-item.active .accordion-header {
  background: rgba(255, 255, 255, 0.2);
  border-left-color: #ffffff;
  font-weight: 600;
}

/* Ícones do menu */
body.theme-leia-astion .menu-item-principal i,
body.theme-leia-astion .accordion-header i {
  color: #e0f2ff;
}

/* Subitens do accordion */
body.theme-leia-astion .accordion-subitem {
  color: #1a3a52;
  background: rgba(255, 255, 255, 0.9);
}

body.theme-leia-astion .accordion-subitem:hover {
  background: rgba(255, 255, 255, 1);
  color: #0d2233;
}

body.theme-leia-astion .accordion-subitem.ativo {
  background: rgba(255, 255, 255, 1);
  color: #0d2233;
  font-weight: 600;
}

body.theme-leia-astion .accordion-subitem i {
  color: #4682B4;
}

/* Accordion arrow */
body.theme-leia-astion .accordion-arrow {
  color: #e0f2ff;
}

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

body.theme-leia-astion .coluna-3 {
  background: linear-gradient(180deg, #4682B4 0%, #3a6d99 100%);
  box-shadow: -4px 0 20px rgba(70, 130, 180, 0.3);
}

/* Blocos de Ranking */
body.theme-leia-astion .rank-bloco {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

body.theme-leia-astion .rank-bloco h3,
body.theme-leia-astion .rank-bloco h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Itens de ranking */
body.theme-leia-astion .rank-item {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.theme-leia-astion .rank-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(-5px);
}

body.theme-leia-astion .rank-item h4,
body.theme-leia-astion .rank-item p,
body.theme-leia-astion .rank-item span {
  color: #ffffff !important;
}

/* Best Sellers e Obras Primas - amarelo clarinho */
body.theme-leia-astion #rankingBestSellers h4,
body.theme-leia-astion #rankingBestSellers p,
body.theme-leia-astion #rankingBestSellers span,
body.theme-leia-astion #rankingObrasPrimas h4,
body.theme-leia-astion #rankingObrasPrimas p,
body.theme-leia-astion #rankingObrasPrimas span {
  color: #fffacd !important; /* Amarelo clarinho (LemonChiffon) */
}

body.theme-leia-astion #rankingBestSellers .rank-item,
body.theme-leia-astion #rankingObrasPrimas .rank-item {
  color: #fffacd !important;
}

body.theme-leia-astion .rank-numero {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
  font-weight: 700;
}

/* Top 3 - badges especiais */
body.theme-leia-astion .rank-item:nth-child(1) .rank-numero {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #1a1a1a !important;
}

body.theme-leia-astion .rank-item:nth-child(2) .rank-numero {
  background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
  color: #1a1a1a !important;
}

body.theme-leia-astion .rank-item:nth-child(3) .rank-numero {
  background: linear-gradient(135deg, #CD7F32, #B8860B);
  color: #ffffff !important;
}

/* ============================================
   SAGA ASTION - Ranking na Coluna 3
   ============================================ */

/* Título da seção */
body.theme-leia-astion .rank-titulo,
body.theme-leia-astion #rankingSagaAstion .rank-titulo {
  color: #ffffff !important;
}

/* Título do volume destacado */
body.theme-leia-astion .saga-titulo-destaque,
body.theme-leia-astion #rankingSagaAstion .saga-titulo-destaque {
  color: #ffffff !important;
}

/* Lista de volumes */
body.theme-leia-astion .saga-lista,
body.theme-leia-astion #rankingSagaAstion .saga-lista {
  color: #ffffff !important;
}

body.theme-leia-astion .saga-lista li,
body.theme-leia-astion #rankingSagaAstion .saga-lista li {
  color: #e0f2ff !important;
}

body.theme-leia-astion .saga-lista li:hover,
body.theme-leia-astion #rankingSagaAstion .saga-lista li:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Link "Conheça a coleção completa" */
body.theme-leia-astion .saga-link,
body.theme-leia-astion #rankingSagaAstion .saga-link {
  color: #87CEEB !important;
}

body.theme-leia-astion .saga-link:hover,
body.theme-leia-astion #rankingSagaAstion .saga-link:hover {
  color: #ffffff !important;
}

/* Scrollbar customizada para colunas laterais */
body.theme-leia-astion .coluna-1::-webkit-scrollbar-track,
body.theme-leia-astion .coluna-3::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

body.theme-leia-astion .coluna-1::-webkit-scrollbar-thumb,
body.theme-leia-astion .coluna-3::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

body.theme-leia-astion .coluna-1::-webkit-scrollbar-thumb:hover,
body.theme-leia-astion .coluna-3::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* ============================================
   MOBILE - NAVBAR
   ============================================ */

@media (max-width: 768px) {
  body.theme-leia-astion .navbar-mobile {
    background: linear-gradient(90deg, #4682B4 0%, #3a6d99 100%);
    box-shadow: 0 2px 10px rgba(70, 130, 180, 0.4);
  }

  body.theme-leia-astion .navbar-mobile .hamburger-btn i,
  body.theme-leia-astion .navbar-mobile .ranking-btn i {
    color: #ffffff;
  }

  body.theme-leia-astion .navbar-mobile .menu-logo img {
    filter: brightness(0) invert(1);
  }
}

/* ============================================
   EFEITOS ESPECIAIS - GLOW
   ============================================ */

body.theme-leia-astion .coluna-1::before,
body.theme-leia-astion .coluna-3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: radial-gradient(ellipse at top, rgba(224, 242, 255, 0.1) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

body.theme-leia-astion .coluna-1 > *,
body.theme-leia-astion .coluna-3 > * {
  position: relative;
  z-index: 1;
}

/* Animação de entrada do tema */
@keyframes themeActivate {
  0% {
    opacity: 0.8;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

body.theme-leia-astion .coluna-1,
body.theme-leia-astion .coluna-3 {
  animation: themeActivate 0.6s ease forwards;
}

/* ============================================
   LEIA ASTION - Sobrescrever cores da página
   ============================================ */

/* Coluna de coleção - usar SteelBlue */
body.theme-leia-astion .coluna-colecao {
  background: rgba(70, 130, 180, 0.15) !important;
  border: 1px solid rgba(70, 130, 180, 0.2) !important;
}

body.theme-leia-astion .coluna-colecao-header {
  border-bottom: 2px solid rgba(70, 130, 180, 0.3) !important;
}

body.theme-leia-astion .coluna-colecao-header h2 {
  color: #ffffff !important;
}

/* Coluna de chat - usar SteelBlue */
body.theme-leia-astion .coluna-chat {
  background: rgba(70, 130, 180, 0.15) !important;
  border: 1px solid rgba(70, 130, 180, 0.2) !important;
}

body.theme-leia-astion .coluna-chat-header {
  border-bottom: 2px solid rgba(70, 130, 180, 0.3) !important;
}

body.theme-leia-astion .coluna-chat-header h2 {
  color: #ffffff !important;
}

/* Botões de navegação */
body.theme-leia-astion .btn-navegar-colecao,
body.theme-leia-astion .btn-navegar-chat {
  background: rgba(70, 130, 180, 0.2) !important;
  border-color: rgba(70, 130, 180, 0.6) !important;
}

body.theme-leia-astion .btn-navegar-colecao:hover,
body.theme-leia-astion .btn-navegar-chat:hover {
  background: rgba(70, 130, 180, 0.3) !important;
}

/* Mensagens do chat */
body.theme-leia-astion .chat-mensagem-autor {
  background: rgba(70, 130, 180, 0.1) !important;
  border-color: rgba(70, 130, 180, 0.3) !important;
}

body.theme-leia-astion .chat-mensagem-usuario {
  background: rgba(70, 130, 180, 0.1) !important;
  border-color: rgba(70, 130, 180, 0.6) !important;
}

/* Input de mensagem */
body.theme-leia-astion .chat-input-wrapper {
  border: 1px solid rgba(70, 130, 180, 0.4) !important;
}

/* Botão de expandir */
body.theme-leia-astion .btn-expandir {
  background: rgba(70, 130, 180, 0.1) !important;
  border-color: rgba(70, 130, 180, 0.6) !important;
}

body.theme-leia-astion .btn-expandir:hover {
  background: rgba(241, 196, 15, 0.2) !important;
}

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

@media (max-width: 1024px) {
  /* Coluna 1 - Menu lateral em mobile */
  body.theme-leia-astion .coluna-1 {
    background: linear-gradient(180deg, #4682B4 0%, #3a6d99 100%) !important;
    box-shadow: 4px 0 20px rgba(70, 130, 180, 0.3) !important;
  }

  /* Coluna 3 - Rankings em mobile */
  body.theme-leia-astion .coluna-3 {
    background: linear-gradient(180deg, #4682B4 0%, #3a6d99 100%) !important;
    box-shadow: -4px 0 20px rgba(70, 130, 180, 0.3) !important;
  }

  /* Blocos de ranking em mobile */
  body.theme-leia-astion .rank-bloco {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  body.theme-leia-astion .rank-bloco h3,
  body.theme-leia-astion .rank-bloco h2 {
    color: #ffffff !important;
  }

  /* Itens de ranking em mobile */
  body.theme-leia-astion .rank-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  body.theme-leia-astion .rank-item h4,
  body.theme-leia-astion .rank-item p,
  body.theme-leia-astion .rank-item span {
    color: #ffffff !important;
  }

  /* Best Sellers e Obras Primas em mobile */
  body.theme-leia-astion #rankingBestSellers h4,
  body.theme-leia-astion #rankingBestSellers p,
  body.theme-leia-astion #rankingBestSellers span,
  body.theme-leia-astion #rankingObrasPrimas h4,
  body.theme-leia-astion #rankingObrasPrimas p,
  body.theme-leia-astion #rankingObrasPrimas span {
    color: #fffacd !important;
  }

  body.theme-leia-astion .rank-numero {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
  }

  /* Menu itens em mobile */
  body.theme-leia-astion .menu-item-principal,
  body.theme-leia-astion .accordion-header {
    color: #ffffff !important;
    background: transparent !important;
  }

  body.theme-leia-astion .menu-item-principal:hover,
  body.theme-leia-astion .accordion-header:hover {
    background: rgba(255, 255, 255, 0.15) !important;
  }

  body.theme-leia-astion .menu-item-principal.ativo,
  body.theme-leia-astion .accordion-item.active .accordion-header {
    background: rgba(255, 255, 255, 0.2) !important;
    border-left-color: #ffffff !important;
  }

  /* Ícones em mobile */
  body.theme-leia-astion .menu-item-principal i,
  body.theme-leia-astion .accordion-header i {
    color: #e0f2ff !important;
  }

  /* Menu usuário em mobile */
  body.theme-leia-astion .menu-usuario p,
  body.theme-leia-astion .menu-usuario a {
    color: #ffffff !important;
  }

  /* Logo em mobile */
  body.theme-leia-astion .menu-logo img {
    filter: brightness(0) invert(1) !important;
  }
}