/* ESTRATEGIA DE PUBLICIDAD PC ELITE - REFINADA */
.pc-ads-container {
    display: none;
}

@media (min-width: 1500px) {
    .pc-ads-container {
        display: block;
    }

    .ad-side-fixed {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
        width: 180px;
        padding: 10px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .ad-side-fixed.left { left: 15px; }
    .ad-side-fixed.right { right: 15px; }

    .ad-label {
        font-size: 0.55rem;
        color: rgba(255, 255, 255, 0.2);
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-bottom: 10px;
        font-weight: 600;
    }

    .ad-box-v3 {
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 8px;
        backdrop-filter: blur(15px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.4), inset 0 0 20px rgba(255,255,255,0.02);
        transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .ad-box-v3:hover {
        transform: translateY(-5px);
        border-color: rgba(123, 31, 162, 0.3);
    }
}

/* Banner Largo (728x90) Estilo Elite */
.ad-wide-pc {
    display: none;
}

@media (min-width: 1024px) {
    .ad-wide-pc {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 60px 0;
    }

    .ad-box-v3.wide {
        max-width: 750px;
        width: 100%;
        background: rgba(255,255,255,0.01);
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 15px;
        padding: 15px;
        position: relative;
        overflow: visible;
    }

    .ad-box-v3.wide::before {
        content: 'RECOMENDADO PARA PC';
        position: absolute;
        top: -10px;
        left: 20px;
        background: linear-gradient(90deg, #7b1fa2, #00bcd4);
        font-size: 0.5rem;
        padding: 2px 10px;
        border-radius: 20px;
        color: white;
        font-weight: bold;
        letter-spacing: 1px;
    }
}

/* Ajuste de márgenes globales para PC */
@media (min-width: 1500px) {
    .hero, .pricing, .testimonials, .faq-section, .footer-v3 {
        max-width: 1100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --- SISTEMA PARA OCULTAR ANUNCIOS A USUARIOS PRO/VIP --- */
body.no-ads .pc-ads-container,
body.no-ads .ad-wide-pc,
body.no-ads .ad-footer-v3,
body.no-ads ins.adsbygoogle,
body.no-ads .ad-box-v3,
body.no-ads [id^="container-"],
body.no-ads [class*="ad-"] {
    display: none !important;
}

html {
    background-color: #05060f !important;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
    touch-action: manipulation;
    background-color: transparent !important; /* Dejamos que bgAnimation se vea */
}

/* Asegurar que el fondo de estrellas sea visible y tenga el gradiente de PC */
#bgAnimation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1 !important; /* Un nivel detrás del contenido pero sobre el fondo de html */
    overflow: hidden;
    background: radial-gradient(circle at bottom, #0a0b1e 0%, #05060f 100%) !important;
    pointer-events: none;
    display: block !important;
}

/* Estrellas Mágicas Dinámicas - ULTRA PREMIUM */
.star {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    pointer-events: none;
    z-index: 0;
}

/* Variedades de estrellas con colores más profundos y elegantes */
.star.type-1 { box-shadow: 0 0 10px #fff, 0 0 20px rgba(123, 31, 162, 0.6); } /* Purple Deep */
.star.type-2 { box-shadow: 0 0 8px #fff, 0 0 15px rgba(0, 188, 212, 0.5); }  /* Cyan Soft */
.star.type-3 { box-shadow: 0 0 6px #fff, 0 0 12px rgba(255, 193, 7, 0.4); }  /* Golden Sparkle */

/* Estrellas Estáticas de Relleno para profundidad */
.star.static {
    opacity: 0.25 !important;
    animation: staticTwinkle var(--twinkle-duration) ease-in-out infinite alternate !important;
}

@keyframes staticTwinkle {
    0% { opacity: 0.15; transform: scale(0.8); }
    100% { opacity: 0.45; transform: scale(1.1); }
}

.star-animating {
    animation: starMagic var(--duration) ease-in-out forwards;
}

@keyframes starMagic {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    15% {
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 0 0 15px #fff, 0 0 25px currentColor; /* Destello intenso inicial */
    }
    30% {
        opacity: 0.4;
        transform: scale(0.6);
        box-shadow: 0 0 5px #fff; /* Se reduce a un punto pequeño */
    }
    45% {
        opacity: 0.9;
        transform: scale(1);
        box-shadow: 0 0 10px #fff, 0 0 15px currentColor; /* Vuelve a brillar */
    }
    60% {
        opacity: 0.2;
        transform: scale(0.4);
    }
    80% {
        opacity: 0.7;
        transform: scale(0.8);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* Shooting Star Effect */
.shooting-star {
    display: none !important;
}

.shooting-star-animate {
    animation: shootingStar 3s ease-out forwards;
}

@keyframes shootingStar {
    0% {
        transform: translateX(0) translateY(0) rotate(-45deg) scaleX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(-45deg) scaleX(1);
    }
    100% {
        transform: translateX(-500px) translateY(500px) rotate(-45deg) scaleX(1);
        opacity: 0;
    }
}

:root {
    --primary: #a855f7;
    --primary-light: #c084fc;
    --primary-glow: rgba(168, 85, 247, 0.4);
    --secondary: #ec4899;
    --secondary-glow: rgba(236, 72, 153, 0.3);
    --bg-dark: #05060f;
    --panel-bg: #0b0d17;
    --sidebar-bg: #0d0f1a;
    --card-glass: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.08);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --transition: 0.3s ease;
    --glass-blur: blur(16px);
}

/* Light Theme Variables */
body.light-mode {
    --bg-dark: #f8fafc;
    --panel-bg: #ffffff;
    --sidebar-bg: #f1f5f9;
    --card-glass: rgba(0, 0, 0, 0.02);
    --card-border: rgba(0, 0, 0, 0.08);
    --text-main: #1e293b;
    --text-muted: #64748b;
    --card-glass: rgba(255, 255, 255, 0.7);
}

body.light-mode .star {
    opacity: 0.2;
}

body.light-mode .glass {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

body.light-mode .admin-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

body.light-mode .input-pro-v2 {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #1e293b;
}

/* Estilos para opciones bloqueadas en ajustes */
.pro-only-option, .vip-only-option {
    color: var(--text-muted);
    font-style: italic;
}

.settings-item.disabled {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.settings-item.disabled::after {
    content: '🔒';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

/* Optimizaciones de Fluidez Global */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
        /* Forzar GPU en elementos que suelen laguear */
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Reducir carga de blur en móviles (es lo que más consume) */
    .admin-sidebar, .navbar, .glass, .elite-minimal-result, .floating-icon {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #0d0f1a !important; /* Fondo sólido oscuro para evitar transparencia */
        will-change: transform, opacity;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    }

    /* Quitar animaciones continuas pesadas en móvil para liberar la GPU */
    .floating-icon {
        animation: none !important;
    }

    .admin-sidebar-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.8) !important;
    }

    /* Quitar animaciones de blur que matan el rendimiento */
    @keyframes panelEnter {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .admin-view, .user-panel-view {
        will-change: opacity;
        contain: content;
        transition: opacity 0.1s ease-out !important; /* Transición ultra rápida */
    }

    /* Forzar GPU */
    .user-dashboard-grid, .admin-dashboard-grid, .hero {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    /* Optimizar el motor de renderizado del navegador en móvil */
    .user-dashboard-grid, .admin-dashboard-grid {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    button:active, a:active {
        transform: scale(0.98) !important;
        transition: 0.1s !important;
    }
}

/* Base Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Custom Scrollbar Premium - Oculta Globalmente */
*::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
    display: none !important;
}

html, body {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
    overflow-x: hidden;
    width: 100%;
    position: relative;
    background-color: var(--bg-dark);
}

/* Evitar scroll cuando el menú está abierto - Bloqueo Extremo */
html.menu-open,
body.menu-open {
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
}

.nav-links.active {
    touch-action: pan-y !important; /* Permitir scroll vertical dentro del menú */
    overflow-y: auto !important;
}

/* Aplicar a contenedores específicos como el Nav del Sidebar */
.admin-nav::-webkit-scrollbar {
    width: 4px;
}

/* Firefox Global Reset */
* {
    scrollbar-width: none;
}

/* Backdrop Filter Fallbacks */
@supports not (backdrop-filter: blur(16px)) {
    .navbar,
    .search-box-container,
    .price-card,
    .test-card,
    .faq-item,
    .video-result-card,
    .user-card-pro,
    .promo-banner-card,
    .modal-content,
    .toast,
    .admin-sidebar {
        background-color: rgba(13, 15, 26, 0.98) !important;
    }
}

body { background-color: #05060f; color: var(--text-main); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
button { cursor: pointer; border: none; outline: none; background: none; transition: var(--transition); }

/* ==========================================================================
   NAVBAR & MOBILE SIDEBAR (WEB PRINCIPAL)
   ========================================================================== */
.navbar {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    background: rgba(5, 6, 15, 0.4);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    height: 70px; transition: all 0.4s ease;
    display: flex; align-items: center;
    overflow: visible;
}
.nav-container {
    width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 40px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: nowrap; /* Evita que los elementos se bajen */
}
.nav-brand {
    font-size: 1.8rem; font-weight: 800; display: flex; align-items: center; gap: 12px; z-index: 1001;
    flex-shrink: 0; /* Que el logo no se encoja */
}
.logo-icon {
    color: var(--primary); font-size: 1.4rem; background: rgba(168, 85, 247, 0.1);
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    border-radius: 16px; border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 0 20px var(--primary-glow);
}
.nav-brand span { color: var(--primary); }

.nav-links {
    display: flex; gap: 1.2rem; list-style: none; align-items: center;
    margin: 0 20px;
    background: transparent;
}
.nav-links a {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    white-space: nowrap;
}
.nav-links a i { font-size: 0.85rem; opacity: 0.7; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.05); }

.nav-right {
    display: flex; align-items: center; gap: 15px;
    flex-shrink: 0;
}
.nav-auth { display: flex; align-items: center; gap: 10px; }

.btn-login {
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
    padding: 12px 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-login:hover { color: var(--primary-light); }

.btn-register {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    padding: 14px 28px; border-radius: 16px; font-weight: 800; color: #fff;
    box-shadow: 0 10px 20px rgba(168, 85, 247, 0.2);
    font-size: 0.9rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-register:hover { filter: brightness(1.1); box-shadow: 0 15px 30px rgba(168, 85, 247, 0.4); transform: none !important; }


.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    border: 1px solid var(--card-border);
}

/* Overlay para el menú móvil */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 11, 20, 0.4);
    backdrop-filter: blur(40px);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}
.nav-overlay.active { opacity: 1; visibility: visible; }

/* Mobile Menu Header/Footer inside nav-links sidebar */
.nav-mobile-header, .nav-mobile-footer { display: none; }

@media (max-width: 1200px) {
    .nav-links { gap: 0.5rem; }
    .nav-links a { font-size: 0.8rem; padding: 8px 10px; }
    .nav-container { padding: 0 20px; }
}

@media (max-width: 1100px) {
    .nav-links {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: #0d0f1a !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 1000001 !important;
        display: flex !important;
        visibility: visible !important;
        box-shadow: -15px 0 50px rgba(0,0,0,0.8) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        justify-content: flex-start !important; /* Alineado arriba */
    }
    .nav-links.active {
        right: 0 !important;
    }

    .nav-auth { display: none !important; }
    .hamburger { display: flex !important; }

    .nav-mobile-header {
        display: flex !important;
        width: 100%;
        padding: 40px 25px 20px 25px !important;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-mobile-header p {
        font-weight: 800;
        font-size: 0.75rem;
        color: var(--primary);
        letter-spacing: 2px;
        text-transform: uppercase;
        opacity: 0.8;
    }

    .close-sidebar {
        position: static !important;
        color: #fff;
        font-size: 1rem;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }

    .nav-links li {
        width: 100% !important;
        display: block !important;
        padding: 0 15px !important;
    }

    .nav-links a {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 16px 20px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        border-radius: 16px !important;
        transition: all 0.3s ease !important;
        border-bottom: none !important;
    }

    .nav-links a i {
        width: 24px;
        color: var(--primary);
        font-size: 1.1rem;
        opacity: 0.9;
    }

    .nav-links a:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #fff !important;
        transform: translateX(8px);
    }

    /* FOOTER CON BOTONES PREMIUM - SIEMPRE VISIBLES EN MOBILE */
    .nav-mobile-footer {
        display: block !important;
        margin-top: 20px !important; /* Espacio extra arriba */
        width: 100% !important;
        padding: 20px !important;
        background: #0d0f1a !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-sizing: border-box !important;
        visibility: visible !important;
        /* Quitamos el sticky para que fluya después de los links si el menú es corto */
        position: relative !important;
    }

    .auth-group-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important; /* Espacio más reducido */
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    .btn-login-sidebar {
        width: 100% !important;
        height: 48px !important; /* Ligeramente más bajo para ahorrar espacio */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        border: 1px solid #dadce0 !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        gap: 12px !important;
        padding: 0 20px !important;
        margin: 8px 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .btn-login-sidebar img {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
        display: block !important;
    }

    .btn-login-sidebar span {
        color: #3c4043 !important; /* Gris oscuro oficial de Google */
        font-weight: 600 !important;
        font-size: 15px !important;
        font-family: 'Google Sans', 'Plus Jakarta Sans', sans-serif !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap !important;
    }

    .btn-login-sidebar:active {
        background: #f8f9fa !important;
        transform: translateY(1px) !important;
        box-shadow: 0 1px 2px rgba(60,64,67,0.3) !important;
    }

    .btn-register-sidebar {
        width: 100% !important;
        height: 48px !important; /* Ligeramente más bajo */
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        background: #a855f7 !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25) !important;
        margin: 0 !important;
        padding: 0 20px !important;
    }

    .btn-register-sidebar i {
        color: #ffffff !important;
        font-size: 18px !important;
    }

    .btn-register-sidebar span {
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        display: block !important;
        visibility: visible !important;
    }

    .btn-register-sidebar:active {
        transform: translateY(1px) !important;
        filter: brightness(1.1);
    }

    .btn-register-sidebar i, .btn-register-sidebar span {
        color: #ffffff !important;
    }

    .btn-register-sidebar:active {
        transform: scale(0.97);
        filter: brightness(1.1);
    }

    .close-sidebar:hover {
        background: rgba(255, 50, 50, 0.1);
        border-color: rgba(255, 50, 50, 0.2);
        color: #ff4d4d;
        transform: rotate(90deg);
    }

    .nav-links li { width: 100%; display: block; }

    .nav-links a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 15px;
        padding: 15px 25px;
        font-size: 1rem;
        width: calc(100% - 30px);
        border-radius: 14px;
        margin: 4px 15px;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        transition: all 0.3s ease;
        background: transparent;
        border: 1px solid transparent;
        font-weight: 500;
    }

    .nav-links a:hover {
        background: rgba(255, 255, 255, 0.03);
        color: #fff;
        padding-left: 35px;
    }

    .nav-links a::before {
        content: '\f054';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 0.7rem;
        opacity: 0;
        transition: 0.3s;
    }

    .nav-links a:hover::before {
        opacity: 0.5;
    }

    .nav-mobile-footer {
        display: block !important;
        width: 100%;
        padding: 30px 20px;
        margin-top: 20px;
        background: rgba(255, 255, 255, 0.03);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        visibility: visible !important;
    }

    .auth-group-mobile {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        visibility: visible !important;
    }

    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        z-index: 99998;
        display: none;
        opacity: 0;
        transition: all 0.4s ease;
    }
    .nav-overlay.active {
        display: block;
        opacity: 1;
    }

.btn-login-sidebar {
    text-align: center;
    padding: 15px;
    font-weight: 700;
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.1);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.1);
    cursor: pointer;
    display: block;
}

.btn-login-sidebar:hover {
    background: var(--primary);
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
    color: #fff;
}

.btn-register-sidebar {
    background: linear-gradient(135deg, #fff, #f0f0f0);
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    font-weight: 800;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-register-sidebar i {
    color: var(--primary);
    margin-right: 8px;
}

.btn-register-sidebar span {
    color: #000;
}

.btn-register-sidebar:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 255, 255, 0.3);
    filter: brightness(1.1);
}

    .hamburger span { width: 28px; height: 3px; background: var(--primary); border-radius: 10px; transition: 0.3s; }
}

.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: 0.5;
    animation: twinkle var(--duration) infinite;
}

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

.bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: radial-gradient(circle at bottom, #0a0b1e 0%, #05060f 100%) !important;
    overflow: hidden;
    pointer-events: none;
    display: block !important;
}


/* ==========================================================================
   LANDING PAGE - HERO SECTION
   ========================================================================== */
.hero {
    padding: 60px 10% 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: auto;
    position: relative;
    overflow: hidden;
}

.hero-visual-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    perspective: 1500px;
}

.hero-title {
    font-size: clamp(2.5rem, 7vw, 5rem); /* Un poco más pequeño */
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 10px; /* Reducido de 15px */
    color: #fff;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-title span {
    background: linear-gradient(to right, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.4;
    margin: 0 auto 5px; /* Reducido al mínimo */
    max-width: 700px;
    font-weight: 400;
    text-align: center;
}

.panel-search-pro {
    display: flex;
    gap: 12px;
    align-items: center;
}

.search-actions-v3 {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Botón Ultra V3.0 Estilo VIP */
.btn-ultra-v3 {
    position: relative;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    border: none;
    border-radius: 14px;
    padding: 2px; /* Espacio para el borde brillante */
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s ease;
    min-width: 180px;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.ultra-content {
    background: #0b0d17;
    border-radius: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fbbf24;
    position: relative;
    z-index: 2;
    transition: background 0.3s;
}

.btn-ultra-v3:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.5);
}

.btn-ultra-v3:hover .ultra-content {
    background: rgba(251, 191, 36, 0.1);
}

.ultra-content i {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 5px #fbbf24);
    animation: lightning-flicker 2s infinite;
}

.main-search-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-ultra-v3-mini {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #000;
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-ultra-v3-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(251, 191, 36, 0.6);
    filter: brightness(1.1);
}

.btn-ultra-v3-mini i {
    font-size: 1rem;
    animation: lightning-flicker 2s infinite;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .ultra-content i {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 5px #fbbf24);
    animation: lightning-flicker 2s infinite;
}

.main-search-actions {
        flex-direction: column;
        width: 100%;
    }
    .btn-ultra-v3-mini {
        width: 100%;
        justify-content: center;
    }
}
}

.ultra-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.ultra-text span {
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.ultra-text small {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.8;
}

/* Efecto de resplandor animado */
.ultra-glow-effect {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent,
        rgba(251, 191, 36, 0.3),
        rgba(251, 191, 36, 0.8),
        rgba(251, 191, 36, 0.3),
        transparent 70%
    );
    animation: rotate-glow 4s linear infinite;
    z-index: 1;
}

@keyframes rotate-glow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes lightning-flicker {
    0%, 100% { opacity: 1; transform: none; }
    50% { opacity: 0.7; transform: none; filter: drop-shadow(0 0 15px #fbbf24); }
}

/* Glass Search Engine */
.search-box-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(25px);
    padding: 12px;
    border-radius: 35px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5), 0 18px 36px -18px rgba(0, 0, 0, 0.5);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 0px; /* Eliminado el margen superior */
    position: relative;
}

.search-box-container:focus-within {
    transform: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8), 0 0 30px var(--primary-glow);
}

.search-box-container input {
    flex: 4;
    background: transparent;
    border: none;
    padding: 15px 20px;
    color: #fff;
    font-size: 1.15rem;
    outline: none;
    font-weight: 500;
}

.search-box-container button {
    flex: 1.2;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: none;
    padding: 16px 30px;
    border-radius: 25px;
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    box-shadow: 0 10px 25px var(--primary-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    min-width: fit-content;
}

.search-box-container button:hover {
    transform: none;
    filter: brightness(1.1);
}

/* Badges Horizontal Sleek */
.hero-badges {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 22px;
    border-radius: 100px;
    transition: 0.3s;
}

.badge-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--primary);
    transform: translateY(-3px);
}

.badge-item i { color: var(--primary); font-size: 1.1rem; }
.badge-item span { font-weight: 700; font-size: 0.9rem; color: #fff; text-transform: uppercase; letter-spacing: 1px; }

/* Visual Hero - Background Elements */
.success-notif {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(100px);
    width: 280px;
    padding: 20px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 24px;
    background: rgba(168, 85, 247, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    animation: float-main 6s ease-in-out infinite alternate;
}

/* Floating Icons 3D - Exactos como en la foto */
.floating-icon {
    position: absolute;
    width: 65px; /* Un poco más pequeños para que se vean elegantes */
    height: 65px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    z-index: 5;
    transition: all 0.5s ease;
}

/* Posiciones ajustadas para PC (más ordenadas) */
.icon-tiktok {
    top: 15%;
    left: 8%;
    animation: float-icon 6s infinite ease-in-out;
}

.icon-instagram {
    top: 20%;
    right: 8%;
    animation: float-icon 9s infinite ease-in-out;
    color: #e1306c;
}

.icon-bolt {
    top: 35%;
    left: 6%;
    animation: float-icon 8s infinite ease-in-out 1s; /* Delay para que no se muevan igual */
    color: var(--primary);
}

.icon-video {
    bottom: 25%;
    left: 7%;
    animation: float-icon 7s infinite ease-in-out 0.5s;
    color: #06b6d4;
}

.icon-youtube {
    bottom: 20%;
    right: 8%;
    animation: float-icon 7s infinite ease-in-out 1.5s;
    color: #f00;
}

.p-tag-simple {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.p-tag-simple:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.p-tag-simple i {
    font-size: 1.1rem;
    transition: 0.3s;
}

.p-tag-simple.tiktok i { color: #fff; }
.p-tag-simple.tiktok:hover {
    border-color: #fe2c55;
    box-shadow: 0 0 20px rgba(254, 44, 85, 0.2);
}
.p-tag-simple.tiktok:hover i { color: #fff; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)); }

.p-tag-simple.youtube:hover {
    border-color: #ff0000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
}
.p-tag-simple.youtube:hover i { color: #ff0000; filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.5)); }

.p-tag-simple.instagram:hover {
    border-color: #e1306c;
    box-shadow: 0 0 20px rgba(225, 48, 108, 0.2);
}
.p-tag-simple.instagram:hover i { color: #e1306c; filter: drop-shadow(0 0 8px rgba(225, 48, 108, 0.5)); }

/* Background Orbs */
.floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    opacity: 0.3;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: var(--primary);
    top: -10%;
    left: 10%;
    animation: orb-move 20s infinite alternate;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: var(--secondary);
    bottom: -10%;
    right: 5%;
    animation: orb-move 25s infinite alternate-reverse;
}

@keyframes float-main {
    0%, 100% { transform: translate(-50%, -50%) translateZ(100px) translateY(0); }
    50% { transform: translate(-50%, -50%) translateZ(100px) translateY(-25px); }
}

@keyframes float-icon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes float-icon-mobile {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(3deg); }
}

@keyframes orb-move {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 30px) translateY(-3px); }
}

.glass-card img {
    width: 100%;
    border-radius: 20px;
    display: block;
    margin-bottom: 15px;
    filter: brightness(0.9);
}

.card-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-info i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
}

.card-info.tiktok i { background: #000; border: 1px solid #fe2c55; }
.card-info.youtube i { background: #f00; }
.card-info span { font-weight: 800; font-size: 1rem; color: #fff; }

.visual-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
    filter: blur(80px);
    z-index: -1;
    opacity: 0.6;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Section Components */
.section-tag {
    background: rgba(168, 85, 247, 0.1);
    color: var(--primary);
    padding: 8px 20px;
    border-radius: 100px;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 2px;
    display: inline-block;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.section-title {
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.1;
    margin-bottom: 60px;
    text-align: center;
}
.section-title span { background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.how-it-works { padding: 120px 5%; text-align: center; }
.steps-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    margin: 60px auto 0;
}
.step {
    flex: 1;
    background: var(--card-glass);
    border: 1px solid var(--card-border);
    padding: 40px 30px;
    border-radius: 32px;
    position: relative;
    transition: 0.3s;
}
.step:hover {
    border-color: var(--primary);
    transform: none !important;
}
.step-icon {
    width: 70px; height: 70px; background: rgba(168, 85, 247, 0.1);
    border-radius: 20px; display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: var(--primary); margin: 0 auto 25px;
}
.step-number {
    position: absolute; top: 20px; right: 20px;
    width: 32px; height: 32px; background: rgba(255,255,255,0.05);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: var(--text-muted); font-size: 0.9rem;
}
.step h3 { font-size: 1.5rem; margin-bottom: 15px; color: #fff; }
.step p { color: var(--text-muted); font-size: 0.95rem; }
.step-arrow { font-size: 1.5rem; color: var(--card-border); }

/* ==========================================================================
   PRICING - ULTRA GLASS
   ========================================================================== */
.pricing { padding: 120px 5%; text-align: center; }
.pricing-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 60px;
    flex-wrap: wrap;
}

.pricing-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
    padding: 20px;
    justify-items: center;
    width: 100%;
}

.price-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    padding: 40px 30px;
    border-radius: 32px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    min-height: 520px;
}

.price-card:hover {
    transform: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.price-card.popular {
    background: rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.2);
}

.price-card h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.popular-badge {
    position: absolute;
    top: 20px;
    right: -35px;
    background: var(--primary);
    color: #fff;
    padding: 8px 45px;
    font-size: 0.75rem;
    font-weight: 900;
    transform: rotate(45deg);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
}

.feat-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 30px 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px; /* Espaciado constante entre items */
}

.feat-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Engine Badge Styles - Minimalist Border Version */
.engine-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    width: 100%;
    margin-top: 10px;
    background: transparent;
    border: 1px solid transparent;
    transition: 0.3s;
}

.engine-badge i {
    font-size: 0.9rem !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    opacity: 0.8;
}

.badge-locked {
    color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.badge-pro {
    color: #a855f7;
    border-color: rgba(168, 85, 247, 0.4);
}

.badge-vip {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Solo un brillo muy sutil en el borde para el VIP */
@keyframes gold-border-glow {
    from { border-color: rgba(251, 191, 36, 0.3); }
    to { border-color: rgba(251, 191, 36, 0.8); }
}

.badge-vip {
    animation: gold-border-glow 2s infinite alternate;
}

.feat-list li i {
    color: var(--primary);
    font-size: 0.8rem;
    background: rgba(168, 85, 247, 0.1);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.price { font-size: 3.5rem; font-weight: 900; color: #fff; margin: 15px 0; letter-spacing: -2px; }
.price span { font-size: 1.1rem; color: var(--text-muted); font-weight: 600; letter-spacing: 0; }

.btn-card-outline {
    width: 100%; padding: 16px; border-radius: 16px; border: 1px solid var(--card-border);
    color: #fff; font-weight: 700; transition: 0.3s;
}
.btn-card-outline:hover { background: rgba(255,255,255,0.05); border-color: #fff; }

.btn-card-primary {
    width: 100%; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff; font-weight: 800; box-shadow: 0 10px 20px var(--primary-glow);
}

.current-plan-tag {
    background: rgba(0, 255, 136, 0.1);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    text-transform: uppercase;
    width: fit-content;
}

.price-card.current-plan {
    border: 2px solid rgba(0, 255, 136, 0.4);
    background: rgba(0, 255, 136, 0.04);
    box-shadow: 0 20px 40px rgba(0, 255, 136, 0.1);
}

.price-card.current-plan .feat-list li i {
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
}

.duration-btn {
    padding: 10px 24px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.duration-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: 0.5s;
}

.duration-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.duration-btn:hover::after {
    left: 100%;
}

.duration-btn.active {
    background: var(--primary-gradient);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.4),
                inset 0 2px 5px rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

.duration-btn[data-duration="12"]::before {
    content: 'TOP';
    position: absolute;
    top: -8px;
    right: 5px;
    font-size: 0.55rem;
    background: #fbbf24;
    color: #000;
    padding: 2px 5px;
    border-radius: 10px;
    font-weight: 900;
}

.expiry-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.expiry-badge.expired {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.expiry-badge.expiring-soon {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* ==========================================================================
   TESTIMONIALS - ULTRA GLASS
   ========================================================================== */
.testimonials { padding: 120px 5%; position: relative; }
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.test-card {
    background: var(--card-glass);
    border: 1px solid var(--card-border);
    backdrop-filter: var(--glass-blur);
    padding: 40px;
    border-radius: 32px;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.test-card:hover {
    transform: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.05);
}

.test-stars { color: #fbbf24; font-size: 0.9rem; display: flex; gap: 4px; }

.test-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #fff;
    font-style: italic;
    font-weight: 500;
}

.test-user {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.test-user img {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid var(--card-border);
}

.test-user div strong { display: block; color: #fff; font-size: 1rem; }
.test-user div span { color: var(--text-muted); font-size: 0.8rem; font-weight: 600; }

.test-card.popular-test {
    border-color: var(--primary-glow);
    background: rgba(168, 85, 247, 0.03);
    box-shadow: 0 20px 40px rgba(168, 85, 247, 0.1);
}

/* ==========================================================================
   FAQ SECTION - ULTRA GLASS
   ========================================================================== */
.faq-section { padding: 120px 5%; position: relative; }
.faq-container { max-width: 900px; margin: 0 auto; }

.faq-item {
    background: var(--card-glass);
    border: 1px solid var(--card-border);
    backdrop-filter: var(--glass-blur);
    border-radius: 24px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.faq-item:hover {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.04);
}

.faq-question {
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-question h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    transition: 0.3s;
}

.faq-question i {
    color: var(--primary);
    transition: 0.4s ease;
}

.faq-item.active .faq-question h3 { color: var(--primary-light); }
.faq-item.active .faq-question i { transform: rotate(180deg); }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(0, 0, 0, 0.2);
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 40px 30px;
}

.faq-answer p {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 1.05rem;
}

/* ==========================================================================
   TRUST BAR
   ========================================================================== */
.trust-bar {
    display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap;
    background: rgba(255,255,255,0.02); border-top: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border); padding: 70px 5%; margin: 80px 0;
}
.trust-item { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 20px; }
.trust-item i { font-size: 2.2rem; color: var(--primary); filter: drop-shadow(0 0 10px var(--primary-glow)); }
.trust-item strong { display: block; font-size: 1.1rem; color: #fff; margin-bottom: 2px; }
.trust-item span { font-size: 0.9rem; color: var(--text-muted); }

/* ==========================================================================
   DOWNLOADS & HISTORY - ULTRA GLASS
   ========================================================================== */
.downloads-section { padding: 120px 5%; }
.downloads-container { max-width: 1000px; margin: 0 auto; }
.download-history-card { padding: 40px; border-radius: 32px; min-height: 400px; }

.history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.history-card-title { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 12px; }

.btn-clear-history { color: var(--text-muted); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.btn-clear-history:hover { color: var(--danger); }

#downloadsHistoryList { display: grid; grid-template-columns: 1fr; gap: 15px; }

.history-item {
    background: rgba(255,255,255,0.02); border: 1px solid var(--card-border);
    padding: 15px 25px; border-radius: 20px; display: flex; justify-content: space-between;
    align-items: center; transition: 0.3s;
}
.history-item:hover { background: rgba(255,255,255,0.04); transform: none !important; }

.history-info { display: flex; align-items: center; gap: 20px; }
.history-thumb { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; }
.history-details h4 { font-size: 1rem; color: #fff; margin-bottom: 4px; }
.history-details span { font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }

.history-actions { display: flex; gap: 10px; }
.btn-re-download, .btn-delete-history {
    width: 40px; height: 40px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; background: rgba(255,255,255,0.05);
    border: 1px solid var(--card-border); color: #fff;
}
.btn-re-download:hover { background: var(--primary); border-color: var(--primary); }
.btn-delete-history:hover { background: var(--danger); border-color: var(--danger); }

.empty-state { text-align: center; padding: 60px 0; }
.empty-state-icon { font-size: 4rem; color: var(--primary); opacity: 0.3; margin-bottom: 20px; }
.empty-state-text { color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; }

/* ==========================================================================
   BUSCADOR ELITE V4.0 - PREMIUM DESIGN (ULTRA REFINED)
   ========================================================================== */
.search-engine-status {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 5px;
    gap: 10px;
}

.version-badge-pro {
    display: none; /* Reemplazado por nexus-badge-premium-v4 */
}

/* --- NEXUS ULTRA ELITE V4.0 BADGE (ULTIMATE) --- */
.nexus-ultra-badge-v4 {
    position: relative;
    padding: 2px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), rgba(236, 72, 153, 0.2));
    display: inline-block;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    animation: badge-entrance 0.8s backwards;
}

@keyframes badge-entrance {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.badge-glow-layer {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.2), transparent 70%);
    filter: blur(15px);
    z-index: 0;
    opacity: 0.5;
}

.badge-inner-v4 {
    position: relative;
    background: #0a0a0f;
    padding: 10px 22px;
    border-radius: 14px;
    z-index: 2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.nexus-scanline-v4 {
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(168, 85, 247, 0.05) 40%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(168, 85, 247, 0.05) 60%,
        transparent 100%
    );
    animation: ultra-scan 4s linear infinite;
    pointer-events: none;
}

@keyframes ultra-scan {
    0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(50%) skewX(-15deg); }
}

.badge-header-nano {
    display: flex;
    align-items: center;
    gap: 6px;
}

.system-status-dot {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    animation: status-blink 2s ease-in-out infinite;
}

@keyframes status-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.system-label {
    font-size: 0.5rem;
    font-weight: 800;
    color: rgba(16, 185, 129, 0.8);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.badge-main-v4 {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nexus-v-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}

.nexus-v-title .elite-text {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 5px;
}

.version-tag-v4 {
    display: flex;
    align-items: center;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 6px;
    padding: 2px 8px;
    gap: 6px;
}

.v-num {
    font-size: 0.75rem;
    font-weight: 900;
    color: #fbbf24;
}

.p-label {
    font-size: 0.55rem;
    font-weight: 900;
    color: #fff;
    background: #fbbf24;
    padding: 1px 4px;
    border-radius: 3px;
    color: #000;
}

.badge-particles span {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

.badge-particles span:nth-child(1) { top: 20%; left: 10%; animation: particle-float 3s infinite 0.5s; }
.badge-particles span:nth-child(2) { top: 70%; left: 80%; animation: particle-float 4s infinite 1.2s; }
.badge-particles span:nth-child(3) { top: 40%; left: 90%; animation: particle-float 3.5s infinite 2s; }

@keyframes particle-float {
    0% { transform: translateY(0); opacity: 0; }
    50% { opacity: 0.4; }
    100% { transform: translateY(-15px); opacity: 0; }
}

#engineStatusTextText {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.panel-search-wrapper-elite {
    background: rgba(10, 10, 15, 0.4);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 40px;
    padding: 30px;
    margin-bottom: 10px;
    box-shadow:
        0 40px 80px -15px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.panel-search-wrapper-elite::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.input-glow-container {
    flex: 1;
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 100px;
    display: flex;
    align-items: center;
    padding: 6px; /* Aumentado para mejor respiro */
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
    height: 60px; /* Altura fija para consistencia */
}

.input-glow-container:focus-within {
    border-color: #a855f7;
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.25);
    transform: translateY(-2px);
    background: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   BUSCADOR ELITE V4.0 - RESPONSIVE OPTIMIZATION
   ========================================================================== */
.panel-search-bar-elite {
    display: flex;
    gap: 15px;
    align-items: center;
    width: 100%;
}

@media (max-width: 768px) {
    .panel-search-wrapper-elite {
        padding: 20px 15px;
        border-radius: 24px;
        margin: 0 5px 10px 5px;
        background: rgba(15, 15, 25, 0.9);
        border: 1px solid rgba(168, 85, 247, 0.15);
    }

    .panel-search-bar-elite {
        flex-direction: column;
        gap: 12px;
    }

    .input-glow-container {
        width: 100%;
        height: 56px;
        border-radius: 15px !important;
        background: rgba(15, 15, 25, 0.6) !important;
        border: 1.5px solid rgba(168, 85, 247, 0.25) !important;
        position: relative;
        overflow: hidden; /* Importante para que el botón encaje en las esquinas */
        display: flex;
        align-items: center;
    }

    .btn-paste-smart {
        position: absolute !important;
        height: 100% !important;
        width: 70px !important; /* Un poco más ancho */
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        border-radius: 0 15px 15px 0 !important; /* Redondear solo la parte derecha para que encaje */
        background: rgba(168, 85, 247, 0.1) !important;
        border: none !important;
        border-left: 1px solid rgba(168, 85, 247, 0.2) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

    .input-glow-container input {
        border-radius: 15px !important;
        padding-right: 80px !important;
        padding-left: 50px !important;
        background: transparent !important;
        height: 100% !important;
        font-size: 0.95rem !important;
    }

    .btn-action-elite {
        width: 100%;
        margin-left: 0 !important;
        height: 60px; /* Un poco más alto */
        border-radius: 20px !important;
    }

    .btn-inner {
        width: 100%;
        height: 100%;
        justify-content: center;
        padding: 0;
        font-size: 1.1rem; /* Texto un poco más grande */
        font-weight: 800;
        letter-spacing: 1px;
    }
}

.input-glow-container i.main-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #a855f7;
    font-size: 1.1rem;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
    pointer-events: none;
}

.input-glow-container input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    border-radius: 100px;
    padding: 0 115px 0 50px; /* Padding ajustado */
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    outline: none;
}

/* Botón Pegar Inteligente (Refinado Elite) */
.btn-paste-smart {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.25);
    color: #a855f7;
    padding: 0 12px;
    height: 32px;
    border-radius: 10px; /* Menos redondeado para estilo moderno */
    font-size: 0.6rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 10;
    letter-spacing: 1px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

.btn-paste-smart i {
    font-size: 0.8rem;
    filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.3));
}

.btn-paste-smart:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: #a855f7;
    color: #fff;
    transform: translateY(-50%) scale(1.02);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

.btn-paste-smart:active {
    transform: translateY(-50%) scale(0.98);
}

/* Botón PROCESAR */
.btn-action-elite {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    border-radius: 100px;
    margin-left: 5px;
}

.btn-inner {
    background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
    padding: 0 40px;
    height: 60px; /* Misma altura que el input */
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    overflow: hidden;
    box-shadow: 0 8px 25px -5px rgba(168, 85, 247, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Destello Metálico Animado */
.btn-inner::after {
    content: '';
    position: absolute;
    top: -50%; left: -100%;
    width: 50%; height: 200%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transform: rotate(25deg);
    animation: shine-sweep 3s infinite;
}

@keyframes shine-sweep {
    0% { left: -100%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

.btn-action-elite:hover .btn-inner {
    transform: scale(1.03) translateY(-2px);
    box-shadow: 0 15px 40px -5px rgba(168, 85, 247, 0.7);
}

.btn-action-elite:active .btn-inner {
    transform: scale(0.97);
}

.btn-glow {
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    background: #a855f7;
    filter: blur(20px);
    opacity: 0.4;
    border-radius: 100px;
    z-index: 1;
    transition: all 0.4s;
}

.btn-action-elite:hover .btn-glow {
    opacity: 0.8;
    filter: blur(25px);
}

.premium-loader-line-v2 {
    width: 100%; height: 3px; background: rgba(255, 255, 255, 0.05);
    margin-top: 20px; border-radius: 10px; overflow: hidden; display: none;
}

.loader-progress {
    width: 30%; height: 100%; background: linear-gradient(90deg, #a855f7, #ec4899);
    border-radius: 10px; animation: loader-move 1.5s infinite ease-in-out;
}

@keyframes loader-move {
    0% { transform: translateX(-100%); width: 20%; }
    50% { width: 40%; }
    100% { transform: translateX(400%); width: 20%; }
}

/* ==========================================================================
   VIDEO RESULT CARDS - PREMIUM COMPACT (Estilo Apple/Dashboard)
   ========================================================================== */
/* ==========================================================================
   RESULTADOS DE VIDEO (DISEÑO PREMIUM)
   ========================================================================== */
.video-result-card {
    background: rgba(15, 16, 22, 0.7);
    border: 1px solid rgba(168, 85, 247, 0.3);
    backdrop-filter: blur(40px);
    border-radius: 28px;
    padding: 20px;
    margin: 25px auto;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow:
        0 30px 60px -12px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(168, 85, 247, 0.15),
        inset 0 0 20px rgba(255, 255, 255, 0.02);
    animation: resultReveal 0.4s ease-out forwards;
    position: relative;
    overflow: hidden;
}

@keyframes resultReveal {
    0% {
        opacity: 0;
        transform: scale(0.98);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

.video-result-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #a855f7, #ec4899, #06b6d4);
    opacity: 0.8;
}

.video-preview-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 25px rgba(0,0,0,0.4);
}

.main-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.8s ease;
}

.video-preview-container:hover .main-thumb {
    transform: translateY(-3px);
}

.video-preview-container::after {
    display: none;
}

.video-header-mini h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin-top: 5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.download-options-minimal {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 5px;
}

.btn-premium-dl-sm {
    flex: 1;
    padding: 15px 10px;
    border-radius: 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.4s ease;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255,255,255,0.05);
    overflow: hidden;
}

.btn-primary-premium {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    box-shadow: 0 10px 20px -5px rgba(168, 85, 247, 0.4);
    border-color: rgba(168, 85, 247, 0.3);
}

.btn-audio-premium {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    box-shadow: 0 10px 20px -5px rgba(6, 182, 212, 0.4);
    border-color: rgba(6, 182, 212, 0.3);
}

.btn-vault-premium {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    box-shadow: 0 10px 20px -5px rgba(236, 72, 153, 0.4);
    border-color: rgba(236, 72, 153, 0.3);
}

.btn-premium-dl-sm .dl-label {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-premium-dl-sm .dl-desc {
    font-size: 0.65rem;
    opacity: 0.9;
    font-weight: 500;
}

.btn-premium-dl-sm i {
    font-size: 1.2rem;
    margin-bottom: 2px;
}

.btn-premium-dl-sm:hover {
    transform: none !important;
    filter: brightness(1.1);
}

.btn-premium-dl-sm:active {
    transform: none !important;
}

.btn-premium-dl-sm::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.6s;
}

.btn-premium-dl-sm:hover::before {
    left: 100%;
}
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.btn-vault-premium:hover {
    transform: none !important;
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.5);
}

.btn-premium-dl-sm i {
    font-size: 1.3rem;
    margin-bottom: 2px;
}

.btn-premium-dl-sm .dl-label {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-premium-dl-sm .dl-desc {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
}

.btn-premium-dl-sm.active-primary i {
    color: #fff;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.5));
}

.btn-premium-dl-sm.active-primary .dl-desc {
    color: rgba(255, 255, 255, 0.85);
}

.btn-premium-dl-sm:active {
    transform: none !important;
}

/* ==========================================================================
   QUALITY SELECTOR & DROPDOWNS
   ========================================================================== */
.quality-dropdown {
    position: relative;
    flex: 1;
}

.dropdown-content-q {
    display: none;
    position: absolute;
    bottom: 110%;
    left: 0;
    width: 100%;
    background: #1a1b26;
    border: 1px solid var(--primary);
    border-radius: 12px;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: fadeInUp 0.3s ease;
}

.dropdown-content-q.show {
    display: block;
}

.dropdown-content-q a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: 0.2s;
}

.dropdown-content-q a:hover {
    background: var(--primary);
    color: #fff;
}

.dropdown-content-q a i {
    color: var(--primary-light);
}

.dropdown-content-q a:hover i {
    color: #fff;
}

.active-primary {
    background: var(--primary-gradient) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
}
    transform: translateY(-2px);
}

.btn-premium-dl-sm.active-primary {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4), inset 0 2px 5px rgba(255,255,255,0.3);
}

.btn-premium-dl-sm.active-primary .dl-desc {
    color: rgba(255, 255, 255, 0.7);
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { border-top: 1px solid var(--card-border); padding: 100px 5% 50px; background: #070812; }
.footer-grid {
    display: grid; grid-template-columns: 2fr repeat(2, 1fr) 1.5fr; gap: 60px;
    max-width: 1400px; margin: 0 auto;
}
.f-brand .nav-brand { margin-bottom: 25px; white-space: nowrap; }
.f-brand p { color: var(--text-muted); line-height: 1.8; max-width: 300px; }

.f-links h4 { font-size: 1.2rem; font-weight: 800; margin-bottom: 25px; color: #fff; }
.f-links a { display: block; color: var(--text-muted); margin-bottom: 15px; font-weight: 500; font-size: 0.95rem; }
.f-links a:hover { color: var(--primary); transform: none !important; }

.f-social h4 { font-size: 1.2rem; font-weight: 800; margin-bottom: 25px; }
.social-icons { display: flex; gap: 15px; }
.social-icons a {
    width: 50px; height: 50px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--card-border); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.social-icons a:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: none !important; }

.footer-bottom {
    border-top: 1px solid var(--card-border); margin-top: 80px; padding-top: 40px;
    text-align: center; color: var(--text-muted); font-size: 0.9rem; font-weight: 500;
}

/* ==========================================================================
   ADMIN DASHBOARD (GENERAL STYLES)
   ========================================================================== */
.admin-card.popular {
    border-color: var(--primary);
    background: rgba(168, 85, 247, 0.05);
    position: relative;
    overflow: hidden;
}

.popular-badge-admin {
    position: absolute;
    top: 10px;
    right: -32px;
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 6px 35px;
    transform: rotate(45deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Colores de etiquetas */
.popular-badge-admin.badge-recomendado { background: #3b82f6; color: white; } /* Azul */
.popular-badge-admin.badge-mas-usado { background: #10b981; color: white; } /* Verde */
.popular-badge-admin.badge-premium { background: #a855f7; color: white; } /* Morado */
.popular-badge-admin.badge-oferta { background: #ef4444; color: white; } /* Rojo */
.popular-badge-admin.badge-top { background: #ffd700; color: #000; } /* Oro */

.btn-action-admin-delete {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    margin-left: auto;
}

.btn-action-admin-delete:hover {
    background: #ef4444;
    color: white;
}

.admin-view {
    animation: fadeInView 0.3s ease-in-out;
}

@keyframes fadeInView {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fix for Select height and padding */
select.input-pro {
    padding-right: 40px;
    cursor: pointer;
}

/* Ensure admin main content has proper padding and scrolling */
.admin-main-content {
    flex: 1;
    padding: 40px;
    height: 100vh;
    overflow-y: auto;
    position: relative;
    background: #05060f;
}

/* Panel Layouts (Admin & User) */
.admin-dashboard {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: #05060f !important; /* Fondo ultra oscuro para que no se trasluzca nada */
    z-index: 99999 !important;
    display: none; /* Controlado por JS */
    overflow: hidden !important;
    animation: panelEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    flex-direction: row; /* Sidebar a la izquierda, contenido a la derecha */
}

/* Cuando el panel está activo, en PC debe ser flex */
.admin-dashboard[style*="display: block"],
.admin-dashboard[style*="display: flex"] {
    display: flex !important;
}

@keyframes panelEnter {
    from { opacity: 0; transform: translateY(-3px); filter: blur(10px); }
    to { opacity: 1; transform: scale(1); filter: blur(0); }
}

.admin-sidebar {
    width: 280px; /* Un poco más ancha para mejor legibilidad */
    background: rgba(8, 10, 20, 0.98) !important;
    backdrop-filter: blur(30px) saturate(160%);
    border-right: 1px solid rgba(168, 85, 247, 0.15);
    display: flex;
    flex-direction: column;
    padding: 25px 15px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    z-index: 10001;
    position: relative;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.4);
}

/* RESPONSIVE: Comportamiento en móviles */
@media (max-width: 1024px) {
    .admin-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: translateX(-100%) translateZ(0) !important;
        z-index: 100000 !important;
        will-change: transform;
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: #080a14 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .admin-sidebar.active {
        transform: translateX(0) translateZ(0) !important;
    }

    /* Optimizar el overlay */
    .admin-sidebar-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.7) !important;
        will-change: opacity;
    }

    .admin-sidebar-overlay.active {
        display: block;
    }
}

/* En PC la barra lateral es FIJA y NO se puede quitar */
@media (min-width: 1025px) {
    .admin-sidebar {
        position: relative !important;
        left: 0 !important;
        width: 280px !important;
        min-width: 280px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 10001 !important;
        transition: none !important;
    }

    /* Ocultar elementos de control de sidebar en PC */
    .close-admin-sidebar,
    #closeUserSidebarBtn,
    #closeAdminSidebarBtn,
    .admin-sidebar-overlay,
    .admin-hamburger {
        display: none !important;
    }

    .admin-main-content {
        flex: 1 !important;
        width: auto !important;
    }
}

.admin-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--primary), var(--secondary), transparent);
    opacity: 0.6;
}

.admin-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(7, 9, 15, 0.75);
    backdrop-filter: blur(12px);
    z-index: 9999;
}

.admin-sidebar-overlay.active {
    display: block;
}

.admin-logo {
    padding: 0 15px;
    margin-bottom: 35px;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
}

.admin-logo i {
    font-size: 2rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 12px;
    filter: drop-shadow(0 0 10px var(--primary-glow));
}
.admin-logo span { color: var(--primary); }

.admin-nav {
    flex: 1;
    padding: 0 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.admin-nav::-webkit-scrollbar {
    width: 4px;
}
.admin-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
}

.admin-nav-link, .user-nav-link {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: #94a3b8;
    font-weight: 600;
    border-radius: 12px;
    margin: 3px 0;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.85rem;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.01);
}

.admin-nav-link i, .user-nav-link i {
    font-size: 0.9rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(168, 85, 247, 0.08);
    border-radius: 8px;
    margin-right: 10px;
    transition: all 0.3s ease;
    color: var(--primary);
}

.admin-nav-link:hover, .user-nav-link:hover {
    background: rgba(168, 85, 247, 0.08);
    color: #fff;
    transform: none !important;
    border-color: rgba(168, 85, 247, 0.2);
}

.admin-nav-link:hover i, .user-nav-link:hover i {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 12px var(--primary-glow);
}

.admin-nav-link.active, .user-nav-link.active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.1));
    color: #fff;
    font-weight: 800;
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.2);
}

.admin-nav-link.active i, .user-nav-link.active i {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 15px var(--primary-glow);
}

/* Premium Lock Effects */
.user-nav-link.premium-locked {
    position: relative;
    opacity: 0.8;
    filter: grayscale(0.3);
    cursor: pointer;
    background: rgba(0, 0, 0, 0.1) !important; /* Fondo más oscuro para que resalte el candado */
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.user-nav-link.premium-locked:hover {
    filter: grayscale(0);
    opacity: 1;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 215, 0, 0.2) !important;
}

/* El icono principal del botón (ej: la nube) se ve más tenue */
.user-nav-link.premium-locked i:not(.lock-icon) {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #64748b !important;
}

/* Estilo del Candado Iluminado */
.user-nav-link.premium-locked .lock-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none !important; /* Quitamos el fondo morado */
    color: #ffcc00 !important; /* Oro brillante */
    font-size: 0.8rem !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 5px rgba(255, 204, 0, 0.6)); /* Brillo dorado */
    animation: lockGlow 2.5s infinite ease-in-out;
    margin-left: auto;
}

@keyframes lockGlow {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(255, 204, 0, 0.4));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.8));
        transform: scale(1.15);
        color: #fff4bd !important;
    }
}

.sidebar-btn-upgrade-vip {
    width: 100%;
    background: linear-gradient(45deg, #ffd700, #ffae00);
    border: none;
    border-radius: 12px;
    padding: 10px 15px;
    color: #000;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.sidebar-btn-upgrade-vip:hover {
    transform: none;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}

.btn-vip-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
}

.arrow-vip {
    font-size: 0.7rem;
    opacity: 0.7;
}

.admin-sidebar-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

/* Estilo especial para el botón de planes en el sidebar */
.plan-link-highlight {
    border: 1px dashed rgba(168, 85, 247, 0.4) !important;
    background: rgba(168, 85, 247, 0.04) !important;
    margin-top: 2px !important; /* Reduce el espacio con el de arriba */
}

.plan-link-highlight:hover {
    background: rgba(168, 85, 247, 0.1) !important;
    border-style: solid !important;
    border-color: var(--primary) !important;
}

.plan-link-highlight small {
    transition: color 0.3s ease;
}

.plan-link-highlight:hover small {
    color: #fff !important;
}
    padding: 10px;
    margin: 5px 12px 15px 12px; /* Reducimos margen inferior para que no tape botones */
    transition: all 0.3s ease;
    position: relative;
}

.admin-sidebar-card.is-pro {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.07) 0%, rgba(0, 0, 0, 0.2) 100%);
    border: 1px solid rgba(0, 210, 255, 0.25);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.admin-sidebar-card.is-vip {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.07) 0%, rgba(0, 0, 0, 0.2) 100%);
    border: 1px solid rgba(255, 215, 0, 0.25);
}

.admin-sidebar-card p {
    font-size: 0.5rem !important;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px !important;
}

.admin-sidebar-card h4 {
    font-size: 0.8rem !important;
    margin-bottom: 5px !important;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}

.plan-benefits-sidebar {
    list-style: none;
    padding: 0;
    margin: 5px 0;
    font-size: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 5px;
}

.plan-benefits-sidebar li {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.6);
}

.upgrade-msg-sidebar {
    font-size: 0.6rem;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 5px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

/* Botones de Mejora más pequeños */
.btn-upgrade-sidebar {
    padding: 6px 10px !important;
    font-size: 0.7rem !important;
    border-radius: 8px !important;
    margin-top: 5px !important;
}

/* MEJORAS PREMIUM PARA EL BUSCADOR */
.is-vip-user .panel-search-section-pro {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, rgba(11, 13, 23, 0.95) 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(251, 191, 36, 0.05);
}

.is-vip-user .panel-search-pro {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.is-vip-user .panel-search-pro:focus-within {
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.02);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.1);
}

.is-vip-user .input-wrapper-pro i {
    color: #fbbf24;
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.5));
}

.is-vip-user #panelVideoUrl {
    color: #fff;
    font-size: 1.1rem;
}

.is-vip-user #panelVideoUrl::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Efecto de borde animado para Premium */
.is-vip-user .panel-search-section-pro::after {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, transparent, rgba(251, 191, 36, 0.2), transparent);
    z-index: -1;
    border-radius: inherit;
    animation: premium-border-flow 4s linear infinite;
}

@keyframes premium-border-flow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* SISTEMA DE BLOQUEO PARA USUARIOS GRATIS EN NAV */
.is-free-user .vip-only-lock-nav {
    position: relative;
}

.is-free-user .btn-ultra-sidebar.vip-only-lock-nav {
    background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%) !important;
    filter: grayscale(0.6);
    opacity: 0.9;
}

.is-free-user .btn-ultra-sidebar.vip-only-lock-nav i {
    animation: none;
    color: #9ca3af !important;
}

.is-free-user .vip-only-lock-nav::after {
    content: '\f023'; /* fas fa-lock */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: #fbbf24;
    background: rgba(0,0,0,0.85);
    width: 26px;
    height: 26px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 99999 !important;
    border: 1px solid rgba(251, 191, 36, 0.6);
    pointer-events: none;
    box-shadow: 0 0 15px rgba(0,0,0,0.7);
}

.is-free-user .vip-only-lock-nav:hover {
    background: rgba(255, 255, 255, 0.02) !important;
    cursor: pointer;
}

/* Redirigir clics en nav bloqueados a planes si es free */
.is-free-user .vip-only-lock-nav {
    pointer-events: auto !important;
}

/* SISTEMA DE BLOQUEO PARA USUARIOS GRATIS */
.is-free-user .vip-only-lock-feature {
    position: relative;
    overflow: hidden !important;
    cursor: pointer !important;
}

.is-free-user .vip-only-lock-feature::after {
    content: '\f023'; /* fas fa-lock */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 8, 15, 0.05); /* Transparencia extrema: 0.05 */
    backdrop-filter: blur(1px); /* Desenfoque casi imperceptible */
    -webkit-backdrop-filter: blur(1px);
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem; /* Candado más grande y visible */
    z-index: 9999;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Sombra para que resalte el candado sobre el fondo claro */
}

.is-free-user .vip-only-lock-feature:hover::after {
    background: rgba(10, 10, 15, 0.2);
    font-size: 4.5rem;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.9);
}

.is-free-user .vip-only-lock-feature > * {
    opacity: 0.4 !important; /* Contenido más visible: de 0.15 a 0.4 */
    filter: grayscale(0.2); /* Menos gris */
    pointer-events: none !important;
    user-select: none !important;
    transition: all 0.3s ease;
}

.is-free-user .vip-only-lock-feature:hover > * {
    opacity: 0.3 !important;
}

/* Estilos para Usuarios PRO/VIP en Dashboard */
.plan-badge-mini {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.1);
}

.is-pro-user .plan-badge-mini {
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
}

.is-vip-user .plan-badge-mini {
    background: linear-gradient(90deg, #ffd700, #f59e0b);
    color: #000;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.priority-radar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 6px 14px;
    border-radius: 100px;
    color: #10b981;
    font-size: 0.75rem;
    font-weight: 700;
    position: relative;
}

.radar-ping {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    position: relative;
}

.radar-ping::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #10b981;
    border-radius: 50%;
    animation: ping 1.5s infinite;
}

@keyframes ping {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

.is-pro-user .user-card-pro,
.is-vip-user .user-card-pro,
.is-pro-user .price-card,
.is-pro-user .price-card,
.is-vip-user .price-card,
.is-pro-user .search-box-container,
.is-vip-user .search-box-container,
.is-pro-user .ultra-hero-card,
.is-vip-user .ultra-hero-card,
.is-pro-user .btn-ultra-trigger,
.is-vip-user .btn-ultra-trigger,
.is-pro-user .admin-card,
.is-vip-user .admin-card {
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease !important;
    transform: none !important;
}

.is-pro-user *:hover,
.is-vip-user *:hover {
    transform: none !important;
    translate: none !important;
    scale: none !important;
}
    border-color: rgba(0, 210, 255, 0.2);
    box-shadow: 0 8px 30px rgba(0, 210, 255, 0.05);
}

/* --- SELECTOR DE BENEFICIOS ADMIN --- */
.features-selector-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-height: 200px;
    overflow-y: auto;
    margin-top: 5px;
}

.feature-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    user-select: none;
}

.feature-checkbox-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.feature-checkbox-item.active {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
    color: #fff;
}

.feature-checkbox-item input {
    display: none;
}

.feature-checkbox-item i {
    font-size: 0.8rem;
    color: #64748b;
}

.feature-checkbox-item.active i {
    color: #a855f7;
}

/* Colores especiales para el selector admin - ELITE VERSION */
.feature-checkbox-item.feat-gold {
    border: 1px dashed rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.05);
}
.feature-checkbox-item.feat-gold i { color: #fbbf24 !important; text-shadow: 0 0 10px rgba(251, 191, 36, 0.8); }
.feature-checkbox-item.feat-gold span {
    color: #fbbf24 !important;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px rgba(251, 191, 36, 0.3);
}
.feature-checkbox-item.feat-gold.active {
    border: 2px solid #fbbf24;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.25));
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.feature-checkbox-item.feat-purple {
    border: 1px dashed rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.05);
}
.feature-checkbox-item.feat-purple i { color: #a855f7 !important; text-shadow: 0 0 10px rgba(168, 85, 247, 0.8); }
.feature-checkbox-item.feat-purple span {
    color: #a855f7 !important;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px rgba(168, 85, 247, 0.3);
}
.feature-checkbox-item.feat-purple.active {
    border: 2px solid #a855f7;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(147, 51, 234, 0.25));
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

.feature-checkbox-item.feat-ultra {
    border: 1px solid rgba(0, 210, 255, 0.4);
    background: rgba(0, 210, 255, 0.08);
    position: relative;
    overflow: hidden;
}
.feature-checkbox-item.feat-ultra::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shine-feat 2s infinite;
}
.feature-checkbox-item.feat-ultra i { color: #00d2ff !important; animation: pulse-blue 1.5s infinite; text-shadow: 0 0 10px #00d2ff; }
.feature-checkbox-item.feat-ultra span {
    color: #00d2ff !important;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.65rem;
    text-shadow: 0 0 5px rgba(0, 210, 255, 0.4);
}
.feature-checkbox-item.feat-ultra.active {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.4), rgba(58, 123, 213, 0.4));
    border-color: #00d2ff;
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.4);
}

@keyframes pulse-blue {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Custom Scrollbar for Features */
.features-selector-container::-webkit-scrollbar {
    width: 4px;
}
.features-selector-container::-webkit-scrollbar-track {
    background: transparent;
}
.features-selector-container::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.3);
    border-radius: 10px;
}

.panel-search-section-pro {
    background: linear-gradient(145deg, rgba(20, 20, 25, 0.9), rgba(10, 10, 15, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 30px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    transition: all 0.4s ease;
}

.panel-search-section-pro:hover {
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: 0 25px 50px rgba(168, 85, 247, 0.1);
    transform: none !important;
}

.sh-left i {
    color: #a855f7;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
    animation: none !important;
}

@keyframes pulse-purple {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}
}

/* Estilo ULTRA V3 Premium para Sidebar - ELITE VERSION (SMALLER) */
.btn-ultra-sidebar {
    background: #0f172a !important;
    margin: 8px 12px !important; /* Margen reducido */
    border-radius: 10px !important;
    padding: 1.5px !important; /* Borde más fino */
    position: relative;
    /* overflow: hidden; */ /* COMENTADO PARA PERMITIR QUE EL CANDADO SOBRESALGA SI ES NECESARIO */
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    cursor: pointer;
    border: none !important;
}

.btn-ultra-sidebar .inner-content {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    width: 100%;
    height: 100%;
    padding: 8px 14px; /* Padding reducido para hacerlo más pequeño */
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    position: relative;
}

.btn-ultra-sidebar span {
    color: #fff !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.65rem; /* Fuente más pequeña */
    background: linear-gradient(to right, #fff, #fbbf24, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shine-gold 3s linear infinite;
}

.btn-ultra-sidebar i {
    color: #fbbf24 !important;
    font-size: 0.9rem; /* Icono más pequeño */
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.6));
    animation: pulse-gold 2s infinite;
}

/* Borde Giratorio de Oro Cuántico */
.btn-ultra-sidebar::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent,
        transparent,
        transparent,
        #fbbf24,
        #f59e0b,
        #fbbf24
    );
    animation: rotate-ultra 3s linear infinite;
    z-index: 1;
}

@keyframes rotate-ultra {
    100% { transform: rotate(360deg); }
}

@keyframes shine-gold {
    to { background-position: 200% center; }
}

/* Responsividad para el botón ULTRA en Móviles - Versión Mini */
@media (max-width: 768px) {
    .btn-ultra-sidebar {
        margin: 2px 15px !important; /* Más centrado y con menos margen vertical */
        border-radius: 8px !important;
        padding: 1px !important; /* Borde de color más fino */
    }

    .btn-ultra-sidebar .inner-content {
        height: 30px !important; /* Altura mini para que no ocupe nada */
        padding: 0 10px !important;
        gap: 6px !important;
        border-radius: 7px !important;
    }

    .btn-ultra-sidebar span {
        font-size: 0.55rem !important; /* Texto bien pequeño y elegante */
        letter-spacing: 0.5px !important;
    }

    .btn-ultra-sidebar i {
        font-size: 0.75rem !important; /* Rayo pequeño */
    }

    /* Ajuste del candado para que no estorbe en el diseño mini */
    .is-free-user .btn-ultra-sidebar.vip-only-lock-nav .inner-content::after {
        width: 16px !important;
        height: 16px !important;
        font-size: 7px !important;
        right: 5px !important;
    }
}

.btn-ultra-sidebar:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(251, 191, 36, 0.3);
}

/* Estado bloqueado para el botón Ultra */
.is-free-user .btn-ultra-sidebar.vip-only-lock-nav {
    background: #1f2937 !important;
    filter: grayscale(1);
    opacity: 0.7;
}

.is-free-user .btn-ultra-sidebar.vip-only-lock-nav::before {
    background: conic-gradient(transparent, #4b5563, transparent);
}

/* Vista Ultra V3 Especial - REDISEÑO PREMIUM LIMPIO */
.ultra-v3-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    animation: fadeInSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.ultra-hero-card:hover {
    transform: none !important;
}

.ultra-downloader-v3:hover {
    transform: none !important;
}

.search-box-container:hover {
    transform: none !important;
}

.ultra-hero-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.ultra-hero-card::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.ultra-badge-large {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 3px;
    display: inline-block;
    margin-bottom: 15px; /* Reducido margen inferior */
    border: 1px solid rgba(251, 191, 36, 0.3);
    text-transform: uppercase;
}

.ultra-title-xl {
    font-size: 4.2rem; /* Ligeramente más pequeño para ahorrar espacio vertical */
    font-weight: 950;
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 15px; /* Reducido margen inferior */
    background: linear-gradient(180deg, #fff 30%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ultra-description {
    color: rgba(255,255,255,0.6);
    font-size: 1rem; /* Ligeramente más pequeño */
    max-width: 650px;
    margin-bottom: 30px; /* Reducido margen inferior */
    line-height: 1.5;
}

/* OCULTAR ELEMENTOS PARA PRO/VIP - REFORZADO */
body/* Tarjeta removida por conflicto */
.is-pro-user .server-status-card-elite-removed { display: none !important; }
body.is-vip-user .server-status-card-elite,
/* Tarjeta removida por conflicto */
.is-pro-user .server-status-card-elite-removed { display: none !important; }
.is-vip-user .server-status-card-elite {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* DESCAGADOR ULTRA PRO - REDISEÑO TOTAL REFORZADO */
.ultra-downloader-v3 {
    width: 100%;
    max-width: 800px;
    padding: 30px !important;
    border-radius: 35px !important;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
    z-index: 1;

    /* Borde Animado de "Energía" usando el truco de background-clip */
    border: 3px solid transparent !important;
    background:
        linear-gradient(rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.95)) padding-box,
        linear-gradient(90deg, #fbbf24, #a855f7, #3b82f6, #fbbf24) border-box !important;
    background-size: 400% 400% !important;
    animation: flow-border 4s linear infinite !important;

    /* Brillo Exterior (Glow) */
    box-shadow:
        0 20px 50px rgba(0,0,0,0.6),
        0 0 30px rgba(168, 85, 247, 0.2),
        inset 0 0 20px rgba(255,255,255,0.05) !important;
}

@keyframes flow-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.u-input-group {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 24px !important;
    padding: 5px 15px 5px 25px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}

.u-input-group:focus-within {
    border-color: #a855f7 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.3), inset 0 2px 10px rgba(0,0,0,0.5);
    transform: translateY(-2px);
}

.u-input-group:focus-within {
    border-color: #a855f7 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.2);
    transform: translateY(-2px);
}

.u-input-group input {
    background: transparent;
    border: none;
    color: #fff;
    padding: 15px 0;
    font-size: 1.1rem !important;
    width: 100%;
    outline: none;
    font-weight: 500;
}

/* Botón de "Cristal Líquido" */
.btn-elite-process {
    width: 100%;
    background: #ffffff !important;
    color: #000000 !important;
    border: none;
    padding: 22px !important;
    border-radius: 22px !important;
    font-weight: 900 !important;
    font-size: 1.25rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    box-shadow: 0 15px 35px rgba(255,255,255,0.1);
}

.btn-elite-process:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(255,255,255,0.25);
    background: #f8fafc !important;
}

.btn-elite-process i {
    font-size: 1.4rem;
    transition: transform 0.4s ease;
}

.btn-elite-process:hover i {
    transform: translateX(10px);
}

.u-input-group input::placeholder {
    color: rgba(255,255,255,0.3);
}

.btn-ultra-trigger {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    color: #000;
    border: none;
    padding: 20px 50px;
    border-radius: 15px;
    font-weight: 900;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3), 0 0 0 0px rgba(245, 158, 11, 0.2);
}

.btn-ultra-trigger:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(245, 158, 11, 0.5), 0 0 20px rgba(245, 158, 11, 0.3);
    filter: brightness(1.15);
}

.btn-ultra-trigger i {
    font-size: 1.3rem;
    animation: lightningStrike 2s infinite;
}

@keyframes lightningStrike {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2) rotate(10deg); filter: drop-shadow(0 0 10px #fff); }
}

/* --- NIVEL ELITE V3: CRYSTALIZED MINIMAL (SOLO PRO) --- */
.premium-downloader-card {
    background: linear-gradient(135deg, rgba(10, 11, 18, 0.7) 0%, rgba(5, 6, 10, 0.9) 100%);
    backdrop-filter: blur(50px) saturate(200%);
    -webkit-backdrop-filter: blur(50px) saturate(200%);
    border-radius: 28px;
    padding: 35px;
    margin: 0 0 25px 0;
    width: 100%;
    position: relative;
    border: 1.5px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6),
                0 0 20px rgba(168, 85, 247, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-downloader-card:hover {
    border-color: rgba(168, 85, 247, 0.7);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8),
                0 0 35px rgba(168, 85, 247, 0.2);
    transform: translateY(-2px);
}

/* El "Arco" o Brillo Superior */
.premium-downloader-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.8), transparent);
    z-index: 1;
}

.premium-action-row {
    display: flex;
    width: 100%;
    gap: 15px;
    align-items: center;
}

@media (max-width: 768px) {
    .premium-action-row {
        flex-direction: column;
    }
}


/* Indicador de estado "Nano" - ULTRA PREMIUM REVAMP */
.premium-status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.05));
    padding: 8px 18px;
    border-radius: 100px;
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.15),
                inset 0 0 12px rgba(168, 85, 247, 0.1);
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo barriendo el badge */
.premium-status-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shine-badge 4s infinite;
}

@keyframes shine-badge {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #c084fc;
    border-radius: 50%;
    box-shadow: 0 0 15px #a855f7, 0 0 30px rgba(168, 85, 247, 0.5);
    animation: pulse-pro-ultra 1.5s infinite;
}

@keyframes pulse-pro-ultra {
    0% { transform: scale(1); box-shadow: 0 0 10px #a855f7; }
    50% { transform: scale(1.4); box-shadow: 0 0 25px #c084fc, 0 0 40px rgba(168, 85, 247, 0.6); }
    100% { transform: scale(1); box-shadow: 0 0 10px #a855f7; }
}

.premium-status-indicator span {
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.8);
}

@keyframes pulse-pro {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 18px #a855f7; }
}

.premium-status-indicator span {
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #c084fc;
    text-transform: uppercase;
}

.premium-header-box h3 {
    font-size: 2.2rem;
    font-weight: 200;
    letter-spacing: -1.5px;
    color: #fff;
    margin: 0;
    text-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.premium-header-box h3 b {
    font-weight: 800;
    color: #fff;
    letter-spacing: -2px;
}

.premium-input-wrapper {
    flex: 1;
}

.premium-input-wrapper input {
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    color: #fff;
    font-size: 1.1rem;
    padding: 20px 28px;
    outline: none;
    text-align: left;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.premium-input-wrapper input:focus {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.15),
                inset 0 2px 4px rgba(0,0,0,0.2);
    transform: scale(1.01);
}

.premium-input-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.15);
    font-weight: 300;
}

/* Botón "Cerámica Líquida" con Shimmer */
.btn-premium-v3 {
    width: auto;
    min-width: 190px;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    color: #000;
    border: none;
    padding: 18px 35px;
    border-radius: 18px;
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 10px 20px rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.btn-premium-v3:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(255,255,255,0.2);
    background: #fff;
}

.btn-premium-v3 i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.btn-premium-v3:hover i {
    transform: translateX(5px);
}
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-premium-v3:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255,255,255,0.2);
}

@media (max-width: 768px) {
    .btn-premium-v3 {
        width: 100%;
    }
}
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-premium-v3::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
    animation: shimmer-elite 4s infinite;
}

@keyframes shimmer-elite {
    0% { left: -150%; }
    30% { left: 150%; }
    100% { left: 150%; }
}

.btn-premium-v3:active {
    transform: scale(0.96);
    background: #f0f0f0;
}

/* Loader Pro Slim */
.premium-loader-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: #a855f7;
    transition: width 0.4s ease;
}

/* --- AJUSTE MÓVIL ELITE FINAL - ULTRA COMPACTO --- */
@media (max-width: 768px) {
    .premium-downloader-card {
        max-width: 88% !important; /* Más estrecho para que respire por los lados */
        margin: 10px auto 20px auto !important;
        padding: 15px 15px !important; /* Mucho menos padding vertical */
        border-radius: 18px !important;
        background: rgba(10, 11, 18, 0.4) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Arco superior casi invisible, muy fino */
    .premium-downloader-card::before {
        height: 1px !important;
        background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.4), transparent) !important;
        opacity: 0.5 !important;
    }

    .premium-header-box h3 {
        font-size: 1.2rem !important; /* Texto más pequeño y elegante */
        margin: 8px 0 !important;
        letter-spacing: -0.2px !important;
        font-weight: 300 !important;
        color: #fff !important;
    }

    .premium-header-box h3 b {
        font-weight: 700 !important;
    }

    .premium-status-indicator {
        padding: 4px 10px !important;
        transform: scale(0.85) !important;
        margin-bottom: 2px !important;
        background: rgba(168, 85, 247, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .premium-status-indicator span {
        font-size: 0.45rem !important;
        letter-spacing: 1px !important;
        color: #d8b4fe !important;
    }

    .status-dot {
        width: 4px !important;
        height: 4px !important;
    }

    .premium-action-row {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important; /* Espacio mínimo entre input y botón */
    }

    .premium-input-wrapper input {
        text-align: left !important;
        padding: 10px 15px !important;
        font-size: 0.85rem !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .btn-premium-v3 {
        width: 100% !important;
        padding: 12px !important;
        font-size: 0.85rem !important;
        border-radius: 10px !important;
        background: #fff !important;
        color: #000 !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 12px rgba(255,255,255,0.05) !important;
    }

    /* Ocultar iconos de features en móvil para ahorrar espacio vertical */
    .premium-features-badge-row {
        display: none !important;
    }
}
        padding: 14px !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
        background: #fff !important;
        color: #000 !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        box-shadow: 0 5px 15px rgba(255,255,255,0.08) !important;
    }

    /* Iconos inferiores más sutiles */
    .premium-features-badge-row {
        display: flex !important;
        justify-content: center !important;
        gap: 15px !important;
        margin-top: 18px !important;
        opacity: 0.6 !important;
    }

    .f-badge i {
        font-size: 1rem !important;
    }

    .f-badge span {
        font-size: 0.55rem !important;
    }
}

.ultra-v3-container {
    background: linear-gradient(165deg, rgba(20, 21, 33, 0.9), rgba(10, 11, 18, 0.95));
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 30px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5), 0 0 30px rgba(251, 191, 36, 0.05);
    position: relative;
    overflow: hidden;
}

.ultra-badge {
    background: linear-gradient(90deg, #fbbf24, #d97706);
    color: #000;
    display: inline-block;
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

.ultra-header h2 {
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 10px;
    background: linear-gradient(to bottom, #fff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ultra-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 35px;
}

.u-feat {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.u-feat:hover {
    background: rgba(251, 191, 36, 0.05);
    border-color: rgba(251, 191, 36, 0.2);
}

.u-feat i {
    color: #fbbf24;
    font-size: 1.2rem;
}

.u-feat span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Fix para que los resultados floten sobre el fondo */
#resultContainer {
    position: relative;
    z-index: 100;
    margin-bottom: 50px;
}

.u-feat-card {
    background: rgba(255, 255, 255, 0.02);
    padding: 30px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    transition: all 0.3s ease;
}

.u-feat-card:hover {
    background: rgba(251, 191, 36, 0.04);
    border-color: rgba(251, 191, 36, 0.2);
    transform: none;
}

.u-feat-card i {
    font-size: 2.2rem;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.u-feat-card h4 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.u-feat-card p {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
}

/* El botón Ultra con estética de Oro Cuántico */
.btn-ultra-v3 {
    position: relative;
    background: linear-gradient(135deg, #f59e0b 0%, #78350f 100%);
    border: none;
    padding: 2px; /* Espacio para el borde de luz */
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex !important; /* Aseguramos que se vea para tentar al usuario */
}

.ultra-content {
    background: #0f172a;
    padding: 12px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    height: 100%;
    z-index: 2;
    position: relative;
}

.ultra-text span {
    display: block;
    font-weight: 900;
    font-size: 0.9rem;
    background: linear-gradient(to right, #fbbf24, #fff, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shine-gold 3s linear infinite;
}

.btn-ultra-v3::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, transparent, transparent, #fbbf24);
    animation: rotate-ultra 4s linear infinite;
}

@keyframes rotate-ultra {
    100% { transform: rotate(360deg); }
}

@keyframes shine-gold {
    to { background-position: 200% center; }
}

/* Responsividad para el botón ULTRA en Móviles - Versión Mini */
@media (max-width: 768px) {
    .btn-ultra-sidebar {
        margin: 2px 15px !important; /* Más centrado y con menos margen vertical */
        border-radius: 8px !important;
        padding: 1px !important; /* Borde de color más fino */
    }

    .btn-ultra-sidebar .inner-content {
        height: 30px !important; /* Altura mini para que no ocupe nada */
        padding: 0 10px !important;
        gap: 6px !important;
        border-radius: 7px !important;
    }

    .btn-ultra-sidebar span {
        font-size: 0.55rem !important; /* Texto bien pequeño y elegante */
        letter-spacing: 0.5px !important;
    }

    .btn-ultra-sidebar i {
        font-size: 0.75rem !important; /* Rayo pequeño */
    }

    /* Ajuste del candado para que no estorbe en el diseño mini */
    .is-free-user .btn-ultra-sidebar.vip-only-lock-nav .inner-content::after {
        width: 16px !important;
        height: 16px !important;
        font-size: 7px !important;
        right: 5px !important;
    }
}

/* Estado bloqueado para el botón Ultra */
.is-free-user .btn-ultra-v3 {
    filter: grayscale(0.5) contrast(0.8);
    opacity: 0.8;
}

.is-free-user .btn-ultra-v3::after {
    font-size: 1.5rem !important; /* Más pequeño para botones */
}

/* --- BUSCADOR REDISEÑADO (IMAGEN V2.4) --- */
.panel-search-pro-box {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.input-wrapper-pro {
    position: relative;
    width: 100%;
    max-width: 800px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.input-wrapper-pro:focus-within {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
}

.input-wrapper-pro input {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.1rem;
    width: 100%;
    outline: none;
}

.input-wrapper-pro i {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.2rem;
}

/* Línea de escaneo (Efecto Matrix/Premium) */
.input-scan-line {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
    pointer-events: none;
}

.input-wrapper-pro.scanning .input-scan-line {
    animation: scan-move 2s linear infinite;
}

@keyframes scan-move {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Botón Estándar (Estilo de la Imagen) */
.btn-download-now {
    background: #ff4d4d; /* El color coral/rojo de la imagen */
    color: white;
    border: none;
    padding: 14px 35px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 77, 77, 0.3);
}

.btn-download-now:hover {
    box-shadow: 0 15px 30px rgba(255, 77, 77, 0.4);
    filter: brightness(1.1);
    transform: none !important;
}

.btn-download-now:active {
    transform: none !important;
}

/* Botón ULTRA (Oro Cuántico) */
.btn-ultra-v3 {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    box-shadow: 0 10px 25px rgba(251, 191, 36, 0.2);
}

.btn-ultra-v3 .ultra-content {
    background: #0f172a;
}

/* Barra de progreso invisible hasta que inicia */
.engine-loader-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-top: 20px;
    overflow: hidden;
    display: none;
}

.loader-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #a855f7, #ec4899);
    box-shadow: 0 0 10px var(--primary-glow);
    transition: width 0.3s ease;
}

/* --- DETALLES DE LUJO PREMIUM --- */

/* Aura Giratoria para Avatar VIP */
.is-vip-user .header-avatar-wrapper::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: conic-gradient(from 0deg, transparent, #fbbf24, #fff, #fbbf24, transparent);
    border-radius: 12px;
    animation: rotate-aura 2s linear infinite;
    z-index: -1;
    filter: blur(5px);
}

@keyframes rotate-aura {
    to { transform: rotate(360deg); }
}

/* Widget de Velocidad de Servidor (Solo VIP/PRO) */
.speed-gauge-container {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.gauge-visual {
    position: relative;
    width: 120px;
    height: 60px;
    overflow: hidden;
}

.gauge-arc {
    width: 120px;
    height: 120px;
    border: 8px solid rgba(255,255,255,0.05);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    transform: rotate(-45deg);
}

.gauge-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border: 8px solid var(--primary);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    transform: rotate(-45deg); /* Esto cambiará con JS */
    filter: drop-shadow(0 0 8px var(--primary-glow));
    transition: transform 1.5s ease;
}

.gauge-needle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: 50px;
    background: #fff;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(-90deg);
    transition: transform 1.5s ease;
}

.speed-value {
    font-size: 1.5rem;
    font-weight: 900;
    font-family: 'Courier New', Courier, monospace;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

    border-color: rgba(255, 215, 0, 0.2);
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.05);
}

.plan-dot-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #05060f;
    background: #94a3b8;
}

.is-pro-user .plan-dot-indicator { background: #00d2ff; }
.is-vip-user .plan-dot-indicator { background: #ffd700; box-shadow: 0 0 8px #ffd700; }

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-modal-card {
    background: #0a0b14;
    border: 1px solid rgba(168, 85, 247, 0.2);
    width: 90%;
    max-width: 420px;
    border-radius: 24px;
    padding: 30px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(168, 85, 247, 0.1);
    text-align: center;
    overflow: hidden;
}

.premium-modal-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.close-premium-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.close-premium-modal:hover {
    background: #ff4d4d;
    transform: rotate(90deg);
}

.welcome-badge-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #00d2ff, #3a7bd5);
    border-radius: 18px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 210, 255, 0.3);
}

.modal-overtitle {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #94a3b8;
    margin-bottom: 5px;
}

.premium-modal-card h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-plan-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(168, 85, 247, 0.3), transparent);
    margin: 20px 0;
}

.plan-benefits-modal {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}

.plan-benefits-modal li {
    padding: 8px 0;
    color: #cbd5e1;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.plan-benefits-modal li i {
    color: #00d2ff;
}

.modal-upgrade-promo {
    background: rgba(255, 215, 0, 0.05);
    border: 1px dashed rgba(255, 215, 0, 0.3);
    padding: 20px;
    border-radius: 16px;
    margin-top: 25px;
}

.modal-upgrade-promo p {
    font-size: 0.8rem;
    color: #ffd700;
    margin-bottom: 15px;
}

.btn-modal-vip {
    width: 100%;
    padding: 12px;
    background: #ffd700;
    color: #000;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-modal-vip:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
}

/* MODAL PREMIUM BIENVENIDA */
.premium-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.premium-modal-card {
    position: relative;
    width: 90%;
    max-width: 380px;
    animation: slideUp 0.4s ease;
}

.premium-modal-card .admin-sidebar-card {
    margin: 0 !important;
    padding: 30px !important;
    border-width: 2px !important;
}

.close-premium-modal {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.close-premium-modal:hover {
    opacity: 1;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.btn-upgrade-sidebar.vip {
    background: #fbbf24 !important;
    color: #000 !important;
}

.btn-upgrade-sidebar:last-child {
    margin-bottom: 0 !important;
}

.btn-upgrade-sidebar:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.btn-upgrade-sidebar {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    color: #000 !important;
    font-weight: 700;
    font-size: 0.85rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-upgrade-sidebar:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    background: var(--primary-light);
    color: #fff !important;
}

/* Logout Section */
.btn-logout-panel {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.btn-logout-panel:hover {
    background: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.close-admin-sidebar {
    position: absolute;
    top: 25px;
    right: -50px; /* Hidden by default off-sidebar */
    background: rgba(15, 18, 30, 0.9);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 10002;
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
}

.admin-sidebar.active .close-admin-sidebar {
    right: 20px;
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1024px) {
    .admin-sidebar {
        position: fixed !important;
        left: -320px !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 290px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        z-index: 9999999 !important; /* Prioridad máxima sobre el overlay */
        background: #080a14 !important;
        backdrop-filter: none !important;
        filter: none !important; /* Elimina cualquier desenfoque heredado */
        padding: 10px !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
    }

    .admin-sidebar.active {
        left: 0 !important;
        box-shadow: 20px 0 60px rgba(0, 0, 0, 1) !important;
    }

    .admin-hamburger {
        display: flex !important;
    }

    .close-admin-sidebar {
        display: flex !important;
    }
}

    .admin-sidebar.active {
        left: 0;
        box-shadow: 20px 0 50px rgba(0, 0, 0, 0.9);
    }

    .admin-logo {
        padding: 10px !important;
        margin-bottom: 15px !important;
        font-size: 1.3rem !important;
    }

/* Navegación más compacta en móvil */
    .admin-nav-link, .user-nav-link {
        padding: 8px 12px !important;
        margin: 2px 0 !important;
        font-size: 0.85rem !important;
    }

    .admin-nav-link i, .user-nav-link i {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    /* Tarjeta de Membresía en Móvil */
    .admin-sidebar-card {
        margin: 5px !important;
        padding: 10px !important;
    }

    #planUpgradeButtons {
        gap: 5px;
    }

    .btn-upgrade-sidebar {
        padding: 8px 5px !important;
        font-size: 0.65rem !important;
    }

    /* Perfil de usuario compacto */
    .admin-user-bottom {
        margin: 5px !important;
        padding: 8px !important;
        gap: 6px !important;
    }

    #userPhoto, #adminPhoto {
        width: 32px;
        height: 32px;
    }

    .user-mini-meta strong, .user-info strong {
        font-size: 0.7rem !important;
        line-height: 1.1;
    }
    .user-mini-meta span, .user-info span {
        font-size: 0.6rem !important;
    }

    .profile-actions-mini {
        gap: 4px;
    }

    .profile-actions-mini a {
        padding: 3px;
        font-size: 0.8rem;
    }
}
        width: 32px;
        height: 32px;
    }
}


@media (max-width: 1024px) {
    .close-admin-sidebar {
        display: flex;
    }

    .admin-logo {
        padding: 30px 20px 20px;
    }
}
/* ==========================================================================
   USER DASHBOARD - PREMIUN V4.0 REFINEMENT (PC OPTIMIZED)
   ========================================================================== */
.elite-dashboard-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 25px;
}

.elite-horizontal-card {
    background: linear-gradient(165deg, #0f111a 0%, #07080d 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 25px 30px !important;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.elite-horizontal-card .card-header-elite {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.header-left {
    display: flex;
    align-items: center;
}

.status-indicator-online-pro {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot-pro {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 10px #10b981;
    animation: pulse-green 2s infinite;
}

.card-content-elite-grid {
    display: flex;
    align-items: center;
    gap: 30px;
    flex: 1;
}

.progress-circle-container-pro {
    width: 85px;
    height: 85px;
    flex-shrink: 0;
    position: relative;
}

.progress-circle-container-pro.cloud-blue .prog {
    stroke: #3b82f6 !important;
    filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.5));
}

.stats-info-pro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.stats-text-group h3 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
}

.stats-text-group p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    margin: 5px 0 0 0;
}

/* Timer Box (Según imagen solicitada) */
.reset-timer-box-pro {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 12px 20px;
    min-width: 150px;
    transition: all 0.3s ease;
}

.reset-timer-box-pro:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(168, 85, 247, 0.3);
    transform: translateX(-5px);
}

.timer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timer-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.timer-value {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    font-family: 'JetBrains Mono', monospace;
}

.timer-value i {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.2);
}

/* Almacenamiento Box */
.storage-usage-box-pro {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 16px;
    padding: 12px 20px;
    min-width: 160px;
}

.usage-content {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.usage-main .val {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
}

.usage-main .unit {
    font-size: 12px;
    font-weight: 700;
    color: #3b82f6;
    margin-left: 2px;
}

.usage-total {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

.mini-usage-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
}

.mini-usage-bar .fill {
    height: 100%;
    background: #3b82f6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    transition: width 1s ease;
}

.cloud-tier-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
}

@media (max-width: 992px) {
    .elite-dashboard-row {
        grid-template-columns: 1fr;
    }

    .stats-info-pro {
        flex-direction: column;
        align-items: flex-start;
    }

    .reset-timer-box-pro, .storage-usage-box-pro {
        width: 100%;
        align-items: flex-start;
    }

    .timer-content {
        align-items: flex-start;
    }
}
    justify-content: flex-end;
    gap: 8px;
}

.timer-wrapper-elite i {
    color: #a855f7;
    font-size: 14px;
}

.timer-wrapper-elite span {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}



.title-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-with-icon i {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.title-with-icon span {
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.storage-badge {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 800;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

/* Stats Display */
.main-stats-display {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.big-value {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.unit {
    color: #64748b;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 5px;
}

.total-label {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

/* Optimizacion Movil Extrema */
@media (max-width: 768px) {
    .user-dashboard-grid {
        gap: 20px;
        padding: 5px;
    }

    .stats-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .user-card-pro {
        padding: 20px;
        border-radius: 26px;
    }

    .big-value {
        font-size: 2rem;
    }

    /* Floating Effect for Mobile */
    .mobile-optimized-card {
        margin: 0 5px;
    }
}

/* Background Ornament */
.user-card-pro::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
    z-index: 0;
}

.card-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* RESULTADOS DE VIDEO MEJORADOS */
#resultContainer, #panelResultContainer, #ultraResultContainer {
    width: 100%;
    margin-top: 25px;
    display: none; /* Se activa por JS */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: zoomInElegant 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animación de emergencia central */
@keyframes zoomInElegant {
    from { transform: scale(0.9) translateY(40px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Asegurar que se vea cuando hay contenido */
#resultContainer:not(:empty),
#panelResultContainer:not(:empty),
#ultraResultContainer:not(:empty) {
    display: flex !important;
}

/* ==========================================================================
   ENGINE V4.0 - ULTRA PREMIUM GLASSMORPHISM
   ========================================================================== */
.video-result-card.elite-result-card {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(17, 19, 31, 0.7) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 28px !important;
    padding: 20px !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 25px auto !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    gap: 20px !important;
}

.video-info-elite {
    width: 100% !important;
    order: 1 !important; /* Siempre arriba */
}

.video-header-elite {
    margin-bottom: 15px !important;
}

.author-tag-elite {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #a855f7 !important;
    background: rgba(168, 85, 247, 0.15) !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

.video-title-elite {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.4 !important;
}

.download-actions-elite {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.btn-download-premium {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.btn-download-premium.primary {
    background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%) !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.3) !important;
}

.btn-download-premium.vault-btn {
    grid-column: span 2 !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.dl-btn-text .main-txt {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

/* PREVIEW ABAJO */
.video-preview-elite {
    order: 2 !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #000 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.video-preview-elite img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* MOBILE FIX */
@media (max-width: 768px) {
    .video-result-card.elite-result-card {
        padding: 15px !important;
        max-width: 92% !important;
    }

    .video-title-elite {
        font-size: 0.95rem !important;
    }

    .download-actions-elite {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
}




/* Efecto de Vidrio Esmerilado Premium */
.elite-result-card {
    background: linear-gradient(165deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
    box-shadow: 0 40px 100px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
}

.search-error-msg {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 20px;
    padding: 20px 25px;
    margin-top: 30px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    animation: fadeInUp 0.4s ease;
}


.search-error-msg i {
    color: var(--danger);
    font-size: 1.5rem;
    margin-top: 3px;
}

.search-error-msg div h4 {
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.search-error-msg div p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.video-result-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 20px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.video-info {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.video-preview {
    position: relative;
    width: 240px;
    aspect-ratio: 16/9;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.video-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-duration-badge, .video-play-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
}

.video-details {
    flex: 1;
}

.video-details h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-meta {
    display: flex;
    gap: 15px;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.video-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-copy-link {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-copy-link:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* Grilla de Opciones de Descarga */
.download-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.dl-option-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: var(--transition);
}

.dl-option-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--primary);
    transform: none !important;
}

.quality-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.q-label {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.f-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

.btn-dl-pro {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
}

.btn-dl-pro:hover {
    background: var(--primary-light);
    box-shadow: 0 5px 15px var(--primary-glow);
}

.btn-dl-pro:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .video-info {
        flex-direction: column;
    }
    .video-preview {
        width: 100%;
    }
}

.user-card-pro {
    background: var(--card-glass);
    border: 1px solid var(--card-border);
    backdrop-filter: var(--glass-blur);
    border-radius: 24px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-card-pro:hover {
    transform: none !important;
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4), 0 0 20px rgba(168, 85, 247, 0.1);
}

.user-card-pro.premium-glow {
    box-shadow: 0 10px 40px rgba(0,0,0,0.2), inset 0 0 20px rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.2);
}

.user-card-pro.premium-glow::before {
    display: none !important; /* Eliminamos la bolita/resplandor superior */
}

.premium-glow::after {
    display: none !important; /* Aseguramos eliminar cualquier otro resplandor */
}

.user-card-pro .card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 20px;
}

.status-tag.active {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.65rem;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Anillo de Progreso Circular Pro */
.limit-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.limit-main-stats {
    display: flex;
    align-items: center;
    gap: 25px;
}

.progress-circle-container {
    position: relative;
    width: 90px;
    height: 90px;
}

.progress-ring { transform: rotate(-90deg); }

.progress-ring__circle {
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 8px var(--primary-glow));
}

.progress-text-inside {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unlimited-display-pro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    animation: infinityGlow 2s infinite alternate;
}

.unlimited-display-pro .icon-inf {
    color: #fbbf24;
    font-size: 1.8rem;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}

.unlimited-display-pro .text-inf {
    color: #fbbf24;
    font-weight: 900;
    font-size: 0.6rem;
    letter-spacing: 1.2px;
    margin-top: 1px;
}

.usage-numbers.is-unlimited {
    display: flex !important;
    width: 100%;
    justify-content: center;
}

@keyframes infinityGlow {
    from { transform: scale(1); filter: brightness(1); }
    to { transform: scale(1.05); filter: brightness(1.2) drop-shadow(0 0 10px rgba(251, 191, 36, 0.6)); }
}

.usage-numbers {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
}

.usage-numbers .sep { opacity: 0.3; margin: 0 2px; font-weight: 300; }

.limit-info-text .pro-label {
    display: block;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
}

.limit-info-text .used-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.reset-timer-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: right;
}

.timer-label { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; display: block; margin-bottom: 2px; }
.timer-display { color: #fff; font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.timer-display i { color: var(--primary); font-size: 0.9rem; }

/* Calidad Pro Card */
.quality-content-pro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100% - 40px);
}

.quality-value h2 {
    font-size: 3.2rem;
    font-weight: 950;
    background: linear-gradient(135deg, #fff 30%, var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 5px;
}

.speed-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(168, 85, 247, 0.1);
    color: var(--primary-light);
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 800;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.quality-desc {
    margin-top: 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Buscador de Panel ULTRA PRO */
.panel-search-section-pro {
    background: var(--card-glass);
    border: 1px solid var(--card-border);
    backdrop-filter: var(--glass-blur);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 30px;
    position: relative;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.panel-search-section-pro:hover {
    border-color: rgba(168, 85, 247, 0.2);
    transform: none !important;
}

.search-pro-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.sh-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sh-left i {
    color: var(--primary);
    font-size: 1.1rem;
    filter: drop-shadow(0 0 8px var(--primary-glow));
}

.sh-left h3 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.engine-status {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--success);
    background: rgba(34, 197, 94, 0.1);
    padding: 4px 12px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.engine-status {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--success);
    background: rgba(34, 197, 94, 0.05);
    padding: 6px 14px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-search-pro {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.3);
    padding: 8px 8px 8px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.panel-search-pro:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.2), inset 0 0 10px rgba(168, 85, 247, 0.05);
    background: rgba(168, 85, 247, 0.03);
}

.panel-search-pro:focus-within .input-wrapper-pro i {
    color: var(--primary);
    filter: drop-shadow(0 0 5px var(--primary));
}

.input-wrapper-pro {
    display: flex;
    align-items: center;
    flex: 1;
}

.input-wrapper-pro i {
    color: var(--text-muted);
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.panel-search-pro input {
    background: transparent;
    border: none;
    color: #fff;
    padding: 12px 15px;
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
}

.panel-search-pro input:focus { outline: none; }

.panel-search-pro button {
    background: #ff4d4d;
    color: #fff;
    border: none;
    height: 48px;
    padding: 0 25px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(255, 77, 77, 0.2);
}

.panel-search-pro button:hover {
    background: #ff3333;
    transform: none !important;
    box-shadow: 0 8px 25px rgba(255, 77, 77, 0.4);
}

.panel-platform-icons-pro {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

.platform-chip {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
}

.platform-chip i { font-size: 0.9rem; }
.platform-chip:hover { background: rgba(255,255,255,0.08); color: #fff; }
.platform-chip.more { color: var(--primary); background: rgba(168, 85, 247, 0.05); }

/* Features Row Pro */
.features-row-pro {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* PC: Rediseño Final de Características y Banner VIP */
@media (min-width: 1024px) {
    .dash-main-features-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50/50 para que todo respire mejor */
        gap: 40px;
        align-items: stretch;
        margin-bottom: 40px;
    }

    /* Ajuste de las 3 tarjetas de la derecha para que se vean uniformes */
    .features-row-pro {
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: space-between; /* Distribuye el espacio entre las tarjetas */
    }

    .feat-item-pro {
        padding: 25px 35px;
        min-height: 95px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        width: 100%;
    }

    /* Tarjeta de Descarga Masiva (ULTRA MEJORADA) */
    #bulkDownloaderFeat {
        margin-top: 15px; /* Alineada armónicamente */
        flex-grow: 1.5; /* Hace que sea un poco más alta que las otras dos */
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(10, 11, 20, 0.5) 100%) !important;
        border: 1px solid rgba(168, 85, 247, 0.5) !important;
        padding: 40px !important;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(168, 85, 247, 0.1);
        display: flex;
        flex-direction: row; /* Icono a la izquierda, contenido a la derecha */
        align-items: center;
        gap: 35px;
    }

    #bulkDownloaderFeat .feat-icon-pro {
        width: 100px;
        height: 100px;
        font-size: 3rem;
        background: linear-gradient(135deg, #a855f7, #ec4899);
        border-radius: 28px;
        flex-shrink: 0;
    }

    #bulkDownloaderFeat .feat-info-pro {
        flex-grow: 1;
    }

    #bulkDownloaderFeat strong {
        font-size: 2.2rem;
        letter-spacing: -0.5px;
    }

    #bulkDownloaderFeat span {
        font-size: 1.1rem;
        color: #e2e8f0;
        margin-bottom: 15px;
    }

    .bulk-mini-stats {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .bulk-mini-stats span {
        background: rgba(168, 85, 247, 0.2) !important;
        border: 1px solid rgba(168, 85, 247, 0.3) !important;
        font-size: 0.85rem !important;
        padding: 8px 18px !important;
    }
}

    .bulk-mini-stats {
        display: flex;
        gap: 20px;
        margin-top: 15px;
    }

    .bulk-mini-stats span {
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
        background: rgba(168, 85, 247, 0.1);
        padding: 6px 15px;
        border-radius: 100px;
        border: 1px solid rgba(168, 85, 247, 0.2);
        margin-bottom: 0 !important;
        opacity: 1 !important;
        display: flex !important;
        align-items: center;
        gap: 6px;
    }

    #bulkDownloaderFeat .feat-icon-pro {
        width: 75px;
        height: 75px;
        font-size: 2.2rem;
    }

    #bulkDownloaderFeat strong {
        font-size: 1.6rem;
    }

    #bulkDownloaderFeat span {
        font-size: 1.05rem;
    }
}

.feat-item-pro {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: var(--transition);
}

.feat-item-pro:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
}

.feat-icon-pro {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(236, 72, 153, 0.1));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--primary);
    border: 1px solid rgba(168, 85, 247, 0.1);
}

.feat-info-pro strong { display: block; color: #fff; font-size: 0.95rem; font-weight: 800; margin-bottom: 3px; }
.feat-info-pro span { color: var(--text-muted); font-size: 0.75rem; font-weight: 500; }

/* Botón de Planes Dashboard */
.btn-planes-dashboard {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    border: none;
    padding: 14px 40px;
    border-radius: 18px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
    transition: all 0.3s ease;
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-planes-dashboard:hover {
    transform: none;
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.5);
    filter: brightness(1.1);
}

.btn-planes-dashboard i {
    font-size: 1.2rem;
}

/* Banners Inferiores */
.bottom-banners-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 25px;
}

.promo-banner-card {
    border-radius: 30px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.promo-banner-card.vip-promo {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(168, 85, 247, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.promo-banner-card.vip-promo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), transparent);
    pointer-events: none;
}

.promo-banner-card.how-promo {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(10px);
}

.promo-banner-card:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.2);
}

.promo-content { max-width: 70%; position: relative; z-index: 2; }
.promo-content h3 { font-size: 1.6rem; font-weight: 900; color: #fff; margin-bottom: 12px; letter-spacing: -0.5px; }
.promo-content p { color: var(--text-muted); margin-bottom: 25px; font-weight: 500; font-size: 0.95rem; line-height: 1.6; }

.btn-upgrade-promo {
    background: #fff;
    color: #000;
    padding: 14px 28px;
    border-radius: 16px;
    font-weight: 900;
    font-size: 0.9rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-upgrade-promo:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 15px 35px var(--primary-glow);
    transform: none !important;
}

.promo-banner-card.how-promo {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    padding: 35px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    min-height: auto !important;
}

.promo-visual-how {
    width: 60px;
    height: 60px;
    background: rgba(168, 85, 247, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto !important; /* Centrado forzado */
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.promo-visual-how i {
    font-size: 2rem;
    color: #a855f7;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.4));
}

.how-steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.how-steps li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
    color: #fff;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.04);
    padding: 12px 15px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: left;
}

.how-steps li span {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 900;
    flex-shrink: 0;
}

.promo-visual {
    font-size: 5rem;
    color: var(--primary);
    opacity: 0.15;
    transform: rotate(15deg) translateY(10px);
    position: absolute;
    right: 20px;
    z-index: 1;
}

.how-visual {
    position: absolute;
    bottom: -10px;
    right: 10px;
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.05;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
}

/* --- THE VAULT (VIP EXCLUSIVE) --- */
.vault-container {
    padding: 40px;
    animation: fadeInView 0.6s ease-out;
}

.vault-security-header {
    text-align: center;
    margin-bottom: 50px;
}

.security-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 800;
    border: 1px solid rgba(16, 185, 129, 0.2);
    letter-spacing: 2px;
}

.vault-stats-mini {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}

.v-stat {
    background: rgba(255, 255, 255, 0.03);
    padding: 20px 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.v-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 700;
}

.v-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
}

.vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.vault-item {
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.vault-item:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.03);
    transform: translateY(-5px);
}

.vault-item.is-locked {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
}

.vault-item.is-locked h4 {
    color: var(--text-muted);
    font-style: italic;
    filter: blur(4px);
    user-select: none;
}

.vault-item.is-locked .vault-icon {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}


.vault-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(16, 185, 129, 0.02) 2px, rgba(16, 185, 129, 0.02) 4px);
    pointer-events: none;
}

.vault-icon {
    width: 50px;
    height: 50px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #10b981;
}

.vault-info { flex: 1; }
.vault-info h4 { color: #fff; font-size: 0.95rem; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.vault-info p { color: var(--text-muted); font-size: 0.75rem; }

/* FURIOUS MODE SPEEDOMETER */
.furious-overlay {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.furious-overlay.active {
    opacity: 1;
}

.furious-container {
    background: rgba(15, 16, 22, 0.8);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 40px;
    padding: 40px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    position: relative;
    box-shadow: 0 50px 100px rgba(0,0,0,0.8);
}

.furious-glow {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 200px; height: 200px;
    background: var(--primary);
    filter: blur(100px);
    opacity: 0.2;
    z-index: -1;
}

.speedometer-v3 {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 30px;
}

.speedometer-v3 svg {
    transform: rotate(-90deg);
}

.speedometer-v3 circle {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}

.speedometer-v3 circle.bg { stroke: rgba(255, 255, 255, 0.05); }
.speedometer-v3 circle.prog {
    stroke: var(--primary);
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    filter: drop-shadow(0 0 10px var(--primary));
    transition: stroke-dashoffset 0.1s linear;
}

.speed-content {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column;
}

#furiousValue {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.speed-content small {
    color: var(--primary);
    font-weight: 800;
    letter-spacing: 2px;
}

.furious-labels h2 {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 10px;
    background: linear-gradient(to right, #fff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.engine-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.pulse-dot {
    width: 8px; height: 8px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 10px #22c55e;
    animation: pulse 1s infinite;
}

.hilos-grid {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 40px;
}

.hilo-bar {
    width: 4px;
    background: var(--primary);
    border-radius: 2px;
    transition: height 0.1s ease;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

.furious-loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px;
}

.speedometer-v2 {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 77, 77, 0.2);
    border-radius: 50%;
    margin: 0 auto;
    background: radial-gradient(circle, rgba(255, 77, 77, 0.05) 0%, transparent 70%);
}

.speed-text-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.speed-value { font-size: 2rem; font-weight: 900; color: #fff; line-height: 1; }
.speed-unit { font-size: 0.7rem; color: #ff4d4d; font-weight: 800; text-transform: uppercase; }

/* VAULT EMPTY STATE ANIMATION */
.lock-animation-wrapper {
    width: 60px;
    height: 50px;
    position: relative;
    margin: 0 auto 20px;
}

.lock-body {
    width: 100%;
    height: 40px;
    background: #10b981;
    border-radius: 8px;
    position: absolute;
    bottom: 0;
}

.lock-shackle {
    width: 40px;
    height: 40px;
    border: 6px solid #10b981;
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    position: absolute;
    top: -15px;
    left: 10px;
    animation: lockUnlock 2s infinite alternate;
}

@keyframes lockUnlock {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* ==========================================================================
   USER PANEL - PREMIUM LOCK OVERLAYS
   ========================================================================== */
.premium-locked-view {
    position: relative;
    min-height: 450px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* SISTEMA DE BLOQUEO PARA VISTA ULTRA */
.premium-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 18, 0.4); /* Mucho más transparente: de 0.95 a 0.4 */
    backdrop-filter: blur(10px); /* Menos desenfoque: de 20px a 10px */
    z-index: 10000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    border-radius: inherit;
}

.lock-content {
    max-width: 480px;
    animation: lockPopIn 0.6s ease;
}

.lock-icon-wrapper {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #a855f7 0%, #d946ef 100%);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: 2.5rem;
    color: white;
    box-shadow: 0 15px 40px rgba(168, 85, 247, 0.4);
    position: relative;
    transform: rotate(-5deg);
}

.lock-icon-wrapper::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    filter: blur(20px);
    opacity: 0.5;
    z-index: -1;
}

.lock-content h3 {
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 15px;
    color: #fff;
    letter-spacing: -1px;
}

.lock-content p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 35px;
}

.lock-content p span {
    color: #a855f7;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.btn-upgrade-lock {
    background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
    color: white;
    border: none;
    padding: 16px 40px;
    border-radius: 18px;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 auto;
    box-shadow: 0 10px 25px rgba(126, 34, 206, 0.4);
}

.btn-upgrade-lock:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(126, 34, 206, 0.6);
    filter: brightness(1.2);
}

@keyframes lockPopIn {
    0% { opacity: 0; transform: scale(0.8) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Footer Sidebar Optimizado */
.sidebar-footer {
    padding: 15px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 15px;
}

.footer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.03);
    color: #cbd5e1;
    text-decoration: none;
}

.footer-btn i {
    font-size: 0.9rem;
}

.footer-btn.settings:hover {
    background: rgba(168, 85, 247, 0.1);
    color: #fff;
    border-color: rgba(168, 85, 247, 0.3);
}

.footer-btn.logout:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Perfil de Usuario en el Sidebar Bottom - Diseño Ultra-Compacto y Premium */
.admin-user-bottom {
    margin: 8px 10px !important;
    padding: 6px 10px !important;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
    min-height: 50px;
}

.admin-user-bottom:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(168, 85, 247, 0.3);
}

/* Avatar más pequeño y fino */
.avatar-mini-wrapper {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

#adminPhoto, #userPhoto, .avatar-initials-mini {
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Meta Información - Control de Texto */
.user-mini-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Evita que el texto empuje a los botones */
    gap: 0;
}

.user-mini-meta strong {
    font-size: 0.75rem;
    color: #f8fafc;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Evita el "Carga ndo..." feo */
    display: block;
}

/* Animación de carga si el texto es "Cargando..." */
#sidebarUserName:contains("Cargando"),
#adminName:empty {
    opacity: 0.5;
    font-style: italic;
}

/* Estilos para etiquetas de plan en mini-sidebar */
.plan-tag-mini {
    font-size: 0.52rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    width: fit-content;
    line-height: 1;
    display: inline-block;
    letter-spacing: 0.5px;
}

.plan-tag-mini.free {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.plan-tag-mini.pro {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #3b82f6 !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.plan-tag-mini.premium, .plan-tag-mini.vip {
    background: rgba(234, 179, 8, 0.15) !important;
    color: #facc15 !important;
    border: 1px solid rgba(234, 179, 8, 0.3) !important;
}
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.plan-tag-mini.pro {
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.plan-tag-mini.vip {
    background: rgba(234, 179, 8, 0.2);
    color: #facc15;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

/* Botones de acción minimalistas */
.profile-actions-mini {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.profile-actions-mini a {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
    transition: all 0.2s;
}

.profile-actions-mini a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.profile-actions-mini .btn-logout-action {
    color: #ef4444;
}

.profile-actions-mini .btn-logout-action:hover {
    color: #ff6b6b;
    background: rgba(239, 68, 68, 0.15);
}

.user-plan-tag.free {
    background: rgba(255, 255, 255, 0.1);
    color: #a0aec0;
}

.user-plan-tag.pro {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: white;
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.3);
}

.user-plan-tag.vip {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #000;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

/* Main Content Area */
.admin-main-content {
    flex: 1;
    height: 100vh;
    overflow-y: overlay;
    padding: 30px 40px;
    background: radial-gradient(circle at top right, rgba(168, 85, 247, 0.03), transparent 40%);
}

/* --- BIENVENIDA MÓVIL PRO --- */
.mobile-welcome-header {
    display: none;
    margin-bottom: 20px;
    padding: 0 5px;
}

@media (max-width: 768px) {
    .mobile-welcome-header {
        display: block;
        animation: fadeInUp 0.8s ease-out;
    }
}

.welcome-title-elite {
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,0.5) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.welcome-subtitle-elite {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.4;
    font-weight: 400;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.admin-nav, .admin-main-content, .activity-feed-compact {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.admin-nav::-webkit-scrollbar,
.admin-main-content::-webkit-scrollbar,
.activity-feed-compact::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 10px 0;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    overflow: visible !important;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: visible !important;
}

.notification-btn {
    position: relative;
    background: rgba(168, 85, 247, 0.18) !important;
    border: 1px solid rgba(168, 85, 247, 0.5) !important;
    border-radius: 14px;
    width: 46px;
    height: 46px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.05);
    cursor: pointer;
    z-index: 10;
    overflow: visible !important; /* Evita que el resplandor se corte */
}

.notification-btn i {
    font-size: 1.3rem;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.8));
    animation: bell-pulse 2s infinite;
}

@keyframes bell-pulse {
    0% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

.notification-btn:hover {
    background: rgba(168, 85, 247, 0.3) !important;
    border-color: #c084fc !important;
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: white;
    border-radius: 10px;
    border: 2px solid #0a0c14;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.4);
    animation: badge-pulse 2s infinite;
    z-index: 2;
}

.notification-badge:empty {
    display: none;
}

/* Punto de notificación ultra-minimalista cuando no hay número pero hay algo nuevo */
.notification-badge.dot-only {
    width: 10px;
    height: 10px;
    min-width: 10px;
    padding: 0;
    top: 2px;
    right: 2px;
}

@keyframes badge-pulse {
    0% { transform: scale(1); box-shadow: 0 0 5px rgba(255, 71, 87, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 0 15px rgba(255, 71, 87, 0.6); }
    100% { transform: scale(1); box-shadow: 0 0 5px rgba(255, 71, 87, 0.4); }
}

/* Ajuste para vista de notificaciones en móvil */
@media (max-width: 1100px) {
    #user-notifications-view {
        padding: 15px !important;
    }
    #user-notifications-view .view-header-pro {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/* === NOTIFICATION CENTER PREMIUM REDESIGN === */
.notif-view-header {
    margin-bottom: 40px;
    position: relative;
}

.notif-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
}

.notif-icon-main {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    box-shadow: 0 8px 15px rgba(168, 85, 247, 0.2);
}

/* === NEW PREMIUM NOTIFICATION HEADER === */
.premium-notif-header {
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.02);
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.p-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.p-title-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.p-icon-box {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.2);
}

.p-text-box h1 {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    color: #fff;
    letter-spacing: -0.5px;
}

.p-text-box p {
    font-size: 0.8rem;
    margin: 2px 0 0 0;
    color: var(--text-muted);
    font-weight: 500;
}

.btn-clear-ghost {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(239, 68, 68, 0.05);
    color: #ef4444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-clear-ghost:hover {
    background: #ef4444;
    color: white;
    transform: rotate(-10deg);
}

/* Premium Notification Cards Re-refined */
.notification-premium-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    gap: 15px;
    margin-bottom: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.notification-premium-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .premium-notif-header {
        padding: 15px;
        margin-bottom: 20px;
    }
    .p-text-box h1 { font-size: 1.15rem; }
    .p-icon-box { width: 38px; height: 38px; font-size: 1.1rem; }
}

.notification-premium-card.unread {
    background: rgba(168, 85, 247, 0.04);
    border-color: rgba(168, 85, 247, 0.2);
}

.notif-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.notif-card-icon.success { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.notif-card-icon.error { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.notif-card-icon.info { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

.notif-card-body {
    flex: 1;
}

.notif-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.notif-card-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: white;
}

.notif-card-time {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.notif-card-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0;
}

.unread-dot {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--primary);
}

/* Empty State Premium */
.empty-notifications-premium {
    padding: 80px 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    margin-top: 20px;
}

.empty-icon-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon-wrapper i {
    font-size: 3.5rem;
    color: rgba(255, 255, 255, 0.1);
    z-index: 2;
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.1);
    animation: pulseNotif 2s infinite;
}

@keyframes pulseNotif {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

.empty-notifications-premium h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: white;
}

.empty-notifications-premium p {
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 25px;
}

.btn-back-home {
    background: white;
    color: black;
    border: none;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-back-home:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255,255,255,0.1);
}

@media (max-width: 768px) {
    .notif-view-header {
        margin-bottom: 25px;
    }
    .notif-view-header h1 { font-size: 1.4rem; }
    .notif-icon-main { width: 38px; height: 38px; font-size: 1.1rem; }
    .notif-title-row { gap: 12px; }
    .btn-clear-all {
        padding: 8px 15px;
        font-size: 0.8rem;
        border-radius: 10px;
    }
    .notification-premium-card { padding: 15px; }
}

/* Panel de Notificaciones Pro */
.notification-panel-pro {
    position: absolute;
    top: 60px;
    right: 0;
    width: 320px;
    background: #0d0f17;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(20px);
}

.notification-panel-pro.active {
    display: flex;
}

.panel-tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.panel-tab {
    flex: 1;
    padding: 15px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.panel-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: rgba(168, 85, 247, 0.05);
}

.tab-content {
    display: none;
    flex-direction: column;
}

.tab-content.active {
    display: flex;
}

.panel-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
}

.btn-text-action {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: none;
}

.panel-list {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: none;
}

.panel-list::-webkit-scrollbar {
    display: none;
}

.notification-item {
    display: flex;
    gap: 15px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateX(4px);
}

.notification-item.unread {
    background: rgba(168, 85, 247, 0.05);
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
}

.notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.notification-item.unread .notif-icon {
    background: rgba(168, 85, 247, 0.15);
    color: var(--primary);
    border-color: rgba(168, 85, 247, 0.2);
}

.notif-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.notif-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    line-height: 1.2;
}

.notification-item.unread .notif-title {
    color: #fff;
}

.notif-message {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-time {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.notif-time i {
    font-size: 0.65rem;
}

.notif-content strong {
    font-size: 0.85rem;
    color: #fff;
}

.notif-content p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    margin: 0;
}

.notif-content span {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
}

.panel-footer {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.view-all-btn {
    width: 100%;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.empty-state {
    padding: 40px 20px;
    text-align: center;
    opacity: 0.3;
}

.empty-state i {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

/* Items de Descarga */
.download-item {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.dl-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dl-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.dl-status {
    font-size: 0.7rem;
    color: var(--primary);
}

.dl-progress-container {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.dl-progress-bar {
    height: 100%;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
    transition: width 0.3s ease;
}

.dl-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}


.header-user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 18px 4px 4px;
    background: linear-gradient(135deg, rgba(10, 12, 20, 0.9) 0%, rgba(5, 6, 10, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50px; /* Forma de cápsula pura */
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    backdrop-filter: blur(20px);
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.header-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    z-index: 2;
}

.header-user-name {
    font-size: 0.8rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 2px;
}

.header-user-status {
    display: flex;
    justify-content: flex-start;
    color: #fbbf24 !important;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
    text-transform: uppercase;
    font-size: 0.75rem;
}

.premium-badge {
    position: relative;
    display: flex;
    align-items: center;
}

.badge-content {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    padding: 0;
    gap: 5px;
}

.premium-badge .plan-label {
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--br-color);
    text-shadow: 0 0 8px var(--br-color);
}

.premium-badge .divider {
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.premium-badge .days-count {
    font-size: 0.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.5px;
}

.premium-badge.pro {
    --br-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}
.premium-badge.pro .plan-label {
    color: #3b82f6;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

.premium-badge.vip, .premium-badge.premium {
    --br-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}
.premium-badge.vip .plan-label, .premium-badge.premium .plan-label {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* Animación de Resplandor Interno removida */
.premium-badge::before {
    display: none;
}

@keyframes rotateGlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.premium-badge:hover {
    transform: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--br-color);
}

.premium-badge:hover .badge-content {
    background: rgba(255, 255, 255, 0.05);
}

.header-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%; /* Círculo perfecto */
    object-fit: cover;
    border: 2px solid #1a1b26;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 2;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.header-user-profile.pro { --br-color: transparent; }
.header-user-profile.vip { --br-color: transparent; }

/* Anillo de luz cinético removido */

.header-user-profile:hover {
    background: #0a0c14;
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
}

.header-user-profile:hover .header-user-avatar {
    transform: scale(1.1);
}

/* --- POPOVER DE CUENTA PREMIUM --- */
.user-account-popover {
    position: absolute;
    top: 85px;
    right: 25px;
    width: 360px;
    background: #0b0e14; /* Sólido y Premium */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 32px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9),
                0 0 40px rgba(168, 85, 247, 0.1);
    z-index: 10000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: popoverReveal 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}

@keyframes popoverReveal {
    from { opacity: 0; transform: translateY(15px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
    .user-account-popover {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none !important;
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        max-height: 80vh;
        border-left: none;
        border-right: none;
        border-bottom: none;
        animation: mobileBottomReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        padding-bottom: env(safe-area-inset-bottom);
    }

    @keyframes mobileBottomReveal {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Fondo oscuro detrás del panel en móviles */
    .user-account-popover::after {
        content: '';
        position: fixed;
        top: -100vh;
        left: 0;
        right: 0;
        height: 100vh;
        background: rgba(0,0,0,0.5);
        z-index: -1;
        pointer-events: none;
    }

    .notification-item {
        padding: 14px 18px;
        gap: 12px;
    }

    .notif-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .notif-title {
        font-size: 0.85rem;
    }

    .notif-message {
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
    }

    #notificationList {
        max-height: 60vh !important;
    }
}

.popover-header {
    padding: 30px 25px;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.popover-avatar-wrapper {
    position: relative;
    width: 68px;
    height: 68px;
}

.popover-avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    object-fit: cover;
    border: 2px solid #a855f7;
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
}

.popover-plan-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border: 2px solid #0b0e14;
    text-transform: uppercase;
}

.popover-user-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.popover-user-details strong {
    font-size: 1.2rem;
    color: #fff;
    letter-spacing: -0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popover-user-details span {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popover-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99999 !important; /* Aumentamos al máximo */
    transition: all 0.2s ease;
    pointer-events: auto !important; /* Nos aseguramos de que acepte clics */
}

.popover-close:hover {
    background: rgba(255, 77, 77, 0.3);
    color: #ff4d4d;
    transform: rotate(90deg) scale(1.1);
}

.popover-close i {
    pointer-events: none; /* El icono no debe interferir con el clic del botón */
}

.popover-body {
    padding: 20px;
}

/* --- FREE UPGRADE CTA (Luxury Glass) --- */
.free-upgrade-cta {
    background: linear-gradient(145deg, rgba(88, 28, 135, 0.6) 0%, rgba(30, 10, 60, 0.8) 100%);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 28px;
    padding: 22px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(168, 85, 247, 0.1);
}

.cta-header-free {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.cta-icon-wrapper {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #f472b6, #a855f7);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.3);
}

.cta-content h4 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 5px 0;
    letter-spacing: -0.3px;
}

.cta-content p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
    margin: 0;
}

.cta-btn-upgrade {
    width: 100%;
    background: #ffffff;
    color: #000 !important;
    border: none;
    padding: 15px 20px;
    border-radius: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.2, 1, 0.2, 1);
}

.cta-btn-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    background: #f8fafc;
}

.cta-btn-upgrade i.fa-gem { color: #a855f7; font-size: 1.1rem; }

/* --- POPOVER PREMIUM CLEANUP --- */
.expiry-premium-box {
    margin-bottom: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 18px 15px;
    text-align: center;
    position: relative;
    box-shadow: inset 0 0 30px rgba(168, 85, 247, 0.05);
}

.expiry-top {
    margin-bottom: 12px;
}

.expiry-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.timer-values {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.t-box {
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 14px;
    padding: 10px 6px;
    min-width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.t-box:hover {
    transform: translateY(-3px);
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.t-num {
    font-size: 1.4rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    text-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}

.t-unit {
    font-size: 0.6rem;
    font-weight: 700;
    color: #a855f7;
    text-transform: uppercase;
    margin-top: 4px;
    letter-spacing: 0.8px;
}

/* --- STATS GRID PREMIUM - LUXURY EDITION --- */
.popover-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.p-stat-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    transition: all 0.4s ease;
}

.p-stat-item i {
    width: 44px;
    height: 44px;
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.stat-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-info label {
    font-size: 0.75rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-info span {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
}

.mini-progress {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-top: 8px;
    overflow: hidden;
}

.m-fill {
    height: 100%;
    background: #a855f7;
    border-radius: 10px;
}

    min-width: 0;
}

.stat-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.stat-row label {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height: 1;
    margin-bottom: 3px;
}

.stat-row span {
    font-size: 1.25rem; /* Número gigante */
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.8px;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Ocultar barra de progreso para diseño minimalista */
.mini-progress {
    display: none;
}
    justify-content: center;
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
    border-radius: 10px;
    font-size: 0.9rem;
}

.p-stat-item div {
    display: flex;
    flex-direction: column;
}

.p-stat-item span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}

.p-stat-item label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.cta-header-free {
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-row label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stat-row span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}

.mini-progress {
    height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

.m-fill {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #ec4899);
    border-radius: 10px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.m-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    animation: progressShine 3s infinite;
}

@keyframes progressShine {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

.popover-footer {
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-popover-action {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s;
    border: none;
}

.btn-popover-action.primary {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-popover-action.primary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-popover-action.logout {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.btn-popover-action.logout:hover {
    background: rgba(239, 68, 68, 0.2);
}

.btn-popover-action.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 210, 255, 0.4);
}

.btn-popover-action.logout {
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
    border: 1px solid rgba(255, 77, 77, 0.2);
}

.btn-popover-action.logout:hover {
    background: rgba(255, 77, 77, 0.2);
}

.admin-header h1 { font-size: 1.8rem; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.admin-header p { color: var(--text-muted); font-size: 0.9rem; }

.btn-export {
    display: flex; align-items: center; gap: 8px; padding: 10px 20px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--card-border);
    border-radius: 12px; color: #fff; font-weight: 700; font-size: 0.85rem;
}
.btn-export:hover { background: rgba(255,255,255,0.1); border-color: var(--primary); }

/* Grid & Cards */
.admin-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px; padding: 25px;
    margin-bottom: 25px; transition: 0.3s;
    overflow: visible !important;
}
.admin-card h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }

.admin-lower-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 25px;
    margin-bottom: 30px;
}

.recent-users-card, .activity-card {
    background: var(--card-glass);
    border: 1px solid var(--card-border);
    backdrop-filter: var(--glass-blur);
    border-radius: 24px;
    padding: 25px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-header h3 { font-size: 1.2rem; font-weight: 800; color: #fff; }

.btn-view-all {
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary-light);
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-view-all:hover {
    background: var(--primary);
    color: #fff;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.activity-item:hover {
    background: rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.2);
    transform: translateX(5px);
}

.act-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.act-icon.tiktok { background: rgba(0, 0, 0, 0.3); color: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.1); }
.act-icon.youtube { background: rgba(255, 0, 0, 0.1); color: #ff0000; }
/* YouTube Quality List Styling */
.quality-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.quality-row-item {
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: stretch;
}

.btn-quality-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.btn-quality-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition: 0.5s;
}

.btn-quality-row:hover::before {
    left: 100%;
}

.btn-quality-row:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.btn-quality-row.q-ultra {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.15));
    border-color: rgba(168, 85, 247, 0.3);
}

.btn-quality-row.q-audio {
    background: rgba(6, 182, 212, 0.08);
    border-color: rgba(6, 182, 212, 0.2);
}

.btn-quality-row.q-audio:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.4);
}

.btn-quality-row.locked {
    opacity: 0.6;
    cursor: not-allowed;
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.05);
}

.btn-quality-row.locked:hover {
    transform: none;
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(236, 72, 153, 0.3);
}

.btn-vault-mini-action {
    background: rgba(236, 72, 153, 0.1);
    border: 1px solid rgba(236, 72, 153, 0.2);
    width: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ec4899;
    cursor: pointer;
    transition: 0.3s;
}

.btn-vault-mini-action:hover {
    background: #ec4899;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(236, 72, 153, 0.3);
}

.q-text-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.q-label {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.q-sub {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
}

.btn-quality-row.q-ultra .q-label {
    background: linear-gradient(90deg, #fff, #fbcfe8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.upgrade-banner-mini {
    margin-top: 20px;
    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
    padding: 1px;
    border-radius: 16px;
    cursor: pointer;
    transition: 0.4s ease;
    display: flex;
    overflow: hidden;
}

.upgrade-banner-mini .banner-content {
    background: #0f172a;
    width: 100%;
    padding: 12px 20px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.upgrade-banner-mini:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(168, 85, 247, 0.3);
}

.video-preview-container-yt {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.yt-duration-tag {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.platform-badge-yt {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ff0000;
    color: #fff;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
}
    border-style: solid;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.3));
}

.youtube-style .video-preview-container {
    position: relative;
}

.platform-badge-yt {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ff0000;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}


.act-info {
    flex: 1;
    min-width: 0;
}

.act-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.act-meta {
    font-size: 0.75rem;
    color: #94a3b8;
}

.act-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.act-badge.success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
    font-style: italic;
}

/* User View Specifics */
.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 20px;
    flex-wrap: wrap;
}

.search-users {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-users i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-users input {
    width: 100%;
    padding: 12px 15px 12px 45px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    color: #fff;
    outline: none;
}

.search-users input:focus { border-color: var(--primary); }

/* API Config Wrappers */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.toggle-pass {
    position: absolute;
    right: 15px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.api-status {
    margin-top: 15px;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.save-all-card {
    background: rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.2);
    margin-top: 20px;
}

.save-all-card h4 { color: #fff; margin-bottom: 5px; }

/* Modal Refinement */
.modal-header {
    padding: 25px 30px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 { font-size: 1.4rem; color: #fff; }
.modal-header button { color: var(--text-muted); font-size: 1.2rem; }

.modal-body { padding: 30px; }

.modal-footer {
    padding: 20px 30px;
    border-top: 1px solid var(--card-border);
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.btn-cancel {
    padding: 12px 25px;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
}

.btn-save {
    padding: 12px 25px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 10px 20px var(--primary-glow);
}

/* --- DASHBOARD PREMIUM REDESIGN --- */
.dashboard-mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.mini-stat-card {
    background: var(--card-glass);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    backdrop-filter: var(--glass-blur);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.mini-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.mini-stat-icon.users { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.mini-stat-icon.vip { background: rgba(251, 191, 36, 0.1); color: #fbbf24; }
.mini-stat-icon.downloads { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.mini-stat-icon.money { background: rgba(16, 185, 129, 0.1); color: #10b981; }

.mini-stat-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mini-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.mini-value-group {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mini-value-group h2 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    color: #fff;
}

.mini-trend {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
}

.mini-trend.up { background: rgba(16, 185, 129, 0.1); color: #10b981; }

/* GRID PRINCIPAL DASHBOARD */
.dashboard-main-grid-pro {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.admin-card {
    background: var(--card-glass);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    backdrop-filter: var(--glass-blur);
    overflow: hidden;
}

.card-header-pro {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--card-border);
}

.card-header-pro h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.card-header-pro p { margin: 4px 0 0; font-size: 0.8rem; color: var(--text-muted); }

.live-tag {
    background: rgba(168, 85, 247, 0.1);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

.chart-container-premium {
    padding: 24px;
    height: 350px;
}

.activity-feed-compact {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.btn-mini-link {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.btn-mini-link:hover { background: rgba(168, 85, 247, 0.1); }

/* --- MEJORAS VISTA USUARIOS PRO & GLASSMORPHISM --- */
.user-row-premium {
    background: rgba(255, 255, 255, 0.015) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.user-row-premium:hover {
    background: rgba(168, 85, 247, 0.06) !important;
    transform: none !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(168, 85, 247, 0.1);
}

.avatar-wrapper {
    position: relative;
    width: 42px;
    height: 42px;
}

.avatar-wrapper .avatar {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
}

.status-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-dark);
}

.status-indicator.online {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.usage-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 120px;
}

.usage-text-pro {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 700;
}

.usage-text-pro .current { color: var(--primary-light); }
.usage-text-pro .sep { opacity: 0.3; }
.usage-text-pro .total { color: var(--text-muted); }

.mini-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.mini-progress-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px var(--primary-glow);
}

.badge-status {
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(5px);
}

.badge-status.free {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-status.pro {
    background: rgba(168, 85, 247, 0.1);
    color: var(--primary-light);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.badge-status.premium, .badge-status.vip {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.date-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.view-header-pro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.view-header-pro h1 { font-size: 2rem; font-weight: 800; color: #fff; }
.view-header-pro p { color: var(--text-muted); font-size: 0.95rem; }

.header-stats-mini { display: flex; gap: 20px; }
.mini-stat {
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}
.mini-stat .label { display: block; font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.mini-stat strong { font-size: 1.2rem; color: #fff; }

.table-controls {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.search-box-pro {
    position: relative;
    flex: 1;
}
.search-box-pro i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
}
.search-box-pro input {
    width: 100%;
    padding: 10px 15px 10px 45px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 0.9rem;
    transition: 0.3s;
}
.search-box-pro input:focus {
    border-color: var(--primary);
    background: rgba(168, 85, 247, 0.05);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.1);
}

/* SELECT GLASS - ELIMINA EL AZUL FEO */
.select-glass {
    background: rgba(13, 15, 26, 0.8) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: #fff;
    padding: 12px 40px 12px 18px;
    appearance: none;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}
.select-glass:hover { border-color: var(--primary); }
.select-glass option {
    background: #1a1b26;
    color: #fff;
    padding: 15px;
}

.filters-pro { display: flex; gap: 12px; align-items: center; }
.filter-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.btn-refresh-table {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: all 0.4s ease;
    font-weight: 600;
    white-space: nowrap;
}
.btn-refresh-table i {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-refresh-table:hover {
    background: rgba(168, 85, 247, 0.1);
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}
.btn-refresh-table:hover i { transform: rotate(180deg); }
.btn-refresh-table:active { transform: scale(0.95); }

@keyframes spin-sync {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.syncing i {
    animation: spin-sync 1s linear infinite;
}

/* TABLA PRO STYLE */
.admin-table { border-spacing: 0 8px; }
.admin-table tbody tr {
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.admin-table tbody tr:hover {
    background: rgba(168, 85, 247, 0.06);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.15), 0 0 15px rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
}

.plan-badge-pro {
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.plan-badge-pro.free { background: rgba(255, 255, 255, 0.05); color: #94a3b8; }
.plan-badge-pro.premium {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.usage-text-pro { font-weight: 800; font-size: 0.85rem; }
.usage-text-pro .current { color: var(--primary-light); }
.usage-text-pro .total { color: var(--text-muted); }

.stat-data .label { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-data h2 { font-size: 1.6rem; font-weight: 800; margin: 2px 0; color: #fff; }
.trend { font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.trend.up { color: var(--success); }

/* Tables Refined */
.table-responsive { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; margin-top: -10px; min-width: 600px; }
.admin-table th { padding: 15px 20px; text-align: left; font-size: 0.75rem; color: var(--text-muted); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.admin-table tbody tr { background: rgba(255,255,255,0.02); border-radius: 16px; transition: 0.3s; }
.admin-table tbody tr:hover { background: rgba(255,255,255,0.04); transform: none !important; }
.admin-table td { padding: 8px 20px; vertical-align: middle; border-top: 1px solid transparent; border-bottom: 1px solid transparent; }
.admin-table td:first-child { border-left: 1px solid transparent; border-radius: 16px 0 0 16px; }
.admin-table td:last-child { border-right: 1px solid transparent; border-radius: 0 16px 16px 0; }

.admin-table tbody tr:hover td { border-color: rgba(255,255,255,0.05); }

/* User Cells & Badges */
.user-info-cell { display: flex; align-items: center; gap: 12px; }
.user-info-cell .avatar { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; }
.user-info-cell .details { display: flex; flex-direction: column; }
.user-info-cell .details strong { font-size: 0.85rem; color: #fff; }
.user-info-cell .details span { font-size: 0.75rem; color: var(--text-muted); }

.badge-status {
    padding: 6px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
}
.badge-status.free { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.badge-status.pro { background: rgba(168, 85, 247, 0.1); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.2); }
.badge-status.premium { background: rgba(168, 85, 247, 0.1); color: var(--primary-light); }
.badge-status.custom { background: rgba(236, 72, 153, 0.1); color: var(--secondary); }
.badge-status.banned { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
.badge-status.tiktok { color: #fe2c55; }
.badge-status.youtube { color: #ff0000; }
.badge-status.instagram { color: #e4405f; }

.usage-pro-bar { width: 120px; }
.usage-pro-bar .bar-bg { width: 100%; height: 8px; background: rgba(255,255,255,0.08); border-radius: 10px; margin-bottom: 5px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); }
.usage-pro-bar .bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px var(--primary-glow);
}
.usage-pro-bar span { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; display: block; text-align: right; }

/* Revenue Chart Container */
.revenue-chart-container {
    height: 350px;
    width: 100%;
    position: relative;
    padding: 10px;
}

.actions-cell { display: flex; gap: 8px; }
.btn-action-pro {
    width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); color: #fff; font-size: 0.8rem; border: 1px solid transparent;
}
.btn-action-pro:hover { background: rgba(255,255,255,0.1); }
.btn-action-pro.edit:hover { color: var(--primary-light); border-color: var(--primary); }
.btn-action-pro.delete:hover { color: var(--danger); border-color: var(--danger); }

/* Config Forms */
/* --- CONFIGURACIÓN PREMIUM RE-ORDERED --- */
.config-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-left: 5px;
}

.config-section-title i {
    color: var(--primary);
    font-size: 1.2rem;
}

.config-section-title span {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.config-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.config-card-premium {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.config-card-premium.full-width {
    grid-column: 1 / -1;
}

.config-card-header-pro {
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.icon-box-pro {
    width: 45px;
    height: 45px;
    background: rgba(168, 85, 247, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.2rem;
}

.config-card-header-pro.tiktok .icon-box-pro { background: rgba(255, 0, 80, 0.1); color: #ff0050; }
.config-card-header-pro.youtube .icon-box-pro { background: rgba(255, 0, 0, 0.1); color: #ff0000; }
.config-card-header-pro.instagram .icon-box-pro { background: rgba(225, 48, 108, 0.1); color: #e1306c; }

.header-text-pro h4 { margin: 0; font-size: 1rem; }
.header-text-pro p { margin: 0; font-size: 0.75rem; opacity: 0.5; }

.config-body-pro {
    padding: 20px;
}

.form-grid-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.form-grid-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.form-group-pro {
    margin-bottom: 15px;
}

.form-group-pro label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 8px;
    opacity: 0.6;
    text-transform: uppercase;
}

.input-pro-v2 {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 15px;
    color: white;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.input-pro-v2:focus {
    border-color: var(--primary);
    background: rgba(168, 85, 247, 0.05);
    outline: none;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.1);
}

.save-actions-pro {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}

.btn-save-premium {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: none;
    padding: 15px 30px;
    border-radius: 12px;
    color: white;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(168, 85, 247, 0.2);
}

.btn-save-premium:hover {
    transform: none !important;
    box-shadow: 0 15px 30px rgba(168, 85, 247, 0.4);
}

.btn-save-config-pro {
    width: 100%;
    margin-top: 15px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    cursor: not-allowed;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: none;
    opacity: 0.8;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

.btn-save-config-pro.active {
    background: var(--primary);
    color: white;
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
    border-color: var(--primary);
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
}

.btn-save-config-pro.active:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6);
}

.btn-save-config-pro.btn-vip.active {
    background: linear-gradient(135deg, #ffd700, #ffae00);
    color: #000;
    border-color: #ffd700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* Selector de etiquetas premium */
select.input-pro-v2 {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px;
    cursor: pointer;
}

select.input-pro-v2 option {
    background: #1a1a1a;
    color: white;
    padding: 10px;
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; }
.input-pro {
    width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--card-border);
    padding: 12px 18px; border-radius: 12px; color: #fff; font-size: 0.95rem; font-weight: 600;
    transition: 0.3s;
}
.input-pro:focus { border-color: var(--primary); outline: none; background: rgba(255,255,255,0.06); }

select.input-pro, select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
    padding-right: 40px;
    color-scheme: dark; /* Esto fuerza al navegador a usar colores oscuros en el dropdown */
}

select.input-pro option {
    background-color: #1a1c2e; /* Fondo oscuro para las opciones */
    color: #fff;
    padding: 10px;
}

.popular-badge, .popular-badge-admin {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 6px 14px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transform: none !important;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.popular-badge-admin {
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    font-size: 0.6rem;
}

/* Icono sutil ★ */
.popular-badge::before, .popular-badge-admin::before {
    content: '★';
    font-size: 0.75rem;
    color: inherit;
    opacity: 0.9;
}

/* Efecto de Brillo Premium */
.popular-badge::after, .popular-badge-admin::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: skewX(-20deg) translateZ(0);
    animation: premiumShine 3s infinite;
    will-change: left;
}

@keyframes premiumShine {
    0% { left: -150%; }
    30% { left: 150%; }
    100% { left: 150%; }
}

/* Colores dinámicos Ultra Premium */
.badge-recomendado {
    background: linear-gradient(135deg, #6366f1, #a855f7) !important;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4) !important;
}
.badge-mas-usado {
    background: linear-gradient(135deg, #3b82f6, #06b6d4) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4) !important;
}
.badge-premium {
    background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4) !important;
}
.badge-oferta {
    background: linear-gradient(135deg, #ef4444, #991b1b) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
}
.badge-top {
    background: linear-gradient(135deg, #ffd700, #b8860b) !important;
    color: #000 !important;
    font-weight: 900;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important;
}

/* Keyframes de pulsaciones por color */
@keyframes badgePulseBlue { 0%, 100% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); } 50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.7); } }
@keyframes badgePulseOrange { 0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); } 50% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.7); } }
@keyframes badgePulseRed { 0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.7); } }
@keyframes badgePulseGold { 0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); } 50% { box-shadow: 0 0 35px rgba(255, 215, 0, 0.8); } }

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

.btn-save-config {
    width: 100%; padding: 12px; border-radius: 12px; background: rgba(168, 85, 247, 0.1);
    color: var(--primary-light); font-weight: 800; border: 1px solid rgba(168, 85, 247, 0.3);
}
.btn-save-config:hover { background: var(--primary); color: #fff; box-shadow: 0 10px 20px var(--primary-glow); }

.btn-save-config-main {
    padding: 15px 30px; border-radius: 15px; background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff; font-weight: 800; font-size: 1rem; box-shadow: 0 15px 30px var(--primary-glow);
}

.platform-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.platform-header i { font-size: 1.5rem; }
.platform-header.tiktok i { color: #fe2c55; }
.platform-header.youtube i { color: #ff0000; }
.platform-header.instagram i { color: #e4405f; }

/* Mobile Admin */
.admin-hamburger {
    display: none !important; /* Oculto por defecto en PC */
    font-size: 1.2rem;
    color: #fff;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

.admin-hamburger:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.3);
}

.close-admin-sidebar {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    z-index: 1000001;
    cursor: pointer;
}

/* User Panel Specific Mobile Adjustments */
@media (max-width: 768px) {
    .navbar { height: 70px; }
    .nav-brand { font-size: 1.4rem; white-space: nowrap; }
    .logo-icon { width: 38px; height: 38px; font-size: 1.1rem; border-radius: 12px; }

    /* Footer Premium Mobile */
    .footer { padding: 80px 20px 40px; background: rgba(7, 8, 18, 0.5); backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,0.05); }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .f-brand p { margin: 0 auto 25px; max-width: 280px; font-size: 0.95rem; opacity: 0.8; }
    .f-brand .nav-brand { justify-content: center; margin-bottom: 20px; }
    .f-links h4 { font-size: 1.1rem; margin-bottom: 20px; color: #fff; }
    .f-links a { font-size: 0.95rem; margin-bottom: 12px; }
    .footer-bottom { margin-top: 60px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.05); }
    .footer-bottom p { font-size: 0.8rem; opacity: 0.6; }

    .hero {
        padding: 130px 20px 60px;
        min-height: 100vh;
        justify-content: flex-start;
        overflow: hidden;
        background: transparent !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 10;
    }
    .hero-title { font-size: 2.8rem; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 20px; }
    .hero-subtitle { font-size: 1rem; margin: 0 auto 30px; }

    .hero-badges { justify-content: center; gap: 10px; }
    .badge-item { padding: 8px 15px; font-size: 0.75rem; }

    .search-box-container { flex-direction: column; border-radius: 24px; padding: 10px; gap: 8px; margin-top: 25px; }
    .search-box-container input { text-align: center; padding: 12px; width: 100%; font-size: 1rem; }
    .search-box-container button { width: 100%; padding: 15px; font-size: 1rem; justify-content: center; border-radius: 18px; }
    .search-box-container .link-icon { display: none; }

    .platform-tags { display: none !important; }
    .p-tag-simple { padding: 8px 16px; font-size: 0.8rem; }

    .section-title { font-size: 2.2rem; margin-bottom: 30px; }
    .step { padding: 30px 20px; }
    .step-arrow { transform: rotate(90deg); margin: 10px 0; opacity: 0.5; }

    .price-card { width: 100%; padding: 30px 20px; }
    .price { font-size: 2.5rem; }

    .admin-main-content {
        padding: 0 12px 15px 12px !important;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
    }

    .admin-header {
        position: sticky;
        top: 0;
        margin: 0 -12px 20px -12px !important;
        width: auto;
        z-index: 1000;
        background: rgba(13, 14, 22, 0.9) !important;
        backdrop-filter: blur(25px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
        padding: calc(12px + env(safe-area-inset-top)) 15px 12px 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    }

    /* Optimizamos los botones para que no se vean "feos" ni cortados */
    .admin-hamburger, .notification-btn, .header-avatar-wrapper {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .header-left, .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .notification-btn {
        background: rgba(168, 85, 247, 0.1) !important;
        border-color: rgba(168, 85, 247, 0.2) !important;
    }

    .header-avatar-wrapper {
        background: rgba(16, 185, 129, 0.1) !important;
        border-color: rgba(16, 185, 129, 0.2) !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .header-user-avatar {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    .avatar-initials {
        font-size: 1rem !important;
        color: #10b981 !important;
    }

    /* Aseguramos que el contenido debajo no se pegue al header */
    .admin-view {
        padding-top: 5px;
    }
    .header-right { gap: 6px !important; }
    .header-user-profile {
        padding: 4px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 12px !important;
    }
    .header-user-info { display: none !important; } /* Ocultamos el texto largo del perfil en móvil */
    .header-user-avatar {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }
    .notification-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
    }

    /* Arreglo de Tarjetas (Descarga y Créditos) */
    .user-card-pro {
        padding: 25px 20px !important;
        border-radius: 28px !important;
    }

    /* --- ESTADO DEL SERVIDOR (ULTRA-MINI MÓVIL) --- */
    .dl-limit-card {
        padding: 8px 12px !important;
        border-radius: 16px !important;
        background: rgba(15, 15, 25, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        margin-bottom: 10px !important;
    }

    .card-header-elite {
        margin-bottom: 4px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .header-label-technical {
        font-size: 0.5rem !important;
        font-weight: 700 !important;
        opacity: 0.5;
    }

    .status-indicator-online {
        padding: 1px 6px !important;
        font-size: 0.45rem !important;
    }

    .card-content-elite-grid {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .progress-circle-container {
        transform: scale(0.6) !important;
        margin: -20px -15px !important; /* Compensa el espacio del escalado */
    }

    .elite-circle {
        width: 50px !important;
        height: 50px !important;
    }

    .circle-inner {
        font-size: 0.75rem !important;
    }

    .stats-info-elite {
        flex: 1 !important;
    }

    .stats-info-elite h3 {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }

    .stats-info-elite p {
        display: none !important; /* Ocultamos descripción para ahorrar mucho espacio */
    }

    /* Timer como cápsula pequeña */
    .reset-box-elite {
        margin-left: auto !important;
        margin-top: 0 !important;
        background: rgba(255, 255, 255, 0.03) !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        border: none !important;
    }

    .reset-tag {
        font-size: 0.45rem !important;
        text-transform: uppercase;
        opacity: 0.6;
    }

    .timer-wrapper-elite {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        color: #a855f7 !important;
    }

    .timer-wrapper-elite i {
        font-size: 0.65rem !important;
    }
        color: rgba(255, 255, 255, 0.4) !important;
    }

    .timer-wrapper-elite {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        font-size: 1.1rem !important;
        font-family: 'Monaco', 'Consolas', monospace;
    }

    /* .admin-sidebar removido de aquí para evitar conflictos */
    .admin-sidebar.active {
        left: 0;
    }
    .admin-sidebar-overlay.active {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,0.8) !important;
        backdrop-filter: blur(5px) !important;
        z-index: 9999998 !important; /* Justo debajo de la sidebar */
    }
    .close-admin-sidebar {
        display: flex;
        opacity: 1;
        visibility: visible;
        right: 20px;
        top: 25px;
    }

    /* Fila de Features (Servicio Alta Prioridad, etc) */
    .dash-main-features-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important; /* Más espacio entre el banner y las tarjetas de abajo */
    }
    .features-row-pro {
        grid-template-columns: 1fr !important;
        gap: 15px !important; /* Más espacio entre las tarjetas de soporte y servidor */
    }
    .feat-item-pro {
        padding: 20px !important; /* Un poco más de aire interno */
        border-radius: 24px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    /* Mejora visual específica para la tarjeta de soporte */
    .feat-item-pro[onclick] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(255, 255, 255, 0.02)) !important;
        border: 1px solid rgba(16, 185, 129, 0.2) !important;
    }
    .feat-icon-pro {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
        flex-shrink: 0;
    }
    .feat-info-pro strong { font-size: 0.9rem !important; }

    /* Banners Inferiores (Upgrade y Cómo Funciona) */
    .bottom-banners-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .promo-banner-card {
        padding: 25px 20px !important;
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .promo-content h3 { font-size: 1.3rem !important; margin-bottom: 10px; }
    .promo-content p { font-size: 0.9rem !important; opacity: 0.7; }

    .promo-visual, .how-visual {
        position: static !important;
        font-size: 3rem !important;
        opacity: 0.2 !important;
        order: -1;
    }

    .how-steps {
        text-align: left;
        margin-top: 15px;
    }

    /* Estilizar el SELECT para que sea Premium */
    select.input-pro-v3 {
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='Length 19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 15px center !important;
        background-size: 18px !important;
        padding-right: 45px !important;
        cursor: pointer !important;
    }

    /* Estilizar las opciones del SELECT (Compatibilidad limitada, pero mejoramos el contenedor) */
    select.input-pro-v3 option {
        background-color: #1a1625 !important;
        color: #fff !important;
        padding: 15px !important;
    }

    /* Calidad por Píldoras (Pills) */
    .quality-selector-pills {
        display: flex;
        gap: 8px;
        width: 100%;
        margin-top: 10px;
        flex-wrap: wrap;
    }

    .quality-selector-pills input[type="radio"] {
        display: none;
    }

    .quality-pill {
        flex: 1;
        min-width: 70px;
        height: 48px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.75rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .quality-selector-pills input[type="radio"]:checked + .quality-pill {
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(168, 85, 247, 0.1));
        border-color: #a855f7;
        color: #fff;
        box-shadow: 0 4px 15px rgba(168, 85, 247, 0.25);
        transform: translateY(-2px);
    }

    .plan-badge {
        font-size: 0.65rem !important;
        margin-top: 2px;
    }

    /* Badges de Colores por Plan */
    .quality-pill[data-plan="premium"] .plan-badge { color: #fbbf24; } /* Oro */
    .quality-pill[data-plan="pro"] .plan-badge { color: #60a5fa; }     /* Azul */
    .quality-pill[data-plan="vip"] .plan-badge { color: #f472b6; }     /* Rosa/Diamante */

    /* Estilo para Opción Bloqueada */
    .quality-pill.locked {
        opacity: 0.5;
        cursor: not-allowed;
        grayscale: 1;
    }
    .quality-pill.locked::after {
        content: '\f023';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 0.6rem;
        color: rgba(255,255,255,0.4);
    }

    /* Mejora Fila Marca de Agua */
    .watermark-premium-row {
        background: linear-gradient(90deg, rgba(168, 85, 247, 0.05) 0%, transparent 100%);
        border-radius: 16px;
        padding: 15px !important;
        border: 1px solid rgba(168, 85, 247, 0.15) !important;
        margin: 10px 0;
    }

    .label-with-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
    }

    .badge-premium-mini {
        background: linear-gradient(90deg, #fbbf24, #f59e0b);
        color: #000;
        font-size: 10px;
        font-weight: 800;
        padding: 2px 6px;
        border-radius: 4px;
        letter-spacing: 0.5px;
    }

    .premium-switch .slider-modern {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    .premium-switch input:checked + .slider-modern {
        background: linear-gradient(90deg, #a855f7, #7c3aed) !important;
    }

    .lock-icon {
        position: absolute;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        color: #fff;
        opacity: 0.5;
        transition: 0.3s;
    }

    .premium-switch input:checked + .slider-modern .lock-icon {
        opacity: 0;
        transform: translateY(-50%) scale(0);
    }

    /* --- CONFIGURACIÓN MOBILE SUPER PREMIUM --- */
    #user-settings-view {
        padding: 0 !important;
        background: var(--bg-dark) !important;
    }

    .settings-modern-container {
        padding: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .view-header-pro {
        display: none !important; /* Ocultamos el header redundante en móvil */
    }

    .settings-list-layout {
        flex-direction: column !important;
        min-height: 100vh !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
        gap: 0 !important;
    }

    /* Navegación Compacta para ver todos los botones */
    .settings-sidebar-nav {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Asegura que no bajen */
        overflow-x: auto !important; /* Permite scroll si son muchos */
        justify-content: space-between !important; /* Distribuye si caben */
        padding: 10px 10px !important;
        background: transparent !important;
        border: none !important;
        gap: 6px !important; /* Reducido para que quepan más */
        position: relative;
        z-index: 100;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .settings-sidebar-nav::-webkit-scrollbar { display: none; }

    .nav-item-settings {
        flex: 1 1 auto !important; /* Se ajustan proporcionalmente */
        min-width: fit-content !important;
        padding: 8px 12px !important; /* Más compactos */
        border-radius: 50px !important;
        font-size: 0.75rem !important; /* Texto un poco más pequeño para mobile */
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.5) !important;
        display: flex !important;
        flex-direction: column !important; /* Icono arriba, texto abajo para ahorrar ancho */
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
    }

    .nav-item-settings.active {
        background: #a855f7 !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4) !important;
    }

    .nav-item-settings i {
        font-size: 1rem !important;
        opacity: 0.9;
    }

    .nav-item-settings.active {
        background: var(--primary) !important;
        color: #fff !important;
        border-color: var(--primary) !important;
        box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4) !important;
    }

    .nav-item-settings i {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }

    /* Contenido de los Ajustes */
    .settings-content-area {
        padding: 20px !important;
        background: transparent !important;
    }

    .section-header-modern {
        margin-bottom: 25px !important;
    }

    .section-header-modern h3 {
        font-size: 1.7rem !important;
        font-weight: 800 !important;
        margin-bottom: 5px !important;
    }

    /* Filas de Configuración */
    .setting-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 24px !important;
        padding: 20px !important;
        margin-bottom: 15px !important;
        gap: 15px !important;
    }

    .setting-info label {
        font-size: 1.1rem !important;
        margin-bottom: 6px !important;
        color: #fff !important;
    }

    .setting-info p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        opacity: 0.6 !important;
    }

    .setting-control {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Inputs Gigantes y Cómodos */
    .input-pro-v3 {
        width: 100% !important;
        height: 55px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border-radius: 15px !important;
        font-size: 1rem !important;
        padding: 0 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Botón de Guardar Pegado Abajo o Destacado */
    .section-footer-modern {
        margin-top: 20px !important;
        padding: 0 !important;
        border: none !important;
    }

    .btn-save-modern {
        width: 100% !important;
        height: 60px !important;
        border-radius: 18px !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        background: linear-gradient(135deg, #a855f7, #ec4899) !important;
        box-shadow: 0 10px 25px rgba(168, 85, 247, 0.4) !important;
    }

    .settings-content-area {
        padding: 20px 15px !important;
        max-height: none !important;
    }
    .section-header-modern h3 {
        font-size: 1.3rem !important;
    }
    .setting-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        padding: 20px !important;
    }
    .setting-info {
        padding-right: 0 !important;
    }
    .setting-control {
        width: 100% !important;
        display: flex;
        justify-content: flex-start;
    }
    .input-pro-v3 {
        width: 100% !important;
    }
    .section-footer-modern {
        justify-content: center !important;
    }
    .btn-save-modern {
        width: 100% !important;
        justify-content: center !important;
    }

    .user-account-popover {
        width: 92% !important;
        max-width: 360px !important;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 28px !important;
        padding-bottom: 20px;
    }

    .popover-header {
        padding: 20px !important;
    }

    .popover-body {
        padding: 15px !important;
    }

    .popover-stats-grid {
        grid-template-columns: 1fr 1fr !important; /* Mantener 2 columnas pero ajustar padding */
        gap: 10px !important;
    }

    .p-stat-item {
        padding: 15px 10px !important;
        border-radius: 22px !important;
    }

    .p-stat-item i {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
        margin-bottom: 2px !important;
    }

    .stat-info span {
        font-size: 0.9rem !important;
        font-weight: 800 !important;
    }

    .expiry-premium-box {
        padding: 12px !important;
        margin-bottom: 15px !important;
    }

    .countdown-timer {
        font-size: 1.3rem !important;
        letter-spacing: 1px !important;
    }

    .btn-popover-action {
        padding: 14px !important;
        font-size: 0.9rem !important;
        border-radius: 16px !important;
    }

    .popover-footer {
        padding: 0 15px 10px 15px !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .user-dashboard-grid {
        gap: 20px !important;
        padding: 5px !important; /* Menos padding lateral para aprovechar pantalla */
    }

    .stats-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .premium-downloader-card {
        padding: 35px 20px !important;
        margin: 0 !important;
        border-radius: 30px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .premium-header-box h3 {
        font-size: 2rem !important;
    }

    .premium-input-wrapper input {
        font-size: 1.1rem !important;
        padding: 20px !important;
        border-radius: 18px !important;
    }

    .btn-premium-v3 {
        height: 60px !important;
        font-size: 1.1rem !important;
        border-radius: 18px !important;
    }
}

    .header-left h1 {
        font-size: 1.2rem !important;
    }

    .header-left p {
        font-size: 0.75rem !important;
        display: none; /* Ocultar subtítulo para ahorrar espacio */
    }

    .admin-hamburger {
        display: flex;
        width: 45px;
        height: 45px;
        background: rgba(255,255,255,0.05);
        border: 1px solid var(--card-border);
        border-radius: 12px;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: #fff;
    }

    .header-right {
        gap: 10px;
    }

    .header-user-avatar {
        width: 38px !important;
        height: 38px !important;
    }

    /* Grid de Estadísticas en Móvil */
    .stats-grid-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }

    .stat-box {
        padding: 15px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        border-radius: 20px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .stat-data h2 {
        font-size: 1.2rem;
    }

    .stat-data .label {
        font-size: 0.6rem;
    }

    /* Tablas en Móvil (Modo Tarjeta para Usuarios) */
    .table-responsive {
        background: transparent;
        border-radius: 0;
        padding: 0;
        margin-bottom: 20px;
        overflow-x: visible;
    }

    .admin-table, .admin-table thead, .admin-table tbody, .admin-table th, .admin-table td, .admin-table tr {
        display: block;
    }

    .admin-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .admin-table tbody tr {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        margin-bottom: 15px;
        padding: 15px;
        position: relative;
    }

    .admin-table td {
        border: none;
        padding: 8px 0;
        padding-left: 40%;
        position: relative;
        text-align: left;
        min-height: 35px;
    }

    .admin-table td:first-child {
        padding-left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 10px;
        padding-bottom: 15px;
    }

    .admin-table td:before {
        position: absolute;
        left: 0;
        width: 35%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        color: var(--text-muted);
        font-size: 0.7rem;
        text-transform: uppercase;
    }

    /* Etiquetas dinámicas para tablas usando data-label o clases específicas */
    #fullUsersTableBody tr td:nth-of-type(2):before { content: "Plan"; }
    #fullUsersTableBody tr td:nth-of-type(3):before { content: "Consumo"; }
    #fullUsersTableBody tr td:nth-of-type(4):before { content: "Registro"; }
    #fullUsersTableBody tr td:nth-of-type(5):before { content: "Acciones"; }

    #globalDownloadsTableBody tr td:nth-of-type(2):before { content: "Usuario"; }
    #globalDownloadsTableBody tr td:nth-of-type(3):before { content: "Plataforma"; }
    #globalDownloadsTableBody tr td:nth-of-type(4):before { content: "Fecha"; }

    .admin-table td:first-child:before { content: ""; }

    .user-info-cell {
        justify-content: flex-start;
    }

    .btn-action-pro {
        width: 100%;
        margin-top: 5px;
    }

    /* Buscador del Panel */
    .panel-search-section-pro {
        padding: 20px;
        border-radius: 24px;
    }

    .panel-search-pro {
        flex-direction: column;
        padding: 8px;
        border-radius: 20px;
    }

    .input-wrapper-pro {
        width: 100%;
        padding-left: 15px;
    }

    .panel-search-pro input {
        padding: 12px 10px;
    }

    .panel-search-pro button {
        height: 52px;
        width: 100%;
        justify-content: center;
        border-radius: 14px;
    }
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .stats-grid-top {
        grid-template-columns: 1fr 1fr;
    }

    .view-header-pro h1 {
        font-size: 1.5rem;
    }

    .promo-banner-card {
        padding: 25px 20px;
    }

    .promo-content h3 {
        font-size: 1.2rem;
    }

    .btn-upgrade-promo {
        padding: 12px 20px;
        font-size: 0.8rem;
    }
}

/* MEJORAS DE UI PARA VISTAS INTERNAS (MÓVIL) */
@media (max-width: 1024px) {
    /* Ocultamos el saludo completamente en móvil */
    #userGreeting, .header-left h1#userGreeting {
        display: none !important;
    }

    #userSubGreeting {
        font-size: 0.7rem;
    }

    /* Grid de Nube / Archivos */
    .cloud-files-grid {
        grid-template-columns: 1fr !important; /* Una sola columna en móvil */
        gap: 15px;
    }

    .cloud-file-card {
        flex-direction: row;
        padding: 12px;
        align-items: center;
    }

    .file-thumb {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 0 !important;
        margin-right: 15px;
    }

    /* Historial de Descargas (Panel) */
    .history-item-pro {
        padding: 12px;
        gap: 12px;
    }

    .hist-icon {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }

    .hist-info strong {
        font-size: 0.85rem;
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Buscador del Panel - Responsive */
    .panel-search-pro {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .panel-search-pro .input-wrapper-pro {
        width: 100%;
        padding-left: 15px;
    }

    .panel-search-pro button {
        width: 100%;
        height: 55px;
        justify-content: center;
    }

    /* Sidebar - Perfil inferior */
    .admin-user-bottom {
        padding: 15px;
        background: rgba(255,255,255,0.03);
        border-top: 1px solid var(--card-border);
    }
}

/* Animación de entrada para los paneles */
@keyframes slideInRight {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.user-panel-view {
    display: none;
    flex-direction: column;
    gap: 30px;
    padding: 10px;
    animation: viewFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.user-panel-view.active {
    display: flex !important;
}

@keyframes viewFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.view-transition-out {
    animation: viewFadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    display: block !important;
}

@keyframes viewFadeOut {
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.98);
        filter: blur(10px);
    }
}

/* HIGH-DENSITY USER CARDS PREMIUM */
.users-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 10px 0;
}

@media (max-width: 480px) {
    .users-grid-premium {
        grid-template-columns: 1fr;
        padding: 5px;
    }
}

.user-card-premium {
    background: var(--card-glass);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 24px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
    will-change: transform, box-shadow, border-color;
    transform: translateZ(0);
}

.user-card-premium:hover {
    border-color: var(--primary);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px var(--primary-glow);
    background: rgba(255, 255, 255, 0.05);
    transform: none !important;
}

.user-card-premium .card-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-card-premium .avatar-wrapper {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.user-card-premium .avatar {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
    border: 2px solid var(--card-border);
}

.user-card-premium .status-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid var(--panel-bg);
}

.user-card-premium .status-indicator.online { background: var(--success); box-shadow: 0 0 10px var(--success); }

.user-card-premium .user-main-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.user-card-premium .user-main-info strong {
    font-size: 1.1rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.3px;
}

.user-card-premium .user-main-info span {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-card-premium .card-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: rgba(255, 255, 255, 0.02);
    padding: 15px;
    border-radius: 16px;
}

.user-card-premium .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-card-premium .info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-card-premium .info-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.user-card-premium .usage-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-card-premium .mini-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
}

.user-card-premium .mini-progress-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 10px;
    box-shadow: 0 0 10px var(--primary-glow);
}

.user-card-premium .card-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.user-card-premium .btn-action-pro {
    flex: 1;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid var(--card-border);
}

.user-card-premium .btn-action-pro.edit:hover {
    background: var(--primary);
    border-color: var(--primary-light);
    box-shadow: 0 0 15px var(--primary-glow);
}

@media (max-width: 768px) {
    /* HERO OPTIMIZATION - ULTRA LUXURY MOBILE */
    .hero {
        padding: 160px 15px 40px;
        min-height: 85vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: var(--bg-dark) !important;
    }

    .hero-visual-background {
        display: none !important;
    }

    .floating-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(20, 20, 30, 0.9) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
        will-change: transform;
    }

    /* Posiciones dinámicas optimizadas para móvil */
    .icon-tiktok { top: 10%; left: 8%; transform: rotate(-12deg); }
    .icon-instagram { top: 14%; right: 8%; transform: rotate(12deg); }
    .icon-bolt { top: 35%; left: 2%; opacity: 0.4; }
    .icon-video { bottom: 25%; left: 6%; transform: rotate(-20deg); }
    .icon-youtube { bottom: 18%; right: 8%; transform: rotate(15deg); }

    .hero-title {
        font-size: 2.2rem !important;
        margin-bottom: 15px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: -1.5px;
    }

    .hero-title span {
        background: linear-gradient(to right, #a855f7, #ec4899);
        -webkit-background-clip: text;
        background-clip: text;
        filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.3));
    }

    .hero-subtitle {
        font-size: 0.88rem;
        margin-bottom: 35px;
        padding: 0 5%;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.75);
    }

    .main-search-area {
        width: 100%;
        max-width: 400px;
        z-index: 30;
    }

    .search-box-container {
        padding: 10px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(168, 85, 247, 0.5);
        border-radius: 24px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(168, 85, 247, 0.1);
    }

    .search-box-container input {
        padding: 18px;
        font-size: 0.95rem;
        text-align: center;
        margin-bottom: 10px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 18px;
    }

    .search-box-container button {
        width: 100%;
        padding: 18px;
        font-size: 1.05rem;
        font-weight: 800;
        border-radius: 18px;
        background: linear-gradient(135deg, #a855f7, #ec4899);
        box-shadow: 0 10px 25px rgba(168, 85, 247, 0.5);
        animation: pulseButton 2s infinite ease-in-out;
    }

    @keyframes pulseButton {
        0% { transform: scale(1); box-shadow: 0 10px 25px rgba(168, 85, 247, 0.5); }
        50% { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(168, 85, 247, 0.7); }
        100% { transform: scale(1); box-shadow: 0 10px 25px rgba(168, 85, 247, 0.5); }
    }

    .platform-tags {
        display: none !important;
    }

    .p-tag-simple {
        padding: 8px 18px;
        font-size: 0.75rem;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 50px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        backdrop-filter: blur(10px);
    }
}

    .search-box-container button {
        width: 100%;
        padding: 16px;
        justify-content: center;
        font-size: 1rem;
        font-weight: 700;
        border-radius: 15px;
        box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3);
    }

    .platform-tags {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 25px;
    }

    .p-tag-simple {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
}

/* PANEL SEARCH OPTIMIZATION */
@media (max-width: 1024px) {
    .panel-search-section-pro {
        margin-bottom: 25px;
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(6, 182, 212, 0.1));
        border: 1px solid rgba(168, 85, 247, 0.2);
    }

    .panel-search-pro {
        flex-direction: column;
        gap: 12px;
    }

    .panel-search-pro .input-wrapper-pro {
        width: 100%;
    }

    .panel-search-pro button {
        width: 100%;
        height: 55px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .stats-grid-top { grid-template-columns: 1fr; }
    .admin-main-content { padding: 15px; }
    .stat-box { padding: 20px; }
}

/* SEARCH AREA */
.main-search-area { width: 100%; max-width: 850px; margin: 0 auto; position: relative; }

.platform-tags {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.p-tag {
    padding: 12px 24px;
    border-radius: 100px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-tag i { font-size: 1rem; opacity: 0.7; }

.p-tag:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.2);
}

.p-tag.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 10px 20px rgba(168, 85, 247, 0.2);
}

.p-tag.active i { opacity: 1; }

.terms-text { margin-top: 25px; font-size: 0.85rem; color: var(--text-muted); text-align: center; opacity: 0.7; }
.terms-text a { color: var(--primary); text-decoration: underline; }

/* MODAL */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px); z-index: 100000;
    display: flex; align-items: center; justify-content: center;
}
.modal-content.glass { background: rgba(13, 15, 26, 0.8); backdrop-filter: blur(30px); border: 1px solid var(--card-border); border-radius: 30px; width: 500px; }

/* --- PIN MODAL STYLES --- */
.pin-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 700;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: #ffd700;
    color: #ffd700;
    transform: scale(1.1);
}

.pin-btn:active {
    transform: scale(0.9);
}

.pin-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0 5px;
    transition: all 0.2s ease;
}

.pin-dot.filled {
    background: #ffd700;
    box-shadow: 0 0 10px #ffd700;
    border-color: #fff;
}

/* AUTH MODAL SPECIFIC */
.auth-modal-content {
    text-align: center;
    padding: 50px 40px !important;
    max-width: 450px !important;
    position: relative;
    animation: authModalEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes authModalEnter {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.auth-modal-header .logo-icon {
    margin: 0 auto 20px;
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
    background: rgba(168, 85, 247, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.auth-modal-header h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #fff;
    letter-spacing: -1px;
}

.auth-modal-header p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 35px;
    line-height: 1.5;
}

.btn-google-auth {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: #fff;
    color: #000;
    padding: 16px;
    border-radius: 18px;
    font-weight: 700;
    font-size: 1.05rem;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}

.btn-google-auth:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3), 0 0 20px rgba(255,255,255,0.1);
    background: #f8fafc;
}

.btn-google-auth img {
    width: 24px;
}

.auth-divider {
    margin: 30px 0;
    position: relative;
    border-top: 1px solid var(--card-border);
}

.auth-divider span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #0d0f1a;
    padding: 0 20px;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
}

.auth-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 20px;
}

.close-auth-modal {
    position: absolute;
    top: 25px;
    right: 25px;
    color: var(--text-muted);
    font-size: 1.2rem;
    background: rgba(255,255,255,0.05);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.close-auth-modal:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
    transform: rotate(90deg);
}

/* TOAST NOTIFICATIONS */
.toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast {
    background: rgba(13, 15, 26, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    padding: 15px 25px;
    border-radius: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 280px;
}
.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }
.toast i { font-size: 1.2rem; }
.toast.success i { color: var(--success); }
.toast.error i { color: var(--danger); }

@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.toast.fade-out {
    animation: toastFadeOut 0.3s forwards;
}
@keyframes toastFadeOut {
    to { transform: translateX(100%); opacity: 0; }
}

@media (max-width: 768px) {
    /* CLEANUP & ULTRA-PREMIUM MOBILE */
    .hero {
        padding: 120px 20px 40px;
        min-height: 95vh;
        justify-content: center;
        overflow: hidden;
        background: transparent !important; /* Permitimos ver las estrellas del bgAnimation */
    }

    .hero-visual-background {
        display: none !important; /* Quitamos los iconos flotantes en móvil */
    }

    .platform-tags, .hero-badges {
        display: none !important; /* Quitamos las etiquetas de redes sociales en móvil */
    }

    .hero-title {
        font-size: 2.4rem !important;
        line-height: 1.1;
        margin-bottom: 20px;
        font-weight: 800;
        letter-spacing: -1.5px;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 35px;
        padding: 0 8%;
        color: rgba(255,255,255,0.6);
        line-height: 1.5;
    }

    .search-box-container {
        flex-direction: column;
        padding: 10px;
        gap: 10px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(168, 85, 247, 0.4);
        border-radius: 24px;
        backdrop-filter: blur(20px);
    }

    .search-box-container input {
        width: 100%;
        padding: 15px;
        text-align: center;
        font-size: 0.95rem;
        background: rgba(0,0,0,0.2);
        border-radius: 16px;
    }

    .search-box-container button {
        width: 100%;
        padding: 18px;
        font-size: 1.1rem;
        font-weight: 800;
        border-radius: 16px;
        background: linear-gradient(135deg, #a855f7, #ec4899);
        box-shadow: 0 10px 20px rgba(168, 85, 247, 0.4);
    }

    .platform-tags {
        display: none !important;
    }

    .p-tag-simple {
        padding: 6px 14px;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-radius: 100px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        gap: 6px;
        color: rgba(255,255,255,0.5);
        box-shadow: none;
    }

    .p-tag-simple i {
        font-size: 0.85rem;
    }

    .p-tag-simple.tiktok i { color: #fff !important; opacity: 0.7; }
    .p-tag-simple.youtube i { color: #ff0000 !important; opacity: 0.7; }
    .p-tag-simple.instagram i {
        background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888, #8a3ab9, #4c68d7);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        opacity: 0.8;
    }

    .how-it-works { padding: 80px 20px; }
    .section-title { margin-bottom: 40px; font-size: 2.2rem !important; letter-spacing: -1px; }
    .section-tag { font-size: 0.7rem; letter-spacing: 2px; margin-bottom: 10px; }

    .steps-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px;
        width: 100%;
    }

    .step {
        width: 100% !important;
        max-width: 100% !important;
        padding: 45px 25px;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 32px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        backdrop-filter: blur(15px);
        margin: 0;
        position: relative;
    }

    .step-icon {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
        border-radius: 24px;
        margin: 0 auto 25px;
        font-size: 2rem;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.1);
    }

    .step h3 { font-size: 1.6rem; margin-bottom: 12px; font-weight: 800; }
    .step p { font-size: 1rem; line-height: 1.5; color: rgba(255,255,255,0.6); }

    .step-arrow {
        transform: rotate(90deg);
        margin: 5px auto;
        font-size: 1.5rem;
        opacity: 0.3;
        color: var(--primary);
    }

    /* PRICING MOBILE OPTIMIZATION - ESTILO ORIGINAL PERO COMPACTO */
    .pricing { padding: 15px 10px; }

    .user-panel-view {
        gap: 10px !important;
        padding: 5px !important;
    }

    .user-plans-header {
        margin-bottom: 10px !important;
        text-align: center;
    }

    .view-title-main {
        font-size: 1.6rem !important;
        margin-bottom: 4px !important;
        font-weight: 900;
    }

    .view-subtitle-main {
        font-size: 0.85rem !important;
        line-height: 1.3;
        margin-bottom: 10px !important;
    }

    /* Selector de Meses: Estilo Original Redondeado */
    .user-pricing-picker,
    .pricing-duration-picker {
        width: 100% !important;
        max-width: 100% !important;
        gap: 5px !important;
        padding: 5px !important;
        margin: 10px auto 20px !important;
        display: flex !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 50px !important;
        position: relative;
    }

    .duration-btn {
        padding: 12px 2px !important;
        font-size: 0.8rem !important;
        flex: 1;
        border-radius: 50px !important;
        border: none !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-weight: 700 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative;
        overflow: visible !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .duration-btn.active {
        background: #fff !important;
        color: #000 !important;
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2) !important;
        transform: scale(1.05);
    }

    /* Badge TOP: Posicionamiento limpio */
    .duration-btn[data-duration="12"]::before {
        content: 'TOP' !important;
        position: absolute !important;
        top: -8px !important;
        right: 0px !important;
        background: #fbbf24 !important;
        color: #000 !important;
        font-size: 0.5rem !important;
        padding: 2px 5px !important;
        border-radius: 10px !important;
        font-weight: 900 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
        z-index: 10 !important;
        line-height: 1 !important;
        border: 1px solid #0f1019 !important;
    }

    /* Tarjetas: Look Original Premium */
    .pricing-cards-container,
    .pricing-cards {
        gap: 15px !important;
        margin-top: 5px !important;
        padding: 0 5px;
        width: 100% !important;
    }

    .price-card {
        padding: 30px 20px !important;
        border-radius: 24px !important;
        background: rgba(15, 16, 25, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin-bottom: 10px !important;
        width: 100% !important;
    }

    .price-card .price {
        font-size: 3rem !important;
        margin: 10px 0 !important;
        font-weight: 900 !important;
        letter-spacing: -1.5px !important;
    }

    .price-card .card-plan-name {
        font-size: 1.6rem !important;
        margin-bottom: 5px !important;
        font-weight: 900 !important;
    }

    .price-card .feat-list {
        margin: 20px 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .price-card .feat-list li {
        font-size: 0.95rem !important;
        margin-bottom: 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }


    .price-card .feat-list {
        margin: 15px 0 !important;
        text-align: left;
        padding-left: 0;
    }

    .price-card .feat-list li {
        font-size: 0.85rem !important;
        margin-bottom: 8px !important;
        list-style: none;
    }

    .price-card .btn-choose-plan {
        padding: 12px !important;
        font-size: 0.85rem !important;
        border-radius: 12px !important;
    }

    .price-card.popular {
        transform: scale(1.02);
    }

    /* Comparación mobile */
    .comparison-container {
        display: none;
    }

    /* TESTIMONIALS MOBILE OPTIMIZATION */
    .testimonials { padding: 60px 20px; }
    .testimonials-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
        width: 100%;
        padding: 0;
    }
    .test-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 35px 25px;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(15px);
        margin: 0;
    }
    .test-card p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 20px;
        font-style: italic;
        color: rgba(255,255,255,0.85);
    }
    .test-stars {
        margin-bottom: 15px;
        font-size: 0.75rem;
        justify-content: flex-start;
    }
    .test-user {
        margin-top: 5px;
        padding-top: 15px;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .test-user img {
        width: 45px;
        height: 45px;
        border-radius: 12px;
    }
    .test-user div strong { font-size: 1rem; }
    .test-user div span { font-size: 0.8rem; opacity: 0.5; }

    /* FAQ MOBILE OPTIMIZATION */
    .faq-section { padding: 60px 20px; }
    .faq-item {
        border-radius: 20px;
        margin-bottom: 15px;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .faq-question { padding: 20px 25px; }
    .faq-question h3 { font-size: 1rem; line-height: 1.4; padding-right: 10px; }
    .faq-answer { background: rgba(0,0,0,0.1); }
    .faq-item.active .faq-answer { padding: 0 25px 20px; }
    .footer {
        padding: 60px 20px 30px;
        border-top: 1px solid rgba(255,255,255,0.05);
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 0;
        text-align: center;
    }

    .f-links {
        padding: 20px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .f-links:last-of-type {
        border-bottom: none;
    }

    .f-links h4 {
        font-size: 1.1rem;
        color: #fff;
        margin-bottom: 20px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .f-links a {
        display: block;
        padding: 10px 0;
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.5);
        transition: 0.3s;
    }

    .f-links a:hover {
        color: var(--primary);
    }
    .f-brand {
        text-align: center;
        padding: 40px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .f-brand .nav-brand {
        font-size: 2.5rem !important;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
    }

    .f-brand p {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.5);
        max-width: 300px;
        margin: 0 auto;
        line-height: 1.6;
    }
    .f-social {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .social-icons {
        justify-content: center;
    }
    .footer-bottom {
        margin-top: 50px;
        font-size: 0.8rem;
    }

    /* TRUST BAR MOBILE OPTIMIZATION - ULTRA PREMIUM LIST */
    .trust-bar {
        padding: 40px 20px;
        margin: 40px 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
        background: transparent;
        border: none;
    }

    .trust-item {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-left: 4px solid var(--primary); /* Neon Accent */
        border-radius: 24px;
        padding: 20px 25px;
        backdrop-filter: blur(25px) saturate(200%);
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 20px;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    }

    .trust-item:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(168, 85, 247, 0.3);
        box-shadow: 0 20px 40px rgba(168, 85, 247, 0.15);
    }

    .trust-item::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(168, 85, 247, 0.05), transparent);
        pointer-events: none;
    }

    .trust-item i {
        font-size: 1.6rem;
        width: 54px;
        height: 54px;
        min-width: 54px;
        background: rgba(168, 85, 247, 0.15);
        border: 1px solid rgba(168, 85, 247, 0.3);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-shadow: 0 0 10px var(--primary-glow);
        margin: 0;
        box-shadow: 0 8px 20px rgba(168, 85, 247, 0.2);
    }

    .trust-item div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        z-index: 1;
    }

    .trust-item strong {
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        display: block;
        letter-spacing: -0.2px;
    }

    .trust-item span {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.45);
        line-height: 1.3;
    }

}

/* ==========================================================================
   ANIMACIÓN DE FONDO - ESTRELLAS FUGACES
   ========================================================================== */
#bgAnimation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
    background: radial-gradient(circle at bottom, #0a0b1e 0%, #05060f 100%);
    pointer-events: none;
}

.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: 0.6;
    animation: starPulse var(--duration) ease-in-out infinite;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 15px var(--primary-glow);
}

@keyframes starPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}



/* Bulk Downloader Premium */
.bulk-input-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bulk-textarea {
    width: 100%;
    height: 200px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 20px;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition);
    resize: vertical;
}

.bulk-textarea:focus {
    border-color: var(--primary);
    background: rgba(168, 85, 247, 0.03);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.1);
}

.bulk-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

@media (max-width: 600px) {
    .bulk-controls {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .bulk-controls span {
        font-size: 0.8rem;
    }
}

.bulk-progress-item {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--card-border);
    padding: 15px 20px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    transition: var(--transition);
    animation: fadeInUp 0.4s ease-out;
}

.bulk-progress-item:hover {
    background: rgba(255,255,255,0.04);
    transform: translateX(5px);
}

@media (max-width: 500px) {
    .bulk-progress-item {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .bulk-progress-item button {
        width: 100%;
    }
}

/* Modal Legal Styling */
.modal-legal-content {
    max-width: 800px !important;
    max-height: 80vh;
    overflow-y: auto;
    padding: 40px !important;
}

.modal-legal-content h3 {
    color: var(--primary);
    margin: 25px 0 15px;
    font-size: 1.4rem;
}

.modal-legal-content p {
    color: var(--text-muted);
    margin-bottom: 15px;
    line-height: 1.8;
}

.legal-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    background: rgba(13, 15, 26, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--primary);
    border-radius: 20px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    z-index: 999999;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    animation: slideUp 0.5s ease-out;
}

.legal-banner p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.legal-banner p a {
    color: var(--primary);
    text-decoration: underline;
}

.btn-accept-legal {
    background: var(--primary);
    color: #fff;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ==========================================================================
   ESTILOS PREMIUM - IDENTIDAD VISUAL (ROADMAP STEP 1)
   ========================================================================== */
.avatar-vip {
    border: 3px solid transparent !important;
    background: linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
                linear-gradient(45deg, #ffd700, #fff, #b8860b) border-box !important;
    animation: vipAuraPulse 2s infinite linear;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important;
    will-change: filter, box-shadow;
    transform: translateZ(0);
}

.avatar-pro {
    border: 3px solid transparent !important;
    background: linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
                linear-gradient(45deg, #00d2ff, #fff, #3a7bd5) border-box !important;
    animation: proAuraPulse 2s infinite linear;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.4) !important;
    will-change: filter, box-shadow;
    transform: translateZ(0);
}

@keyframes vipAuraPulse {
    0% { filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4)); }
    50% { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)); }
    100% { filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4)); }
}

@keyframes proAuraPulse {
    0% { filter: drop-shadow(0 0 5px rgba(0, 210, 255, 0.4)); }
    50% { filter: drop-shadow(0 0 15px rgba(0, 210, 255, 0.8)); }
    100% { filter: drop-shadow(0 0 5px rgba(0, 210, 255, 0.4)); }
}

.badge-vip-crown {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    animation: crownFloat 2s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
    margin-left: 5px;
}

.badge-pro-check {
    color: #00d2ff;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.8);
    margin-left: 5px;
}

@keyframes crownFloat {
    0%, 100% { transform: translateZ(0) translateY(0) rotate(0); }
    50% { transform: translateZ(0) translateY(-3px) rotate(5deg); }
}

.is-vip {
    background: rgba(255, 215, 0, 0.05) !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(255, 215, 0, 0.05) !important;
}

/* Engine Status Styles */
.engine-status {
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

@keyframes slideUp {
    from { transform: translate(-50%, 100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* --- OPTIMIZACIÓN MÓVIL TARJETA NUBE --- */
.mobile-optimized-card {
    padding: 20px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
}

/* --- ESTILO ELITE CARD (SEGÚN IMAGEN) --- */
.dl-limit-card {
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.dl-limit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #a855f7, #ec4899);
}

.card-header-elite {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.header-label-technical {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1.5px;
}

.status-indicator-online {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-size: 10px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 1px;
}

.card-content-elite-grid {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    position: relative;
}

/* Círculo de Progreso */
.progress-circle-container {
    flex-shrink: 0;
    position: relative;
    background: rgba(168, 85, 247, 0.03);
    padding: 12px;
    border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.1);
    box-shadow: inset 0 0 20px rgba(168, 85, 247, 0.05);
}

.elite-circle {
    position: relative;
    width: 80px;
    height: 80px;
}

.circle-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 2;
}

.circle-inner span {
    color: #fff;
    font-weight: 900;
    font-size: 26px;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.circle-svg {
    width: 80px;
    height: 80px;
    transform: rotate(-90deg);
}

.circle-svg circle {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
}

.circle-svg .bg {
    stroke: rgba(255, 255, 255, 0.05);
}

.circle-svg .prog {
    stroke: url(#grad-purple);
    stroke-dasharray: 201; /* 2 * PI * r (32) */
    stroke-dashoffset: 201;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.5));
}

/* Info Central */
.stats-info-elite {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.title-row-dash {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Empuja el timer a la derecha */
    width: 100%;
}

.stats-info-elite h3 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
}

.stats-info-elite p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin: 6px 0 0 0;
    font-weight: 500;
}

/* Caja de Reset Lado Derecho (PC) */
.reset-box-elite {
    background: rgba(10, 11, 18, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 18px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.reset-box-elite::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), transparent, rgba(236, 72, 153, 0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.reset-box-elite:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(168, 85, 247, 0.3);
    background: rgba(15, 16, 25, 0.95);
}

.reset-tag {
    display: block;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 2px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.timer-wrapper-elite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.timer-wrapper-elite span {
    font-size: 19px;
    font-weight: 900;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}
    justify-content: flex-end;
    gap: 8px;
}

.timer-wrapper-elite i {
    color: #a855f7;
    font-size: 14px;
}

.timer-wrapper-elite span {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}



.title-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.6);
}

.title-with-icon i { color: var(--primary); }

.storage-badge {
    background: linear-gradient(135deg, #3b82f6, #22c55e);
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 800;
}

.main-stats-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.storage-value-group .big-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(to bottom, #fff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.storage-value-group .unit {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
}

.total-label {
    margin-top: 5px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

/* Progreso Circular Mini */
.circular-progress-mini {
    position: relative;
    width: 60px;
    height: 60px;
}

.circular-progress-mini svg { transform: rotate(-90deg); }

.circular-progress-mini .bg {
    fill: none;
    stroke: rgba(255,255,255,0.05);
    stroke-width: 5;
}

.circular-progress-mini .progress {
    fill: none;
    stroke: var(--primary);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 163.36;
    stroke-dashoffset: 163.36;
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.circular-progress-mini .center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.9rem;
    opacity: 0.3;
}

.storage-description {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
    margin-bottom: 20px;
}

.btn-manage-cloud-full {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 14px;
    border-radius: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    transition: 0.3s;
    cursor: pointer;
}

.btn-manage-cloud-full:active {
    background: rgba(255,255,255,0.1);
    transform: none !important;
}

.arrow-end {
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.4;
}

/* Ajustes Sidebar Mobile */
@media (max-width: 1024px) {
    .admin-nav .user-nav-link i {
        min-width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.05);
    }
}

/* ==========================================================================
   USER SETTINGS - ULTRA PREMIUM GLASSMORPHISM
   ========================================================================== */
.settings-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.view-header-pro {
    margin-bottom: 30px;
}

.view-header-pro h1 {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 10px;
}

.settings-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 0;
    overflow: visible !important; /* FORZAR VISIBILIDAD */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
}

body.light-mode .settings-card {
    background: #ffffff !important;
    border-color: #f1f5f9 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04) !important;
}

.settings-card:hover {
    transform: translateY(-5px);
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
}

.settings-body {
    padding: 24px;
    flex-grow: 1;
    overflow: visible !important;
}

.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: visible !important;
}

body.light-mode .settings-item {
    border-bottom-color: #f1f5f9;
}

.settings-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.item-info label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #f8fafc;
    margin-bottom: 4px;
}

body.light-mode .item-info label {
    color: #1e293b;
}

.item-info p {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.4;
}

/* Footer de la tarjeta con botón de guardar */
.settings-footer {
    padding: 15px 24px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: flex-end;
}

body.light-mode .settings-footer {
    background: #f8fafc;
    border-top-color: #f1f5f9;
}

.btn-save-mini {
    padding: 10px 20px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-save-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(124, 58, 237, 0.3);
    filter: brightness(1.1);
}

/* Custom Premium Select */
.premium-select-v2 {
    position: relative;
    width: 240px;
    z-index: 1000;
}

.ps-trigger {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    z-index: 10;
    user-select: none !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.ps-trigger span, .ps-trigger i {
    pointer-events: none !important;
}

/* Evita que los iconos/texto roben el clic */
.ps-trigger *, .ps-option * {
    pointer-events: none;
}

body.light-mode .ps-trigger {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #1e293b;
}

.ps-trigger:hover {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.05);
}

.ps-options {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    width: 260px;
    background: #111421 !important;
    border: 2px solid #7c3aed !important;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8) !important;
    z-index: 999999 !important;
    display: none;
    overflow: visible !important;
    pointer-events: auto !important;
}

.ps-options * {
    pointer-events: auto !important;
}

.ps-options.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.light-mode .ps-options {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.ps-options.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.ps-option {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

body.light-mode .ps-option {
    border-bottom-color: #f1f5f9;
}

.ps-option:last-child { border: none; }

.ps-option:hover:not(.locked) {
    background: rgba(124, 58, 237, 0.1);
}

.ps-option.selected {
    background: rgba(124, 58, 237, 0.15);
}

.ps-option i {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #7c3aed;
}

.ps-option-info {
    display: flex;
    flex-direction: column;
}

.ps-option-info strong {
    font-size: 0.85rem;
    color: #f8fafc;
}

body.light-mode .ps-option-info strong {
    color: #1e293b;
}

.ps-option-info span {
    font-size: 0.7rem;
    color: #94a3b8;
}

.ps-badge {
    margin-left: auto;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 700;
}

.ps-badge.pro { background: #0ea5e9; color: white; }
.ps-badge.vip { background: #e11d48; color: white; }

.ps-option.locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(0,0,0,0.2);
}

.ps-option.locked i {
    filter: grayscale(1);
}

.ps-option.locked .ps-option-info strong::after {
    content: ' 🔒';
}

body.light-mode .settings-item {
    border-bottom-color: #f1f5f9;
}

.settings-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.item-info label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

.item-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.settings-body {
    padding: 30px;
}
}

.item-info label {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 4px;
}

.item-info p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.item-action {
    min-width: 200px;
    flex-shrink: 0;
}

/* Premium Glow Effects */
.premium-glow {
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.15), inset 0 0 15px rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.3) !important;
}

.vip-aura {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.1), inset 0 0 20px rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.3) !important;
}

.premium-glow .icon-box-pro {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

.vip-aura .icon-box-pro {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

/* Switch Pro Style */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider.round {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    transition: .4s;
    border-radius: 34px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider.round:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider.round {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

input:checked + .slider.round:before {
    transform: translateX(20px);
    background-color: #fff;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

.slider.round:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #94a3b8;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.admin-btn-danger-outline {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 140px;
}

.admin-btn-danger-outline:hover {
    background: #ef4444;
    color: white;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

@media (max-width: 900px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .item-action {
        width: 100%;
        min-width: unset;
    }
}


/* --- MEJORA PREMIUM: Modo Streamer / Privacidad de Alta Fidelidad --- */
.streamer-mode-active .blur-sensitive {
    filter: blur(14px) !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
    user-select: none !important;
    pointer-events: none !important;
    color: transparent !important;
    text-shadow: none !important;
    background: rgba(168, 85, 247, 0.05) !important;
    border: 1px solid rgba(168, 85, 247, 0.15) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Efecto de Cristal Líquido con Shimmer Púrpura/Rosa */
.streamer-mode-active .blur-sensitive::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(168, 85, 247, 0.15) 45%,
        rgba(236, 72, 153, 0.15) 55%,
        transparent 70%
    );
    background-size: 300% 100%;
    animation: premium-privacy-shimmer 2.5s infinite linear;
    z-index: 10;
    backdrop-filter: blur(20px);
}

/* Icono de Privacidad Holográfico */
.streamer-mode-active .blur-sensitive::after {
    content: "\f3ed"; /* fa-shield-alt */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 11;
    opacity: 0.8;
    filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.5));
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Optimización para avatares y badges circulares */
.streamer-mode-active .header-avatar-wrapper.blur-sensitive,
.streamer-mode-active .popover-avatar-wrapper.blur-sensitive,
.streamer-mode-active .popover-plan-badge.blur-sensitive {
    border-radius: 50% !important;
}

@keyframes premium-privacy-shimmer {
    0% { background-position: -150% 0; }
    100% { background-position: 150% 0; }
}

.streamer-mode-active .blur-sensitive:hover {
    filter: blur(14px) !important;
}

/* --- DISEÑO DE CONFIGURACIÓN MODERNO (Layout en Listado) --- */
.settings-modern-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.settings-list-layout {
    display: flex;
    gap: 30px;
    margin-top: 30px;
    background: rgba(15, 12, 25, 0.4);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    min-height: 600px;
}

/* Sidebar de Navegación */
.settings-sidebar-nav {
    width: 250px;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-item-settings {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

.nav-item-settings i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.nav-item-settings:hover {
    background: rgba(168, 85, 247, 0.1);
    color: #fff;
}

.nav-item-settings.active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
    color: #fff;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Área de Contenido */
.settings-content-area {
    flex: 1;
    padding: 30px;
}

.section-header-modern {
    margin-bottom: 30px;
}

.section-header-modern h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 5px;
}

.section-header-modern p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

/* Filas de Ajustes (Listado) */
.settings-list-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 15px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.setting-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(168, 85, 247, 0.2);
}

.setting-info {
    flex: 1;
}

.setting-info label {
    display: block;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.setting-info p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
}

.setting-control {
    margin-left: 20px;
}

/* Inputs y Controles v3 */
.input-pro-v3 {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 10px 15px !important;
    border-radius: 10px !important;
    width: 250px;
    outline: none !important;
    transition: all 0.3s ease;
}

.input-pro-v3:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.2) !important;
}

.input-pro-v3:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Footer de Sección */
.section-footer-modern {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: flex-end;
}

.btn-save-modern {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-save-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3);
}

/* Switches Modernos */
.switch-modern {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch-modern input { opacity: 0; width: 0; height: 0; }

.slider-modern {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .4s;
    border-radius: 34px;
}

/* --- TABLA COMPARATIVA DE PLANES (ULTRA PREMIUM) --- */
.comparison-container {
    margin-top: 80px;
    padding: 0 20px;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.comparison-table-wrapper {
    background: rgba(15, 12, 25, 0.4);
    backdrop-filter: blur(25px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* Efecto de luz interna superior */
.comparison-table-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.4), transparent);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center; /* Centramos datos por defecto */
}

.comparison-table th, .comparison-table td {
    padding: 22px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
}

/* Alineación de la primera columna */
.comparison-table .feature-name {
    text-align: left;
    width: 34%;
    padding-left: 35px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

.comparison-table th {
    background: rgba(255, 255, 255, 0.03);
    padding: 25px 20px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
}

/* Columnas de Planes */
.plan-col { width: 22%; }

/* Resaltado de Columnas Pro y VIP */
.col-pro {
    background: rgba(168, 85, 247, 0.02);
}

.col-vip {
    background: rgba(255, 215, 0, 0.02);
}

/* Fila VIP especial */
.comparison-table tr:hover td.col-vip {
    background: rgba(255, 215, 0, 0.05);
}

.comparison-table tr:hover td.col-pro {
    background: rgba(168, 85, 247, 0.05);
}

/* Iconos de Check y Cross mejorados */
.check-icon {
    color: #10b981;
    font-size: 1.2rem;
    filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.3));
}

.times-icon {
    color: #ef4444;
    opacity: 0.6;
    font-size: 1.1rem;
}

/* Textos de Planes en Header */
.premium-text {
    color: #a855f7 !important;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.vip-text {
    color: #ffd700 !important;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* Tags de valor dentro de la tabla */
.value-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

.tag-free { color: rgba(255, 255, 255, 0.5); }
.tag-pro { background: rgba(168, 85, 247, 0.1); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.2); }
.tag-vip { background: rgba(255, 215, 0, 0.1); color: #ffd700; border: 1px solid rgba(255, 215, 0, 0.2); }

@media (max-width: 900px) {
    .comparison-table-wrapper { overflow-x: auto; }
    .comparison-table { min-width: 800px; }
    .comparison-table .feature-name { padding-left: 20px; }
}

input:checked + .slider-modern { background: #a855f7; }
input:checked + .slider-modern:before { transform: translateX(20px); }

/* --- AJUSTES DE ESPACIADO Y ORDEN --- */
.settings-modern-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 20px 20px; /* Reducido arriba para subir el contenido */
    animation: fadeInSettings 0.5s ease-out;
}

.view-header-pro {
    margin-bottom: 20px; /* Reducido de 40px */
}

.view-header-pro h1 {
    font-size: 2.2rem; /* Un poco más compacto */
    margin-bottom: 5px;
}

.settings-list-layout {
    display: flex;
    gap: 0;
    margin-top: 15px; /* Reducido de 30px */
    background: rgba(13, 10, 20, 0.4); /* Un poco más transparente */
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    min-height: 500px; /* Asegura un tamaño consistente */
}

/* Sidebar Estilizada */
.settings-sidebar-nav {
    width: 240px; /* Reducido de 280px para dar más espacio al contenido */
    background: rgba(0, 0, 0, 0.2);
    padding: 20px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-item-settings {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
}

.nav-item-settings i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    transition: transform 0.3s ease;
}

.nav-item-settings:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

.nav-item-settings:hover i {
    transform: scale(1.1);
}

.nav-item-settings.active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.15));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.3);
}

/* Área de Contenido Optimizada */
.settings-content-area {
    flex: 1;
    padding: 30px 40px; /* Reducido padding superior */
    background: transparent;
    max-height: 650px;
    overflow-y: auto;
}

.section-header-modern {
    margin-bottom: 25px; /* Reducido de 35px */
}

.section-header-modern h3 {
    font-size: 1.6rem; /* Un poco más compacto */
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}

/* Filas con mejor aprovechamiento de espacio */
.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px; /* Más compacto */
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.setting-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(168, 85, 247, 0.2);
    transform: translateX(5px);
}

.setting-info {
    flex: 1;
    padding-right: 40px; /* Espacio para que el texto no choque con el control */
}

.setting-control {
    flex-shrink: 0; /* Evita que el control se encoja */
}

/* Botón Danger Moderno */
.btn-danger-modern {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-danger-modern:hover {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
}

/* Efecto de clic para botones */
.admin-icon-btn:active, .header-user-profile:active {
    transform: scale(0.92);
    background: rgba(168, 85, 247, 0.2);
}

.notification-btn, .header-user-profile {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Notification Center Styles */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px 0;
}

.notification-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    gap: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.notification-item.unread {
    border-left: 4px solid var(--primary);
    background: rgba(168, 85, 247, 0.05);
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.notification-content {
    flex-grow: 1;
}

.notification-content h4 {
    margin: 0 0 5px 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.notification-content p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.notification-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 8px;
    display: block;
}

/* ESTILOS PREMIUM PARA MODALES DE L�MITE */
.limit-swal-popup {
    border-radius: 28px !important;
    background: rgba(11, 13, 23, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.15) !important;
    padding: 2rem !important;
}

.limit-swal-title {
    color: #ffffff !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}

.limit-swal-icon {
    margin: 20px auto !important;
    animation: none !important;
}

@keyframes pulseIcon {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.4)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.7)); }
}

.limit-swal-button-confirm {
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    border-radius: 14px !important;
    padding: 14px 28px !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3) !important;
}

.limit-swal-button-cancel {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
    border-radius: 14px !important;
    padding: 14px 24px !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}


/* --- ELITE ULTIMATE OVERRIDE --- */
body.is-vip-user .server-status-card-elite, body.is-pro-user .server-status-card-elite, #user-panel.is-vip-user .server-status-card-elite, #user-panel.is-pro-user .server-status-card-elite { display: none !important; opacity: 0 !important; visibility: hidden !important; position: absolute !important; pointer-events: none !important; }
.ultra-downloader-v3 { position: relative; background: rgba(10, 11, 18, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; padding: 35px !important; border-radius: 30px !important; z-index: 1; }
.ultra-downloader-v3::before { content: " \; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(90deg, #fbbf24, #a855f7, #3b82f6, #fbbf24); background-size: 400% 400%; z-index: -1; border-radius: 32px; animation: elite-glow 3s linear infinite; }
@keyframes elite-glow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.btn-elite-process { background: #ffffff !important; color: #000 !important; box-shadow: 0 0 25px rgba(255, 255, 255, 0.4) !important; border: none !important; font-weight: 900 !important; }

/* --- USER ANALYTICS PREMIUM V4.0 ELITE --- */
/* --- NEXUS ANALYTICS ULTIMATE PREMIUM --- */
.nexus-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    padding: 0 10px;
}

.nexus-badge-elite {
    background: linear-gradient(90deg, #e5e7eb, #9ca3af);
    color: #000;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 4px;
    letter-spacing: 2px;
    display: inline-block;
    margin-bottom: 10px;
}

.nexus-main-title {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    letter-spacing: -2px;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nexus-accent {
    color: #a855f7;
    -webkit-text-fill-color: #a855f7;
    margin-left: 5px;
}

.nexus-subtitle {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
    margin-top: 10px;
}

/* Status Orb */
.nexus-status-orb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.orb-core {
    width: 12px;
    height: 12px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 20px #10b981;
    position: relative;
}

.orb-ring {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 50%;
    animation: orbPulse 2s infinite;
}

@keyframes orbPulse {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

.orb-label {
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: #10b981;
}

/* Metrics Grid */
.nexus-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.nexus-card {
    background: rgba(20, 22, 35, 0.4);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nexus-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(30, 32, 50, 0.6);
}

.metric-card {
    padding: 30px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.metric-icon {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.pulse-purple .metric-icon { color: #a855f7; }
.pulse-gold .metric-icon { color: #fbbf24; }
.pulse-blue .metric-icon { color: #3b82f6; }
.pulse-green .metric-icon { color: #10b981; }

.metric-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1.5px;
}

.metric-value {
    font-size: 2.2rem;
    font-weight: 900;
    margin: 5px 0;
}

.metric-trend {
    font-size: 0.75rem;
    font-weight: 700;
}

.metric-trend.up { color: #10b981; }

/* Main Container Layout */
.nexus-main-container {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 25px;
}

/* Terminal Card */
.terminal-card {
    background: #0a0b14;
    border: 1px solid #1a1b26;
    display: flex;
    flex-direction: column;
}

.terminal-header {
    background: #11121d;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1a1b26;
}

.terminal-dots { display: flex; gap: 6px; }
.terminal-dots span { width: 8px; height: 8px; border-radius: 50%; }
.terminal-dots span:nth-child(1) { background: #ff5f56; }
.terminal-dots span:nth-child(2) { background: #ffbd2e; }
.terminal-dots span:nth-child(3) { background: #27c93f; }

.terminal-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
}

.chart-wrapper-nexus {
    padding: 30px;
    height: 400px;
}

.terminal-footer {
    padding: 15px 20px;
    background: #11121d;
    border-top: 1px solid #1a1b26;
    display: flex;
    gap: 30px;
}

.t-stat { font-size: 0.65rem; font-family: 'JetBrains Mono', monospace; }
.t-stat span { color: rgba(255, 255, 255, 0.3); }
.t-stat strong { color: #a855f7; margin-left: 5px; }

/* Dominance & Storage Panel */
.dominance-card {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.card-inner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-inner-header h3 {
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.6);
}

.nexus-platform-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.p-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.p-info { display: flex; align-items: center; gap: 10px; }

.nexus-p-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    overflow: hidden;
}

.tk-neon { background: #ff0050; box-shadow: 0 0 10px #ff0050; }
.ig-neon { background: #e1306c; box-shadow: 0 0 10px #e1306c; }
.yt-neon { background: #ff0000; box-shadow: 0 0 10px #ff0000; }

.nexus-storage-box {
    margin-top: auto;
    background: rgba(168, 85, 247, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.1);
    border-radius: 15px;
    padding: 20px;
}

.box-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-bottom: 10px;
}

.box-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.box-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #a855f7, #6366f1);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
    border-radius: inherit;
    transition: width 1s ease;
}

/* Animations */
.metric-scanline {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: scanline 4s linear infinite;
}

@keyframes scanline {
    0% { top: -10%; }
    100% { top: 110%; }
}
.gold-grad { background: linear-gradient(90deg, #fbbf24, #f59e0b); box-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }

/* RESPONSIVE */
@media (max-width: 1200px) {
    .analytics-main-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .user-stats-grid-premium {
        grid-template-columns: 1fr;
    }

    .analytics-card {
        padding: 20px;
    }

    .chart-container-elite {
        height: 250px;
    }

    .stat-value-group h2 {
        font-size: 1.8rem;
    }
}