/**
 * PROPUESTA NAVIDAD 3: NORDIC FROST
 * ===================================
 * Tema minimalista escandinavo con toques naturales
 * Paleta: Blanco nieve, verde bosque, madera natural
 * Inspiracion: Navidad nordica, bosques de pinos, hygge
 */

:root {
    /* Colores principales - Nordico Natural */
    --primary-color: #2d5a27;
    --secondary-color: #8b4513;
    --bg-dark: #0f1a0f;
    --bg-darker: #080d08;
    --bg-light: #1a2a1a;
    --text-light: #f5f5f0;
    --text-gold: #d4af37;
    --border-color: #3d7a37;
    --btn-color: #2d5a27;
    --btn-hover: #3d7a37;

    /* Colores adicionales Nordic */
    --forest-green: #2d5a27;
    --pine-dark: #1a3a1a;
    --snow-white: #fafafa;
    --cream-white: #f5f5f0;
    --wood-brown: #8b4513;
    --copper-accent: #b87333;
    --berry-red: #8b0000;
}

/* Fondo con degradado verde bosque profundo */
body {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(45, 90, 39, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #080d08 0%, #0f1a0f 40%, #1a2a1a 100%);
}

/* Contenedor principal con estilo organico */
.main-container {
    border-left: 2px solid rgba(61, 122, 55, 0.4);
    border-right: 2px solid rgba(61, 122, 55, 0.4);
    box-shadow:
        0 0 40px rgba(45, 90, 39, 0.15),
        0 0 80px rgba(0, 0, 0, 0.3);
}

/* Header con textura de madera sutil */
.main-header {
    background:
        linear-gradient(180deg, rgba(8,13,8,0.98) 0%, rgba(15,26,15,0.95) 100%);
    border-bottom: 2px solid rgba(61, 122, 55, 0.5);
    box-shadow:
        0 2px 15px rgba(45, 90, 39, 0.2),
        inset 0 -1px 0 rgba(139, 69, 19, 0.2);
}

/* Links del menu con brillo natural */
.main-nav a.active,
.main-nav a:hover {
    color: #f5f5f0;
    text-shadow:
        0 0 8px rgba(245, 245, 240, 0.6),
        0 0 15px rgba(61, 122, 55, 0.4);
}

/* Hero banner con velo de bosque */
.hero-banner::after {
    background:
        linear-gradient(to bottom, transparent 50%, rgba(15, 26, 15, 0.85) 75%, rgba(8, 13, 8, 1) 100%),
        linear-gradient(to top, rgba(45, 90, 39, 0.1) 0%, transparent 30%);
}

/* Cajas con estilo cabana nordica */
.ranking-box,
.login-box,
.discord-box,
.game-description,
.server-info-box,
.register-form-box,
.communities-box,
.server-stats-container {
    background:
        linear-gradient(175deg, rgba(26, 42, 26, 0.95) 0%, rgba(15, 26, 15, 0.97) 100%);
    border: 2px solid rgba(61, 122, 55, 0.5);
    box-shadow:
        0 5px 25px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(245, 245, 240, 0.05),
        inset 0 0 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: visible;
}

/* ============================================
   DECORACIONES NAVIDEÑAS - MÓDULOS LATERALES
   ============================================ */

/* Triangulo decorativo inferior - borde (colores Nordic) */
.ranking-box::before {
    content: '';
    position: absolute;
    bottom: -71px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 141px solid transparent;
    border-right: 141px solid transparent;
    border-top: 71px solid rgba(61, 122, 55, 0.5);
    z-index: 0;
}

/* Triangulo decorativo inferior - relleno (colores Nordic) */
.ranking-box::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 140px solid transparent;
    border-right: 140px solid transparent;
    border-top: 70px solid rgba(21, 35, 21, 0.95);
    z-index: 1;
}

/* Estrella decorativa para login-box */
.login-box::before {
    content: '⭐';
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 14px;
    z-index: 10;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.6));
}

.login-box::after {
    content: '⭐';
    position: absolute;
    top: -10px;
    right: 10px;
    font-size: 14px;
    z-index: 10;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.6));
}

/* Copo de nieve para discord-box */
.discord-box::before {
    content: '❄';
    position: absolute;
    top: -8px;
    left: 10px;
    font-size: 16px;
    color: rgba(245, 245, 240, 0.8);
    text-shadow: 0 0 8px rgba(245, 245, 240, 0.5);
    z-index: 10;
}

.discord-box::after {
    content: '❄';
    position: absolute;
    top: -8px;
    right: 10px;
    font-size: 16px;
    color: rgba(245, 245, 240, 0.8);
    text-shadow: 0 0 8px rgba(245, 245, 240, 0.5);
    z-index: 10;
}

/* Arbolito para communities-box */
.communities-box::before {
    content: '🎄';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    z-index: 10;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

/* Pino para register-form-box */
.register-form-box::before {
    content: '🌲';
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 14px;
    z-index: 10;
}

.register-form-box::after {
    content: '🌲';
    position: absolute;
    top: -10px;
    right: 10px;
    font-size: 14px;
    z-index: 10;
}

/* Estrella dorada para server-stats */
.server-stats-container::before {
    content: '✨';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    z-index: 10;
}

/* Bolitas rojas (holly berries) para game-description */
.game-description::before {
    content: '🔴';
    position: absolute;
    top: -5px;
    right: 15px;
    font-size: 8px;
    z-index: 10;
}

.game-description::after {
    content: '🔴';
    position: absolute;
    top: -5px;
    right: 28px;
    font-size: 8px;
    z-index: 10;
}

/* Titulos con estilo organico */
.ranking-box h2,
.login-box h2,
.register-form-box h2,
.communities-box h2,
.game-news-content h1,
.server-details h3 {
    color: #f5f5f0;
    text-shadow:
        0 0 10px rgba(245, 245, 240, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.4);
    font-weight: 600;
    letter-spacing: 0.08em;
    position: relative;
}

/* Botones estilo madera y pino */
.btn-login,
.btn-register-form {
    background: linear-gradient(180deg, #3d7a37 0%, #2d5a27 50%, #1a3a1a 100%);
    border: 2px solid rgba(212, 175, 55, 0.6);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    color: #f5f5f0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-login:hover,
.btn-register-form:hover {
    background: linear-gradient(180deg, #4a8a43 0%, #3d7a37 50%, #2d5a27 100%);
    box-shadow:
        0 6px 20px rgba(45, 90, 39, 0.4),
        0 0 20px rgba(61, 122, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    border-color: #d4af37;
}

/* Estadisticas con colores naturales */
.stat-box.purple {
    background: linear-gradient(180deg, #8b0000 0%, #6b0000 50%, #4a0000 100%);
    border: 2px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 4px 20px rgba(139, 0, 0, 0.3);
}

.stat-box.red {
    background: linear-gradient(180deg, #3d7a37 0%, #2d5a27 50%, #1a3a1a 100%);
    border: 2px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 4px 20px rgba(45, 90, 39, 0.3);
}

.stat-box.gold {
    background: linear-gradient(180deg, #b87333 0%, #8b4513 50%, #6b3010 100%);
    border: 2px solid rgba(212, 175, 55, 0.6);
    box-shadow: 0 4px 20px rgba(139, 69, 19, 0.4);
}

.stat-box h3 {
    color: #f5f5f0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.stat-box p {
    color: #f5f5f0;
}

/* Inputs con estilo natural */
.form-group {
    background-color: rgba(8, 13, 8, 0.95);
    border: 1px solid rgba(61, 122, 55, 0.4);
    transition: all 0.3s ease;
}

.form-group:focus-within {
    border-color: #3d7a37;
    box-shadow:
        0 0 12px rgba(61, 122, 55, 0.4),
        inset 0 0 8px rgba(45, 90, 39, 0.1);
}

/* Links con color natural */
a {
    color: #7cb342;
}

a:hover {
    color: #8bc34a;
    text-shadow: 0 0 6px rgba(139, 195, 74, 0.4);
}

/* Botones de redes sociales - tema natural */
.btn-discord {
    background: linear-gradient(180deg, #5865f2 0%, #4752c4 100%);
    border: 2px solid rgba(212, 175, 55, 0.5);
}

.btn-discord:hover {
    background: linear-gradient(180deg, #6b75f5 0%, #5865f2 100%);
    box-shadow: 0 0 15px rgba(88, 101, 242, 0.5);
}

.btn-whatsapp {
    background: linear-gradient(180deg, #25d366 0%, #128c7e 100%);
    border: 2px solid rgba(212, 175, 55, 0.5);
}

.btn-whatsapp:hover {
    background: linear-gradient(180deg, #2ee874 0%, #25d366 100%);
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.5);
}

/* Paginacion natural */
.pagination a.active,
.pagination a:hover {
    background: linear-gradient(180deg, #3d7a37 0%, #2d5a27 100%);
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 12px rgba(61, 122, 55, 0.5);
}

/* Ranking con hover suave */
.ranking-table tbody tr:hover {
    background-color: rgba(61, 122, 55, 0.08);
    transition: background-color 0.3s ease;
}

/* Footer estilo cabana */
.main-footer {
    border-top: 2px solid rgba(61, 122, 55, 0.5);
    background:
        linear-gradient(180deg, rgba(15,26,15,0.98) 0%, rgba(8,13,8,0.99) 100%);
    box-shadow:
        0 -3px 20px rgba(45, 90, 39, 0.15),
        inset 0 1px 0 rgba(139, 69, 19, 0.2);
}

/* Animacion de brillo de vela/fuego */
@keyframes firelight-glow {
    0%, 100% {
        box-shadow:
            0 0 15px rgba(212, 175, 55, 0.4),
            0 0 30px rgba(184, 115, 51, 0.2);
    }
    50% {
        box-shadow:
            0 0 25px rgba(212, 175, 55, 0.6),
            0 0 45px rgba(184, 115, 51, 0.3);
    }
}

.btn-download:hover {
    animation: firelight-glow 2.5s infinite;
}

/* Copos de nieve blancos suaves */
.snowflake {
    position: fixed;
    top: -10px;
    color: #fafafa;
    font-size: 1em;
    font-family: Arial;
    text-shadow:
        0 0 3px rgba(255, 255, 255, 0.6);
    z-index: 9999;
    pointer-events: none;
    animation: snowfall-nordic linear infinite;
    opacity: 0.9;
}

@keyframes snowfall-nordic {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.9;
    }
    25% {
        transform: translateY(25vh) translateX(10px) rotate(90deg);
    }
    50% {
        transform: translateY(50vh) translateX(-5px) rotate(180deg);
        opacity: 0.8;
    }
    75% {
        transform: translateY(75vh) translateX(8px) rotate(270deg);
    }
    100% {
        transform: translateY(100vh) translateX(0) rotate(360deg);
        opacity: 0.5;
    }
}

/* Banner de bienvenida hygge */
.christmas-welcome {
    background:
        linear-gradient(175deg, rgba(26, 42, 26, 0.95) 0%, rgba(15, 26, 15, 0.97) 100%);
    border: 2px solid rgba(61, 122, 55, 0.6);
    padding: 25px 30px;
    margin-bottom: 20px;
    text-align: center;
    border-radius: 6px;
    box-shadow:
        0 5px 25px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(245, 245, 240, 0.05);
    position: relative;
}

/* Decoracion de ramas de pino */
.christmas-welcome::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(61, 122, 55, 0.7) 15%,
        rgba(45, 90, 39, 0.9) 35%,
        rgba(139, 0, 0, 0.6) 48%,
        rgba(139, 0, 0, 0.6) 52%,
        rgba(45, 90, 39, 0.9) 65%,
        rgba(61, 122, 55, 0.7) 85%,
        transparent 100%
    );
    border-radius: 6px 6px 0 0;
}

.christmas-welcome h2 {
    color: #f5f5f0;
    text-shadow:
        0 0 10px rgba(245, 245, 240, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.4);
    margin: 0;
    font-size: 26px;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.christmas-welcome p {
    color: #d4d4cf;
    margin: 15px 0 0 0;
    font-size: 15px;
    line-height: 1.6;
}

/* Iconos decorativos nordicos */
.nordic-icon {
    display: inline-block;
    margin: 0 8px;
    opacity: 0.8;
}

.nordic-icon.tree {
    color: #3d7a37;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.nordic-icon.star {
    color: #d4af37;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.nordic-icon.snowflake {
    color: #f5f5f0;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
}

/* Efecto de niebla del bosque */
.forest-mist {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to top,
        rgba(15, 26, 15, 0.4) 0%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Detalles de textura natural */
.wood-texture {
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(139, 69, 19, 0.03) 2px,
            rgba(139, 69, 19, 0.03) 4px
        );
}

/* ============================================
   OVERRIDE DE IMÁGENES - CARPETA NAVIDAD
   ============================================ */

/* Contenedor principal - fondo navideño que abarca todo el contenedor */
.main-container {
    background-image: url('../../images/navidad/fondo.png') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

/* Área de contenido - pergamino navideño */
.content-area {
    background-image: url('../../images/navidad/pergamino.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Corregir franja de transición entre video header y contenido */
/* También usa imagen navideña como fallback mientras carga el video */
.hero-banner {
    background-color: #080d08 !important;
    background-image: url('../../images/navidad/header.png') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Transición suave del hero al contenido - colores Nordic */
.content-area::before {
    background: radial-gradient(ellipse at center, transparent 80%, rgba(8, 13, 8, 0.9) 100%) !important;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3) !important;
}

/* Degradado inferior del content-area - colores Nordic */
.content-area::after {
    background: linear-gradient(to bottom, transparent 0%, rgba(8, 13, 8, 1) 100%) !important;
}