/* ═══════════════════════════════════════════════════════════════
   LUFOOTER — Footer global de AstrumLux Network
   Importado por cada vista que use el partial footer.ejs
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables locales (hereda de :root si existen) ── */
.lux-footer {
    --footer-bg:        #0d0e12;
    --footer-border:    rgba(129, 71, 242, 0.18);
    --footer-text:      #9ca3af;
    --footer-heading:   #e2e8f0;
    --footer-link:      #9ca3af;
    --footer-link-hover:#c4b5fd;
    --footer-accent:    #8147f2;
    --footer-accent2:   #c084fc;
    --footer-bottom-bg: rgba(0, 0, 0, 0.35);
    --footer-glow:      rgba(129, 71, 242, 0.55);

    position: relative;
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    color: var(--footer-text);
    font-family: 'Inter', system-ui, sans-serif;
    margin-top: auto;       /* empuja el footer al fondo en layouts flex */
}

/* ── Línea decorativa con glow ── */
.lux-footer__glow-line {
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--footer-accent) 30%,
        var(--footer-accent2) 50%,
        var(--footer-accent) 70%,
        transparent
    );
    box-shadow: 0 0 18px 2px var(--footer-glow);
    pointer-events: none;
}

/* ── Grid principal ── */
.lux-footer__inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2.5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem 2.5rem;
}

/* ── Columna genérica ── */
.lux-footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ═══════════════════════════════
   COLUMNA MARCA
═══════════════════════════════ */
.lux-footer__logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}

.lux-footer__logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
}

.lux-footer__logo-text {
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1;
    /* Gradiente animado con los colores principales del proyecto */
    background: linear-gradient(90deg,
        #8147f2 0%,
        #b07ef7 25%,
        #FF9C2B 50%,
        #b07ef7 75%,
        #8147f2 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: luxLogoShimmer 3.5s linear infinite;
}

@keyframes luxLogoShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.lux-footer__slogan {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--footer-accent2);
    opacity: 0.85;
    margin: 0;
    line-height: 1.4;
}

.lux-footer__description {
    font-size: 0.8rem;
    color: var(--footer-text);
    margin: 0;
    line-height: 1.5;
    opacity: 0.75;
}

/* ── IP copyable ── */
.lux-footer__ip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: rgba(129, 71, 242, 0.1);
    border: 1px solid rgba(129, 71, 242, 0.25);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    width: fit-content;
    font-size: 0.82rem;
    color: var(--footer-link);
    user-select: none;
}

.lux-footer__ip:hover {
    background: rgba(129, 71, 242, 0.2);
    border-color: rgba(129, 71, 242, 0.5);
    transform: translateY(-1px);
    color: var(--footer-heading);
}

.lux-footer__ip i:first-child {
    color: var(--footer-accent);
    font-size: 0.75rem;
}

.lux-footer__ip code {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--footer-heading);
    background: none;
}

.lux-footer__ip-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: rgba(129, 71, 242, 0.2);
    color: var(--footer-accent2);
    font-size: 0.7rem;
    transition: background 0.2s, color 0.2s;
}

.lux-footer__ip-badge--copied {
    background: rgba(16, 185, 129, 0.25);
    color: #10b981;
}

/* ═══════════════════════════════
   HEADINGS DE COLUMNA
═══════════════════════════════ */
.lux-footer__heading {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--footer-heading);
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.lux-footer__heading i {
    color: var(--footer-accent);
    font-size: 0.75rem;
}

/* ═══════════════════════════════
   ENLACES DE NAVEGACIÓN
═══════════════════════════════ */
.lux-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.lux-footer__links li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--footer-link);
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
    padding-left: 0;
}

.lux-footer__links li a i {
    width: 14px;
    font-size: 0.75rem;
    color: var(--footer-accent);
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.lux-footer__links li a:hover {
    color: var(--footer-link-hover);
    padding-left: 4px;
}

.lux-footer__links li a:hover i {
    opacity: 1;
}

/* ═══════════════════════════════
   REDES SOCIALES
═══════════════════════════════ */
.lux-footer__socials {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lux-footer__social {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--footer-link);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}

.lux-footer__social i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.lux-footer__social:hover {
    transform: translateX(3px);
}

/* Colores específicos por red */
.lux-footer__social--discord:hover  { background: rgba(88,101,242,0.15);  border-color: rgba(88,101,242,0.4);  color: #7289da; }
.lux-footer__social--discord i      { color: #7289da; }

.lux-footer__social--youtube:hover  { background: rgba(255,0,0,0.12);     border-color: rgba(255,0,0,0.35);    color: #ff4444; }
.lux-footer__social--youtube i      { color: #ff4444; }

.lux-footer__social--instagram:hover{ background: rgba(228,64,95,0.12);   border-color: rgba(228,64,95,0.35);  color: #e4405f; }
.lux-footer__social--instagram i    { color: #e4405f; }

.lux-footer__social--twitter:hover  { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #e2e8f0; }
.lux-footer__social--twitter .lux-footer__x-icon { color: #9ca3af; }
.lux-footer__social--twitter:hover .lux-footer__x-icon { color: #e2e8f0; }

/* Ícono X de Twitter — carácter Unicode con estilo propio */
.lux-footer__x-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    font-size: 1rem;
    font-weight: 700;
    font-style: normal;
    font-family: 'Inter', system-ui, sans-serif;
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.2s, color 0.2s;
}

.lux-footer__social--tiktok:hover   { background: rgba(105,201,208,0.12); border-color: rgba(105,201,208,0.35);color: #69c9d0; }
.lux-footer__social--tiktok i       { color: #69c9d0; }

.lux-footer__social:hover i { transform: scale(1.1); }

/* ═══════════════════════════════
   INFO RÁPIDA
═══════════════════════════════ */
.lux-footer__info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lux-footer__info-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.83rem;
    color: var(--footer-text);
    line-height: 1.4;
}

.lux-footer__info-icon {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    color: var(--footer-accent);
    font-size: 0.75rem;
    margin-top: 0.1em;
    opacity: 0.85;
}

/* ═══════════════════════════════
   BARRA INFERIOR — COPYRIGHT
═══════════════════════════════ */
.lux-footer__bottom {
    border-top: 1px solid var(--footer-border);
    background: var(--footer-bottom-bg);
}

.lux-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
}

.lux-footer__copy {
    font-size: 0.78rem;
    color: var(--footer-text);
    opacity: 0.7;
}

.lux-footer__copy strong {
    color: var(--footer-heading);
    font-weight: 600;
}

.lux-footer__made {
    font-size: 0.78rem;
    color: var(--footer-text);
    opacity: 0.6;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.lux-footer__heart {
    color: #f43f5e;
    animation: lux-heartbeat 1.4s ease-in-out infinite;
    font-size: 0.8rem;
}

@keyframes lux-heartbeat {
    0%, 100% { transform: scale(1);    }
    14%       { transform: scale(1.25); }
    28%       { transform: scale(1);    }
    42%       { transform: scale(1.15); }
    70%       { transform: scale(1);    }
}

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media (max-width: 1024px) {
    .lux-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
    .lux-footer__col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .lux-footer__inner {
        grid-template-columns: 1fr;
        padding: 2rem 1.25rem 1.5rem;
        gap: 2rem;
    }
    .lux-footer__col--brand {
        grid-column: auto;
    }
    .lux-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 1.25rem;
        gap: 0.25rem;
    }
}

/* ── Integración con body/page-wrapper flex para que el footer baje ── */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Contenido principal empuja el footer hacia abajo */
main,
.main-content,
.wiki-layout,
.applications-section,
.staff-section,
.account-layout,
.docs-shell,
.hero,
section:not(.lux-footer) {
    flex: 1 0 auto;
}

.lux-footer {
    flex-shrink: 0;
}