/* ============================================
   CAMINHADA PELA LIBERDADE E JUSTIÇA
   Temas Visuais
   ============================================ */

/* ============================================
   TEMA LUZ (Espiritual / Humano) - PADRÃO
   ============================================ */
body.theme-luz {
    --color-bg: #0a0a1a;
    --color-bg-secondary: rgba(15, 15, 35, 0.95);
    --color-text: #f4f0e8;
    --color-text-muted: rgba(244, 240, 232, 0.6);
    
    --color-primary: #d4a853;
    --color-primary-glow: rgba(212, 168, 83, 0.4);
    --color-secondary: #1e3a5f;
    --color-accent: #f5e6c8;
    
    --road-color-1: #d4a853;
    --road-color-2: #f5e6c8;
    --road-color-3: #d4a853;
    --road-glow: rgba(212, 168, 83, 0.5);
    
    --particle-color: #d4a853;
    --celebrity-color: #fff8e7;
    --celebrity-glow: rgba(255, 248, 231, 0.8);
}

.theme-luz .map-container {
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(30, 58, 95, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(212, 168, 83, 0.2) 0%, transparent 40%),
        linear-gradient(180deg, #0a0a1a 0%, #0f0f23 100%);
}

.theme-luz .road-path {
    stroke: url(#roadGradientLuz);
    filter: drop-shadow(0 0 20px var(--road-glow));
}

.theme-luz .city-marker {
    fill: var(--color-primary);
    filter: drop-shadow(0 0 10px var(--color-primary-glow));
}

.theme-luz .celebrity-marker {
    fill: var(--celebrity-color);
    filter: drop-shadow(0 0 30px var(--celebrity-glow));
}

.theme-luz .user-marker {
    filter: drop-shadow(0 0 8px var(--color-primary-glow));
}

/* ============================================
   TEMA TECH (Dados Vivos)
   ============================================ */
body.theme-tech {
    --color-bg: #0a0a0f;
    --color-bg-secondary: rgba(10, 10, 20, 0.95);
    --color-text: #e0e0e0;
    --color-text-muted: rgba(224, 224, 224, 0.5);
    
    --color-primary: #00d4ff;
    --color-primary-glow: rgba(0, 212, 255, 0.4);
    --color-secondary: #7c3aed;
    --color-accent: #a855f7;
    
    --road-color-1: #00d4ff;
    --road-color-2: #7c3aed;
    --road-color-3: #00d4ff;
    --road-glow: rgba(0, 212, 255, 0.5);
    
    --particle-color: #00d4ff;
    --celebrity-color: #00ff88;
    --celebrity-glow: rgba(0, 255, 136, 0.8);
}

.theme-tech .map-container {
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(124, 58, 237, 0.3) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 80%, rgba(0, 212, 255, 0.2) 0%, transparent 40%),
        linear-gradient(180deg, #0a0a0f 0%, #0f0a1a 100%);
}

/* Grid de fundo tech */
.theme-tech .map-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

.theme-tech .road-path {
    stroke: url(#roadGradientTech);
    filter: drop-shadow(0 0 15px var(--road-glow));
    stroke-dasharray: 20, 10;
    animation: roadDash 1s linear infinite;
}

@keyframes roadDash {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -30; }
}

.theme-tech .city-marker {
    fill: var(--color-primary);
    filter: drop-shadow(0 0 10px var(--color-primary-glow));
}

.theme-tech .celebrity-marker {
    fill: var(--celebrity-color);
    filter: drop-shadow(0 0 25px var(--celebrity-glow));
}

.theme-tech .user-marker {
    filter: drop-shadow(0 0 6px var(--color-primary-glow));
}

/* Conexões entre nós (efeito de rede) */
.theme-tech .connection-line {
    stroke: var(--color-primary);
    stroke-width: 1;
    opacity: 0.2;
}

/* ============================================
   TEMA POP (Social)
   ============================================ */
body.theme-pop {
    --color-bg: #1a1a2e;
    --color-bg-secondary: rgba(26, 26, 46, 0.95);
    --color-text: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.6);
    
    --color-primary: #ff6b6b;
    --color-primary-glow: rgba(255, 107, 107, 0.4);
    --color-secondary: #4ecdc4;
    --color-accent: #ffe66d;
    
    --road-color-1: #ff6b6b;
    --road-color-2: #4ecdc4;
    --road-color-3: #ffe66d;
    --road-glow: rgba(255, 107, 107, 0.4);
    
    --particle-color: #ff6b6b;
    --celebrity-color: #ffe66d;
    --celebrity-glow: rgba(255, 230, 109, 0.8);
}

.theme-pop .map-container {
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(255, 107, 107, 0.25) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, rgba(78, 205, 196, 0.25) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 230, 109, 0.15) 0%, transparent 50%),
        linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
}

.theme-pop .road-path {
    stroke: url(#roadGradientPop);
    filter: drop-shadow(0 0 25px var(--road-glow));
    stroke-width: 8;
}

.theme-pop .city-marker {
    fill: var(--color-accent);
    filter: drop-shadow(0 0 15px rgba(255, 230, 109, 0.6));
    animation: popPulse 1.5s ease-in-out infinite;
}

@keyframes popPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.theme-pop .celebrity-marker {
    fill: var(--celebrity-color);
    filter: drop-shadow(0 0 30px var(--celebrity-glow));
    animation: popBounce 0.5s ease-in-out infinite;
}

@keyframes popBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.theme-pop .user-marker {
    filter: drop-shadow(0 0 10px var(--color-primary-glow));
}

/* Confetes flutuantes */
.theme-pop .confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    animation: confettiFall 4s linear infinite;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ============================================
   Transições entre Temas
   ============================================ */
body {
    transition: 
        background-color 0.5s ease,
        color 0.5s ease;
}

body * {
    transition: 
        background-color 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease,
        fill 0.5s ease,
        stroke 0.5s ease,
        filter 0.5s ease;
}

/* ============================================
   Estilos de Partículas por Tema
   ============================================ */
.theme-luz .particle {
    background: var(--particle-color);
    box-shadow: 0 0 10px var(--color-primary-glow);
}

.theme-tech .particle {
    background: var(--particle-color);
    box-shadow: 0 0 8px var(--color-primary-glow);
    width: 3px;
    height: 3px;
}

.theme-pop .particle {
    background: var(--particle-color);
    box-shadow: 0 0 12px var(--color-primary-glow);
    width: 6px;
    height: 6px;
    border-radius: 2px;
}

/* ============================================
   Reações por Tema
   ============================================ */
.theme-luz .reaction {
    text-shadow: 0 0 20px var(--color-primary-glow);
}

.theme-tech .reaction {
    text-shadow: 0 0 15px var(--color-primary-glow);
    font-family: 'Space Mono', monospace;
}

.theme-pop .reaction {
    text-shadow: 0 0 25px var(--color-primary-glow);
    animation: reactionFloatPop 2s ease-out forwards;
}

@keyframes reactionFloatPop {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
    50% {
        transform: translateY(-50px) scale(1.3) rotate(10deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) scale(1.5) rotate(-10deg);
    }
}

/* ============================================
   Cores dos Ícones de Usuário por Tema
   ============================================ */

/* Tema Luz - tons quentes */
.theme-luz .user-icon-1 { fill: #d4a853; } /* Dourado */
.theme-luz .user-icon-2 { fill: #5b8dd9; } /* Azul sereno */
.theme-luz .user-icon-3 { fill: #7cb98a; } /* Verde suave */
.theme-luz .user-icon-4 { fill: #d4a0b9; } /* Rosa antigo */
.theme-luz .user-icon-5 { fill: #f0e6d3; } /* Branco quente */

/* Tema Tech - tons neon */
.theme-tech .user-icon-1 { fill: #00d4ff; } /* Ciano */
.theme-tech .user-icon-2 { fill: #7c3aed; } /* Roxo */
.theme-tech .user-icon-3 { fill: #00ff88; } /* Verde neon */
.theme-tech .user-icon-4 { fill: #ff00ff; } /* Magenta */
.theme-tech .user-icon-5 { fill: #ffffff; } /* Branco */

/* Tema Pop - tons vibrantes */
.theme-pop .user-icon-1 { fill: #ff6b6b; } /* Coral */
.theme-pop .user-icon-2 { fill: #4ecdc4; } /* Turquesa */
.theme-pop .user-icon-3 { fill: #95e676; } /* Lima */
.theme-pop .user-icon-4 { fill: #dda0dd; } /* Lavanda */
.theme-pop .user-icon-5 { fill: #ffe66d; } /* Amarelo */

/* ============================================
   Estilos do Header por Tema
   ============================================ */
.theme-luz .header-day {
    background: linear-gradient(135deg, var(--color-primary) 0%, #e8c276 100%);
}

.theme-tech .header-day {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    font-family: 'Space Mono', monospace;
}

.theme-pop .header-day {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    animation: headerDayPop 2s ease-in-out infinite;
}

@keyframes headerDayPop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   Botões por Tema
   ============================================ */
.theme-luz .entry-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, #e8c276 100%);
}

.theme-tech .entry-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.theme-pop .entry-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-radius: 25px;
}

/* ============================================
   Ajustes Finos
   ============================================ */

/* Seleção de estilo - indicador visual */
.style-option[data-theme="luz"] .style-option-icon::before { content: '✨'; }
.style-option[data-theme="tech"] .style-option-icon::before { content: '⚡'; }
.style-option[data-theme="pop"] .style-option-icon::before { content: '🎉'; }

/* Preview dos temas no seletor */
.style-option[data-theme="luz"] {
    border-color: #d4a853;
}

.style-option[data-theme="tech"] {
    border-color: #00d4ff;
}

.style-option[data-theme="pop"] {
    border-color: #ff6b6b;
}

.style-option[data-theme="luz"]:hover,
.style-option[data-theme="luz"].selected {
    background: rgba(212, 168, 83, 0.2);
    border-color: #d4a853;
}

.style-option[data-theme="tech"]:hover,
.style-option[data-theme="tech"].selected {
    background: rgba(0, 212, 255, 0.2);
    border-color: #00d4ff;
}

.style-option[data-theme="pop"]:hover,
.style-option[data-theme="pop"].selected {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
}