/**
 * Tema de San Valentín - 💝
 * Configurable desde el panel de administración
 */

:root {
    /* Colores románticos */
    --primary-color: #ff69b4;
    --secondary-color: #ff1493;
    --bg-dark: #1a0510;
    --bg-darker: #0d0308;
    --bg-light: #2d0f1f;
    --text-light: #f9f9f9;
    --text-gold: #ffb6c1;
    --border-color: #ff69b4;
    --btn-color: #ff1493;
    --btn-hover: #ff69b4;
}

/* Fondo con tono rosa oscuro */
body {
    background: linear-gradient(0deg, rgba(13,3,8,1) 0%, rgba(26,5,16,1) 100%);
}

/* Contenedor con borde rosa */
.main-container {
    border-left: 2px solid rgba(255, 105, 180, 0.5);
    border-right: 2px solid rgba(255, 105, 180, 0.5);
    box-shadow: 0 0 50px rgba(255, 105, 180, 0.3);
}

/* Header romántico */
.main-header {
    background: linear-gradient(180deg, rgba(13,3,8,0.95) 0%, rgba(26,5,16,0.95) 100%);
    border-bottom: 2px solid #ff69b4;
    box-shadow: 0 2px 10px rgba(255, 105, 180, 0.5);
}

/* Links con color rosa */
.main-nav a.active,
.main-nav a:hover {
    color: #ffb6c1;
    text-shadow: 0 0 10px rgba(255, 182, 193, 0.8);
}

/* Hero banner */
.hero-banner::after {
    background: linear-gradient(to bottom, transparent, rgba(26, 5, 16, 0.95));
}

/* Cajas con estilo romántico */
.ranking-box,
.login-box,
.discord-box,
.game-description,
.server-info-box,
.register-form-box,
.communities-box,
.server-stats-container {
    background: linear-gradient(135deg, rgba(13,3,8,0.95) 0%, rgba(26,5,16,0.95) 100%);
    border: 2px solid #ff69b4;
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.4),
                inset 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Efecto de pulso romántico */
@keyframes love-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 105, 180, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 105, 180, 0.6),
                    0 0 40px rgba(255, 20, 147, 0.4);
    }
}

.ranking-box,
.login-box,
.register-form-box {
    animation: love-pulse 2s ease-in-out infinite;
}

/* Títulos con efecto rosa */
.ranking-box h2,
.login-box h2,
.register-form-box h2,
.communities-box h2,
.game-news-content h1,
.server-details h3 {
    color: #ffb6c1;
    text-shadow: 0 0 10px rgba(255, 182, 193, 0.8),
                 0 0 20px rgba(255, 105, 180, 0.5);
}

/* Botones románticos */
.btn-login,
.btn-register-form {
    background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%);
    border: 1px solid #ffb6c1;
    box-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
    transition: all 0.3s ease;
}

.btn-login:hover,
.btn-register-form:hover {
    background: linear-gradient(135deg, #ff69b4 0%, #ffb6c1 100%);
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.8);
    transform: translateY(-2px);
}

/* Estadísticas con colores románticos */
.stat-box.purple {
    background: linear-gradient(135deg, #ff1493 0%, #c71585 100%);
    border: 2px solid #ffb6c1;
    box-shadow: 0 0 15px rgba(255, 182, 193, 0.5);
}

.stat-box.red {
    background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
    border: 2px solid #ffb6c1;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.5);
}

.stat-box.gold {
    background: linear-gradient(135deg, #ffb6c1 0%, #ff69b4 100%);
    border: 2px solid #fff;
    box-shadow: 0 0 15px rgba(255, 182, 193, 0.6);
}

/* Inputs con borde rosa */
.form-group {
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid #ff69b4;
}

.form-group:focus-within {
    border-color: #ffb6c1;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
}

/* Links románticos */
a {
    color: #ffb6c1;
}

a:hover {
    color: #ffc6d1;
    text-shadow: 0 0 5px rgba(255, 182, 193, 0.5);
}

/* Botones de redes sociales */
.btn-discord {
    border: 2px solid #ffb6c1;
}

.btn-discord:hover {
    box-shadow: 0 0 15px rgba(88, 101, 242, 0.7),
                0 0 20px rgba(255, 105, 180, 0.5);
}

.btn-whatsapp {
    border: 2px solid #ffb6c1;
}

.btn-whatsapp:hover {
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.7),
                0 0 20px rgba(255, 105, 180, 0.5);
}

/* Paginación */
.pagination a.active,
.pagination a:hover {
    background-color: #ff1493;
    border-color: #ffb6c1;
    box-shadow: 0 0 10px rgba(255, 20, 147, 0.7);
}

/* Ranking hover */
.ranking-table tbody tr:hover {
    background-color: rgba(255, 105, 180, 0.1);
    transition: background-color 0.3s ease;
}

/* Footer */
.main-footer {
    border-top: 2px solid #ff69b4;
    background: linear-gradient(180deg, rgba(13,3,8,0.95) 0%, rgba(26,5,16,0.95) 100%);
    box-shadow: 0 -2px 10px rgba(255, 105, 180, 0.3);
}

/* Corazones flotantes (se activarán con JS) */
.heart {
    position: fixed;
    color: #ff69b4;
    font-size: 20px;
    z-index: 9999;
    pointer-events: none;
    animation: heart-float linear forwards;
    opacity: 0.8;
}

@keyframes heart-float {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }
}

/* Mensaje de San Valentín */
.valentine-welcome {
    background: linear-gradient(135deg, #ff1493 0%, #c71585 100%);
    border: 2px solid #ffb6c1;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.5);
}

.valentine-welcome h2 {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 182, 193, 0.8);
    margin: 0;
    font-size: 24px;
}

.valentine-welcome p {
    color: #ffb6c1;
    margin: 10px 0 0 0;
}