/* ==========================================================================
   VOKI - CORE STYLES
   ========================================================================== */

:root {
    --bg-dark: rgba(11, 9, 20, 0.95); /* Negro profundo para contraste neón */
    --neon-cyan: #00f3ff;
    --neon-purple: #bc13fe;
    --neon-green: #00ff88;
    --glass-bg: rgba(255, 255, 255, 0.02);
    --glass-border: rgba(255, 255, 255, 0.1);
    --vix-glow: rgba(188, 19, 254, 0.5);
}

body {
    background: radial-gradient(circle at top right, #120f21, #06050a 60%);
    background-attachment: fixed;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}

/* ==========================================================================
   TYPOGRAPHY & NEON EFFECTS
   ========================================================================== */

.text-neon {
    color: var(--neon-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5), 
                 0 0 20px rgba(0, 243, 255, 0.2);
    font-weight: 700;
}

.border-neon-cyan { border: 1px solid var(--neon-cyan); box-shadow: 0 0 5px rgba(0, 243, 255, 0.25); }
.border-neon-purple { border: 1px solid var(--neon-purple); box-shadow: 0 0 5px rgba(188, 19, 254, 0.25); }
.border-neon-green { border: 1px solid var(--neon-green); box-shadow: 0 0 5px rgba(0, 255, 136, 0.25); }

.hover-neon-purple:hover { color: var(--neon-purple); filter: drop-shadow(0 0 5px var(--neon-purple)); }
.hover-neon-cyan:hover { color: var(--neon-cyan); filter: drop-shadow(0 0 5px var(--neon-cyan)); }

.active-neon-purple { color: var(--neon-purple) !important; filter: drop-shadow(0 0 10px var(--neon-purple)); }

/* ==========================================================================
   GLASSMORPHISM COMPONENTS
   ========================================================================== */

.glass-panel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 10px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, border 0.2s ease;
}

.glass-panel-hover:hover {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   BOTÓN "+" (CREACIÓN) - CORRECCIÓN DE VISIBILIDAD
   ========================================================================== */
.btn-create {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--neon-cyan) !important;
    color: var(--bg-dark) !important;
    border: none !important;
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.6) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1060;
}

.btn-create i { transition: transform 0.3s ease; }
.btn-create.active i { transform: rotate(45deg); }

/* ==========================================================================
   LAYOUT & NAVBARS
   ========================================================================== */

.navbar-immersive {
    background: linear-gradient(to bottom, rgba(11, 9, 20, 0.95) 0%, rgba(11, 9, 20, 0.8) 50%, transparent 100%);
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-top: 10px;
    height: 60px;
}

@media (min-width: 992px) {
    .navbar-immersive .container-fluid {
        justify-content: flex-end !important;
    }
}

.btn-nav-icon { transition: 0.3s ease; }
.btn-nav-icon:hover i {
    color: var(--neon-cyan);
    text-shadow: 0 0 8px var(--neon-cyan);
}

.badge-dot {
    top: 8px; right: 8px; width: 7px; height: 7px;
    border-radius: 50%; border: 2px solid var(--bg-dark);
}

.main-content {
    margin-left: 100px; 
    padding-top: 60px; 
    transition: all 0.3s ease;
}

/* ==========================================================================
   FEEDS & POSTS UI
   ========================================================================== */

.feed-selector {
    display: flex; gap: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px; margin-bottom: 25px;
}
.feed-tab { color: #8c8c9e; cursor: pointer; font-weight: 600; position: relative; transition: 0.3s; }
.feed-tab.active { color: #fff; }
.feed-tab.active::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--neon-cyan);
    box-shadow: 0 0 5px var(--neon-cyan);
    border-radius: 10px 10px 0 0;
}

.post-image-grid { display: grid; gap: 8px; margin-top: 10px; }
.post-image-grid.grid-1 { grid-template-columns: 1fr; }
.post-image-grid.grid-2 { grid-template-columns: 1fr 1fr; }
.post-image-grid.grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.post-image-item {
    position: relative; aspect-ratio: 1/1; overflow: hidden;
    border-radius: 8px; background-color: #2c2c3e;
}
.post-image-item img { width: 100%; height: 100%; object-fit: cover; }

.more-images-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); display: flex;
    justify-content: center; align-items: center; color: #fff; font-size: 1.5rem; font-weight: bold;
}

.reload-trigger {
    padding: 40px 0; text-align: center; color: var(--neon-cyan);
    cursor: pointer; font-weight: bold; text-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

/* ==========================================================================
   LIVE PARTIES (CIRCLES)
   ========================================================================== */

.party-filter {
    cursor: pointer; padding: 6px 14px; border-radius: 20px; font-size: 0.8rem;
    white-space: nowrap; background: rgba(255, 255, 255, 0.05); color: #8c8c9e;
    border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease;
}
.party-filter:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.party-filter.active { background: rgba(188, 19, 254, 0.15); color: #fff; border-color: var(--neon-purple); box-shadow: 0 0 5px rgba(188, 19, 254, 0.3); }

.scroll-horizontal::-webkit-scrollbar { display: none; }
.scroll-horizontal { -ms-overflow-style: none; scrollbar-width: none; }

/* ==========================================================================
   HERO GALAXIA & ANIMACIONES
   ========================================================================== */

.hero-container {
    min-height: 300px; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden;
}
.vix-central { width: 130px; height: 130px; position: relative; z-index: 10; animation: pulse-vix 2s ease-in-out infinite; filter: drop-shadow(0 0 15px var(--vix-glow)); }

.galaxy-rings { position: absolute; width: 350px; height: 350px; z-index: 5; }
.ring { position: absolute; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,0.1); }
.ring-1 { width: 85%; height: 85%; animation: rotate-cw 30s linear infinite; }
.ring-2 { width: 65%; height: 65%; animation: rotate-ccw 20s linear infinite; border-color: rgba(0, 243, 255, 0.1); }
.ring-3 { width: 50%; height: 50%; animation: rotate-cw 40s linear infinite; border-color: rgba(188, 19, 254, 0.1); }

.galaxy-stars { position: absolute; width: 100%; height: 100%; z-index: 4; }
.star { position: absolute; border-radius: 50%; animation: star-flicker 1.5s ease-in-out infinite alternate; }

.animate-fade-in { animation: fadeIn 0.5s ease forwards; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-vix { 0%, 100% { transform: scale(1.0); opacity: 1; filter: drop-shadow(0 0 10px var(--vix-glow)); } 50% { transform: scale(1.05); opacity: 0.95; filter: drop-shadow(0 0 20px var(--vix-glow)); } }
@keyframes rotate-cw { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rotate-ccw { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes star-flicker { from { opacity: 0.4; } to { opacity: 1; } }

/* ==========================================================================
   DROPDOWN & OFFCANVAS PREMIUM UI
   ========================================================================== */

.dropdown-toggle::after { display: none !important; }
.dropdown-menu.glass-panel { background: rgba(11, 9, 20, 0.99) !important; border-radius: 15px; padding: 10px; }
.dropdown-item { border-radius: 8px; transition: all 0.2s ease; }
.dropdown-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--neon-cyan) !important; transform: translateX(5px); }
.hover-glass { transition: background 0.2s ease; }
.hover-glass:active { background: rgba(255, 255, 255, 0.1) !important; }
.hover-scale { transition: transform 0.2s ease; }
.hover-scale:active { transform: scale(0.95); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); }

/* ==========================================================================
   MENÚ DE CREACIÓN (+) Y MODALES - CONFIGURACIÓN ESTRICTA
   ========================================================================== */

.btn-action-lg {
    padding: 15px; border-radius: 15px; font-weight: 600; text-align: left;
    display: flex; align-items: center; gap: 15px; width: 100%;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    color: white; transition: 0.2s;
}
.btn-action-lg:active { background: rgba(0, 243, 255, 0.2); transform: scale(0.98); }

/* Menú FAB Base (Oculto por defecto) */
.fab-menu {
    position: fixed;
    background: rgba(255, 255, 255, 0.05) !important;
    opacity: 0;
    visibility: hidden;
    width: 280px;
    z-index: 1050;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Regla Maestra de Visibilidad */
.fab-menu.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ==========================================================================
   MEDIA QUERIES (RESPONSIVE)
   ========================================================================== */

/* Móvil */
@media (max-width: 768px) {
    .main-content { margin-left: 0; padding-top: 70px; padding-bottom: 100px; }

    /* Menú FAB (+) en móvil (Sube desde abajo) */
    .fab-menu {
        bottom: 90px;
        left: 50%;
        transform: translateX(-50%) scale(0.8);
    }
    .fab-menu.active { transform: translateX(-50%) scale(1); }

    /* Corrección estricta para Modal Bottom Sheet en Móvil */
    .modal-bottom-sheet { padding-right: 0 !important; }
    .modal-bottom-sheet .modal-dialog {
        margin: 0; position: fixed; bottom: 0; left: 0; right: 0;
        width: 100%; max-width: 100%;
    }
    .modal-bottom-sheet .modal-content {
        border-radius: 25px 25px 0 0; border-bottom: none; padding-bottom: 25px;
    }
}

/* PC / Laptop */
@media (min-width: 992px) {
    html { font-size: 14px; }
    .brand-text { font-size: 1.1rem; }
    .bi { font-size: 1.1rem !important; }
    .btn-nav-icon { padding: 5px 8px; }
    .glass-panel { padding: 1.25rem !important; }
    .avatar-sm { width: 35px !important; height: 35px !important; }

    /* Menú FAB (+) en PC (Sale del menú izquierdo) */
    .fab-menu {
        top: 50%;
        left: 95px; /* Separado del menú lateral */
        transform: translateY(-50%) scale(0.8);
        transform-origin: left center;
    }
    .fab-menu.active { transform: translateY(-50%) scale(1); }
}

/* ==========================================================================
   INTEGRACIÓN SWEETALERT2 PARA VOKI (Estilos Globales de SW2)
   ========================================================================== */

/* Fondo general de la alerta emergente (Glassmorphism oscuro) */
.voki-swal-popup {
    background: rgba(18, 15, 33, 0.95) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    color: #fff !important;
    box-shadow: 0 5px 5px rgba(0,0,0,0.8) !important;
}

/* Tipografía de títulos y textos en la alerta */
.voki-swal-title { 
    color: #fff !important; 
    font-family: 'Inter', sans-serif !important; 
    font-weight: bold !important; 
    font-size: 1.3rem !important; 
}

.voki-swal-text { 
    color: #8c8c9e !important; 
    font-family: 'Inter', sans-serif !important; 
}

/* Contenedor de botones (Ajuste de espaciado) */
.voki-swal-actions { 
    gap: 10px; 
    width: 100%; 
    padding: 0 20px 20px !important; 
}

/* Botón Aceptar / Confirmar (Neón Cyan) */
.voki-swal-btn-confirm {
    background: var(--neon-cyan) !important;
    color: var(--bg-dark) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 25px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.4) !important;
    flex-grow: 1; /* Para que ocupe la mitad del espacio */
}

/* Botón Cancelar (Gris oscuro) */
.voki-swal-btn-cancel {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px 25px !important;
    font-weight: 600 !important;
    flex-grow: 1; /* Para que ocupe la mitad del espacio */
}

/* ESTILOS PARA MODALES CENTRADOS VOKI */
.modal-content.glass-panel {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);

}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#create-post-content::placeholder {
    color: #8c8c9e;
    font-weight: 500;
}

#create-post-content:focus {
    color: white;
}

/* Efecto hover suave para iconos de acción en el modal */
.modal-body .btn-link {
    transition: transform 0.2s;
    text-decoration: none;
}
.modal-body .btn-link:hover {
    transform: scale(1.2);
    color: var(--neon-cyan) !important;
}

/* Animación de entrada suave para el modal */
.modal.fade .modal-dialog {
    transform: scale(0.9);
    transition: transform 0.3s ease-out;
}
.modal.show .modal-dialog {
    transform: scale(1);
}