/* ═══════════════════════════════════════════════════════════
   JORNADA SOLAR DA NELINHA — themes.css
   Compatível com styles.css atual
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   TEMA CLARO (padrão)
   ═══════════════════════════════════════════════════════════ */
.tema-claro {
  /* Primárias */
  --cor-primaria:           #FF8C00;
  --cor-primaria-dark:      #E07B00;
  --cor-secundaria:         #FFD700;

  /* Fundos */
  --cor-fundo:              #F7F3ED;
  --cor-fundo-alt:          #EEEAE3;
  --cor-header:             #FFFFFF;
  --cor-card:               #FFFFFF;

  /* Texto */
  --cor-texto:              #1A1A1A;
  --cor-texto-alt:          #666666;
  --cor-texto-placeholder:  #BBBBBB;

  /* Bordas */
  --cor-borda:              #E5E0D8;

  /* Missão Principal */
  --cor-missao-principal-bg: #FFFBF0;

  /* Níveis */
  --cor-nivel-bronze-bg:    #FDF4E0;
  --cor-nivel-prata-bg:     #F5F5F5;
  --cor-nivel-ouro-bg:      #FFF9E6;
  --cor-nivel-diamante-bg:  #E0FFFF;

  /* Loja */
  --cor-comprado-bg:        #E8F5E9;
  --cor-comprado-texto:     #2E7D32;
  --cor-comprado-borda:     #81C784;

  /* Modal Nível Up */
  --cor-nivel-up-bg:        linear-gradient(160deg, #FFF8E7, #FFF3CC, #FFF8E7);

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════
   TEMA ESCURO
   ═══════════════════════════════════════════════════════════ */
.tema-escuro {
  /* Primárias */
  --cor-primaria:           #FFA500;
  --cor-primaria-dark:      #FF8C00;
  --cor-secundaria:         #FFD700;

  /* Fundos */
  --cor-fundo:              #121212;
  --cor-fundo-alt:          #1E1E1E;
  --cor-header:             #1A1A1A;
  --cor-card:               #242424;

  /* Texto */
  --cor-texto:              #F0F0F0;
  --cor-texto-alt:          #AAAAAA;
  --cor-texto-placeholder:  #555555;

  /* Bordas */
  --cor-borda:              #333333;

  /* Missão Principal */
  --cor-missao-principal-bg: #1A1400;

  /* Níveis */
  --cor-nivel-bronze-bg:    #2A1800;
  --cor-nivel-prata-bg:     #242424;
  --cor-nivel-ouro-bg:      #221A00;
  --cor-nivel-diamante-bg:  #002222;

  /* Loja */
  --cor-comprado-bg:        #1B3D1C;
  --cor-comprado-texto:     #81C784;
  --cor-comprado-borda:     #388E3C;

  /* Modal Nível Up */
  --cor-nivel-up-bg:        linear-gradient(160deg, #1E1600, #181000, #1E1600);

  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════
   AJUSTES DO TEMA ESCURO — componentes específicos
   ═══════════════════════════════════════════════════════════ */
.tema-escuro .card-missao-principal {
  background: linear-gradient(135deg, #2A2200, #1A1500);
  border-color: #B8860B;
}

.tema-escuro .badge-bronze   { background: #2A1800; color: #CD9A50; border-color: #8B5A2B; }
.tema-escuro .badge-prata    { background: #242424; color: #D0D0D0; border-color: #888888; }
.tema-escuro .badge-ouro     { background: #221A00; color: #FFD700; border-color: #B8860B; }
.tema-escuro .badge-diamante { background: #002222; color: #00FFFF; border-color: #008B8B; }

.tema-escuro .nivel-bronze   { background: #2A1800; color: #CD9A50; border-color: #8B5A2B; }
.tema-escuro .nivel-prata    { background: #242424; color: #D0D0D0; border-color: #888888; }
.tema-escuro .nivel-ouro     { background: #221A00; color: #FFD700; border-color: #B8860B; }
.tema-escuro .nivel-diamante { background: #002222; color: #00FFFF; border-color: #008B8B; }

.tema-escuro .filtro-tab.filtro-ativo {
  background: #2A2A2A;
  color: #FFA500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.tema-escuro .campo-input {
  background: #1E1E1E;
  border-color: #444444;
  color: #F0F0F0;
}

.tema-escuro .campo-input:focus {
  border-color: #FFA500;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.15);
}

.tema-escuro .nivel-card {
  background: #1E1E1E;
  border-color: #444444;
}

.tema-escuro .nivel-opcao input:checked ~ .nivel-card {
  border-color: #FFA500;
  background: rgba(255,165,0,0.1);
}

.tema-escuro .sub-aba.sub-aba-ativa {
  background: #FFA500;
}

.tema-escuro .titulo-item.desbloqueado {
  border-color: rgba(255,165,0,0.35);
}

.tema-escuro .titulo-item.equipado {
  border-color: #FFA500;
  background: rgba(255,165,0,0.06);
}

.tema-escuro .titulo-item.titulo-lendario {
  border-color: #B8860B;
  background: linear-gradient(135deg, rgba(255,215,0,0.06), rgba(255,140,0,0.06));
}

.tema-escuro .missao-card {
  background: #242424;
}

.tema-escuro .loja-item {
  background: #242424;
}

.tema-escuro .loja-item-destaque {
  background: linear-gradient(135deg, rgba(255,215,0,0.07), rgba(255,140,0,0.05));
  border-color: #B8860B;
}

.tema-escuro .categoria-btn {
  background: #242424;
  border-color: #444444;
  color: #AAAAAA;
}

.tema-escuro .categoria-btn.categoria-ativa {
  background: #FFA500;
  border-color: #FFA500;
  color: white;
}

.tema-escuro .inventario-item.equipado-ativo {
  border-color: #FFA500;
  background: rgba(255,165,0,0.06);
}

/* ═══════════════════════════════════════════════════════════
   TEMAS DA LOJA — Noturno Estrelado
   ═══════════════════════════════════════════════════════════ */
.tema-noturno-estrelado {
  --cor-primaria:           #7B68EE;
  --cor-primaria-dark:      #6A5ACD;
  --cor-secundaria:         #00CED1;
  --cor-fundo:              #0A0A1A;
  --cor-fundo-alt:          #12122A;
  --cor-header:             #0D0D22;
  --cor-card:               #12122A;
  --cor-texto:              #E8E8FF;
  --cor-texto-alt:          #9999CC;
  --cor-texto-placeholder:  #555577;
  --cor-borda:              #2A2A55;
  --cor-missao-principal-bg: #0D0D22;
  --cor-nivel-bronze-bg:    #1A1000;
  --cor-nivel-prata-bg:     #1A1A2A;
  --cor-nivel-ouro-bg:      #1A1500;
  --cor-nivel-diamante-bg:  #001A2A;
  --cor-comprado-bg:        #0A2A0A;
  --cor-comprado-texto:     #66BB6A;
  --cor-comprado-borda:     #2E7D32;
  --cor-nivel-up-bg:        linear-gradient(160deg, #0D0D22, #12122A, #0D0D22);
  color-scheme: dark;
}

.tema-noturno-estrelado body,
.tema-noturno-estrelado .app {
  background-image:
    radial-gradient(1px 1px at 15% 12%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 28%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 18%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 35%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 55%, rgba(200,180,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 65%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 80%, rgba(200,180,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 72%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 88%, rgba(255,255,255,0.4) 0%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════════
   TEMAS DA LOJA — Aurora
   ═══════════════════════════════════════════════════════════ */
.tema-aurora {
  --cor-primaria:           #FF6B6B;
  --cor-primaria-dark:      #EE5A5A;
  --cor-secundaria:         #FFE66D;
  --cor-fundo:              #FFF0F5;
  --cor-fundo-alt:          #FFE4EE;
  --cor-header:             #FFFFFF;
  --cor-card:               #FFFFFF;
  --cor-texto:              #2D1B2E;
  --cor-texto-alt:          #7A4A6B;
  --cor-texto-placeholder:  #C0A0B8;
  --cor-borda:              #F0C8DC;
  --cor-missao-principal-bg: #FFF5F0;
  --cor-nivel-bronze-bg:    #FFF0E0;
  --cor-nivel-prata-bg:     #F8F0F5;
  --cor-nivel-ouro-bg:      #FFFAE0;
  --cor-nivel-diamante-bg:  #F0FAFF;
  --cor-comprado-bg:        #E8F5E9;
  --cor-comprado-texto:     #2E7D32;
  --cor-comprado-borda:     #81C784;
  --cor-nivel-up-bg:        linear-gradient(160deg, #FFF0F5, #FFE4EE, #FFF0F5);
  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════
   TEMAS DA LOJA — Pôr-do-Sol
   ═══════════════════════════════════════════════════════════ */
.tema-por-do-sol {
  --cor-primaria:           #FF4500;
  --cor-primaria-dark:      #E03D00;
  --cor-secundaria:         #FF8C00;
  --cor-fundo:              #FFF5F0;
  --cor-fundo-alt:          #FFE8DC;
  --cor-header:             #FFFFFF;
  --cor-card:               #FFFFFF;
  --cor-texto:              #2A1000;
  --cor-texto-alt:          #8B4513;
  --cor-texto-placeholder:  #C08060;
  --cor-borda:              #FFCCA0;
  --cor-missao-principal-bg: #FFF8F0;
  --cor-nivel-bronze-bg:    #FFF0E0;
  --cor-nivel-prata-bg:     #F8F5F0;
  --cor-nivel-ouro-bg:      #FFF8E0;
  --cor-nivel-diamante-bg:  #F0FFFF;
  --cor-comprado-bg:        #E8F5E9;
  --cor-comprado-texto:     #2E7D32;
  --cor-comprado-borda:     #81C784;
  --cor-nivel-up-bg:        linear-gradient(160deg, #FFF5F0, #FFE8DC, #FFF5F0);
  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════
   TEMAS DA LOJA — Galáxia
   ═══════════════════════════════════════════════════════════ */
.tema-galaxia {
  --cor-primaria:           #00CED1;
  --cor-primaria-dark:      #008B8B;
  --cor-secundaria:         #7B68EE;
  --cor-fundo:              #050510;
  --cor-fundo-alt:          #0D0D22;
  --cor-header:             #080818;
  --cor-card:               #0D0D22;
  --cor-texto:              #E0E0FF;
  --cor-texto-alt:          #8888CC;
  --cor-texto-placeholder:  #444466;
  --cor-borda:              #1E1E44;
  --cor-missao-principal-bg: #080818;
  --cor-nivel-bronze-bg:    #1A0E00;
  --cor-nivel-prata-bg:     #141428;
  --cor-nivel-ouro-bg:      #141400;
  --cor-nivel-diamante-bg:  #001414;
  --cor-comprado-bg:        #0A2A0A;
  --cor-comprado-texto:     #66BB6A;
  --cor-comprado-borda:     #2E7D32;
  --cor-nivel-up-bg:        linear-gradient(160deg, #080818, #0D0D22, #080818);
  color-scheme: dark;
}

.tema-galaxia .app {
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(123,104,238,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0,206,209,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(123,104,238,0.1) 0%, transparent 50%);
}

/* ═══════════════════════════════════════════════════════════
   TEMAS DA LOJA — Arco-Íris
   ═══════════════════════════════════════════════════════════ */
.tema-arco-iris {
  --cor-primaria:           #FF1493;
  --cor-primaria-dark:      #CC0077;
  --cor-secundaria:         #00CED1;
  --cor-fundo:              #FFF5FF;
  --cor-fundo-alt:          #FFEEFC;
  --cor-header:             #FFFFFF;
  --cor-card:               #FFFFFF;
  --cor-texto:              #1A001A;
  --cor-texto-alt:          #884488;
  --cor-texto-placeholder:  #CC99CC;
  --cor-borda:              #FFAAEE;
  --cor-missao-principal-bg: #FFF0FF;
  --cor-nivel-bronze-bg:    #FFF0E8;
  --cor-nivel-prata-bg:     #F8F0FF;
  --cor-nivel-ouro-bg:      #FFFFF0;
  --cor-nivel-diamante-bg:  #F0FFFF;
  --cor-comprado-bg:        #E8F5E9;
  --cor-comprado-texto:     #2E7D32;
  --cor-comprado-borda:     #81C784;
  --cor-nivel-up-bg:        linear-gradient(160deg, #FFF5FF, #FFEEFC, #FFF5FF);
  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════
   EFEITOS VISUAIS DA LOJA
   ═══════════════════════════════════════════════════════════ */

/* ─── Brilho Solar ─── */
.efeito-brilho-solar .xp-barra-fill {
  background: linear-gradient(90deg, #FF8C00, #FFD700, #FFF8DC, #FFD700, #FF8C00);
  background-size: 200% 100%;
  animation: solar-slide 2s linear infinite;
  box-shadow: 0 0 8px rgba(255,215,0,0.5);
}

@keyframes solar-slide {
  from { background-position: 0% 0%; }
  to   { background-position: 200% 0%; }
}

.efeito-brilho-solar .nivel-badge {
  animation: solar-pulse-badge 2.5s ease-in-out infinite;
}

@keyframes solar-pulse-badge {
  0%, 100% { box-shadow: 0 2px 8px rgba(255,140,0,0.3); }
  50%       { box-shadow: 0 0 18px rgba(255,215,0,0.7), 0 0 32px rgba(255,140,0,0.3); }
}

/* ─── Estrelas Cadentes ─── */
.efeito-estrelas .app-header::after,
.efeito-estrelas .nav-inferior::before {
  content: '✦';
  position: absolute;
  font-size: 10px;
  color: rgba(255,215,0,0.6);
  animation: estrela-pisca 2s ease-in-out infinite;
  pointer-events: none;
}

.efeito-estrelas .app-header::after {
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
}

@keyframes estrela-pisca {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1.2); }
}

/* ─── Corações Flutuantes ─── */
.efeito-coracoes .card-saudacao::after {
  content: '💖';
  position: absolute;
  font-size: 14px;
  right: 16px;
  bottom: 10px;
  animation: coracao-flutua 2s ease-in-out infinite;
  opacity: 0.7;
  pointer-events: none;
}

.card-saudacao { position: relative; overflow: hidden; }

@keyframes coracao-flutua {
  0%, 100% { transform: translateY(0)   scale(1);   opacity: 0.7; }
  50%       { transform: translateY(-8px) scale(1.1); opacity: 1; }
}

/* ─── Efeito Confete (ativa partículas extras no nível up) ─── */
.efeito-confete .nivel-up-confete {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   EMBLEMAS NO AVATAR
   ═══════════════════════════════════════════════════════════ */
.emblema-lendaria .avatar-emblema {
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  border-color: #FFD700;
  box-shadow: 0 0 8px rgba(255,215,0,0.5);
  animation: emblema-brilha 2s ease-in-out infinite;
}

@keyframes emblema-brilha {
  0%, 100% { box-shadow: 0 0 6px rgba(255,215,0,0.4); }
  50%       { box-shadow: 0 0 16px rgba(255,215,0,0.8); }
}

/* ═══════════════════════════════════════════════════════════
   TRANSIÇÕES SUAVES AO TROCAR TEMA
   ═══════════════════════════════════════════════════════════ */
body,
.app,
.app-header,
.nav-inferior,
.card,
.modal,
.campo-input,
.filtro-tab,
.sub-aba,
.categoria-btn,
.loja-item,
.missao-card,
.inventario-item,
.titulo-item,
.btn-secundario,
.header-fragmentos {
  transition:
    background-color 0.35s ease,
    border-color     0.35s ease,
    color            0.35s ease,
    box-shadow       0.35s ease;
}